:root{--bg: #000;--panel: #111;--line: #2a2a2a;--text: #eee;--muted: #8a8a8a;--red: #ff2a1a;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg)}[hidden]{display:none!important}.start{max-width:640px;margin:0 auto;padding:48px 16px}h1{margin:0 0 8px;font-size:32px;letter-spacing:-.02em}h1:before{content:"";display:inline-block;width:12px;height:28px;margin-right:12px;background:var(--red);border-radius:3px;vertical-align:-4px;box-shadow:0 0 16px var(--red)}.lead{color:#bbb;margin:0 0 24px}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}.field{display:grid;gap:6px;font-size:14px;color:#bbb}.field input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #333;background:#000;color:var(--text);font-size:15px}.field input:focus{outline:2px solid var(--red);outline-offset:0}.or{text-align:center;color:var(--muted);margin:12px 0;font-size:13px}.check{display:flex;gap:10px;align-items:flex-start;margin:18px 0;font-size:14px;color:#ccc}.check input{margin-top:3px;accent-color:var(--red)}button,.btn{font:inherit;cursor:pointer;border-radius:8px;border:1px solid #333;background:#1c1c1c;color:var(--text);padding:8px 14px;text-decoration:none;display:inline-block}button:hover,.btn:hover{border-color:#555}#submit,#unlock{width:100%;padding:12px;background:var(--red);border:0;font-weight:600;color:#fff}#unlock{margin-top:16px}#submit:disabled,#unlock:disabled{opacity:.5;cursor:progress}.error{margin-top:14px;padding:10px 12px;border-radius:8px;background:#3a0d0a;color:#ffb4ab;font-size:14px}.stage{margin-bottom:10px}.bar{height:6px;background:#222;border-radius:3px;overflow:hidden}#bar-fill{height:100%;width:0;background:var(--red);transition:width .4s}.muted{color:var(--muted)}.small{font-size:12px}#progress-note{margin-top:8px;font-size:13px}.player{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}#roll{flex:1;width:100%;min-height:0;display:block}.controls{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:10px 16px;background:#0b0b0b;border-top:1px solid #1d1d1d;font-size:13px}.icon{width:40px;height:36px;padding:0;font-size:16px}.time{font-variant-numeric:tabular-nums;color:#ccc;min-width:92px}.seek{flex:1 1 200px;accent-color:var(--red)}.ctl{display:flex;align-items:center;gap:6px;color:#bbb}.ctl input[type=range]{width:100px;accent-color:var(--red)}.ctl input[type=number]{width:64px;background:#000;color:var(--text);border:1px solid #333;border-radius:6px;padding:4px 6px}.ctl output{min-width:38px;font-variant-numeric:tabular-nums}.title{position:absolute;top:10px;left:16px;right:16px;color:#777;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}