:root{--ink:#2b2b2b;--yellow:#ffd600;--cream:#fff8d6;--pink:#ff5ca8;--cyan:#2ee6d6;--red:#e0201b}*{box-sizing:border-box}body{background:var(--cream);color:var(--ink);margin:0;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif}.app{flex-direction:column;height:100vh;display:flex}main{flex:1;grid-template-columns:22rem 1fr;gap:2rem;min-height:0;padding:2rem;display:grid}@media (width<=800px){main{grid-template-columns:1fr;overflow-y:auto}}header{background:var(--yellow);border-bottom:5px solid var(--ink);flex-shrink:0;align-items:center;padding:.75rem 2rem;display:flex}.logo{color:var(--ink);align-items:center;gap:1rem;text-decoration:none;display:flex}.logo-mark{filter:drop-shadow(3px 3px #2b2b2b59);width:3.25rem;height:3.25rem;transform:rotate(-6deg)}.logo-mark rect:first-child{fill:var(--ink)}.logo-mark .bar{fill:var(--yellow)}.logo-text{letter-spacing:-.03em;-webkit-text-stroke:1.5px var(--ink);text-shadow:3px 3px #2b2b2b40;font-size:2.5rem;font-weight:900;line-height:1}h2{text-transform:uppercase;letter-spacing:.04em;background:var(--pink);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:.6rem;margin:0 0 1rem;padding:.25rem .9rem;font-size:1.75rem;font-weight:900;display:inline-block;transform:rotate(-2deg)}.dubs{padding:.25rem .5rem .5rem .25rem;overflow-y:auto}.dubs ul{flex-direction:column;gap:.9rem;margin:0;padding:0;list-style:none;display:flex}.dubs li{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fff;border-radius:1rem;align-items:center;gap:.75rem;padding:.6rem .9rem;transition:transform .1s;display:flex}.dubs li:hover{transform:translate(-2px,-2px)rotate(-.5deg)}.rank{text-align:center;opacity:.5;width:1.1rem;font-size:1.1rem;font-weight:900}.avatar{object-fit:cover;border:3px solid var(--ink);border-radius:50%;flex-shrink:0;width:3rem;height:3rem}.avatar.placeholder{color:var(--ink);text-transform:uppercase;place-items:center;font-size:1.25rem;font-weight:900;display:grid}.name{flex:1;font-size:1.15rem;font-weight:800}.score{font-variant-numeric:tabular-nums;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:.1rem .7rem;font-size:1.1rem;font-weight:900}.stage{flex-direction:column;gap:1.5rem;min-width:0;min-height:0;display:flex}video{aspect-ratio:16/9;background:var(--ink);border:5px solid var(--ink);width:100%;min-height:0;max-height:100%;box-shadow:8px 8px 0 var(--cyan);border-radius:1.25rem}.controls{align-items:stretch;gap:1rem;display:flex}.buttons{gap:.75rem;display:flex}button{font:inherit;text-transform:uppercase;letter-spacing:.03em;width:10rem;min-height:4rem;color:var(--ink);border:4px solid var(--ink);box-shadow:4px 4px 0 var(--ink);cursor:pointer;border-radius:1rem;flex:none;padding:0 1rem;font-size:1.1rem;font-weight:900;transition:transform 80ms,box-shadow 80ms}button:hover{box-shadow:5px 5px 0 var(--ink);transform:translate(-1px,-1px)}button:active{box-shadow:0 0 0 var(--ink);transform:translate(4px,4px)}button.play{background:var(--cyan)}button.record{background:var(--pink)}button.record.active{background:var(--red);color:#fff;animation:1s infinite pulse}button:disabled{opacity:.5;cursor:not-allowed;box-shadow:4px 4px 0 var(--ink);transform:none}@keyframes pulse{50%{box-shadow:4px 4px 0 var(--ink), 0 0 0 8px #e0201b4d}}canvas{touch-action:none;border:4px solid var(--ink);min-width:0;height:5.5rem;box-shadow:4px 4px 0 var(--ink);background:#fff;border-radius:1rem;flex:1}canvas.scrubbable{cursor:ew-resize}.error{color:var(--red);margin:0;font-weight:800}main.message{max-width:40rem;margin:0 auto;font-size:1.15rem;line-height:1.6;display:block}main.message li{margin-bottom:.5rem}