#record-panel{margin:0 22px 20px;padding:22px;background:#fff8ee;border:1px solid #f2ddc3;border-radius:16px}#record-panel[hidden]{display:none}.record-heading{display:flex;justify-content:space-between;align-items:center}.record-heading h3{margin:6px 0}.record-heading button{font-size:24px;background:none;border:0}.record-hint,.record-privacy{color:#73706a;font-size:13px;line-height:1.7}.record-song{font-weight:650}.record-controls,.record-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.record-controls>span{font-size:13px;color:#80756a}.record-controls audio{flex:1;min-width:220px;max-width:550px}.record-controls strong{font-variant-numeric:tabular-nums;font-size:24px}.record-dot{width:10px;height:10px;border-radius:50%;background:#dc4b41;animation:record-pulse 1s infinite}.record-name{display:grid;gap:7px;margin-top:16px;font-size:13px}.record-name input{border:1px solid #e5ded5;background:white;border-radius:8px;padding:10px;max-width:550px;width:100%;box-sizing:border-box;font:inherit}.record-actions{margin-top:14px}.record-actions .button{font-size:12px}#record-message{margin-bottom:0;font-size:13px;color:#9b591e}.record-heading .eyebrow{font-size:10px}.social-person{display:inline-flex;gap:8px;align-items:center;border:0;background:none;color:inherit;padding:0;cursor:pointer;font:inherit;text-align:left}.social-person:hover{color:#e67c20}.social-card-body>audio{width:100%;height:38px;margin:10px 0}.person-hero{display:flex;align-items:center;gap:28px;margin:25px 0 35px;padding:36px;background:linear-gradient(120deg,#fff1de,#fff);border:1px solid #f2e5d5;border-radius:22px}.person-hero>div:nth-child(2){flex:1;min-width:0}.person-hero h1{font-size:32px;margin:10px 0;overflow-wrap:anywhere}.person-hero p{color:#79736d;white-space:pre-line}.person-avatar{width:100px;height:100px;border-radius:50%;background:#ffdfb6;color:#a75c21;display:grid;place-items:center;font-size:36px;flex:none;overflow:hidden}.person-avatar img{width:100%;height:100%;object-fit:cover}.person-counts{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:#807970}.person-counts b{color:#262b30}.person-tabs{margin:24px 0}.person-score{width:100%;border:0;background:white;text-align:left;padding:18px;cursor:pointer}.person-score>img{width:100%;height:180px;object-fit:cover;object-position:top}.person-score>span{display:grid;place-items:center;background:#fff4e5;font-size:60px;color:#e99238;height:180px;border-radius:12px}.person-score h3{font-size:17px}.person-score small{color:#e89432}.person-score p{color:#807970;font-size:13px}@keyframes record-pulse{50%{opacity:.3}}@media(max-width:600px){#record-panel{margin:0 10px 12px;padding:16px}.person-hero{padding:20px;gap:16px;flex-wrap:wrap}.person-avatar{width:66px;height:66px;font-size:24px}.person-hero h1{font-size:24px}.person-counts{gap:14px}.person-hero>.button{margin-left:82px}.record-actions .button{flex:1;min-width:135px}.record-controls audio{min-width:0;width:100%}}@media(prefers-reduced-motion:reduce){.record-dot{animation:none}}
/* Practice header: reactions belong to the score; transport stays on the right. */
.song-heading{grid-template-columns:46px minmax(140px,1fr) minmax(270px,1.15fr);gap:16px}.song-heading .song-info{grid-column:auto}.song-heading .song-cover{width:46px;height:54px}.song-heading .player{grid-column:3;grid-row:1;grid-template-columns:minmax(110px,1fr) auto auto;gap:9px 12px;align-self:center}.song-heading .player .transport{justify-content:flex-end}.player .player-speed{grid-column:2;grid-row:1}.player-record-toggle{grid-column:3;grid-row:1;display:flex;align-items:center;gap:7px;font-size:11px;color:#777d85;cursor:pointer;white-space:nowrap}.player-record-toggle .switch{flex:none}.player-record-toggle .switch input{width:100%;height:100%;margin:0;inset:0;cursor:pointer}.player-record-toggle.is-recording{color:#cf513c}.player-record-toggle.is-recording .switch input:checked+span{background:#cf513c}.score-reactions{display:flex;align-items:center;gap:16px;margin-top:13px}.score-reaction{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:2px 0;color:#8c9199;min-height:28px}.score-reaction .reaction-icon{font-size:22px;line-height:1}.score-reaction .reaction-count{font-size:12px;font-variant-numeric:tabular-nums}.score-reaction.is-active{color:#ee8425}.score-reaction:hover{color:#d97825}.song-heading .player #player-status{text-align:right}
@container(max-width:620px){.song-heading{grid-template-columns:minmax(140px,1fr) minmax(250px,1.2fr);gap:14px}.song-heading .song-cover{display:none}.song-heading .player{grid-column:2;grid-row:1}.song-heading .song-info{grid-column:1;grid-row:1}}
@container(max-width:480px){.song-heading{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px 16px}.song-heading .song-info{grid-column:1;grid-row:1}.song-heading .player{grid-column:1;grid-row:2;grid-template-columns:minmax(110px,1fr) auto auto;border-top:1px solid var(--line);padding-top:16px}.song-heading .player .transport{justify-content:flex-start}.score-reactions{gap:22px;margin-top:10px}.song-heading .player #player-status{text-align:center}}

.player #record-review{grid-column:1/-1;grid-row:4;justify-self:end;color:#ca742c;font-size:11px;padding:2px 0;border:0;background:none}

/* Three explicit playback modes, followed by one shared transport. */
.song-heading .player{grid-template-columns:minmax(0,1fr) auto;gap:9px 12px}
.player-modes{grid-column:1/-1;grid-row:1;display:flex;align-items:stretch;min-width:0;margin:0;padding:4px;border:1px solid #ece6dd;border-radius:12px;background:#f7f4ef;gap:3px}
.player-modes label{flex:1;min-width:0;position:relative;cursor:pointer}
.player-modes input{position:absolute;opacity:0;width:1px;height:1px}
.player-modes label>span{display:flex;justify-content:center;align-items:center;gap:6px;min-height:34px;padding:6px 8px;border-radius:8px;color:#8b8985;transition:background .18s,color .18s,box-shadow .18s}
.player-modes b{font-size:12px;font-weight:500;white-space:nowrap}
.player-modes svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
.player-modes input:checked+span{background:#fff;color:#d96f18;box-shadow:0 2px 6px #45301b0d}
.player-modes input:focus-visible+span{outline:2px solid #ea8a3a;outline-offset:2px}
.player-modes input:disabled+span{opacity:.5;cursor:wait}
.player-modes.is-recording input:checked+span{color:#cd4e3d;background:#fff2ee}
.song-heading .player .transport{grid-row:3;grid-column:1;justify-content:center;padding-left:36px}
.song-heading .player .player-speed{grid-row:3;grid-column:2}
.player #mode-hint{grid-column:1/-1;grid-row:2;font-size:10px;text-align:center;line-height:1.5;color:#99938a;min-height:15px}
.song-heading .player .timeline{grid-row:4}
.song-heading .player #player-status{grid-row:5;text-align:center}
.song-heading .player #record-review{grid-row:6;justify-self:center}
.record-controls video,#record-live{width:100%;max-width:550px;max-height:310px;aspect-ratio:16/9;object-fit:contain;background:#202326;border-radius:12px}
#record-live{display:block;margin-top:16px;transform:scaleX(-1)}
@container(max-width:480px){.song-heading .player{grid-template-columns:minmax(0,1fr) auto}.player-modes label>span{min-height:38px}}
/* Camera framing stays beside the score; completed takes open in a dialog. */
.practice-sidebar{min-width:0;display:flex;flex-direction:column;gap:18px}
.camera-panel{width:100%;padding:16px;background:#fff;border:1px solid var(--line);border-radius:13px}
.camera-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.camera-heading h3{font-size:13px;margin:0;font-weight:600}
#camera-badge{font-size:8px;letter-spacing:.5px;color:#8b9299;white-space:nowrap}
.camera-frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:#23282c;border-radius:9px}
#camera-live{width:100%;height:100%;object-fit:contain;transform:scaleX(-1);display:block}
#camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;text-align:center;color:#bcc1c5;font-size:11px;line-height:1.6}
#camera-placeholder svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
#camera-clock{position:absolute;top:10px;left:10px;padding:5px 8px;border-radius:5px;background:#171b20b3;color:white;font-size:11px;font-variant-numeric:tabular-nums}
#camera-clock:before{content:'';display:inline-block;width:6px;height:6px;background:#f46c57;border-radius:50%;margin-right:6px}
#camera-status{font-size:11px;line-height:1.7;color:#94918d;margin:12px 0}
.camera-actions{display:flex;justify-content:center;gap:8px}
.camera-actions button{font-size:11px;padding:7px 11px}
.camera-panel.is-recording #camera-badge{color:#d95643}
.camera-panel.is-recording{border-color:#edc6bb}
dialog#record-panel{margin:auto;width:680px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 36px);overflow:auto;padding:26px;background:#fffdfa;border:1px solid #ece2d7;border-radius:18px;box-shadow:0 30px 100px #1d181e38}
#record-panel::backdrop{background:#20232799;backdrop-filter:blur(5px)}
#record-panel .record-controls video{max-width:none;max-height:42dvh;object-fit:contain}
#record-panel .record-controls audio{max-width:none;width:100%}
#record-panel .record-song{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
#record-panel .record-song span{color:#9e9690;font-size:11px;font-variant-numeric:tabular-nums}
#record-panel .record-name input{max-width:none}
@media(max-width:850px){.practice-grid:has(.camera-panel:not([hidden])) .practice-sidebar{display:contents}.camera-panel{grid-row:1;max-width:none}.camera-frame{max-height:230px;aspect-ratio:auto;height:230px}#camera-live{object-fit:contain}.practice-grid:has(.camera-panel:not([hidden])) .settings{grid-row:3}}
@media(max-width:600px){dialog#record-panel{padding:18px}.record-privacy{font-size:12px}.camera-frame{height:185px}}