:root{--bg: #080b0c;--bg-2: #0d1214;--panel: #10171a;--panel-2: #141d21;--line: #1e2a2e;--line-2: #27373c;--ink: #eef5f3;--ink-2: #c3d2ce;--muted: #7f928d;--muted-2: #5e6f6b;--brand: #0d9488;--accent: #2dd4bf;--danger: #f87171;--f-head: "Space Grotesk", system-ui, sans-serif;--f-body: "Inter", system-ui, sans-serif;--f-mono: "JetBrains Mono", ui-monospace, monospace;--rail: 88px;--col: 440px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;overflow:hidden}a{color:inherit}::selection{background:color-mix(in srgb,var(--accent) 40%,transparent)}.app{display:grid;grid-template-columns:var(--rail) var(--col) 1fr;height:100%;background:radial-gradient(1200px 800px at 85% -10%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),var(--bg)}.rail{grid-column:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0;background:var(--bg-2);border-right:1px solid var(--line);z-index:5}.rail-brand{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(140deg,var(--brand),#0f766e);color:#02110e;font-family:var(--f-head);font-weight:700;font-size:20px;margin-bottom:14px;box-shadow:0 6px 18px #0d948859}.rail-item{position:relative;width:52px;height:52px;display:grid;place-items:center;border:0;background:transparent;border-radius:13px;color:var(--muted);cursor:pointer;transition:color .18s,background .18s,transform .18s}.rail-item:hover{color:var(--ink-2);background:var(--panel);transform:translateY(-1px)}.rail-item.active{color:var(--accent);background:var(--panel-2)}.rail-item.active:before{content:"";position:absolute;left:-18px;top:50%;transform:translateY(-50%);width:3px;height:26px;border-radius:3px;background:var(--accent)}.rail-item svg{width:24px;height:24px}.rail-num{position:absolute;bottom:5px;right:7px;font-family:var(--f-mono);font-size:9px;color:var(--muted-2)}.rail-spacer{flex:1}.col{grid-column:2;position:relative;display:flex;flex-direction:column;padding:34px 32px 24px;background:linear-gradient(180deg,var(--bg-2),var(--bg));border-right:1px solid var(--line);overflow:hidden}.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}.col h1{font-family:var(--f-head);font-weight:700;font-size:clamp(30px,4vw,44px);line-height:1.02;margin:14px 0 6px;letter-spacing:-.02em}.col h1 b{color:var(--accent);font-weight:700}.tagline{color:var(--ink-2);font-size:15px;margin:0 0 4px}.intro{color:var(--muted);font-size:13.5px;line-height:1.6;margin:12px 0 0;max-width:42ch}.steps{margin-top:22px;flex:1;overflow-y:auto;padding-right:6px}.steps::-webkit-scrollbar{width:8px}.steps::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}.step{position:relative;padding:14px 16px 14px 46px;border:1px solid var(--line);border-radius:14px;background:var(--panel);margin-bottom:10px;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}.step:hover{border-color:var(--line-2)}.step.active{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--panel-2)}.step-dot{position:absolute;left:14px;top:15px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line-2);background:var(--bg-2);transition:all .18s}.step.active .step-dot{color:#02110e;background:var(--accent);border-color:var(--accent)}.step.done .step-dot{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}.step h3{font-family:var(--f-head);font-weight:600;font-size:15px;margin:1px 0 0}.step-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .28s ease,opacity .2s,margin .28s;color:var(--ink-2);font-size:13.5px;line-height:1.62}.step.active .step-body{max-height:220px;opacity:1;margin-top:8px}.controls{display:flex;align-items:center;gap:10px;margin-top:16px}.btn{font-family:var(--f-mono);font-size:12px;letter-spacing:.5px;padding:10px 16px;border-radius:11px;cursor:pointer;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);transition:all .16s;text-transform:uppercase}.btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.btn:disabled{opacity:.35;cursor:default}.btn.primary{background:var(--accent);color:#02110e;border-color:var(--accent);font-weight:700}.btn.primary:hover{filter:brightness(1.08);color:#02110e}.progress{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden}.progress>i{display:block;height:100%;background:var(--accent);transition:width .3s}.stage{grid-column:3;position:relative;min-width:0}.stage canvas{display:block}.stage-label{position:absolute;left:24px;bottom:20px;z-index:3;font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:1px;pointer-events:none;display:flex;align-items:center;gap:8px}.stage-label .pip{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}.stage-hint{position:absolute;right:22px;top:20px;z-index:3;font-family:var(--f-mono);font-size:10px;color:var(--muted-2);letter-spacing:1px;pointer-events:none}.mobile-nav{display:none}@media (max-width: 960px){body{overflow:auto}.app{grid-template-columns:1fr;grid-template-rows:44vh auto;height:auto;min-height:100%}.rail{display:none}.stage{grid-column:1;grid-row:1;height:44vh}.col{grid-column:1;grid-row:2;border-right:0;padding:22px 18px 90px;overflow:visible}.steps{overflow:visible}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:color-mix(in srgb,var(--bg-2) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));gap:2px;justify-content:space-between}.mobile-nav .rail-item{width:15%;height:46px;border-radius:11px}.mobile-nav .rail-item svg{width:21px;height:21px}.mobile-nav .rail-num{display:none}}