:root{color-scheme:light;--paper:#fafaf8;--ink:#272b24;--muted:#808777;--green:#566a46;font-family:Arial,Helvetica,sans-serif;font-synthesis:none;background:var(--paper);color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid #657d53;outline-offset:5px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.skip-link{position:fixed;left:15px;top:-80px;z-index:100;padding:15px;background:white}.skip-link:focus{top:10px}
.masthead{flex:none;width:100%;margin:0;padding:42px 5.3% 12px;display:flex;justify-content:space-between;align-items:center}.wordmark{font-size:23px;font-weight:600;letter-spacing:-1.1px}.wordmark>span{color:#77946b}main{flex:1;display:flex;flex-direction:column;width:100%;margin:0}.introduction{flex:none;padding:29px 5.3% 0;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;position:relative;z-index:2}h1{font-size:clamp(32px,3.4vw,51px);font-weight:400;line-height:1.09;letter-spacing:-1.9px;margin:0}
.scene-shell{position:relative;flex:1 0 360px;min-height:360px;margin:0;isolation:isolate}#scene-canvas{display:block;width:100%;height:100%;touch-action:none;outline-offset:-5px;cursor:grab}#scene-canvas:active{cursor:grabbing}.screen-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}.screen-surface{position:absolute;left:0;top:0;width:800px;height:490px;transform-origin:0 0;backface-visibility:hidden;pointer-events:auto;will-change:transform;overflow:hidden;background:#121a13}#player-root{width:800px;height:490px}#screen-wait{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 20%,#20371b,#101a16 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;color:#c2d7b0;font-size:19px;letter-spacing:.6px;z-index:3}.spinner{display:inline-block;width:24px;height:24px;border:1px solid #a7b89966;border-top-color:#6f8958;border-radius:50%;animation:spin .9s linear infinite}#screen-wait .spinner{width:48px;height:48px;border-width:2px;border-top-color:#b4d393}@keyframes spin{to{transform:rotate(360deg)}}
.scene-boot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:13px;color:#819172;font-size:12px;pointer-events:none}.scene-failure{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--paper);font-size:13px;color:#6c7b60}.scene-failure a{text-decoration:underline;text-underline-offset:4px}
.collection-bar{flex:none;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #dfe3d9;margin:0 5.3%;padding:15px 0;gap:15px}.collection-label{font-size:9px;letter-spacing:1.3px;color:#8b9580;white-space:nowrap}.collection-bar>p{font-size:11px;color:#758568;margin:0;text-align:center;line-height:1.5}.album-list{flex:none;padding-bottom:calc(54px + env(safe-area-inset-bottom));margin:4px 5.3% 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.album-option{border:0;border-top:1px solid #e5e8df;background:none;text-align:left;padding:13px 0;color:#5f6c54;min-width:0;display:flex;gap:10px;align-items:center}.album-option:hover{border-color:#8f9e7e}.album-option[aria-pressed="true"]{border-color:#6d8657;color:#355020}.album-option img{width:32px;height:32px;object-fit:cover;border:1px solid #cbd2c1;opacity:.83;flex:none}.album-option>span{min-width:0}.album-option strong{font-size:10px;font-weight:400;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.album-option small{font-size:8px;color:#9aa18e;display:block;margin-top:4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.album-option:disabled{cursor:wait;opacity:.5}.notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);border:1px solid #d2ddc6;border-radius:3px;background:#fffffff5;padding:12px 18px;box-shadow:0 4px 25px #25370e19;color:#597046;font-size:11px;line-height:1.5;z-index:100;pointer-events:none}
@media(max-width:900px){.album-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 18px}.introduction{padding-top:22px}}
@media(max-width:600px){.masthead{padding:31px 6% 12px}.wordmark{font-size:21px}.introduction{padding:21px 6% 0}h1{font-size:34px;letter-spacing:-1.4px}.collection-bar{margin:0 6%;gap:10px;flex-wrap:wrap;padding:13px 0}.collection-label{font-size:8px;letter-spacing:.9px}.collection-bar>p{font-size:10px;order:3;flex-basis:100%;text-align:left}.album-list{margin:4px 6% 0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.album-option{min-height:60px;padding:10px 0;gap:9px}.album-option img{width:30px;height:30px}.album-option strong{font-size:10px}.album-option small{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.screen-zoom{position:absolute;left:0;top:0;z-index:5;display:inline-flex;align-items:center;justify-content:center;gap:9px;width:144px;height:44px;padding:10px 12px;border:2px solid #ffffff;border-radius:24px;background:#435b35;box-shadow:0 5px 18px #1b2d1840,0 1px 4px #1b2d1830;color:#fff;font:600 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 180ms ease,background 140ms ease,box-shadow 140ms ease}
.screen-zoom.is-visible,.screen-zoom:focus-visible{opacity:1;pointer-events:auto}
.screen-zoom[data-action="return"]{width:160px}
.screen-zoom:hover{background:#304926;box-shadow:0 7px 23px #1b2d1855,0 1px 4px #1b2d1830}
.screen-zoom:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px #435b3580,0 6px 18px #1b2d1840}
.screen-zoom svg{display:block;width:20px;height:20px;flex:none}
.screen-zoom span{display:block}
@media(prefers-reduced-motion:reduce){.screen-zoom{transition:none}}
#mobile-player{width:calc(100vw - 16px);max-width:650px;max-height:calc(100dvh - 24px);border:1px solid #c9d3bf;border-radius:5px;padding:10px;background:var(--paper);box-shadow:0 20px 80px #1b2b1044}#mobile-player::backdrop{background:#f0f3e8c9;backdrop-filter:blur(6px)}.mobile-player-heading{display:flex;justify-content:space-between;align-items:center;font-size:8px;letter-spacing:1px;color:#89967b;padding:1px 2px 10px}.mobile-player-heading button{font-size:10px;letter-spacing:0;color:#5e7846;background:none;border:0;padding:7px 0}#mobile-player-mount{height:min(580px,78dvh);min-height:330px;border:1px solid #bbc2b6}#mobile-player #player-root{width:100%;height:100%}
/* DOM remains native behind a zero-alpha, depth-writing opening in WebGL. */
#scene-canvas{position:absolute;inset:0;z-index:2;pointer-events:none}
.scene-input{position:absolute;inset:0;z-index:0;touch-action:none;cursor:grab}
.screen-layer{z-index:1}
.screen-surface{cursor:auto}
.screen-open-desktop{position:absolute;inset:0;z-index:40;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;touch-action:none}
.screen-open-desktop:focus-visible{outline-offset:-5px}
.scene-boot,.scene-failure{z-index:3}
/* One live desktop is projected into the physical screen. Closing Music hides
   only its own frame; wallpaper, clock, dock and other windows stay available. */
#screen-desktop{position:relative;z-index:0;width:100%;height:100%;overflow:hidden;isolation:isolate;background:#262d27 url('./dev/music/assets/wallpaper.jpg') center/cover no-repeat}
.screen-menu-bar{position:absolute;z-index:30;inset:0 0 auto;display:flex;align-items:center;justify-content:flex-end;height:22px;padding:0 12px;color:#fff;background:#151c1638;border-bottom:1px solid #ffffff12;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;text-shadow:0 1px 3px #0006;pointer-events:none;user-select:none}
#screen-clock{white-space:nowrap;font-variant-numeric:tabular-nums}
#screen-music-window{position:absolute;left:16px;top:30px;width:calc(100% - 32px);height:calc(100% - 88px);min-width:0;min-height:0;overflow:hidden;border:1px solid #ffffff66;border-radius:11px;background:#fff;box-shadow:0 15px 45px #0005,0 2px 6px #0002}
#screen-desktop #player-root{width:100%;height:100%}
#screen-desktop>.it-window-switcher{bottom:6px}
#mobile-player-mount>#screen-desktop{width:100%;height:100%}
@media(max-width:430px){#mobile-player #screen-music-window{left:8px;width:calc(100% - 16px)}}
/* The virtual desktop supplies every display pixel; the model underneath is black. */
.screen-surface{background:#000}
/* Focus uses the viewport rather than the site's shorter presentation stage. */
html.is-player-focused,body.is-player-focused{overflow:hidden;height:100%;overscroll-behavior:none}
body.is-player-focused .scene-branding,body.is-player-focused .collection-bar,body.is-player-focused .album-list,body.is-player-focused>.notice,body.is-player-focused>.skip-link{display:none}
body.is-player-focused main{max-width:none;margin:0}
body.is-player-focused .scene-shell{flex:none;min-height:0;position:fixed;inset:0;z-index:60;width:100%;height:100vh;height:100dvh;margin:0}
body.is-player-focused .screen-zoom{z-index:70}
.screen-surface{will-change:auto}
.mobile-player-actions{display:flex;align-items:center;gap:14px}
.mobile-player-heading{gap:8px}.mobile-player-heading>span{font-size:7px;letter-spacing:.7px}
.mobile-player-heading #close-mobile-player{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid #fff;border-radius:22px;background:#435b35;color:#fff;font:600 12px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;white-space:nowrap}
.mobile-player-heading #close-mobile-player svg{width:17px;height:17px;flex:none}
.mobile-player-heading #close-mobile-player:hover{background:#304926}
.desktop-disc{position:absolute;z-index:1;top:38px;right:14px;display:flex;flex-direction:column;align-items:center;gap:5px;width:100px;padding:6px;border:0;border-radius:8px;background:transparent;color:white;text-align:center;font:11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;text-shadow:0 1px 4px #000}
.desktop-disc img{width:58px;height:58px;object-fit:cover;border:1px solid #ffffffaa;border-radius:5px;box-shadow:0 3px 8px #0004}
.desktop-disc span{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.desktop-disc small{font-size:9px;opacity:.85}
.desktop-disc:hover,.desktop-disc:focus-visible{background:#ffffff22;outline:1px solid #ffffff88;outline-offset:1px}
.graphics-no-glass #screen-desktop *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.graphics-no-glass #screen-desktop .it-toolbar,.graphics-no-glass #screen-desktop .it-window-switcher{background:#f5f5f8f5}

/* Avoid backdrop sampling through a perspective-transformed live desktop.
   WebKit can corrupt this compositing path (WebKit bug 252181). Native desktop
   mode and the compact/standalone desktop retain their normal glass surfaces. */
.screen-surface[data-presentation="projected"] #screen-desktop *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.screen-surface[data-presentation="projected"] #screen-desktop .vm-menu-bar{background:#e7ecea!important}
.screen-surface[data-presentation="projected"] #screen-desktop .it-toolbar,.screen-surface[data-presentation="projected"] #screen-desktop .it-window-switcher{background:#f5f5f8f5}
.screen-surface[data-presentation="projected"] #screen-desktop .vm-menu-panel{background:#f5f5f4}

.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* Keep native editing/caret selection while drag surfaces stay non-selectable. */
input,textarea,[contenteditable]:not([contenteditable="false"]),[contenteditable]:not([contenteditable="false"]) *{-webkit-user-select:text;user-select:text}

/* Branding floats over the same full-height world instead of shortening it. */
main{position:relative}
.scene-branding{position:absolute;inset:0 0 auto;z-index:4;pointer-events:none}
.scene-branding .wordmark{pointer-events:auto}

/* The world continues behind a single, steady glass collection panel. Keep
   this sibling outside the animated scene shell so camera flights cannot
   stretch its text or change its input coordinates. */
main{min-height:100vh;min-height:100dvh}
.collection-panel{position:fixed;z-index:6;left:max(16px,5.3%);right:max(16px,5.3%);bottom:calc(18px + env(safe-area-inset-bottom));display:flex;flex-direction:column;max-height:min(42dvh,340px);padding:12px;border:1px solid #ffffffe6;border-radius:26px;background:#f6f8f2ed;box-shadow:0 16px 52px #2031181a,0 2px 9px #2031180a,inset 0 1px 0 #fff,inset 0 -1px 0 #ffffff70;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.collection-panel{background:linear-gradient(135deg,#ffffffa3,#ffffff66 48%,#edf2e787);-webkit-backdrop-filter:blur(26px) saturate(1.45);backdrop-filter:blur(26px) saturate(1.45)}}
.collection-panel::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 1px 1px 0 #ffffffd9,inset -1px -1px 0 #ffffff57;background:linear-gradient(118deg,#ffffff26,transparent 34%,transparent 72%,#ffffff14)}
.collection-panel .collection-bar{position:relative;flex:none;min-height:36px;margin:0 2px 7px;padding:0 0 8px;border:0;border-bottom:1px solid #536b3d12;gap:12px;flex-wrap:nowrap}
.collection-panel .collection-label{margin-left:8px}
.collection-panel-actions{display:flex;align-items:center;gap:6px;flex:none}
#collection-graphics-trigger{display:flex}
.collection-panel-actions .graphics-trigger,.collection-collapse{display:grid;place-items:center;flex:none;width:36px;height:36px;min-height:36px;padding:8px;border:1px solid #ffffffa3;border-radius:50%;background:#ffffff5c;color:#526349;box-shadow:0 1px 4px #20311808;font:inherit;cursor:pointer}
.collection-panel-actions .graphics-trigger:hover,.collection-collapse:hover{background:#ffffffba;border-color:#fff}
.collection-collapse svg{width:18px;height:18px;transition:transform 180ms ease}
.collection-collapse:focus-visible{outline:2px solid #657d53;outline-offset:2px}
.collection-panel.is-collapsed .collection-bar{margin-bottom:0;padding-bottom:0;border-bottom:0}
.collection-panel.is-collapsed .collection-collapse svg{transform:rotate(180deg)}
.collection-panel .album-list[hidden]{display:none}
.collection-panel .collection-label{font-size:9px;font-weight:550;letter-spacing:1.15px;color:#66735d}
.collection-panel .album-list{position:relative;flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#62765345 transparent;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px 8px;margin:0;padding:0 2px 2px}
.collection-panel .album-option{min-height:58px;margin:0;padding:9px 10px;gap:10px;border:0;border-radius:14px;background:transparent;color:#374730;transition:background 160ms ease,box-shadow 160ms ease}
.collection-panel .album-option:hover{background:#ffffff8c}
.collection-panel .album-option[aria-pressed="true"]{background:#ffffffba;color:#2d4722;box-shadow:inset 0 0 0 1px #607d4a38,0 1px 5px #2d431610}
.collection-panel .album-option:focus-visible{outline-offset:-3px}
.collection-panel .album-option img{width:34px;height:34px;border:1px solid #ffffffba;border-radius:5px;opacity:1;box-shadow:0 1px 3px #18261214}
.collection-panel .album-option strong{font-size:11px;font-weight:500}
.collection-panel .album-option small{margin-top:4px;font-size:9px;color:#7b8673}
.collection-notice{grid-column:span var(--notice-columns,4);align-self:end;justify-self:end;max-width:570px;padding:6px 10px 8px 22px;color:#70766c;text-align:right;font-size:9px;line-height:1.6;font-weight:400}
.collection-notice p{margin:0}
.collection-notice a{display:inline-block;min-height:24px;padding:4px 0 0;color:inherit;text-underline-offset:3px;text-decoration-color:#70766c66}
.collection-notice a:hover{color:#394a30;text-decoration-color:currentColor}
.collection-notice a:focus-visible{outline:2px solid #657d53;outline-offset:3px;border-radius:3px}
.graphics-no-glass .collection-panel{background:#f7f8f4;-webkit-backdrop-filter:none;backdrop-filter:none}
body.is-player-focused .collection-panel{display:none}
@media(max-width:900px){.collection-panel .album-list{grid-template-columns:repeat(3,minmax(0,1fr))}.collection-notice{grid-column:1/-1;max-width:570px;padding:8px 10px 5px 24px}}
@media(max-width:600px){.collection-panel{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));padding:9px;border-radius:22px;max-height:42dvh}.collection-panel .collection-bar{margin:0 1px 4px;padding-bottom:6px}.collection-panel .collection-label{margin-left:4px;font-size:8px;letter-spacing:1px}.collection-panel .album-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 4px}.collection-panel .album-option{min-height:54px;padding:8px;gap:8px;border-radius:12px}.collection-panel .album-option img{width:31px;height:31px}.collection-panel .album-option strong{font-size:10px}.collection-panel .album-option small{font-size:8px}}
@media(prefers-reduced-motion:reduce){.collection-collapse svg{transition:none}}
@media(prefers-reduced-transparency:reduce){.collection-panel{background:#f7f8f4;-webkit-backdrop-filter:none;backdrop-filter:none}}