/* Isolated Listening Room completion. The Scriptboard is the About surface. */
:root{--accent:#f2054e;--red:var(--accent);--black:#080808;--paper:#f2eee8;--muted:color-mix(in srgb,var(--paper) 66%,var(--black));--rule:color-mix(in srgb,var(--paper) 24%,transparent);--board-ink:#080808;--board-paper:var(--accent)}
:root[data-theme=light]{--black:#f2eee8;--paper:#111114;--muted:#55545a;--board-ink:var(--accent);--board-paper:#111114;color-scheme:light}
html{scroll-padding-top:32px}
body,.topbar,.listening-desk,.hero{transition:background-color 1.6s,color 1.6s,border-color 1.6s}
button,a{transition:color .7s,background-color .7s,border-color .7s,transform 1s,opacity .7s}
[hidden]{display:none!important}
.site-shell:after{opacity:.055}
.topbar{height:100px;padding-inline:4vw}.topbar-right{gap:30px}.external,.about-link{font:500 16px/1.4 var(--mono);letter-spacing:.06em}.external{gap:28px}.about-link{min-height:48px;display:flex;align-items:center;gap:12px}.about-link:hover{color:var(--accent)}
/* Single header control; appearance stays available without a second navigation band. */
.topbar{z-index:30}.brand{display:grid;place-items:center;width:52px;height:52px;color:var(--accent)}.brand svg{width:42px;height:42px;transition:transform 1.2s}.brand:hover svg{transform:rotate(90deg)}
.icon-button{position:relative;display:grid;place-items:center;width:60px;height:60px;padding:16px;background:transparent;border:1px solid var(--rule);color:var(--paper);border-radius:50%;cursor:pointer}
.icon-button svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icon-button:hover,.icon-button:focus-visible{color:var(--accent);border-color:var(--accent);transform:translateY(-3px)}
.appearance-toggle{width:48px;height:48px;padding:11px;border-color:transparent}.appearance-toggle[aria-expanded=true]{border-color:var(--accent);color:var(--accent)}
.appearance-panel{position:absolute;right:4vw;top:calc(100% + 12px);width:min(350px,calc(100vw - 40px));padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--black);border:1px solid var(--rule);box-shadow:0 25px 70px #0006;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .55s,transform .7s,visibility .55s;pointer-events:none}
.appearance-panel.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.appearance-panel>button{min-height:52px;border:1px solid var(--rule);color:var(--paper);background:transparent;display:flex;justify-content:center;align-items:center;gap:8px;font:16px var(--mono)}
.appearance-panel>button:hover{border-color:var(--accent)}.appearance-panel>button>span:first-child{font-size:25px}.appearance-panel button:disabled{opacity:.5;cursor:default}
.palette-panel{grid-column:1/-1;padding-top:16px}.palette-panel fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}.palette-panel legend{font:18px var(--mono);margin-bottom:12px}.palette-panel label{min-height:44px;display:flex;align-items:center;gap:14px;font:16px var(--mono);cursor:pointer}.palette-panel input{width:20px;height:20px;accent-color:var(--accent)}.palette-panel i{height:16px;width:16px;border-radius:50%;background:var(--swatch)}
.hero{height:clamp(570px,70svh,880px);min-height:570px;background:radial-gradient(ellipse at 75% 35%,color-mix(in srgb,var(--accent) 17%,var(--black)),var(--black) 65%)}
.hero:before{background:linear-gradient(90deg,var(--black) 0%,color-mix(in srgb,var(--black) 93%,transparent) 24%,transparent 69%),linear-gradient(0deg,var(--black),transparent 35%)}
.hero-art{right:-2%;top:-10%;width:min(77vw,1000px);height:115%;aspect-ratio:auto;opacity:.94;animation:being-drift 24s ease-in-out infinite;transition:opacity 1.2s,filter 1.2s,transform 1.6s}
.hero-being{width:100%;height:100%;background:var(--accent);mask:var(--being) center/contain no-repeat;-webkit-mask:var(--being) center/contain no-repeat;transition:background-color 3s}
.hero.is-crossfading .hero-art{opacity:0;filter:blur(10px);transform:translateY(22px) scale(1.025)}
.hero-copy{left:4vw;bottom:9%;width:66%}.eyebrow{font-size:16px;letter-spacing:.1em;margin-bottom:35px}.record-title{font-size:clamp(76px,10.5vw,190px)}.record-title.is-changing{animation:title-enter 1.2s cubic-bezier(.16,.7,.25,1)}
.crossline{background:linear-gradient(180deg,transparent,var(--accent),transparent)}
.listening-desk{padding:0 4vw 40px}.transport-row{grid-template-columns:100px minmax(0,1fr) 90px;gap:30px;min-height:135px}.play-button{height:86px;width:100px}.play-word{font-size:15px;letter-spacing:.07em}.seek-caption,.seek-times{font-size:16px;letter-spacing:.035em;color:var(--muted)}.seek-caption{padding-bottom:9px;color:var(--paper)}.seek-caption span:last-child{color:var(--muted)}.signal-glyph{font-size:64px}
#seek{height:34px}#seek::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--accent) var(--progress),var(--rule) var(--progress))}
.record-index button{min-height:125px;padding:20px 16px;color:var(--muted)}.record-index button span{font-size:16px}.record-index button strong{font-size:17px;line-height:1.45}.record-index button:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);transform:translateY(-3px)}
/* The animated board is the whole About surface. Copy has a quiet clearing. */
.about-board{--board-paper:var(--black);--board-ink:var(--accent);position:relative;isolation:isolate;min-height:900px;height:100svh;max-height:1300px;overflow:hidden;background:var(--board-paper);color:var(--paper);border-top:1px solid var(--rule);transition:background-color 1.6s,color 1.6s}
#scriptboard{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.board-frame{position:absolute;inset:24px;pointer-events:none;border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);z-index:1}.board-frame span{position:absolute;width:16px;height:16px;border:1px solid var(--accent)}.board-frame span:nth-child(1){top:-1px;left:-1px;border-right:0;border-bottom:0}.board-frame span:nth-child(2){top:-1px;right:-1px;border-left:0;border-bottom:0}.board-frame span:nth-child(3){bottom:-1px;left:-1px;border-right:0;border-top:0}.board-frame span:nth-child(4){bottom:-1px;right:-1px;border-left:0;border-top:0}
.about-copy{position:absolute;left:7%;top:27%;width:36%;max-width:600px;z-index:3;padding:26px 0}
.about-copy h2{margin:0 0 32px;font:900 clamp(58px,7vw,122px)/.85 var(--display);letter-spacing:-.025em}
.about-copy p{margin:0;font:400 clamp(22px,2.1vw,34px)/1.55 Arial,Helvetica,sans-serif;text-wrap:pretty;max-width:28ch}
.about-starman{position:absolute;right:-10%;top:7%;height:85%;width:75%;background:var(--accent);mask:var(--about-art) center/contain no-repeat;-webkit-mask:var(--about-art) center/contain no-repeat;animation:being-drift 26s ease-in-out infinite;z-index:2;pointer-events:none;opacity:.85}
.board-links{position:absolute;bottom:10%;left:7%;display:flex;gap:18px;z-index:4;padding:16px 0}
.board-links .icon-button{width:66px;height:66px;padding:18px;background:var(--black)}
.icon-tooltip{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,6px);opacity:0;visibility:hidden;white-space:nowrap;background:var(--black);color:var(--paper);padding:10px 14px;border:1px solid var(--rule);font:16px var(--mono);transition:opacity .5s,transform .5s,visibility .5s;pointer-events:none}
.icon-button:hover .icon-tooltip,.icon-button:focus-visible .icon-tooltip{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes being-drift{0%,100%{translate:0 0;rotate:-.35deg;scale:1}50%{translate:0 -10px;rotate:.35deg;scale:1.015}}@keyframes star-breathe{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1);opacity:.95}}
[data-visible=false] .hero-art,[data-visible=false] .about-starman,[data-visible=false] .about-star{animation-play-state:paused}
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(max-width:1000px){.record-index{grid-template-columns:repeat(3,minmax(0,1fr))}.record-index button:nth-child(n+4){border-top:1px solid var(--rule)}.record-index button:nth-child(4){border-left:1px solid var(--rule)}.topbar-right{gap:22px}.external{gap:18px}.about-copy{width:42%;left:6%}.about-starman{right:-22%;width:90%}}
@media(max-width:700px){.topbar{height:82px;min-height:82px;padding:12px 20px;flex-wrap:nowrap;gap:15px}.brand{width:44px;height:44px}.brand svg{width:36px;height:36px}.topbar-right{width:auto;gap:16px}.about-link{font-size:16px}.topbar .external{display:none}.appearance-panel{right:20px}.hero{height:660px;max-height:none;min-height:550px}.hero-copy{left:22px;bottom:35px;width:calc(100% - 40px)}.hero-art{height:85%;width:110%;right:-23%;top:-2%;opacity:.8}.hero:before{background:linear-gradient(0deg,var(--black) 0%,color-mix(in srgb,var(--black) 90%,transparent) 15%,transparent 80%)}.record-title{font-size:clamp(70px,17vw,114px)}.eyebrow{font-size:16px;margin-bottom:25px}.listening-desk{padding:0 20px 30px}.transport-row{grid-template-columns:75px 1fr;gap:16px;min-height:115px}.play-button{width:75px;height:78px}.seek-caption,.seek-times{font-size:16px}.signal-glyph{display:none}.record-index{grid-template-columns:repeat(2,1fr)}.record-index button{min-height:112px;padding:16px 10px}.record-index button strong{font-size:16px}.record-index button:nth-child(n+3){border-top:1px solid var(--rule)}.record-index button:nth-child(odd){border-left:1px solid var(--rule)}.about-board{height:1100px;min-height:100svh}.board-frame{inset:14px}.about-copy{top:70px;left:30px;right:30px;width:auto;max-width:440px;padding:15px 0}.about-copy h2{font-size:64px;margin-bottom:24px}.about-copy p{font-size:22px;max-width:28ch}.about-starman{top:37%;height:53%;width:135%;right:-32%}.board-links{left:30px;bottom:32px;gap:12px}.board-links .icon-button{width:58px;height:58px;padding:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html[data-hidden=true] *,html[data-hidden=true] *:before,html[data-hidden=true] *:after{animation-play-state:paused!important}


/* Spark positioning draft: public-facing artist provenance, no affiliation claim. */
.suno-origin{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px 0 8px;border-top:1px solid currentColor;margin-top:24px}
.suno-origin p{font-size:clamp(20px,2vw,30px);line-height:1.3;margin:0}
.suno-origin a{display:inline-flex;align-items:center;gap:20px;min-height:52px;padding:12px 20px;font-size:18px;text-decoration:none;border:1px solid currentColor;transition:background .8s,color .8s,transform .8s}
.suno-origin a:hover{transform:translateY(-3px)}
@media(max-width:600px){.suno-origin{align-items:flex-start;flex-direction:column;gap:18px}.suno-origin a{width:100%;justify-content:space-between;box-sizing:border-box}}