:root{--ink: #0a0e13;--ink-2: #0c1118;--panel: #111823;--panel-2: #16202d;--line: #243344;--line-soft: rgba(148, 163, 184, .14);--text: #e7edf4;--muted: #8ea0b4;--orange: #ff8a1f;--orange-hi: #ffa64d;--orange-soft: rgba(255, 138, 31, .13);--violet: #8b7cf7;--violet-soft: rgba(139, 124, 247, .13);--green: #8fe388;--green-soft: rgba(143, 227, 136, .13);--danger: #ff5c5c;--radius: 14px;--radius-sm: 9px;--font-display: "Chakra Petch", "Rajdhani", ui-sans-serif, system-ui, sans-serif;--font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font-body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}body:before{content:"";position:fixed;inset:-60%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg,transparent 0deg,rgba(139,124,247,.05) 36deg,transparent 80deg,transparent 180deg,rgba(255,138,31,.035) 220deg,transparent 270deg);animation:sweep 46s linear infinite}@keyframes sweep{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){body:before{animation:none}html{scroll-behavior:auto}}#app{position:relative;z-index:1}.container{width:min(1080px,calc(100% - 32px));margin:0 auto}.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);background:#0a0e13c7;border-bottom:1px solid var(--line-soft)}.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.04em;color:var(--text);text-decoration:none}.brand svg{flex:none}.brand em{font-style:normal;color:var(--orange)}.stage-strip{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}.stage-strip::-webkit-scrollbar{display:none}.stage-dot{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font-size:12.5px;color:var(--muted);white-space:nowrap;cursor:pointer;border:1px solid transparent;background:transparent;font-family:var(--font-body);transition:color .18s,background .18s,border-color .18s}.stage-dot:hover{color:var(--text)}.stage-dot .num{font-family:var(--font-mono);font-size:11px;opacity:.7}.stage-dot.active{color:var(--ink);background:var(--orange);border-color:var(--orange)}.stage-dot.active .num{color:#0a0e13bf}.stage-dot.done{color:var(--green)}.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius);padding:22px}.panel+.panel{margin-top:16px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:11px 20px;font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.03em;cursor:pointer;transition:transform .12s,box-shadow .2s,background .2s,border-color .2s;user-select:none}.btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--orange);color:#1a0e02;box-shadow:0 6px 24px -8px #ff8a1f8c}.btn-primary:hover{background:var(--orange-hi)}.btn-ghost{background:transparent;color:var(--text);border-color:var(--line)}.btn-ghost:hover{border-color:var(--violet);color:var(--violet)}.btn-green{background:var(--green);color:#0d1a0c;box-shadow:0 6px 24px -8px #8fe38880}.btn-green:hover{filter:brightness(1.08)}.btn:disabled{opacity:.45;cursor:not-allowed}.field{display:flex;flex-direction:column;gap:7px}.field label{display:flex;flex-direction:column;gap:2px;font-size:13.5px;font-weight:600;color:var(--text)}.field label .hint{font-size:12px;font-weight:400;color:var(--muted);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-mono);font-size:16px;padding:10px 12px;width:100%;transition:border-color .18s,box-shadow .18s}.input:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-soft)}.input[type=number]::-webkit-outer-spin-button,.input[type=number]::-webkit-inner-spin-button{opacity:1}.check{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13.5px;cursor:pointer}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.stat{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:12px 14px}.stat .label{font-size:12px;color:var(--muted)}.stat .value{font-family:var(--font-mono);font-size:21px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:12.5px;border:1px solid var(--line);color:var(--muted);background:var(--ink-2)}.chip.orange{color:var(--orange);border-color:#ff8a1f73;background:var(--orange-soft)}.chip.green{color:var(--green);border-color:#8fe38873;background:var(--green-soft)}.chip.violet{color:var(--violet);border-color:#8b7cf773;background:var(--violet-soft)}.step-head{display:flex;align-items:center;gap:14px;margin:34px 0 18px}.step-head .no{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--orange);border:1.5px solid var(--orange);border-radius:10px;padding:4px 10px;letter-spacing:.08em}.step-head h2{margin:0;font-family:var(--font-display);font-size:24px;font-weight:600;letter-spacing:.02em}.step-head p{margin:2px 0 0;color:var(--muted);font-size:13.5px}.test-wrap{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);background:var(--ink-2)}.test-canvas{display:block;width:100%;cursor:none;touch-action:none}.test-hud{position:absolute;inset:0;pointer-events:none;z-index:5}.hud-time{position:absolute;top:14px;right:18px;font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;background:#0a0e1399;border:1px solid var(--line-soft);border-radius:10px;padding:4px 12px}.hud-score{position:absolute;top:14px;left:18px;display:flex;gap:8px;align-items:center}.hud-score .chip{background:#0a0e1399}.test-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#080b10d1;backdrop-filter:blur(4px);text-align:center;padding:24px}.test-overlay h3{margin:0;font-family:var(--font-display);font-size:22px;font-weight:600}.test-overlay p{margin:0;color:var(--muted);font-size:14px;max-width:520px}.ready-number{font-family:var(--font-display);font-size:96px;font-weight:700;color:var(--orange);text-shadow:0 0 42px rgba(255,138,31,.5);line-height:1}.metrics-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%;max-width:640px}.metric{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:10px 14px;text-align:left}.metric .k{font-size:12px;color:var(--muted)}.metric .v{font-family:var(--font-mono);font-size:19px;font-weight:700}.result-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:stretch}@media(max-width:860px){.result-hero{grid-template-columns:1fr}}.result-number{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;background:radial-gradient(120% 120% at 50% 0%,rgba(255,138,31,.12),transparent 55%),linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line-soft);border-radius:var(--radius)}.result-number .big{font-family:var(--font-display);font-size:clamp(64px,12vw,110px);font-weight:700;line-height:1;color:var(--orange);font-variant-numeric:tabular-nums;text-shadow:0 10px 60px rgba(255,138,31,.35)}.result-number .sub{margin-top:6px;color:var(--muted);font-size:14px}.code-block{background:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-family:var(--font-mono);font-size:13.5px;color:var(--green);white-space:pre-wrap;word-break:break-all;position:relative}.steps-ol{margin:10px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:14px}.steps-ol b{color:var(--text);font-weight:600}.kbd{font-family:var(--font-mono);font-size:12px;background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:2px 7px;color:var(--text)}.note{font-size:12.5px;color:var(--muted);border-left:3px solid var(--violet);background:var(--violet-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:10px 14px}.warn{border-left-color:var(--orange);background:var(--orange-soft)}.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:26px;align-items:center;padding:54px 0 30px}@media(max-width:860px){.hero{grid-template-columns:1fr;padding-top:30px}}.hero h1{margin:0 0 12px;font-family:var(--font-display);font-size:clamp(34px,5.4vw,54px);font-weight:700;line-height:1.08;letter-spacing:.01em}.hero h1 .accent{color:var(--orange)}.hero .lead{color:var(--muted);font-size:16px;max-width:520px;margin:0 0 24px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}.hero-chips{display:flex;gap:8px;flex-wrap:wrap}.demo-box{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);box-shadow:0 30px 80px -30px #000c}.demo-box canvas{display:block;width:100%;cursor:none}.demo-label{position:absolute;left:14px;bottom:12px;font-size:12px;color:var(--muted);background:#0a0e13b8;border:1px solid var(--line-soft);border-radius:999px;padding:4px 12px;pointer-events:none}.footer{margin-top:56px;padding:26px 0 40px;border-top:1px solid var(--line-soft);color:var(--muted);font-size:12.5px}.footer a{color:var(--violet);text-decoration:none}.footer a:hover{text-decoration:underline}.fade-up{animation:fadeUp .5s ease both}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.fade-up{animation:none}}