/* HUOHUO — Into the Ocean. Atmosphere and motion, independent of page layout. */
.ocean-theme {
 color-scheme: dark; --bg: #061023; --surface: #101e37; --surface-soft: #172845;
 --paper: #e7ecf5; --muted: #a1adc1; --faint: #818fa9; --line: #a9bede26;
 --accent: #a0bbe2; --accent-soft: #96add2; --seafoam: #a2bcde;
 color: var(--paper); background: #061023; --light-x: 60%; --light-y: 30%;
}
.ocean-theme ::selection { color: #081832; background: #a3bfe7; }
.ocean-theme .site-shell { z-index: 1; background: transparent; }
.ocean-ambience { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 70% 0,#102449 0,transparent 55%),linear-gradient(#071228,#061023 60%,#08152c); }
.ambient-glow { position: absolute; width: min(70vw,1000px); aspect-ratio: 1; border-radius: 50%; opacity: .3; filter: blur(70px); will-change: transform; }
.ambient-glow-one { background: radial-gradient(ellipse,#3e6ebe55,transparent 66%); top: -35%; right: -15%; animation: deep-current 19s ease-in-out infinite alternate; }
.ambient-glow-two { background: radial-gradient(ellipse,#436ba440,transparent 67%); bottom: -25%; left: -20%; animation: deep-current 24s ease-in-out -7s infinite alternate-reverse; }
.ambient-grain { position: absolute; inset: 0; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.55' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ocean-atmosphere { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: .7; }
@keyframes deep-current { from { transform: translate3d(-5%,0,0) scale(.95); } to { transform: translate3d(14%,17%,0) scale(1.3); } }
/* Clear navigation floats above the sea. */
.ocean-theme .topbar { background: #061023df; border-bottom-color: #c1d3ee12; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.ocean-theme .brand-mark { color: #a3bde4; filter: drop-shadow(0 0 8px #87a8db4a); }
.ocean-theme .brand-name { color: #e4eaf4; }
.ocean-theme .brand-caption { color: #a0afca; }
.ocean-theme .brand-divider { color: #77869f; }
.ocean-theme .main-nav a { color: #a4afc4; font-size: 13px; }
.ocean-theme .main-nav a:hover,.ocean-theme .main-nav a[aria-current] { color: #b8cff0; }
.ocean-theme .main-nav a[aria-current]::after { background: #a9c3e8; box-shadow: 0 0 10px #a9c3e877; }
.ocean-theme .icon-button { color: #c5d1e4; border-color: #b2c4e129; }
.ocean-theme .icon-button:hover { background: #a0bbe318; border-color: #b2c4e166; }
.ocean-theme .top-actions > .icon-button { border-color: transparent; }
.ocean-theme :is(.button-primary,.header-cta,.submit-button,.full-button,.fan-primary) { background: #b3c9e7; color: #10203b; border-color: #c9dbf4; box-shadow: 0 0 24px #a0bde614; transition: transform .25s,box-shadow .25s,background .25s; }
.ocean-theme :is(.button-primary,.header-cta,.submit-button,.full-button,.fan-primary):hover { background: #d3e2f6; box-shadow: 0 7px 32px #8bb0e433; transform: translateY(-2px); }
.ocean-theme .secondary-button { color: #b8c6dd; border-color: #a4bbde36; background: #9cafcb08; }
.ocean-theme .secondary-button:hover { background: #88a6d421; border-color: #a4bbde87; transform: translateY(-1px); }
/* A full-width portrait, light rays and slow, independent planes. */
.ocean-theme .hero { isolation: isolate; position: relative; display: flex; align-items: center; max-width: none; height: min(780px,calc(100svh - 80px)); min-height: 660px; margin: 0; padding: 52px max(var(--page-gutter),calc((100% - 1200px)/2)); overflow: hidden; background: #071b2a; }
.ocean-theme .hero::after { content: ""; position: absolute; z-index: 3; bottom: -1px; left: 0; right: 0; height: 160px; background: linear-gradient(transparent,#061023); pointer-events: none; }
.ocean-theme .hero-stage { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 76%; height: 100%; border-radius: 0; overflow: hidden; background: #0d1e40; -webkit-mask-image: linear-gradient(90deg,transparent,#000 22%); mask-image: linear-gradient(90deg,transparent,#000 22%); }
.ocean-theme .hero-stage > img { object-position: 60% 44%; width: 100%; height: 100%; object-fit: cover; transform: translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0) scale(1.07); transition: none; opacity: .91; filter: saturate(.92); will-change: transform; }
.ocean-theme .stage-wash { z-index: 1; background: linear-gradient(90deg,#061b2ced 0,#08163088 23%,transparent 63%),linear-gradient(0deg,#061023,transparent 40%),linear-gradient(180deg,#071b2a40,transparent 25%); }
.stage-light { position: absolute; z-index: 2; top: -30%; width: 18%; height: 155%; opacity: .38; transform-origin: center top; background: linear-gradient(90deg,transparent,#afc7ea18,transparent); filter: blur(16px); mix-blend-mode: screen; pointer-events: none; animation: sea-light 13s ease-in-out infinite alternate; }
.stage-light-one { left: 25%; transform: rotate(27deg); }
.stage-light-two { left: 70%; width: 10%; opacity: .2; animation-delay: -8s; animation-duration: 18s; }
@keyframes sea-light { from { transform: rotate(16deg) translateX(-60px); opacity: .2; } to { transform: rotate(33deg) translateX(120px); opacity: .8; } }
.hero-aura { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at var(--light-x) var(--light-y),#749ddb27,transparent 50%); opacity: .8; }
.hero-orbit { position: absolute; z-index: 2; width: 700px; height: 700px; border: 1px solid #9dbfeb12; border-radius: 50%; left: -310px; top: 20px; pointer-events: none; animation: orbit-turn 65s linear infinite; }
.hero-orbit::before { content: ""; position: absolute; top: 17%; left: 12%; width: 5px; height: 5px; border-radius: 50%; background: #9dbfeb; box-shadow: 0 0 18px 3px #9dbfeb55; }
.hero-orbit-two { width: 820px; height: 820px; left: -370px; top: -40px; animation-duration: 85s; animation-direction: reverse; border-color: #9dbfeb0b; }
.hero-orbit-two::before { opacity: .6; top: 70%; left: 6%; }
@keyframes orbit-turn { to { transform: rotate(360deg); } }
.ocean-theme .hero-copy { position: relative; z-index: 4; padding: 0 0 30px; width: 100%; }
.ocean-theme .eyebrow { font-size: 10px; color: #adbfda; letter-spacing: .17em; gap: 10px; }
.ocean-theme .eyebrow-rule { display: none; }
.eyebrow-star { color: #bad2f2; text-shadow: 0 0 15px #9dbfebb0; font-size: 17px; animation: star-breathe 4s ease-in-out infinite; }
.ocean-theme .hero h1 { max-width: 720px; margin: 30px 0 23px; font-size: clamp(48px,5.5vw,78px); line-height: 1.34; letter-spacing: -.025em; color: #e8edf4; text-shadow: 0 5px 40px #04111bbb; }
.ocean-theme .hero-title-accent { color: #a9c7ef; background: linear-gradient(105deg,#a8bfdf,#e1f4d6 40%,#83a3d4 65%,#b4cbea); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: title-light 9s ease-in-out infinite alternate; }
@keyframes title-light { to { background-position: 100% center; } }
.ocean-theme .hero-description { font-size: 14px; color: #b3bfd3; line-height: 2.15; text-shadow: 0 2px 20px #041d2f; }
.ocean-theme .hero-actions { margin-top: 31px; gap: 28px; }
.ocean-theme .hero-actions .button-primary { border-radius: 5px; min-height: 50px; padding-inline: 23px; }
.ocean-theme .listen-button { color: #d2dbe8; }
.ocean-theme .listen-icon { border-color: #afbfd859; background: #0b1b3966; }
.ocean-theme .listen-button:hover .listen-icon { background: #8aa8d626; border-color: #aac0df; box-shadow: 0 0 22px #86a5d135; }
.ocean-theme .hero-facts { margin-top: 36px; gap: 30px; }
.ocean-theme .hero-facts strong { color: #e0e5ee; font-size: 23px; font-weight: 400; }
.ocean-theme .hero-facts span:not(.fact-divider) { color: #9fadc5; }
.ocean-theme .fact-divider { background: #b2c5e22a; }
.ocean-theme .hero-scroll { color: #a1b2cf; margin-top: 32px; }
.ocean-theme .hero-scroll svg { animation: drift-down 2.8s ease-in-out infinite; }
@keyframes drift-down { 50% { transform: translateY(5px); } }
.ocean-theme .stage-edition { z-index: 3; top: auto; bottom: 130px; left: auto; right: 8%; color: #acbedd; font-size: 9px; }
.ocean-theme .stage-bottom { z-index: 3; bottom: 67px; left: auto; right: 8%; text-align: right; color: #d5deed; gap: 24px; }
.ocean-theme .stage-bottom > div > span { display: none; }
.ocean-theme .stage-bottom strong { font-size: 22px; }
.ocean-theme .stage-signature { font-size: 46px; color: #bfcce4; }
.ocean-theme.motion-ready .hero-copy > * { animation: surface-rise 1s both; }
.ocean-theme.motion-ready .hero-copy > :nth-child(2) { animation-delay: .12s; }
.ocean-theme.motion-ready .hero-copy > :nth-child(3) { animation-delay: .24s; }
.ocean-theme.motion-ready .hero-copy > :nth-child(4) { animation-delay: .36s; }
.ocean-theme.motion-ready .hero-copy > :nth-child(5) { animation-delay: .45s; }
.ocean-theme.motion-ready .hero-copy > :nth-child(6) { animation-delay: .55s; }
@keyframes surface-rise { from { opacity: 0; transform: translateY(24px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
.tide-divider { position: relative; display: flex; justify-content: center; align-items: center; gap: 28px; min-height: 106px; max-width: 1200px; margin: 0 auto; color: #7d93b6; font: 9px/1.5 var(--font-sans); letter-spacing: .18em; }
.tide-star { color: #a1bbde; font-size: 16px; animation: star-breathe 5s ease-in-out infinite; }
.tide-star:nth-of-type(4) { animation-delay: -2s; }
.tide-line { flex: 1; height: 1px; background: linear-gradient(90deg,transparent,#a5bde04d); }
.tide-line:last-child { transform: rotate(180deg); }
@keyframes star-breathe { 50% { opacity: .3; filter: blur(.5px); } }
/* Music as a living object, powered by the existing audio player. */
.ocean-theme .music-section { margin-bottom: 92px; }
.ocean-theme .music-inner { position: relative; overflow: hidden; padding: 28px; grid-template-columns: 172px minmax(0,1fr) minmax(250px,.9fr); gap: 38px; border-color: #9db5da2e; border-radius: 12px; background: linear-gradient(120deg,#152745c4,#0b1831b0 70%); box-shadow: inset 0 1px #c5daf60b,0 20px 60px #0308111f; }
.ocean-theme .music-inner::before { content: ""; position: absolute; width: 500px; height: 220px; top: -140px; left: 15%; background: radial-gradient(ellipse,#a4c3ea1f,transparent 65%); animation: music-glow 11s ease-in-out infinite alternate; pointer-events: none; }
@keyframes music-glow { to { transform: translateX(50%); opacity: .4; } }
.ocean-theme .music-art { border-radius: 50%; background: repeating-radial-gradient(circle at center,#0b1a34 0 2px,#21304b 3px,#0d1b34 4px 7px); border: 1px solid #99b0d24d; align-items: center; justify-content: center; padding: 14px; box-shadow: 0 10px 25px #03091440; overflow: visible; }
.record-core { position: absolute; inset: 27%; border-radius: 50%; background: radial-gradient(circle at 25% 25%,#a3b9d5,#405372 72%); border: 1px solid #a5bcdb55; box-shadow: 0 0 20px #a4bee318; }
.record-orbit { position: absolute; inset: -8px; border: 1px solid #bdd3ee2e; border-left-color: #c1d5ee7a; border-bottom-color: transparent; border-radius: 50%; animation: orbit-turn 18s linear infinite; }
.record-orbit::before { content: ""; position: absolute; left: 13%; top: 12%; width: 4px; height: 4px; border-radius: 50%; background: #c1d5ee; box-shadow: 0 0 13px #acc9eca0; }
.ocean-theme .cover-title { font-size: 23px; letter-spacing: .14em; color: #eef7e8; text-shadow: 0 1px 7px #16253c; margin-left: 4px; }
.ocean-theme .cover-title span { display: none; }
.ocean-theme .music-art-label,.ocean-theme .cover-index,.ocean-theme .cover-waves { display: none; }
.ocean-theme .music-copy .section-kicker { color: #a2b4ce; }
.ocean-theme .music-copy h2 { color: #e1e8f0; font-size: 35px; }
.ocean-theme .music-copy h2 > span { color: #9ca8ba; font-size: 12px; }
.ocean-theme .music-description { color: #a1adc1; font-size: 13px; }
.ocean-theme .track-topline { color: #adb8c8; font-size: 11px; }
.ocean-theme .track-play { color: #172741; background: #bacee9; box-shadow: 0 0 22px #a1bbdf1c; }
.ocean-theme .track-play:hover { background: #dcf7e7; box-shadow: 0 0 30px #a1bbdf40; }
.ocean-theme .track-seek { accent-color: #a8c0e0; }
.ocean-theme .track-time { color: #9facc1; font-size: 10px; }
.ocean-theme .track-status { color: #98a6bf; font-size: 11px; margin-top: 4px; }
.ocean-theme .sound-bars i { background: #9fbadf; }
.music-spectrum { display: block; width: calc(100% - 62px); height: 28px; margin: 8px 0 3px 62px; opacity: .7; }
.ocean-theme.is-playing .record-orbit { animation-duration: 7s; box-shadow: 0 0 35px #88aad921; }
.ocean-theme.is-playing .music-inner { border-color: #a3bfe55c; }
/* Quiet, legible glass surfaces across the full site. */
.ocean-theme .section-kicker,.ocean-theme .section-index { color: #8fa6c8; }
.ocean-theme .section-heading h2 { color: #e0e6f0; }
.ocean-theme .section-heading p { color: #9dabc3; }
.ocean-theme .small-search { background: #101e3880; border-color: #8aa4cb3b; color: #9badc8; }
.ocean-theme .small-search:focus-within { border-color: #8cacda; box-shadow: 0 0 0 3px #8cacda11,0 0 25px #8cacda0c; }
.ocean-theme .small-search input { color: #dce4f0; font-size: 14px; }
.ocean-theme input::placeholder,.ocean-theme textarea::placeholder { color: #8695b0; }
.ocean-theme .search-clear { color: #96a6c1; }
.ocean-theme .search-clear:hover { background: #91aed71a; }
.ocean-theme .filter-tabs { border-color: #9cb2cf27; }
.ocean-theme .filter-button { color: #a0acc2; font-size: 13px; }
.ocean-theme .filter-button:hover,.ocean-theme .filter-button.active { color: #b9ceeb; }
.ocean-theme .filter-button.active { border-color: #acc4e5; text-shadow: 0 0 20px #9dbfeb3d; }
.ocean-theme .mood-picker > summary { color: #a2aec3; }
.ocean-theme .mood-picker summary em { background: #172741; color: #b0c0d7; }
.ocean-theme .mood-bubble { background: #0e1c35; border-color: #93a8c630; color: #aab6c9; }
.ocean-theme .mood-bubble.active { background: #24334c; border-color: #8ba6cb88; color: #d6edda; }
.ocean-theme .mood-bubble small { color: #909daf; }
.ocean-theme .availability-toolbar label,.ocean-theme #songResults { color: #96a5bf; font-size: 11px; }
.ocean-theme .availability-toolbar select { color: #c1cde0; background-color: #101e36; border-color: #8ea5c740; font-size: 12px; }
.ocean-theme #resetSongFilters { color: #a9bdd9; font-size: 11px; }
.ocean-theme .song-list-head { background: #101f3a; color: #95a4be; }
.ocean-theme .song-row { border-color: #c0d2ee13; border-radius: 6px; padding-block: 18px; transition: background .2s,transform .2s,box-shadow .2s; }
.ocean-theme .song-row:hover,.ocean-theme .song-row:focus-within { background: #17274480; box-shadow: inset 2px 0 #a2b9da; transform: translateX(3px); }
.ocean-theme .song-title-line h3 { color: #e0e6ee; font-size: 15px; }
.ocean-theme .song-main p { color: #98a6c0; font-size: 12px; }
.ocean-theme .song-art { background: #1c2b46; color: #b3c2d7; border: 1px solid #beccdf16; }
.ocean-theme .art-lime { background: #243040; color: #c3d8b7; }
.ocean-theme .art-sky { background: #1d354b; color: #b4cadf; }
.ocean-theme .art-yellow { background: #393e32; color: #dfd4b1; }
.ocean-theme .availability-badge { color: #e5cc9f; background: #cfb97717; }
.ocean-theme .availability-badge[data-tone=available] { color: #a2bcdb; background: #9bd9b015; }
.ocean-theme .availability-badge[data-tone=paused],.ocean-theme .availability-badge[data-tone=closed] { color: #b5c0d6; background: #afc2dd16; }
.ocean-theme .availability-badge[data-tone=special] { color: #c9b9e2; background: #c2a9dd18; }
.ocean-theme .song-status-cell .song-tag { color: #92a0b8; }
.ocean-theme .song-number { color: #73839f; }
.ocean-theme .song-row .secondary-button { color: #b0c1d9; border-color: #a0b6d536; }
.ocean-theme .song-page-summary,.ocean-theme #songPageSummary { color: #91a1bd; }
.ocean-theme .empty-state { background: #0c1b35; border-color: #8ba1c133; color: #b9c5d7; }
.ocean-theme .empty-state h3 { color: #d0d9e6; }.ocean-theme .empty-state p { color: #9eabbf; }
.ocean-theme .voice-band { background: #1d2c4544; border-color: #a0b8d729; }
.ocean-theme .voice-symbol { background: #a2bad91a; color: #a4bfe2; box-shadow: 0 0 24px #89abd60a; }
.ocean-theme .voice-band strong { color: #bbcce2; }
.ocean-theme .voice-band[data-mode=careful] strong { color: #e4cca0; }
.ocean-theme .voice-band[data-mode=closed] strong,.ocean-theme .voice-band[data-mode=unconfirmed] strong { color: #b7c3d9; }
.ocean-theme #voiceDate { color: #94a3bb; }
.ocean-theme .request-guide { background: linear-gradient(155deg,#162540ba,#0c1930ba); border-color: #b9cde62b; box-shadow: inset 0 1px #e2ecfa0a; }
.ocean-theme .aside-head h2 { color: #d7e9de; }
.ocean-theme .aside-head > svg,.ocean-theme .request-privacy { color: #a2b1c5; }
.ocean-theme .request-steps li > span { background: #b3cae614; color: #a6cdb4; border-color: #aec2db2e; }
.ocean-theme .request-steps strong { color: #c6d1de; }.ocean-theme .request-steps p,.ocean-theme .qualification-note { color: #97a3b4; }
.ocean-theme .request-guide .full-button { background: #b3c5dd; color: #14233b; border-color: #c5d7ed; }
.ocean-theme .history-disclosure { border-color: #bed0e824; }
.ocean-theme .history-disclosure > summary { color: #b7c5d7; }
.ocean-theme .history-disclosure > summary > span:last-child { color: #91a0b5; }
/* Events */
.ocean-theme .schedule-section { background: linear-gradient(125deg,#101f397a,#17284240); border-color: #b5c7dd1a; }
.ocean-theme .schedule-item { background: #0e1c348a; border-color: #b8c9de2a; border-radius: 10px; transition: transform .35s,border-color .35s,box-shadow .35s; }
.ocean-theme .schedule-item:hover { transform: translateY(-6px); border-color: #b8c9de70; box-shadow: 0 15px 40px #040a163b; }
.ocean-theme .schedule-date strong { color: #d9eadc; }
.ocean-theme .schedule-date > span,.ocean-theme .schedule-status,.ocean-theme .schedule-info p { color: #9caabb; }
.ocean-theme .schedule-info h3 { color: #e0eadd; }
.ocean-theme .schedule-line { background: linear-gradient(90deg,#a6bdd945,transparent); }
.ocean-theme .schedule-item > svg { color: #a1b2c7; }
.ocean-theme .date-state { color: #b9dec0; background: #95caa11c; }
.ocean-theme .schedule-live { background: linear-gradient(135deg,#283d5a5e,#14243d); border-color: #a2dfbb45; }
.ocean-theme .schedule-live::after { content: ""; position: absolute; top: 28px; right: 26px; width: 20px; height: 20px; border: 1px solid #a9c4e5; border-radius: 50%; opacity: .4; animation: signal-ring 3.5s ease-out infinite; pointer-events: none; }
@keyframes signal-ring { 0% { transform: scale(.7); opacity: .45; } 100% { transform: scale(2.4); opacity: 0; } }
.ocean-theme .schedule-item.is-past { background: #07132940; border-color: #a1b3c91c; }
.ocean-theme .is-past .date-state { color: #a7aeb8; background: #c6d4c615; }
/* Archive and community, sharing the same light. */
.ocean-theme .gallery-image-button { border: 1px solid #99b0d52e; box-shadow: 0 20px 80px #000e2426; }
.ocean-theme .gallery-image-button::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; left: -50%; background: linear-gradient(100deg,transparent,#dbe6f912,transparent); transform: skewX(-20deg); transition: left .9s; pointer-events: none; }
.ocean-theme .gallery-image-button:hover::after { left: 125%; }
.ocean-theme .gallery-carousel .gallery-item figcaption span { color: #889dc3; }
.ocean-theme .gallery-carousel .gallery-item figcaption strong { color: #dee4ef; }
.ocean-theme .gallery-carousel .gallery-item figcaption small { color: #9caac3; }
.ocean-theme .gallery-dates button[aria-current=true] { color: #b4c8e5; border-color: #a9c1e1; }
.ocean-theme .gallery-share { border-color: #b8c8de2b; }
.ocean-theme .gallery-share summary,.ocean-theme .gallery-share[open] summary { color: #a9b8d1; }
.ocean-theme .gallery-upload-fields label { color: #b2bccc; }
.ocean-theme .gallery-upload-fields input { color: #d3dbe8; background: #0b1933; border-color: #8096ba4d; }
.ocean-theme .my-gallery-row > span { color: #dfc397; }
.ocean-theme .my-gallery-row[data-status=approved] > span { color: #9ed3b3; }
.ocean-theme .community-section { background: radial-gradient(ellipse at 75% 20%,#313e5140,transparent 65%),linear-gradient(110deg,#121f3580,#0c1a34b3); border-color: #afd2b524; }
.ocean-theme .community-section .section-kicker { color: #b0d3af; }
.ocean-theme .community-section .section-heading h2 { color: #e0e8cf; }
.ocean-theme .community-section .section-heading p { color: #b2c1b5; }
.ocean-theme .wall-form { background: #12213a99; border-color: #b9d6b32b; }
.ocean-theme .wall-letterhead,.ocean-theme .wall-form > label { color: #c6ddc0; }
.ocean-theme .wall-form textarea { background: #101b2ddb; color: #d9e5d1; border-color: #aacda33d; }
.ocean-theme .wall-form textarea::placeholder { color: #919dae; }
.ocean-theme #wallLength,.ocean-theme .wall-privacy,.ocean-theme .wall-topline { color: #a6b2c1; }
.ocean-theme .note-colors input:checked + span { outline-color: #c7e0b5; }
.ocean-theme .wall-note { box-shadow: 0 12px 25px #050d1c60; }
.ocean-theme .wall-empty { color: #b3cdb9; background: #1e2d4538; border-color: #b4d4b038; }
.ocean-theme .wall-empty svg { color: #c0d6ae; }
.ocean-theme .profile-mark { color: #c4d0e0; background: #202f4777; border-color: #a8bedb29; }
.ocean-theme .profile-lead strong { color: #ccd5e3; }.ocean-theme .profile-lead p { color: #a0adc0; }
.ocean-theme .profile-copy p,.ocean-theme .profile-copy > span { color: #a3afc2; }
.ocean-theme .profile-facts span,.ocean-theme .profile-facts small { color: #919fb7; }
.ocean-theme .profile-facts { border-color: #aebfd533; }
.ocean-theme .footer { color: #919fb7; border-color: #abb8ca24; }
.ocean-theme .footer-name { color: #c3cedf; }
.ocean-theme .site-registration:hover { color: #cef0d6; }
/* Every interactive layer stays in the same palette. */
.ocean-theme .fan-session-gate { background: #07142c; color: #becadf; }
.ocean-theme .fan-unread-badge { color: #13233d; background: #b3c8e2; border-color: #07142c; }
.ocean-theme .fan-dialog,.ocean-theme .modal { color: #dce3ef; background: #0e1c35fa; border: 1px solid #9db1ce4d; box-shadow: 0 25px 90px #000b16a1,inset 0 1px #cddff70d; color-scheme: dark; }
.ocean-theme .fan-dialog::backdrop,.ocean-theme .modal-backdrop { background: #020c17b5; }
.ocean-theme .modal-header { border-color: #aabfdc30; }
.ocean-theme .modal-kicker,.ocean-theme .fan-dialog-heading p { color: #a0b3cf; }
.ocean-theme :is(.fan-dialog-toolbar,.fan-message-page,.account-caption,.account-legacy,.fan-quiet,.detail-track p,.detail-status p,.detail-disclaimer,.song-policy-note,.evidence-upload small,.consent,.record-top p,.record-top small,.record-timeline,.flow-pagination,.latest-event) { color: #a0aec6; }
.ocean-theme :is(.account-form,.account-legacy,.account-logout,.application-record,.record-timeline ol,.detail-status) { border-color: #a5b7cf33; }
.ocean-theme .account-form label,.ocean-theme .form-label { color: #b8c4d8; }
.ocean-theme .account-form input,.ocean-theme .form-label :is(input,select,textarea),.ocean-theme .resolution-form :is(input,select) { background-color: #08152d; color: #d6dfee; border-color: #7b90b15c; caret-color: #c2d4ee; }
.ocean-theme .fan-message { border-color: #889cb83d; background: #14223a; }
.ocean-theme .fan-message.unread { border-left-color: #b3c8e1; background: #21334d66; }
.ocean-theme .fan-message :is(h3,.message-body) { color: #c5d2e3; }
.ocean-theme .fan-message small { color: #9ba9bd; }
.ocean-theme .message-state,.ocean-theme .fan-message.unread .message-state { color: #b5d9c2; border-color: #a2c9af4a; }
.ocean-theme :is(.account-status,.scheduled-day,.request-receipt) { color: #ade0bd; }
.ocean-theme .fan-error,.ocean-theme .form-error { color: #f0b2aa; }
.ocean-theme .account-logout { color: #d9aca8; }
.ocean-theme .history-empty { color: #a8b5c8; background: #13203870; border-color: #a9d4b636; }
.ocean-theme .history-empty h3 { color: #c6e0cc; }.ocean-theme .history-empty > svg { color: #a9cfb2; }
.ocean-theme .load-tags span { color: #b9cbb6; background: #bed2ad0f; border-color: #b1d2b22a; }
.ocean-theme .evidence-upload input::file-selector-button { color: #c0d9ca; background: #243246; }
.ocean-theme .detail-index { color: #90a1bd; }
.ocean-theme .consent input { accent-color: #a6bcd8; }
.ocean-theme .search-bar { background: #091732; border-color: #9db3d257; }
.ocean-theme .search-bar:focus-within { outline-color: #9fb9dc; }
.ocean-theme .search-bar input { color: #e0e8f3; }
.ocean-theme .search-bar button { color: #b6cbe6; background: #243246; }
.ocean-theme .quick-search-result { color: #ccd6e5; border-color: #a2b5cf23; }
.ocean-theme .quick-search-result small,.ocean-theme .quick-search-empty,.ocean-theme .search-dialog-footer { color: #9da9bb; }
.ocean-theme .quick-search-result:hover,.ocean-theme .quick-search-result:focus-visible { background: #25344a4f; }
.ocean-theme .search-dialog-footer kbd { border-color: #9cb2cd3d; }
.ocean-theme .gallery-lightbox { background: #0b1933; }
.ocean-theme .lightbox-header,.ocean-theme .gallery-lightbox p { color: #a3afc4; }
.ocean-theme .fan-bgm-control,.ocean-theme .fan-bgm-panel { color: #d4dde9; background: #0d1d3aee; border-color: #9bb3d450; box-shadow: 0 5px 35px #050d1c70; }
.ocean-theme #fanBgmToggle { background: #b8cbe4; color: #202e43; }
.ocean-theme .mini-track span,.ocean-theme .fan-bgm-slider { color: #a2b1c5; }
.ocean-theme .mini-cover { background: #364459; color: #e0eac7; }
.ocean-theme .toast { color: #e0f1e7; background: #283850f5; border: 1px solid #aacdb636; }
/* Motion is optional, never a gate to the content. */
.atmosphere-toggle { position: fixed; z-index: 85; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 13px; border: 1px solid #abbed745; border-radius: 24px; background: #0c1c38c9; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #b3c1d5; font: 10px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; cursor: pointer; box-shadow: 0 6px 20px #040c1b33; }
.atmosphere-toggle svg { width: 15px; height: 15px; }
.atmosphere-toggle:hover { border-color: #b5c9e4; color: #e3f7e9; }
.motion-dot { width: 4px; height: 4px; border-radius: 50%; background: #adddbc; box-shadow: 0 0 9px #b5e9c480; }
.motion-paused .motion-dot { background: #808b9c; box-shadow: none; }
.ocean-theme .reveal-ready { opacity: 0; transform: translateY(30px); transition: opacity .9s,transform .9s; transition-delay: var(--reveal-delay,0ms); }
.ocean-theme .reveal-ready.is-visible { opacity: 1; transform: none; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .reveal-ready,.motion-paused .hero-copy > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.ocean-theme.page-away *, .ocean-theme.page-away *::before,.ocean-theme.page-away *::after { animation-play-state: paused !important; }
.modal-open .atmosphere-toggle,.notification-open .atmosphere-toggle,.fan-checking .atmosphere-toggle { visibility: hidden; }
/* Welcome into the same world. */
.fan-login-page.ocean-theme { background: #061023; color: #e0e5ee; }
.ocean-theme .login-visual { z-index: 1; background: #0c1b37; }
.ocean-theme .login-visual .login-portrait { transform: scale(1.035); animation: portrait-breathe 22s ease-in-out infinite alternate; }
@keyframes portrait-breathe { to { transform: scale(1.10) translateX(-1%); } }
.ocean-theme .login-visual .login-shade { z-index: 1; background: linear-gradient(0deg,#061023e6,transparent 80%),linear-gradient(90deg,transparent 75%,#071329a6); }
.ocean-theme .login-visual-caption { z-index: 3; color: #e6f0e8; }
.ocean-theme .login-visual-caption p { text-shadow: 0 4px 30px #07132ab5; }
.ocean-theme .login-content,.ocean-theme .login-brand,.ocean-theme .login-footer { position: relative; z-index: 3; }
.ocean-theme .login-brand svg { color: #a8bfe0; }
.ocean-theme .login-brand span { color: #a1b0c7; border-color: #a1b6d336; }
.ocean-theme .login-title p:first-child { color: #98adca; }
.ocean-theme .login-title p:last-child { color: #a7b3c5; }
.ocean-theme .fan-auth-tabs { border-color: #9bacc433; }
.ocean-theme .fan-auth-tabs button { color: #9ba9be; }
.ocean-theme .fan-auth-tabs button[aria-pressed=true] { color: #c2d4e9; border-color: #b0c6e1; }
.ocean-theme .fan-auth-form > p,.ocean-theme .fan-auth-note { color: #a1aebf; }
.ocean-theme .fan-auth-form label { color: #b4c2d4; }
.ocean-theme .fan-auth-form input { color: #e1e7ee; background: #0c1a33bb; border-color: #a6b9d245; caret-color: #c5e9d0; }
.ocean-theme .fan-auth-form input:focus { outline-color: #a0b6d1; }
.ocean-theme .fan-password-wrap button { color: #a2b3c9; }
.ocean-theme .login-footer,.ocean-theme .login-footer a { color: #a5b1bf; }
/* Responsive composition — no hover required. */
@media(max-width:1264px) { .tide-divider { margin-inline: 32px; } .ocean-theme .hero h1 { font-size: 66px; } }
@media(max-width:1100px) {
 .ocean-theme .hero { min-height: 650px; height: 710px; }
 .ocean-theme .hero h1 { font-size: 59px; }
 .ocean-theme .hero-stage { width: 84%; }
 .ocean-theme .music-inner { grid-template-columns: 132px minmax(0,1fr) minmax(210px,1fr); gap: 30px; }
 .ocean-theme .music-copy h2 > span { display: block; margin-left: 0; }
}
@media(max-width:960px) {
 .ocean-theme .main-nav { background: #091730f5; border-color: #9bb1d130; }
 .ocean-theme .main-nav a { border-color: #a4b9d82e; }
 .ocean-theme .main-nav a[aria-current] { background: #24344c57; }
 .ocean-theme .hero { height: 670px; min-height: 620px; }
 .ocean-theme .hero h1 { font-size: 55px; }
 .ocean-theme .hero-stage { width: 95%; }
 .ocean-theme .stage-wash { background: linear-gradient(90deg,#061b2cea,#061b2c8f 35%,#071c2b0d 80%),linear-gradient(0deg,#061023,transparent 55%); }
 .ocean-theme .stage-edition,.ocean-theme .stage-bottom { right: 5%; }
 .ocean-theme .stage-bottom strong { font-size: 19px; }
 .ocean-theme .music-inner { grid-template-columns: 104px minmax(0,1fr) minmax(190px,1fr); gap: 22px; }
 .ocean-theme .music-copy h2 { font-size: 29px; }
 .ocean-theme .cover-title { font-size: 18px; }
}
@media(max-width:700px) {
 .ocean-theme .hero { display: block; padding: 340px var(--page-gutter) 48px; min-height: 860px; height: auto; }
 .ocean-theme .hero-stage { width: 100%; height: 600px; top: 0; bottom: auto; -webkit-mask-image: none; mask-image: none; }
 .ocean-theme .hero-stage > img { object-position: 61% 30%; opacity: .92; }
 .ocean-theme .stage-wash { background: linear-gradient(0deg,#071b2a 0,#071b2aab 24%,transparent 65%),linear-gradient(90deg,#071b2a44,transparent 70%); }
 .ocean-theme .hero-copy { padding: 0; }
 .ocean-theme .hero h1 { font-size: 53px; line-height: 1.32; margin: 22px 0 20px; }
 .ocean-theme .hero-description { color: #bfc8d8; font-size: 13px; }
 .ocean-theme .eyebrow { font-size: 9px; letter-spacing: .13em; }
 .ocean-theme .hero-facts { margin-top: 28px; }
 .ocean-theme .hero-scroll { display: none; }
 .ocean-theme .hero-orbit { top: 270px; left: -475px; }
 .ocean-theme .hero-orbit-two { top: 220px; left: -525px; }
 .ocean-theme .stage-edition { top: 26px; bottom: auto; right: 24px; font-size: 8px; }
 .ocean-theme .stage-bottom { display: none; }
 .ocean-theme .hero::after { height: 90px; z-index: 3; }
 .tide-divider { min-height: 80px; margin-inline: 22px; gap: 16px; font-size: 8px; }
 .tide-divider > span:last-of-type,.tide-divider > .tide-star:nth-of-type(4) { display: none; }
 .ocean-theme .music-inner { grid-template-columns: 116px minmax(0,1fr); gap: 26px; padding: 26px; }
 .ocean-theme .music-art { margin: 5px; }
 .ocean-theme .cover-title { font-size: 19px; }
 .ocean-theme .music-copy h2 { font-size: 31px; }
 .ocean-theme .track-player { border-top-color: #8d9fba2b; }
 .ocean-theme .music-section { margin-bottom: 68px; }
 .ocean-theme .music-copy h2 > span { font-size: 11px; }
 .ocean-theme .music-description { font-size: 12px; }
 .ocean-theme .schedule-line { background: #9fb1c734; }
 .ocean-theme .schedule-live::after { display: none; }
 .ocean-theme .login-visual { height: 320px; }
 .ocean-theme .login-visual .login-shade { background: linear-gradient(0deg,#061023d9,transparent 70%); }
 .atmosphere-toggle { width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; left: 14px; bottom: calc(15px + env(safe-area-inset-bottom,0px)); }
 .atmosphere-toggle > span { display: none; }
 .site-refreshed:has(#fanBgmControl:not([hidden])) .atmosphere-toggle { bottom: 96px; }
}
@media(max-width:640px) {
 .ocean-theme .hero { padding-top: 312px; min-height: 805px; }
 .ocean-theme .hero-stage { height: 550px; }
 .ocean-theme .hero h1 { font-size: 45px; }
 .ocean-theme .hero-actions { gap: 24px; margin-top: 26px; }
 .ocean-theme .hero-actions .button-primary { padding-inline: 19px; }
 .ocean-theme .hero-facts strong { font-size: 22px; }
 .ocean-theme .hero-facts { gap: 30px; }
 .ocean-theme .music-inner { padding: 23px; grid-template-columns: 94px minmax(0,1fr); gap: 24px; }
 .ocean-theme .cover-title { font-size: 17px; }
 .ocean-theme .small-search input { font-size: 16px; }
 .ocean-theme .song-main p { font-size: 11px; }
 .ocean-theme .availability-toolbar select { font-size: 14px; }
 .ocean-theme .hero-copy > * { animation-duration: .75s; }
 .ocean-theme .community-section .section-heading h2 { color: #e0e8cf; }
 .ocean-theme .wall-form textarea { font-size: 16px; }
 .ocean-theme .music-spectrum { height: 24px; }
 .ocean-theme .fan-bgm-control { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
@media(max-width:360px) {
 .ocean-theme .hero { padding-top: 282px; min-height: 767px; }
 .ocean-theme .hero-stage { height: 510px; }
 .ocean-theme .hero h1 { font-size: 38px; }
 .ocean-theme .eyebrow { font-size: 8px; }
 .ocean-theme .hero-actions { gap: 18px; }
 .ocean-theme .hero-actions .button-primary { padding-inline: 15px; }
 .ocean-theme .music-inner { grid-template-columns: 80px minmax(0,1fr); padding: 20px; gap: 22px; }
 .ocean-theme .music-copy .section-kicker { font-size: 7px; }
 .ocean-theme .music-copy h2 { font-size: 28px; }
 .ocean-theme .cover-title { font-size: 15px; }
 .ocean-theme .tide-divider { gap: 12px; font-size: 7px; }
}
@media(prefers-reduced-motion:reduce) {
 .ocean-theme *, .ocean-theme *::before,.ocean-theme *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .ocean-theme .reveal-ready { opacity: 1; transform: none; }
 .ocean-theme .hero-stage > img { transform: scale(1.07); }
 .ocean-theme .song-row:hover,.ocean-theme .schedule-item:hover { transform: none; }
}
.ocean-theme #loadMoreSongs { color: #b9cbe3; background: #12213d; border-color: #acbfd63d; }
.ocean-theme #loadMoreSongs:hover { background: #213148; }
.ocean-theme .voice-band .section-kicker { color: #9bacc3; }
/* Floating notes: one compact sea, one readable message at a time. */
.site-refreshed.ocean-theme .community-inner { padding-block: 58px; }
.site-refreshed.ocean-theme .community-section .section-heading { flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.site-refreshed.ocean-theme .community-layout { display: block; }
.site-refreshed.ocean-theme .wall-tools { gap: 8px; }
.site-refreshed.ocean-theme .wall-write { min-height: 44px; padding: 10px 17px; color: #c8d5e5; background: #b9cee910; border-color: #c1d2e638; border-radius: 24px; }
.site-refreshed.ocean-theme .wall-write svg { width: 16px; height: 16px; }
.site-refreshed.ocean-theme .wall-topline { padding: 0 0 12px; font-size: 11px; color: #9babbf; }
.bubble-help { color: #8c98ac; font-size: 10px; }
.bubble-help-touch { display: none; }
.note-reader-header { display: flex; align-items: center; gap: 10px; }
.note-reader-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: #ffffff55; border: 1px solid #ffffff6b; color: #4e5f76; font: 17px var(--font-editorial); }
.note-reader-identity { flex: 1; min-width: 0; }
.note-reader-identity > span { color: #697789; font-size: 9px; }
.note-reader-identity h3 { margin: 3px 0 0; color: #2f3f55; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.site-refreshed.ocean-theme .note-reader-header .icon-button { flex: 0 0 38px; width: 38px; height: 38px; margin-right: -7px; background: #ffffff26; color: #55667b; border-color: transparent; }
.site-refreshed.ocean-theme .note-reader-header .icon-button:hover { background: #ffffff73; }
.note-reader-text { min-height: 0; max-height: 174px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #76869b55 transparent; color: #28374c; font-size: 14px; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; padding: 2px; border-radius: 3px; }
.note-reader-text:focus-visible { outline-color: #51637b; }
.note-reader-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #45576f22; }
.note-reader-footer time { font-size: 10px; color: #5a697b; }
.site-refreshed.ocean-theme .note-reader-footer .fan-quiet { color: #547660; font-size: 11px; min-height: 36px; padding: 0; }
.site-refreshed.ocean-theme .note-reader-footer .fan-quiet:hover { color: #23354b; text-decoration: underline; }
.site-refreshed.ocean-theme .wall-empty { position: absolute; inset: 25px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; border: 0; background: transparent; color: #a7b6c9; }
.site-refreshed.ocean-theme .wall-empty svg { margin: 0 auto 14px; }
.site-refreshed.ocean-theme .wall-pagination { margin: 13px 0 0; gap: 12px; font-size: 11px; }
.bubble-page-hint { margin-right: auto; color: #73829b; font-size: 10px; letter-spacing: .08em; }
.site-refreshed.ocean-theme .wall-compose-dialog { width: min(490px,calc(100% - 24px)); }
.site-refreshed.ocean-theme .wall-compose-dialog .wall-form { margin: 18px 0 0; border: 0; border-top: 1px solid #b7c8dc28; border-radius: 0; padding: 21px 0 0; background: transparent; }
.site-refreshed.ocean-theme .wall-compose-dialog .wall-letterhead { display: none; }
.site-refreshed.ocean-theme .wall-compose-dialog textarea { min-height: 160px; font-size: 16px; }
.site-refreshed.ocean-theme .wall-compose-dialog .note-colors label { width: 40px; height: 44px; }
.site-refreshed.ocean-theme .wall-compose-dialog .wall-compose-footer { margin-bottom: 16px; }
.motion-paused .note-arriving { animation: none !important; }
@media(max-width:700px) {
 .site-refreshed.ocean-theme .community-inner { padding-block: 42px; }
 .site-refreshed.ocean-theme .community-section .section-heading { gap: 18px; }
 .site-refreshed.ocean-theme .wall-tools { width: 100%; gap: 8px; }
 .site-refreshed.ocean-theme .wall-write { margin-right: auto; }
 .site-refreshed.ocean-theme .wall-tools .icon-button { width: 44px; flex-basis: 44px; height: 44px; }
 .site-refreshed.ocean-theme .wall-topline { font-size: 10px; gap: 15px; align-items: baseline; }
 .bubble-help { max-width: 50%; font-size: 9px; text-align: right; }
 .bubble-help-hover { display: none; }.bubble-help-touch { display: inline; }
 .note-universe { --wall-height: 330px; }
 .note-spotlight { padding: 18px; gap: 14px; border-radius: 15px; }
 .note-reader-text { font-size: 14px; max-height: 184px; }
 .site-refreshed.ocean-theme .note-reader-header .icon-button { width: 44px; height: 44px; flex-basis: 44px; }
 .site-refreshed.ocean-theme .note-reader-footer .fan-quiet { min-height: 44px; }
 .bubble-page-hint { font-size: 9px; }
}
@media(hover:none) { .bubble-help-hover { display: none; }.bubble-help-touch { display: inline; } }

/* Moving portrait and liquid glass, inspired by the supplied water-ring reference. */
.ocean-theme .hero-stage > .hero-poster,
.ocean-theme .hero-stage > .hero-video {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
 object-position: 56% 42%; transform: none; opacity: 1; filter: saturate(1.08);
}
.ocean-theme .hero-stage { width: 82%; background: #081d36; }
.ocean-theme .stage-wash { background: linear-gradient(90deg,#061023 0%,#061023c4 14%,#06102339 43%,transparent 70%),linear-gradient(0deg,#061023,transparent 38%),linear-gradient(180deg,#06102345,transparent 30%); }
.ocean-theme .hero-aura { background: radial-gradient(ellipse at 78% 30%,#5598ff24,transparent 55%); }
.ocean-theme .hero-copy { pointer-events: none; }
.ocean-theme .hero-copy :is(a,button) { pointer-events: auto; }
.ocean-theme .hero h1 { text-shadow: 0 4px 32px #020c20a6; }
.ocean-theme .hero-title-accent { background-image: linear-gradient(105deg,#afc7f2,#f5f8fd 38%,#86aefb 67%,#b7cff3); }
.hero-media-control { position: absolute; z-index: 6; right: max(26px,calc((100% - 1200px)/2)); top: 28px; display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px; border: 1px solid #d2dff844; border-radius: 30px; background: #03132966; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #e1f2ff; font: 11px/1.3 var(--font-sans); cursor: pointer; }
.hero-media-control:hover { background: #163752cc; border-color: #d2dff899; }
.hero-media-control:focus-visible { outline: 2px solid #bbcff4; outline-offset: 4px; }
.hero-media-control:disabled { cursor: default; opacity: .65; }
.hero-media-dot { width: 5px; height: 9px; border-inline: 2px solid currentColor; }
.hero-media-control[aria-pressed=true] .hero-media-dot { width: 0; height: 0; border: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.ocean-theme .music-inner { padding: 38px 40px; gap: 42px; border-color: #a2bef052; background: radial-gradient(ellipse at 14% 50%,#2857ab2b,transparent 49%),linear-gradient(115deg,#122548d9,#0b1933e8 70%); box-shadow: inset 0 1px #e7eefb21,0 24px 90px #010d214d,0 0 55px #1c4aa00d; }
.ocean-theme .music-art { isolation: isolate; overflow: visible; background: radial-gradient(ellipse at 35% 20%,#81a2df24,transparent 53%),radial-gradient(circle,#09152d 48%,#192c50 67%,#081d30 73%); border-color: #cfddf745; box-shadow: inset 3px 3px 12px #d6e2f826,inset -5px -8px 22px #010b19,0 0 28px #6f99e821; }
.ocean-theme .music-art::before { content: ""; position: absolute; z-index: 2; inset: -9px; padding: 7px; border-radius: 50%; background: conic-gradient(from 20deg,transparent 2%,#abc3f148 12%,#ebf1fc 18%,#9dccf65e 24%,transparent 34%,#558ce948 47%,#dee9fa 60%,#cbdaf751 69%,transparent 84%,#bfd2f455 93%,transparent); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; filter: blur(.6px); animation: liquid-turn 11s linear infinite; pointer-events: none; }
.ocean-theme .music-art::after { content: ""; position: absolute; z-index: -1; inset: -20px; border: 2px solid #82a7eb45; border-radius: 46% 54% 51% 49%; box-shadow: 0 0 22px #94b3ee2e,inset 0 0 16px #7fa4ff21; animation: liquid-tide 7s ease-in-out infinite alternate; pointer-events: none; }
.ocean-theme .record-core { inset: 8%; border-color: #e4ecfb1c; background: radial-gradient(ellipse at 30% 15%,#aac4f127,transparent 55%),linear-gradient(150deg,#17284855,#071321cc); box-shadow: inset 1px 2px 6px #ccdcf714,inset -2px -3px 9px #010b1844; }
.ocean-theme .record-orbit { inset: -15px; border-color: #a7d5ff25; border-left-color: #dce7f980; border-bottom-color: transparent; animation-duration: 17s; }
.ocean-theme .cover-title { position: relative; z-index: 3; font-size: 30px; color: #f1f5fd; text-shadow: 0 0 22px #b8cdf461; }
.ocean-theme .is-playing .music-art::before,.ocean-theme.is-playing .music-art::before { animation-duration: 6s; }
@keyframes liquid-turn { to { transform: rotate(360deg); } }
@keyframes liquid-tide { from { transform: rotate(-16deg) scale(.98,1.02); border-radius: 46% 54% 51% 49%; opacity: .45; } to { transform: rotate(20deg) scale(1.04,.99); border-radius: 52% 48% 46% 54%; opacity: .95; } }
.motion-paused .music-art::before,.motion-paused .music-art::after,.page-away .music-art::before,.page-away .music-art::after { animation-play-state: paused; }
@media(max-width:960px) { .ocean-theme .hero-stage { width: 95%; } .ocean-theme .music-inner { padding: 32px; gap: 30px; } }
@media(max-width:700px) {
 .ocean-theme .hero-stage { width: 100%; }
 .ocean-theme .hero-stage > .hero-poster,.ocean-theme .hero-stage > .hero-video { object-position: 52% top; }
 .ocean-theme .stage-wash { background: linear-gradient(0deg,#071b2a 0%,#071b2adb 23%,#071b2a44 45%,transparent 72%); }
 .hero-media-control { top: 22px; right: 20px; padding: 9px 12px; font-size: 10px; }
 .ocean-theme .stage-edition { display: none; }
 .ocean-theme .music-inner { padding: 32px 26px; gap: 30px; }
 .ocean-theme .cover-title { font-size: 24px; }
}
@media(max-width:360px) { .ocean-theme .music-inner { padding: 30px 23px; gap: 25px; } .ocean-theme .cover-title { font-size: 21px; } }
@media(prefers-reduced-motion:reduce) { .ocean-theme .music-art::before,.ocean-theme .music-art::after { animation: none; } }
/* Pin-point starlight and translucent message bubbles. */
.ocean-atmosphere { z-index: 0; opacity: 1; }
.ambient-grain { opacity: .018; }
.ambient-glow { opacity: .12; }
.note-universe { --wall-height: 420px; position: relative; height: var(--wall-height); isolation: isolate; border: 1px solid #c4d9ee18; border-radius: 24px; background: linear-gradient(155deg,#091222e8,#0a1422ef 65%,#101e2ce8); overflow: hidden; box-shadow: inset 0 1px #edf7ff07,0 16px 50px #02091120; }
.star-river { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.river-coordinate { position: absolute; inset: 25px 29px auto; display: flex; justify-content: space-between; gap: 20px; color: #98abc0; font-size: 9px; letter-spacing: .19em; pointer-events: none; }
.river-coordinate span:last-child { font-size: 10px; letter-spacing: .12em; color: #74879a; }
.site-refreshed.ocean-theme .note-wall { position: relative; display: block; width: 100%; max-width: none; height: 100%; min-height: 0; padding: 0; margin: 0; overflow: visible; }
.note-spotlight { --bubble-rgb: 187,214,221; position: absolute; z-index: 20; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 20px; width: min(380px,calc(100% - 24px)); max-height: calc(var(--wall-height) - 24px); padding: 28px; border: 1px solid #e4f0ff3b; border-radius: 24px; background: linear-gradient(135deg,#e8f4ff18,#95aec609),#101f30d9; color: #ebf3f9; backdrop-filter: blur(28px) saturate(1.2); -webkit-backdrop-filter: blur(28px) saturate(1.2); box-shadow: 0 24px 65px #000a1666,inset 0 1px #ffffff24; }
.note-arriving { animation: note-surface .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes note-surface { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.note-reader-avatar { background: rgba(var(--bubble-rgb),.12); border-color: rgba(var(--bubble-rgb),.2); color: rgb(var(--bubble-rgb)); }
.note-reader-identity > span { color: #9dabbc; }
.note-reader-identity h3 { color: #e1eaf5; }
.site-refreshed.ocean-theme .note-reader-header .icon-button { color: #d4e1ec; background: #d5eaff09; }
.site-refreshed.ocean-theme .note-reader-header .icon-button:hover { background: #d5eaff20; }
.note-reader-text { color: #e1e9f1; max-height: 210px; font-size: 15px; line-height: 2; scrollbar-color: #bbcce94d transparent; }
.note-reader-footer { border-color: #c2d6ee20; }
.note-reader-footer time,.site-refreshed.ocean-theme .note-reader-footer .fan-quiet { color: #aabace; }
.site-refreshed.ocean-theme .note-reader-footer .fan-quiet:hover { color: #f3f7fb; }
.site-refreshed.ocean-theme .wall-empty { position: absolute; inset: 36px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border: 0; background: transparent; padding: 20px; color: #b4c3d1; font-size: 12px; }
.site-refreshed.ocean-theme .wall-empty strong { font-size: 17px; font-weight: 400; letter-spacing: .09em; color: #dbe2f1; }
.site-refreshed.ocean-theme .wall-empty svg { width: 100%; height: 100%; margin: 0; }
.empty-send { border: 1px solid #cfdeed30; border-radius: 20px; padding: 10px 16px; background: #a3c5e60b; color: #cadce9; margin-top: 8px; font-size: 11px; cursor: pointer; }
.empty-send:hover { background: #a3c5e620; }
@media(max-width:700px) {
 .note-universe { --wall-height: 660px; border-radius: 20px; }
 .river-coordinate { inset: 22px 19px auto; font-size: 8px; }
 .river-coordinate span:last-child { display: none; }
 .note-spotlight { padding: 22px; }
 .note-reader-text { max-height: 260px; }
 .site-refreshed.ocean-theme .wall-empty { inset: 40px 0; }
 .site-refreshed.ocean-theme .wall-empty strong { font-size: 15px; }
}

/* The film's midnight blue and silver-blue light continue across every section. */
.ocean-theme { --bg: #0a1429; --surface: #142440; --surface-soft: #1b3050; --paper: #e6edf7; --muted: #a4b7d1; --faint: #8299b8; --accent: #b7d4fb; --accent-soft: #9dbce8; --seafoam: #b6cff0; background: #0a1429; }
.ocean-ambience { background: radial-gradient(ellipse at 72% 12%,#1d3555a6,transparent 67%),linear-gradient(165deg,#0d1a32,#0a1429 62%,#142441); }
.ambient-glow,.ambient-grain,.hero-orbit,.stage-light { display: none; }
.ocean-theme .hero { background: #0d1a32; }
.ocean-theme .hero::after { background: linear-gradient(transparent,#0d1a32); }
.ocean-theme .stage-wash { background: linear-gradient(90deg,#0d1a32 0%,#0d1a32b8 14%,#0d1a3229 43%,transparent 70%),linear-gradient(0deg,#0d1a32,transparent 38%); }
.ocean-theme .hero-aura { opacity: .2; }
.ocean-theme .topbar { background: #0c1930e6; }
.ocean-theme .music-inner { background: linear-gradient(115deg,#1c3451e6,#112139ed 70%); border-color: #b6cfee30; }
.ocean-theme .music-inner::before { display: none; }
.note-universe { background: linear-gradient(145deg,#101e35e8,#0b1429ed 60%,#172640e8); }

.ocean-theme .community-section .section-heading h2 { color: #e0e9f8; }
.ocean-theme .community-section .section-kicker { color: #adc5e8; }
.ocean-theme .community-section .section-heading p { color: #adbdd4; }


/* The original message-wall composition, rebuilt as quiet optical glass. */
.note-universe { --wall-height: 370px; border-radius: 20px; background: linear-gradient(140deg,#0d1b31b3,#101d34a6); border-color: #d0e2ff12; box-shadow: none; }
.star-river { opacity: .38; }
.site-refreshed.ocean-theme .note-wall { max-width: var(--cluster-width,1080px); margin: 0 auto; }
.note-orbit { --bubble-rgb: 180,207,240; --size: var(--bubble-size); position: absolute; width: var(--size); height: var(--size); left: clamp(calc(var(--size)/2 + 8px),var(--bubble-x),calc(100% - var(--size)/2 - 8px)); top: var(--bubble-y); transform: translate(-50%,-50%); z-index: var(--bubble-layer,1); transition: opacity .4s; }
.note-orbit[data-color=sky],.note-spotlight[data-color=sky] { --bubble-rgb: 183,220,246; }
.note-orbit[data-color=rose],.note-spotlight[data-color=rose] { --bubble-rgb: 216,195,235; }
.note-orbit[data-color=butter],.note-spotlight[data-color=butter] { --bubble-rgb: 225,218,193; }
.note-bubble { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; padding: 18%; border: 1px solid rgba(var(--bubble-rgb),.28); border-radius: 50%; color: #dfeaf8; cursor: pointer; text-align: center; overflow: hidden; background: radial-gradient(ellipse at 30% 14%,rgba(var(--bubble-rgb),.2),transparent 40%),radial-gradient(ellipse at 74% 86%,rgba(var(--bubble-rgb),.11),transparent 36%),linear-gradient(145deg,#a3c1e309,#08162d1f); box-shadow: inset 1px 1px 2px #f2f8ff24,inset -1px -2px 3px rgba(var(--bubble-rgb),.15),inset 4px -7px 15px #06102724,0 9px 14px #030a1817; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); animation: glass-bubble-float var(--bubble-duration,9s) ease-in-out var(--bubble-delay,0s) infinite; transition: scale .5s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s; -webkit-tap-highlight-color: transparent; }
.note-bubble::before { content: ""; position: absolute; width: 29%; height: 9%; top: 11%; left: 20%; border-top: 1px solid #f0f8ff8c; border-radius: 50%; transform: rotate(-30deg); background: linear-gradient(#eff8ff13,transparent); pointer-events: none; }
.note-bubble::after { content: ""; position: absolute; inset: 5%; border: 1px solid transparent; border-right-color: rgba(var(--bubble-rgb),.16); border-bottom-color: rgba(var(--bubble-rgb),.22); border-radius: 50%; transform: rotate(-24deg); pointer-events: none; }
.bubble-glint { position: absolute; top: 16%; left: 21%; width: 3px; height: 3px; border-radius: 50%; background: #f2f8ffae; animation: glass-glint 7s ease-in-out var(--bubble-delay,0s) infinite; }
@keyframes glass-glint { 0%,100% { opacity: .3; transform: translate(0,0); } 50% { opacity: .9; transform: translate(3px,-2px); } }
@keyframes glass-bubble-float { 0%,100% { transform: translate3d(-3px,4px,0); } 50% { transform: translate3d(4px,-8px,0); } }
.bubble-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 100%; font-size: 11px; line-height: 1.65; opacity: .85; }
.bubble-author { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; line-height: 1.4; color: rgba(var(--bubble-rgb),.78); }
.note-bubble:hover,.note-bubble:focus-visible { scale: 1.055; border-color: rgba(var(--bubble-rgb),.6); background-color: #bdd6f30b; }
.note-orbit:hover,.note-orbit:focus-within { z-index: 9; }
.note-bubble:focus-visible { outline: 1px solid #d9eaff; outline-offset: 5px; }
.wall-paused .note-bubble,.wall-paused .bubble-glint,.river-offscreen .note-bubble,.river-offscreen .bubble-glint,.page-away .note-bubble,.page-away .bubble-glint { animation-play-state: paused; }
.has-note-open .note-orbit { opacity: .8; }
.has-note-open .note-orbit:has([aria-expanded=true]) { opacity: .55; }
.note-spotlight { backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); }
@media(max-width:700px) {
 .note-universe { --wall-height: 390px; border-radius: 18px; }
 .note-orbit { --size: calc(var(--bubble-size)*.72); left: clamp(calc(var(--size)/2 + 4px),var(--bubble-mobile-x),calc(100% - var(--size)/2 - 4px)); top: var(--bubble-mobile-y); }
 .note-bubble { padding: 15%; gap: 5px; }
 .bubble-excerpt { font-size: 10px; line-height: 1.5; }.bubble-author { font-size: 8px; }
}
@media(max-width:360px) { .note-orbit { --size: calc(var(--bubble-size)*.65); } }
@media(prefers-reduced-motion:reduce) { .note-bubble,.bubble-glint { animation: none !important; } }

/* Songbook: a quiet record shelf, with detail revealed on demand. */
#songs .section-heading { align-items: end; gap: 24px; margin-bottom: 30px; }
#songs .song-history-link { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; color: #c2d1e4; font-size: 13px; text-decoration: none; padding: 10px 0; }
#songs .song-history-link svg { width: 16px; height: 16px; }
#songs .voice-band { display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #c9def016; border-radius: 0; background: none; padding: 0 0 22px; margin: 0 0 24px; box-shadow: none; }
#songs .voice-symbol { width: 34px; height: 34px; border: 1px solid #c5daef24; border-radius: 50%; color: #bed4ed; background: #aecfff08; }
#songs .voice-band > div:nth-child(2) { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; flex: 1; }
#songs .voice-band .section-kicker { font-size: 10px; letter-spacing: .06em; margin: 0; color: #91a8c5; }
#songs .voice-band strong { margin: 0; font-size: 12px; font-weight: 400; color: #bfcfe2; }
#songs .voice-band time { margin-left: 8px; }
#songs .voice-band .icon-button { width: 32px; height: 32px; background: transparent; color: #8ea4c0; }
#songs .workspace-grid { display: block; }
#songs .library-toolbar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 0; }
#songs .library-search-wrap { flex: 0 1 310px; min-width: 220px; width: auto; }
#songs .small-search { height: 48px; width: 100%; border: 1px solid #c2d9f226; border-radius: 12px; background: #9ab6db06; }
#songs .small-search:focus-within { border-color: #b8d6f57a; box-shadow: 0 0 0 3px #b8d6f50a; }
#songs .small-search input { width: 100%; font-size: 13px; padding-right: 32px; }
#songs .filter-tabs { display: flex; flex-wrap: wrap; gap: 4px; border: 0; padding: 4px; background: #050e1d24; border-radius: 12px; }
#songs .filter-button { white-space: nowrap; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 12px; color: #9fb2cc; background: transparent; }
#songs .filter-button.active { color: #eef5ff; background: #acc7eb14; border-color: #cce0ff1a; box-shadow: 0 2px 5px #00000012; }
#songs .song-filter-line { position: relative; padding: 12px 0 18px; }
#songs .mood-picker { border: 0; margin: 0; background: transparent; border-radius: 0; }
#songs .mood-picker summary { display: flex; justify-content: flex-start; gap: 9px; min-height: 38px; padding: 0; width: fit-content; max-width: calc(100% - 170px); color: #a6b9d2; font-size: 11px; }
#songs .mood-picker summary > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#songs .mood-picker summary svg { width: 13px; height: 13px; flex-shrink: 0; }
#songs .mood-picker summary em { color: #d4e3f7; font-style: normal; font-size: 10px; }
#songs .song-results-tools { position: absolute; right: 0; top: 12px; min-height: 38px; gap: 12px; font-size: 11px; }
#songs #resetSongFilters { font-size: 11px; color: #c7dbf5; }
#songs .song-filter-content { padding: 20px; margin: 10px 0 0; border: 1px solid #cee1f41a; border-radius: 14px; background: #06112230; }
#songs .filter-caption { color: #91a7c2; font-size: 11px; }
#songs .mood-bubbles { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; padding: 0; }
#songs .mood-bubble { display: flex; align-items: center; gap: 7px; width: auto; min-height: 36px; border-radius: 8px; padding: 8px 11px; background: transparent; box-shadow: none; border: 1px solid #d3e4f51a; }
#songs .mood-bubble.active { background: #d2e5ff12; border-color: #c1dfff66; }
#songs .mood-bubble strong { font-size: 11px; font-weight: 400; margin: 0; }
#songs .mood-bubble-icon { display: none; }
#songs .mood-bubble small { font-size: 9px; color: #90a5c0; }
#songs .availability-toolbar { margin: 0; padding: 0; border: 0; }
#songs .availability-toolbar label { font-size: 11px; gap: 12px; }
#songs .availability-toolbar select { border-radius: 8px; min-height: 36px; background: #0b192e; color: #d5e4f7; }
#songs .record-shelf { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
#songs .record-shelf .empty-state { grid-column: 1 / -1; }
#songs .record-card { --record-tint: #87a8cf; position: relative; overflow: hidden; isolation: isolate; min-width: 0; display: flex; flex-direction: column; padding: 20px; border: 1px solid #c5dbf023; border-radius: 18px; background: linear-gradient(140deg,#9fb7d710,#111f340a 65%); box-shadow: inset 0 1px #edf6ff06,0 8px 24px #020a1612; transition: transform .45s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s; }
#songs .record-card::after { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 14%; right: 14%; bottom: -42px; height: 60px; border-radius: 50%; background: var(--record-tint); filter: blur(24px); opacity: .07; transition: opacity .45s; }
#songs .record-card.art-coral { --record-tint: #b7a4ca; }
#songs .record-card.art-lime { --record-tint: #9bbcbc; }
#songs .record-card.art-yellow { --record-tint: #c3b8a5; }
#songs .record-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#songs .record-index { font-size: 9px; letter-spacing: .15em; color: #8397b2; font-variant-numeric: tabular-nums; }
#songs .availability-badge { font-size: 10px; padding: 0; border: 0; background: none; border-radius: 0; font-weight: 400; }
#songs .availability-badge::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: middle; }
#songs .record-card-body { display: flex; align-items: center; gap: 17px; flex: 1; margin: 24px 0 22px; }
#songs .record-disc { position: relative; display: grid; place-items: center; width: 68px; height: 68px; flex-shrink: 0; border-radius: 50%; border: 1px solid #c3d8ec30; background: repeating-radial-gradient(circle,#b6cde309 0 1px,transparent 1px 4px),conic-gradient(from 35deg,#0a1425,#94adc331,#0a1628 30%,#06101f 49%,#a8bdcf36 60%,#0b1629 80%,#0a1425); box-shadow: 0 4px 8px #00000020,inset 0 0 0 5px #030c1a32; transition: transform .8s cubic-bezier(.16,1,.3,1); }
#songs .record-disc span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #d8e6f11a; background: color-mix(in srgb,var(--record-tint) 20%,#0c182a); color: #cad9ea; font-family: var(--font-sans); font-size: 10px; }
#songs .record-copy { min-width: 0; }
#songs .record-copy h3 { margin: 0; color: #e6eef9; font: 500 19px/1.5 var(--font-sans); letter-spacing: -.025em; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#songs .record-copy p { color: #9aafc9; font-size: 11px; line-height: 1.5; margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#songs .record-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 12px 0 0; border: 0; border-top: 1px solid #d7e7fa13; background: transparent; color: #b8cbe3; cursor: pointer; font: 11px var(--font-sans); }
#songs .record-action svg { width: 15px; height: 15px; transition: transform .3s; }
#songs .record-action:hover { color: #eef6ff; }
#songs .record-action:hover svg { transform: translate(2px,-2px); }
#songs :is(button,a,summary):focus-visible { outline: 2px solid #b6d6ff; outline-offset: 4px; }
#songs .record-card:focus-within { border-color: #bed8f568; }
@media(hover:hover) { #songs .record-card:hover { transform: translateY(-4px); border-color: #c5dcf24d; box-shadow: inset 0 1px #edf6ff12,0 14px 30px #020a162b; } #songs .record-card:hover::after { opacity: .24; } #songs .record-card:hover .record-disc { transform: rotate(16deg); } }
#songs .song-pagination { margin: 20px 0 26px; padding: 0; font-size: 11px; }
#songs #loadMoreSongs { padding: 10px 16px; border-radius: 10px; border: 1px solid #d2e3f426; background: #b5ccee08; color: #d0e0f4; font-size: 11px; }
#songs .song-guide-disclosure { border-top: 1px solid #c5d8f019; border-bottom: 1px solid #c5d8f019; }
#songs .song-guide-disclosure summary { display: flex; justify-content: space-between; padding: 18px 0; cursor: pointer; list-style: none; font-size: 12px; color: #a6bad4; }
#songs .song-guide-disclosure summary::-webkit-details-marker { display: none; }
#songs .song-guide-disclosure summary span { display: flex; align-items: center; gap: 8px; }
#songs .song-guide-disclosure summary svg { width: 14px; height: 14px; }
#songs .request-guide { padding: 8px 0 24px; background: none; border: 0; }
#songs .request-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
#songs .request-privacy,#songs .qualification-note { font-size: 11px; }
#songs .history-disclosure { margin-top: 0; border-top: 0; }
@media(max-width:1100px) { #songs .library-toolbar { flex-direction: column; align-items: stretch; gap: 14px; } #songs .library-search-wrap { flex: auto; width: 100%; } #songs .filter-tabs { width: fit-content; } }
@media(max-width:900px) { #songs .record-shelf { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 #songs .section-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
 #songs .song-history-link { padding: 0; font-size: 12px; }
 #songs .voice-band > div:nth-child(2) { flex-direction: column; align-items: start; gap: 5px; }
 #songs .voice-band { gap: 10px; }
 #songs .filter-tabs { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3px; }
 #songs .filter-button { padding: 9px 4px; font-size: 11px; }
 #songs .record-shelf { grid-template-columns: minmax(0,1fr); gap: 12px; }
 #songs .record-card { padding: 18px; }
 #songs .record-card-body { margin: 16px 0; }
 #songs .record-disc { width: 60px; height: 60px; }
 #songs .record-copy h3 { font-size: 18px; }
 #songs .song-results-tools { position: static; min-height: 24px; justify-content: flex-end; }
 #songs .mood-picker summary { max-width: 100%; }
 #songs .song-filter-content { padding: 15px; }
 #songs .request-steps { grid-template-columns: 1fr; gap: 20px; }
}
@media(prefers-reduced-motion:reduce) { #songs .record-card,#songs .record-disc,#songs .record-card::after,#songs .record-action svg { transition: none; } #songs .record-card:hover,#songs .record-card:hover .record-disc,#songs .record-action:hover svg { transform: none; } }

/* On phones, songs become compact rows for quick browsing. */
@media(max-width:600px) {
 #songs .record-shelf { gap: 0; border-top: 1px solid #c5dbf021; }
 #songs .record-card { display: grid; grid-template-columns: minmax(0,1fr) 94px; grid-template-rows: auto auto; gap: 4px 10px; padding: 16px 0; border: 0; border-bottom: 1px solid #c5dbf021; border-radius: 0; background: transparent; box-shadow: none; }
 #songs .record-card::after { display: none; }
 #songs .record-card-body { grid-column: 1; grid-row: 1 / 3; gap: 12px; margin: 0; }
 #songs .record-disc { width: 42px; height: 42px; }
 #songs .record-disc span { width: 18px; height: 18px; font-size: 8px; }
 #songs .record-copy h3 { font-size: 15px; line-height: 1.45; }
 #songs .record-copy p { font-size: 10px; margin-top: 4px; }
 #songs .record-card-top { grid-column: 2; grid-row: 1; justify-content: flex-end; align-self: end; }
 #songs .record-index { display: none; }
 #songs .availability-badge { font-size: 9px; white-space: nowrap; }
 #songs .record-action { grid-column: 2; grid-row: 2; justify-content: flex-end; align-self: start; min-height: 32px; padding: 4px 0; border: 0; gap: 6px; font-size: 11px; }
 #songs .record-action svg { width: 14px; height: 14px; }
 #songs .record-card:focus-within { background: #c5dbf009; }
}

/* A compact mobile itinerary, aligned with the song rows above. */
@media(max-width:600px) {
 #schedule .schedule-inner { padding-top: 42px; padding-bottom: 42px; }
 #schedule .section-heading { gap: 10px; margin-bottom: 22px; }
 #schedule .section-heading h2 { font-size: 23px; line-height: 1.5; margin-top: 10px; margin-bottom: 8px; }
 #schedule .section-heading p { font-size: 11px; line-height: 1.8; }
 #schedule .section-index { display: none; }
 #schedule .schedule-list { gap: 0; border-top: 1px solid #bfd4ef24; }
 #schedule .schedule-item { grid-template-columns: 68px 1px minmax(0,1fr); gap: 13px; min-height: 0; padding: 18px 0; border: 0; border-bottom: 1px solid #bfd4ef24; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
 #schedule .schedule-date strong { font: 500 18px/1.4 var(--font-sans); letter-spacing: -.03em; color: #d4e2f3; }
 #schedule .schedule-date > span { font-size: 7px; letter-spacing: .03em; margin-top: 4px; }
 #schedule .schedule-line { height: 42px; background: #b9d0ed23; }
 #schedule .schedule-status { font-size: 9px; gap: 6px; }
 #schedule .schedule-info h3 { font-size: 13px; line-height: 1.5; margin: 5px 0; color: #e0eaf7; }
 #schedule .schedule-info p { font-size: 10px; line-height: 1.65; }
 #schedule .schedule-live::after { display: none; }
}