:root{--sy-bg:#0e0e0e;--sy-surface:#161616;--sy-surface-2:#1d1d1d;--sy-border:#2a2a2a;--sy-text:#e8e8e8;--sy-text-dim:#b0b0b0;--sy-text-muted:#666;--sy-accent:#d4a82e;--sy-accent-bright:#e8be4a;--sy-accent-deep:#a8841f;--sy-success:#6dbf6d;--sy-danger:#d96a5e;--sy-font-mono:"JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;--sy-font-sans:-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;--sy-text-xs:.75rem;--sy-text-sm:.875rem;--sy-text-base:1rem;--sy-text-lg:1.125rem;--sy-text-xl:1.5rem;--sy-text-2xl:2rem;--sy-text-3xl:3rem;--sy-1:.25rem;--sy-2:.5rem;--sy-3:.75rem;--sy-4:1rem;--sy-6:1.5rem;--sy-8:2rem;--sy-12:3rem;--sy-16:4rem;--sy-24:6rem;--sy-radius:2px;--sy-radius-lg:4px}*,:before,:after{box-sizing:border-box}html,body{background:var(--sy-bg);color:var(--sy-text);font-family:var(--sy-font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;margin:0;padding:0}a{color:var(--sy-accent);text-decoration:none}.prose a{border-bottom:1px solid #0000;transition:border-color .12s}.prose a:hover{border-bottom-color:var(--sy-accent)}h1,h2,h3{font-family:var(--sy-font-mono);letter-spacing:-.02em;margin:0 0 var(--sy-4);font-weight:500;line-height:1.15}h1{font-size:var(--sy-text-3xl)}h2{font-size:var(--sy-text-2xl);margin-top:var(--sy-12)}h3{font-size:var(--sy-text-xl);margin-top:var(--sy-6)}p{margin:0 0 var(--sy-4);color:var(--sy-text-dim);line-height:1.6}code,kbd{font-family:var(--sy-font-mono);font-size:.92em}code.inline{background:var(--sy-surface);border:1px solid var(--sy-border);border-radius:var(--sy-radius);color:var(--sy-accent);padding:1px 6px}.muted{color:var(--sy-text-muted)}.accent{color:var(--sy-accent)}.prompt{font-family:var(--sy-font-mono);font-size:var(--sy-text-sm);color:var(--sy-text-muted);letter-spacing:.08em}.prompt:before{content:"$ ";color:var(--sy-accent)}.prompt:after{content:"▊";color:var(--sy-accent);margin-left:6px;animation:1.1s steps(2,end) infinite sy-blink;display:inline-block}.prompt.no-cursor:after{content:none}@keyframes sy-blink{50%{opacity:0}}.lift{transition:transform .18s,border-color .18s}.lift:hover{border-color:var(--sy-accent);transform:translateY(-2px)}.stagger>*{opacity:0;animation:.42s forwards sy-rise;transform:translateY(8px)}.stagger>:first-child{animation-delay:60ms}.stagger>:nth-child(2){animation-delay:.12s}.stagger>:nth-child(3){animation-delay:.18s}.stagger>:nth-child(4){animation-delay:.24s}.stagger>:nth-child(5){animation-delay:.3s}.stagger>:nth-child(6){animation-delay:.36s}.stagger>:nth-child(7){animation-delay:.42s}.stagger>:nth-child(8){animation-delay:.48s}@keyframes sy-rise{to{opacity:1;transform:translateY(0)}}.under{position:relative}.under:after{content:"";background:var(--sy-accent);transform-origin:0;height:1px;transition:transform .2s;position:absolute;bottom:-3px;left:0;right:0;transform:scaleX(0)}.under:hover:after,.under.active:after{transform:scaleX(1)}.fade-in{animation:.28s both sy-fade}@keyframes sy-fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.prompt:after,.stagger>*,.fade-in{animation:none!important}.stagger>*{opacity:1;transform:none}.lift{transition:none}}.btn,button.btn{padding:var(--sy-3) var(--sy-6);font-family:var(--sy-font-mono);font-size:var(--sy-text-sm);letter-spacing:.04em;text-transform:lowercase;background:var(--sy-accent);color:#0e0e0e;border:1px solid var(--sy-accent);border-radius:var(--sy-radius);cursor:pointer;font-weight:500;text-decoration:none;transition:background .12s,border-color .12s,transform 80ms;display:inline-block}.btn:hover{background:var(--sy-accent-bright);border-color:var(--sy-accent-bright)}.btn:active{transform:translateY(1px)}.btn-ghost{color:var(--sy-text);border-color:var(--sy-border);background:0 0}.btn-ghost:hover{border-color:var(--sy-accent);color:var(--sy-accent);background:0 0}.container{max-width:1080px;padding:0 var(--sy-6);margin:0 auto}.stack>*+*{margin-top:var(--sy-4)}.stack-lg>*+*{margin-top:var(--sy-8)}@media (width<=1024px){h1{font-size:2.4rem}h2{margin-top:var(--sy-8);font-size:1.6rem}h3{font-size:1.25rem}}@media (width<=640px){html,body{font-size:16px}h1{font-size:2rem}h2{margin-top:var(--sy-6);font-size:1.4rem}h3{font-size:1.125rem}.container{padding:0 var(--sy-4)}.btn,button.btn{padding:var(--sy-3) var(--sy-4);align-items:center;min-height:44px;display:inline-flex}}
