[data-masthead]{--mast-line:color-mix(in srgb,var(--text) 12%,transparent);--mast-fill:0;position:sticky;top:0;z-index:50;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;min-height:var(--hud);padding-inline:var(--gutter);background:color-mix(in srgb,var(--bg) calc(var(--mast-fill) * 82%),transparent);border-bottom:1px solid color-mix(in srgb,var(--text) calc(var(--mast-fill) * 12%),transparent);backdrop-filter:blur(calc(var(--mast-fill) * 14px)) saturate(calc(1 + var(--mast-fill) * .2));transition:opacity .4s ease,translate .5s cubic-bezier(.6,0,.4,1)}@property --mast-fill{syntax:"<number>"; inherits:true; initial-value:0;}@keyframes mast-fill{to{--mast-fill:1}}@supports (animation-timeline:scroll()){[data-masthead]{animation:mast-fill 1ms linear both;animation-timeline:scroll(root);animation-range:0 96px}}@supports not (animation-timeline:scroll()){[data-masthead]{--mast-fill:1}}[data-brand]{display:flex;align-items:center;gap:10px;justify-self:start;min-width:0;min-height:44px;white-space:nowrap}[data-mark]{display:block;flex:none;width:26px;height:26px;filter:drop-shadow(0 0 calc(8px * var(--glow)) color-mix(in srgb,var(--magenta) 50%,transparent))}[data-brand] strong{font-size:15px;font-weight:700;letter-spacing:.01em}[data-brand] span{overflow:hidden;padding-left:10px;border-left:1px solid var(--mast-line);font-family:var(--mono);font-size:11px;text-overflow:ellipsis;color:var(--muted)}[data-nav]{display:flex;gap:2px;padding:4px;border:1px solid var(--mast-line);background:color-mix(in srgb,var(--bg) 40%,transparent)}[data-nav] a{display:flex;align-items:center;gap:8px;min-height:36px;padding-inline:14px;font-size:13px;color:var(--muted);transition:color .16s,background .16s}[data-nav] a:before{content:"";width:6px;height:6px;background:currentColor;opacity:0;rotate:45deg;transition:opacity .16s}[data-nav] a:hover{color:var(--text);background:color-mix(in srgb,var(--text) 6%,transparent)}[data-nav] a[aria-current]{color:var(--text);background:color-mix(in srgb,var(--text) 9%,transparent)}[data-nav] a[aria-current]:before{opacity:1;color:var(--green);box-shadow:0 0 8px var(--green)}[data-mast-actions]{display:flex;grid-column:3;align-items:center;justify-content:flex-end;gap:8px}[data-lang-pill]{display:flex;align-items:center;font-family:var(--mono);font-size:12px}[data-lang-pill] a{display:grid;place-items:center;min-width:36px;min-height:40px;color:var(--muted);transition:color .16s}[data-lang-pill] a:hover{color:var(--text)}[data-lang-pill] a[aria-current]{color:var(--text);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:6px}[data-lang-pill] span{color:var(--mast-line)}[data-menu-toggle]{display:flex;align-items:center;gap:12px;min-height:40px;padding-inline:14px 12px;border:1px solid var(--mast-line);background:color-mix(in srgb,var(--bg) 40%,transparent);font-size:13px;transition:border-color .16s,background .16s,color .16s}[data-menu-toggle]:hover{border-color:var(--text)}[data-burger]{display:grid;gap:4px;width:16px}[data-burger] b{display:block;height:2px;background:currentColor;transition:translate .2s,rotate .2s,width .2s}[data-burger] b:last-child{justify-self:end;width:10px}site-hud:has([data-drawer]:popover-open) [data-menu-toggle]{background:var(--text);border-color:var(--text);color:var(--bg)}site-hud:has([data-drawer]:popover-open) [data-burger] b:first-child{translate:0 3px;rotate:45deg}site-hud:has([data-drawer]:popover-open) [data-burger] b:last-child{width:100%;translate:0 -3px;rotate:-45deg}[data-drawer]{position:fixed;inset:0 0 0 auto;display:none;flex-direction:column;gap:28px;width:min(420px,100vw);height:100dvh;max-height:none;margin:0;padding:22px 24px 28px;overflow-y:auto;color:var(--text);font-family:var(--sans);background:var(--bg);border:0;border-left:1px solid color-mix(in srgb,var(--text) 12%,transparent);box-shadow:-30px 0 60px -30px #000;translate:100% 0;transition:translate .35s cubic-bezier(.2,.8,.2,1),display .35s allow-discrete,overlay .35s allow-discrete}[data-drawer]:popover-open{display:flex;translate:0 0}@starting-style{[data-drawer]:popover-open{translate:100% 0}}[data-drawer]::backdrop{background:#05050800;backdrop-filter:blur(0);transition:background .3s,backdrop-filter .3s,display .3s allow-discrete,overlay .3s allow-discrete}[data-drawer]:popover-open::backdrop{background:#0505088c;backdrop-filter:blur(3px)}@starting-style{[data-drawer]:popover-open::backdrop{background:#05050800;backdrop-filter:blur(0)}}[data-drawer-head]{display:flex;align-items:center;justify-content:space-between}[data-drawer-head] h2{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}[data-drawer-close]{display:grid;place-items:center;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--text) 12%,transparent)}[data-drawer-close]:hover{border-color:var(--text)}[data-drawer-close] svg{width:14px;height:14px;fill:currentColor}[data-drawer-links]{display:grid}[data-drawer-links] a{display:flex;align-items:center;gap:14px;min-height:46px;border-top:1px solid color-mix(in srgb,var(--text) 10%,transparent);font-size:22px;font-weight:700;transition:color .16s,padding .2s}[data-drawer-links] a small{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--muted)}[data-drawer-links] a:hover{padding-left:6px;color:var(--green)}[data-drawer-block] h3{margin-bottom:14px;font-size:13px;font-weight:700;letter-spacing:.02em}[data-pref]{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;border-block:1px solid color-mix(in srgb,var(--text) 10%,transparent);font-size:14px;text-align:left}[data-pref-switch]{position:relative;width:38px;height:22px;border:1px solid color-mix(in srgb,var(--text) 25%,transparent);transition:background .2s,border-color .2s}[data-pref-switch]:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;background:var(--muted);transition:translate .2s,background .2s}[data-pref][aria-pressed=true] [data-pref-switch]{border-color:var(--green);background:color-mix(in srgb,var(--green) 16%,transparent)}[data-pref][aria-pressed=true] [data-pref-switch]:after{translate:16px 0;background:var(--green)}[data-drawer-play]{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;margin-top:auto;padding-inline:18px;background:var(--magenta);color:var(--on-magenta);font-weight:700;text-align:left;box-shadow:0 0 calc(30px * var(--glow)) color-mix(in srgb,var(--magenta) 45%,transparent)}[data-drawer-play] small{font-family:var(--mono);font-size:11px;font-weight:500;opacity:.75}@media(max-width:1180px){[data-masthead]{grid-template-columns:minmax(0,1fr) auto}[data-nav]{display:none}[data-mast-actions]{grid-column:2}}@media(max-width:560px){[data-brand] span{display:none}[data-menu-toggle]>span{display:none}}@media(prefers-reduced-motion:reduce){[data-drawer],[data-drawer]::backdrop{transition:none}}[data-kit]{display:block}[data-kit-preview]{display:flex;align-items:center;gap:18px;margin-bottom:16px;padding:16px;background:linear-gradient(transparent 70%,color-mix(in srgb,var(--green) 18%,transparent) 70% 72%,transparent 72%),var(--screen);border:1px solid var(--edge)}[data-kit-preview] [data-cube]{width:60px;height:60px;filter:drop-shadow(0 0 calc(14px * var(--glow)) var(--magenta))}[data-chips]{display:grid;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted)}[data-chip]{display:flex;align-items:center;gap:10px}[data-chip] i{width:20px;height:20px;border:1px solid rgb(255 255 255 / .3);box-shadow:0 0 calc(10px * var(--glow)) var(--chip);background:var(--chip)}[data-chip] b{font-weight:500;color:var(--text)}[data-chip-slot="1"]{--chip:var(--magenta)}[data-chip-slot="2"]{--chip:var(--green)}[data-kit-slots]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:12px;border:1px solid var(--edge)}[data-kit-slots] button{min-height:44px;font-family:var(--mono);font-size:13px;color:var(--muted)}[data-kit-slots] button:hover{color:var(--text)}[data-kit-slots] button[data-on=on][data-slot="1"]{background:var(--magenta);color:var(--on-magenta)}[data-kit-slots] button[data-on=on][data-slot="2"]{background:var(--green);color:var(--on-green)}[data-swatches]{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}[data-swatch]{position:relative;aspect-ratio:1;min-height:36px;border:2px solid rgb(0 0 0 / .65);box-shadow:inset 0 0 0 1px #ffffff24;transition:scale .12s}[data-swatch]:hover{scale:1.1;z-index:1}[data-swatch][data-on=on]{outline:2px solid var(--text);outline-offset:2px;z-index:1}[data-swatch] span{position:absolute;right:3px;bottom:1px;font-family:var(--mono);font-size:11px;font-weight:500;color:#fff;text-shadow:0 0 2px #000,0 0 4px #000,0 0 6px #000}[data-kit-foot]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}[data-kit-foot] p{max-width:28ch;font-size:12px;line-height:1.45;color:var(--muted)}[data-kit-foot] button{flex:none;min-height:40px;padding-inline:14px;border:1px solid var(--green);font-family:var(--mono);font-size:12px;color:var(--green)}[data-kit-foot] button:hover{background:var(--green);color:var(--on-green)}[data-level-spike]{background:var(--magenta);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--magenta) 50%,transparent))}[data-level-spike]:after{content:"";position:absolute;inset:3px;background:var(--bg);clip-path:polygon(50% 0,100% 100%,0 100%)}[data-level-block]{background:color-mix(in srgb,var(--green) 10%,transparent);border:2px solid var(--green)}[data-level-launch]{background:linear-gradient(to top,var(--magenta) 20%,transparent 20%)}[data-window]{margin-bottom:24px;background:var(--screen);border:1px solid var(--edge);font-family:var(--mono);font-size:13px;line-height:1.9}[data-window-bar]{display:flex;align-items:center;gap:6px;padding:6px 12px;border-bottom:1px solid var(--edge);color:var(--muted)}[data-window-bar] i{width:9px;height:9px;background:var(--n)}[data-window-bar] i:nth-child(2){opacity:.6}[data-window-bar] i:nth-child(3){margin-right:6px;opacity:.3}[data-console]{min-width:0;align-self:start;font-family:var(--mono);font-size:12.5px;line-height:1.75}[data-console] [data-window-bar]{background:var(--screen)}[data-console-tabs]{display:flex;flex-wrap:wrap;gap:6px;padding:12px;border-bottom:1px solid var(--edge);background:color-mix(in srgb,var(--screen) 70%,transparent)}[data-case]{display:none;padding:14px 14px 4px}[data-console]:has(input[value="0"]:checked) [data-case="0"],[data-console]:has(input[value="1"]:checked) [data-case="1"],[data-console]:has(input[value="2"]:checked) [data-case="2"],[data-console]:has(input[value="3"]:checked) [data-case="3"]{display:block}[data-flow]{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:14px;list-style:none}[data-flow] li{--state:var(--muted);display:flex;align-items:center;gap:6px;padding:3px 9px;border:1px solid color-mix(in srgb,var(--state) 60%,transparent);color:var(--state);font-size:11px;letter-spacing:.04em;text-transform:uppercase}[data-flow] li:not(:last-child):after{content:"→";margin-left:6px;color:var(--muted);opacity:.5}[data-flow] li[data-state=idle]{opacity:.35}:is([data-flow] li,[data-trace] li)[data-state=ok],:is([data-flow] li,[data-trace] li)[data-state=hit]{--state:var(--green)}:is([data-flow] li,[data-trace] li)[data-state=miss]{--state:var(--magenta)}:is([data-flow] li,[data-trace] li)[data-state=wait]{--state:#ffd84a}:is([data-flow] li,[data-trace] li)[data-state=error]{--state:#ff4d6d}[data-flow] li:is([data-state=hit],[data-state=ok],[data-state=error],[data-state=wait]){box-shadow:0 0 calc(12px * var(--glow)) -4px var(--state)}[data-trace]{display:grid;gap:2px;list-style:none}[data-trace] li{--state:var(--text);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;padding:3px 8px;border-left:2px solid transparent}[data-trace] li[data-state]{border-left-color:var(--state);background:color-mix(in srgb,var(--state) 6%,transparent)}[data-trace] b{max-width:100%;font-weight:600;overflow-wrap:anywhere;color:var(--n)}[data-trace] span{flex:1 1 14ch;min-width:0;overflow-wrap:anywhere;color:var(--text)}[data-trace] em{margin-left:auto;font-style:normal;font-size:11px;white-space:nowrap;color:var(--state)}[data-trace] li[data-out] span{white-space:pre-wrap;color:var(--muted)}[data-console-note]{padding:10px 14px 14px;font-size:11px;color:var(--muted)}@media(min-width:1000px){[data-project]{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}[data-case]{min-height:340px}}@keyframes trace-in{0%{opacity:0;translate:-6px 0}}@media(prefers-reduced-motion:no-preference){[data-motion=on]{[data-trace] li{animation:trace-in .32s ease-out calc(var(--i) * .11s) backwards}}}[data-terrain]{--cell:max(18px,100vw / 36);position:relative;height:calc(3 * var(--cell));overflow-x:clip;pointer-events:none}[data-terrain][data-flip]{scale:1 -1}[data-terrain]>i{position:absolute;left:calc(var(--x) * var(--cell));bottom:calc(var(--y,0) * var(--cell));display:block;width:calc(var(--width,1) * var(--cell));height:calc(var(--height,1) * var(--cell))}[data-terrain-block]{border:2px solid var(--n);border-bottom:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 22%,transparent),transparent) calc(var(--sweep) - var(--x) * var(--cell)) 0 / 24vw 100% no-repeat,linear-gradient(90deg,color-mix(in srgb,var(--n) 16%,transparent) 1px,transparent 1px) 0 0 / var(--cell) var(--cell),linear-gradient(color-mix(in srgb,var(--n) 16%,transparent) 1px,transparent 1px) 0 0 / var(--cell) var(--cell),color-mix(in srgb,var(--n) 9%,transparent);box-shadow:0 0 calc(12px * var(--glow)) color-mix(in srgb,var(--n) 55%,transparent)}[data-terrain]>[data-terrain-block]{box-sizing:border-box;width:calc(var(--width) * var(--cell) + 2px)}[data-terrain]>[data-level-spike]{height:calc(.8 * var(--cell))}@keyframes comet{0%{--sweep:-30vw}to{--sweep:130vw}}@media(prefers-reduced-motion:no-preference){[data-motion=on]{[data-comet]{animation:comet 7s linear infinite}}}
