body.has-listening-room { overflow:hidden; height:100svh; }
body.has-listening-room .opening { height:100svh; min-height:100svh; }
.landing-audio { position:relative; z-index:4; width:min(1120px,calc(100% - 64px)); margin:22px auto 54px; color:#c6d1bd; font-family:var(--mono),"Microsoft YaHei",sans-serif; animation:listening-reveal 1.2s ease both; }
.landing-audio[hidden] { display:none!important; }
.landing-spectrum { position:relative; height:124px; padding-top:32px; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.listening-label { position:absolute; top:3px; left:0; right:0; text-align:center; color:#5d6f4e; font-size:10px; letter-spacing:.3em; }
#landing-spectrum { display:block; width:100%; height:88px; }
.landing-player { display:grid; grid-template-columns:minmax(190px,1fr) minmax(260px,1.55fr) minmax(145px,1fr); align-items:center; gap:28px; padding:22px 26px; border:1px solid #9db76a25; border-radius:18px; background:linear-gradient(115deg,#17220e9c,#060a07d9 45%,#101a123d); box-shadow:0 -15px 75px #8ba53e06,inset 0 1px #e5ffc407; }
.landing-track { display:flex; align-items:center; gap:16px; min-width:0; }
.landing-disc { flex:0 0 58px; height:58px; border-radius:50%; display:grid; place-items:center; border:1px solid #8caa4b65; background:repeating-radial-gradient(circle,#172617 0 1px,#0b130c 2px 3px); box-shadow:0 0 24px #b2df4410; }
.landing-disc i { display:block; width:19px; height:19px; border-radius:50%; border:7px solid #cefa68; background:#22331b; box-shadow:0 0 16px #cefa6833; }
.landing-track-index { font-size:9px; color:#71845b; letter-spacing:.15em; }
.landing-track h3 { margin:7px 0 6px; font-size:17px; font-weight:400; letter-spacing:.16em; color:#d1e1ba; }
.landing-track-credit { font-size:10px; color:#64735b; }
.landing-buttons { display:flex; justify-content:center; align-items:center; gap:27px; margin-bottom:13px; }
.landing-player button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; background:transparent; color:#a2b388; cursor:pointer; font-size:20px; }
.landing-player button:disabled { opacity:.23; cursor:default; }
.landing-player button:hover:not(:disabled) { color:#cefa68; }
.landing-player .landing-play { width:46px; height:46px; background:#cefa68; color:#17230d; border-radius:50%; box-shadow:0 0 26px #cefa681b; }
.landing-player .landing-play:hover { color:#17230d!important; background:#ddff99; }
.landing-player svg { width:22px; height:22px; fill:currentColor; }
#landing-mute svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.landing-timeline { display:flex; align-items:center; gap:10px; color:#66775b; font-size:10px; font-variant-numeric:tabular-nums; }
.landing-timeline span { min-width:34px; }
.landing-player input[type=range] { --fill:0%; appearance:none; height:3px; min-width:0; margin:0; cursor:pointer; border-radius:10px; background:linear-gradient(to right,#b1d860 var(--fill),#5361463d var(--fill)); }
#landing-seek { width:100%; }
.landing-player input[type=range]::-webkit-slider-thumb { appearance:none; width:9px; height:9px; border-radius:50%; background:#d7f1a7; box-shadow:0 0 8px #cefa6833; }
.landing-player input[type=range]::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:#d7f1a7; }
.landing-player button:focus-visible,.landing-player input:focus-visible { outline:1px solid #cefa68; outline-offset:6px; }
.landing-extras { display:flex; align-items:center; justify-content:flex-end; gap:10px; }
#landing-repeat { font-size:25px; }
#landing-repeat[aria-pressed=true] { color:#cefa68; }
#landing-volume { width:60px; }
.landing-quality { border:1px solid #71835455; border-radius:4px; padding:4px 6px; color:#81986b; font-size:9px; letter-spacing:.1em; }
.landing-audio-status { margin:16px 0 0; min-height:16px; text-align:center; font-size:10px; color:#536247; letter-spacing:.12em; }
@keyframes listening-reveal { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:780px) { .landing-audio { width:calc(100% - 32px); margin-top:12px; } .landing-player { grid-template-columns:1fr auto; gap:20px; padding:20px; } .landing-transport { grid-column:1/-1; grid-row:2; } .landing-extras { gap:5px; } #landing-volume { width:44px; } .landing-quality { display:none; } .landing-track-credit { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .landing-audio { animation:none; } }

/* Keep the entire listening scene inside the viewport. */
.landing-audio { position:fixed; left:50%; bottom:14px; transform:translateX(-50%); width:min(1120px,calc(100% - 48px)); margin:0; animation:listening-reveal 1.2s ease both; }
.landing-spectrum { height:64px; padding-top:16px; }
.listening-label { font-size:8px; top:0; letter-spacing:.23em; }
#landing-spectrum { height:48px; }
.landing-player { padding:14px 20px; gap:20px; border-radius:16px; }
.landing-buttons { margin-bottom:9px; gap:23px; }
.landing-player .landing-play { width:40px; height:40px; }
.landing-disc { flex-basis:48px; height:48px; }
.landing-audio-status { margin-top:7px; min-height:12px; font-size:9px; }
.opening.bamboo-finished .bamboo-announcement { top:auto; bottom:clamp(188px,27svh,290px); }
.bamboo-announcement p { margin-top:16px; }
.landing-queue { position:absolute; right:0; bottom:calc(100% - 52px); width:min(360px,100%); max-height:min(300px,42svh); overflow:auto; padding:18px; border:1px solid #9db76a40; border-radius:14px; background:#081009f5; box-shadow:0 12px 48px #000b; backdrop-filter:blur(18px); }
.landing-queue[hidden] { display:none; }
.landing-queue-heading { display:flex; justify-content:space-between; color:#b8c99c; font-size:12px; padding-bottom:13px; border-bottom:1px solid #9db76a22; }
.landing-queue-heading span { color:#70815e; }
.landing-queue-track { display:grid; grid-template-columns:24px 1fr auto; width:100%; gap:12px; align-items:center; border:0; border-radius:7px; background:transparent; color:#a8b59b; padding:13px 8px; text-align:left; cursor:pointer; font-size:12px; }
.landing-queue-track span:last-child { font-size:10px; color:#71845b; }
.landing-queue-track:hover,.landing-queue-track[aria-current=true] { background:#cefa680c; color:#cefa68; }
.landing-queue-track:focus-visible { outline:1px solid #cefa68; }
@keyframes listening-reveal { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@media(max-width:780px) {
 .landing-audio { width:calc(100% - 24px); bottom:10px; margin:0; }
 .landing-player { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:10px 14px; }
 .landing-track { gap:10px; }.landing-track h3 { font-size:14px; margin:4px 0; }
 .landing-track-credit { display:none; }.landing-track-index { font-size:8px; }
 .landing-disc { flex-basis:34px; height:34px; }.landing-disc i { width:15px; height:15px; border-width:5px; }
 .landing-transport { grid-column:1/-1;grid-row:2;display:flex;align-items:center;gap:12px; }
 .landing-buttons { margin:0;gap:8px; }.landing-player .landing-play { width:32px;height:32px; }
 .landing-timeline { flex:1;gap:6px; }.landing-spectrum { height:46px;padding-top:12px; }#landing-spectrum {height:34px;}
 #landing-volume {display:none;}.landing-extras {gap:4px;}
 .opening.bamboo-finished .bamboo-announcement {bottom:205px;}
 .bamboo-announcement h2 {font-size:26px;}.bamboo-announcement p {margin-top:12px;}
}
@media(max-height:650px) {
 .opening[data-phase=complete] .final-mark {top:34%;}
 .wordmark {font-size:clamp(48px,10vw,100px);}
 .tagline {margin-top:12px;}.enter-studio {margin-top:18px;padding:9px 14px;}
 .opening.bamboo-finished .bamboo-announcement {bottom:175px;}
 .bamboo-announcement h2 {font-size:24px;}.bamboo-announcement p {margin-top:8px;}
 .landing-spectrum {height:36px;padding-top:10px;}#landing-spectrum {height:26px;}
 .landing-audio-status {display:none;}
}

.landing-story[hidden] {display:none;}
.landing-story {position:absolute;left:50%;bottom:calc(100% - 48px);transform:translateX(-50%);width:min(580px,100%);max-height:min(530px,62svh);border:1px solid #a2bb6a35;border-radius:16px;background:linear-gradient(145deg,#101c11f5,#050a07f5);box-shadow:0 18px 80px #000b;backdrop-filter:blur(22px);overflow:hidden;}
.landing-story header {display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid #a2bb6a20;}
.landing-story-label {font-size:9px;letter-spacing:.24em;color:#72845e;}
.landing-story h3 {margin:9px 0 0;font-size:15px;font-weight:400;color:#cefa68;letter-spacing:.08em;}
#landing-story-close {width:32px;height:32px;border:1px solid #9db76a30;border-radius:50%;color:#a8b59b;background:transparent;cursor:pointer;font-size:23px;}
.landing-story-lines {max-height:min(400px,calc(62svh - 100px));overflow-y:auto;padding:20px 28px 30px;text-align:center;scrollbar-width:thin;scrollbar-color:#6e8646 #0a110a;}
.landing-story-lines p {margin:0;font-size:14px;line-height:2.15;letter-spacing:.08em;color:#bbc8ad;}
#landing-story-toggle {font-size:14px;border:1px solid #9db76a45;border-radius:5px;width:25px;height:25px;}
#landing-story-toggle[aria-expanded=true] {color:#cefa68;border-color:#cefa6890;background:#cefa6810;}
.landing-story button:focus-visible,.landing-story-lines:focus-visible {outline:1px solid #cefa68;outline-offset:-3px;}
@media(max-width:780px) {.landing-story {bottom:calc(100% - 32px);}.landing-story header {padding:14px 16px;}.landing-story h3 {font-size:13px;}.landing-story-lines {padding:16px 12px 24px;}.landing-story-lines p {font-size:12px;letter-spacing:.03em;}}

/* Story belongs to the scene, rather than a floating player card. */
.landing-story {position:absolute;z-index:5;left:clamp(24px,4vw,80px);top:50%;bottom:auto;transform:translateY(-55%);width:clamp(240px,27vw,390px);max-height:calc(100svh - 210px);border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;overflow:visible;animation:story-ink-in .9s ease both;}
.landing-story header {position:relative;justify-content:center;padding:0 20px 18px;border:0;text-align:center;}
.landing-story-label {font-size:9px;color:#82916c;letter-spacing:.3em;}
.landing-story h3 {font-size:14px;line-height:1.7;text-shadow:0 2px 12px #000,0 0 24px #000;}
#landing-story-close {position:absolute;right:0;top:-6px;width:26px;height:26px;border:0;background:transparent;color:#7b8c69;font-size:21px;}
.landing-story-lines {max-height:calc(100svh - 310px);padding:8px 4px 20px;scrollbar-width:thin;mask-image:linear-gradient(transparent,#000 4%,#000 94%,transparent);}
.landing-story-lines p {font-size:clamp(12px,1.04vw,15px);line-height:2.25;letter-spacing:.08em;color:#c4cfb8;text-shadow:0 2px 10px #000,0 0 24px #000,0 0 40px #000;}
@keyframes story-ink-in {from{opacity:0;filter:blur(5px);}to{opacity:1;filter:blur(0);}}
@media(max-width:1050px) {
 .landing-story {left:18px;width:235px;}
 .has-story .final-mark {left:66%;width:64vw;}
 .has-story .wordmark {font-size:clamp(48px,8.8vw,110px);}
}
@media(max-width:650px) {
 .landing-story {top:43%;left:50%;transform:translate(-50%,-25%);width:calc(100% - 48px);max-height:32svh;}
 .landing-story header {padding-bottom:5px;}.landing-story-label {display:none;}.landing-story h3 {font-size:12px;margin:0;}
 .landing-story-lines {max-height:25svh;padding:8px 2px 16px;}.landing-story-lines p {font-size:12px;line-height:1.95;}
 .has-story .final-mark {left:50%;top:24%;width:90vw;}
 .has-story .wordmark {font-size:clamp(44px,12vw,78px);}
 .has-story .tagline {margin-top:10px;font-size:10px;}.has-story .enter-studio {margin-top:15px;padding:8px 12px;font-size:12px;}
 .has-story .message-stage {top:18%;}
 .has-story .bamboo-announcement h2 {font-size:21px;}.has-story .bamboo-announcement p {margin-top:8px;font-size:10px;}
}
@media(prefers-reduced-motion:reduce) {.landing-story {animation:none;}}

/* Lower the story into the empty area below the wordmark. */
@media(min-width:651px) {
 .landing-story {top:auto;bottom:180px;transform:none;width:clamp(240px,27vw,390px);max-height:33svh;}
 .landing-story header {padding-bottom:10px;}
 .landing-story-lines {max-height:calc(33svh - 65px);padding-top:4px;}
 .landing-story-lines p {font-size:clamp(12px,1vw,14px);line-height:1.95;}
}
@media(min-width:651px) and (max-height:650px) {
 .landing-story {bottom:150px;max-height:29svh;}
 .landing-story-lines {max-height:calc(29svh - 55px);}
}

@media(min-width:651px) {
 .landing-story {left:auto;right:clamp(24px,4vw,80px);}
}
@media(min-width:651px) and (max-width:1050px) {
 .has-story .final-mark {left:50%;width:min(90vw,940px);}
}