html,body{height:100%}body{box-sizing:border-box;color:#1a1a1a;background:#fafafa;justify-content:center;align-items:center;margin:0;padding:1.5rem;font-family:system-ui,sans-serif;line-height:1.6;display:flex;overflow:hidden}main{text-align:center;max-width:34rem;max-height:100%;overflow:hidden}h1{margin:0}a{color:#0b5fff}.invite{color:#555;margin-top:.5rem}.keyboard{flex-wrap:wrap;justify-content:center;gap:.75rem;margin:clamp(1rem,4vh,3rem) 0;display:flex}.key{-webkit-user-select:none;user-select:none;background:#fff;border:2px solid #1a1a1a;border-radius:.5rem;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;font-size:1.1rem;font-weight:600;transition:transform 60ms,background 60ms;display:flex}.key.active{color:#fff;background:#1a1a1a;transform:scale(.92)}.transport{justify-content:center;gap:1.25rem;margin:clamp(.75rem,3vh,2rem) 0;display:flex}button{font:inherit;cursor:pointer;background:#fff;border:2px solid #1a1a1a;border-radius:999px;padding:.75rem 1.5rem;font-weight:600}button:disabled{cursor:default;opacity:.6}#record-btn[data-phase=recording],#record-btn[data-phase=overdubbing]{color:#fff;background:#d81b3f;border-color:#d81b3f}#record-btn[data-phase=armed]{color:#1a1a1a;background:#f2a900;border-color:#f2a900}#record-btn[data-phase=maxed]{color:#777;background:#ddd;border-color:#ddd}.status{min-height:3.5rem;margin-bottom:1rem}.countdown{font-variant-numeric:tabular-nums;font-size:2rem;font-weight:700}.layers{justify-content:center;gap:.5rem;margin-top:.5rem;display:flex}.dot{background:0 0;border:2px solid #1a1a1a;border-radius:50%;width:.75rem;height:.75rem}.dot.filled{background:#1a1a1a}.layers.maxed .dot.filled{background:#d81b3f;border-color:#d81b3f}.hint{color:#999;font-size:.85rem}