*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;color:#c8b48a;font:15px/1.4 Segoe UI,sans-serif}#app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:16px 12px 24px}h1{margin:0 0 8px;font-size:1.15rem;font-weight:600;letter-spacing:.04em;color:#e8d4a8}.sub{margin:0 0 14px;color:#8a7460;font-size:.85rem}.stage-wrap{position:relative;display:inline-block;border:4px solid #2a1c10;box-shadow:0 0 0 1px #5a4030;background:#000;line-height:0}canvas.stage,video.stage{display:block;width:min(960px,100vw - 32px);height:auto;aspect-ratio:320 / 200;background:#000;image-rendering:pixelated;image-rendering:crisp-edges;outline:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}canvas.stage.has-token,video.stage.has-token{cursor:none}canvas.stage.wait-token,video.stage.wait-token{cursor:default}.chrome{width:min(960px,100vw - 32px);margin-top:12px;display:flex;flex-direction:column;gap:8px}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.status{color:#d8c090;min-height:1.3em}.token{font-weight:600;color:#7ad07a}.token.wait{color:#c9a227}button,.file-btn{background:#3a2818;color:#e8d4a8;border:1px solid #6a5038;padding:6px 12px;cursor:pointer;font:inherit}button:hover:not(:disabled),.file-btn:hover{background:#4a3420}button:disabled{opacity:.45;cursor:default}button.primary{background:#5a3a18;border-color:#c8a060}input.code{width:7.5em;text-transform:uppercase;letter-spacing:.2em;font:16px Courier New,monospace;background:#d8c090;color:#000;border:2px solid #403018;padding:4px 6px}.drop{border:1px dashed #6a5038;padding:10px 12px;color:#8a7460;font-size:.9rem}.drop.hidden,.hidden{display:none!important}.error{color:#e08070;white-space:pre-wrap;font-size:.9rem}.hint{color:#8a7460;font-size:.85rem}input[type=file]{display:none}label{display:flex;gap:6px;align-items:center;color:#c8b48a}label.check{cursor:pointer;-webkit-user-select:none;user-select:none}label.check input{width:1.05em;height:1.05em;accent-color:#c8a060}select{background:#3a2818;color:#e8d4a8;border:1px solid #6a5038;padding:4px 8px;font:inherit}.roster{color:#d8c090;font-size:.9rem}.fs-bar{position:absolute;top:8px;right:8px;z-index:4;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;pointer-events:none}.fs-bar button{pointer-events:auto;min-height:44px;padding:8px 14px;background:#20140ce0}html.immersive,html.immersive body{overflow:hidden;height:100%;height:100dvh}html.immersive #app{padding:0;min-height:100dvh}html.immersive h1,html.immersive .sub,html.immersive .chrome{display:none}html.immersive .stage-wrap,.stage-wrap:fullscreen,.stage-wrap:-webkit-full-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border:none;box-shadow:none;background:#000}html.immersive canvas.stage,html.immersive video.stage,.stage-wrap:fullscreen canvas.stage,.stage-wrap:fullscreen video.stage,.stage-wrap:-webkit-full-screen canvas.stage,.stage-wrap:-webkit-full-screen video.stage{width:min(100vw,160dvh);height:min(100dvh,62.5vw);max-width:100%;max-height:100%}html.immersive .fs-bar,.stage-wrap:fullscreen .fs-bar,.stage-wrap:-webkit-full-screen .fs-bar{inset:auto 0 0 0;top:auto;padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px));justify-content:center;background:linear-gradient(transparent,#000c)}@media (max-width: 700px){#app{padding:10px 8px 16px}h1{font-size:1.05rem}.sub{display:none}button,.file-btn,select,input.code{min-height:44px;font-size:16px}canvas.stage,video.stage,.chrome{width:min(960px,100vw - 16px)}}#listen-go{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000000e0;color:#e8d4a8;border:0;font:600 1.35rem/1.4 Segoe UI,sans-serif;cursor:pointer;letter-spacing:.02em}#listen-go:hover{background:#140c04f0;color:#fff0c8}