:root{--bg-top: #2a1a44;--bg-mid: #1a0f2b;--bg-deep: #140a20;--surface-rail: #241635;--surface-panel: #2e1d47;--surface-code: #160d20;--accent: #8a6fd1;--accent-hi: #a688ec;--accent-deep: #5a3f8c;--accent-soft: rgba(138, 111, 209, .16);--ink: #ece7f6;--ink-2: #cabde9;--ink-3: #a892d6;--hairline: rgba(180, 150, 230, .14);--hairline-strong: rgba(180, 150, 230, .28);--focus: #c3aef5;--r-sm: 8px;--r-md: 12px;--r-lg: 18px;--shadow-panel: 0 24px 60px -28px rgba(0, 0, 0, .75), 0 2px 8px -4px rgba(0, 0, 0, .4);--shadow-btn: 0 8px 20px -8px rgba(90, 63, 140, .9);--ease-out: cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}.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}html,body{min-height:100%}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--ink);background:var(--bg-mid);background-image:radial-gradient(120% 90% at 50% -12%,var(--bg-top) 0%,var(--bg-mid) 46%,var(--bg-deep) 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.app-shell{min-height:100vh;display:flex;flex-direction:column;padding:clamp(20px,5vw,56px) 24px 48px}.app-header{width:100%;max-width:940px;margin:0 auto;padding:0 4px 8px}.app-header h1{margin:0;color:#fff;font-size:clamp(1.9rem,1.3rem + 2.2vw,2.7rem);font-weight:700;letter-spacing:-.022em;line-height:1.04}.app-header p{margin:10px 0 0;color:var(--ink-3);font-size:.95rem;letter-spacing:.01em}.app-body{width:100%;max-width:940px;min-width:0;margin:20px auto 0;display:flex;gap:24px;align-items:flex-start}.step-rail{width:244px;flex:none;position:sticky;top:24px;background:var(--surface-rail);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:20px 18px}.step-rail-label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:2px 4px 14px;font-weight:600}.step-rail-list{list-style:none;margin:0;padding:0;position:relative}.step-rail-list:before{content:"";position:absolute;left:19px;top:18px;bottom:18px;width:2px;background:var(--hairline);border-radius:2px}.step-row{position:relative;z-index:1;width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border:none;border-radius:var(--r-sm);background:transparent;color:var(--ink-2);font:inherit;font-size:.9rem;text-align:left;cursor:pointer;transition:background .18s var(--ease-out),color .18s var(--ease-out)}.step-row:hover{background:var(--accent-soft);color:var(--ink)}.step-row-active{background:var(--accent-deep);color:#fff;font-weight:600}.step-row-active:hover{background:var(--accent-deep)}.step-title{min-width:0}.step-badge{width:24px;height:24px;border-radius:50%;background:var(--surface-rail);border:1.5px solid var(--hairline-strong);color:var(--ink-3);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:600;flex:none;transition:background .18s var(--ease-out),border-color .18s var(--ease-out),color .18s var(--ease-out)}.step-row-active .step-badge{background:var(--accent);border-color:var(--accent-hi);color:#fff;box-shadow:0 0 0 4px var(--accent-soft)}.step-row-done .step-badge{background:var(--accent-deep);border-color:var(--accent);color:#fff}.step-row-done.step-row-active .step-badge{background:var(--accent)}.progress-track{margin-top:18px;height:6px;background:#00000047;border-radius:99px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent-hi));border-radius:inherit;transition:width .5s var(--ease-out)}.step-panel{flex:1;min-width:0;max-width:100%;background:var(--surface-panel);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-panel);animation:step-in .42s var(--ease-out) both}@keyframes step-in{0%{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}.step-panel h2{margin:0 0 12px;color:#fff;font-size:clamp(1.35rem,1.1rem + 1vw,1.7rem);font-weight:650;letter-spacing:-.015em;line-height:1.15}.step-explanation{color:var(--ink-2);line-height:1.65;font-size:1rem;max-width:62ch;margin:0 0 20px}.step-explanation code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.88em;background:#00000040;padding:1px 6px;border-radius:5px;color:var(--ink)}.command-block{background:var(--surface-code);border:1px solid var(--hairline);border-radius:var(--r-md);padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}.command-block code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.85rem;line-height:1.5;color:#e2d4ff;min-width:0;overflow-x:auto;white-space:pre;scrollbar-width:thin}.command-block code:before{content:"$ ";color:var(--accent-hi);-webkit-user-select:none;user-select:none}.copy-button{display:inline-flex;align-items:center;gap:6px;background:#8a6fd138;color:var(--ink);border:1px solid var(--hairline-strong);border-radius:var(--r-sm);padding:7px 13px;font:inherit;font-size:.78rem;font-weight:600;cursor:pointer;flex:none;transition:background .16s var(--ease-out),border-color .16s var(--ease-out)}.copy-button:hover{background:#8a6fd157;border-color:var(--accent)}.copy-button svg{width:14px;height:14px}.command-note{font-size:.875rem;color:var(--ink-3);line-height:1.55;margin:0 0 20px}.step-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:4px}.mark-done-button{background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#fff;border:none;border-radius:var(--r-sm);padding:11px 20px;font:inherit;font-size:.95rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow-btn);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),filter .16s var(--ease-out)}.mark-done-button:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 12px 26px -10px #5a3f8c}.mark-done-button:active{transform:translateY(0)}.devcenter-link{color:var(--ink-3);font-size:.875rem;text-decoration:none;border-bottom:1px solid var(--hairline-strong);padding-bottom:1px;transition:color .16s var(--ease-out),border-color .16s var(--ease-out)}.devcenter-link:hover{color:var(--accent-hi);border-color:var(--accent)}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}.step-row:focus-visible{outline-offset:-2px}@media (max-width: 760px){.app-body{flex-direction:column;gap:18px}.step-rail{width:100%;position:static}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}