:root{
  --the7-teal:#04F2E7;
  --the7-cyan:#6AF7F0;
  --the7-iron:#111418;
  --the7-graphite:#1B2026;
  --the7-rust:#B44D3A;
  --the7-white:#F2F4F6;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--the7-white);
  background:var(--the7-iron);
  line-height:1.55;
  text-rendering:optimizeLegibility;
}

/* 背景噪点层 */
.noise-layer{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.06;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.15) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,.2) 0 1px, transparent 1px);
  background-size:3px 3px, 3px 3px, 3px 3px;
  animation:noiseShift 1s steps(2) infinite;
}
@keyframes noiseShift{
  50%{transform:translate3d(1px,0,0)}
  100%{transform:translate3d(0,0,0)}
}

/* 扫描线层 */
.scanline-layer{
  position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.08;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(255,255,255,.15) 50%);
  background-size:100% 2px;
  animation:scan 6s linear infinite;
}
@keyframes scan{
  0%{transform:translateY(-100%)}
  100%{transform:translateY(100%)}
}

/* 页眉 */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:5;
  background:linear-gradient(180deg, rgba(27,32,38,.9), rgba(27,32,38,0));
  backdrop-filter:saturate(120%) blur(6px);
}
.nav{display:flex; gap:20px; padding:10px 16px; justify-content:flex-end}
.nav-link{
  color:#bcd; text-decoration:none; font-size:12px; letter-spacing:.08em;
  padding:6px 8px; border:1px solid transparent; border-radius:6px;
}
.nav-link:hover,.nav-link:focus-visible{border-color:var(--the7-teal); outline:none}

/* HERO 居中布局 */
.hero{
  position:relative; z-index:2; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; padding:96px 20px 64px;
  text-align:center;
}
.logo{
  width:220px;           /* 固定宽度 */
  height:auto;
  margin-bottom:24px;    /* 与标题拉开距离 */
  filter:drop-shadow(0 0 14px rgba(4,242,231,.18));
  animation:pulse 1.2s ease-in-out infinite;
}
.title{
  margin:0; font-size:clamp(28px,5vw,56px); letter-spacing:.12em; font-weight:600;
  text-shadow:0 0 18px rgba(4,242,231,.22);
}
.subtitle{
  margin:0 0 4px; color:#cfe; opacity:.9; font-size:clamp(14px,2.2vw,18px); letter-spacing:.1em;
}
.lead{max-width:820px; margin:0 auto 8px; color:#c8d2d9; opacity:.9}
.cta{
  display:inline-block; margin-top:8px; padding:10px 18px; letter-spacing:.12em; font-weight:600;
  color:var(--the7-teal); border:1px solid var(--the7-teal); border-radius:10px; text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(4,242,231,.25);
}
.cta:hover,.cta:focus-visible{
  background:rgba(4,242,231,.1); text-shadow:0 0 8px rgba(4,242,231,.6); outline:none
}

/* 章节 */
.section{position:relative; z-index:2; padding:72px 20px; max-width:980px; margin:0 auto}
.section-title{font-size:24px; letter-spacing:.08em; margin:0 0 12px}
.section-text{color:#c8d2d9; margin:0 0 10px}
.how-list{margin:0 0 10px 18px; color:#c8d2d9}
.faint{opacity:.8}

/* Story 样式 */
.story .story-block{margin:16px 0 8px}
.story-h3{margin:0 0 6px; font-size:18px; letter-spacing:.08em; color:#e9f4f6}
.clues{
  list-style:none; padding:0; margin:6px 0 0;
  display:flex; flex-direction:column; gap:12px;
}
.clues li{
  border:1px solid rgba(4,242,231,.18);
  background:linear-gradient(180deg, rgba(27,32,38,.65), rgba(27,32,38,.35));
  border-radius:12px; padding:12px 14px;
}
.clues h4{
  margin:0 0 6px; font-size:16px; letter-spacing:.06em; color:#e9f4f6;
  text-shadow:0 0 10px rgba(4,242,231,.12);
}
.clues p{margin:0; color:#c8d2d9}

/* Verify 样式 */
.verify-form{display:flex; flex-direction:column; gap:10px}
.input{
  width:100%; padding:10px 12px; resize:vertical; min-height:84px;
  font-family:inherit; font-size:14px; color:var(--the7-white);
  background:rgba(27,32,38,.65); border:1px solid rgba(4,242,231,.18); border-radius:10px;
}
.input:focus{outline:none; border-color:var(--the7-teal); box-shadow:0 0 0 1px rgba(4,242,231,.25)}
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{
  padding:10px 16px; font-weight:600; letter-spacing:.12em; cursor:pointer;
  color:var(--the7-teal); background:transparent; border:1px solid var(--the7-teal); border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(4,242,231,.25);
}
.btn:hover,.btn:focus-visible{outline:none; background:rgba(4,242,231,.1)}
.btn.ghost{color:#cfe; border-color:rgba(255,255,255,.25)}
.status{min-height:24px; padding:6px 0; font-size:14px}
.status.ok{color:var(--the7-teal)}
.status.no{color:var(--the7-rust)}
.hint{font-size:13px}

/* Notice + 光标闪烁 */
.notice{ text-align:center; padding-bottom:96px}
.notice p{ margin:.6em 0; font-size:clamp(16px,2.4vw,22px)}
.cursor{ margin-left:6px; animation:blink 1s steps(2, jump-none) infinite}
@keyframes blink{50%{opacity:0}}

/* 霓虹呼吸 */
@keyframes pulse{
  0%{filter:drop-shadow(0 0 8px rgba(4,242,231,.10))}
  50%{filter:drop-shadow(0 0 18px rgba(4,242,231,.35))}
  100%{filter:drop-shadow(0 0 8px rgba(4,242,231,.10))}
}

/* 轻度 glitch */
.glitch{ position:relative }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; right:0; top:0; bottom:0; mix-blend-mode:screen; opacity:.08; pointer-events:none
}
.glitch::before{ transform:translateX(-1px) }
.glitch::after{ transform:translateX(1px) }

/* 隐藏文本（无障碍） */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 页脚 */
.footer{position:relative; z-index:2; text-align:center; padding:24px 16px 48px; color:#aab3ba}

/* 响应式 */
@media (max-width:720px){
  .nav{ justify-content:center }
}

/* 减少动效模式 */
@media (prefers-reduced-motion: reduce){
  .noise-layer,.scanline-layer{display:none}
  .logo,.cursor{animation:none}
  .glitch::before,.glitch::after{display:none}
}