:root{--ink:#111014;--ink-2:#1c1b21;--ink-3:#2a2830;--paper:#f3efe6;--paper-2:#e6e0d3;--paper-3:#d8d0bf;--blurple:#5865f2;--blurple-2:#3c46c8;--blurple-3:#8a93ff;--grass:#5db43c;--grass-2:#3e8a26;--gold:#f2b84b;--red:#e5484d;--muted-on-paper:#6b655a;--muted-on-ink:#9a95a0;--cell:14px;--nav-h:64px;--gutter:clamp(16px, 4vw, 40px);--max:1240px;--f-display:var(--font-display), "Bricolage Grotesque", system-ui, sans-serif;--f-body:var(--font-body), "Figtree", system-ui, sans-serif;--f-mono:var(--font-mono), "JetBrains Mono", ui-monospace, monospace;--f-pixel:var(--font-pixel), "Pixelify Sans", ui-monospace, monospace}@media (max-width:720px){:root{--cell:10px;--nav-h:56px}}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%}body{background:var(--paper);color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:17px;line-height:1.5;overflow-x:clip}h1,h2,h3,h4,p,ol,ul{margin:0}ol,ul{padding:0;list-style:none}a{color:inherit}button{font:inherit;color:inherit}img,svg{display:block}::selection{background:var(--blurple);color:#fff}:focus-visible{outline:3px solid var(--blurple);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.container{width:min(100% - 2 * var(--gutter), var(--max));margin-inline:auto}.scene{background:var(--bg);color:var(--fg);padding-block:clamp(96px,11vw,150px);position:relative}.scene[data-theme=paper]{--bg:var(--paper);--fg:var(--ink);--muted:var(--muted-on-paper);--line:#11101429;--accent:var(--grass);--mc-shadow:var(--grass);--dc-shadow:var(--blurple)}.scene[data-theme=ink]{--bg:var(--ink);--fg:var(--paper);--muted:var(--muted-on-ink);--line:#f3efe629;--accent:var(--blurple-3);--mc-shadow:var(--grass);--dc-shadow:var(--blurple)}.scene[data-theme=blurple]{--bg:var(--blurple);--fg:#fff;--muted:#dfe2ff;--line:#ffffff42;--accent:var(--gold);--mc-shadow:var(--ink);--dc-shadow:var(--ink)}.edge{height:calc(var(--cell) * 3);pointer-events:none;z-index:1;align-items:flex-end;display:flex;position:absolute;top:1px;left:0;right:0;overflow:hidden;transform:translateY(-100%)}.edge>i{flex:0 0 var(--cell);height:calc(var(--cell) * var(--h));background:var(--bg);transform-origin:bottom;transform:scaleY(0)}.edge.in>i{animation:.5s steps(3,end) forwards edge-rise;animation-delay:calc(var(--i) * 5ms)}@keyframes edge-rise{to{transform:scaleY(1)}}.mark-cell{transform-box:fill-box;transform-origin:50%;animation:.42s cubic-bezier(.2,.8,.2,1.35) both cell-in;animation-delay:var(--d)}@keyframes cell-in{0%{opacity:0;transform:scale(0)}60%{opacity:1}to{opacity:1;transform:scale(1)}}.kicker{font:600 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-items:center;gap:10px;display:inline-flex}.kicker:before{content:"";background:var(--accent);width:10px;height:10px}.h2{font-family:var(--f-display);font-variation-settings:"opsz" 72;letter-spacing:-.035em;margin-top:18px;font-size:clamp(40px,6.2vw,86px);font-weight:760;line-height:.96}.h2 .line{margin-bottom:-.08em;padding-bottom:.08em;display:block;overflow:hidden}.h2 .line>span{display:inline-block}.h2 em{color:var(--accent);font-style:normal}.lead{max-width:60ch;color:var(--muted);margin-top:22px;font-size:clamp(17px,1.5vw,20px);line-height:1.55}.lead strong{color:var(--fg);font-weight:650}.lead code,.note code{font-family:var(--f-mono);color:var(--fg);font-size:.88em}.note{color:var(--muted);font-size:15px;line-height:1.55}.btn{--shadow:var(--ink);border:2px solid var(--ink);background:var(--paper);min-height:52px;color:var(--ink);font:650 16px/1.1 var(--f-body);box-shadow:5px 5px 0 var(--shadow);cursor:pointer;justify-content:center;align-items:center;gap:10px;padding:0 22px;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:hover{box-shadow:7px 7px 0 var(--shadow);transform:translate(-2px,-2px)}.btn:active{box-shadow:0 0 0 var(--shadow);transform:translate(5px,5px)}.btn-primary{--shadow:var(--grass);background:var(--ink);color:var(--paper)}.scene[data-theme=ink] .btn{border-color:var(--paper)}.scene[data-theme=ink] .btn-primary{background:var(--paper);color:var(--ink)}.btn[aria-disabled=true]{opacity:.6;cursor:not-allowed;box-shadow:none;border-style:dashed;transform:none}.chip{border:2px dashed var(--line);min-height:32px;font:600 12px/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);align-items:center;gap:8px;padding:0 12px;display:inline-flex}.split{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:stretch;display:grid;position:relative}.seam{color:var(--fg);align-self:stretch;place-items:center;display:grid;position:relative}.seam:before{content:"";opacity:.3;background:repeating-linear-gradient(currentColor 0 8px,#0000 8px 18px);width:4px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.seam-link{background:var(--bg);place-items:center;width:44px;height:44px;display:grid;position:relative}.seam-link.pulse{animation:.6s steps(4,end) seam-pulse}@keyframes seam-pulse{50%{transform:scale(1.35)}}.side-label{font:600 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-items:center;gap:10px;margin-bottom:16px;display:flex}.packet-layer{pointer-events:none;z-index:5;position:absolute;inset:0}@media (max-width:899px){.split{grid-template-rows:auto 56px auto;grid-template-columns:minmax(0,1fr)}.seam:before{background:repeating-linear-gradient(90deg,currentColor 0 8px,#0000 8px 18px);width:auto;height:4px;inset:50% 0 auto;transform:translateY(-50%)}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}.skip{z-index:100;background:var(--ink);color:var(--paper);font:600 14px/1 var(--f-mono);padding:10px 14px;text-decoration:none;position:absolute;top:-60px;left:12px}.skip:focus{top:12px}
