:root{
  --bg:#07090b; --bg2:#0a0d10; --surface:#0d1216; --surface2:#10171c;
  --line:#19222a; --line2:#26323c;
  --text:#c4ccd2; --dim:#6b7780; --faint:#39434b;
  --mint:#4ef2c0; --mint-soft:rgba(78,242,192,.10); --mint-line:rgba(78,242,192,.30);
  --amber:#f2c14e; --red:#ff5d6c;
  --maxw:1180px;
  --mono:"IBM Plex Mono","PingFang SC","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK SC","Microsoft YaHei","Malgun Gothic","Apple SD Gothic Neo",ui-monospace,monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg); color:var(--text); font-family:var(--mono); font-weight:400; line-height:1.65; letter-spacing:.01em; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-size:15px;}
.bg-fx{position:fixed; inset:0; z-index:0; pointer-events:none;}
.bg-fx .glow{position:absolute; border-radius:50%; filter:blur(120px); opacity:.5;}
.bg-fx .g1{top:-22%; left:-12%; width:48vw; height:48vw; background:radial-gradient(circle, rgba(78,242,192,.16), transparent 70%);}
.bg-fx .g2{bottom:-30%; right:-18%; width:52vw; height:52vw; background:radial-gradient(circle, rgba(60,90,120,.18), transparent 70%);}
.grid-fx{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%); mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);}
.scan{position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.35; background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);}
.grain{position:fixed; inset:0; z-index:61; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.statusbar{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:rgba(7,9,11,.78); backdrop-filter:blur(10px);}
.statusbar .row{max-width:var(--maxw); margin:0 auto; padding:11px 28px; display:flex; align-items:center; gap:16px; font-size:12.5px; letter-spacing:.04em;}
.brand{display:flex; align-items:center; gap:9px; color:var(--text); font-weight:600; text-decoration:none; letter-spacing:.02em;}
.brand .mark{color:var(--mint); font-size:14px; text-shadow:0 0 10px rgba(78,242,192,.6);}
.sb-spacer{flex:1;}
.sb-item{color:var(--dim); display:none;}
.sb-item b{color:var(--text); font-weight:500;}
.lang{display:flex; border:1px solid var(--line2); border-radius:3px; overflow:hidden;}
.lang button{background:transparent; border:0; border-right:1px solid var(--line); color:var(--dim); font-family:var(--mono); font-size:11.5px; padding:4px 9px; cursor:pointer; letter-spacing:.03em; transition:.15s;}
.lang button:last-child{border-right:0;}
.lang button.on{background:var(--mint-soft); color:var(--mint);}
.lang button:hover{color:var(--text);}
.pill{display:inline-flex; align-items:center; gap:7px; color:var(--mint); border:1px solid var(--mint-line); padding:3px 10px; border-radius:2px; background:var(--mint-soft); font-size:11.5px; letter-spacing:.08em;}
.dot{width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px var(--mint); animation:pulse 1.8s infinite;}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.35; transform:scale(.8);}}
@media(min-width:880px){ .sb-item{display:inline;} }
.rv{opacity:0; transform:translateY(8px); animation:rv .7s cubic-bezier(.2,.7,.2,1) forwards;}
@keyframes rv{to{opacity:1; transform:none;}}
.hero{padding:78px 0 64px;}
.boot{font-size:13px; color:var(--dim); line-height:2.0; margin-bottom:40px; max-width:680px;}
.boot .ok{color:var(--mint);} .boot .warn{color:var(--red);} .boot .num{color:var(--amber);}
.boot .ln{white-space:pre-wrap;}
.tag{display:inline-block; font-size:12px; letter-spacing:.18em; color:var(--mint); text-transform:uppercase; border:1px solid var(--mint-line); padding:5px 12px; border-radius:2px; margin-bottom:26px; background:var(--mint-soft);}
h1{font-size:clamp(34px,6.2vw,68px); font-weight:600; line-height:1.04; letter-spacing:-.02em; color:#eef3f5;}
h1 .lo{color:var(--mint); text-shadow:0 0 24px rgba(78,242,192,.35);}
.lead{margin-top:24px; max-width:620px; font-size:16px; color:var(--dim); line-height:1.75;}
.lead b{color:var(--text); font-weight:500;}
.cursor{display:inline-block; width:11px; height:1.05em; background:var(--mint); margin-left:3px; vertical-align:-2px; animation:blink 1.05s steps(1) infinite; box-shadow:0 0 10px rgba(78,242,192,.7);}
@keyframes blink{50%{opacity:0;}}
.cta{margin-top:40px; display:flex; flex-wrap:wrap; gap:14px;}
.btn{font-family:var(--mono); font-size:13.5px; letter-spacing:.03em; text-decoration:none; padding:13px 22px; border-radius:3px; border:1px solid var(--line2); color:var(--text); transition:.18s; display:inline-flex; gap:9px; align-items:center;}
.btn:hover{border-color:var(--line2); background:var(--surface2); transform:translateY(-1px);}
.btn.primary{background:var(--mint); color:#04140f; border-color:var(--mint); font-weight:600;}
.btn.primary:hover{box-shadow:0 0 26px rgba(78,242,192,.4); background:#67f6cd;}
section{padding:62px 0; position:relative;}
.shead{display:flex; align-items:baseline; gap:14px; margin-bottom:38px; border-top:1px solid var(--line); padding-top:22px;}
.shead .idx{color:var(--mint); font-size:12.5px; letter-spacing:.1em;}
.shead h2{font-size:clamp(20px,2.6vw,27px); font-weight:600; color:#e7eef0; letter-spacing:-.01em;}
.shead .meta{margin-left:auto; color:var(--faint); font-size:12px; letter-spacing:.05em; display:none;}
@media(min-width:780px){ .shead .meta{display:block;} }
.signals{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:820px){ .signals{grid-template-columns:1fr 1fr;} }
.card{border:1px solid var(--line); background:linear-gradient(180deg,var(--surface),var(--bg2)); border-radius:5px; padding:30px 28px 28px; position:relative; overflow:hidden; transition:.22s;}
.card:hover{border-color:var(--mint-line); transform:translateY(-3px);}
.card:hover .corner{opacity:1;}
.corner{position:absolute; top:0; right:0; width:46px; height:46px; opacity:.4; transition:.22s; background:linear-gradient(225deg, var(--mint-soft), transparent 60%);}
.corner::after{content:""; position:absolute; top:11px; right:11px; width:14px; height:14px; border-top:1.5px solid var(--mint); border-right:1.5px solid var(--mint);}
.card .sig-id{font-size:11.5px; color:var(--mint); letter-spacing:.14em; margin-bottom:14px;}
.card h3{font-size:19px; font-weight:600; color:#e9eff1; margin-bottom:6px; letter-spacing:-.01em;}
.card .sub{font-size:13px; color:var(--faint); letter-spacing:.04em; margin-bottom:20px;}
.card p{font-size:14px; color:var(--dim); line-height:1.72;}
.card p em{color:var(--mint); font-style:normal;}
.card p .neg{color:var(--red); font-style:normal;}
.viz{height:120px; margin:6px 0 22px; display:block; width:100%;}
.viz .grid-l{stroke:var(--line2); stroke-width:1;}
.conv-line{stroke:var(--dim); stroke-width:1.4; fill:none; stroke-dasharray:200; stroke-dashoffset:200; animation:draw 1.6s ease forwards;}
.conv-node{fill:var(--mint); filter:drop-shadow(0 0 6px rgba(78,242,192,.8));}
.src-dot{fill:var(--faint);}
@keyframes draw{to{stroke-dashoffset:0;}}
.l-narr{stroke:var(--mint); stroke-width:2; fill:none; stroke-dasharray:220; stroke-dashoffset:220; animation:draw 1.7s .1s ease forwards; filter:drop-shadow(0 0 5px rgba(78,242,192,.5));}
.l-price{stroke:var(--red); stroke-width:2; fill:none; stroke-dasharray:220; stroke-dashoffset:220; animation:draw 1.7s .25s ease forwards;}
.how{display:grid; grid-template-columns:1fr; gap:18px;}
@media(min-width:820px){ .how{grid-template-columns:1fr 1fr;} }
.term{border:1px solid var(--line); border-radius:5px; background:var(--surface); overflow:hidden;}
.term .bar{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg2);}
.term .bar .d{width:9px; height:9px; border-radius:50%; background:var(--faint);}
.term .bar .t{margin-left:8px; font-size:11.5px; color:var(--dim); letter-spacing:.05em;}
.term pre{padding:18px 16px; font-size:12.6px; line-height:1.85; overflow-x:auto; color:var(--text);}
.term pre .c{color:var(--faint);} .term pre .k{color:var(--mint);} .term pre .s{color:var(--amber);} .term pre .p{color:var(--dim);}
.out{border:1px solid var(--line); border-radius:5px; background:var(--surface); overflow:hidden;}
.out .bar{display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--bg2); font-size:11.5px; color:var(--dim); letter-spacing:.05em; gap:8px;}
.out .bar .live{margin-left:auto; color:var(--mint); display:flex; align-items:center; gap:7px;}
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.otbl{width:100%; border-collapse:collapse; font-size:13px;}
.otbl th{text-align:left; padding:13px 16px; color:var(--faint); font-weight:500; font-size:11px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line);}
.otbl td{padding:14px 16px; border-bottom:1px solid var(--line); color:var(--dim); vertical-align:middle;}
.otbl tr:last-child td{border-bottom:0;}
.otbl tr:hover td{background:var(--surface2);}
.otbl .nm{color:var(--text); font-weight:500;}
.otbl .src{color:var(--faint); font-size:11.5px;}
.bar-str{display:inline-block; height:5px; background:var(--mint); border-radius:3px; vertical-align:middle; box-shadow:0 0 6px rgba(78,242,192,.5);}
.lab{display:inline-block; font-size:11px; letter-spacing:.06em; padding:3px 9px; border-radius:2px; white-space:nowrap;}
.lab.flow{color:var(--mint); border:1px solid var(--mint-line); background:var(--mint-soft);}
.lab.noflow{color:var(--red); border:1px solid rgba(255,93,108,.3); background:rgba(255,93,108,.08);}
.lab.neu{color:var(--amber); border:1px solid rgba(242,193,78,.28); background:rgba(242,193,78,.07);}
.chg.up{color:var(--mint);} .chg.dn{color:var(--red);}
.cap{color:var(--faint); font-size:12.5px; margin-top:14px; letter-spacing:.03em;}
.access{border:1px solid var(--mint-line); border-radius:6px; background:linear-gradient(180deg,var(--surface),var(--bg2)); padding:46px 34px; text-align:center; position:relative; overflow:hidden;}
.access::before{content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%, var(--mint-soft), transparent 70%);}
.access h2{position:relative; font-size:clamp(22px,3.2vw,32px); font-weight:600; color:#eef3f5; letter-spacing:-.01em;}
.access p{position:relative; color:var(--dim); margin-top:14px; font-size:14px;}
.prompt{position:relative; margin:30px auto 0; max-width:520px; display:flex; border:1px solid var(--line2); border-radius:4px; background:var(--bg); overflow:hidden;}
.prompt span{padding:0 6px 0 16px; color:var(--mint); align-self:center; font-weight:600;}
.prompt input{flex:1; background:transparent; border:0; outline:0; color:var(--text); font-family:var(--mono); font-size:14px; padding:15px 8px;}
.prompt input::placeholder{color:var(--faint);}
.prompt button{background:var(--mint); color:#04140f; border:0; font-family:var(--mono); font-weight:600; font-size:13px; padding:0 22px; cursor:pointer; letter-spacing:.03em; transition:.18s;}
.prompt button:hover{background:#67f6cd;}
.access .note{position:relative; margin-top:16px; font-size:12px; color:var(--faint); letter-spacing:.04em;}
footer{border-top:1px solid var(--line); margin-top:30px;}
footer .row{max-width:var(--maxw); margin:0 auto; padding:26px 28px; display:flex; flex-wrap:wrap; gap:16px; align-items:center; font-size:12px; color:var(--faint); letter-spacing:.04em;}
footer .row .ep{color:var(--dim);}
footer .row .sp{flex:1;}
::selection{background:rgba(78,242,192,.25); color:#eef3f5;}
a{color:inherit;}

/* a11y: keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--mint);
  outline-offset:2px;
  border-radius:2px;
}
.lang button:focus-visible{
  border-radius:0;
  outline-offset:-2px;
}

/* responsive: ≤480px */
@media (max-width:480px){
  .wrap{padding:0 16px;}
  .statusbar .row{padding:10px 16px; flex-wrap:wrap; gap:10px;}
  .hero{padding:48px 0 40px;}
  .cta{gap:10px;}
  .btn{padding:11px 16px; font-size:12.5px;}
  section{padding:44px 0;}
  .shead{padding-top:16px; margin-bottom:28px;}
  .card{padding:22px 18px 20px;}
  .term pre{padding:14px 12px; font-size:12px;}
  .otbl th, .otbl td{padding:10px 12px;}
  .access{padding:32px 20px;}
  .prompt{flex-wrap:wrap;}
  .prompt input{padding:12px 8px; font-size:13px;}
  .prompt button{padding:10px 16px; width:100%;}
  footer .row{padding:20px 16px;}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important; animation:none !important;}
  .dot{animation:none !important; opacity:1;}
  .cursor{animation:none !important; opacity:1;}
  .scan{display:none !important;}
  .grain{display:none !important;}
  .conv-line, .l-narr, .l-price{animation:none !important; stroke-dashoffset:0 !important;}
}