:root{--paper: #dce6ff;--paper-alt: #eef3ff;--ink: #151937;--frame: #28346d;--line: #7f92e0;--accent: #ff6f3a;--accent-deep: #b83d12;--teal: #1fa5a0;--code-bg: #041225;--code-ink: #8df7ff;--code-line: #214164;--shadow: 6px 6px 0 var(--frame);--font-body: "VT323", "Courier New", monospace;--font-display: "Press Start 2P", monospace;--font-mono: "VT323", "Courier New", monospace}*{box-sizing:border-box}html,body{margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:4rem}body{min-height:100vh;color:var(--ink);font-family:var(--font-body);font-size:1.32rem;line-height:1.35;letter-spacing:.02em;background:radial-gradient(circle at 12% 8%,#ecf5fff2 0,#ecf5ff00 28%),radial-gradient(circle at 86% 82%,#799fff52 0,#799fff00 25%),repeating-linear-gradient(0deg,#2132700f 0 1px,#21327000 1px 24px),linear-gradient(180deg,#edf3ff 0%,var(--paper) 100%);position:relative;overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:radial-gradient(rgba(33,52,109,.32) .75px,transparent .75px);background-size:6px 6px;z-index:0}.topbar{position:sticky;top:0;z-index:35;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;background:linear-gradient(180deg,var(--paper-alt),#d5e2ff);border-bottom:3px solid var(--frame)}.brand{display:inline-flex;align-items:center;gap:.62rem;color:var(--ink);text-decoration:none;font-family:var(--font-display);font-size:.68rem}.brand-mark{width:2rem;height:2rem;display:grid;place-items:center;border:2px solid #17235a;background:linear-gradient(180deg,#7ea8ff,#4d73dd);color:#eaf0ff;box-shadow:2px 2px #17235a;font-size:.8rem}.topnav{display:flex;align-items:center;gap:.75rem}.topnav a{color:var(--ink);text-decoration:none;font-family:var(--font-display);font-size:.55rem;background:#f3f6ff;border:2px solid #4b63bb;box-shadow:2px 2px #4b63bb;padding:.4rem .5rem;transition:transform .14s ease,background-color .14s ease}.topnav a:hover,.topnav a.active{background:#dfe8ff;transform:translateY(-1px)}.menu-toggle{display:none;border:2px solid #4b63bb;background:#f3f6ff;color:var(--ink);font-family:var(--font-display);font-size:.52rem;padding:.45rem .6rem;box-shadow:2px 2px #4b63bb}main,.site-footer{position:relative;z-index:1;width:min(980px,calc(100% - 1.7rem));margin-left:auto;margin-right:auto}main{padding-bottom:2.6rem}.hero{padding:3.1rem 0 1.8rem}.kicker{margin:0;display:inline-block;padding:.35rem .6rem;border:2px solid var(--frame);color:#0f5f5b;background:#c2f4ed;font-family:var(--font-display);font-size:.5rem}h1,h2,h3{margin-top:0;line-height:1.35;font-family:var(--font-display)}h1{margin:.85rem 0 1rem;font-size:clamp(1.05rem,2.7vw,1.7rem);max-width:24ch;letter-spacing:0;text-shadow:0 0 18px rgba(77,115,221,.35),0 0 40px rgba(77,115,221,.12)}h2{font-size:clamp(.75rem,1.7vw,1rem);margin-bottom:.9rem;letter-spacing:0}h3{font-size:clamp(.58rem,1.3vw,.72rem);margin-bottom:.65rem;letter-spacing:0}.lead{max-width:60ch;color:#1f2854;font-size:1.2rem;line-height:1.35}.tagline-pun{margin:.9rem 0 0;font-family:var(--font-display);font-size:.56rem;color:var(--frame);letter-spacing:0}.hero-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}.tag{display:inline-block;padding:.25rem .5rem;font-family:var(--font-display);font-size:.42rem;border:2px solid #4b63bb;background:#eef3ff;color:#1b2f78;box-shadow:2px 2px #1d2c614d}.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:var(--font-display);font-size:.56rem;padding:.6rem .8rem;border:2px solid #17235a;box-shadow:3px 3px #17235a;color:#121e4e}.btn:active{transform:translate(1px,1px);box-shadow:2px 2px #17235a}.btn-primary{background:linear-gradient(180deg,#ff9f65,var(--accent));color:#291104}.btn-ghost{background:#eef3ff}.panel{background:linear-gradient(180deg,#f4f8fff2,#dee9ffeb);border:3px solid var(--frame);padding:1.2rem;box-shadow:var(--shadow);margin-top:1rem}.demo-screenshot{display:block;width:100%;border:3px solid var(--frame);box-shadow:var(--shadow);margin-bottom:1rem}.grid{display:grid;gap:.9rem}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid article{border:2px solid #4b63bb;background:#f8faff;padding:.7rem;box-shadow:3px 3px #1d2c6166}.how-list{margin:.75rem 0 1rem;padding-left:1.15rem;display:flex;flex-direction:column;gap:.6rem}.how-list li{line-height:1.35}.steps{margin:0;padding-left:1.15rem}.steps li{margin-bottom:1rem}.code-wrap{position:relative;background:var(--code-bg);border:3px solid #24527c;color:var(--code-ink);padding:.75rem;overflow-x:auto;overflow-y:hidden}.code-wrap:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,#8df7ff17 0px 1px,#8df7ff00 1px 4px);mix-blend-mode:screen}.code-wrap.compact{min-height:0}pre{margin:0;overflow-x:auto;padding-right:3.2rem}code,pre{font-family:VT323,Courier New,monospace;font-size:1.18rem;line-height:1.2}p code{background:#dbe5ff;color:#1b2f78;border:1px solid #7c91e8;padding:.02rem .35rem}.copy-btn{position:absolute;right:.45rem;top:.45rem;border:2px solid #1a4f6a;background:#8df7ff;color:#051622;font-family:"Press Start 2P",monospace;font-size:.47rem;padding:.28rem .42rem;box-shadow:2px 2px #1a4f6a;cursor:pointer;z-index:1}.copy-btn[data-copied]{background:#ffd089;border-color:#a75f18;box-shadow:2px 2px #a75f18}.tab-controls{display:inline-flex;gap:.4rem;background:#eaf0ff;border:2px solid #4b63bb;padding:.3rem;margin-bottom:.75rem}.tab-btn{border:2px solid #4b63bb;background:#f3f6ff;color:#1f2e68;font-family:"Press Start 2P",monospace;font-size:.5rem;padding:.34rem .5rem;cursor:pointer}.tab-btn.active{background:#28346d;color:#eef3ff}.tab-panel{display:none}.tab-panel.active{display:block}.hint{margin:.6rem 0 0;color:#263775}.site-footer{padding-bottom:2.2rem}.site-footer p{border:2px solid #4b63bb;background:#edf2ff;padding:.75rem;box-shadow:3px 3px #1d2c6166}.site-footer a{color:#1d2f75;font-family:"Press Start 2P",monospace;font-size:.5rem}.reveal{opacity:0;transform:translateY(16px)}.reveal.visible{animation:rise .45s steps(6,end) forwards}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.grid.two,.grid.three{grid-template-columns:1fr}#commands .grid{column-count:1}.menu-toggle{display:inline-flex;align-items:center}.topnav{position:absolute;right:.75rem;top:calc(100% + .3rem);background:#eef3ff;border:2px solid #4b63bb;box-shadow:4px 4px #1d2c6180;padding:.55rem;flex-direction:column;align-items:flex-start;min-width:200px;opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease}.topnav.open{opacity:1;pointer-events:auto;transform:translateY(0)}.hero{padding-top:2.45rem}}@media(max-width:560px){body{font-size:1.15rem}main,.site-footer{width:calc(100% - 1.2rem)}.panel{padding:.75rem;box-shadow:3px 3px 0 var(--frame)}.btn{width:100%}h1{font-size:clamp(.9rem,4vw,1.2rem);max-width:100%}h2{font-size:clamp(.68rem,3vw,.85rem)}h3{font-size:.6rem}.hero{padding:1.8rem 0 1.2rem}.kicker{font-size:.42rem}.lead{font-size:1.1rem}pre{padding-right:0;padding-bottom:2.2rem}.copy-btn{top:auto;bottom:.45rem;right:.45rem}.steps{padding-left:.9rem}.tab-controls{display:flex;flex-wrap:wrap}p code{word-break:break-word}.grid article{box-shadow:2px 2px #1d2c6166;min-width:0}.grid article .code-wrap{max-width:100%;overflow-x:auto}}@media(max-width:380px){body{font-size:1.08rem}.topbar{padding:.65rem .75rem}.brand{font-size:.58rem}.panel{padding:.6rem;box-shadow:2px 2px 0 var(--frame)}.steps{padding-left:.7rem}pre{font-size:1rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}.code-wrap button{font-family:var(--font-mono)}