:root{color-scheme:dark;--bg: #0c0d0e;--panel: #141516;--edge: #222426;--line: #3d4144;--detail: #2b2e30;--body: #17181a;--deck: #1b1d1f;--ink: #868b8f;--ink-hi: #e6e8e9;--live: #f4f5f5;--glass: #0f1011;--glass-on: #1a1410;--recess: #0e0f10;--accent: #ff9a2e;--accent-hi: #ffc77a;--accent-dim: rgba(255, 154, 46, .1);--mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--sw: var(--accent)}:root[data-accent=sodium]{--accent: #ff9a2e;--accent-hi: #ffc77a;--accent-dim: color-mix(in srgb, #ff9a2e 10%, transparent);--glass-on: color-mix(in srgb, #ff9a2e 9%, #101112)}:root[data-accent=tungsten]{--accent: #ffd166;--accent-hi: #ffe7a8;--accent-dim: color-mix(in srgb, #ffd166 10%, transparent);--glass-on: color-mix(in srgb, #ffd166 9%, #101112)}:root[data-accent=neon]{--accent: #ff4fa3;--accent-hi: #ff9fcb;--accent-dim: color-mix(in srgb, #ff4fa3 10%, transparent);--glass-on: color-mix(in srgb, #ff4fa3 9%, #101112)}:root[data-accent=signal]{--accent: #3ee8a0;--accent-hi: #a3f5cf;--accent-dim: color-mix(in srgb, #3ee8a0 10%, transparent);--glass-on: color-mix(in srgb, #3ee8a0 9%, #101112)}:root[data-accent=dusk]{--accent: #6f9dff;--accent-hi: #b5ccff;--accent-dim: color-mix(in srgb, #6f9dff 10%, transparent);--glass-on: color-mix(in srgb, #6f9dff 9%, #101112)}:root[data-accent=moon]{--accent: #dfe7f5;--accent-hi: #ffffff;--accent-dim: color-mix(in srgb, #dfe7f5 10%, transparent);--glass-on: color-mix(in srgb, #dfe7f5 9%, #101112)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--mono)}button{font:inherit;color:inherit;background:none;border:1px solid var(--edge);border-radius:10px;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.page{min-height:100dvh;padding:52px 16px 32px}.gallery,.source{position:absolute;top:16px;z-index:8;color:var(--ink-hi);font-size:13px;line-height:16px;font-weight:500;letter-spacing:.02em;text-transform:none;text-decoration:none;border-bottom:1px solid var(--line)}.gallery{left:22px}.source{right:22px}.wrap{max-width:1180px;margin-inline:auto;display:grid;gap:14px}.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;text-transform:uppercase;letter-spacing:.14em;padding:0 4px}.brand{color:var(--ink-hi);margin-right:auto}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);margin-right:10px;vertical-align:1px}.arrows{display:flex;gap:6px}.arrows button{padding:6px 12px;letter-spacing:.14em;text-transform:uppercase}.arrows button:hover{color:var(--ink-hi);border-color:var(--line)}.swatches{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--edge);border-radius:999px}.swatches button{width:26px;height:26px;border-radius:50%;border:1px solid transparent;display:grid;place-items:center;padding:0}.swatches button i{width:12px;height:12px;border-radius:50%;background:var(--sw);border:1px solid var(--line);box-shadow:0 0 0 0 var(--sw);transition:box-shadow .2s,transform .2s}.swatches button:hover i{transform:scale(1.15)}.swatches button[aria-checked=true]{border-color:var(--line)}.swatches button[aria-checked=true] i{box-shadow:0 0 10px 1px var(--sw)}.layout{display:grid;grid-template-columns:230px minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"nav fig" "credit fig";gap:14px;align-items:start}.layout>nav{grid-area:nav}.layout>figure{grid-area:fig}.layout>.credit{grid-area:credit}.credit{align-self:end;display:grid;gap:3px;padding:0 16px 22px;font-size:12px;line-height:1.5;letter-spacing:.04em}.credit a{color:var(--ink);text-decoration:none;width:fit-content;transition:color .2s}.credit a:hover{color:var(--ink-hi)}.credit a:hover .ar{color:var(--accent)}.credit .ar{color:var(--line);transition:color .2s}.credit .by{color:var(--line)}.credit .nm{color:var(--ink)}.credit .cr{color:var(--line);margin-top:8px;font-size:11px;display:grid;gap:1px}.credit .cr .hs{white-space:nowrap}.credit .cr a{color:var(--line)}.credit .cr a:hover{color:var(--ink-hi)}.credit .soc{display:flex;gap:12px;margin-top:4px}.credit .soc a{display:grid;place-items:center;width:16px;height:16px}.credit .soc svg{width:14px;height:14px;fill:currentColor;transition:fill .2s}.credit .soc a:hover svg{fill:var(--accent)}nav{display:grid;gap:4px;background:var(--panel);border:1px solid var(--edge);border-radius:22px;padding:14px}nav button{display:flex;gap:12px;align-items:center;text-align:left;padding:9px 12px;border-color:transparent;letter-spacing:.06em}nav button .n{color:var(--line);font-size:12px;transition:color .2s}nav button:hover{color:var(--ink-hi)}nav button[aria-current=true]{color:var(--ink-hi);border-color:var(--edge);background:var(--bg)}nav button[aria-current=true] .n{color:var(--accent);text-shadow:0 0 8px var(--accent)}figure{margin:0;background:var(--bg);border:1px dashed var(--line);border-radius:18px;padding:18px 22px 16px;display:grid;gap:6px;min-width:0}.cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 18px;text-transform:uppercase;letter-spacing:.14em;font-size:12px}.cap .hi{color:var(--ink-hi);text-transform:none;letter-spacing:.05em}#stageHolder{aspect-ratio:4 / 3;border-radius:14px;transition:background .5s;background:radial-gradient(ellipse 50% 45% at 50% 52%,transparent,transparent)}#stageHolder.glow{background:radial-gradient(ellipse 50% 45% at 50% 52%,var(--accent-dim),transparent 72%)}#stage{width:100%;height:100%;display:block;touch-action:manipulation;user-select:none;-webkit-user-select:none}#stage:focus{outline:none}#stage:focus-visible{outline:1px dashed var(--line);outline-offset:4px;border-radius:8px}.fx{position:absolute;width:0;height:0;overflow:hidden}@media(max-width:820px){.page{padding:56px 12px 24px}.layout{grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"nav" "fig" "credit"}.credit{padding:4px 8px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}.credit .soc{margin-top:0}.credit .cr{margin-top:0;flex-basis:100%}nav{position:relative;top:0;display:flex;overflow-x:auto;border-radius:16px;padding:8px;scrollbar-width:none}nav button{flex:none;padding:8px 10px}figure{padding:16px}}#stage text{font-family:var(--mono)}.face{fill:var(--body);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round}.face.top{fill:var(--deck)}.face.recess{fill:var(--recess)}.detail{fill:none;stroke:var(--detail);stroke-width:1;vector-effect:non-scaling-stroke}.label{fill:var(--ink);font-family:var(--mono)}.glass{fill:var(--glass);transition:fill .3s,stroke .3s}.glass.hot{fill:var(--glass-on);stroke:var(--accent)}.halo{fill:var(--accent);opacity:0;transition:opacity .4s}.halo.hot{opacity:.22}.scr{fill:var(--accent-hi);font-family:var(--mono)}.scr-accent{fill:var(--accent)}.led{fill:var(--detail);transition:fill .2s}.led.hot{fill:var(--accent)}.wire{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;transition:stroke .4s}.wire.hot{stroke:var(--accent)}.wire-under{fill:none;stroke:var(--panel);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}.pulse{fill:none;stroke:var(--accent-hi);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:70 1200;stroke-dashoffset:70;opacity:0}.pulse.go{animation:flow .55s linear}@keyframes flow{0%{stroke-dashoffset:70;opacity:1}90%{opacity:1}to{stroke-dashoffset:-1000;opacity:0}}.press{cursor:pointer;transition:transform 60ms ease-out}.press.down{transform:translateY(3px)}.press .face{transition:fill .6s ease-out,stroke .6s ease-out}.press.lit .face,.press.latched .face{fill:var(--accent);stroke:var(--accent-hi);transition:none}.press.lit .face.top,.press.latched .face.top{fill:var(--accent-hi)}.press.lit{filter:url(#glow)}.press.latched{filter:url(#soft)}.press:hover .face.top{stroke:var(--ink)}.blink{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}@media(prefers-reduced-motion:reduce){.press,.glass,.halo,.press .face,.wire{transition:none}.blink,.pulse.go{animation:none}}