@font-face{font-family:"Baloo 2";src:url(/Baloo%202-4227535.ttf) format("truetype");font-weight:400 800;font-display:swap}:root{color-scheme:dark;--ink: #0b1220;--surface: #1e293b;--sunken: #0f172a;--line: #334155;--line-soft: #263449;--text: #e2e8f0;--muted: #94a3b8;--faint: #64748b;--accent: #14b8a6;--accent-soft: #5eead4;--accent-ink: #042f2e;--pad: clamp(14px, 1.6vw, 20px);--radius: 14px;--righthead-h: 38px;--display: "Baloo 2", ui-rounded, system-ui, sans-serif;--body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--body);background:var(--ink);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:grid;grid-template-columns:clamp(424px,27vw,460px) minmax(0,1fr);grid-template-rows:var(--righthead-h) minmax(0,1fr);gap:10px var(--pad);height:100dvh;padding:var(--pad)}.righthead{grid-column:2;grid-row:1;display:flex;align-items:center;min-width:0}.controls{grid-column:1;grid-row:1 / span 2;container-type:inline-size;display:flex;flex-direction:column;min-height:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}.brand{flex:none;padding:16px 18px 14px;border-bottom:1px solid var(--line-soft)}.brand h1{font-family:var(--display);font-size:24px;font-weight:800;line-height:1;margin:0}.ver{font-family:var(--body);font-size:11px;font-weight:500;color:var(--faint);margin-left:7px;vertical-align:3px}.tagline{display:none}.status{display:flex;align-items:center;gap:7px;margin:9px 0 0;font-size:11px;line-height:1.35;color:#fca5a5}.status.ok{color:var(--faint)}.status .dot{width:6px;height:6px;flex:none;border-radius:50%;background:currentColor}.status.ok .dot{background:var(--accent)}.nav{flex:none;display:flex;gap:1px;padding:0 12px;border-bottom:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}.nav button{flex:none;padding:14px 9px 13px;border:0;color:var(--muted);font-family:var(--display);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;background-color:transparent;background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:bottom left 9px;background-size:calc(100% - 18px) 0;transition:color .14s ease}.nav button:hover:not(.on){color:var(--text)}.nav button.on{color:var(--accent-soft);background-size:calc(100% - 18px) 2px}.navmeta{margin-left:4px;font-family:var(--body);font-size:9.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--faint);vertical-align:5px}.nav button.on .navmeta{color:var(--accent)}@container (max-width: 400px){.nav{padding:0 8px}.nav button{font-size:11px;padding:12px 5px 11px;background-position:bottom left 5px;background-size:calc(100% - 10px) 0}.nav button.on{background-size:calc(100% - 10px) 2px}.navmeta{display:none}}.panel{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px 22px}.panel::-webkit-scrollbar{width:10px}.panel::-webkit-scrollbar-thumb{background:#2b3a52;border:3px solid var(--surface);border-radius:99px}.lede{margin:14px 0 0;color:var(--muted);font-size:12.5px;line-height:1.55}h2{font-family:var(--display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin:22px 0 0;padding-top:14px;border-top:1px solid var(--line-soft)}small{display:block;margin-top:6px;color:var(--muted);font-size:11.5px;line-height:1.5}small.err{color:#fca5a5}code{color:var(--accent-soft);font-size:11.5px}label{display:block;margin:12px 0 4px;font-size:12px;color:#cbd5e1}.val{float:right;font-variant-numeric:tabular-nums;color:var(--accent-soft)}input[type=range]{width:100%;accent-color:var(--accent)}input[type=file]{font-size:11px;color:var(--muted);max-width:100%}audio{width:100%;margin-top:9px}.row{display:flex;align-items:center;gap:9px;margin-top:9px}.busy{font-size:11px;color:#fbbf24}.ghost{background:transparent;color:var(--accent-soft);border:1px solid var(--line);border-radius:8px;padding:7px 13px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease}.ghost:hover:not(:disabled){background:#16233b;border-color:var(--accent)}.ghost:disabled{opacity:.45;cursor:default}.chk{display:flex;align-items:center;gap:8px;margin:11px 0 0;font-size:12px;color:#cbd5e1}.chk input{accent-color:var(--accent)}.states{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px;margin-top:9px}.states.col{grid-template-columns:1fr}.states.col button{text-align:left;padding:8px 11px}.states button{background:var(--sunken);color:var(--accent-soft);border:1px solid var(--line);border-radius:8px;padding:9px 7px;font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease}.states button:hover:not(:disabled):not(.on){border-color:var(--accent);background:#16233b}.states button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.states button:disabled{opacity:.4;cursor:default}.num{display:inline-block;width:16px;color:var(--faint);font-variant-numeric:tabular-nums}.states.col button.on .num{color:var(--accent-ink)}.warn{margin-top:12px;padding:9px 11px;border-radius:9px;font-size:11.5px;line-height:1.5;background:#422006;border:1px solid #854d0e;color:#fcd34d}.warn code,.warn b{color:#fde68a}.cue{display:flex;align-items:center;gap:12px;margin-top:9px}.shape{width:50px;height:50px;flex:none;display:grid;place-items:center;background:var(--sunken);border:1px solid var(--line);border-radius:11px;font-size:23px;font-weight:700;color:var(--accent-soft);font-variant-numeric:tabular-nums}.cueinfo{font-size:12px;color:#cbd5e1;line-height:1.55}.cueinfo b{color:var(--accent-soft)}.proto{margin-top:18px;padding:11px 12px;background:var(--sunken);border:1px solid var(--line-soft);border-radius:9px}.protohead{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);margin-bottom:5px}.proto code{word-break:break-all}.stagewrap{grid-column:2;grid-row:2;min-width:0;min-height:0}.stage{display:flex;flex-direction:column;height:100%;gap:12px;padding:var(--pad);background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius)}.rive{flex:1;min-height:0;width:100%;background:radial-gradient(120% 90% at 50% 8%,#17233a 0%,var(--sunken) 62%);border-radius:11px;overflow:hidden}.rive canvas{display:block;width:100%;height:100%}.live{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.live div{display:flex;flex-direction:column;gap:3px;padding:9px 12px;background:var(--sunken);border-radius:9px}.live dt{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint)}.live dd{margin:0;font-family:var(--display);font-size:15px;font-weight:700;color:var(--accent-soft)}.seg{flex:none;display:flex;gap:2px;padding:3px;background:var(--sunken);border:1px solid var(--line-soft);border-radius:9px}.seg button{padding:6px 16px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-family:var(--display);font-size:12px;font-weight:700;cursor:pointer;transition:background .14s ease,color .14s ease}.seg button:hover:not(.on){color:var(--text)}.seg button.on{background:var(--accent);color:var(--accent-ink)}.codepane{grid-column:2;grid-row:2;z-index:5;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);overflow:hidden}.codehead{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line-soft);background:var(--sunken)}.codetabs{display:flex;gap:2px;min-width:0;overflow-x:auto;scrollbar-width:none}.codetabs::-webkit-scrollbar{display:none}.codetabs button{flex:none;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;white-space:nowrap;cursor:pointer;transition:background .14s ease,color .14s ease}.codetabs button:hover:not(.on){background:#16233b;color:var(--text)}.codetabs button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}.copy{flex:none;margin-left:auto;padding:7px 15px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--accent-soft);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .14s ease,background .14s ease,color .14s ease}.copy:hover{background:#16233b;border-color:var(--accent)}.copy[data-state=ok]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.copy[data-state=fail]{border-color:#b91c1c;color:#fca5a5}.codenote{flex:none;margin:0;padding:9px 14px;border-bottom:1px solid var(--line-soft);color:var(--muted);font-size:11.5px}.code{flex:1;min-height:0;margin:0;padding:14px 16px;overflow:auto;background:var(--sunken);color:#cbd5e1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.65;-moz-tab-size:2;tab-size:2}.code code{color:inherit;font-size:inherit;white-space:pre}.t-com{color:#64748b;font-style:italic}.t-str{color:#86efac}.t-num{color:#fcd34d}.t-key{color:#c4b5fd}.t-typ{color:var(--accent-soft)}.t-fn{color:#93c5fd}.code::-webkit-scrollbar{width:11px;height:11px}.code::-webkit-scrollbar-thumb{background:#2b3a52;border:3px solid var(--sunken);border-radius:99px}:where(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}@media (max-width: 860px){.app{grid-template-columns:1fr;height:auto;gap:0;padding:0 var(--pad) var(--pad)}.controls,.righthead,.stagewrap,.codepane{grid-column:1;grid-row:auto}.controls{order:1}.righthead{order:-2;position:sticky;top:0;z-index:22;height:var(--righthead-h);margin:0 calc(var(--pad) * -1);padding:0 var(--pad);background:var(--ink)}.codepane{order:0;margin-top:var(--pad);max-height:70dvh}.stagewrap{order:-1;position:sticky;top:var(--righthead-h);z-index:20;margin:0 calc(var(--pad) * -1);padding:8px var(--pad);background:color-mix(in srgb,var(--ink) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}.stage{height:auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:10px}.seg button{padding:5px 14px}.rive{flex:none;width:min(46vw,30dvh,210px);height:min(46vw,30dvh,210px)}.live{flex:1;min-width:0;grid-template-columns:1fr;gap:5px}.live div{gap:2px;padding:6px 10px}.live dt{font-size:9px}.live dd{font-size:13px;overflow-wrap:anywhere}.controls{margin-top:var(--pad);overflow:visible}.panel{overflow:visible}}@media (prefers-reduced-motion: reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}