*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0c0e14;--bg-panel:#12151e;--bg-surface:#181c28;--accent:#ff4d6a;--accent-glow:#ff4d6a26;--accent-hover:#ff6680;--accent-subtle:#ff4d6a14;--text:#c9d1d9;--text-bright:#e6edf3;--text-dim:#6e7a8a;--text-muted:#3d4550;--success:#3fb950;--success-bg:#3fb9501a;--border:#1e2533;--border-bright:#2a3345;--radius:8px;--radius-lg:12px;--transition:.2s cubic-bezier(.4, 0, .2, 1)}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6;overflow-x:hidden}header{z-index:100;background:var(--bg-panel);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;height:56px;padding:0 24px;display:flex;position:sticky;top:0}.logo-link{align-items:center;text-decoration:none;display:flex}.logo-svg{width:90px;height:26px}.logo-text{fill:var(--logo-text);font-family:JetBrains Mono,monospace;font-size:22px}.logo-accent{fill:var(--logo-accent);filter:var(--logo-glow);animation:2s infinite logo-pulse}@keyframes logo-pulse{0%,to{opacity:1}50%{opacity:.6}}.header-title{color:var(--text-bright);font-size:14px;font-weight:600}.header-title .badge{background:var(--accent-subtle);color:var(--accent);text-transform:uppercase;letter-spacing:.5px;border-radius:4px;margin-right:8px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.header-progress{color:var(--text-dim);align-items:center;gap:10px;font-size:13px;display:flex}.progress-track{background:var(--border);border-radius:2px;width:120px;height:4px;overflow:hidden}.progress-fill{background:var(--success);border-radius:2px;width:0%;height:100%;transition:width .4s}.step-tabs{scrollbar-width:none;gap:6px;max-width:800px;margin:0 auto;padding:16px 24px 0;display:flex;overflow-x:auto}.step-tabs::-webkit-scrollbar{display:none}.tab{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius) var(--radius) 0 0;color:var(--text-dim);cursor:pointer;transition:all var(--transition);white-space:nowrap;border-bottom:2px solid #0000;align-items:center;gap:8px;padding:10px 16px;font-family:inherit;font-size:13px;font-weight:500;display:flex;position:relative}.tab:hover:not(.locked){color:var(--text-bright);background:var(--bg-surface)}.tab.active{color:var(--text-bright);background:var(--bg-surface);border-bottom-color:var(--accent)}.tab.completed{color:var(--success)}.tab.completed.active{border-bottom-color:var(--success)}.tab.locked{opacity:.3;cursor:default}.tab-num{background:var(--bg-surface);border:1px solid var(--border-bright);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:12px;font-weight:700;display:flex}.tab.active .tab-num{background:var(--accent);color:#fff;border-color:var(--accent)}.tab.completed svg{flex-shrink:0}.tab-label{display:inline}@media (width<=700px){.tab-label{display:none}.tab{padding:10px 12px}}main{max-width:800px;margin:0 auto;padding:24px 24px 80px;position:relative}.setup-step{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.step-header{align-items:center;gap:14px;padding:24px 28px 0;display:flex}.step-badge{background:var(--accent);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:15px;font-weight:700;display:flex}.step-header h3{color:var(--text-bright);font-size:20px;font-weight:700}.step-body{padding:20px 28px 28px}.step-body p{margin-bottom:12px}.step-body ol,.step-body ul{margin-bottom:12px;padding-left:20px}.step-body li{margin-bottom:6px}.step-body pre{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-bright);margin-bottom:12px;padding:12px 16px;font-family:JetBrains Mono,monospace;font-size:13px;overflow-x:auto}.step-body code{background:var(--bg-surface);color:var(--accent);border-radius:4px;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:13px}.step-body pre code{color:inherit;background:0 0;padding:0}.step-body a{color:var(--accent);text-decoration:none}.step-body a:hover{text-decoration:underline}.step-body kbd{background:var(--bg-surface);border:1px solid var(--border-bright);color:var(--text-bright);border-radius:4px;padding:1px 6px;font-family:Inter,sans-serif;font-size:12px}.step-nav{border-top:1px solid var(--border);align-items:center;padding:16px 28px;display:flex}.step-nav-spacer{flex:1}.nav-step-btn{border:1px solid var(--border-bright);color:var(--text-dim);border-radius:var(--radius);cursor:pointer;transition:all var(--transition);background:0 0;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:13px;font-weight:500;display:inline-flex}.nav-step-btn:hover{color:var(--text-bright);border-color:var(--text-dim)}.nav-step-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.nav-step-btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.os-tabs{background:var(--bg-surface);border-radius:var(--radius);gap:4px;width:fit-content;margin-bottom:16px;padding:4px;display:flex}.os-tab{color:var(--text-dim);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-radius:6px;padding:6px 14px;font-family:inherit;font-size:13px}.os-tab:hover{color:var(--text-bright)}.os-tab.active{background:var(--bg-panel);color:var(--text-bright);font-weight:500}.os-content{display:none}.os-content.active{display:block}.info-box{background:var(--accent-subtle);border-left:3px solid var(--accent);border-radius:var(--radius);margin-bottom:12px;padding:14px 16px;font-size:14px}.info-box strong{color:var(--text-bright)}.step-done-btn{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);border:none;align-items:center;gap:6px;margin-top:12px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:600;display:inline-flex}.step-done-btn:hover{background:var(--accent-hover);box-shadow:0 4px 12px var(--accent-glow);transform:translateY(-1px)}.step-done-indicator{color:var(--success);align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:600;display:inline-flex}@keyframes slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-60px)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(60px)}}@keyframes slideInRight{0%{opacity:0;transform:translate(60px)}to{opacity:1;transform:translate(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-60px)}to{opacity:1;transform:translate(0)}}.slide-out-left{animation:.25s forwards slideOutLeft}.slide-out-right{animation:.25s forwards slideOutRight}.slide-in-right{animation:.3s forwards slideInRight}.slide-in-left{animation:.3s forwards slideInLeft}#setup-finish{text-align:center;background:var(--bg-panel);border:1px solid var(--success);border-radius:var(--radius-lg);margin-top:24px;padding:48px 24px;display:none}#setup-finish h2{color:var(--text-bright);margin-bottom:12px;font-size:24px}#setup-finish p{color:var(--text-dim);margin-bottom:8px;font-size:16px}.finish-emoji{margin-bottom:16px;font-size:48px}.back-link{color:var(--accent);align-items:center;gap:6px;margin-top:16px;font-weight:500;text-decoration:none;display:inline-flex}.back-link:hover{text-decoration:underline}.hellpet-wrap{z-index:50;pointer-events:none;position:fixed;bottom:8px;left:16px}#hellpet-canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}.hellpet-embers{pointer-events:none;position:absolute;inset:0;overflow:visible}.hp-ember{pointer-events:none;border-radius:50%;animation:linear forwards hp-ember-rise;position:absolute}@keyframes hp-ember-rise{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(-60px) translateX(var(--dx,5px)) scale(.1)}}
