:root{font-family:Arial,Helvetica,sans-serif;color:#293126;background:#e9e3d6;--ink:#293126;--acid:#d6ef8e;--energy:0}*{box-sizing:border-box}body{margin:0;min-height:850px;height:100svh;overflow-x:hidden;transition:background 1.3s,color 1s}button,input,label,a{-webkit-tap-highlight-color:transparent}button,a,label{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,label:focus-within,input:focus-visible{outline:2px solid #758a3b;outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}.watercolor{position:fixed;inset:-15%;background:url('assets/watercolor.webp') center/cover;opacity:.67;filter:saturate(.8);pointer-events:none;transition:opacity 1.4s;mix-blend-mode:multiply}.grain{position:fixed;inset:0;z-index:2;pointer-events:none;background:url('assets/paper.png') repeat center/760px;mix-blend-mode:multiply;opacity:.28}#visualizer{position:fixed;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.4s;pointer-events:none}header{height:113px;padding:32px 44px;position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center;font-size:30px;letter-spacing:-1.5px;font-weight:800}.brand-icon{font-size:54px;font-weight:400;line-height:1}.brand small{display:block;font:8px monospace;letter-spacing:1.4px;margin-top:6px}.header-right{display:flex;align-items:center;gap:27px}.edition,.eyebrow{font:10px monospace;letter-spacing:1.4px}.pill{border:1px solid #59664b66;background:#ffffff15;border-radius:30px;font-size:11px;padding:12px 17px}.pill span{margin-left:12px}main{position:relative;height:calc(100% - 169px);min-height:681px;z-index:3}.intro{position:absolute;left:46px;top:44px;z-index:2;pointer-events:none}.intro h1{font-size:clamp(42px,4.5vw,69px);font-weight:400;line-height:.98;letter-spacing:-3.5px;margin:22px 0}.intro em{font-family:Georgia,serif;font-weight:400}.intro-note{font-size:11px;letter-spacing:.15px;margin-top:20px}.room{position:absolute;width:min(720px,66vw);height:510px;top:-6px;left:50%;transform:translateX(-50%)}.orbit-line{position:absolute;border:1px solid #455b3430;border-radius:50%;pointer-events:none;left:9%;top:9%;width:82%;height:82%;transform:rotate(-19deg)}.orbit-line.two{left:23%;width:54%;height:93%;top:2%;transform:rotate(36deg);border-style:dashed;border-color:#455b3428}.coordinate{position:absolute;left:0;right:0;text-align:center;top:2px;font:8px monospace;letter-spacing:2px;opacity:.7}#head{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:335px;height:360px;pointer-events:none;filter:drop-shadow(0 24px 19px #28341a30);z-index:1}#head canvas,#head img{position:absolute;width:100%;height:100%;object-fit:contain}.head-caption{position:absolute;top:86%;left:30%;width:40%;text-align:center;font:7px monospace;letter-spacing:1.1px}.head-caption i{display:block;font-size:22px;margin-top:12px}.track{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(ellipse at 29% 19%,#fff9 0%,#fff3 15%,transparent 40%),radial-gradient(ellipse at 70% 90%,#748b573d,transparent 70%),linear-gradient(135deg,#fafbf435,#d1d9b234);box-shadow:inset 1px 2px 3px #ffffffad,inset -1px -2px 5px #69725d44,0 8px 18px #404b2310;border:1px solid #73836166;backdrop-filter:blur(6px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;z-index:3;transition:background .3s,box-shadow .3s,scale .3s}.track:hover{scale:1.1;background-color:#dceaaa77;box-shadow:inset 1px 2px 3px #fff,0 9px 25px #667b3340}.track .number{font-size:24px;font-weight:400;letter-spacing:-1px}.track .track-text{font:8px monospace;letter-spacing:.5px}.track[aria-pressed=true]{background:radial-gradient(at 28% 15%,#ffffffe0,#e2f3b188 45%,#b5c5829c);border-color:#52682e;box-shadow:inset 0 2px 5px #fff,0 0 0 5px #a8bc7333,0 10px 26px #70804230}.track .dot{width:4px;height:4px;background:currentColor;border-radius:50%;margin-top:2px;opacity:.55}.side-note{position:absolute;right:44px;top:130px;writing-mode:vertical-rl;display:flex;align-items:center;gap:18px;font:8px monospace;letter-spacing:1.5px}.side-note div{font:32px Georgia;writing-mode:horizontal-tb}.bottom-region{position:absolute;bottom:23px;left:44px;right:44px;display:grid;grid-template-columns:1fr 432px 1fr;gap:30px;align-items:end}.player{border:1px solid #7d8671;border-radius:18px;padding:13px 16px 10px;background:linear-gradient(165deg,#fffdf2da,#c2c6b0d9 42%,#e1e4d4f2 48%,#c0c7ace8);box-shadow:inset 0 1px 1px #fff,0 15px 40px #374a2820;color:#283320}.player-top,.player-bottom{display:flex;justify-content:space-between;align-items:center;font:8px monospace;letter-spacing:.7px}.player-top{padding-bottom:10px;border-bottom:1px solid #7c8b6455}.player-main{display:flex;align-items:center;gap:13px;padding:15px 0 12px}.play{width:45px;height:45px;flex:0 0 45px;border-radius:50%;background:linear-gradient(145deg,#f1f8d7,#b5c38e);border:1px solid #8b9978;box-shadow:inset 1px 1px 2px white,0 2px 3px #404b2333;font-size:17px}.track-info{flex:1;min-width:0}.track-info>span{font:7px monospace;letter-spacing:1px}.track-info strong{display:block;font-size:14px;font-weight:500;margin:4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:230px}.timeline{display:flex;align-items:center;gap:7px;font:8px monospace}.timeline input{width:100%;height:3px;margin:0}.mini-eq{width:34px;height:36px;display:flex;gap:3px;align-items:flex-end}.mini-eq i{width:3px;background:#64783c;height:20%;border-radius:2px}.player-bottom{padding-top:7px;border-top:1px solid #7c8b6455}.transport{display:flex;gap:12px;align-items:center}.transport button{padding:5px 0;background:transparent;font:10px monospace}.transport button span{font-size:8px;letter-spacing:.3px;margin-left:4px}.volume{display:flex;gap:8px;align-items:center}.volume input{width:59px;height:3px}input[type=range]{accent-color:#61713d;cursor:pointer}.room-label{font:9px monospace;letter-spacing:.4px;line-height:1.5;padding-bottom:8px}.status-dot{display:inline-block;width:6px;height:6px;background:#6d8850;border-radius:50%;margin-right:6px}.room-label small,.upload small{display:block;font:9px Arial;letter-spacing:0;opacity:.65;margin-top:8px}.upload{text-align:right;padding-bottom:8px}.upload label{display:inline-block;border-bottom:1px solid #758467;padding:8px 0;font-size:11px;cursor:pointer}.upload label span{margin-left:15px}.upload input{position:absolute;width:1px;height:1px;opacity:0}.upload:focus-within label{outline:2px solid #758a3b}footer{height:56px;margin:0 44px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #4d5c3b40;position:relative;z-index:3;font:8px monospace;letter-spacing:.9px}footer b{font-size:19px;font-weight:400;margin:0 16px}#notice{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);font:12px Arial;background:#e9efda;color:#24321d;border-radius:10px;padding:12px 18px;z-index:10;box-shadow:0 4px 25px #0002;max-width:90%;text-align:center}#notice:empty{display:none}body.playing{background:#111b21;color:#e9efd9}body.playing #visualizer{opacity:1}body.playing .watercolor{opacity:.1}body.playing .grain{opacity:.1}body.playing .track{border-color:#e6f5c56b;color:#e9efd9;background:radial-gradient(ellipse at 29% 19%,#fff6,transparent 40%),linear-gradient(140deg,#becabe28,#293f3e36);box-shadow:inset 1px 2px 3px #ffffff6d,inset -1px -2px 5px #b8d3a344,0 8px 18px #0003}body.playing .track[aria-pressed=true]{background:radial-gradient(at 30% 20%,#ffffffd9,#e6ffb277 35%,#43695277);box-shadow:0 0 35px #d3f39c55,inset 0 1px 5px white;color:#f6ffe8}body.playing .orbit-line{border-color:#e6f5c533}body.playing header button,body.playing .upload label,body.playing footer{border-color:#e6f5c54a}body.playing #head{filter:drop-shadow(0 0 40px #86a9ce44)}body.playing .status-dot{background:#ccf593;box-shadow:0 0 10px #bef47a}body.playing .intro-note{opacity:.65}
@media(min-width:1500px){.room{width:820px;height:570px}.intro{top:75px}#head{width:365px;height:390px}.bottom-region{bottom:30px}}
@media(max-width:1100px){.intro h1{font-size:44px}.intro{left:28px;top:15px}.intro-note{max-width:130px;line-height:1.5}.room{top:53px;width:650px;height:455px}.side-note{right:26px;top:105px}.bottom-region{left:28px;right:28px;grid-template-columns:1fr 390px 1fr;gap:14px}.upload small{max-width:160px;margin-left:auto}#head{width:290px;height:310px}.room-label{font-size:8px}.room-label small{max-width:140px;line-height:1.4}}
@media(max-width:960px){body{min-height:960px;height:100svh}header{height:92px;padding:22px}.brand{font-size:24px}.brand-icon{font-size:42px}.brand small{font-size:6px;letter-spacing:1px}.edition{display:none}.header-right{gap:0}.pill{padding:10px 12px;font-size:9px}main{height:calc(100% - 154px);min-height:806px}.intro{top:20px;left:24px}.intro .eyebrow{font-size:8px;letter-spacing:1px}.intro h1{font-size:43px;margin:13px 0;letter-spacing:-2px;line-height:1.02}.intro h1 br{display:none}.intro-note{max-width:none;font-size:10px;margin-top:10px}.room{top:159px;width:100%;height:370px}.coordinate{font-size:6px;letter-spacing:1.3px;top:-15px}#head{width:215px;height:245px}.track .number{font-size:20px}.track .track-text{font-size:6px;letter-spacing:0}.head-caption{font-size:5px;top:87%;left:25%;width:50%}.side-note{display:none}.bottom-region{left:22px;right:22px;bottom:13px;display:flex;flex-direction:column;gap:16px;align-items:stretch}.player{width:100%;max-width:440px;margin:auto;order:1}.room-label{order:0;text-align:center;padding:0;font-size:8px}.room-label small{display:none}.upload{order:2;text-align:center;padding:0}.upload label{font-size:10px;padding:4px 0}.upload small{max-width:none;font-size:8px;margin-top:7px}.track-info strong{max-width:200px}footer{margin:0 22px;height:62px;font-size:6px;gap:20px;letter-spacing:.5px}footer span:last-child{text-align:right;max-width:155px;line-height:1.8}footer b{margin:0 5px;font-size:12px}}
@media(max-width:370px){.intro h1{font-size:36px}#head{width:188px;height:220px}.room{height:345px}.mini-eq{display:none}.player{padding:12px}.brand small{font-size:5px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
/* Current portfolio effect uses simulated pigment, not the retired bitmap. */
.watercolor{display:none}.wheel-halo{position:fixed;inset:0;width:100%;height:100%;z-index:0;mix-blend-mode:multiply;pointer-events:none;image-rendering:pixelated}.wheel-halo[hidden]{display:none}#head{pointer-events:auto;cursor:grab;touch-action:pan-y}#head:active{cursor:grabbing}.head-caption{top:102%;left:20%;width:60%}.head-caption i{display:none}.room{top:clamp(-6px,calc((100vh - 850px)*.27),40px);height:clamp(480px,56vh,570px)}
@media(max-width:1100px){.room{top:53px;height:455px}}
@media(max-width:960px){.intro{right:20px}.intro h1{font-size:clamp(34px,10vw,43px)}.room{top:159px;height:370px}.head-caption{top:101%;font-size:6px}}
/* Dark album direction. Fixed dither is the texture; no scanned wash or glow. */
:root{color:#d0d9c8;background:#080b0a;--ink:#d0d9c8}body,body.playing{background:#080b0a;color:#d0d9c8}.grain{display:none}.wheel-halo{mix-blend-mode:screen}.brand,.intro h1{color:#d9dfcf}.intro-note,.eyebrow{color:#9ca995}.pill{border-color:#a8b39c44;background:#111712aa}.orbit-line,.orbit-line.two{border-color:#b6c99b22}.track,body.playing .track{color:#d5ddc7;border:1px solid #9dab825c;background:radial-gradient(ellipse at 30% 12%,#afc79424,transparent 54%),linear-gradient(140deg,#28302b88,#121916c9);box-shadow:inset 1px 1px 2px #d3dcc733,inset -1px -1px 2px #060907,0 9px 20px #0003;backdrop-filter:none}.track:hover{background-color:#4a5b3e55;box-shadow:inset 1px 1px 2px #d3dcc755,0 9px 20px #0003}.track[aria-pressed=true],body.playing .track[aria-pressed=true]{color:#e0ebcf;border-color:#b4c299;background:radial-gradient(at 30% 14%,#82926b66,#3b4b3377 60%,#151e14);box-shadow:inset 0 1px 2px #d7ebba44,0 0 0 4px #a8bc7313}.player{border-color:#69745b88;background:linear-gradient(165deg,#32392f,#171e19 42%,#2c352b 44%,#1a231c);color:#cfd9bf;box-shadow:inset 0 1px 1px #a4b18f44,0 15px 40px #0004}.player-top,.player-bottom{border-color:#b6c49a33}.play{background:linear-gradient(145deg,#59664a,#303d28);border-color:#91a57166;box-shadow:inset 1px 1px 2px #d3e8af44,0 2px 3px #0003}.mini-eq i{background:#a0b480}input[type=range]{accent-color:#a0b480}#head,body.playing #head{filter:none}.upload label,footer{border-color:#a8b39c33}.status-dot,body.playing .status-dot{background:#8d9c77;box-shadow:none}#notice{background:#202a21;color:#d7e5c7;border:1px solid #68795c66}body.playing .intro-note{opacity:1}

@media(max-width:960px){.orbit-line.one{left:15%;width:70%}}
@media(max-width:370px){.orbit-line.two{transform:rotate(23deg)}}

@media(min-width:761px) and (max-width:960px){body{min-height:1080px}.room{width:650px;height:455px}#head{width:290px;height:310px}.intro{left:28px}.intro h1{font-size:48px}}

/* Names stay within the eight album bubbles at desktop and phone sizes. */
.track{gap:3px;padding:6px}.track .track-text{max-width:100%;font-size:8px;line-height:1.1;letter-spacing:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.track .dot{flex-shrink:0}
@media(max-width:960px){.track{gap:2px;padding:5px}.track .number{font-size:18px;line-height:1}.track .track-text{font-size:6.5px}.track .dot{width:3px;height:3px;margin-top:0}}

/* Album identity and shader-owned playback state. */
#visualizer,body.playing #visualizer{opacity:1;transition:none}
.intro h1{margin:0}
.play{display:grid;place-items:center}
.play-symbol{position:relative;display:block;width:22px;height:22px;line-height:1}
.play-icon,.pause-icon{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .2s ease,transform .2s ease}
.pause-icon{opacity:0;transform:scale(.7)}
.play.is-playing .play-icon{opacity:0;transform:scale(.7)}
.play.is-playing .pause-icon{opacity:1;transform:scale(1)}
@media(max-width:960px){.intro{right:20px}.intro h1{margin:0}.intro h1 br{display:block}}

/* Draw controls consistently across Safari and desktop; no emoji glyphs. */
.play-icon svg,.pause-icon svg{display:block;width:22px;height:22px}
.transport button{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.transport svg{display:block;width:15px;height:15px;flex:none}
.transport button span{margin-left:0}
.touch-caption{display:none}
#head-status,#head-fallback{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font:10px monospace;letter-spacing:.6px;color:#9ca995}
#head-status[hidden],#head-fallback[hidden]{display:none}
.timeline span{flex:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.timeline input{flex:1;min-width:0;width:0}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;height:24px;margin:0;padding:0;min-width:0}
input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:#657454}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#b0c192;border:0;margin-top:-5px}
input[type=range]::-moz-range-track{height:3px;border-radius:3px;background:#657454}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#b0c192;border:0}
input[type=range]:disabled{opacity:.4}

/* On phones and tablets the room participates in document flow. Safari's
   changing browser chrome cannot push absolute sections into one another. */
@media(max-width:960px){
 body{height:auto;min-height:100svh;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
 header{height:auto;min-height:76px;padding:18px max(20px,env(safe-area-inset-right)) 15px max(20px,env(safe-area-inset-left))}
 .brand{font-size:24px;letter-spacing:-1px}.brand small{font-size:7px;letter-spacing:1.2px}
 main{height:auto;min-height:0;display:flex;flex-direction:column;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
 .intro{position:relative;inset:auto;padding:8px 6px 12px}
 .intro h1{font-size:clamp(35px,10vw,48px);line-height:1.02;letter-spacing:-1.8px;margin:0}
 .room{position:relative;top:auto;left:auto;transform:none;width:100%;max-width:460px;height:clamp(326px,100vw,460px);margin:4px auto 40px;flex:none}
 #head{width:clamp(154px,49vw,228px);height:clamp(182px,58vw,270px);touch-action:pan-y}
 .orbit-line.one{left:10%;top:9%;width:80%;height:82%}
 .orbit-line.two{left:23%;top:4%;width:54%;height:92%;transform:rotate(23deg)}
 .track{padding:5px;gap:2px;scale:1}.track:hover{scale:1}
 .track .number{font-size:18px;line-height:1}.track .track-text{font-size:8px;line-height:1.12;letter-spacing:-.1px}
 .track .dot{display:none}
 .head-caption{top:auto;bottom:-23px;left:10%;width:80%;font-size:8px;line-height:12px;letter-spacing:1px}
 .pointer-caption{display:none}.touch-caption{display:inline}
 .bottom-region{position:static;inset:auto;display:flex;flex-direction:column;align-items:stretch;gap:14px;margin:0 auto;width:100%;max-width:460px}
 .player{order:0;max-width:none;width:100%;padding:13px 14px 9px;border-radius:16px}
 .player-top{font-size:7px;letter-spacing:.4px;gap:8px;padding-bottom:9px}
 #signal{white-space:nowrap}
 .player-main{gap:11px;padding:12px 0 5px}
 .play{width:46px;height:46px;flex-basis:46px}
 .track-info>span{font-size:7px;letter-spacing:.7px}
 .track-info strong{font-size:14px;line-height:1.3;max-width:none;margin:5px 0 4px}
 .timeline{font-size:9px;gap:7px;min-width:0}.timeline input{height:30px}
 .mini-eq{display:none}
 .player-bottom{padding-top:3px;gap:4px;flex-wrap:wrap}
 .transport{gap:0;flex:none}.transport button{min-width:44px;min-height:44px;padding:0 7px}
 #mode{min-width:65px;gap:5px}#mode span{font-size:8px}
 .volume{gap:5px;margin-left:auto;font-size:8px;min-height:44px}.volume input{width:60px;height:32px}
 input[type=range]::-webkit-slider-thumb{width:15px;height:15px;margin-top:-6px}
 input[type=range]::-moz-range-thumb{width:15px;height:15px}
 .room-label{position:static;order:1;text-align:center;font-size:8px;padding:0;line-height:16px}
 .room-label small{display:none}
 .upload{order:2;text-align:center;padding:0 0 12px}.upload label{font-size:11px;min-height:44px;padding:14px 0 10px}.upload small{font-size:9px;margin:3px auto 0}
 footer{height:auto;min-height:65px;margin:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));padding:15px 0;gap:15px;font-size:6px;line-height:1.6;align-items:flex-start}
 footer span:last-child{max-width:145px}
 #notice{bottom:calc(16px + env(safe-area-inset-bottom));font-size:12px;max-width:calc(100% - 28px);width:max-content}
}
@media(min-width:600px) and (max-width:960px){
 header{padding-top:24px}.intro{width:460px;max-width:100%;margin:0 auto;padding-top:14px;padding-bottom:20px}
 .room{margin-bottom:44px}.bottom-region{max-width:460px}
}
@media(max-width:960px) and (max-height:500px) and (orientation:landscape){
 header{min-height:64px}.intro{width:460px;max-width:100%;margin:0 auto;padding:0 6px 10px}
 .intro h1{font-size:32px}.intro h1 br{display:none}.room{width:min(100%,400px);height:350px}
 #head{width:190px;height:223px}
}
@media(pointer:coarse){.pointer-caption{display:none}.touch-caption{display:inline}.track:hover{scale:1}}

.upload label svg{width:12px;height:12px;vertical-align:-2px;margin-left:15px}
.footer-mark{width:13px;height:13px;vertical-align:-3px;margin:0 8px}