/* Owner-directed immersive preview. Complete schemes, compact landing, live board edge. */
:root{--muted:color-mix(in srgb,var(--paper) 72%,var(--black));--rule:color-mix(in srgb,var(--paper) 24%,transparent);--red:var(--accent)}
:root[data-theme=light]{--muted:color-mix(in srgb,var(--paper) 72%,var(--black));--rule:color-mix(in srgb,var(--paper) 24%,transparent)}
.topbar{height:72px;padding-inline:3vw;background:var(--black)}
.topbar-right{gap:24px}.brand-navigation{position:relative}.brand{width:76px;height:52px;display:flex;gap:12px;padding:5px;border:0;background:none;cursor:pointer}.brand svg{width:40px;height:40px;animation:star-turn 28s ease-in-out infinite}.menu-chevron{font:22px var(--mono);transition:transform .8s}.brand[aria-expanded=true] .menu-chevron{transform:rotate(180deg)}.brand[aria-expanded=true] svg{filter:drop-shadow(0 0 9px var(--accent))}
.star-menu{position:absolute;left:0;top:calc(100% + 15px);width:min(350px,calc(100vw - 40px));padding:18px;background:var(--panel);border:1px solid var(--rule);box-shadow:0 25px 80px #0005;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .65s,transform .8s,visibility .65s;pointer-events:none}
.star-menu.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.star-menu a,.star-menu button{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:54px;width:100%;padding:10px 12px;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--paper);font:18px var(--mono);text-align:left;transform:translateX(-8px);transition:transform .9s,background .6s,color .6s}
.star-menu.is-open a,.star-menu.is-open button{transform:none}.star-menu :nth-child(2){transition-delay:.05s}.star-menu :nth-child(3){transition-delay:.1s}.star-menu :nth-child(4){transition-delay:.15s}.star-menu :nth-child(5){transition-delay:.2s}.star-menu :nth-child(6){transition-delay:.25s}
.star-menu a:hover,.star-menu button:hover{background:var(--black);color:var(--accent)}
.appearance-panel{top:calc(100% + 8px);right:3vw;width:min(490px,calc(100vw - 32px));max-height:calc(100svh - 100px);overflow:auto;background:var(--panel);padding:20px}
.palette-panel{padding-top:6px}.palette-panel legend{font-size:20px}.scheme-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.palette-panel .scheme-card{position:relative;display:grid;grid-template-columns:1fr;gap:8px;min-height:80px;padding:10px 12px;border:1px solid var(--rule);background:var(--black);transition:transform .6s,border-color .6s,background .8s;font-size:16px}
.scheme-card input{position:absolute;right:10px;bottom:10px;width:17px;height:17px;margin:0}.scheme-card>span:last-child{padding-right:23px}
.scheme-preview{height:26px;width:100%;display:block;border:1px solid #80808066}.scheme-card:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.scheme-card:hover{transform:translateY(-2px)}
/* Header + hero + desk expose 100–150px of the actual Scriptboard at first landing. */
.hero{height:clamp(280px,calc(100svh - 430px),740px);min-height:0;max-height:none;background:var(--black)}
.hero-copy{left:3vw;bottom:8%;width:65%}.eyebrow{margin-bottom:23px}.record-title{font-size:clamp(84px,min(11.5vw,15svh),200px);line-height:.8;text-shadow:0 3px 20px color-mix(in srgb,var(--black) 60%,transparent)}
.hero-art{right:-2%;top:3%;width:65%;height:104%;animation:being-drift 15s ease-in-out infinite;transform:translate(var(--pointer-x,0px),var(--pointer-y,0px))}
.hero-being{background:linear-gradient(135deg,var(--accent) 18%,var(--secondary) 51%,var(--accent) 78%);background-size:220% 220%;animation:chromatic-tide 17s ease-in-out infinite;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 22%,transparent))}
.hero:before{background:linear-gradient(90deg,var(--black),color-mix(in srgb,var(--black) 92%,transparent) 26%,transparent 64%),linear-gradient(0deg,var(--black),transparent 26%)}
.cinema-field{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cinema-field i{position:absolute;border-radius:50%;filter:blur(48px);opacity:.24;animation:light-migration 19s ease-in-out infinite alternate;background:var(--accent);width:48%;height:95%;right:5%;top:-15%}
.cinema-field i:nth-child(2){background:var(--secondary);width:32%;height:80%;right:28%;top:25%;animation-delay:-9s;animation-duration:25s;opacity:.2}
.cinema-field i:nth-child(3){width:70%;height:2px;right:-10%;top:50%;filter:blur(4px);border-radius:0;rotate:-32deg;animation:light-sweep 12s ease-in-out infinite;opacity:.5}
.crossline{left:59%;animation:line-breathe 8s ease-in-out infinite;opacity:.6}.hero.is-crossfading .hero-art{opacity:0;filter:blur(14px);transform:translateY(18px) scale(1.035)}
body[data-playing=true] .hero-art{animation:being-drift 10s ease-in-out infinite}
.listening-desk{padding:0 3vw 0}.transport-row{min-height:98px;gap:24px;grid-template-columns:90px minmax(0,1fr) 70px}.play-button{width:90px;height:72px;position:relative;overflow:hidden}.play-button:after{content:'';position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 42%,#fff5 50%,transparent 58%);transform:translateX(-90%);animation:play-sheen 9s ease-in-out infinite;pointer-events:none}.signal-glyph{font-size:50px}.signal-glyph span{animation:star-turn 20s ease-in-out infinite;display:block}
.seek-caption{padding-bottom:1px}.seek-times{font-size:16px}.record-index{grid-template-columns:repeat(6,minmax(0,1fr))}.record-index button{min-height:92px;padding:12px 13px;gap:7px;background:color-mix(in srgb,var(--panel) 40%,transparent)}.record-index button strong{font-size:16px;line-height:1.25}.record-index button[aria-current=true]{background:var(--panel)}.record-index button:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 25%,color-mix(in srgb,var(--secondary) 12%,transparent),transparent 75%);opacity:0;transition:opacity 1s}.record-index button:hover:after{opacity:1}.record-index button[aria-current=true]:before{background:linear-gradient(90deg,var(--accent),var(--secondary),var(--accent));background-size:200% 100%;animation:chromatic-tide 7s ease-in-out infinite}
.suno-origin{margin:0;padding:10px 0;min-height:64px;border:0;gap:18px}.suno-origin p{font:16px/1.4 var(--mono);color:var(--muted)}.suno-origin a{border:0;font:16px var(--mono);min-height:44px;padding:10px 0;gap:16px}.suno-origin a span{display:inline-block;transition:transform .8s}.suno-origin a:hover span{transform:translate(3px,-3px)}
.about-board{background:var(--board-paper);color:var(--paper);min-height:850px;height:100svh;border-top:1px solid var(--accent)}
/* Inherit the full selected scheme rather than overriding it with one accent. */
.about-board{--board-paper:var(--scheme-board-paper);--board-ink:var(--scheme-board-ink)}
.board-invitation{position:absolute;top:22px;left:3vw;right:3vw;z-index:5;display:flex;align-items:center;justify-content:space-between;font:18px var(--mono);color:var(--paper);pointer-events:auto}
.board-invitation>span:first-child{background:var(--black);padding:12px 16px;border:1px solid var(--rule)}.board-arrow{display:grid;place-items:center;background:var(--black);width:46px;height:46px;border:1px solid var(--rule);animation:arrow-descent 3.6s ease-in-out infinite}
.about-copy{top:24%;left:6%;padding:22px;background:var(--black);border-left:2px solid var(--accent)}.about-copy h2{font-size:clamp(64px,8vw,130px)}.about-copy p{font-size:clamp(22px,2vw,30px)}
.about-starman{background:linear-gradient(145deg,var(--accent),var(--secondary),var(--accent));background-size:200% 200%;animation:being-drift 20s ease-in-out infinite,chromatic-tide 18s ease-in-out infinite}
.board-frame{animation:frame-breathe 7s ease-in-out infinite}
@keyframes chromatic-tide{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
@keyframes light-migration{from{transform:translate(-7%,-4%) scale(.95)}to{transform:translate(14%,12%) scale(1.12)}}
@keyframes light-sweep{0%,100%{transform:translateY(-90px);opacity:.1}50%{transform:translateY(70px);opacity:.55}}
@keyframes star-turn{0%,15%{transform:rotate(0) scale(.92)}45%,60%{transform:rotate(90deg) scale(1.05)}90%,100%{transform:rotate(180deg) scale(.92)}}
@keyframes line-breathe{0%,100%{opacity:.25;scale:1 .85}50%{opacity:.8;scale:1 1}}
@keyframes play-sheen{0%,65%{transform:translateX(-90%)}100%{transform:translateX(90%)}}
@keyframes arrow-descent{0%,100%{transform:translateY(-3px)}50%{transform:translateY(7px)}}
@keyframes frame-breathe{0%,100%{opacity:.45}50%{opacity:1}}
@media(min-width:1700px){.hero-art{right:0;width:63%}.hero-copy{width:65%}.record-index button strong{font-size:18px}}
@media(min-width:701px) and (max-width:1000px){.record-index{grid-template-columns:repeat(6,minmax(0,1fr))}.record-index button{padding:10px 8px}.record-index button strong{font-size:15px}.record-index button:nth-child(n+4){border-top:0}.hero-copy{width:70%}.topbar .external{gap:14px;font-size:14px}}
@media(max-width:700px){
 .topbar{height:64px;min-height:64px;padding:6px 18px}.topbar-right{gap:14px}.brand{width:66px;height:48px}.brand svg{width:34px;height:34px}.appearance-panel{right:16px;max-height:calc(100svh - 84px);padding:15px}.appearance-panel>button{font-size:14px}.scheme-grid{gap:8px}.palette-panel .scheme-card{padding:8px;min-height:74px}.star-menu{left:0;top:calc(100% + 8px)}
 .hero{height:clamp(250px,calc(100svh - 350px),560px);min-height:0;max-height:none}.hero-copy{left:20px;bottom:22px;width:calc(100% - 40px)}.record-title{font-size:clamp(68px,min(18vw,14svh),116px)}.eyebrow{font-size:15px;gap:10px;margin-bottom:20px}.eyebrow-index{margin-left:0}.hero-art{height:104%;width:96%;right:-3%;top:3%;opacity:.9}.hero:before{background:linear-gradient(90deg,color-mix(in srgb,var(--black) 82%,transparent),transparent 100%),linear-gradient(0deg,var(--black),transparent 65%)}
 .listening-desk{padding:0 18px}.transport-row{min-height:88px;grid-template-columns:64px minmax(0,1fr);gap:13px}.play-button{height:65px;width:64px}.seek-caption{font-size:14px;letter-spacing:0}.seek-caption span:last-child{display:none}.seek-times{font-size:14px}.record-index{display:flex;overflow:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--accent) var(--black)}.record-index button{flex:0 0 155px;min-height:78px;scroll-snap-align:start;padding:10px 12px;gap:6px}.record-index button strong{font-size:15px}.record-index button span{font-size:14px}.record-index button:nth-child(n){border-top:0;border-left:0;border-right:1px solid var(--rule)}
 .suno-origin{min-height:58px;padding:7px 0;flex-direction:row;align-items:center;gap:10px}.suno-origin p{font-size:14px;max-width:23ch}.suno-origin a{font-size:14px;min-width:105px;width:auto;white-space:nowrap;gap:5px}.suno-origin a span{display:none}
 .board-invitation{top:18px;left:18px;right:18px;font-size:16px}.about-board{min-height:980px;height:115svh}.about-copy{top:160px;left:24px;right:24px;padding:20px;width:auto}.about-copy h2{font-size:68px}.about-starman{top:40%;height:55%;width:130%;right:-30%}.board-links{left:24px}.cinema-field i{filter:blur(25px)}
}
[data-visible=false] .cinema-field i,[data-visible=false] .hero-being{animation-play-state:paused}
html[data-motion=off] .hero-art{transform:none!important}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-art{transform:none!important}}
/* Official marks sit on neutral grounds; thematic light lives around them. */
.brand-destination{display:flex!important;align-items:center;justify-content:space-between;gap:20px;background:#111!important;color:#fff!important;padding:14px 20px;border:1px solid #ffffff24;min-height:58px}
.platform-logo{display:block;width:auto;object-fit:contain;flex-shrink:0}.suno-logo{height:26px}.youtube-logo{height:28px}
.topbar{height:86px}.topbar .external{gap:14px}.topbar .brand-destination{padding:12px 18px}.topbar .brand-destination:hover{border-color:var(--accent);transform:translateY(-2px)}
.star-menu .brand-destination{margin-top:9px;padding:16px 20px}.star-menu .suno-logo{height:24px}.star-menu .youtube-logo{height:26px}
.hero{height:clamp(280px,calc(100svh - 472px),740px)}
.platform-dock{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:center;padding:12px 0;min-height:92px}
.platform-dock p{font:16px/1.5 var(--mono);margin:0;color:var(--muted)}
.platform-card{position:relative;display:flex;align-items:center;justify-content:center;gap:26px;min-height:70px;padding:18px 24px;background:#111;color:#fff;border:1px solid var(--rule);overflow:hidden}
.platform-card:before{content:'';position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,var(--accent),var(--secondary));transform:scaleX(.15);transform-origin:left;transition:transform 1.4s}
.platform-card:hover:before{transform:scaleX(1)}.platform-card:hover{border-color:var(--accent);box-shadow:0 5px 32px color-mix(in srgb,var(--accent) 12%,transparent);transform:translateY(-3px)}
.platform-action{font:16px var(--mono)}.platform-card .suno-logo{height:30px}.platform-card .youtube-logo{height:32px}.platform-arrow{margin-left:auto;font-size:25px;transition:transform 1s}.platform-card:hover .platform-arrow{transform:translate(3px,-3px)}
.board-links{flex-wrap:wrap;width:min(680px,85%)}.board-platform{min-width:180px;border-radius:0}.board-platform .suno-logo{height:30px}.board-platform .youtube-logo{height:30px}
.wild-card{grid-column:1/-1}.wild-card .scheme-preview{background:linear-gradient(115deg,#fa1689,#bcff00,#1e24f6,#ff7900,#2bffe8);background-size:250% 100%;animation:chromatic-tide 8s ease-in-out infinite}
/* The neutral white portal is behind the ink, anchored to each being's anatomy. */
.being-orb{position:absolute;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:0 0 28px #ffffff24;z-index:0;pointer-events:none}
.hero-being{position:relative;z-index:1}.hero-art{opacity:1}.about-starman{background:none;mask:none;-webkit-mask:none;opacity:1;animation:being-drift 20s ease-in-out infinite}
.about-being{position:absolute;inset:0;z-index:1;mask:var(--about-art) center/contain no-repeat;-webkit-mask:var(--about-art) center/contain no-repeat;background:linear-gradient(145deg,var(--accent),var(--secondary),var(--accent));background-size:200% 200%;animation:chromatic-tide 18s ease-in-out infinite}
@media(max-width:1000px){.platform-dock{gap:12px;grid-template-columns:1fr 1fr}.platform-dock p{display:none}.platform-card{gap:18px}.topbar .brand-destination{padding:12px}.topbar .suno-logo{height:22px}.topbar .youtube-logo{height:24px}}
@media(max-width:700px){.topbar{height:64px}.hero{height:clamp(250px,calc(100svh - 354px),560px)}.platform-dock{min-height:70px;padding:8px 0;gap:10px}.platform-card{min-height:54px;padding:12px 14px;gap:10px}.platform-action,.platform-arrow{display:none}.platform-card .suno-logo{height:24px}.platform-card .youtube-logo{height:25px}.board-links{gap:12px;width:calc(100% - 48px)}.board-platform{min-width:140px;padding:14px;gap:10px}.board-platform .suno-logo{height:26px}.board-platform .youtube-logo{height:26px}.about-starman{pointer-events:auto}}
/* Official YouTube download includes clear space inside the PNG. Size by the visible mark. */
.youtube-mark{position:relative;display:block;flex-shrink:0;width:154px;height:32px}
.youtube-mark .youtube-logo{position:absolute!important;max-width:none!important;left:50%;top:50%;height:64px!important;width:auto!important;transform:translate(-50%,-50%);pointer-events:none}
.topbar .youtube-mark{width:135px;height:28px}.topbar .youtube-mark .youtube-logo{height:56px!important}
.hero{container-type:size}.record-title{font-size:clamp(68px,min(11.5vw,29cqh),200px)}
@media(max-width:700px){.record-title{font-size:clamp(68px,min(18vw,29cqh),116px)}.platform-card .youtube-mark{width:116px;height:24px}.platform-card .youtube-mark .youtube-logo{height:48px!important}.board-platform .youtube-mark{width:125px;height:26px}.board-platform .youtube-mark .youtube-logo{height:52px!important}}