/* Listening room: local audio, cover at left, lyrics at right, shared transport. */
.music-section { --music-accent:var(--folio-orange,#ffff00); --music-ink:var(--folio-ink,#242824); --music-muted:#727166; --music-line:#24282425; color:var(--music-ink); background:var(--folio-paper,#f5f3ed); scroll-margin-top:100px; }
.music-section [hidden],.music-dock [hidden],.music-dock[hidden] { display:none!important; }
.music-section button,.music-section input { font:inherit; }
.music-section :is(button,a,summary):focus-visible,.music-file-button:focus-within,.music-lyrics-scroll:focus-visible,.music-dock :is(button,a,audio):focus-visible { outline:2px solid #242824; outline-offset:5px; }
.music-screen { padding:80px 0 36px; }
.music-shell { width:min(1240px,calc(100% - 112px)); margin:auto; }
.v4-music-layout { display:grid; gap:40px; }
.music-intro { display:flex; align-items:baseline; gap:14px 30px; flex-wrap:wrap; padding-bottom:25px; border-bottom:1px solid var(--music-line); }
.music-kicker { display:flex; align-items:center; gap:12px; flex-basis:100%; font:10px/1.5 Consolas,monospace; letter-spacing:.14em; color:var(--folio-ink,#242824); }
.music-kicker b { font-weight:400; }
.music-intro :is(h1,h2) { margin:0; font-size:clamp(32px,3.2vw,48px); font-weight:500; line-height:1.3; letter-spacing:-.04em; }
.music-intro h2 a { display:flex; align-items:center; gap:25px; color:inherit; text-decoration:none; }
.music-intro h2 a span { font-size:.55em; color:var(--folio-ink,#242824); transition:transform .2s; }
.music-intro h2 a:hover span { transform:translate(3px,-3px); }
.music-description { margin:0!important; color:var(--music-muted); font-size:13px!important; line-height:1.9!important; }
.music-invitation,.music-sound-line,.music-quiet-note { display:none; }
.music-panel { display:grid; grid-template-columns:minmax(280px,.92fr) minmax(360px,1.08fr); gap:28px clamp(60px,8vw,125px); align-items:start; padding:0 38px; min-width:0; }
.music-player { grid-column:1; grid-row:1; min-width:0; padding:0; }
.music-player-topline { display:flex; justify-content:space-between; align-items:center; gap:20px; font:9px/1.6 Consolas,monospace; letter-spacing:.1em; color:var(--music-muted); }
.music-player-indicator { display:flex; align-items:center; gap:10px; font-family:inherit; }
.music-meter { height:12px; display:flex; align-items:flex-end; gap:3px; }
.music-meter i { width:2px; height:12px; background:var(--music-accent); transform-origin:bottom; }
.music-meter i:nth-child(1) { transform:scaleY(calc(.15 + var(--music-bass,0)*.85)); }
.music-meter i:nth-child(2) { transform:scaleY(calc(.25 + var(--music-level,0)*.75)); }
.music-meter i:nth-child(3) { transform:scaleY(calc(.35 + var(--music-mid,0)*.65)); }
.music-meter i:nth-child(4) { transform:scaleY(calc(.15 + var(--music-high,0)*.85)); background:#00fdfd; }
.music-now { display:flex; flex-direction:column; align-items:center; margin-top:24px; gap:28px; }
.music-now-cover { width:min(100%,340px); height:auto; aspect-ratio:1; object-fit:cover; border-radius:3px; box-shadow:0 20px 36px -18px #35251765,10px 10px 0 #ffff001f; }
.music-now-copy { display:grid; gap:5px; width:100%; text-align:left; margin-bottom:24px; }
.music-now-label{ color:var(--folio-ink,#242824); font:9px/1.7 Consolas,monospace; letter-spacing:.12em;;text-decoration:underline;text-decoration-color:#ffff00;text-underline-offset:4px}
.music-now-copy strong { font-size:24px; font-weight:500; line-height:1.45; overflow-wrap:anywhere; }
.music-now-copy > span:not(.music-now-label) { color:var(--music-muted); font-size:12px; line-height:1.7; }
.music-now-copy > span:empty { display:none; }
.music-source-link { margin-top:4px; font-size:10px; color:var(--music-muted); text-underline-offset:4px; }
.music-spectrum { margin:22px auto 0; max-width:340px; }
.music-spectrum > div { display:flex; justify-content:space-between; gap:10px; font-size:9px; color:var(--music-muted); }
.music-spectrum canvas { display:block; width:100%; height:46px; margin-top:9px; }
.music-player-actions { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:18px; }
.music-player-actions button { padding:9px 12px; border:1px solid transparent; background:#e8e7e2; color:var(--music-ink); font-size:11px; cursor:pointer; transition:background .2s; }
.music-player-actions [data-music-toggle] { background:var(--music-accent); }
.music-player-actions button:hover { background:var(--folio-accent,#ffff00); }
.music-player-actions button:disabled,.music-dock button:disabled { opacity:.3; cursor:default; }
.music-player-actions a { font-size:10px; color:var(--music-muted); text-underline-offset:4px; margin-left:8px; }
.music-playback-status { text-align:center; color:var(--music-muted); font-size:10px!important; line-height:1.8!important; min-height:18px; margin:12px 0 0!important; }
.music-section[data-music-error] .music-playback-status { color:#934a24; }
.music-local-extra { text-align:center; margin-top:12px; }
.music-local-extra > summary { width:fit-content; margin:auto; font-size:10px; color:var(--music-muted); cursor:pointer; list-style:none; }
.music-local { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; padding-top:12px; }
.music-file-button { display:inline-flex; position:relative; align-items:center; gap:20px; background:var(--folio-accent,#ffff00); padding:8px 12px; font-size:11px; cursor:pointer; }
.music-file-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.music-local-clear { border:0; background:transparent; padding:8px 0; color:var(--music-muted); font-size:10px!important; cursor:pointer; }
.music-small-note { width:100%; font-size:10px!important; line-height:1.8!important; color:var(--music-muted); margin:0!important; }
.music-lyrics { grid-column:2; grid-row:1; min-width:0; padding-top:0; }
.music-lyrics > header { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-bottom:23px; }
.music-lyrics h3 { margin:0!important; font-size:12px!important; font-weight:500; color:var(--folio-ink,#242824); letter-spacing:.15em; }
.music-lyrics button { font-size:10px; color:var(--music-ink); background:transparent; border:1px solid var(--music-line); padding:6px 10px; cursor:pointer; }
.music-lyrics button[aria-pressed=true] { background:var(--folio-accent,#ffff00); border-color:transparent; }
.music-lyrics-scroll { height:355px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d5c8b5 transparent; padding:10px 25px 55px 0; mask-image:linear-gradient(to bottom,#000 89%,transparent); }
.music-lyrics-scroll p { margin:0 0 21px!important; color:#66685f; font-size:18px!important; line-height:1.9!important; overflow-wrap:anywhere; }
.music-lyrics-scroll [data-music-lyrics-status] { color:#8b897d; font-size:10px!important; letter-spacing:.08em; margin-bottom:25px!important; }
.music-lyrics-scroll .is-current{ color:var(--folio-ink,#242824); font-weight:600;;text-decoration:underline;text-decoration-color:#ffff00;text-underline-offset:4px;text-decoration-thickness:3px}
.music-lyrics-source { display:inline-block; color:var(--music-ink); font-size:12px; text-underline-offset:5px; }
.music-selection { grid-column:1/-1; margin-top:8px; border-top:1px solid var(--music-line); border-bottom:1px solid var(--music-line); }
.music-list-label { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:17px 0; color:var(--music-ink); font-size:12px; cursor:pointer; list-style:none; }
.music-list-label b { display:inline-block; padding:2px 7px; margin-left:8px; background:#00fdfd; font:10px/1.5 Consolas,monospace; }
.music-list-label > span:last-child { color:var(--music-muted); font-size:10px; }
.music-tracks { display:grid; grid-template-columns:1fr 1fr; gap:0 38px; list-style:none; padding:0 0 12px; margin:0; max-height:335px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.music-tracks li { border-top:1px solid var(--music-line); }
.music-track { display:grid; grid-template-columns:20px 1fr 20px; gap:12px; align-items:center; width:100%; border:0; background:transparent; padding:13px 6px; text-align:left; color:inherit; cursor:pointer; transition:background .2s; }
.music-track-number { color:var(--music-muted); font:10px/1.5 Consolas,monospace; }
.music-track-copy { min-width:0; }
.music-track-copy strong { font-size:12px; font-weight:500; line-height:1.6; }
.music-track-copy small { display:block; color:var(--music-muted); font-size:10px; line-height:1.8; }
.music-track-action { font-size:17px; color:var(--folio-ink,#242824); }
.music-track:hover,.music-track[aria-pressed=true] { background:#ffff001a; color:var(--folio-ink,#242824); }
.music-empty,.music-playlists { grid-column:1/-1; color:var(--music-muted); font-size:12px; }
.music-playlist { display:flex; justify-content:space-between; color:inherit; padding:12px 0; }
.music-playlist small { display:block; }
.music-footer { display:flex; justify-content:space-between; gap:24px; margin-top:33px; color:var(--music-muted); font-size:10px; line-height:1.8; }
.music-footer a { color:var(--music-ink); text-decoration:none; border-bottom:1px solid var(--music-accent); }
.music-standalone .music-screen { padding:8px 0 0; }
.music-standalone .music-shell { width:100%; }
.music-standalone .music-kicker { display:none; }
.music-standalone .music-intro h1 { font-size:36px; }
.music-standalone .v4-music-layout { gap:30px; }
.music-standalone .music-now-cover { width:min(100%,320px); }
.music-dock { position:fixed; z-index:100; right:22px; bottom:62px; width:min(350px,calc(100vw - 32px)); display:flex; align-items:center; gap:8px; padding:8px; border:1px solid #16161630; border-radius:4px; background:#fafafa; color:#161616; font-family:V3Local,'Microsoft YaHei',sans-serif; box-shadow:0 6px 20px #16161612; }
.music-dock[hidden],.music-dock [hidden] { display:none!important; }
.music-dock button { border:0; color:inherit; font:inherit; cursor:pointer; }
.music-dock button:focus-visible,.music-dock a:focus-visible,.music-dock ol:focus-visible { outline:2px solid #00fdfd; outline-offset:3px; }
.music-dock-expand { display:flex; align-items:center; gap:9px; flex:1; min-width:0; padding:0; text-align:left; background:none; }
.music-dock-copy { min-width:0; flex:1; }
.music-dock-copy small { display:block; color:#727272; font:9px/1.6 Consolas,'Microsoft YaHei',sans-serif; }
.music-dock-copy strong { display:block; font-size:11px; font-weight:500; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.music-dock-cover { display:block; width:38px; height:38px; object-fit:cover; border-radius:1px; }
.music-dock-chevron { font:16px/1 Consolas,monospace; transition:transform .18s ease; }
.music-dock.is-expanded .music-dock-chevron { transform:rotate(180deg); }
.music-dock.is-playing .music-dock-copy small { color:#161616; }
.music-dock.is-playing .music-dock-copy small::before { content:''; display:inline-block; width:5px; height:5px; margin-right:5px; background:#00fdfd; }
.music-dock-controls { display:flex; align-items:center; gap:3px; }
.music-dock-controls button { width:27px; height:32px; padding:0; background:#ededed; font:15px/1 Consolas,monospace; }
.music-dock-controls [data-music-dock-toggle] { width:34px; background:#ffff00; font-size:19px; }
.music-dock-controls button:hover:not(:disabled) { background:#161616; color:#fff; }
.music-dock-controls button:disabled { opacity:.25; cursor:default; }
.music-transport { display:none!important; }
.music-dock-playlist { position:absolute; bottom:calc(100% + 10px); left:-1px; right:-1px; overflow:hidden; border:1px solid #16161635; border-top:3px solid #ffff00; border-radius:3px; background:#fafafa; box-shadow:0 8px 30px #16161620; animation:music-dock-enter .18s ease-out both; }
.music-dock-playlist header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 15px 13px; background:#161616; color:#fff; }
.music-dock-playlist header small { display:block; margin-bottom:5px; font:8px/1.2 Consolas,monospace; letter-spacing:1.5px; color:#bbb; }
.music-dock-playlist header strong { font-size:15px; }
.music-dock-playlist header i { display:inline-block; padding:2px 5px; margin-left:5px; background:#ffff00; color:#161616; font:10px/1.2 Consolas,monospace; }
.music-dock-playlist header a { color:#fff; font-size:10px; white-space:nowrap; text-decoration:none; }
.music-dock-playlist ol { max-height:min(45svh,360px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; margin:0; padding:5px 9px; list-style:none; }
.music-dock-playlist li + li { border-top:1px solid #16161610; }
.music-dock-playlist li button { display:grid; grid-template-columns:22px minmax(0,1fr) 16px; align-items:center; gap:7px; width:100%; padding:11px 7px; text-align:left; background:none; }
.music-dock-playlist li button:hover { background:#ededed; }
.music-dock-playlist li button[aria-pressed=true] { background:#ffff0029; }
.music-dock-track-number { font:10px/1 Consolas,monospace; color:#888; }
.music-dock-track-copy { min-width:0; }
.music-dock-track-copy strong,.music-dock-track-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.music-dock-track-copy strong { font-size:12px; font-weight:500; }
.music-dock-track-copy small { margin-top:4px; font-size:10px; color:#777; }
.music-dock-track-mark { font:16px/1 Consolas,monospace; }
@keyframes music-dock-enter { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
.music-view-controls { display:grid; gap:9px; max-width:340px; margin:12px auto 0; font:10px/1.5 Consolas,'Microsoft YaHei',sans-serif; color:var(--music-muted); }
.music-seek { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; }
.music-control-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.music-view-controls input { min-width:0; width:100%; height:16px; margin:0; accent-color:#ffff00; cursor:pointer; }
.music-view-controls input:focus-visible { outline:2px solid #242824; outline-offset:3px; }
.music-volume { display:flex; justify-content:flex-end; align-items:center; gap:10px; }
.music-volume input { width:76px; }
@media(prefers-reduced-motion:reduce) { .music-section *,.music-dock * { transition:none!important; } .music-dock-playlist { animation:none; } .music-meter i { transform:scaleY(.2)!important; } }
@media(max-width:1000px) { .music-panel { padding:0; gap:30px 50px; } .music-shell { width:calc(100% - 64px); } }
@media(max-width:700px) { .music-shell { width:calc(100% - 40px); } .music-panel { grid-template-columns:1fr; } .music-player,.music-lyrics { grid-column:1; grid-row:auto; } .music-lyrics-scroll { height:350px; } .music-tracks { grid-template-columns:1fr; } .music-dock { right:16px; } .music-footer { flex-direction:column; gap:10px; } }
