:root{--ground:#171a20;--raise:#1f232b;--ink:#f2f3f5;--mute:#9aa0a8;--faint:#838a94;--line:#2c313a;--accent:#2c90cf;--on-accent:#000;--scrim-a:#171a20e6;--scrim-b:#171a208c;--glass:#1f232beb;--halo:#171a20f2;--brand-yellow:#eab71a;--gold:#eab71a;--green:#63c9a4;--bad:#e0655b;--curve:cubic-bezier(.5, 0, 0, .75);--t:.33s var(--curve)}html[data-mode=light]{--ground:#fff;--raise:#f4f4f4;--ink:#171a20;--mute:#5c5e62;--faint:#6f7276;--line:#eee;--accent:#267cb2;--on-accent:#fff;--scrim-a:#ffffffe6;--scrim-b:#ffffff8c;--glass:#ffffffeb;--halo:#fffffff2;--gold:#a6810f;--green:#2e9c77;--bad:#c0392b}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--ground);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;-webkit-touch-callout:none;transition:background var(--t), color var(--t);margin:0;font-family:Roboto,-apple-system,Helvetica Neue,Arial,sans-serif;font-size:14px;font-weight:400;overflow:hidden}#app,#app *{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}#app{cursor:default;flex-direction:column;height:100dvh;max-height:100dvh;display:flex}#app>header,#app>#chips{flex:none}#app>#stagewrap{flex:auto;min-height:0;display:flex}#drawing{background:var(--ground);border-left:1px solid var(--line);min-width:0;min-height:0;transition:background var(--t);flex-direction:column;flex:0 0 50%;display:flex}#drawing[data-full=true]{z-index:20;border:0;position:fixed;inset:0}#drawing .bar{padding:12px 18px;padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right));flex:none;align-items:center;gap:12px;display:flex}#drawing .bar b{color:var(--ink);white-space:nowrap;font-size:15px;font-weight:500}#drawing .bar em{color:var(--faint);white-space:nowrap;text-overflow:ellipsis;min-width:0;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:12px;font-style:normal;overflow:hidden}#drawing .bar .grow{flex:auto;min-width:0}#drawing .zoom{cursor:pointer;flex:none;align-items:center;gap:9px;display:flex}#drawing .zoom input[type=range]{flex:none;width:132px;height:30px}#drawing .zoom .zi,#drawing .zoom .zo{background:var(--faint);border-radius:1px;flex:none}#drawing .zoom .zi{width:9px;height:1.5px}#drawing .zoom .zo{width:13px;height:1.5px;position:relative}#drawing .zoom .zo:after{content:"";background:var(--faint);border-radius:1px;width:1.5px;height:13px;position:absolute;top:-5.75px;left:5.75px}#drawing .zoom:hover .zi,#drawing .zoom:hover .zo,#drawing .zoom:hover .zo:after{background:var(--mute)}#drawing .bar .x{appearance:none;color:var(--faint);cursor:pointer;min-width:34px;min-height:34px;transition:color var(--t), background var(--t);background:0 0;border:0;border-radius:4px;padding:4px 6px;font-size:22px;line-height:1}#drawing .bar .x:hover{color:var(--ink);background:var(--raise)}#drawing .sheet{min-height:0;padding:0 18px 18px;padding-bottom:max(18px, env(safe-area-inset-bottom));touch-action:none;cursor:default;background:var(--ground);flex:auto;justify-content:center;align-items:center;display:flex;overflow:hidden}#drawing .sheet[data-zoomed=true]{cursor:grab}#drawing .sheet[data-zoomed=true]:active{cursor:grabbing}#drawing .sheet img{object-fit:contain;border:1px solid var(--line);transform-origin:50%;will-change:transform;-webkit-user-select:none;user-select:none;background:#fff;width:auto;max-width:100%;height:auto;max-height:100%;display:block}@media (orientation:portrait){#app>#stagewrap{flex-direction:column}#drawing{border-left:0;border-top:1px solid var(--line);flex:0 0 50%}#drawing[data-full=true]{border-top:0}}header{padding:14px 24px 0;padding-top:max(14px, env(safe-area-inset-top));padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right));flex-wrap:wrap;align-items:center;gap:16px;display:flex}.credit{color:var(--faint);white-space:nowrap;align-items:center;gap:7px;font-size:13px;display:flex}.credit b{color:var(--ink);font-weight:500}.credit i{color:var(--faint);opacity:.45;margin:0 3px;font-style:normal}.credit .mark{flex:none;width:auto;display:block}.credit .mark.pt{height:20px}.credit .mark.lwt{height:16px}.credit .mark.pat{height:28px}html[data-mode=light] .credit .mark.pat{background:#171a20;border-radius:2px;height:34px;padding:3px 5px}#mode{flex:none;align-items:center;gap:4px;margin-left:auto;display:flex}#mode button{appearance:none;color:var(--faint);cursor:pointer;min-height:36px;transition:color var(--t), background var(--t);background:0 0;border:0;border-radius:4px;padding:8px 12px;font-family:inherit;font-size:14px;font-weight:500}#mode button[aria-pressed=true]{color:var(--ink);background:var(--raise)}#chips{padding:22px 24px 0;padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right));scrollbar-width:none;-webkit-overflow-scrolling:touch;align-items:flex-end;gap:24px;display:flex;overflow:auto hidden}#chips::-webkit-scrollbar{display:none}.chip{appearance:none;cursor:pointer;text-align:left;color:var(--mute);transition:color var(--t);background:0 0;border:0;flex-direction:column;flex:none;align-items:flex-start;gap:2px;padding:0 0 9px;display:flex;position:relative}.chip span{white-space:nowrap;font-size:14px;font-weight:500}.chip em{font-variant-numeric:tabular-nums;color:var(--faint);white-space:nowrap;font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;font-style:normal}.chip[aria-pressed=true]{color:var(--ink)}.chip[aria-pressed=true]:after{content:"";background:var(--accent);height:2px;position:absolute;bottom:0;left:0;right:0}#dock{z-index:3;padding:20px 24px;padding-bottom:max(20px, env(safe-area-inset-bottom));padding-left:max(24px, env(safe-area-inset-left));padding-right:max(24px, env(safe-area-inset-right));pointer-events:none;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:16px;display:grid;position:absolute;bottom:0;left:0;right:0}#dock>*{min-width:0}#levels{pointer-events:auto;flex-direction:column;justify-self:start;align-items:flex-start;gap:10px;display:flex}#filterbar{pointer-events:auto;flex-direction:column;align-items:center;gap:12px;width:100%;display:flex}#filters .filt,#subfilters .filt,#levels .filt,#controls .hint,#filters .filt em,#subfilters .filt em{text-shadow:0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 14px var(--halo)}#filters,#subfilters{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;max-width:100%;display:flex}#subfilters{gap:20px}.filt{appearance:none;color:var(--mute);cursor:pointer;white-space:nowrap;min-height:30px;transition:color var(--t);background:0 0;border:0;flex:none;align-items:center;gap:8px;padding:0 0 7px;font-family:inherit;font-size:14px;font-weight:500;display:flex;position:relative}.filt em{color:var(--faint);font-variant-numeric:tabular-nums;transition:color var(--t);font-family:IBM Plex Mono,ui-monospace,monospace;font-size:11px;font-style:normal}.filt[aria-pressed=true]{color:var(--ink)}.filt[aria-pressed=false]{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}.filt[aria-pressed=false] em{text-decoration:none}.grp{flex:none;align-items:center;gap:2px;display:flex}.filt[data-state=on],.filt[data-state=part]{color:var(--ink);text-decoration:none}.filt[data-state=off]{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}.filt[data-state=on]:after,.filt[data-state=part]:after{content:"";background:var(--accent);height:2px;transition:right var(--t);position:absolute;bottom:0;left:0}.filt[data-state=on]:after{right:0}.filt[data-state=part]:after{right:50%}.grp .grp-more{color:var(--faint);justify-content:center;min-width:26px;padding:0 0 7px;font-size:17px;font-weight:400}.grp.open .grp-more{color:var(--ink)}.filt.reset{color:var(--mute);background:var(--glass);min-height:38px;transition:background var(--t), color var(--t);border-radius:4px;padding:9px 16px;font-size:14px;font-weight:500}.filt.reset:hover{color:var(--ink)}#controls{pointer-events:auto;text-align:center;flex-direction:column;justify-self:end;align-items:stretch;gap:8px;display:flex}#controls .hint{pointer-events:none;text-align:right;margin-top:2px;line-height:1.45}.hint{color:var(--faint);white-space:nowrap;font-size:12.5px}.tog{appearance:none;background:var(--glass);color:var(--mute);cursor:pointer;white-space:nowrap;min-height:38px;transition:background var(--t), color var(--t);border:0;border-radius:4px;padding:9px 16px;font-family:inherit;font-size:14px;font-weight:500}.tog[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.tog:disabled{opacity:.35;cursor:default}.tog.hero,.tog.hero[aria-pressed=true]{background:var(--brand-yellow);color:#000;font-weight:500}html[data-mode=light] .tog.hero,html[data-mode=light] .tog.hero[aria-pressed=true]{box-shadow:inset 0 0 0 1px #a6810f}#explodeRow{align-items:center;gap:14px;width:min(320px,100%);margin:0 auto 4px;display:flex}#explodeRow label{color:var(--mute);white-space:nowrap;text-shadow:0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 14px var(--halo);font-size:14px;font-weight:500}input[type=range]{appearance:none;cursor:pointer;background:0 0;flex:1;height:38px}input[type=range]::-webkit-slider-runnable-track{background:var(--line);height:2px}input[type=range]::-moz-range-track{background:var(--line);height:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:0;border-radius:50%;width:22px;height:22px;margin-top:-10px}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:22px;height:22px}#seqRow{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;width:min(560px,100%);margin:0 auto 4px;display:flex}#seqRow input[type=range]{flex:150px;min-width:120px}#seqRow .mono{color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 14px var(--halo);font-size:13px}#readout .move{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 14px var(--halo);margin-bottom:2px;font-size:11.5px;font-weight:500;display:block}#stage{background:var(--ground);min-height:200px;transition:background var(--t);flex:auto;position:relative}#stage canvas{width:100%;height:100%;display:block}.overlay{text-align:center;color:var(--mute);background:var(--scrim-a);z-index:5;place-content:center;font-size:14px;line-height:1.6;display:grid;position:absolute;inset:0}.overlay.err{color:var(--bad);white-space:pre-wrap;padding:0 24px}.attract{text-align:center;background:var(--scrim-b);z-index:4;cursor:pointer;animation:fade .6s var(--curve);place-content:center;gap:10px;display:grid;position:absolute;inset:0}.attract b{color:var(--ink);font-size:40px;font-weight:500;line-height:1.2}.attract span{color:var(--mute);font-size:14px}@keyframes fade{0%{opacity:0}to{opacity:1}}#readout{z-index:3;pointer-events:none;max-width:62vw;position:absolute;top:22px;left:24px}#readout b{letter-spacing:-.012em;color:var(--ink);font-size:24px;font-weight:600;line-height:1.15;display:block}#readout .dim{color:var(--faint);margin-top:3px;font-size:13px;display:block}#readout b,#readout .dim{text-shadow:0 0 3px var(--halo), 0 0 7px var(--halo), 0 0 14px var(--halo)}#levels .filt{min-height:24px;padding:0}#levels .filt[aria-pressed=true]:after{display:none}#hud{font-variant-numeric:tabular-nums;gap:22px;font-family:IBM Plex Mono,ui-monospace,monospace;display:flex;position:absolute;top:22px;right:24px}#hud div{text-align:right}#hud .k{color:var(--faint);font-size:11px;display:block}#hud .v{color:var(--ink);margin-top:2px;font-size:15px;font-weight:500;display:block}#hud .v.ok{color:var(--green)}#hud .v.warn{color:var(--gold)}#hud .v.bad{color:var(--bad)}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}#chips,#filters,#subfilters{touch-action:pan-x}@media (pointer:coarse){.filt{min-height:44px;padding-bottom:12px}#levels .filt{min-height:36px;padding-bottom:0}.filt.reset{min-height:44px;padding:11px 16px}.chip{min-height:48px;padding-bottom:12px}.tog,#explodeRow,#seqRow{min-height:48px}#mode button{min-height:44px}input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-13px}input[type=range]::-moz-range-thumb{width:28px;height:28px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}@media (orientation:portrait){#chips{flex-wrap:wrap;row-gap:10px;overflow:visible}.attract b{font-size:30px}}@media (width<=1100px){#chips{gap:18px;padding-left:16px;padding-right:16px}#filters,#subfilters{gap:16px}header{padding-left:16px;padding-right:16px}#dock{gap:12px;padding-left:16px;padding-right:16px}#readout{left:16px}#hud{right:16px}}@media (width<=800px){.credit{white-space:normal}}@media (width<=760px){.hint{display:none}#readout,#hud{top:14px}}