@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Spicy+Rice&display=swap');
:root{--paper:#f6f2e8;--ink:#343b2d;--muted:#737667;--line:#dcded0;--orange:#b95532;--accent:#bf623e;--scene:#e9ddc5;--dark:#3d4937;font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--orange);outline-offset:5px}button:disabled{cursor:default}button{color:inherit}.masthead{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:27px 5%;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;font-size:24px;letter-spacing:.16em;font-weight:700}.wordmark span{display:block;font-size:10px;font-weight:400;letter-spacing:.035em;margin-top:5px}.edition{font-size:10px;letter-spacing:.16em;color:var(--muted)}.prototype{font-size:10px;padding:7px 12px;border:1px solid var(--line);border-radius:20px}main{max-width:1280px;margin:auto;padding:0 30px}.intro{display:flex;align-items:center;justify-content:space-between;padding:35px 0 28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.15em;margin:0 0 12px}.eyebrow>span{color:var(--orange);font-size:17px;vertical-align:middle;margin-right:6px}h1{font-family:'Spicy Rice',Georgia,serif;font-weight:400;font-size:clamp(48px,5.8vw,78px);line-height:1.06;letter-spacing:-.035em;margin:0}h1 span{color:var(--orange)}.invitation{font-size:16px;line-height:1.7;color:var(--muted);padding:10px 0 0 20px;margin:0;max-width:330px}.garden-layout{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);gap:24px}.scene{background:var(--scene);border-radius:16px;position:relative;min-height:440px;overflow:hidden;isolation:isolate;transition:background 1s}.scene:after{content:'';pointer-events:none;position:absolute;inset:0;opacity:.13;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='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.scene-top,.scene-bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;z-index:2;gap:10px}.scene-top{top:22px}.scene-bottom{bottom:22px;font-size:10px;color:var(--dark)}.scene-index{letter-spacing:.2em;white-space:nowrap}.scene-tag{font-size:10px;display:flex;align-items:center;gap:8px;color:var(--dark)}.scene-tag i{width:6px;height:6px;background:var(--accent);border-radius:50%}.quiet-button{font-size:10px;background:transparent;border:1px solid var(--dark);padding:7px 10px;border-radius:20px;color:var(--dark)}#garden{display:block;width:100%;height:100%;position:absolute;inset:0}.listen-panel{padding:20px 4px 0 5px}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading>span{font-family:Georgia,serif;font-style:italic;font-size:14px;color:var(--muted);margin-bottom:12px}.track-list{display:grid;gap:5px}.track{display:flex;align-items:center;text-align:left;gap:14px;width:100%;padding:16px 12px;border:1px solid transparent;border-bottom-color:var(--line);background:transparent;border-radius:9px;min-height:75px}.track.selected{background:#e9eadd;border-color:#c7cdb8}.track:hover{background:#eeecdf}.track-number{font-family:Georgia,serif;font-style:italic;font-size:14px;color:var(--muted)}.track strong{display:block;font-size:14px;font-weight:600}.track small{display:block;font-size:10px;color:var(--muted);margin-top:5px}.track-mark{margin-left:auto;color:var(--orange);font-size:20px}.track:not(.selected) .track-mark{opacity:.3}.palette-section{margin-top:26px}.palettes{display:flex;gap:8px}.palette{font-size:10px;display:flex;align-items:center;flex-direction:column;gap:7px;flex:1;background:transparent;border:1px solid transparent;border-radius:9px;padding:9px 3px}.palette.active{border-color:#c6c9b9;background:#eeeadd}.swatch{height:22px;width:42px;border-radius:20px}.dusk{background:linear-gradient(110deg,#ad5435 48%,#d1a258 49%)}.moss{background:linear-gradient(110deg,#4a654c 48%,#aab37b 49%)}.night{background:linear-gradient(110deg,#656182 48%,#caa2ad 49%)}.garden-note{display:flex;gap:13px;align-items:center;margin-top:20px;padding:0 5px}.garden-note>span{font-size:35px;color:#909e76}.garden-note p{font-size:11px;color:var(--muted);line-height:1.7}.headphone-note{font-size:10px;color:var(--muted);margin:16px 5px}.headphone-note span{margin-right:6px}.player{margin-top:20px;background:#fffdf6;border:1px solid var(--line);border-radius:14px;padding:19px 24px;display:flex;align-items:center;gap:20px}.play-button{border:0;border-radius:50%;height:52px;width:52px;background:var(--dark);color:var(--paper);flex-shrink:0;display:grid;place-items:center}.play-button:hover{background:#53614a}.play-button svg{width:24px;fill:currentColor}.now-playing{min-width:185px}.now-playing>span{display:block;font-size:8px;letter-spacing:.14em;color:var(--muted);margin-bottom:6px}.now-playing strong{display:block;font-size:13px}.timeline{flex:1;min-width:60px}.time-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:3px}input[type=range]{width:100%;height:20px;accent-color:var(--accent);margin:0;cursor:pointer}.volume{width:100px;flex-shrink:0;border-left:1px solid var(--line);padding-left:20px}.volume label{display:block;font-size:9px;color:var(--muted);margin-bottom:3px}.status{font-size:11px;color:var(--muted);min-height:16px;margin:12px 0}.status.error{color:#a03026}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:20px 0 30px;font-size:10px;color:var(--muted)}footer a{text-decoration:none;color:var(--ink)}footer a:hover{text-decoration:underline}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1500px){main{padding-top:15px}.scene{min-height:490px}}
@media(max-width:800px){.edition{display:none}.garden-layout{grid-template-columns:1fr}.intro{padding-top:30px}.invitation{font-size:13px}.scene{min-height:390px}.listen-panel{padding:0}.garden-note,.headphone-note{display:none}.palette-section{margin-top:20px}.player{flex-wrap:wrap;padding:17px;gap:14px}.now-playing{flex:1}.timeline{order:3;flex-basis:100%}.volume{width:90px}.palette{flex-direction:row;justify-content:center;padding:12px 4px}.status{margin-bottom:20px}}
@media(max-width:480px){main{padding:0 18px}.masthead{padding:20px}.wordmark{font-size:20px}.intro{display:block}.invitation{padding:15px 0 0}.invitation br{display:none}.scene{min-height:340px}.scene-top,.scene-bottom{left:16px;right:16px}.scene-bottom{font-size:9px}.scene-index{display:none}.quiet-button{padding:7px;font-size:9px}.scene-tag{font-size:9px}.now-playing{min-width:150px}.volume{width:70px;padding-left:10px}.play-button{height:46px;width:46px}.now-playing strong{font-size:12px}.palette{flex-direction:column}.garden-layout{gap:22px}footer{flex-direction:column;gap:12px}.prototype{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* On phones the play button belongs directly below the garden. */
@media(max-width:800px){
 main{display:flex;flex-direction:column}
 .garden-layout{display:contents}
 .intro{order:0}.scene{order:1}.player{order:2}.status{order:3}
 .listen-panel{order:4;margin-top:6px;margin-bottom:25px}footer{order:5}
}
/* The complete album scrolls independently so the garden stays in view. */
.track-list{max-height:245px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#9da68a transparent;padding:5px}
@media(max-width:800px){.track-list{max-height:340px}}
/* The immersive page keeps a compact, page-preserving language navigation. */
.masthead{flex-wrap:wrap;gap:12px}
.compact-language-switch{display:flex;flex-wrap:wrap;gap:8px 14px;flex-basis:100%;justify-content:flex-end;font-size:11px}
.compact-language-switch a{text-decoration:none;color:var(--muted);padding:4px 0}
.compact-language-switch a[aria-current=page]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:800px){.compact-language-switch{justify-content:flex-start;gap:6px 13px}}