:root{color-scheme:dark;font-family:Menlo,Consolas,monospace;background:#050e1d;color:#e8f2ff}*{box-sizing:border-box}body{margin:0}main{width:100%;display:flex;justify-content:center}.stage{position:relative;width:min(100%,calc(100dvh * 1440 / 1805));aspect-ratio:1440/1805;overflow:hidden;background:#071426}canvas,video{width:100%;height:100%;display:block}video[hidden]{display:none}button,input{font:inherit}button{cursor:pointer;color:#e0edff;background:#102441;border:1px solid #315780;border-radius:4px;padding:7px 10px}button:hover,button:focus-visible{color:#fff;border-color:#66a7ff;outline:none}.transport{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:9px 12px;background:#061426ed;border:1px solid #386c9f;border-radius:9px;z-index:5;opacity:0;transition:opacity .2s;max-width:96vw;box-shadow:0 6px 30px #0008}body:hover .transport,.transport:focus-within{opacity:1}input{accent-color:#5599ff;width:180px}output{font-size:10px;white-space:nowrap}#mode{white-space:nowrap;font-size:11px}#hitTargets{position:absolute;inset:0;pointer-events:none}.row-hit{position:absolute;right:1%;width:24%;height:2.8%;background:transparent;border:0;pointer-events:auto;padding:0}.row-hit:hover{background:#5599ff12;outline:1px solid #5599ff55}.detail{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,90vw);padding:32px;background:#071426f5;border:1px solid #386b9f;border-left:4px solid #5599ff;z-index:10;box-shadow:0 0 0 100vmax #0009,0 0 70px #0755ed22}.detail p{font-size:10px;color:#81aee4}.detail h2{font-size:24px}.detail div{line-height:1.8;font-size:13px;color:#b4cce7}#closeDetail{position:absolute;right:12px;top:12px}.detail strong{color:#b7ddff}.detail[hidden]{display:none}@media(max-width:600px){.stage{width:100%}.transport{gap:5px;padding:7px;bottom:8px;opacity:1}input{width:80px}output{font-size:9px}button{padding:7px}#fullscreen{display:none}}@media(prefers-reduced-motion:reduce){.transport{transition:none}}

body{min-height:100dvh}main{min-height:100dvh;align-items:center}.row-hit:focus-visible{outline:2px solid #75b3ff;background:#5599ff12}

/* Fill the available phone viewport instead of centering a short fixed-ratio stage. */
@media (max-width:600px), (pointer:coarse){
 html,body{width:100%;height:100%;overflow:hidden}
 main{position:fixed;inset:0;width:100%;height:100vh;height:100dvh;min-height:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
 .stage{width:100%;height:100%;aspect-ratio:auto;flex:none}
 canvas{width:100%;height:100%}
 .transport{max-width:calc(100% - 16px);bottom:8px}
}