@font-face{font-family:Inter;src:url("assets/fonts/InterVariable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
:root{color-scheme:light;--bg:#ffffff;--fg:#111111;--muted:#666666;--line:#dddddd;font-family:Inter,Arial,Helvetica,sans-serif;font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);overflow:hidden}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #222222;outline-offset:6px}button{border:0;background:none}button:disabled{cursor:default}a{color:inherit}button:hover{color:#000}[hidden]{display:none!important}.masthead{position:fixed;z-index:20;left:40px;top:31px;display:flex;gap:24px;align-items:center;pointer-events:none}.wordmark{font-size:27px;letter-spacing:-1.5px;text-decoration:none;font-weight:500;pointer-events:auto}.wordmark span{font-size:10px;vertical-align:top;display:inline-block;padding:5px 0 0 3px;letter-spacing:0}.archive-label{font-size:10px;letter-spacing:1.5px;color:#666;padding-top:5px}.corner-button{font-size:14px;display:flex;align-items:center;gap:13px;padding:10px 0}.filter-toggle{position:fixed;right:40px;top:28px;z-index:40}#filter-count{background:#111;color:#fff;min-width:18px;height:18px;line-height:18px;border-radius:50%;font-size:11px}#stage{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;user-select:none}#stage.dragging{cursor:grabbing}#queue{position:absolute;inset:0}footer{position:fixed;bottom:30px;left:40px;right:40px;z-index:20;display:flex;justify-content:space-between;align-items:center;pointer-events:none}footer>*{pointer-events:auto}.info-button{gap:9px}.explore-hint{display:flex;align-items:center;gap:14px;color:#666;font-size:10px;letter-spacing:1.6px;pointer-events:none;transition:opacity .4s}.hint-line{height:1px;width:26px;background:#383833}.archive-count{font-size:11px;letter-spacing:1.4px}.archive-count .muted{color:#666;margin-left:9px}.filter-panel{position:fixed;right:30px;top:77px;width:300px;z-index:35;background:#fffffff5;backdrop-filter:blur(18px);border:0;border-radius:6px;padding:20px 22px;box-shadow:0 18px 60px #00000014}.panel-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:1.4px;margin-bottom:20px}.icon-button{font-size:26px;line-height:1;width:36px;height:36px;display:grid;place-items:center;font-weight:300;color:#222}.panel-heading .icon-button{margin:-10px -9px -10px 0}.filter-panel label{display:block;font-size:12px;color:#666;margin:21px 0 9px}.filter-panel select{appearance:none;width:100%;border:0;border-bottom:1px solid #d4d4d4;border-radius:0;background:linear-gradient(45deg,transparent 50%,#888 50%) calc(100% - 4px) 50%/4px 4px no-repeat,linear-gradient(135deg,#888 50%,transparent 50%) 100% 50%/4px 4px no-repeat;color:#111;padding:8px 20px 12px 0;font-size:14px;cursor:pointer}.filter-panel option{background:#fff}.filter-footer{display:flex;justify-content:space-between;align-items:center;margin-top:28px;font-size:12px;color:#666}.text-button{padding:6px 0;border-bottom:1px solid #77766e;font-size:12px;color:#222}#hover-caption{position:fixed;left:50%;bottom:83px;transform:translateX(-50%) translateY(7px);pointer-events:none;z-index:25;display:flex;align-items:center;gap:15px;opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap}#hover-caption.visible{opacity:1;transform:translateX(-50%)}#hover-title{font-size:14px}#hover-artist{font-size:10px;color:#666;font-weight:400;letter-spacing:normal;text-transform:none}.overlay{color:var(--fg);background:#fff;border:0;border-radius:7px;padding:0;max-height:calc(100dvh - 64px);max-width:calc(100vw - 40px);overflow:auto;box-shadow:0 30px 100px #0000001f}.overlay::backdrop{background:#ffffff99;backdrop-filter:blur(15px)}.overlay[open],.filter-panel:not([hidden]){animation:reveal .35s cubic-bezier(.16,1,.3,1)}
.overlay[open].is-closing,.filter-panel.is-closing{animation:dismiss .35s cubic-bezier(.7,0,.84,0) forwards;pointer-events:none}
.overlay[open]::backdrop{animation:backdrop-in .35s ease}
.overlay[open].is-closing::backdrop{animation:backdrop-out .35s ease forwards}
@keyframes dismiss{from{opacity:1;transform:none}to{opacity:0;transform:translateY(15px) scale(.98)}}
@keyframes backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes reveal{from{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:none}}.close-dialog{position:absolute;right:13px;top:12px;z-index:2;background:#ffffffcc;border-radius:50%}.detail-overlay{width:850px}#detail-content{display:grid;grid-template-columns:1fr 1fr}.detail-art{padding:30px;display:flex;flex-direction:column;justify-content:center;background:#f7f7f7}.detail-art img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 12px 40px #0004}.detail-art .catalog{font-size:10px;color:#666;letter-spacing:1.4px;margin-top:20px;display:flex;justify-content:space-between}.detail-copy{padding:57px 32px 35px}.eyebrow{font-size:11px;letter-spacing:1.8px;text-transform:uppercase;color:#666}.detail-copy h1{font-size:40px;line-height:1.02;font-weight:400;letter-spacing:-1.6px;margin:18px 0}.release-meta{font-size:12px;color:#666;line-height:1.8}.description{font-size:14px;line-height:1.65;color:#333;margin:25px 0}.track-heading{font-size:10px;letter-spacing:1.3px;color:#666;border-top:1px solid #ddd;padding-top:20px}.tracks{list-style:none;padding:0;margin:12px 0 0;counter-reset:track}.tracks li{counter-increment:track;font-size:13px;line-height:1.7;padding:6px 0}.tracks li:before{content:counter(track,decimal-leading-zero);color:#666;margin-right:17px;font-size:10px}.outlinks{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;margin-top:25px}.outlinks a{text-decoration:none;border-bottom:1px solid #74746b;padding-bottom:5px}.about-overlay{width:580px;padding:55px 48px 34px}.about-eyebrow{font-size:10px;letter-spacing:2px;color:#666}.about-overlay h1{font-weight:400;letter-spacing:-4px;font-size:88px;line-height:1;margin:28px 0 32px}.about-intro{font-size:25px;line-height:1.25;letter-spacing:-.6px;max-width:340px}.about-bio{font-size:15px;line-height:1.7;color:#444;max-width:410px}.about-bottom{border-top:1px solid #ddd;padding-top:24px;margin-top:42px;font-size:10px;letter-spacing:1.3px;color:#666}.demo-note{font-size:11px;line-height:1.6;letter-spacing:0;color:#666;margin:17px 0 0}#empty{position:absolute;top:44%;width:100%;text-align:center;color:#666}#empty p{font-size:20px;font-weight:400}
@media(min-width:1600px){.masthead{left:52px;top:42px}.filter-toggle{right:52px;top:40px}footer{left:52px;right:52px;bottom:40px}}
@media(max-width:640px){.masthead{left:22px;top:22px;gap:15px}.wordmark{font-size:25px}.archive-label{display:none}.filter-toggle{right:22px;top:20px}.filter-panel{right:16px;top:66px;width:min(300px,calc(100vw - 32px))}footer{bottom:22px;left:22px;right:22px}.explore-hint{font-size:8px;letter-spacing:1px;gap:0}.hint-line{display:none}.archive-count{font-size:10px}.archive-count .muted{display:none}#hover-caption{bottom:77px}.overlay{max-height:calc(100dvh - 32px);max-width:calc(100vw - 28px)}#detail-content{grid-template-columns:1fr}.detail-art{padding:24px 45px 18px}.detail-art img{max-height:31dvh;width:auto;align-self:center}.detail-art .catalog{margin-top:13px}.detail-copy{padding:25px}.detail-copy h1{font-size:34px;margin:12px 0}.description{margin:18px 0}.about-overlay{padding:48px 28px 28px}.about-overlay h1{font-size:72px}.about-intro{font-size:23px}.album-name strong{font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* WebGL owns the complete cover rendering; DOM buttons are keyboard controls only. */
#album-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}
#queue{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);perspective:none}
#queue .album{position:static;transform:none!important;display:block;width:1px;height:1px;padding:0;overflow:hidden}
#render-error{position:absolute;inset:40% 10% auto;text-align:center;font-size:15px;line-height:1.6;color:#666}

.about-intro,
.about-bio,
.demo-note,
.description {
  white-space: pre-line;
}
/* Wider personal panel with a responsive, fully visible name. */
.about-overlay{width:800px}
.about-overlay h1{font-size:clamp(28px,8vw,88px);letter-spacing:-.045em;line-height:1.08;overflow-wrap:anywhere;max-width:100%}
/* Album identity: preserve logo ratio, title, bold artist, two lines of space. */
.release-logo{display:block;width:auto;height:auto;max-width:min(100%,260px);max-height:100px;object-fit:contain;object-position:left center;margin:0 0 16px}
.detail-copy{min-width:0}
.detail-copy h1{margin:0 0 12px;overflow-wrap:anywhere}
.release-artist{color:#000;font-size:14px;font-weight:400;letter-spacing:normal;text-transform:none;line-height:1.6;margin:0 0 44.8px;margin-block-end:2lh;overflow-wrap:anywhere}
@media(max-width:640px){.release-logo{max-width:min(100%,220px);max-height:80px;margin-bottom:14px}.detail-copy h1{margin:0 0 10px}}

/* Hide the retired tagline even when an older HTML page is served. */
#about .about-bottom > span{display:none!important}
#about .about-bottom .demo-note{margin-top:0}

@media(pointer:coarse){
  .corner-button,.icon-button{min-width:44px;min-height:44px}
  .filter-toggle{top:max(14px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right))}
  footer{bottom:max(18px,env(safe-area-inset-bottom))}
  #hover-caption{max-width:calc(100vw - 40px);white-space:normal;text-align:center;flex-wrap:wrap;justify-content:center;gap:5px 12px;bottom:max(78px,calc(env(safe-area-inset-bottom) + 60px))}
  #hover-title{overflow-wrap:anywhere}
}

.detail-art .catalog .catalog-artist{font-weight:400;letter-spacing:normal;text-transform:none}

.sheet-music-link{font:inherit;text-align:left;padding:0 0 5px;border-bottom:1px solid #74746b}
.score-overlay{padding:0;border:0;border-radius:7px;background:#fff;color:#111;width:min(1100px,calc(100vw - 32px));height:calc(100dvh - 40px);max-width:none;max-height:none;overflow:hidden;box-shadow:0 30px 100px #0003}
.score-overlay::backdrop{background:#ffffffc9;backdrop-filter:blur(10px)}
.score-close{position:absolute;right:12px;top:12px;z-index:3;font-size:28px;width:44px;height:44px;padding:0;line-height:1;border-radius:50%;background:#ffffffd9}
.score-viewport{position:absolute;inset:0;overflow:hidden;overscroll-behavior:contain;touch-action:none;user-select:none;-webkit-user-select:none;background:#f5f5f5;cursor:pointer}
.score-viewport.is-zoomed{cursor:grab}.score-viewport.is-zoomed:active{cursor:grabbing}.score-viewport:focus-visible{outline:2px solid #888;outline-offset:-2px}
.score-viewport canvas{position:absolute;left:50%;top:50%;display:block;max-width:none;background:white;box-shadow:0 3px 14px #0001;transform-origin:center;pointer-events:none}
.score-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.score-status{position:absolute;z-index:2;left:50%;top:45%;transform:translate(-50%,-50%);margin:0;padding:12px 18px;font-size:14px;color:#555;background:#fffffff2;text-align:center}
.score-retry{position:absolute;z-index:2;left:50%;top:55%;transform:translateX(-50%);font:inherit;padding:10px;border-bottom:1px solid #777;background:white}
@media(max-width:640px){.score-overlay{width:100vw;height:100dvh;border-radius:0}.score-close{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}}

/* Album details stay on the same canvas; the transparent dialog only hosts text. */
#detail.detail-stage{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;background:transparent;color:#111;box-shadow:none;overflow:hidden;overscroll-behavior:contain;--detail-info:0;--model-width:32vw;--model-height:58vh}
#detail.detail-stage::backdrop{background:transparent;backdrop-filter:none}
.detail-stage #detail-content{display:block;position:relative;min-height:100%;margin:0}
.detail-back{position:fixed;top:max(22px,env(safe-area-inset-top));left:max(24px,env(safe-area-inset-left));z-index:4;font-size:14px;padding:12px 16px;background:#ffffffdf;border-radius:2px;min-height:44px}
.detail-stage .detail-hero,.detail-stage .detail-more{position:absolute;top:50dvh;transform:translateY(calc(-50% + var(--detail-info-shift,12px)));width:calc((100vw - var(--model-width))/2 - 64px);max-height:calc(100dvh - 140px);overflow:auto;opacity:var(--detail-info);pointer-events:none;scrollbar-width:thin}
.detail-stage.detail-ready .detail-hero,.detail-stage.detail-ready .detail-more{pointer-events:auto}
.detail-stage .detail-hero{left:calc(50% + var(--model-width)/2 + 28px)}
.detail-stage .detail-more{right:calc(50% + var(--model-width)/2 + 28px);text-align:right}
.detail-identity{display:flex;align-items:center;gap:16px;text-align:left}
.detail-cover{display:block;width:clamp(89.6px,8.4vw,140px);height:auto;aspect-ratio:1;object-fit:cover;flex-shrink:0}
.detail-name{min-width:0}.detail-name h1{font-size:clamp(22px,2vw,34px);line-height:1.13;font-weight:400;letter-spacing:-.035em;overflow-wrap:anywhere;margin:0 0 12px}
.detail-artist{font-size:14px;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:normal;overflow-wrap:anywhere;margin:0;color:#333}
.detail-name .release-logo{max-width:100%;max-height:60px;margin-bottom:12px}
.detail-facts .release-meta{font-size:14px;line-height:1.7}.detail-facts .description{margin:24px 0;font-size:14px}.detail-facts .outlinks{justify-content:flex-end;gap:14px 20px;font-size:14px}
.detail-facts .track-heading{margin-top:24px;font-size:11px}.detail-facts .tracks{font-size:14px}.detail-facts .tracks li{font-size:14px}
.detail-scroll-cue{display:none}
.album-detail-active #filter-toggle,.album-detail-active #info,.album-detail-active .masthead{pointer-events:none}
.album-detail-active #hover-caption{opacity:0!important}.album-detail-active #stage{cursor:default!important}
#detail.detail-mobile.detail-ready{overflow-y:auto;touch-action:pan-y}
.detail-stage.detail-mobile #detail-content{min-height:100dvh}
.detail-stage.detail-mobile .detail-hero{position:relative;top:auto;left:auto;width:100%;max-height:none;min-height:100svh;padding:calc(50svh + var(--model-height)/2 + 24px) 28px 24px;overflow:visible;transform:translateY(var(--detail-info-shift,12px));display:flex;flex-direction:column;align-items:center}
.detail-stage.detail-mobile .detail-identity{display:block;text-align:center;max-width:560px}
.detail-stage.detail-mobile .detail-name h1{font-size:clamp(25px,7vw,36px);margin:0 0 10px}.detail-stage.detail-mobile .detail-artist{font-size:15px}.detail-stage.detail-mobile .release-logo{margin:0 auto 12px;max-height:45px}
.detail-stage.detail-mobile .detail-scroll-cue{display:block;font-family:Arial,sans-serif;font-size:29px;line-height:1;min-width:48px;min-height:48px;margin:20px auto 0;padding:8px;animation:detail-scroll-hint 2s ease-in-out infinite}
.detail-stage.detail-mobile .detail-more{position:relative;top:auto;right:auto;width:min(100% - 56px,540px);max-height:none;margin:0 auto;padding:48px 0 max(90px,env(safe-area-inset-bottom));overflow:visible;transform:translateY(var(--detail-info-shift,12px));text-align:center}
.detail-stage.detail-mobile .detail-cover{width:min(64vw,280px);margin:0 auto 48px}.detail-stage.detail-mobile .detail-facts .outlinks{justify-content:center}
@keyframes detail-scroll-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@media(prefers-reduced-motion:reduce){.detail-scroll-cue{animation:none!important}}

.detail-facts .release-type{font-weight:700;color:#111}
.detail-model-drag{position:fixed;left:50%;top:50%;width:var(--model-width);height:var(--model-height);transform:translate(-50%,-50%);z-index:2;touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:none;cursor:grab;border-radius:6px}
.detail-ready .detail-model-drag{pointer-events:auto}.detail-model-drag.is-dragging{cursor:grabbing}.detail-model-drag:focus{outline:none}.detail-model-drag:focus-visible:not(.pointer-focused){outline:1px solid #777;outline-offset:10px}
.detail-stage.detail-mobile .detail-facts,.detail-stage.detail-mobile .sheet-music-link{text-align:center}

/* Isolate detail layout and promote only the model scroll surface. */
.detail-stage #detail-content{contain:layout style}
.album-detail-active #album-canvas{will-change:transform}