:root{--top: 56px;--bottom: 48px;--controls: 0px;--bezel: 26px;--screen-w: 320px;--screen-h: 180px;--px: 1px;--soil: #2e2118;--cream: #f6ecd4;--sand: #d3c194;--mustard: #e3a92b;--mustard-deep: #b07a14;--clay: #c4673f;--clay-deep: #9c4a28;--moss: #4f6b32;--sat: env(safe-area-inset-top, 0px);--sar: env(safe-area-inset-right, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#14100d;color:var(--cream);font-family:Nunito,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none}body{position:fixed;inset:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.cab{position:absolute;inset:0;display:grid;background:radial-gradient(120% 90% at 50% 0%,#2a221c,#17120f 55%,#0e0b09)}.cab[data-layout=desktop]{grid-template:"badge btns" var(--top) "stage stage" 1fr "hints hints" var(--bottom) / 1fr auto;padding:0 var(--side)}.cab[data-layout=portrait]{grid-template:"badge btns" var(--top) "stage stage" auto "padl padr" minmax(var(--controls),1fr) / 1fr 1fr;padding:0 var(--side)}.cab[data-layout=landscape]{grid-template:"badge stage btns" 46px "padl stage padr" 1fr / var(--controls) 1fr var(--controls);padding:max(6px,var(--sat)) max(8px,var(--sar)) max(6px,var(--sab)) max(8px,var(--sal))}.badge{grid-area:badge;display:flex;align-items:center;gap:10px;min-width:0}.cab[data-layout=portrait] .badge{padding-top:var(--sat);padding-left:6px}.cab[data-layout=landscape] .badge{justify-content:center;gap:6px}#badge-logo{image-rendering:pixelated;width:107px;height:23px;flex:none}.cab[data-layout=desktop] #badge-logo{width:160.5px;height:34.5px}@media(min-resolution:2dppx){.cab[data-layout=desktop] #badge-logo{image-rendering:pixelated}}.badge-sub{font:400 22px/1 "Jersey 25",ui-monospace,monospace;letter-spacing:2px;color:var(--mustard);text-shadow:2px 2px 0 #000}.cab[data-layout=landscape] .badge-sub,.cab[data-layout=portrait] .badge-sub{display:none}.led{width:8px;height:8px;border-radius:50%;background:#3a2a22;box-shadow:inset 0 -1px 1px #0009;flex:none}.cab.is-on .led{background:#9cc03f;box-shadow:0 0 6px 1px #9cc03fbf,inset 0 -1px 1px #00000059}.btns{grid-area:btns;display:flex;align-items:center;justify-content:flex-end;gap:8px}.cab[data-layout=portrait] .btns{padding-top:var(--sat);padding-right:6px}.cab[data-layout=landscape] .btns{justify-content:center}.chip{appearance:none;border:0;margin:0;cursor:pointer;min-width:48px;height:32px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font:400 17px/1 "Jersey 25",ui-monospace,monospace;letter-spacing:1px;white-space:nowrap;color:var(--cream);background:#3a2f27;border-radius:9px;box-shadow:0 4px #1d1713;transform:translateY(-2px);position:relative;touch-action:none}.chip:after{content:"";position:absolute;inset:-8px -2px}.chip:active,.chip.is-down{transform:translateY(2px);box-shadow:0 0 #1d1713}.chip:focus-visible,.under a:focus-visible{outline:3px solid var(--mustard);outline-offset:3px}#btn-mute[aria-pressed=true]{color:#17120f;background:var(--mustard);box-shadow:0 4px 0 var(--mustard-deep)}#btn-mute[aria-pressed=true]:active{box-shadow:0 0 0 var(--mustard-deep)}#btn-mute .spk-on{display:none}#btn-mute[aria-pressed=true] .spk-on{display:block}#btn-mute[aria-pressed=true] .spk-off,.cab[data-layout=landscape] #mute-label,.cab[data-narrow="1"] #mute-label{display:none}.stage{grid-area:stage;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0}.cab[data-layout=portrait] .stage{justify-content:flex-start}.bezel{padding:var(--bezel);border-radius:calc(var(--bezel) * .9 + 8px);background:linear-gradient(160deg,#ffffff1c,#ffffff05 22%,#0000 45%,#00000059),#1f1915;box-shadow:inset 0 1px #ffffff24,inset 0 -2px 3px #000000b3,0 10px 30px #0000008c;flex:none}.glass{position:relative;width:var(--screen-w);height:var(--screen-h);overflow:hidden;background:#000;border-radius:10px;box-shadow:0 0 0 2px #060504,0 0 0 3px #ffffff0d;isolation:isolate}.cab[data-crt=on] .glass{border-radius:16px/18px}.cab[data-crt=off] .glass{border-radius:4px}#screen{display:block;width:var(--screen-w);height:var(--screen-h);image-rendering:crisp-edges;image-rendering:pixelated;transform-origin:50% 50%}.crt{position:absolute;inset:0;pointer-events:none}.crt-scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) calc(var(--px) * .62),rgba(0,0,0,.2) calc(var(--px) * .62),rgba(0,0,0,.2) var(--px));opacity:.55}.cab[data-crt=low] .crt-scan{opacity:.3}.crt-vig{background:radial-gradient(ellipse at 50% 50%,#0000 58%,#0000004d);box-shadow:inset 0 0 calc(var(--px) * 6) #000000bf,inset 0 0 2px #000000e6;border-radius:inherit}.cab[data-crt=low] .crt-vig{background:none}.crt-glare{background:radial-gradient(ellipse 120% 70% at 50% -18%,#ffffff21,#ffffff08 45%,#fff0 60%),radial-gradient(ellipse 140% 120% at 50% 50%,#0000 70%,#00000047)}.cab[data-crt=low] .crt-glare,.cab[data-crt=off] .crt{display:none}.cab[data-crt=low] .crt-scan,.cab[data-crt=low] .crt-vig{display:block}.cab[data-crt=on] .crt-scan{animation:shimmer 2.4s steps(6) infinite}@keyframes shimmer{0%,to{opacity:.55}50%{opacity:.47}}.cab.powering #screen{animation:power-on .85s cubic-bezier(.2,.8,.2,1) both}@keyframes power-on{0%{transform:scale(0,.006);filter:brightness(8)}28%{transform:scaleY(.006);filter:brightness(8)}40%{transform:scaleY(.006);filter:brightness(6)}to{transform:scale(1);filter:brightness(1)}}.cab.powering[data-crt=low] #screen,.cab.powering[data-crt=off] #screen{animation:power-fade .25s linear both}@keyframes power-fade{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.cab.powering #screen{animation:power-fade .25s linear both}.cab[data-crt=on] .crt-scan{animation:none}}.under{height:22px;flex:none;margin-top:4px;display:flex;align-items:center;justify-content:center;gap:14px;font:500 13px/1 Nunito,system-ui,sans-serif;color:#b9ab93;text-align:center;white-space:nowrap;max-width:100%;overflow:hidden}.under a{color:var(--cream);font-weight:800;text-decoration:underline;text-underline-offset:3px;padding:4px 2px;border-radius:4px;touch-action:manipulation}.cab[data-layout=landscape] .under{height:20px;margin-top:2px;font-size:12px}.cab[data-layout=desktop] .under{height:24px;margin-top:8px;font-size:14px}.hints{grid-area:hints;display:none;align-items:center;justify-content:center;gap:18px;font:400 19px/1 "Jersey 25",ui-monospace,monospace;letter-spacing:1px;color:#9a8d78;text-transform:uppercase}.cab[data-layout=desktop] .hints{display:flex}.hints kbd{display:inline-block;min-width:24px;padding:3px 6px 4px;margin-right:5px;text-align:center;font:800 12px/1.1 Nunito,system-ui,sans-serif;letter-spacing:0;color:var(--cream);background:#3a2f27;border-radius:5px;box-shadow:0 2px #1d1713}.pad{display:none;align-items:center;justify-content:center;touch-action:none}.cab[data-layout=portrait] .pad,.cab[data-layout=landscape] .pad{display:flex}.pad-l{grid-area:padl}.pad-r{grid-area:padr;gap:14px}.cab[data-layout=portrait] .pad{padding-bottom:var(--sab)}.dpad{--s: 52px;position:relative;width:calc(var(--s) * 3);height:calc(var(--s) * 3);display:grid;grid-template:repeat(3,var(--s)) / repeat(3,var(--s));touch-action:none}.dp{background:var(--cream);box-shadow:0 6px 0 var(--sand);position:relative;transition:transform 40ms linear}.dp-u{grid-area:1 / 2;border-radius:12px 12px 0 0;box-shadow:none}.dp-l{grid-area:2 / 1;border-radius:12px 0 0 12px}.dp-c{grid-area:2 / 2;box-shadow:none}.dp-r{grid-area:2 / 3;border-radius:0 12px 12px 0}.dp-d{grid-area:3 / 2;border-radius:0 0 12px 12px}.dp-c:after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--sand)}.dp[data-d]:after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:9px solid transparent;border-bottom-color:var(--soil);border-top-width:0;transform:translate(-50%,-50%) rotate(var(--r, 0deg))}.dp-r{--r: 90deg}.dp-d{--r: 180deg}.dp-l{--r: 270deg}.dp.is-down{background:#e9dcbc}.dpad.is-down-down .dp-d,.dpad.is-down-left .dp-l,.dpad.is-down-right .dp-r{transform:translateY(4px);box-shadow:0 2px 0 var(--sand)}.round{appearance:none;border:0;margin:0;padding:0;width:68px;height:68px;border-radius:50%;font:400 34px/1 "Jersey 25",ui-monospace,monospace;color:var(--soil);touch-action:none;position:relative;top:-3px}.round-a{background:var(--mustard);box-shadow:0 7px 0 var(--mustard-deep);margin-bottom:26px}.round-b{background:var(--clay);box-shadow:0 7px 0 var(--clay-deep);margin-top:26px;color:var(--cream)}.round.is-down{transform:translateY(6px)}.round-a.is-down{box-shadow:0 1px 0 var(--mustard-deep)}.round-b.is-down{box-shadow:0 1px 0 var(--clay-deep)}.cab[data-layout=landscape] .dpad{--s: 46px}.cab[data-layout=landscape] .round{width:60px;height:60px;font-size:30px}.cab[data-layout=landscape] .pad-r{gap:8px}
