:root{color:#222;--accent:#e0572b;background:#f4f1ea;font-family:system-ui,sans-serif}body{margin:0}.header{background:#fff;border-bottom:1px solid #ddd;justify-content:space-between;align-items:center;padding:.5rem 1rem;display:flex}.header__title{color:inherit;font-size:1.25rem;font-weight:700;text-decoration:none}.main{max-width:48rem;margin:0 auto;padding:1rem}.card{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:1rem;padding:1rem}.card h2{margin-top:0}.me{align-items:center;gap:1rem;display:flex}.actions{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}label{margin:.5rem 0;display:block}label input:not([type=file]){margin-top:.25rem;display:block}input,select,button{font:inherit;padding:.4rem .6rem}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:4px}button.secondary{color:#222;background:#eee}button:disabled{opacity:.5;cursor:not-allowed}.error{color:#b00020}.hint{color:#666}.themes{border:1px solid #ddd;border-radius:4px;margin:.75rem 0 0}.themes__list{margin:.5rem 0;padding:0;list-style:none}.themes__item{align-items:center;gap:.4rem;margin:.25rem 0;display:flex}.themes__item input{margin:0;display:inline}.banner{background:#fff3cd;border-radius:4px;padding:.5rem}.room-code,.room-code-input{letter-spacing:.2em;font-family:monospace;font-size:1.5rem}.room-code-input{text-transform:uppercase;width:6ch}.avatar{flex-shrink:0;width:100px;height:120px;position:relative}.avatar--small{width:40px;height:48px}.avatar--dimmed{opacity:.35}.avatar__body{fill:#c9bfae;width:100%;height:100%}.avatar__face{aspect-ratio:1;box-sizing:border-box;background:#fff;width:52%;padding:3%;position:absolute;top:12%;left:24%;transform:rotate(-4deg);box-shadow:0 1px 3px #0000004d}.avatar__face img{object-fit:cover;width:100%;height:100%;display:block}.avatar__initial{background:#eee;place-items:center;width:100%;height:100%;font-size:1.5em;font-weight:700;display:grid}.avatar--small .avatar__initial{font-size:.7em}.avatar__tape{background:#ffffc8bf;width:50%;height:18%;position:absolute;top:-8%;left:25%;transform:rotate(6deg)}.player-grid{flex-wrap:wrap;gap:1rem;padding:0;list-style:none;display:flex}.player-grid__item{text-align:center;flex-direction:column;align-items:center;width:110px;display:flex}.player-grid__status{color:#666;min-height:1.2em;font-size:.85rem}.ranking li{margin:.5rem 0}.ranking__row{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.ranking__result .comparison{margin-top:.5rem}.rating-stage{min-height:1.5em;font-weight:700}.rating-scale{flex-wrap:wrap;gap:.25rem;display:flex}.rating-scale button{min-width:2.5rem}.sound{text-align:center;margin:1rem 0}.sound img{max-width:200px;max-height:200px}.sound audio{margin:.5rem auto 0;display:block}.recorder{margin:1rem 0}.recording-indicator{color:#b00020;align-items:center;gap:.5rem;font-weight:700;display:flex}.recording-dot{background:#e00;border-radius:50%;width:.9rem;height:.9rem;animation:1s ease-in-out infinite recording-pulse}@keyframes recording-pulse{50%{opacity:.3}}:root{--waveform-reference:#2b6cb0;--waveform-imitation:var(--accent)}.waveform{background:#faf8f4;border-radius:4px;width:100%;height:80px;margin:.5rem 0;display:block}.waveform__track path{fill-opacity:.55}.waveform__track--reference{fill:var(--waveform-reference);stroke:var(--waveform-reference)}.waveform__track--imitation{fill:var(--waveform-imitation);stroke:var(--waveform-imitation)}.waveform__cursor{stroke-width:2px}.waveform-legend{gap:1rem;margin:0 0 .5rem;padding:0;font-size:.9rem;list-style:none;display:flex}.waveform-legend__item:before{content:"";opacity:.55;vertical-align:-.05em;border-radius:2px;width:.8em;height:.8em;margin-right:.35em;display:inline-block}.waveform-legend__item--reference:before{background:var(--waveform-reference)}.waveform-legend__item--imitation:before{background:var(--waveform-imitation)}.comparison,.timings{margin:1rem 0}.timings summary{cursor:pointer;font-weight:700}.timings__list{margin:.5rem 0}.timings__field{justify-content:space-between;align-items:center;gap:1rem;margin:.4rem 0;display:flex}.timings__field dd{margin:0}.timings__field input{width:5em}.timings__field input[aria-invalid=true]{outline:2px solid #b00020}.room-toolbar{justify-content:flex-end;margin-bottom:.5rem;display:flex}.phase-transition{animation:.3s ease-out phase-enter}@keyframes phase-enter{0%{opacity:0;transform:translateY(8px)}}.timer-bar{background:#eee;border-radius:4px;height:1.5rem;margin:.5rem 0;position:relative;overflow:hidden}.timer-bar__fill{background:#4a90d9;height:100%}.timer-bar__label{font-variant-numeric:tabular-nums;place-items:center;font-size:.85rem;font-weight:700;display:grid;position:absolute;inset:0}.countdown-overlay{z-index:10;background:#ffffffeb;flex-direction:column;justify-content:center;align-items:center;animation:.2s ease-out phase-enter;display:flex;position:fixed;inset:0}.countdown-overlay__title{margin:0;font-size:2rem;font-weight:700}.countdown-overlay__number{font-variant-numeric:tabular-nums;margin:0;font-size:8rem;font-weight:700;line-height:1;animation:1s ease-out countdown-pop}@keyframes countdown-pop{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}}.resume-overlay{z-index:20;text-align:center;background:#fffffff5;flex-direction:column;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}@media (prefers-reduced-motion:reduce){.phase-transition,.countdown-overlay,.countdown-overlay__number,.recording-dot{animation:none}}