/* Shared Ziarcadia chrome keeps the reading sheet and classroom results dominant. */
html:has(.music-page) { --viewport-background:#04151e; --viewport-scrollbar-rgb:150,158,174; }
.music-page { --music-ink:#edf0f3; --music-muted:#a6bdc6; --music-line:#37535f; --music-panel:#0b202c; --music-paper:#f4efdf; --music-paper-ink:#29333c; margin:0; color:var(--music-ink); background:var(--viewport-background); min-height:100dvh; font-family:inherit; }
#music-app { position:relative; z-index:1; }
.music-page * { box-sizing:border-box; }
.music-page [hidden] { display:none!important; }
.music-page button,.music-page input,.music-page textarea { font:inherit; }
.music-page button { cursor:pointer; word-break:keep-all; touch-action:manipulation; }
.music-page button:disabled { cursor:default; opacity:.36; box-shadow:none; }
.music-page button:focus-visible,.music-page a:focus-visible,.music-page summary:focus-visible { outline:3px solid #c3a9ed; outline-offset:4px; }
.music-page input:focus,.music-page textarea:focus { outline:2px solid #a4b9c8; outline-offset:2px; }
.music-page a { color:#c1c9db; text-decoration:none; }
.music-page h1,.music-page h2,.music-page p { margin:0; }
.music-page h1,.music-page h2 { letter-spacing:-.025em; }
.music-page h1 { font-size:2rem; line-height:1.2; font-weight:650; }
.music-page h2 { font-size:1.08rem; line-height:1.4; font-weight:650; }
.music-page input,.music-page textarea { width:100%; min-width:0; padding:11px 13px; border:1px solid #485365; border-radius:8px; background:#111925; color:#edf0f3; }
.music-page textarea { resize:vertical; line-height:1.6; min-height:92px; font-size:.88rem; }
.music-page input::placeholder,.music-page textarea::placeholder { color:#929dae; }
.music-page .ziarcadia-icon { width:19px; height:19px; display:inline-block; vertical-align:middle; flex-shrink:0; }
.music-header { max-width:1840px; margin:auto; padding:17px 28px 12px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.music-brand { color:#e9efee!important; font-size:1.22rem; font-weight:750; letter-spacing:-.04em; display:flex; align-items:center; gap:18px; }
.music-brand>span { display:flex; align-items:center; gap:7px; font-size:.8rem; letter-spacing:0; font-weight:450; color:#a9b7c1; border-left:1px solid #45505e; padding-left:18px; }
.music-brand>span svg { width:15px!important; height:15px!important; color:#bda6d9; }
.music-language { border:0; border-radius:7px; color:#b7c2cf; background:transparent; padding:9px 11px; font-size:.8rem!important; }
.music-language:hover { background:#263140; color:#fff; }
.music-main { max-width:1840px; padding:4px 28px 36px; margin:auto; }
.music-surface { min-width:0; background:var(--surface-recessed-paint); border:1px solid var(--surface-recessed-edge); border-radius:15px; padding:22px; box-shadow:var(--surface-recessed-shadow); }
.music-button { display:inline-flex; justify-content:center; align-items:center; gap:7px; min-height:42px; padding:9px 14px; border:1px solid var(--control-cap-edge); border-radius:8px; background:var(--control-cap-paint); color:var(--control-cap-ink); font-size:.85rem!important; font-weight:550; line-height:1.35; text-align:center; box-shadow:var(--control-cap-shadow); }
.music-button:hover:not(:disabled) { background:#314a53; border-color:#7b929c; }
.music-primary { color:var(--action-gold-ink); background:var(--action-gold-background); border-color:var(--action-gold-border); box-shadow:var(--action-gold-shadow); }
.music-primary:hover:not(:disabled) { background:#f0d397; border-color:#ffe4ad; }
.music-icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex:0 0 40px; padding:0; border:1px solid transparent; border-radius:9px; background:transparent; color:#b5c1cd; }
.music-icon-button:hover:not(:disabled) { color:#fff; border-color:#526071; background:#2c3748; }
.music-icon-button .ziarcadia-icon { width:18px; height:18px; }
.music-link-button { min-height:36px; padding:7px 0; background:transparent; color:#bbc5d8; border:0; box-shadow:none; text-align:left; font-size:.8rem!important; cursor:pointer; }
.music-link-button:hover:not(:disabled) { color:#f3f5f7; background:transparent; }
.music-note { color:var(--music-muted); font-size:.8rem; line-height:1.6; }
.music-badge { display:inline-flex; align-items:center; justify-content:center; padding:3px 8px; font-size:.7rem; color:#bec7d6; background:#ffffff08; border:1px solid #ffffff0d; border-radius:6px; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:450; }
.music-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.music-section-heading h2 { display:flex; align-items:center; gap:8px; }
.music-disc { --disc-label:#d8b875; position:relative; display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; aspect-ratio:1; border-radius:50%; flex:0 0 46px; background:repeating-radial-gradient(circle,#161d27 0 2px,#333b47 2.5px 3px,#1b222e 3.5px 5px); border:1px solid #505965; box-shadow:0 2px 5px #0004; }
.music-disc[data-palette="1"] { --disc-label:#baa7d9; }
.music-disc[data-palette="2"] { --disc-label:#9dbfbb; }
.music-disc[data-palette="3"] { --disc-label:#d9a38e; }
.music-disc>span { display:flex; align-items:center; justify-content:center; width:23px; height:23px; border-radius:50%; background:var(--disc-label); color:#202936; font:600 10px/1 system-ui; }
.music-disc>span .ziarcadia-icon { width:14px; height:14px; }
/* Preparation */
/* A modeless side panel keeps the player and classroom controls usable. */
.music-video-search-toggle { flex-shrink:0; }
.music-host-side>.music-video-search-toggle { align-self:start; }
.music-video-search { position:fixed; z-index:110; right:max(16px,env(safe-area-inset-right)); top:var(--music-search-panel-top); width:min(var(--music-search-panel-width),calc(100vw - 32px)); max-height:calc(100dvh - var(--music-search-panel-top) - 18px - env(safe-area-inset-bottom)); padding:18px; overflow-y:auto; overscroll-behavior:contain; box-shadow:0 15px 65px #000a,inset 0 1px 0 #c9dcea20; }
.music-video-search>.music-section-heading { margin-bottom:8px; }
.music-video-search>.music-section-heading h2 { font-size:1rem; }
#music-video-search-form { display:flex; gap:8px; }
#music-video-search-form input { flex:1; width:0; }
.music-video-search [data-search-status] { margin:12px 0; }
.music-video-search [data-search-status]:empty { display:none; }
.music-video-search [data-error="true"] { color:#edb6a9; }
.music-video-results { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:16px; }
.music-video-results>li { display:grid; grid-template-columns:112px minmax(0,1fr); gap:12px; padding-bottom:16px; border-bottom:1px solid var(--music-line); }
.music-video-results>li>a { align-self:start; }
.music-video-results img { display:block; width:112px; aspect-ratio:16/9; object-fit:cover; border-radius:6px; background:#111925; }
.music-video-result-title { display:block; font-size:.85rem; line-height:1.45; overflow-wrap:anywhere; color:var(--music-ink)!important; }
.music-video-result-title:hover { text-decoration:underline; }
.music-video-results small { display:block; color:var(--music-muted); font-size:.72rem; line-height:1.4; margin:5px 0 9px; overflow-wrap:anywhere; }
.music-video-results .music-button { min-height:36px; padding:6px 9px; font-size:.75rem!important; }
.music-video-results .music-button .ziarcadia-icon { width:15px; height:15px; }
.music-video-more { width:100%; margin-top:14px; }
@media(max-width:700px) { .music-video-search { top:auto; bottom:max(8px,env(safe-area-inset-bottom)); right:8px; width:calc(100vw - 16px); max-height:85dvh; padding:15px; } .music-video-results>li { grid-template-columns:96px minmax(0,1fr); gap:10px; } .music-video-results img { width:96px; } .music-playlist-editor>.music-section-heading { flex-wrap:wrap; gap:8px; } }
.music-setup { max-width:1400px; margin:6px auto 0; }
.music-intro { display:flex; align-items:center; gap:14px; margin:0 0 18px; }
.music-intro h1 { font-size:2.15rem; }
.music-intro p { color:#b1bac7; font-size:.95rem; margin-top:7px; }
.music-intro-record .music-disc { width:64px; height:64px; }
.music-intro-record .music-disc>span { width:30px; height:30px; }
.music-setup-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,var(--music-setup-roster-width,270px)) minmax(300px,354px); align-items:start; gap:18px; }
.music-setup-work { display:grid; gap:16px; min-width:0; }
.music-setup-work .music-session-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:16px; }
.music-setup-work .music-class-fields { margin:0; }
.music-setup-work .music-sign-in { grid-column:1/-1; }
.music-lobby-join { display:grid; width:100%; padding:14px; }
.music-lobby-join .room-qr-frame { width:100%; max-width:none; }
.music-lobby-join .room-qr-placeholder { padding:24px; font-size:1rem; line-height:1.5; letter-spacing:0; text-indent:0; }
.music-lobby-code { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; }
.music-lobby-code strong { font:700 2.1rem/1.1 ui-monospace,Consolas,monospace; letter-spacing:.08em; }
.music-lobby-join #music-connected { display:flex; width:fit-content; margin:10px auto 0; }
.music-playlist-editor { padding:24px; }
.music-playlist-editor>.music-section-heading { margin-bottom:20px; }
.music-playlist-editor>.music-section-heading h2 { font-size:1.2rem; }
.music-setup-side { display:grid; gap:15px; min-width:0; }
.music-session-card { padding:22px; }
.music-session-card h2 { font-size:.95rem; margin-bottom:20px; color:#d0d5e0; }
.music-class-fields { display:grid; grid-template-columns:minmax(0,1fr) 95px; gap:12px; margin-bottom:22px; }
.music-class-fields label,.music-join-form label { display:grid; gap:8px; color:#aeb8c7; font-size:.76rem; font-weight:500; }
.music-class-fields input { font-size:1.1rem; min-height:46px; }
.music-session-card>[data-action="start"] { width:100%; min-height:47px; font-size:.95rem!important; }
.music-import-panel { margin-bottom:14px; border:1px dashed #485361; border-radius:9px; background:#10182066; }
.music-import-panel>summary { list-style:none; cursor:pointer; padding:12px 14px; font-size:.82rem; color:#bdc8d2; display:flex; align-items:center; gap:8px; }
.music-import-panel>summary::-webkit-details-marker { display:none; }
.music-import-panel>summary::after { content:"+"; margin-left:auto; color:#c0b5d5; }
.music-import-panel[open]>summary::after { content:"−"; }
.music-import-panel>summary svg { width:15px!important; height:15px!important; }
.music-import-body { padding:0 14px 14px; }
.music-import-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:10px; }
.music-import-actions .music-button { min-height:36px; font-size:.77rem!important; }
.music-import-actions+.music-note { margin-top:10px; font-size:.74rem; }
.music-track-list { list-style:none; margin:0; padding:0; }
.music-track-list li { display:flex; align-items:center; gap:14px; min-width:0; padding:14px 0; border-bottom:1px solid #ffffff0b; }
.music-track-list li:last-child { border-bottom:0; }
.music-track-title { flex:1; min-width:0; color:#e9edf1; font-size:.92rem; font-weight:550; line-height:1.4; overflow-wrap:anywhere; }
.music-track-title small { display:block; margin-top:4px; font-size:.77rem; color:#a3afbe; font-weight:400; }
.music-track-actions { display:flex; align-items:center; gap:2px; flex-shrink:0; }
.music-track-actions button { width:32px; height:34px; border:0; border-radius:6px; color:#9daebc; background:transparent; }
.music-track-actions button:hover:not(:disabled) { background:#3b4553; color:white; }
.music-track-actions svg { width:15px!important; height:15px!important; }
.music-playlist-footer { display:flex; justify-content:flex-end; gap:12px; margin-top:17px; padding-top:16px; border-top:1px solid #ffffff10; }
.music-save-button { background:transparent; color:#bdd3d1; border-color:#465e60; box-shadow:none; font-size:.8rem!important; }
.music-sign-in { display:grid; justify-items:start; gap:14px; padding-top:17px; color:#b7c7d2; font-size:.8rem; }
.music-history-actions { display:flex; align-items:center; gap:8px; padding:0 8px; color:#a1acbf; }
.music-history-actions>svg { width:17px!important; }
#music-history h2 { color:#a4aebe; font-size:.75rem; font-weight:500; margin:4px 8px 12px; }
.music-history-list { display:grid; gap:6px; }
.music-history-item { display:flex; flex-wrap:wrap; align-items:center; gap:7px 12px; text-align:left; padding:12px; border:1px solid #ffffff09; border-radius:8px; background:#1b2230; color:#c4ccda; }
.music-history-item strong { color:#e0e8e8; }
.music-history-item span { flex:1; color:#a1adbd; font-size:.71rem; }
.music-history-item small { color:#a9bfd0; font-size:.72rem; }
/* One host bar, using the same joining utility and QR frame as the game modes. */
.music-host-header { gap:16px; padding-top:12px; padding-bottom:12px; }
.music-class-identity { display:flex; align-items:center; gap:10px; min-width:0; flex:1; margin-left:8px; }
.music-class-identity h1 { font-size:.92rem; font-weight:550; overflow-wrap:anywhere; }
.music-class-identity h1>span { color:#8d9baa; font-size:.72rem; font-weight:400; border-left:1px solid #475161; padding-left:9px; margin-left:8px; }
#music-room-state { font-size:.75rem; color:#a6c9b9; }
#music-room-state:empty { display:none; }
.music-host-side { display:grid; gap:14px; min-width:0; }
.music-join-utility { min-width:0; position:relative; padding:12px 14px; }
.music-host-utilities.pictionary-host-utility-strip { grid-template-columns:minmax(0,1fr) 90px; gap:10px; }
.music-host-utilities .music-join-card { gap:8px; }
.music-join-card .active-room-code-display { font:600 .9rem/1.1 ui-monospace,Consolas,monospace; color:#e3eceb; letter-spacing:.015em; }
.music-join-card .room-qr-frame.active-room-qr-frame { width:var(--ziar-qr-active-room-host-short-frame-width); }
.music-host-utilities .music-heading-actions .secondary-button { min-height:34px; padding:6px 8px; line-height:1.15; font-size:.7rem; }
.music-quick-qr { display:none; }
#music-qr-button { line-height:0; }
#music-qr { display:block; }
.music-join-actions { display:flex; align-items:center; gap:8px; }
.music-join-actions>.music-icon-button { width:27px; height:26px; flex-basis:27px; }
.music-join-actions>.music-icon-button svg { width:14px; height:14px; }
#music-connected { font-size:.68rem; color:#b5c8ce; }
.music-room-layout { display:grid; grid-template-columns:minmax(0,1fr) min(42vw,var(--music-roster-width,300px)); gap:18px; align-items:start; }
.music-room-layout>.music-rail { grid-column:1; grid-row:1; }
.music-room-layout>.music-watch { grid-column:1; grid-row:2; }
.music-room-layout>.music-host-side { grid-column:2; grid-row:1/3; }
.music-participants { position:relative; padding:16px 14px 12px; min-width:0; gap:0; }
.music-participants .roster-head { display:contents; }
#music-roster-count { position:absolute; top:-1px; right:-1px; z-index:2; }
#music-rating-progress { position:absolute; top:-10px; left:14px; font-size:.63rem; color:#b3d3c1; white-space:nowrap; background:#1d3034; }
.music-participants .roster-body { min-width:0; overflow:auto; scrollbar-gutter:stable; padding:7px 2px 2px 0; }
#music-roster { text-align:left; gap:var(--player-roster-gap); }
.music-participants .roster-row { min-width:0; min-height:var(--player-roster-row-min); padding:var(--player-roster-row-padding-y) var(--player-roster-row-padding-x); gap:var(--player-roster-gap); border-radius:10px; }
.music-person { min-width:0; }
.music-person strong { font-size:var(--player-roster-name-font-size); overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.music-presence { display:flex; align-items:center; gap:5px; flex-wrap:wrap; color:#a2b2c2; font-size:.62rem; }
.music-presence i { width:6px; height:6px; border-radius:50%; background:#788592; flex:0 0 6px; }
[data-presence="here"] .music-presence i { background:#9bcbb0; }
[data-presence="away"] .music-presence { color:#f0c58b; }
[data-presence="away"] .music-presence i { background:#e7b974; }
[data-presence="offline"] .music-presence { color:#c5adb4; }
.music-person-rating { color:#a4aebd; font-size:.65rem; white-space:nowrap; flex-shrink:0; }
.music-person-rating>.pictionary-card-metric { display:flex; align-items:center; justify-content:center; gap:4px; font-size:.65rem; padding:0 3px; }
[data-rated="true"] .music-person-rating { color:#b8dec8; }
#music-participants #music-roster .roster-row[data-rated="true"] { background:#483064; border-color:#ba8de2; box-shadow:inset 0 1px 0 #ead5ff3d,inset 0 -2px 0 #241331,0 1px 4px #0005; }
#music-participants #music-roster .roster-row[data-rated="true"] .music-person-rating { color:#f0dfff; }
#music-participants #music-roster .roster-row[data-rated="true"].is-away { box-shadow:inset 4px 0 0 #f0bf7b,inset 0 1px 0 #ead5ff3d,inset 0 -2px 0 #241331; }
#music-participants #music-roster.player-roster-space-tight { --player-roster-row-min:28px; --player-roster-row-padding-y:2px; --player-roster-row-padding-x:6px; --player-roster-name-font-size:.76rem; --player-roster-gap:3px; }
#music-roster.player-roster-space-tight .roster-row { padding-left:16px; padding-right:19px; }
#music-roster.player-roster-space-tight .roster-name { font-size:var(--player-roster-name-font-size); line-height:1.2; }
#music-roster.player-roster-space-tight .music-presence { position:absolute; left:5px; top:50%; transform:translateY(-50%); }
#music-roster.player-roster-space-tight .music-person-rating { position:absolute; right:3px; top:50%; transform:translateY(-50%); }
#music-roster.player-roster-space-tight .music-person-rating-label,#music-roster.player-roster-space-tight .music-presence-label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.music-roster-empty { color:#a4b1c1; }
@media(max-width:1200px) {
 .music-host-header { gap:16px; }
 .music-quick-qr { display:inline-flex; width:32px; height:32px; flex:0 0 32px; font-size:.65rem!important; border:1px solid #ffffff20; }
 .music-host-header .music-brand>span { display:none; }
 .music-room-layout { grid-template-columns:minmax(0,1fr); }
 .music-room-layout>.music-host-side { grid-column:1; grid-row:3; }
}
.music-watch { padding:22px; }
.music-watch-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:0 2px 20px; }
.music-song-heading { min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr) auto; column-gap:12px; }
.music-song-heading>h2 { grid-column:2; grid-row:1; }
.music-song-heading>p { grid-column:2/4; grid-row:2; }
.music-song-heading>.music-song-kicker { grid-column:3; grid-row:1; align-self:center; margin:0; }
.music-song-kicker>span:first-child { display:none; }
.music-song-heading #music-song-position { padding:3px 6px; border:1px solid #ffffff15; border-radius:5px; white-space:nowrap; }
#music-now-record { grid-column:1; grid-row:1/3; align-self:center; }
#music-now-record .music-disc { animation:music-record-turn 4s linear infinite; animation-play-state:paused; }
#music-now-record.is-spinning .music-disc { animation-play-state:running; }
@keyframes music-record-turn { to { transform:rotate(360deg); } }
.music-song-kicker { display:flex; align-items:center; gap:9px; color:#a2acbb; font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px; }
#music-song-position { color:#baacd2; letter-spacing:.02em; font-variant-numeric:tabular-nums; padding-left:10px; border-left:1px solid #51556b; }
.music-watch-heading h2 { font-size:clamp(1.3rem,2vw,2rem); line-height:1.2; font-weight:600; overflow-wrap:anywhere; color:#f3f0e8; }
#music-song-artist { color:#a9b2c0; font-size:.83rem; margin-top:5px; }
.music-watch-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:12px; min-width:0; }
.music-tabs { display:flex; align-self:center; padding:4px; gap:3px; border-radius:9px; background:#0e1520; border:1px solid #3a4352; box-shadow:inset 0 2px 5px #0004,0 1px 0 #ffffff0a; }
.music-tabs button { display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; border:1px solid transparent; border-radius:5px; color:#9ba7b9; background:transparent; font-size:.76rem; white-space:nowrap; }
.music-tabs svg { width:14px!important; height:14px!important; }
.music-tabs button[aria-pressed="true"] { color:#d8eeec; background:#274440; border-color:#496d66; box-shadow:inset 0 -2px 0 #a1c4ad,inset 0 1px 0 #ffffff12; }
.music-media-layout { container-type:inline-size; display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:22px; }
.music-video-pane { container:music-video / inline-size; min-width:0; display:flex; flex-direction:column; }
.music-video-wrap { position:relative; width:100%; aspect-ratio:16/9; min-height:200px; background:#070c12; border:1px solid #4d5b6d; border-radius:11px; overflow:hidden; box-shadow:0 0 0 5px #0e1620,0 4px 14px #0005; }
.music-video-wrap>div,.music-video-wrap>iframe { position:absolute; inset:0; width:100%; height:100%; }
.music-watch[data-tab="video"] .music-video-pane { width:100%; max-width:1180px; margin:auto; }
.music-watch[data-tab="lyrics"] .music-media-layout { grid-template-columns:minmax(0,1fr) minmax(0,var(--music-lyrics-width-ratio,1.2fr)); }
#music-youtube-link { color:#9cabb9; width:30px; height:32px; flex-basis:30px; }
#music-youtube-link:hover { color:#e8e9ee; }
#music-playback-error { color:#ebbdac; padding:4px 0; }
.music-control-panel { padding:14px 12px 11px; margin-top:16px; border:1px solid #0c131e; border-radius:11px; background:#111a26; box-shadow:inset 0 2px 5px #0005,0 1px 0 #93aacb1a; }
.music-timeline { display:flex; align-items:center; gap:12px; }
.music-timeline output { font-size:.68rem; font-variant-numeric:tabular-nums; color:#b3c1d0; min-width:31px; }
.music-timeline output:last-child { text-align:right; }
.music-page input[type="range"] { appearance:none; min-height:22px; width:100%; height:22px; padding:0; border:0; background:transparent; outline-offset:2px; cursor:pointer; accent-color:#9fc7bf; }
.music-page input[type="range"]::-webkit-slider-runnable-track { height:4px; border-radius:4px; background:#48566c; }
.music-page #music-seek::-webkit-slider-runnable-track { background:linear-gradient(to right,#aad1c3 var(--played,0%),#48566c var(--played,0%)); }
.music-page input[type="range"]::-webkit-slider-thumb { appearance:none; height:12px; width:12px; margin-top:-4px; border-radius:50%; border:1px solid #d3e5dc; background:#aecfc4; box-shadow:0 1px 4px #0008; }
.music-page input[type="range"]::-moz-range-track { height:4px; background:#48566c; border-radius:4px; }
.music-page input[type="range"]::-moz-range-thumb { height:12px; width:12px; border-radius:50%; background:#aecfc4; border:1px solid #d3e5dc; }
.music-control-row { display:flex; justify-content:space-between; align-items:center; gap:9px; margin-top:7px; }
.music-transport,.music-player-options { display:flex; align-items:center; gap:5px; }
.music-transport>.music-icon-button { width:35px; height:36px; flex-basis:35px; color:#c1d1dc; }
.music-transport>.music-play-toggle { width:44px; height:42px; flex-basis:44px; margin:0 5px; color:#e5f2f2; border:1px solid #587c83; background:#193b45; box-shadow:inset 0 1px 0 #d2ebec28,0 3px 4px #0005; border-radius:50%; }
.music-play-toggle svg { width:20px!important; height:20px!important; }
.music-skip { position:relative; }
.music-skip svg { position:absolute; width:25px!important; height:25px!important; }
.music-skip span { padding-top:3px; font-size:8px; font-weight:600; }
.music-skip-forward svg { transform:scaleX(-1); }
.music-player-options>.music-icon-button { width:31px; height:34px; flex-basis:31px; }
.music-player-options>.music-icon-button svg { width:16px; height:16px; }
.music-volume { display:flex; align-items:center; gap:7px; width:85px; color:#98acbc; }
.music-volume>svg { width:14px!important; height:14px!important; }
.music-page #music-speed { min-height:31px; max-width:72px; padding:4px 5px; border:1px solid #38485a; border-radius:6px; background:#1a2737; color:#c3d0da; font:500 .72rem inherit; }
.music-rating-tools { display:flex; align-items:center; gap:8px; }
.music-rating-tools>.music-button { min-height:44px; font-size:.82rem!important; }
.music-rating-tools>.music-results-toggle { min-width:156px; background:#243746; color:#edf3f7; border-color:#7992a5; }
.music-rating-tools>.music-results-toggle[aria-pressed="true"] { background:#493565; color:#f4eaff; border-color:#bd9be4; box-shadow:inset 0 -3px 0 #b79bd8,0 2px 4px #0005; }
.music-rating-tools>[data-action="open"]:disabled { opacity:1; color:#9fc9b7; border-color:#45665c; background:#233c34; box-shadow:none; }
/* Queue belongs above the stage in its own column; the join/roster rail starts alongside it. */
.music-rail { padding:14px 18px 10px; display:flex; gap:24px; }
.music-queue-card { flex:1; min-width:0; }
.music-queue-card .music-section-heading { justify-content:flex-start; gap:12px; margin-bottom:7px; }
.music-queue-card h2 { font-size:.82rem; }
.music-queue-card .music-section-heading>.music-icon-button { margin-left:auto; width:31px; height:31px; flex-basis:31px; }
#music-queue { display:flex; gap:8px; overflow:auto; padding:3px 2px 7px; scrollbar-width:thin; max-height:128px; }
#music-queue li { flex:0 0 210px; min-width:0; padding:0; border:0; }
#music-queue li>button { display:flex; align-items:center; gap:11px; width:100%; height:100%; min-height:75px; text-align:left; border:1px solid #3d4a5b; border-radius:9px; padding:10px; color:#e9edf2; background:#182231; box-shadow:inset 0 1px 0 #ffffff08,0 2px 3px #0002; }
#music-queue li>button:hover:not(:disabled) { background:#293b4d; border-color:#69778c; }
#music-queue .music-disc { width:36px; height:36px; flex-basis:36px; }
#music-queue .music-disc>span { width:19px; height:19px; font-size:9px; }
#music-queue .music-track-title { font-size:.75rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
#music-queue .music-track-title small { font-size:.65rem; color:#9caebc; margin-top:4px; }
#music-queue .is-current>button { background:#293b3b; border-color:#7a9c8d; box-shadow:inset 0 -2px 0 #a2c3ad,inset 0 1px 0 #d2ecea12; }
.music-queue-playing { display:flex; color:#a9d0bd; }
.music-queue-playing svg { width:14px!important; height:14px!important; }
.music-rated-dot { width:6px; height:6px; background:#a7c6b6; border-radius:50%; flex-shrink:0; }
.music-add { position:relative; }
.music-add>summary { display:flex; align-items:center; gap:6px; list-style:none; cursor:pointer; padding:6px 10px; border:1px solid #4b6270; border-radius:6px; background:#203741; color:#ccdcdf; font-size:.7rem; box-shadow:inset 0 1px 0 #ffffff0c; }
.music-add>summary::-webkit-details-marker { display:none; }
.music-add>summary svg { width:14px; height:14px; }
.music-add-editor { position:absolute; bottom:calc(100% + 10px); left:0; z-index:7; width:340px; padding:14px; border:1px solid #6f8494; border-radius:10px; background:#1d2c3a; box-shadow:0 8px 30px #0009; }
.music-add-editor textarea { min-height:90px; font-size:.76rem; }
.music-add-editor>div { display:flex; gap:8px; margin-top:10px; }
.music-add .music-button { flex:1; font-size:.72rem!important; min-height:37px; padding:8px; }
/* Warm paper with a printed margin and binding seam. */
#music-lyrics-pane { min-width:0; display:flex; flex-direction:column; padding:20px 23px; border:1px solid #dcd1b8; border-radius:11px; background:var(--music-paper); color:var(--music-paper-ink); box-shadow:inset 5px 0 0 #ded4bd,inset 6px 0 0 #fff9,0 2px 5px #0005; height:clamp(450px,calc((100cqw - 22px)*.28125 + 150px),740px); max-height:none; }
#music-lyric-content { display:flex; flex-direction:column; min-height:0; flex:1; }
.music-lyrics-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:13px; margin-bottom:12px; border-bottom:1px solid #ccc7b7; }
.music-lyrics-tools>span { display:flex; gap:7px; align-items:center; font-size:.75rem; font-weight:600; color:#727568; }
.music-lyrics-tools>div { display:flex; align-items:center; gap:6px; }
.music-lyrics-tools .music-icon-button { width:34px; height:34px; flex-basis:34px; color:#64716c; }
.music-lyrics-tools .music-icon-button:hover { background:#e2ddcc; border-color:#b9b6a8; color:#283530; }
.music-translate-button { color:#30463f; background:#e1e6d8; border-color:#a8b8a9; box-shadow:none; font-size:.72rem!important; min-height:34px; padding:7px 9px; }
.music-translate-button:hover:not(:disabled) { color:#1e382e; background:#cddacb; border-color:#7e9b89; }
.music-translate-button svg { width:15px!important; height:15px!important; }
.music-lyric-caption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:5px 12px; font-size:.63rem; color:#7c7e74; line-height:1.5; }
.music-lyric-caption a { color:#647664; text-decoration:underline; text-underline-offset:3px; }
.music-lyric-lines { flex:1; min-height:0; overflow:auto; padding:0 4px 0 17px; border-left:1px solid #c4a99566; margin:18px 0 15px; scrollbar-color:#acb2a0 transparent; scrollbar-width:thin; }
.music-lyric-line { display:block; padding:7px 0; }
.music-lyric-line p { font-size:clamp(1.15rem,1.7vw,1.65rem); font-weight:450; line-height:1.65; letter-spacing:-.012em; overflow-wrap:anywhere; }
.music-lyric-line [data-word] { border-radius:3px; }
.music-lyric-line [data-word]:hover { background:#e0dbc4; }
.music-lyric-line ::selection { background:#efd080; color:#252d32; }
.music-lyric-line button { display:inline-flex; align-items:center; justify-content:center; min-width:30px; min-height:36px; padding:5px; border:0; border-radius:5px; background:transparent; color:#7e8f7d; }
.music-lyric-line button svg { width:15px!important; height:15px!important; }
.music-lyric-line button:hover { color:#273c30; background:#dce1ce; }
.music-lyric-break { height:20px; }
.music-lyric-footer { border-top:1px solid #d7d0be; padding-top:12px; }
.music-lyric-footer .music-note { color:#777d70; font-size:.66rem; }
.music-sync { margin-top:11px; color:#68756c; font-size:.66rem; }
.music-sync summary { cursor:pointer; }
.music-offset { display:flex; align-items:center; gap:12px; margin-top:9px; font-size:.7rem; color:#667166; }
.music-offset input { max-width:80px; padding:6px 8px; background:#fffaf0; color:#2e3932; border-color:#aeb4a4; }
#music-lyric-search { display:flex; flex-wrap:wrap; gap:8px; margin:15px 0; }
#music-lyric-search input { flex:1; min-width:130px; border-color:#b5b7a6; background:#fffaf0; color:#34403b; font-size:.8rem; }
#music-lyric-search .music-button { font-size:.72rem!important; }
#music-lyric-content>.music-note { color:#717b6d; }
.music-lyric-matches { display:grid; gap:8px; }
.music-lyric-matches button { padding:12px; border:1px solid #b2b5a6; border-radius:7px; color:#354039; background:#e9e8db; text-align:left; font-size:.85rem; }
.music-lyric-matches span { display:block; margin-top:4px; font-size:.74rem; color:#677267; }
/* A familiar star score and 5-to-1-star voting breakdown. */
#music-current-results:empty { display:none; }
#music-current-results:not(:empty) { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:20px 24px; margin:0 0 24px; border:1px solid #967abb; border-radius:12px; background:#211e33; box-shadow:inset 0 1px 0 #e6d4ff24,0 4px 10px #0004; }
#music-current-results>.music-summary { flex:1; gap:32px; }
#music-current-results .music-summary-score { font-size:clamp(3.5rem,6vw,5rem); color:#f3e4ff; }
#music-current-results .music-summary-average>small { font-size:1rem; }
#music-current-results .music-summary-votes { font-size:.85rem; }
#music-current-results .music-rating-breakdown { max-width:440px; }
#music-current-results .music-rating-row { font-size:.8rem; }
#music-current-results>.music-button { min-height:46px; }
.music-summary { display:flex; gap:18px; align-items:center; justify-content:space-between; min-width:0; }
.music-summary-score { flex-shrink:0; display:grid; justify-items:start; gap:7px; font-size:1.85rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1; }
.music-summary-average { white-space:nowrap; }
.music-summary-average>small { font-size:.72rem; color:#a9b4c5; font-weight:400; letter-spacing:0; margin-left:6px; }
.music-summary-votes { font-size:.68rem; color:#a5b1c2; font-weight:400; letter-spacing:0; line-height:1.3; }
.music-summary-stars { display:flex; gap:3px; color:#72647e; }
.music-score-star { position:relative; display:block; width:18px; height:18px; }
.music-score-star>.ziarcadia-icon,.music-score-star>.is-filled>.ziarcadia-icon { display:block; width:18px; height:18px; }
.music-score-star>.is-filled { position:absolute; inset:0; color:#d0b3ed; }
.music-score-star>.is-filled path { fill:currentColor; }
.music-rating-breakdown { display:grid; gap:5px; flex:1; min-width:118px; }
.music-rating-row { display:grid; grid-template-columns:25px minmax(24px,1fr) 34px 20px; align-items:center; gap:8px; font-size:.68rem; color:#c3b8d0; line-height:1.2; font-variant-numeric:tabular-nums; }
.music-rating-label { display:flex; align-items:center; gap:4px; }
.music-rating-label>.ziarcadia-icon { width:12px; height:12px; color:#c7aedd; }
.music-rating-track { height:8px; overflow:hidden; border-radius:8px; background:#ffffff0d; }
.music-rating-track>i { display:block; height:100%; border-radius:inherit; background:#b9a1d4; }
.music-rating-row>.music-rating-share { text-align:right; }
.music-rating-row>b { font-size:inherit; font-weight:500; text-align:right; color:#f0e6fa; }
/* Students */
.music-student { max-width:490px; margin:5vh auto 0; text-align:center; }
.music-student-class { color:#acb6c6; font-size:.75rem; letter-spacing:.03em; overflow-wrap:anywhere; }
.music-student h1 { font-size:1.5rem; font-weight:550; margin:14px 0 20px; }
.music-waiting-mark { display:flex; justify-content:center; margin:48px 0 28px; }
.music-waiting-mark .music-disc { width:100px; height:100px; }
.music-waiting-mark .music-disc>span { width:40px; height:40px; }
.music-waiting-mark .music-disc svg { width:23px!important; height:23px!important; }
.music-student>.music-note { max-width:330px; margin:10px auto 0; }
.music-voting-list { display:grid; gap:16px; text-align:left; margin-top:24px; }
.music-vote-card { background:#efedde; border-color:#e7dfc8; color:#28363b; padding:25px; box-shadow:0 10px 25px #0003; }
.music-vote-song { display:flex; align-items:center; gap:15px; }
.music-vote-song>div { min-width:0; }
.music-vote-song h2 { font-size:1.35rem; font-weight:650; overflow-wrap:anywhere; line-height:1.25; }
.music-vote-song p { font-size:.79rem; color:#6b7979; margin-top:6px; }
.music-vote-song .music-disc { width:55px; height:55px; flex-basis:55px; }
.music-rating-buttons { display:flex; justify-content:center; gap:3px; width:100%; max-width:330px; margin:27px auto 5px; }
.music-rating-buttons>button { display:inline-flex; align-items:center; justify-content:center; flex:1; min-width:44px; height:55px; padding:4px; border:1px solid transparent; border-radius:8px; color:#89948c; background:transparent; box-shadow:none; }
.music-rating-buttons>button svg { width:37px!important; height:37px!important; color:inherit; filter:drop-shadow(0 1px 0 #fff7); }
.music-rating-buttons>button svg path { stroke-width:1.5; }
.music-rating-buttons>button[data-filled="true"] { color:#a87d30; }
.music-rating-buttons>button[data-filled="true"] svg path { fill:#e4bd63; }
.music-rating-buttons[data-preview]>button { color:#9aa297; }
.music-rating-buttons[data-preview]>button svg path { fill:none; }
.music-rating-buttons[data-preview]>button.is-preview { color:#547c64; }
.music-rating-buttons[data-preview]>button.is-preview svg path { fill:#abc9ab; }
.music-rating-buttons>button:disabled { opacity:.85; }
.music-rating-anchors { display:flex; justify-content:space-between; max-width:330px; margin:0 auto; gap:16px; color:#768074; font-size:.66rem; }
.music-rating-anchors>span:last-child { text-align:right; }
.music-vote-status { min-height:19px; margin-top:20px!important; font-size:.73rem; text-align:center; color:#4d7160; }
.music-vote-card .music-summary { margin-top:16px; padding-top:16px; border-top:1px solid #c9c9b5; }
.music-vote-card .music-summary-average>small,.music-vote-card .music-summary-votes { color:#747e76; }
.music-vote-card .music-summary-stars { color:#a8a895; }
.music-vote-card .music-score-star>.is-filled { color:#7f668f; }
.music-vote-card .music-rating-row,.music-vote-card .music-rating-row>b { color:#667369; }
.music-vote-card .music-rating-label>.ziarcadia-icon { color:#8b729b; }
.music-vote-card .music-rating-track { background:#c8ccbb66; }
.music-vote-card .music-rating-track>i { background:#9690b2; }
.music-student-note { font-size:.72rem!important; margin-top:20px!important; }
.music-earlier-label { margin-top:8px!important; color:#99a9b9; font-size:.72rem; }
.music-join-form { max-width:400px; padding:28px; margin:5vh auto 0; }
.music-join-form .music-waiting-mark { margin:5px 0 20px; }
.music-join-form .music-disc { width:68px; height:68px; }
#music-join-form { display:grid; gap:17px; text-align:left; margin-top:24px; }
/* Dialogs */
.music-dialog { width:min(870px,calc(100% - 30px)); max-height:90vh; overflow:auto; padding:30px; border:1px solid #596174; border-radius:16px; background:#202938; color:#e8edf0; box-shadow:0 24px 90px #0009; font-family:"Segoe UI",system-ui,sans-serif; }
.music-dialog::backdrop { background:#050a12c9; backdrop-filter:blur(4px); }
.music-dialog h2 { margin:0 30px 13px 0; font-size:1.3rem; }
.music-dialog-close { position:absolute; top:13px; right:13px; width:36px; height:36px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#a9b5c6; }
.music-dialog-close:hover { background:#ffffff10; }
.music-dialog-close svg { width:18px; height:18px; }
.music-dialog-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:23px; }
.music-dialog:has(#music-meaning) { max-width:580px; background:#f4efdf; color:#273831; border-color:#d5cdb9; padding:32px; }
.music-dialog:has(#music-meaning) .music-note,.music-dialog:has(#music-meaning) .music-dialog-close { color:#788171; }
#music-meaning { font-size:1.2rem; line-height:1.85; white-space:pre-wrap; margin:14px 0 0; word-break:keep-all; }
.music-large-qr { display:block; width:min(440px,100%); border-radius:9px; margin:auto; }
.music-large-code { font:1.9rem/1.4 ui-monospace,monospace; letter-spacing:.14em; text-align:center; margin:17px 0 0; }
.music-compare-picks { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0; }
.music-compare-picks label { display:flex; align-items:center; gap:8px; padding:9px 11px; background:#1b2230; border:1px solid #485265; border-radius:8px; font-size:.82rem; }
.music-compare-picks input { width:16px; height:16px; accent-color:#baa8e3; }
.music-compare-picks small { display:block; font-size:.63rem; color:#99a8bd; margin-top:4px; }
.music-table-scroll { overflow:auto; }
.music-comparison { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.music-comparison th,.music-comparison td { padding:13px 12px; border-bottom:1px solid #465062; text-align:left; min-width:110px; }
.music-comparison thead th { color:#b8aed3; font-size:.82rem; }
.music-comparison tbody th { min-width:160px; font-size:.88rem; font-weight:500; }
.music-comparison td { font-size:1.25rem; color:#f0d398; }
.music-comparison small { display:block; font-size:.65rem; color:#a4afc0; margin-top:5px; font-weight:400; }
#music-status { position:fixed; left:50%; bottom:16px; z-index:20; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 30px); padding:10px 15px; border:1px solid #596d74; border-radius:9px; background:#273a42; color:#dfede9; box-shadow:0 6px 24px #0005; font-size:.77rem; line-height:1.5; pointer-events:none; }
#music-status:empty { display:none; }
#music-status[data-error="true"] { color:#ffd7bc; border-color:#a07960; }
#music-app[data-busy="true"] [data-action]:not([data-action="language"]),#music-app[data-busy="true"] [data-rating] { opacity:.6; cursor:wait; }
.music-boot { text-align:center; margin:20vh auto!important; color:#a9b9c8; }
/* Student reading uses almost the whole viewport, independently of host video geometry. */
.music-student.is-reading { max-width:1000px; margin:8px auto 0; text-align:left; }
.music-student-tabs { width:max-content; margin:0 auto 14px; }
.music-student-sheet { display:flex; flex-direction:column; height:calc(100dvh - 155px); min-height:420px; padding:26px 36px; border:1px solid #d3c8ab; border-radius:12px; background:#f4efdf; color:#29333c; box-shadow:inset 7px 0 0 #dcd1b7,inset 8px 0 0 #ffffffa0,0 8px 25px #0005; }
.music-student-sheet>header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:18px; border-bottom:1px solid #d1c8b2; }
.music-student-sheet>header>div { min-width:0; }
.music-student-sheet header span { font-size:.7rem; color:#778071; }
.music-student-sheet h1 { margin:8px 0 6px; font-size:clamp(1.4rem,3vw,2rem); overflow-wrap:anywhere; }
.music-student-sheet header p { color:#717c73; font-size:.84rem; }
.music-reading-seal { display:flex; justify-content:center; align-items:center; width:42px; height:42px; flex:0 0 42px; border:1px solid #b5b9a7; border-radius:50%; color:#6c8474!important; }
.music-student-lyric-lines { flex:1; min-height:0; overflow:auto; padding:18px 14px 30px 24px; margin:22px 0; border-left:1px solid #c7aa95; scrollbar-width:thin; scrollbar-color:#a5b29d transparent; }
.music-student-lyric-lines p { font-size:clamp(1.35rem,2.8vw,2.1rem); line-height:1.85; letter-spacing:-.015em; padding:6px 0; overflow-wrap:anywhere; }
.music-student-sheet footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; font-size:.63rem; color:#7a8374; }
.music-student-sheet footer a { color:#647664; text-decoration:underline; text-underline-offset:3px; }
/* A shared explanation rests at the foot of the reading sheet without covering its text. */
.music-student-lyric-lines mark { color:inherit; background:#e8ce84; border-radius:3px; box-shadow:0 2px 0 #c5a757; }
.music-shared-meaning { flex:0 0 auto; max-height:30dvh; overflow:auto; margin:0 0 15px; padding:15px 18px; border:1px solid #748e80; border-radius:8px; color:#e4eee7; background:#23443d; box-shadow:inset 0 1px 0 #e6f6e526,0 2px 5px #233f3420; }
.music-shared-meaning>div { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.music-shared-meaning>div>svg { width:17px; height:17px; color:#a7cbb5; }
.music-shared-meaning strong { font-size:1.1rem; font-weight:600; overflow-wrap:anywhere; }
.music-shared-meaning>div>span { color:#aec6b7; font-size:.62rem; margin-left:auto; }
.music-shared-meaning>p { font-size:clamp(1rem,1.7vw,1.25rem); line-height:1.75; margin-top:9px; white-space:pre-wrap; word-break:keep-all; overflow-wrap:anywhere; }
#music-app.music-presentation { min-height:100dvh; overflow:auto; background:var(--viewport-background); }
.music-presentation>.music-header:not(.music-host-header) { display:none; }
.music-presentation .music-main { max-width:none; padding:16px 24px 20px; }
.music-presentation .music-room-heading { margin-bottom:12px; }
.music-presentation .music-watch { padding:20px; }
.music-presentation #music-lyrics-pane { max-height:calc(100dvh - 235px); }
.music-presentation .music-rail { display:none; }
.music-presentation .music-room-layout>.music-watch { grid-row:1; }
@media(min-width:1800px) { .music-watch[data-tab="lyrics"] .music-video-wrap { max-height:58vh; } }
@media(max-width:1100px) {
 .music-header,.music-main { padding-left:22px; padding-right:22px; }
 .music-watch { padding:18px; }
 .music-watch-heading { align-items:flex-start; gap:16px; }
 .music-watch-actions { flex-direction:column; align-items:flex-end; gap:10px; }
 .music-media-layout { gap:18px; }
 .music-control-row { flex-wrap:wrap; justify-content:center; }
 .music-player-options { gap:7px; }
 .music-volume { width:80px; }
 .music-setup-grid { grid-template-columns:minmax(0,1fr) 300px; gap:18px; }
 .music-setup-grid>.music-setup-work { grid-column:1; grid-row:1/3; }
 .music-setup-grid>.music-setup-side { grid-column:2; grid-row:1; }
 .music-setup-grid>.music-participants { grid-column:2; grid-row:2; }
 .music-lyric-line p { font-size:1.17rem; }
 #music-lyrics-pane { padding:16px; max-height:clamp(450px,60vh,640px); }
 .music-lyrics-tools>span>svg { display:none; }

 .music-summary { gap:12px; }
}
@media(max-width:700px) {
 .music-header { padding:15px 16px 10px; } .music-brand { font-size:1.15rem; } .music-brand>span { display:none; } .music-main { padding:4px 12px 35px; }
 #music-app[data-scene="setup"] .music-header .music-brand>span { display:flex; font-size:.8rem; padding-left:12px; }
 .music-setup { margin-top:12px; } .music-intro { gap:13px; margin-bottom:23px; } .music-intro h1 { font-size:1.7rem; } .music-intro p { font-size:.8rem; } .music-intro-record .music-disc { width:52px; height:52px; }
 .music-setup-grid { grid-template-columns:1fr; gap:16px; } .music-playlist-editor { padding:18px; } .music-setup-side { gap:12px; } .music-session-card { padding:19px; } .music-class-fields { grid-template-columns:minmax(0,1fr) 100px; margin-bottom:15px; } .music-session-card h2 { margin-bottom:15px; }
 .music-setup-grid>.music-setup-work,.music-setup-grid>.music-setup-side,.music-setup-grid>.music-participants { grid-column:auto; grid-row:auto; }
 .music-setup-work .music-session-card { grid-template-columns:1fr; gap:14px; }
 .music-track-list li { gap:10px; } .music-track-actions { gap:0; } .music-track-actions button { width:29px; } .music-track-title { font-size:.85rem; } .music-disc { width:40px; height:40px; flex-basis:40px; }
 .music-host-header { gap:10px; padding:10px 12px; }
 .music-host-header>.music-brand { font-size:0; gap:0; }
 .music-host-header>.music-brand>span { display:flex; font-size:.8rem; padding:0; border:0; gap:5px; white-space:nowrap; }
 .music-host-header>.music-class-identity { margin-left:0; }
 .music-host-header>.music-language { padding:4px 0; font-size:.65rem; }
 .music-class-identity h1 { font-size:.75rem; } .music-class-identity h1>span { display:none; }
 .music-quick-qr { display:inline-flex; flex:0 0 30px; width:30px; height:30px; font-size:.65rem!important; border:1px solid #ffffff20; }
 .music-host-utilities.pictionary-host-utility-strip { grid-template-columns:minmax(0,1fr) 110px; }
 .music-join-card .active-room-code-display { font-size:1.25rem; }
 .music-watch { padding:14px; border-radius:12px; } .music-watch-heading { flex-direction:column; gap:16px; padding-bottom:17px; } .music-watch-heading h2 { font-size:1.5rem; } .music-song-kicker { font-size:.58rem; } #music-song-artist { font-size:.75rem; }
 .music-watch-actions { width:100%; align-items:stretch; gap:12px; } .music-tabs { align-self:flex-start; } .music-tabs button { font-size:.69rem; padding:7px 9px; } .music-rating-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .music-rating-tools>.music-button { font-size:.69rem!important; padding:8px 10px; min-height:38px; }
 .music-watch[data-tab="lyrics"] .music-media-layout { grid-template-columns:minmax(0,1fr); gap:18px; } .music-video-wrap { min-height:200px; } .music-control-panel { padding:10px 8px; } .music-control-row { gap:8px; } .music-transport { gap:3px; } .music-player-options { gap:6px; }
 #music-lyrics-pane { height:auto; max-height:68vh; min-height:400px; padding:16px; } .music-lyric-line p { font-size:1.25rem; } .music-lyric-caption { font-size:.6rem; } .music-lyric-lines { margin-top:16px; }
 .music-rail { flex-direction:column; padding:12px; gap:12px; } #music-current-results:not(:empty) { padding:16px; gap:16px; } #music-current-results>.music-summary { gap:16px; } #music-current-results>.music-button { width:100%; } #music-current-results .music-rating-row { gap:5px; font-size:.68rem; } #music-queue { max-height:128px; } #music-queue li { flex-basis:195px; }
 .music-add-editor { width:min(315px,calc(100vw - 65px)); left:-65px; } .music-add>summary { font-size:.66rem; padding:6px 8px; } .music-queue-card .music-section-heading { gap:8px; }
 .music-student { margin-top:25px; } .music-student h1 { font-size:1.4rem; margin-bottom:18px; } .music-vote-card { padding:22px 18px; } .music-rating-buttons { gap:1px; } .music-rating-buttons>button { min-height:52px; } .music-vote-song h2 { font-size:1.25rem; } .music-vote-song .music-disc { width:49px; height:49px; flex-basis:49px; }
 .music-student.is-reading { margin-top:5px; } .music-student-sheet { padding:21px 21px 17px 24px; height:calc(100dvh - 148px); min-height:400px; } .music-student-sheet>header { padding-bottom:14px; } .music-student-sheet h1 { margin:8px 0 5px; font-size:1.5rem; } .music-student-sheet header p { font-size:.75rem; } .music-student-lyric-lines { padding:6px 5px 24px 14px; margin:18px 0; } .music-student-lyric-lines p { font-size:1.4rem; line-height:1.75; } .music-student-sheet footer { font-size:.6rem; } .music-reading-seal { width:34px; height:34px; flex-basis:34px; }
 .music-dialog { padding:24px 18px; } .music-dialog:has(#music-meaning) { padding:27px 22px; }
 .music-presentation .music-main { padding:12px; } .music-presentation .music-watch { padding:14px; } .music-presentation #music-lyrics-pane { max-height:70vh; }
}
@media(prefers-reduced-motion:reduce) { .music-page * { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Timestamped lyrics follow whole lines; selection remains available for vocabulary work. */
.music-follow-button { display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:0 0 auto; padding:7px 9px; border:1px solid #b1b9a7; border-radius:6px; background:transparent; color:#6a786a; font:500 .68rem/1.25 inherit; box-shadow:none; }
.music-follow-button>span { font-size:.68rem!important; color:inherit!important; }
.music-follow-button>svg { width:14px!important; height:14px!important; }
.music-follow-button[aria-pressed="true"] { background:#dfe8d7; color:#3f6950; border-color:#9db29c; box-shadow:inset 0 -2px 0 #8daa8e; }
.music-follow-button:hover { border-color:#738f79; background:#d9e3d1; }
.music-lyric-line { position:relative; border-radius:6px; padding:7px 8px; margin-left:-8px; transition:background-color .18s ease; }
.music-lyric-line.is-playing { background:#dde6d1; box-shadow:inset 3px 0 0 #6f9276; }
.music-lyric-line.is-playing p { color:#254333; }
.music-lyric-line button[data-replay-line] { display:flex; align-items:center; justify-content:flex-end; gap:6px; min-width:61px; width:auto; padding:6px 0 6px 5px; flex:0 0 auto; color:#6c8270; }
.music-lyric-line button[data-replay-line]>span { font-size:.63rem; font-variant-numeric:tabular-nums; }
.music-lyric-line button[data-replay-line]>svg { width:12px!important; height:12px!important; }
.music-student-lyric-lines p { border-radius:5px; padding:6px 8px; margin-left:-8px; transition:background-color .18s ease; }
.music-student-lyric-lines p.is-playing { background:#dde6d1; color:#254333; box-shadow:inset 3px 0 0 #6f9276; }
.music-lyric-lines:focus-visible,.music-student-lyric-lines:focus-visible { outline:2px solid #73937b; outline-offset:4px; }
@media(max-width:1100px) { .music-lyrics-tools>span { display:none; } .music-lyrics-tools>div { width:100%; justify-content:flex-end; } .music-lyrics-tools .music-follow-button { margin-right:auto; } }
@media(max-width:700px) { .music-student-sheet>header>.music-follow-button { max-width:112px; } .music-lyric-line button[data-replay-line] { min-width:49px; gap:4px; } .music-lyric-line button[data-replay-line]>span { font-size:.59rem; } }
@media(prefers-reduced-motion:reduce) { .music-lyric-line,.music-student-lyric-lines p { transition:none; } }

/* The time rail is an instrument for playback, independent of the text's scroll position. */
.music-lyric-reader { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; }
.music-lyric-reader>.music-lyric-lines { flex:1; min-width:0; margin-bottom:8px; padding-left:10px; }
.music-lyric-line p { min-width:0; }
.music-lyric-line button[data-replay-line] { width:28px; min-width:28px; justify-content:center; padding:5px; }
.music-lyric-line button[data-replay-line]>span { display:none; }
.music-time-rail { display:flex; flex-direction:row; align-items:center; flex:0 0 34px; gap:12px; color:#78816e; font:500 .59rem/1 ui-monospace,Consolas,monospace; user-select:none; }
.music-time-rail>span { flex:0 0 29px; text-align:center; }
#music-lyric-scrubber { flex:1; min-width:0; height:30px; position:relative; cursor:ew-resize; touch-action:none; border-radius:6px; outline-offset:1px; }
#music-lyric-scrubber:focus-visible { outline:2px solid #6d927b; }
.music-rail-track { position:absolute; left:0; right:0; top:13px; height:4px; border-radius:5px; background:#d3d6c1; box-shadow:inset 0 1px 3px #68725c44; }
.music-rail-track::after { content:""; display:block; height:100%; width:var(--position,0%); border-radius:5px; background:#93af96; }
.music-time-markers { position:absolute; inset:0; }
.music-time-markers i { position:absolute; top:10px; width:1px; height:10px; background:#849c7c; opacity:.5; }
.music-rail-thumb { position:absolute; left:clamp(9px,var(--position,0%),calc(100% - 9px)); top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border-radius:50%; background:repeating-radial-gradient(circle,#263a35 0 2px,#506258 2.5px 3px,#2c4038 3.5px 5px); border:1px solid #738d74; box-shadow:0 1px 3px #364c3433; }
.music-rail-thumb>i { position:absolute; inset:5px; border-radius:50%; background:#aec69d; border:1px solid #d1dfbf; }
.music-rail-thumb>output { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); padding:4px 5px; border-radius:4px; color:#edf4e6; background:#456b51; font-size:.58rem; opacity:0; pointer-events:none; }
#music-lyric-scrubber:is(:hover,:focus-visible,[data-dragging]) .music-rail-thumb>output { opacity:1; }
#music-lyric-scrubber:is(:hover,[data-dragging]) .music-rail-thumb { border-color:#2e6646; box-shadow:0 0 0 3px #9bb29244; }
@media(max-width:700px) { .music-time-rail { gap:8px; } .music-lyric-line button[data-replay-line] { min-width:28px; } }


/* A small repeat control beside the existing line playback action. */
.music-line-actions { display:inline-flex; align-items:center; gap:2px; margin-inline-start:6px; vertical-align:middle; white-space:nowrap; opacity:.65; }
.music-lyric-line:is(:hover,:focus-within) .music-line-actions,.music-lyric-line.is-looping .music-line-actions { opacity:1; }
.music-line-actions>button[data-loop-line] { display:inline-flex; align-items:center; justify-content:center; width:28px; height:30px; padding:5px; border:1px solid transparent; border-radius:6px; color:#7a8c78; background:transparent; }
.music-line-actions>button[data-loop-line]>svg { width:14px!important; height:14px!important; }
.music-line-actions>button[data-loop-line]:hover { color:#426e50; border-color:#a9b9a0; background:#e1e8d7; }
.music-line-actions>button[data-loop-line][aria-pressed="true"] { color:#345d42; border-color:#8baa8d; background:#cdddc4; box-shadow:inset 0 -2px 0 #7fa183; }
.music-lyric-line.is-looping { box-shadow:inset 3px 0 0 #6f9276,inset 0 0 0 1px #a5b79a; }
@media(max-width:700px) { .music-line-actions { gap:2px; } .music-line-actions>button[data-loop-line] { width:27px; height:31px; } }

/* The device is parked between rating periods; no header, lyric sheet or status chrome. */
html:has(.music-resting) { --viewport-background:#ef9a8f; scrollbar-gutter:auto; }
.music-page.music-resting { background:#ef9a8f; color:#462723; }
.music-resting::before { display:none; }
.music-resting .music-header,.music-resting #music-status { display:none; }
.music-resting .music-main { display:grid; place-items:center; min-height:100dvh; max-width:none; padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); }
.music-resting .music-student { max-width:900px; margin:0; }
.music-resting h1.music-face-down { margin:0; font-size:clamp(1.8rem,5.5vw,3.6rem); line-height:1.35; font-weight:700; text-wrap:balance; }
@media (pointer:coarse) { .music-line-actions>button[data-loop-line],.music-lyric-line button[data-replay-line] { width:32px; min-width:32px; min-height:36px; } .music-line-actions { opacity:1; } }

.music-lyric-tail { display:inline-flex; align-items:baseline; max-width:100%; vertical-align:baseline; }
.music-lyric-tail>[data-word] { min-width:0; overflow-wrap:anywhere; }
.music-lyric-tail>.music-line-actions { flex:none; }
@container music-video (max-width:520px) { .music-control-row { flex-wrap:wrap; justify-content:center; gap:8px; } }
@media(min-width:701px) { .music-watch-heading { position:sticky; top:8px; z-index:5; background:#0b202c; border-radius:8px; padding:12px 4px 16px; margin-top:-12px; } }

@media(max-width:360px) { #music-current-results>.music-summary { flex-wrap:wrap; } #music-current-results .music-rating-breakdown { flex-basis:100%; } }