@font-face{font-family:Inter;src:url(/fonts/inter.woff2) format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:GeistMono;src:url(/fonts/mono.woff2) format('woff2');font-weight:100 900;font-display:block}
html,body{margin:0;height:100%;background:#FFF6E9;overflow:hidden;-webkit-tap-highlight-color:transparent}
body{font-family:Inter,system-ui,sans-serif}
#stage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
#ui{position:fixed;inset:0;pointer-events:none;--fg:#151433;--bg:rgba(255,246,233,.82)}
#ui.dark{--fg:#FFF6E9;--bg:rgba(255,246,233,.16)}
#ui.dark #cap{background:rgba(255,246,233,.94);color:#151433}
.tr{position:absolute;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:flex;gap:8px}
.ic{pointer-events:auto;width:38px;height:38px;border-radius:50%;border:0;padding:8px;background:var(--bg);color:var(--fg);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s,opacity .4s,transform .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ic:hover{transform:scale(1.08)}
.ic:focus-visible{outline:2px solid #FFC62B;outline-offset:2px}
.ic svg{width:100%;height:100%;fill:currentColor;overflow:visible}
.ic .st,.ic .st path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#cc rect{fill:none;stroke:currentColor;stroke-width:2}
#cc:not(.on){opacity:.55}
#snd .wav{display:none}#snd.on .wav{display:inline}#snd.on .x{display:none}
#replay{position:absolute;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));width:28px;height:28px;padding:5px;opacity:0;pointer-events:none;transform:scale(.6)}
#replay.show{opacity:.85;pointer-events:auto;transform:scale(1)}
#replay.show.m-pause{opacity:.5}
#replay.show:hover,#replay.show:focus-visible{opacity:1;transform:scale(1.1)}
#replay .i-pause,#replay .i-play,#replay .i-replay{display:none}
#replay.m-pause .i-pause,#replay.m-play .i-play,#replay.m-replay .i-replay{display:inline}
#cap{position:absolute;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 3.2vh);transform:translateX(-50%);max-width:min(88vw,980px);width:max-content;text-align:center;font:600 var(--cs,20px)/1.35 Inter,system-ui,sans-serif;color:#FFF6E9;background:rgba(21,20,51,.86);padding:.38em .8em;border-radius:.7em;opacity:0;transition:opacity .25s;letter-spacing:-.005em;box-sizing:border-box}
#cap.show{opacity:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ns{position:fixed;inset:0;display:grid;place-content:center;text-align:center;background:#2B2BFF;color:#FFF6E9;font-family:Inter,sans-serif}