@property --accent{syntax:"<color>";inherits:true;initial-value:#7c8cff}:root{--accent:#7c8cff;--ink:#08090c;--lcd-bg:#0a0b10;--mx:30%;--my:12%;--pixel:Silkscreen, ui-monospace, monospace;--display:"Pixelify Sans", Silkscreen, monospace;--read:VT323, ui-monospace, monospace;--silk:Archivo, system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;transition:--accent .28s ease-out}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;margin:0}body{background:radial-gradient(70% 90% at 50% 45%, color-mix(in oklab, var(--accent) 34%, #0b0c12), #0b0c12 72%);color:#fff;font-family:var(--silk);overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(24px,4vw,72px);padding:0 clamp(24px,4vw,72px);display:grid;overflow:hidden}.side{font-stretch:125%}.side-pitch{text-align:right;justify-self:end;max-width:340px}.side-stack{justify-self:start;max-width:300px}.side-kicker{color:color-mix(in oklab, var(--accent) 60%, #fff);font:500 12px/1.4 var(--silk);letter-spacing:.04em;margin:0 0 16px;font-stretch:125%}.side h1{font:700 clamp(56px, 6vw, 96px) / .86 var(--display);letter-spacing:-.02em;margin:0 0 16px}.side-line{font:500 17px/1.35 var(--silk);margin:0;font-stretch:125%}.side-keys{color:#ffffff8c;font:500 12px/1.4 var(--silk);margin:28px 0 0;font-stretch:125%}.side ol{gap:12px;margin:0;padding:0;list-style:none;display:grid}.side li{border-top:1px solid #ffffff2e;gap:1px;padding-top:10px;display:grid}.side li small{color:#ffffff8c;font:500 11px/1.3 var(--silk);font-stretch:125%}.side li span{font:400 21px/1.05 var(--read)}.side-credit{color:#ffffffa6;font:500 12px/1.4 var(--silk);margin:20px 0 0;font-stretch:125%}.side-credit a,.prose a{color:inherit;text-underline-offset:3px}.device{--w:min(100vw, calc((100dvh - 28px) * .56));width:var(--w);height:min(calc(100dvh - 28px), calc(var(--w) * 2));background:radial-gradient(70% 34% at var(--mx) var(--my), #ffffff80, transparent 70%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-opacity='.13' stroke-width='1.5'%3E%3Cpath d='M0 20h34l14 14v30l18 18h54M60 0v22l12 12h48M0 90h22l10 10v20M90 120V96l-8-8'/%3E%3Ccircle cx='48' cy='64' r='2.5'/%3E%3Ccircle cx='72' cy='34' r='2.5'/%3E%3Ccircle cx='32' cy='100' r='2.5'/%3E%3C/svg%3E"), linear-gradient(162deg, color-mix(in oklab, var(--accent) 78%, #fff), color-mix(in oklab, var(--accent) 88%, #000) 62%, color-mix(in oklab, var(--accent) 58%, #000));border-radius:26px 26px 64px;grid-template-rows:auto minmax(0,max-content) minmax(max-content,1fr);grid-template-columns:minmax(0,1fr);padding:10px 14px 18px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1.5px #ffffffa6,inset 0 -4px 10px #00000047,0 30px 70px #00000080}.shell-top{justify-content:space-between;align-items:center;height:22px;padding:0 8px 4px;display:flex}.silk{color:#000000b8;font:800 9px/1 var(--silk);letter-spacing:.02em;font-stretch:125%}.led{background:#331010;border-radius:50%;width:8px;height:8px;box-shadow:inset 0 0 0 1px #00000080}.led.on{background:#ff5040;animation:.7s steps(2,end) infinite blink;box-shadow:0 0 9px 2px #ff5040bf}@keyframes blink{50%{opacity:.35}}.screen{background:var(--ink);border-radius:16px;flex-direction:column;min-height:0;padding:7px;display:flex;box-shadow:inset 0 2px 5px #ffffff1a,0 0 0 1px #0009,0 1.5px #fff6}.viewport{aspect-ratio:3/4;background:var(--ink);border-radius:9px 9px 2px 2px;flex:0 auto;place-items:center;width:100%;min-height:0;display:grid;position:relative;overflow:hidden;container-type:size}.frame{background:#000;width:min(100cqw,75cqh);height:min(100cqh,133.333cqw);position:relative;overflow:hidden}#view{width:100%;height:100%;image-rendering:pixelated;touch-action:none;display:block}.overlay{color:#fff;font-family:var(--pixel);pointer-events:none;flex-direction:column;display:flex;position:absolute;inset:0}.overlay button,.overlay a{pointer-events:auto}.dim{-webkit-backdrop-filter:blur(3px)saturate(1.4);backdrop-filter:blur(3px)saturate(1.4);pointer-events:auto;background:#05060adb}.pad{padding:16px}.title{font:700 clamp(44px, calc(var(--w) * .155), 92px) / .82 var(--display);letter-spacing:-.02em;text-shadow:3px 3px 0 var(--ink);margin:auto 0 0;padding:16px}.title small{color:#fff;font:400 clamp(19px, calc(var(--w) * .058), 24px) / 1 var(--read);letter-spacing:0;text-shadow:1.5px 1.5px 0 var(--ink);margin-top:12px;display:block}.topline{text-shadow:1.5px 1.5px 0 var(--ink);justify-content:space-between;align-items:center;padding:10px 12px;font-size:12px;display:flex}.tap-sound{animation:.9s steps(2,end) infinite blink}[data-sound] .tap-sound{display:none}.stage-name{align-items:center;gap:8px;display:flex}.mark{background:var(--accent);width:26px;height:26px;color:var(--ink);font:400 13px/1 var(--pixel);text-shadow:none;place-items:center;display:inline-grid}.space{flex:1}.roster{justify-content:center;gap:4px;margin:0;padding:8px;list-style:none;display:flex}.roster li{aspect-ratio:1;font:400 11px/1 var(--pixel);opacity:.6;background:#05060ab3;flex:0 34px;place-items:center;display:grid;overflow:hidden;box-shadow:0 0 0 1px #ffffff40}.roster li.on{box-shadow:0 0 0 2px var(--accent), 0 0 0 4px var(--ink);opacity:1}.roster img{object-fit:cover;width:100%;height:100%;image-rendering:pixelated}.banner{z-index:2;color:#fff;font:700 clamp(28px, 13cqw, 60px) / 1 var(--display);text-align:center;text-shadow:3px 3px 0 var(--ink);pointer-events:none;animation:.9s ease-out forwards slam;position:absolute;top:40%;left:0;right:0}@keyframes slam{0%{opacity:0;transform:translate(-40%)skew(-14deg)}14%{opacity:1;transform:none}70%{opacity:1}to{opacity:0}}.sweep{z-index:1;background:var(--accent);pointer-events:none;animation:.38s ease-in-out forwards sweep;position:absolute;inset:0}@keyframes sweep{0%{clip-path:inset(0 100% 0 0)}45%{clip-path:inset(0)}to{clip-path:inset(0 0 0 100%)}}.dots{align-self:center;gap:3px;display:inline-flex}.dots i{background:#ffffff40;width:5px;height:5px}.dots i.on{background:var(--accent)}.heading{color:var(--accent);font:700 30px/1 var(--display);margin:0 0 12px}.prose{font:400 22px/1.08 var(--read);margin:0 0 12px}.guide{flex-direction:column;flex:1;gap:8px;min-height:0;padding:12px;display:flex;overflow:auto}.guide .heading{font-size:clamp(22px, calc(var(--w) * .07), 30px);margin:0}.guide-figure{width:100%;min-height:0;color:var(--accent);flex:1 1 0}.guide-tips{font:400 clamp(18px, calc(var(--w) * .056), 24px) / 1 var(--read);flex:none;justify-content:center;gap:4px;margin:0;padding:0;list-style:none;display:grid}.guide-tips li{grid-template-columns:14px 1fr;display:grid}.guide-tips li:before{color:var(--accent);content:"+"}.cam{background:#000;position:absolute;inset:0}.cam canvas,.cam-still{object-fit:cover;width:100%;height:100%;image-rendering:pixelated;display:block}.cam:after{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#00000024 0 1px,#0000 1px 3px);position:absolute;inset:0}.cam-outline{z-index:1;color:#fff;filter:drop-shadow(0 0 1px #000000e6);width:100%;height:100%;position:absolute;inset:0}.cam-outline text{fill:currentColor;font:400 2.4px var(--pixel)}.cam-hint{z-index:2;font:400 clamp(14px, calc(var(--w) * .045), 19px) / 1 var(--read);text-align:center;text-shadow:1.5px 1.5px 0 var(--ink);margin:0;position:absolute;inset:auto 4px 2px}.device[data-mode=camera] .pills{display:none}.device[data-mode=camera] .ab{align-items:center;gap:12px}.device[data-mode=camera] .round-b{align-self:end}.device[data-mode=camera] .round-a{width:clamp(72px, calc(var(--w) * .245), 100px);margin-bottom:0}.round.word{letter-spacing:0;overflow-wrap:anywhere;padding:0 4px;font-size:10px;line-height:1.2}.device[data-mode=camera] .round-a.word{font-size:15px}.cam-count{z-index:2;color:var(--accent);font:700 clamp(72px, calc(var(--w) * .34), 150px) / 1 var(--display);text-shadow:4px 4px 0 var(--ink);place-items:center;display:grid;position:absolute;inset:0}.cam-flash{z-index:3;background:#fff;animation:.24s ease-out forwards flash;position:absolute;inset:0}@keyframes flash{to{opacity:0}}.log{gap:7px;margin:0;padding:0;list-style:none;display:grid}.log li{color:#ffffff52;font:400 13px/1.1 var(--pixel);grid-template-columns:18px 1fr;gap:2px 4px;display:grid}.log li small{font:400 16px/.9 var(--read);opacity:.75;grid-column:2}.log li.now{color:var(--accent)}.log li.now:before{content:">";animation:.5s steps(2,end) infinite blink}.log li.done{color:#fff}.log li.done:before{content:"+"}.log li:not(.now,.done):before{content:"."}.made-from{z-index:-1;object-fit:cover;width:100%;height:100%;image-rendering:pixelated;opacity:.22;filter:grayscale()contrast(1.4);position:absolute;inset:0}.menu{gap:2px;margin:0;padding:0;list-style:none;display:grid}.menu button,.menu a{color:#fff;width:100%;min-height:48px;font:400 16px/1 var(--pixel);text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;padding:8px 10px;text-decoration:none;display:flex}.menu [aria-current=true]{background:var(--accent);color:var(--ink)}.menu-page{flex-direction:column;flex:1;display:flex}.menu-save{border-top:1px dashed #ffffff4d;margin-top:auto;padding-top:12px}.menu-save h3{color:#fff9;font:400 11px/1 var(--pixel);margin:0 0 8px}.menu-save .menu{grid-template-columns:1fr 1fr;gap:6px}.menu-save .menu button,.menu-save .menu a{box-shadow:inset 0 0 0 1px #ffffff59}.bar{grid-template-columns:repeat(20,1fr);gap:2px;height:18px;margin:14px 0;display:grid}.bar i{background:#ffffff21}.bar i.on{background:var(--accent)}.stack-lcd{font:400 19px/1 var(--read);gap:8px;margin:0 0 12px;padding:0;list-style:none;display:grid}.stack-lcd small{color:var(--accent);font:400 11px/1.2 var(--pixel);display:block}.lcd{background:var(--lcd-bg);min-height:64px;color:var(--accent);border-radius:0 0 9px 9px;flex:none;align-content:center;gap:1px;padding:6px 0;display:grid}.lcd-link{min-height:34px;color:var(--accent);font:400 14px/1 var(--pixel);text-underline-offset:3px;background:0 0;border:0;justify-self:center;padding:0 12px;text-decoration:underline}.lcd-link+.lcd-note{font-size:17px}.rail{grid-template-columns:44px 1fr 44px;align-items:center;min-height:32px;display:grid}.rail>span{font:400 14px/1 var(--pixel);place-items:center;display:grid}.rail output{font:400 18px/1 var(--pixel);white-space:nowrap;flex-wrap:wrap;justify-content:center;gap:3px 8px;display:flex;overflow:hidden}.rail output small{color:#ffffff80;font:400 11px/1 var(--pixel);align-self:center}.rails{gap:1px;display:grid}.pad-rails{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}.rail-x{grid-template-columns:34px minmax(0,1fr) 34px}.rail-y{grid-template-columns:minmax(0,1fr);justify-items:center;gap:2px}.pad-rails .rail>span{--dx:0;--dy:0;font-size:22px}.pad-rails .rail-y>span{font-size:16px;line-height:.8}.pad-rails [data-dir=left]{--dx:-1}.pad-rails [data-dir=right]{--dx:1}.pad-rails [data-dir=up]{--dy:-1}.pad-rails [data-dir=down]{--dy:1}.pad-rails .hit{color:#fff;animation:.24s ease-out hit}@keyframes hit{40%{transform:translate(calc(var(--dx) * 6px), calc(var(--dy) * 6px)) scale(1.35)}}[data-fresh] .pad-rails [data-dir]{animation:1.1s ease-in-out infinite nudge}@keyframes nudge{50%{transform:translate(calc(var(--dx) * 5px), calc(var(--dy) * 4px))}}.lcd-note{color:#ffffffc2;font:400 20px/1 var(--read);text-align:center;align-self:center;margin:0;padding:0 12px}.controls{grid-template-columns:auto 1fr auto;align-self:center;align-items:center;gap:6px;padding:16px 6px 2px;display:grid;position:relative}.dpad{grid-template:repeat(3, clamp(38px, calc(var(--w) * .125), 52px)) / repeat(3, clamp(38px, calc(var(--w) * .125), 52px));filter:drop-shadow(0 3px 2px #00000073);display:grid}.dpad button{color:#ffffffbd;background:#17181f;border:0;place-items:center;padding:0;transition:transform 50ms,background 50ms;display:grid;box-shadow:inset 0 1px #ffffff2b}.dpad svg{fill:currentColor;width:40%}#up{border-radius:7px 7px 0 0;grid-area:1/2}#left{border-radius:7px 0 0 7px;grid-area:2/1}#right{border-radius:0 7px 7px 0;grid-area:2/3}#down{border-radius:0 0 7px 7px;grid-area:3/2}.dpad-hub{background:#17181f;grid-area:2/2}.dpad button:active,.dpad button.down{background:var(--accent);color:var(--ink)}.ab{grid-template-columns:auto auto;align-items:end;gap:8px;display:grid}.round{width:clamp(54px, calc(var(--w) * .175), 72px);aspect-ratio:1;color:#fff;font:400 18px/1 var(--pixel);background:#17181f;border:0;border-radius:50%;padding:0;transition:transform 50ms,box-shadow 50ms;box-shadow:inset 0 1.5px #ffffff47,0 4px #00000080}.round-a{background:var(--ink);color:var(--accent);margin-bottom:26px}.round:active,.round.down{transform:translateY(3px);box-shadow:inset 0 1.5px #fff3}.pills{flex-direction:column;align-items:center;gap:8px;display:flex}.pill{color:#fff;min-width:46px;min-height:28px;font:800 9px/1 var(--silk);background:#000000ad;border:0;border-radius:14px;padding:0 8px;font-stretch:125%}.pill[hidden]{display:none}.pill-share{background:var(--accent);color:var(--ink)}.pill[aria-pressed=false]{opacity:.5;text-decoration:line-through}button:focus-visible,a:focus-visible{outline-offset:1px;outline:2px solid #fff}button:disabled{opacity:.35}::view-transition-old(root){animation-duration:.12s}::view-transition-new(root){animation-duration:.12s}@media (width<=960px){body{background:var(--ink);padding:0;display:block}.side{display:none}.device{--w:100vw;width:100%;height:100dvh;padding:max(6px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));box-shadow:none;border-radius:0}.shell-top{height:18px}}@media (width<=340px){.dpad{grid-template:repeat(3,32px)/repeat(3,32px)}.round{width:48px}}@media (height<=820px){.controls{padding-top:8px}.dpad{grid-template:repeat(3,34px)/repeat(3,34px)}.round{width:52px}.round-a{margin-bottom:18px}.lcd{min-height:36px;padding:2px 0}.rail-x{grid-template-columns:28px minmax(0,1fr) 28px}.rail:not(.rail-y){min-height:32px}.rail output{font-size:14px}.rails{grid-template-columns:repeat(2,minmax(0,1fr))}.rails .rail output small,.rail+.lcd-note{display:none}.lcd-note{font-size:18px}.lcd-link{min-height:26px}}@media (height<=820px) and (width<=960px){.device{padding:max(4px, env(safe-area-inset-top)) 6px max(8px, env(safe-area-inset-bottom));grid-template-rows:minmax(0,1fr) auto}.shell-top{display:none}.screen{padding:4px}}@media (orientation:landscape) and (height<=500px){.device{--w:100dvh;padding:4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left));grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) auto;gap:8px}.shell-top{display:none}.screen{padding:4px}.controls{padding:0 4px}}@media (prefers-reduced-motion:reduce){:root{transition:none}.led.on,[data-fresh] .pad-rails [data-dir],.pad-rails .hit,.log li.now:before{animation:none}}
