/* 基础重置 */
* { box-sizing: border-box; margin:0; padding:0; }

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color:#333;
    background-image: url('../雨晴_6_original.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* header 样式 */
.site-header {
    background:#222;
    color:white;
    padding:10px 20px;
}
.site-header h1 { font-size:1.8rem; margin-bottom:0.5em; }
.site-header nav a { color:#eee; text-decoration:none; margin-right:15px; }
.site-header nav a:hover { color:#9fdc39; }

/* 主内容布局 */
.mc-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
}

.card-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Card styles adapted to primary color #9fdc39 */
.outer {
  width: 100%;
  background: radial-gradient(circle 230px at 0% 0%, #ffffff, #9fdc39);
  position: relative;
}

.dot {
  width: 5px; aspect-ratio: 1; position: absolute;
  background-color: #fff; box-shadow: 0 0 10px #ffffff; border-radius: 100px;
  z-index: 2; right: 10%; top: 10%; animation: moveDot 6s linear infinite;
}

@keyframes moveDot {
  0%, 100% {top: 10%; right: 10%;}
  25% {top: 10%; right: calc(100% - 35px);}
  50% {top: calc(100% - 30px); right: calc(100% - 35px);}
  75% {top: calc(100% - 30px); right: 10%;}
}

.card {
  z-index: 1; width: 100%; height: 100%; border-radius: 9px;
  border: solid 1px #202222; background-size: 20px 20px;
  background: radial-gradient(circle 280px at 0% 0%, #0c0d0d, #1a1a1a);
  display: flex; align-items: center; justify-content: center; position: relative;
  flex-direction: column; color: #fff;
}

.ray {
  width: 220px; height: 45px; border-radius: 100px; position: absolute;
  background-color: #c7c7c7; opacity: 0.4; box-shadow: 0 0 50px #fff; filter: blur(10px);
  transform-origin: 10%; top: 0; left: 0; transform: rotate(40deg);
}

.card .text {
  font-weight: bolder; font-size: clamp(2rem, 5vw, 4rem);
  background: linear-gradient(45deg, #9fdc39 0%, #fff 50%, #9fdc39 100%);
  background-clip: text; color: transparent;
  text-align: center;
}

.card .text div {
    margin: 2px 0;
}

.line { width: 100%; height: 1px; position: absolute; background-color: #2c2c2c; }
.topl { top: 10%; background: linear-gradient(90deg, #888888 30%, #1d1f1f 70%); }
.bottoml { bottom: 10%; }
.leftl { left: 10%; width: 1px; height: 100%; background: linear-gradient(180deg, #747474 30%, #222424 70%); }
.rightl { right: 10%; width: 1px; height: 100%; }

/* 特色部分 */
.features {
    margin-top: 40px;
    text-align: center;
}
ul { list-style-type: none; padding: 20px; }
li::before { content:"•"; color:#9fdc39; display:inline-block; width:1em; margin-left:-1em; }

.footer { text-align:center; margin-top:40px; font-size:.9rem; color:#666; padding-bottom: 20px;}