@font-face{font-family:Inter Display;font-weight:900;src:url(/fonts/InterDisplay-Black.otf)format("opentype");font-display:block}@font-face{font-family:Inter Display;font-weight:700;src:url(/fonts/InterDisplay-Bold.otf)format("opentype");font-display:block}@font-face{font-family:Inter Text;font-weight:600;src:url(/fonts/Inter-SemiBold.otf)format("opentype");font-display:block}@font-face{font-family:Inter Text;font-weight:500;src:url(/fonts/Inter-Medium.otf)format("opentype");font-display:block}:root{--bg0:#163271;--bg1:#081840;--bg2:#040c22;--panel:13,34,83;--accent:#f47b20;--ice:#eaf0fa;--muted:#93a5c9;--line:#93a5c947;--bad:#ff7a6b;--good:#7fd8a5;--display:"Inter Display","Arial Black",Impact,sans-serif;--body:"Inter Text","Helvetica Neue",Arial,sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{background:var(--bg2)}html,body{color:var(--ice);margin:0}body{background:radial-gradient(130% 90% at 55% 0%,var(--bg0) 0%,var(--bg1) 45%,var(--bg2) 100%) fixed var(--bg2);min-height:100vh;font-family:var(--body);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:18px 40px;font-size:14px;transition:background-color .4s}.wrap{flex-direction:column;gap:14px;max-width:1500px;margin:0 auto;display:flex}button,select,input{font:500 14px/1.2 var(--body);color:var(--ice)}button{background:rgba(var(--panel),.85);border:1px solid var(--line);cursor:pointer;letter-spacing:.02em;border-radius:6px;padding:9px 13px}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.45;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#fff;text-shadow:0 1px 1px #00000059;font-weight:600}button[aria-pressed=true]{background:var(--ice);border-color:var(--ice);color:var(--bg2)}:is(button,select,input,summary):focus-visible{outline:2px solid var(--accent);outline-offset:2px}select,input{background:rgba(var(--panel),.7);border:1px solid var(--line);border-radius:6px;min-width:0;padding:8px 10px}label.f{font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex-direction:column;gap:5px;display:flex}label.f select,label.f input{text-transform:none;letter-spacing:0}.bar{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.group>.lab{font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-right:2px}.title{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.title h1{font:900 26px/1 var(--display);letter-spacing:-.01em;text-transform:uppercase;margin:0}.title span{color:var(--muted);font-size:13px}.frame{aspect-ratio:16/9;background:var(--bg2);border-radius:6px;width:100%;position:relative;overflow:hidden;box-shadow:0 20px 60px #00000073}.frame canvas{width:100%;height:100%;display:block}.overlay{background:color-mix(in srgb,var(--bg2) 60%,transparent);font:600 15px var(--body);color:var(--muted);text-align:center;align-content:center;place-items:center;padding:20px;display:grid;position:absolute;inset:0}.busy{background:color-mix(in srgb,var(--bg2) 85%,transparent);align-items:center;gap:12px;padding:10px 14px;display:flex;position:absolute;inset:auto 0 0}.busy progress{accent-color:var(--accent);flex:1;min-width:0}input[type=range]{accent-color:var(--accent);flex:200px;padding:0}.t{font-variant-numeric:tabular-nums;color:var(--muted);min-width:90px}.msg{min-height:1.2em;color:var(--muted)}.msg.bad{color:var(--bad)}.msg.good{color:var(--good)}.verify{color:var(--muted);flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;display:flex}.verify b{color:var(--good);font-weight:600}.verify b.bad{color:var(--bad)}details.editor{border:1px solid var(--line);background:rgba(var(--panel),.35);border-radius:8px}details.editor>summary{cursor:pointer;font:900 18px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;justify-content:space-between;gap:12px;padding:14px 16px;list-style:none;display:flex}details.editor>summary::-webkit-details-marker{display:none}details.editor>summary:after{content:"Open";font:600 12px/1 var(--body);letter-spacing:.14em;color:var(--muted)}details.editor[open]>summary:after{content:"Close"}.ed{flex-direction:column;gap:18px;padding:4px 16px 18px;display:flex}h3.sec{font:900 15px/1 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0}.plays{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:640px}th{font:600 11px/1 var(--body);letter-spacing:.14em;color:var(--muted);text-align:left;border-bottom:1px solid var(--line);text-transform:uppercase;padding:6px}td{border-bottom:1px solid #93a5c91f;padding:5px 6px}td select{width:100%}tr.off td:not(.c){opacity:.4}td.c{width:44px}td.n{width:84px}td.k{width:104px}td.s{width:120px}td.x{width:44px}td.y{width:96px}td.g,span.g{color:var(--muted);white-space:nowrap}td input:not([type=checkbox]),td select{width:100%}td.n input{font:900 16px var(--display)}td button{padding:6px 10px}.tiles-ed{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;display:grid}.note{color:var(--muted);max-width:80ch;margin:0;font-size:13px;line-height:1.5}.hint{color:var(--muted);font-size:12px}details.about>summary{cursor:pointer;width:fit-content;font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0}details.about[open]>summary{margin-bottom:6px}.top{justify-content:space-between}.studio,.main,.controls,.stage{flex-direction:column;min-width:0;display:flex}.studio{gap:16px}.main{gap:14px}.controls{gap:16px}.stage{gap:10px}.pickers{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));align-items:end;gap:12px;display:grid}.fset{flex-direction:column;gap:5px;display:flex}.fset>.lab,.lab-row>.lab{font:600 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.angles{scrollbar-width:none;gap:6px;display:flex;overflow-x:auto}.angles::-webkit-scrollbar{display:none}.angles button{white-space:nowrap;flex:1 0 auto}.lab-row{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.speed{--thumb:20px;padding-top:2px;position:relative}.speed .rail{left:calc(var(--thumb) / 2);right:calc(var(--thumb) / 2);background:linear-gradient(var(--accent),var(--accent)) 0/var(--p) 100% no-repeat,#93a5c938;pointer-events:none;border-radius:3px;justify-content:space-between;align-items:center;height:6px;display:flex;position:absolute;top:15px}.speed .rail i{background:#93a5c973;border-radius:2px;width:4px;height:14px;margin:0 -2px}.speed .rail i.on{background:var(--accent)}.speed input[type=range]{appearance:none;width:100%;height:32px;box-shadow:none;cursor:pointer;background:0 0;border:0;border-radius:0;margin:0;padding:0;display:block;position:relative}.speed input[type=range]:disabled{cursor:default;opacity:.5}.speed input[type=range]::-webkit-slider-runnable-track{background:0 0;height:32px}.speed input[type=range]::-moz-range-track{background:0 0;height:32px}.speed input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);border:3px solid var(--accent);background:#fff;border-radius:50%;margin-top:6px;box-shadow:0 2px 8px #00000073}.speed input[type=range]::-moz-range-thumb{border:3px solid var(--accent);background:#fff;border-radius:50%;width:14px;height:14px;box-shadow:0 2px 8px #00000073}.speed input[type=range]:focus-visible{outline:none}.speed input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ice);outline-offset:2px}.speed .ticks{padding:0 calc(var(--thumb) / 2);justify-content:space-between;display:flex}.speed .ticks button{width:0;min-height:0;color:var(--muted);font:600 12px/1.6 var(--body);font-variant-numeric:tabular-nums;cursor:pointer;background:0 0;border:0;justify-content:center;padding:0;display:flex;overflow:visible}.speed .ticks button span{white-space:nowrap;border-radius:4px;padding:2px 4px}.speed .ticks button.on,.speed .ticks button:hover:not(:disabled) span{color:var(--ice)}.keys{flex-direction:column;gap:2px;margin:0;display:flex}button.still{white-space:nowrap;align-items:center;gap:7px;display:inline-flex}button.still svg{flex:none;width:18px;height:18px}.overlay .spin{border:3px solid #93a5c940;border-top-color:var(--accent);border-radius:50%;width:26px;height:26px;margin:0 auto 10px;animation:.9s linear infinite spin;display:block}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.overlay .spin{animation-duration:2.5s}}@media (hover:none){.keys{display:none}}.transport{flex-wrap:nowrap;gap:12px}.transport input[type=range]{flex:auto;min-width:60px}.playbtn{justify-content:center;align-items:center;gap:8px;min-width:100px;display:inline-flex}.playbtn:before{content:"";clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;width:10px;height:12px}.playbtn[data-state=pause]:before{clip-path:none;background:linear-gradient(90deg,currentColor 0 35%,#0000 35% 65%,currentColor 65%)}.playbtn[data-state=replay]:before{content:"↺";clip-path:none;background:0 0;width:auto;height:auto;font-size:16px;line-height:1}.frame canvas{object-fit:contain;cursor:pointer}.expand{opacity:.7;background:#0408148c;border-color:#ffffff2e;border-radius:8px;place-items:center;width:36px;height:36px;padding:0;transition:opacity .15s;display:grid;position:absolute;top:10px;right:10px}.expand svg{width:18px;height:18px}.frame:hover .expand,.expand:focus-visible{opacity:1}.frame:fullscreen{aspect-ratio:auto;width:100%;height:100%;box-shadow:none;background:#000;border-radius:0}.frame.full{z-index:100;aspect-ratio:auto;width:auto;box-shadow:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#000;border-radius:0;position:fixed;inset:0}.rotate{display:none}@media (orientation:portrait){.frame.full .rotate{inset:auto 0 calc(28px + env(safe-area-inset-bottom));text-align:center;font:600 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:block;position:absolute}}@media (min-width:1100px){.studio{grid-template-columns:280px minmax(0,1fr);align-items:start;gap:24px;display:grid}.controls{position:sticky;top:16px}.pickers{grid-template-columns:1fr}.angles{grid-template-columns:1fr 1fr;display:grid;overflow:visible}.stage{align-self:center;width:100%;max-width:calc(177.778dvh - 320px)}}@media (max-width:1099px){.main{display:contents}.stage{order:-1}}@media (min-width:641px) and (max-width:1099px){.pickers{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr) minmax(0,1.4fr) minmax(0,1fr)}}@media (max-width:640px){body{padding-block:12px calc(84px + env(safe-area-inset-bottom))}.title h1{font-size:22px}.title span{display:none}.top button{padding:7px 11px}.stage{z-index:10;background:color-mix(in srgb,var(--bg2) 94%,transparent);margin-inline:-16px;padding:8px 16px 4px;position:sticky;top:0;box-shadow:0 10px 20px -12px #0009}.frame{border-radius:4px}.transport{z-index:20;background:color-mix(in srgb,var(--bg2) 96%,transparent);border-top:1px solid var(--line);padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));gap:10px;position:fixed;inset:auto 0 0}.stage{gap:6px}.stage .msg:empty{min-height:0}.transport .t,.transport .ext{display:none}.transport .primary{white-space:nowrap}.playbtn{min-width:92px}.frame:not(.full):not(:fullscreen) .expand{width:34px;height:34px;min-height:0;top:auto;bottom:6px;right:6px}.pickers{grid-template-columns:1fr 1fr;grid-auto-flow:dense}.pickers .wide{grid-column:1/-1}}@media (pointer:coarse){button,select,input:not([type=range]):not([type=checkbox]){min-height:44px}input[type=range]{height:36px}.expand{opacity:1;width:44px;height:44px}}