@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=IBM+Plex+Mono:wght@400;500&display=swap";:root{--bg:#0a1929;--surface-1:#0f2438;--surface-2:#16324a;--text:#e8f1f8;--text-muted:#7fa8c9;--accent:#4fd1e8;--accent-support:#ff8a5c;--font-display:"Space Grotesk", system-ui, sans-serif;--font-ui:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-6:48px;--space-8:64px;--radius:2px;--motion-ui:.18s ease-out;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-ui);background-image:linear-gradient(#4fd1e80f 1px,#0000 1px),linear-gradient(90deg,#4fd1e80f 1px,#0000 1px);background-size:32px 32px;min-height:100vh;line-height:1.5}#app{max-width:100vw}.site-header{z-index:10;justify-content:space-between;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);pointer-events:none;display:flex;position:fixed;top:0;left:0;right:0}.site-header a{pointer-events:auto}.wordmark{align-items:center;gap:var(--space-1);min-height:44px;color:var(--text);border-radius:var(--radius);text-decoration:none;display:inline-flex}.wordmark-mark{fill:none;width:22px;height:22px;stroke:var(--accent);stroke-width:1.25px;stroke-linejoin:round}.wordmark-mark-lit{fill:#4fd1e838}.wordmark-text{font-family:var(--font-display);letter-spacing:.01em;font-size:1.05rem;font-weight:700}.source-link{min-height:44px;font-family:var(--font-ui);color:var(--text-muted);padding:var(--space-1) var(--space-2);border-radius:var(--radius);transition:color var(--motion-ui), border-color var(--motion-ui);border:1px solid #0000;align-items:center;font-size:.85rem;text-decoration:none;display:inline-flex}.source-link:hover{color:var(--text);border-color:var(--accent)}.wordmark:focus-visible,.source-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.sequence{height:600vh;position:relative}.stage{--btn-w:clamp(240px, 44vw, 680px);--btn-h:clamp(82px, 15vw, 232px);--explode-scale:calc(var(--btn-w) / 176px);justify-content:center;align-items:center;gap:var(--space-4);height:100vh;padding:var(--space-6) var(--space-4);flex-direction:column;display:flex;position:sticky;top:0;overflow:hidden}@media (width<=1023px){.scene{margin-bottom:calc(70px * var(--explode-scale,1))}}.hero-copy{align-items:center;gap:var(--space-2);padding:var(--space-4);text-align:center;opacity:1;transition:opacity var(--motion-ui);flex-direction:column;display:flex}.stage[data-stage]:not([data-stage=rest]) .hero-copy{opacity:0;pointer-events:none;position:absolute;inset:0}.hero-eyebrow{color:var(--accent);font-family:var(--font-ui);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.85rem}.hero-title{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:clamp(3rem,12vw,6rem);font-weight:700}.hero-sub{max-width:42ch;color:var(--text-muted);margin:0;font-size:1.05rem}.scene{z-index:2;perspective:1400px;perspective-origin:50% 42%;position:relative}.deck{width:var(--btn-w);height:var(--btn-h);transform-style:preserve-3d;transform:rotateX(var(--rotate-x,0deg)) rotateZ(var(--rotate-z,0deg)) scale(var(--deck-scale,1));position:relative}.subject-button{font-family:var(--font-ui);color:var(--text);background:var(--surface-2);border:1px solid var(--text-muted);border-radius:var(--radius);cursor:pointer;transition:transform var(--motion-ui), box-shadow var(--motion-ui), background var(--motion-ui);justify-content:center;align-items:center;font-size:1rem;font-weight:500;display:flex;position:absolute;inset:0}.subject-button:hover{background:var(--surface-1);box-shadow:0 0 0 1px var(--accent)}.subject-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.subject-button:active{transform:translateY(1px);box-shadow:0 0 12px #4fd1e880}.scroll-hint{margin-top:var(--space-4);color:var(--text-muted);font-size:.85rem;animation:2s ease-in-out infinite bob}@media (prefers-reduced-motion:reduce){.scroll-hint{animation:none}}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.plane-group{transform-style:preserve-3d;position:absolute;inset:0}.plane{transform-style:preserve-3d;transform:translate3d(calc(var(--expand-x,0px) * var(--explode-scale,1) * var(--explode-boost,1)), calc(var(--expand-y,0px) * var(--explode-scale,1) * var(--explode-boost,1)), calc(var(--z,0px) * var(--explode-scale,1) * var(--explode-boost,1)));position:absolute;inset:0}.plane-face{border-radius:var(--radius);font-family:var(--font-ui);color:var(--text);justify-content:center;align-items:center;font-size:.8rem;font-weight:500;display:flex;position:absolute;inset:0}.plane-label{margin-left:var(--space-2);white-space:nowrap;pointer-events:none;flex-direction:column;gap:2px;display:flex;position:absolute;top:50%;left:100%;transform:translateY(-50%)}.plane-label-name{font-family:var(--font-ui);color:var(--accent-support);text-transform:uppercase;letter-spacing:.04em;font-size:.7rem;font-weight:500}.plane-label-note{font-family:var(--font-ui);color:var(--text-muted);font-size:.7rem}.plane-group-box [data-layer=margin] .plane-face{border:1px dashed var(--accent-support);background:0 0}.plane-group-box [data-layer=margin] .plane-label{top:calc(50% - (66px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-box [data-layer=border] .plane-face{border:2px solid var(--accent);background:#4fd1e80d}.plane-group-box [data-layer=border] .plane-label{top:calc(50% - (22px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-box [data-layer=padding] .plane-face{border:1px solid var(--text-muted);background:#16324abf}.plane-group-box [data-layer=padding] .plane-label{top:calc(50% + (22px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-box [data-layer=content] .plane-face{background:var(--surface-2);border:1px solid var(--accent)}.plane-group-box [data-layer=content] .plane-label{top:calc(50% + (66px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-paint [data-layer=shadow] .plane-face{border:1px dashed var(--text-muted);background:0 0;box-shadow:0 10px 24px #00000080}.plane-group-paint [data-layer=shadow] .plane-label{top:calc(50% - (66px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-paint [data-layer=background] .plane-face{background:var(--surface-2);border:none}.plane-group-paint [data-layer=background] .plane-label{top:calc(50% - (22px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-paint [data-layer=border] .plane-face{border:1px solid var(--text);background:0 0}.plane-group-paint [data-layer=border] .plane-label{top:calc(50% + (22px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-paint [data-layer=text] .plane-face{background:0 0;border:none}.plane-group-paint [data-layer=text] .plane-label{top:calc(50% + (66px * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-composite{--explode-boost:1.3125;--composite-label-offset:65px;--composite-button-label-offset:var(--composite-label-offset)}.plane-group-composite [data-layer=document] .plane-face{background:var(--surface-1);border:1px solid var(--text-muted)}.plane-group-composite [data-layer=button] .plane-face{background:var(--surface-2);border:2px solid var(--accent);box-shadow:0 0 18px #4fd1e866}.plane-group-composite [data-layer=document] .plane-label{top:calc(50% - (var(--composite-label-offset) * var(--explode-scale,1) * var(--explode-boost,1)))}.plane-group-composite [data-layer=button] .plane-label{top:calc(50% + ( var(--composite-button-label-offset) * var(--explode-scale,1) * var(--explode-boost,1) ))}.plane-group-tree{transform:translate3d(-50%, calc(-1 * var(--space-4)), 0);width:min(600px,60vw);position:absolute;inset:auto auto 100% 50%}.dom-tree{width:100%;height:auto;display:block;overflow:visible}.dom-tree-edge{fill:none;stroke:var(--text-muted);stroke-width:1.5px}.dom-tree-node rect{fill:var(--surface-1);stroke:var(--text-muted);stroke-width:1px}.dom-tree-node text{fill:var(--text-muted);font-family:var(--font-ui);font-size:12px}.dom-tree-node.is-subject rect{fill:var(--surface-2);stroke:var(--accent);stroke-width:2px}.dom-tree-node.is-subject text{fill:var(--text);font-weight:500}.dom-tree-drop{fill:none;stroke:var(--accent-support);stroke-width:1.5px;stroke-dasharray:3 3}.dom-tree-callout{fill:var(--accent-support);font-family:var(--font-ui);font-size:11px;font-style:italic}.annotations{z-index:2;width:min(46ch,100%);display:grid;position:relative}.annotation{gap:var(--space-1);flex-direction:column;grid-area:1/1;margin:0;display:flex}.annotation-label{font-family:var(--font-ui);color:var(--accent-support);text-transform:uppercase;letter-spacing:.08em;margin:0;font-size:.75rem;font-weight:500}.annotation-title{font-family:var(--font-display);color:var(--text);margin:0;font-size:1.5rem;font-weight:700;line-height:1.2}.annotation-body{max-width:46ch;font-family:var(--font-ui);color:var(--text-muted);margin:0;font-size:.95rem;line-height:1.6}.promote-toggle{z-index:2;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-1) var(--space-3);font-family:var(--font-ui);color:var(--text-muted);background:var(--surface-1);border:1px solid var(--text-muted);border-radius:var(--radius);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--motion-ui), color var(--motion-ui), background var(--motion-ui), border-color var(--motion-ui);font-size:.85rem;font-weight:500;display:inline-flex;position:relative}.stage[data-stage=composite] .promote-toggle{opacity:1;pointer-events:auto}.promote-toggle-swatch{background:var(--text-muted);width:10px;height:10px;transition:background var(--motion-ui), box-shadow var(--motion-ui);border-radius:2px}.promote-toggle:hover{color:var(--text);border-color:var(--accent)}.promote-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.promote-toggle:active{transform:translateY(1px)}.promote-toggle[aria-pressed=true]{color:var(--text);border-color:var(--accent);background:#4fd1e814}.promote-toggle[aria-pressed=true] .promote-toggle-swatch{background:var(--accent);box-shadow:0 0 8px #4fd1e8b3}.explainer{z-index:2;padding:var(--space-8) var(--space-4);background:linear-gradient(#0000,#0f2438d9 18%);border-top:1px solid #4fd1e82e;position:relative}.explainer-inner{gap:var(--space-3);flex-direction:column;max-width:68ch;margin:0 auto;display:flex}.explainer-title{margin:var(--space-4) 0 0;font-family:var(--font-display);font-size:clamp(1.5rem,3.5vw,2rem);font-weight:700;line-height:1.2}.explainer-lede,.stage-list-body,.faq dd{color:var(--text-muted);margin:0;font-size:.95rem;line-height:1.7}.explainer code{font-family:var(--font-ui);color:var(--accent);font-size:.9em}.stage-list{gap:var(--space-3);margin:0;padding:0;list-style:none;display:grid}.stage-list li{padding-left:var(--space-3);border-left:1px solid #4fd1e859}.stage-list-label{margin:0 0 var(--space-1);font-family:var(--font-ui);color:var(--accent-support);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:500}.faq{gap:var(--space-3);margin:0;display:grid}.faq dt{font-family:var(--font-display);color:var(--text);margin-bottom:var(--space-1);font-size:1.05rem;font-weight:700}.faq dd{margin:0}.cta{margin-top:var(--space-4);min-height:44px;padding:var(--space-1) var(--space-4);font-family:var(--font-ui);color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius);transition:box-shadow var(--motion-ui), transform var(--motion-ui);align-self:flex-start;align-items:center;font-size:.9rem;font-weight:500;text-decoration:none;display:inline-flex}.cta:hover{box-shadow:0 0 16px #4fd1e880}.cta:active{transform:translateY(1px)}.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.site-footer{z-index:2;padding:var(--space-4);text-align:center;border-top:1px solid #4fd1e82e;position:relative}.site-footer p{color:var(--text-muted);margin:0;font-size:.8rem}.site-footer a{min-height:44px;color:var(--text-muted);transition:color var(--motion-ui);border-bottom:1px solid #4fd1e866;align-items:center;text-decoration:none;display:inline-flex}.site-footer a:hover{color:var(--accent)}.site-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (width<=599px){.scene{transform:translateY(calc(94px * var(--composite-visibility,0))) scale(.8)}.stage{padding-top:calc(var(--space-8) + var(--space-6))}.stage-aside{transform:translateY(calc(33px * var(--composite-visibility,0)))}.plane-group-composite{--composite-label-offset:calc(32px + (16px * var(--composite-visibility,0)))}.stage[data-promoted=false] .plane-group-composite{--composite-button-label-offset:86px}}@media (width>=600px) and (width<=1023px){.scene{transform:translateY(calc(72px * var(--composite-visibility,0))) scale(.85)}}@media (width<=1023px){.plane-label{max-width:34vw}.plane-label-note{white-space:normal}}@media (width>=1024px){.stage{align-content:center;align-items:center;gap:var(--space-8);padding:var(--space-8);grid-template-columns:minmax(0,1fr) min(340px,28vw);display:grid}.scene{grid-column:1;justify-self:center}.stage-aside{align-items:flex-start;gap:var(--space-4);flex-direction:column;grid-column:2;display:flex}}