/* One persisted theme across the catalog, shop, album and reader. */
:root{color-scheme:light;--page-bg:#fff;--surface:#fff;--raised:#f5f7fa;--text:#172033;--secondary:#566278;--quiet:#737e91;--divider:#e3e8ef;--hover:#edf2f9;--soft-blue:#edf3ff;--accent:#1f5ccf;--album-top:#e9f0fc;--album-bottom:#dce7fa;--range-track:#c9d3e2;--button-bg:#172033;--button-text:#fff}
:root[data-theme=dark]{color-scheme:dark;--page-bg:#101319;--surface:#171c25;--raised:#202735;--text:#edf1f8;--secondary:#b5bfd0;--quiet:#98a5bc;--divider:#303a4c;--hover:#263145;--soft-blue:#1c2c46;--accent:#8db4ff;--album-top:#23334e;--album-bottom:#293e5e;--range-track:#505e73;--button-bg:#edf1f8;--button-text:#172033}
body,body.music-mode,body.reader-mode{background:var(--page-bg);color:var(--text)}
.mast,.music-mode .mast{background:var(--page-bg)}
.work-page .mast{background:transparent}
.studio-nav,.music-mode .studio-nav{color:var(--quiet)}
.studio-nav [aria-current=page],.music-mode .studio-nav [aria-current=page]{color:var(--text)}
.theme-controls{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme-controls .language-switch{margin-left:0}
.language-switch,.music-mode .language-switch{background:var(--raised);border-color:var(--divider)}
.language-switch button,.music-mode .language-switch button{background:transparent;color:var(--secondary)}
.language-switch button[aria-pressed=true],.music-mode .language-switch button[aria-pressed=true]{background:var(--button-bg);color:var(--button-text)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 9px;border:1px solid var(--divider);border-radius:100px;background:var(--surface);color:var(--text);font-size:11px;white-space:nowrap}
.theme-toggle:hover{background:var(--hover)}
.theme-toggle svg{flex-shrink:0}
.work-page .theme-toggle{background:#111a2bd9;color:white;border-color:#ffffff60}
.studio-brand img,.music-mode .studio-brand img{filter:none}
:root[data-theme=dark] .studio-brand img,.work-page .studio-brand img{filter:invert(1)}
:root[data-theme=dark] .studio-heading img:not(.black-lettering){filter:invert(1)}
:root[data-theme=dark] .studio-heading img.black-lettering{filter:none!important}
.music-card{color:var(--text)}
.music-card small,.design-episode p,.design-about p,.catalog-note,.studio-shop>p{color:var(--secondary)}
.work-card .coming-label,.episode-free,.shop-products small,.design-actions [aria-pressed=true],.scheduled-kicker,.scheduled-page .scheduled-date{color:var(--accent)}
.design-about,.release-calendar{border-color:var(--divider)}
.design-list-head button,.shop-products span,.scheduled-back,.scheduled-page>p,.release-calendar span,.design-about>small{color:var(--quiet)}
.design-list-head button,.design-actions button{background:transparent;color:var(--secondary)}
.release-notice{background:var(--soft-blue)}
.release-notice strong{color:var(--accent)}
.release-notice span{color:var(--secondary)}
footer,.music-mode footer{background:var(--page-bg);color:var(--quiet);border-color:var(--divider)}
.spotify-album{background:var(--surface);color:var(--text)}
.music-breadcrumb{justify-content:flex-end;background:var(--album-top);color:var(--secondary)}
.music-breadcrumb>span{color:var(--secondary)}
.spotify-album .album-hero{background:linear-gradient(var(--album-top),var(--album-bottom))}
.spotify-album .album-art{box-shadow:0 8px 24px #0c23442b}
.album-tagline,.album-byline,.album-story-link{color:var(--secondary)}
.album-byline strong{color:var(--text)}
.album-content{background:linear-gradient(var(--soft-blue),var(--surface) 225px)}
.album-save,.album-list-label,.track-head,.spotify-album .track-row .track-number,.spotify-album .track-row small,.spotify-album .track-duration,.album-draft-note{color:var(--secondary)}
.album-save[aria-pressed=true],.spotify-album .track-row.active-track .track-title{color:var(--accent)}
.spotify-album .album-play{background:#3976ee;color:white}
.spotify-album .album-play:hover{background:#225fda}
.track-head{border-color:var(--divider)}
.spotify-album .track-row:hover,.spotify-album .track-row.active-track{background:var(--hover)}
.number-play{color:var(--text)}
.spotify-album .album-story,.spotify-album .song-episodes a{background:var(--raised)}
.spotify-album .song-episodes a:hover{background:var(--hover)}
.album-eyebrow,.spotify-album .album-story p,.spotify-album .album-section-head a,.spotify-album .album-credit{color:var(--secondary)}
.spotify-album .album-story blockquote,.spotify-album .song-episodes strong{color:var(--text)}
.spotify-album .song-episodes small{color:var(--accent)}
.music-player,.music-mode .music-player{background:var(--surface);color:var(--text);border-color:var(--divider)}
.music-player button{background:transparent;color:var(--secondary)}
.music-mode .player-label span,.music-mode .music-player .transport-buttons button,.transport-progress>span,.music-mode .music-volume,.music-mode .music-player>button{color:var(--secondary)}
.music-mode .music-player #player-toggle{background:var(--button-bg);color:var(--button-text)}
.music-mode #player-seek{background:linear-gradient(to right,var(--accent) var(--played,0%),var(--range-track) var(--played,0%))}
.music-mode input[type=range]{background:var(--range-track)}
.music-mode input[type=range]::-webkit-slider-thumb{background:var(--accent)}
.music-mode .music-player>button[aria-pressed=true]{color:var(--accent)}
.viewer-top,.viewer-bottom{background:var(--surface);border-color:var(--divider)}
.viewer-top>div{gap:14px}
.viewer-top a,.viewer-top select,.viewer-top button{color:var(--text)}
.viewer-top select{background:var(--surface)}
.viewer-top .theme-toggle{margin-left:0;font-size:11px;padding:0 7px}
.viewer-top #reader-settings-toggle{margin-left:0}
#reader-settings,#reader-settings select{background:var(--surface);color:var(--text);border-color:var(--divider)}
.webtoon-reader,.toon-panel{background:var(--surface)}
.episode-hook,.episode-opening small,.episode-opening>p,.end-word,.reader-credit,.next-tease,.viewer-progress output,.viewer-progress button{color:var(--quiet)}
.episode-opening>span,.reader-mode .episode-opening>span,.balloon.song,.viewer-links a:last-child,.reader-mode .viewer-links a{color:var(--accent)}
.balloon.narration,.balloon.thought{color:var(--text)}
.balloon.speech,.balloon.whisper,.balloon.shout{color:#171717}
.viewer-side button{background:var(--surface);color:var(--secondary);border-color:var(--divider)}
.webtoon-reader .cut-music{background:var(--surface);border-color:var(--divider);color:var(--text)}
.cut-music button{background:transparent;color:var(--text)}
.cut-music small,.toon-ad small{color:var(--quiet)}
.toon-product-link{background:var(--soft-blue);color:var(--text);border-color:var(--divider)}
.toon-product-link:hover{background:var(--hover)}
.toon-product-cta,.toon-ad strong{color:var(--accent)}
.time-passage{background:linear-gradient(180deg,var(--surface) 0%,#f0f4f7 20%,#a3b5c2 48%,#526d7c 74%,#243e4b 100%)}
:root[data-theme=dark] .time-passage{background:linear-gradient(180deg,var(--surface) 0%,#293846 20%,#354957 48%,#2c4657 74%,#243e4b 100%)}
:root[data-theme=dark] .time-beat,:root[data-theme=dark] .time-beat:nth-child(2){color:#d4dfe9}
.time-passage+.toon-panel.scene-flashback{background:#243e4b}
.time-passage+.toon-panel.scene-flashback .balloon.narration{color:#f2f5f7}
.time-passage+.toon-panel.scene-flashback figure:after{background:linear-gradient(transparent,var(--surface))}
@media(max-width:760px){.theme-controls{gap:8px}.theme-toggle{width:30px;height:30px;padding:0}.theme-toggle>span{display:none}.viewer-top>div{gap:10px}.viewer-top .theme-toggle{width:28px;height:28px;padding:0;flex-shrink:0}.viewer-top select{max-width:none}.work-page .studio-top{gap:12px}.studio-top{align-items:center;padding-top:20px}}

/* Reader branding and undistorted line icons. */
.episode-title-wordmark{margin:0 auto 24px;max-width:100%}
.episode-title-wordmark .story-title-logo{width:340px;max-width:85%;height:auto;margin:0 auto}
.viewer-top .viewer-icon{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;padding:0;line-height:1}
.viewer-top .viewer-icon svg{display:block;width:22px;height:22px;flex-shrink:0;aspect-ratio:1}
.viewer-top .viewer-icon:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:5px}
@media(max-width:760px){.episode-title-wordmark .story-title-logo{width:260px;max-width:90%}.viewer-top .viewer-icon{width:28px;height:28px;flex-basis:28px}.viewer-top .viewer-icon svg{width:21px;height:21px}.viewer-top>div{gap:8px}}

/* The mother's question dissolves into the present concert lights. */
.time-passage.passage-stage{height:clamp(650px,110svh,1100px);background:linear-gradient(180deg,var(--surface) 0%,#b2c0d0 20%,#6474a4 48%,#302359 73%,#17112f 100%)}
.passage-stage .time-beat,.passage-stage .time-beat:nth-child(2),.passage-stage .time-beat:nth-child(3){color:#f4f1ff;text-shadow:0 1px 14px #19233960}
.passage-stage .time-beat:first-child{color:var(--text);text-shadow:none}
.passage-stage+.toon-panel.scene-stage{margin-top:0;padding-top:0;background:linear-gradient(#17112f 0%,var(--surface) 100%)}
.passage-stage+.toon-panel.scene-stage figure:before{content:'';position:absolute;inset:0 0 auto;height:24%;background:linear-gradient(#17112f,transparent);pointer-events:none;z-index:1}
.webtoon-reader .cut-music button{min-width:0;flex:1}
.webtoon-reader .cut-music button>div{min-width:0}
.webtoon-reader .cut-music .cut-play-disc{box-sizing:border-box;display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;aspect-ratio:1;border-radius:50%;padding:0;line-height:1;background:var(--soft-blue);color:var(--accent)}
.cut-play-disc svg{width:18px;height:18px;display:block}
.cut-play-disc .cover-pause-icon{display:none}
.is-playing .cut-play-disc .cover-play-icon{display:none}
.is-playing .cut-play-disc .cover-pause-icon{display:block}
@media(max-width:760px){.webtoon-reader .cut-music .cut-play-disc{flex-basis:32px;width:32px;height:32px}.cut-play-disc svg{width:16px;height:16px}.webtoon-reader .cut-music button{gap:10px}}

/* English lettering has its own asset, rather than a translated alt label. */
.stage-copy .story-title-logo-en{width:310px;max-width:86%}
.stage-detail .stage-copy .story-title-logo-en{width:330px;max-width:87%}
.episode-title-wordmark .story-title-logo-en{width:440px;max-width:94%}
@media(min-width:761px){.stage-copy .story-title-logo-en{width:425px;max-width:70%}.stage-detail .stage-copy .story-title-logo-en{width:460px;max-width:75%}}
@media(max-width:760px){.episode-title-wordmark .story-title-logo-en{width:320px;max-width:95%}}
