:root{--font-sans:Inter,"Helvetica Neue",Arial,Helvetica,sans-serif;--paper:#eee9dc;--ink:#262d2b;--muted:#68716c;--line:rgba(38,45,43,.2);--copper:#9a7453}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}
.topbar{position:fixed;z-index:3;top:0;left:0;right:0;padding:clamp(22px,3vw,46px) clamp(22px,4.5vw,76px);display:flex;align-items:flex-start;justify-content:space-between;gap:24px;pointer-events:none}.topbar>*{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#65716e}.diamond{color:var(--copper);margin:0 .3em}.identity h1{font:normal clamp(38px,4.2vw,64px)/1 var(--font-sans);letter-spacing:-.045em;margin:14px 0 7px}.identity i,.recording-identity i{font-style:normal;color:var(--copper);padding:0 .05em}.identity p{font:400 clamp(13px,1.2vw,16px) var(--font-sans);color:#747b76;margin:0}.top-actions{display:flex;align-items:center;gap:8px}.top-actions button{border:1px solid rgba(43,51,50,.33);background:rgba(240,237,229,.56);color:var(--ink);padding:9px 12px;min-height:35px;text-transform:uppercase;font-size:10px;letter-spacing:.11em;white-space:nowrap}.top-actions button:hover,.top-actions button[aria-pressed=true]{background:rgba(255,252,243,.95)}#fullscreenButton{font-size:19px;line-height:10px;padding:9px 12px}.recording-identity{display:none}.recording-identity small{display:block;font:12px var(--font-sans);letter-spacing:.14em;color:#596461;margin-top:8px}
.margin-note{position:fixed;z-index:2;top:50%;left:clamp(22px,4.5vw,76px);transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;display:flex;align-items:center;gap:15px;color:#7b8078;font-size:9px;letter-spacing:.19em}.margin-note span{height:42px;width:1px;background:var(--copper)}.phase-label{position:fixed;right:clamp(23px,4.5vw,76px);top:52%;font:10px var(--font-sans);letter-spacing:.18em;color:#7b8078;writing-mode:vertical-rl}.lyric-overlay{position:fixed;z-index:4;left:50%;bottom:clamp(134px,17vh,195px);transform:translateX(-50%);width:min(78vw,850px);text-align:center;font:500 clamp(24px,3.2vw,46px)/1.18 var(--font-sans);letter-spacing:-.02em;color:var(--ink);text-shadow:0 0 16px #f7f2e7,0 0 3px #f7f2e7;white-space:pre-line;pointer-events:none;opacity:0;transition:opacity .25s}.lyric-overlay.has-cue{opacity:1}
.dock{position:fixed;z-index:5;left:clamp(20px,4.5vw,76px);right:clamp(20px,4.5vw,76px);bottom:clamp(18px,3vw,46px);min-height:82px;padding:17px 24px;display:grid;grid-template-columns:minmax(150px,1fr) minmax(260px,1.8fr) minmax(70px,.45fr);gap:22px;align-items:center;background:rgba(241,237,228,.79);border:1px solid rgba(255,255,255,.6);box-shadow:0 9px 45px rgba(42,46,42,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.track-meta{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.track-name{font:15px var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.track-meta button{border:0;background:none;color:#66716c;padding:2px 0;font-size:10px;text-decoration:underline;text-underline-offset:3px}.track-meta button span{color:var(--copper)}.transport{display:flex;align-items:center;gap:15px;min-width:0}.play-button{flex:none;border:0;border-radius:50%;width:43px;height:43px;display:grid;place-items:center;background:#29312e;color:#f5efe2;transition:transform .2s,background .2s}.play-button:hover{transform:scale(1.06);background:#4d5a55}.play-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.play-button .play-icon{fill:currentColor;stroke:none;margin-left:2px}.play-button .pause-icon{display:none}.play-button.is-playing .play-icon{display:none}.play-button.is-playing .pause-icon{display:block}.time{font-size:10px;color:#5b6661;min-width:28px;font-variant-numeric:tabular-nums}.transport input[type=range]{flex:1;min-width:35px;appearance:none;background:transparent;height:18px;cursor:pointer}.transport input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--copper) var(--progress,0%),rgba(49,60,58,.18) var(--progress,0%))}.transport input[type=range]::-moz-range-track{height:2px;background:rgba(49,60,58,.18)}.transport input[type=range]::-moz-range-progress{height:2px;background:var(--copper)}.transport input[type=range]::-webkit-slider-thumb{appearance:none;width:8px;height:8px;border-radius:50%;background:var(--copper);margin-top:-3px}.transport input[type=range]::-moz-range-thumb{width:8px;height:8px;border-radius:50%;border:0;background:var(--copper)}.volume-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px}.volume-controls label{font-size:9px;letter-spacing:.12em;color:#65716e}.volume-controls input{width:67px;accent-color:var(--copper)}
.break-button{flex:none;border:1px solid var(--copper);background:#95603e;color:#fff9ef;padding:12px 15px;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s}.break-button:hover{background:#6d472f;transform:translateY(-1px)}.break-button span{margin-left:5px;font-size:13px}
dialog{width:min(620px,calc(100vw - 32px));max-height:85vh;padding:26px;background:#f2eee4;border:1px solid var(--line);color:var(--ink);box-shadow:0 25px 90px rgba(28,32,30,.25)}dialog::backdrop{background:rgba(20,28,27,.42);backdrop-filter:blur(4px)}dialog form{display:flex;flex-direction:column;gap:13px}.dialog-heading h2{font:normal 29px var(--font-sans);margin:7px 0 0}dialog p{font-size:13px;line-height:1.5;color:#596360;margin:0}dialog label{font-size:12px}.check{display:flex;align-items:center;gap:7px}dialog textarea{width:100%;height:min(39vh,320px);resize:vertical;border:1px solid #afb4ab;background:#fffdf7;color:var(--ink);padding:12px;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}.error{min-height:17px;color:#9c3330!important}.dialog-actions{display:flex;justify-content:flex-end;gap:8px}.dialog-actions button{padding:9px 17px;border:1px solid #626b66;background:transparent;color:var(--ink)}.dialog-actions button[type=submit]{background:var(--ink);color:#f6f1e6}.status{position:fixed;z-index:8;top:24px;left:50%;transform:translateX(-50%);padding:10px 14px;color:white;background:rgba(38,42,43,.87);font-size:12px;opacity:0;pointer-events:none;transition:opacity .25s}.status.show{opacity:1}
body.recording-view .identity,body.recording-view .margin-note,body.recording-view .phase-label,body.recording-view .top-actions>*:not(#recordButton){display:none}body.recording-view .recording-identity{position:fixed;top:clamp(34px,7vh,90px);left:20px;right:20px;display:block;text-align:center;font:normal clamp(26px,4vw,44px) var(--font-sans);pointer-events:none}body.recording-view #recordButton{position:fixed;top:12px;right:12px;opacity:.25;font-size:9px;padding:6px}body.recording-view #recordButton:hover,body.recording-view #recordButton:focus-visible{opacity:1}body.recording-view .dock{left:50%;right:auto;bottom:18px;transform:translateX(-50%);width:max-content;min-height:0;display:flex;padding:7px 10px;gap:8px;background:rgba(242,238,228,.22);border:1px solid rgba(50,60,55,.12);box-shadow:none;opacity:.23;transition:opacity .2s}body.recording-view .dock:hover,body.recording-view .dock:focus-within{opacity:1}body.recording-view .track-meta,body.recording-view .time,body.recording-view #timeline,body.recording-view .volume-controls{display:none}body.recording-view .play-button{width:32px;height:32px;background:transparent;color:var(--ink)}body.recording-view .lyric-overlay{bottom:clamp(100px,15vh,200px)}
body.recording-view .break-button{padding:8px 11px;font-size:9px}
@media(max-width:850px){.dock{grid-template-columns:1fr minmax(220px,1.5fr);gap:8px 16px}.volume-controls{grid-column:2;justify-content:flex-end}.margin-note,.phase-label{display:none}}
@media(max-width:620px){.topbar{padding:20px;flex-wrap:wrap;gap:12px}.identity{width:100%}.identity h1{font-size:40px;margin:9px 0 5px}.identity p{font-size:12px}.top-actions{margin-left:auto;gap:6px}.top-actions button{padding:7px 9px;min-height:30px;font-size:9px}.dock{left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));padding:13px 15px;grid-template-columns:1fr;gap:10px}.track-meta{display:grid;grid-template-columns:1fr auto;gap:3px 8px}.track-meta .eyebrow{grid-column:1/-1}.track-name{font-size:14px}.track-meta button{grid-column:2;grid-row:2}.transport{grid-row:2}.volume-controls{grid-column:1;grid-row:3;border-top:1px solid var(--line);padding-top:8px}.lyric-overlay{width:calc(100vw - 42px);bottom:210px;font-size:clamp(22px,6vw,32px)}}
@media(max-width:620px){.transport{gap:8px}.break-button{padding:10px 9px;font-size:9px}.break-button span{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

.top-actions{flex-wrap:wrap;justify-content:flex-end}


#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#eee9dc;pointer-events:none}#scene{z-index:1}.grain{z-index:2}
.loader{position:fixed;inset:0;z-index:9;background:#eee9dc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;color:#586c6b;font-size:10px;font-weight:700;letter-spacing:.23em;text-transform:uppercase;transition:opacity .7s,visibility .7s;pointer-events:none}.loader.hidden{opacity:0;visibility:hidden}.loader-mark{font:normal 56px var(--font-sans);letter-spacing:-.045em;color:#293b3a}.loader-line{width:min(240px,60vw);height:1px;background:rgba(40,70,70,.2);overflow:hidden}.loader-line i{display:block;width:34%;height:100%;background:#648b88;animation:loader-travel 1.7s ease-in-out infinite}@keyframes loader-travel{from{transform:translateX(-110%)}to{transform:translateX(310%)}}

/* A diffuse bubble surrounds the whole lyric line rather than each letter. */
.lyric-overlay{width:max-content;max-width:min(78vw,850px);padding:16px 32px;isolation:isolate;-webkit-text-stroke:0;text-shadow:none}
.lyric-overlay::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:rgba(255,251,239,.78);box-shadow:0 0 22px 12px rgba(255,251,239,.42);filter:blur(12px);pointer-events:none}
@media(max-width:620px){.lyric-overlay{width:max-content;max-width:calc(100vw - 42px);padding:12px 20px}.lyric-overlay::before{filter:blur(9px);box-shadow:0 0 16px 8px rgba(255,251,239,.42)}}

.scene-actions{display:flex;align-items:center;gap:6px;flex:none}.scene-action{display:grid;place-items:center;width:38px;height:38px;padding:8px;border:1px solid var(--line);border-radius:6px;background:rgba(255,252,243,.5);color:var(--ink);flex:none}.scene-action svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.scene-action.break-button{background:var(--copper);border-color:var(--copper);color:#fff9ef;padding:8px}.scene-action:hover{background:rgba(255,252,243,.95)}.scene-action.break-button:hover{background:#805b3b}body.recording-view .scene-action{width:32px;height:32px;padding:5px}body.recording-view .scene-action.break-button{padding:5px}@media(max-width:620px){.scene-action{width:36px;height:36px;padding:7px}.scene-action.break-button{padding:7px}}

/* Persistent provenance marker in both the full player and record view. */
.concept-label{display:block;width:max-content;margin-bottom:8px;color:#725d4d;font:700 9px/1.2 var(--font-sans);letter-spacing:.2em;text-shadow:0 1px 12px #f8f4e8}
body.recording-view .recording-identity .concept-label{margin:0 auto 10px;font-size:9px}

/* The background switch remains usable in the minimal record view. */
#sculpture{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#eee9dc;pointer-events:none}
.background-control{display:flex;align-items:center;gap:7px;min-height:35px;padding:0 9px;border:1px solid rgba(43,51,50,.33);background:rgba(240,237,229,.65);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.background-control select{max-width:110px;border:0;background:transparent;color:var(--ink);font-size:10px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.top-actions{flex-wrap:wrap;justify-content:flex-end;max-width:min(100%,870px)}
.background-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
body.recording-view .top-actions>*:not(#recordButton):not(.background-controls){display:none}
body.recording-view .top-actions>#backgroundControls{display:flex;position:fixed;top:12px;left:12px;right:135px;justify-content:flex-start;opacity:.55}
body.recording-view .background-controls:hover,body.recording-view .background-controls:focus-within{opacity:1}
@media(max-width:620px){.background-control{min-height:30px;padding:0 7px;font-size:8px}.background-control select{max-width:88px;font-size:9px}.top-actions{width:100%}.background-controls{width:100%;justify-content:flex-start;gap:6px}.background-controls .background-control{flex:1 1 130px;justify-content:space-between}body.recording-view .top-actions>#backgroundControls{top:48px;right:12px;width:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px}body.recording-view .background-controls .background-control{flex:none;min-height:27px;width:100%}}
.identity{position:relative;isolation:isolate}
.identity::before{content:"";position:absolute;z-index:-1;inset:-30px -65px -35px -45px;pointer-events:none;background:radial-gradient(ellipse at 30% 40%,rgba(247,243,232,.78),rgba(247,243,232,.34) 51%,transparent 76%);filter:blur(10px)}

/* Fractal uses its native deep-blue glow; controls remain legible over it. */
#fractal{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;background:#020919;pointer-events:none}
body.fractal-mode{--ink:#f2f3e9;--muted:#d0d9dc;--line:rgba(216,239,245,.34);background:#020919;color:var(--ink)}
body.fractal-mode .identity::before{background:radial-gradient(ellipse at 35% 40%,rgba(0,10,24,.75),rgba(0,10,24,.36) 55%,transparent 80%)}
body.fractal-mode .identity p,body.fractal-mode .eyebrow,body.fractal-mode .margin-note,body.fractal-mode .phase-label,body.fractal-mode .recording-identity small{color:#d2e4e7;text-shadow:0 1px 9px #001529}
body.fractal-mode .identity h1,body.fractal-mode .recording-identity{color:#f2f2e9;text-shadow:0 2px 18px #001529}
body.fractal-mode .concept-label{color:#e9b882}
body.fractal-mode .top-actions button,body.fractal-mode .background-control{color:#e7f5f6;background:rgba(3,17,32,.66);border-color:rgba(176,228,239,.52)}
body.fractal-mode .background-control select{color:#e7f5f6;background:#071c31}
body.fractal-mode .dock{color:#eaf3f2;background:rgba(3,17,32,.77);border-color:rgba(175,224,236,.42);box-shadow:0 9px 45px rgba(0,5,14,.25)}
body.fractal-mode .time,body.fractal-mode .volume-controls label,body.fractal-mode .track-meta button{color:#cee2e7}
body.fractal-mode .play-button{background:#d9edf0;color:#072032}
body.fractal-mode .scene-action{color:#eaf3f3;background:rgba(5,27,48,.82);border-color:rgba(198,235,240,.5)}
body.fractal-mode .scene-action.break-button{color:#fff3e4;background:#7f583a;border-color:#c89460}
body.fractal-mode .lyric-overlay{color:#f3f7f2;text-shadow:0 2px 14px #001329,0 1px 4px #001329}
body.fractal-mode .grain{opacity:.045}

body.wall-hidden .phase-label,body.wall-hidden .margin-note,body.wall-hidden #breakButton,body.wall-hidden #verticalOrbitButton{display:none}#wallVisibilityButton[aria-pressed=false],#sputnikVisibilityButton[aria-pressed=false]{opacity:.65}
/* Roll controls stay available with the wall hidden and in record view. */
.bank-button{display:none;touch-action:none;user-select:none;-webkit-user-select:none}
body.bank-mode .bank-button{display:grid}
body.fractal-mode .bank-button{background:rgba(3,17,32,.66);color:#e7f5f6;border-color:rgba(176,228,239,.52)}
body.fractal-mode .bank-button:hover,body.fractal-mode .bank-button:active{background:rgba(24,63,83,.9)}
@media(max-width:620px){.transport{flex-wrap:wrap}.transport .scene-actions{order:5;width:100%;justify-content:center}.transport #timeline{min-width:45px}body.recording-view .dock{width:min(360px,calc(100vw - 28px))}body.recording-view .transport{width:100%}}
@media(min-width:621px) and (max-width:1050px){.transport{flex-wrap:wrap}.transport .scene-actions{order:5;width:100%;justify-content:center}}

/* Fold's optional structure follows the active background, including fallbacks. */
[hidden]{display:none!important}
@media(max-width:620px){body.recording-view .recording-identity{top:clamp(50px,7vh,90px)}}

/* Player-dock shortcuts mirror the header controls and wrap on narrow screens. */
.scene-actions{flex-wrap:wrap}
body.recording-view .dock{flex-wrap:wrap}

.dock-visual-choices{grid-column:1/-1;display:flex;justify-content:flex-end;gap:14px;flex-wrap:wrap}
.visual-choice-group{display:flex;gap:5px}
.visual-choice-group .scene-action[aria-pressed=true]{border-color:var(--copper);background:rgba(154,116,83,.35);box-shadow:inset 0 0 0 1px var(--copper)}
.zoom-choice{position:relative}.zoom-choice svg{opacity:.55}.zoom-choice span{position:absolute;right:3px;bottom:2px;font-size:9px;font-weight:700;line-height:1;background:var(--paper);color:#263735;border-radius:2px;padding:1px}
body.fractal-mode .zoom-choice span{background:#071c31;color:#e7f5f6}
body.recording-view .dock-visual-choices{flex:1 0 100%;justify-content:center}
@media(max-width:620px){.dock-visual-choices{grid-row:4;justify-content:center;gap:10px}.visual-choice-group .scene-action{width:31px;height:31px;padding:5px}}

.rewind-button{touch-action:none;user-select:none;-webkit-user-select:none}
.rewind-button svg{fill:currentColor;stroke:none}
.rewind-button[aria-pressed=true]{background:var(--copper);border-color:var(--copper);color:#fff9ef}
.rewind-button:disabled{cursor:not-allowed;opacity:.45}
body.fractal-mode .rewind-button[aria-pressed=true]{background:#9a7453;color:#fff9ef}

body.recording-view #recordingArtist{text-align:center;width:100%}

body.recording-view .top-actions>#backgroundControls{display:none!important}