:root{--ink: #f4ead8;--muted: #bba98d;--gold: #d8b36c;--glass: rgba(16, 10, 8, .58);--line: rgba(216, 179, 108, .28);--serif: "Cormorant Garamond", Georgia, serif;--sans: "Inter", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#050302;color:var(--ink);font-family:var(--sans)}#scene{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.hidden{opacity:0;pointer-events:none}#intro{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at center,#0a050359,#050201d9);transition:opacity 1.6s ease;z-index:10}#intro.gone{opacity:0;pointer-events:none}.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}#intro h1{font-family:var(--serif);font-weight:500;font-size:clamp(48px,9vw,104px);margin:0 0 40px;line-height:1}.tagline{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,24px);color:var(--muted);margin:14px 0 40px}#btn-enter{font-family:var(--serif);font-size:20px;letter-spacing:.08em;padding:14px 40px;border:1px solid var(--gold);color:var(--gold);border-radius:999px;transition:background .3s,color .3s}#btn-enter:hover{background:var(--gold);color:#1a0f08}.hint{font-size:12px;letter-spacing:.06em;color:var(--muted);margin:22px 0 0;opacity:.8}.hint svg{width:14px;height:14px;fill:currentColor;vertical-align:-2px;margin-right:6px}#ui{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;transition:opacity 1.2s ease .8s;z-index:5}#ui>*{pointer-events:auto}#topbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:24px 32px;pointer-events:none}#topbar>*{pointer-events:auto}.monogram{display:flex;align-items:center;gap:14px;font-family:var(--serif)}.mono-mark{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;font-size:26px;font-style:italic;color:var(--gold);box-shadow:inset 0 0 0 4px #05030299,inset 0 0 0 5px #d8b36c59}.mono-name{font-size:15px;letter-spacing:.3em;text-transform:uppercase}#btn-lite{display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;transition:color .2s,border-color .2s}#btn-lite svg{width:12px;height:12px;fill:currentColor}#btn-lite:hover{color:var(--ink)}#btn-lite.on{color:var(--gold);border-color:var(--gold)}#acts{position:absolute;left:32px;top:50%;transform:translateY(-55%);display:flex;flex-direction:column;gap:6px}#acts:before{content:"";position:absolute;left:-32px;top:-120px;bottom:-120px;width:520px;pointer-events:none;z-index:-1;background:radial-gradient(ellipse 60% 50% at 20% 50%,rgba(8,5,3,.5),transparent 75%)}#acts .name,#acts .num,#acts .desc{text-shadow:0 2px 16px rgba(0,0,0,.55)}.mono-name,.monogram,#btn-lite{text-shadow:0 1px 10px rgba(0,0,0,.5)}#acts button{position:relative;text-align:left;padding:8px 28px 8px 0;display:grid;color:#f4ead8b8;transition:color .4s,transform .5s cubic-bezier(.2,.8,.2,1)}#acts .num{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);opacity:.7;transition:opacity .4s,letter-spacing .5s}#acts .name{font-family:var(--serif);font-style:italic;font-weight:500;line-height:1;font-size:clamp(40px,4.6vw,68px);letter-spacing:-.01em;transition:text-shadow .5s}#acts .desc{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s,opacity .5s,margin .5s}#acts button:after{content:"";position:absolute;left:0;bottom:2px;height:1px;width:100%;background:linear-gradient(90deg,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}#acts button:hover,#acts button:focus-visible,#acts button.active{color:var(--ink);transform:translate(14px);outline:none}#acts button:hover .num,#acts button.active .num{opacity:1;letter-spacing:.5em}#acts button:hover .name,#acts button.active .name{text-shadow:0 0 28px rgba(255,200,120,.45),0 2px 16px rgba(0,0,0,.55)}#acts button:hover .desc,#acts button.active .desc{max-height:30px;opacity:1;margin-top:6px}#acts button:hover:after,#acts button.active:after{transform:scaleX(1)}#acts.has-active button:not(.active):not(:hover){color:#f4ead84d}#acts .beam{position:absolute;left:-32px;top:0;width:620px;height:260px;margin-top:-130px;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(ellipse 70% 50% at 18% 50%,rgba(255,214,150,.22),rgba(255,214,150,.06) 55%,transparent 75%);clip-path:polygon(0 44%,100% 0,100% 100%,0 56%);transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .5s}#ui:before,#ui:after{content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:-1}#ui:before{top:0;height:150px;background:linear-gradient(rgba(6,4,3,.55),transparent)}#ui:after{bottom:0;height:240px;background:linear-gradient(transparent,#0604039e)}#acts:before{background:radial-gradient(ellipse 62% 52% at 22% 50%,rgba(8,5,3,.66),rgba(8,5,3,.2) 60%,transparent 78%)}#dock{position:absolute;top:0;right:0;bottom:0;width:min(460px,100vw);display:flex;flex-direction:column;background:linear-gradient(90deg,#100b08d1,#0a0705f0);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);border-left:1px solid var(--line);box-shadow:-30px 0 80px #00000059;transform:translate(104%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}#dock.open{transform:none}#dock:before{content:"";position:absolute;left:40px;right:40px;top:72px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5}#dock .close{position:absolute;top:20px;right:24px;z-index:2;font-size:32px;line-height:1;color:var(--muted)}#dock .close:hover{color:var(--ink)}.panel{display:none;flex:1;overflow-y:auto;padding:100px 40px 48px;scrollbar-width:thin;scrollbar-color:rgba(216,179,108,.3) transparent}.panel.open{display:block;animation:dockIn .55s cubic-bezier(.2,.8,.2,1) both}@keyframes dockIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.panel h2{font-family:var(--serif);font-weight:500;font-size:40px;margin:0 0 18px;line-height:1.08}.panel p{color:#efe4d0;line-height:1.75;font-size:16px}.links{list-style:none;padding:0;margin:0}.links li{border-top:1px solid var(--line)}.links a{display:block;padding:14px 0;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:22px}.links a:hover{color:var(--gold)}.filters{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 18px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:6px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:#eadcc4;transition:border-color .2s,background .2s,color .2s}.chip:hover{border-color:var(--gold)}.chip.active{background:var(--gold);border-color:var(--gold);color:#1a0f08}.chip .n{margin-left:5px;font-size:11px;opacity:.6}.shuffle-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted);white-space:nowrap;transition:color .2s,border-color .2s,background .2s}.shuffle-toggle svg{width:14px;height:14px;fill:currentColor}.shuffle-toggle[aria-pressed=true]{color:var(--gold);border-color:var(--gold);background:#d8b36c1f}#tracklist{list-style:none;padding:0;margin:0;counter-reset:piece}#tracklist li{counter-increment:piece;border-top:1px solid var(--line)}#tracklist li[hidden]{display:none}#tracklist button{width:100%;text-align:left;display:grid;grid-template-columns:36px 1fr;gap:0 10px;padding:14px 6px;border-radius:10px;transition:background .2s}#tracklist button:hover{background:#d8b36c14}#tracklist button:before{content:counter(piece,upper-roman) ".";font-family:var(--serif);color:var(--gold);font-size:19px;line-height:1.3}#tracklist .t{display:block;font-family:var(--serif);font-size:22px;line-height:1.2}#tracklist li.current .t{color:var(--gold)}#tracklist li.current button{background:#d8b36c1a}.empty{color:var(--muted);font-style:italic;font-family:var(--serif);font-size:17px;padding:16px 0}#subtitles{position:absolute;left:50%;bottom:132px;transform:translate(-50%);width:min(820px,calc(100vw - 48px));text-align:center;pointer-events:none;transition:left .6s cubic-bezier(.2,.8,.2,1)}#subtitles span{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,30px);line-height:1.5;color:#fbf3e4;text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.7);background:#08050461;padding:3px 14px;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;opacity:0;transition:opacity 1.1s ease}#subtitles span:empty{display:none}#subtitles.show span{opacity:1}#player{position:absolute;left:50%;bottom:24px;transform:translate(-50%);width:min(680px,calc(100vw - 32px));display:flex;align-items:center;gap:16px;padding:12px 22px 12px 12px;background:#0e0907cc;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:999px;box-shadow:0 12px 40px #00000059;transition:left .6s cubic-bezier(.2,.8,.2,1),width .6s}.controls{display:flex;align-items:center;gap:2px}.controls button{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;color:#c9b99c;transition:color .2s}.controls button:hover{color:var(--ink)}.controls svg{width:16px;height:16px;fill:currentColor}.controls .shuffle[aria-pressed=true]{color:var(--gold)}.controls .play{width:46px;height:46px;border:1px solid var(--gold);color:var(--gold)}.controls .play svg{width:18px;height:18px}.play .i-pause,.play.playing .i-play{display:none}.play.playing .i-pause{display:block}.meta{flex:1;min-width:0}.meta .title{font-family:var(--serif);font-size:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.progress{margin-top:7px;height:3px;background:#ffffff1f;border-radius:2px;overflow:hidden;cursor:pointer}.progress .bar{height:100%;width:0;background:var(--gold)}.progress.live .bar{width:30%;animation:live 2.4s ease-in-out infinite alternate;opacity:.6}@keyframes live{0%{transform:translate(-100%)}to{transform:translate(340%)}}#volume{width:84px;accent-color:var(--gold)}body.dock-open #player{left:calc((100vw - min(460px,100vw))/2);width:min(620px,calc(100vw - 500px))}body.dock-open #subtitles{left:calc((100vw - min(460px,100vw))/2);width:min(680px,calc(100vw - 520px))}@media (max-width: 1150px){body.dock-open #player{left:50%;width:min(680px,calc(100vw - 32px));z-index:6}body.dock-open #subtitles{left:50%;width:calc(100vw - 48px);z-index:6}.panel{padding-bottom:130px}}@media (max-width: 700px){#topbar{padding:14px 16px}.mono-mark{width:36px;height:36px;font-size:20px}.mono-name{font-size:12px;letter-spacing:.22em}#acts{left:16px;right:16px;top:70px;transform:none;flex-direction:row;justify-content:space-between;gap:0}#acts button{padding:4px 0}#acts button:hover,#acts button.active{transform:none}#acts .name{font-size:26px}#acts .num{font-size:8px;letter-spacing:.25em}#acts .desc,#acts .beam{display:none}#dock{width:100vw}.panel{padding:84px 22px 130px}.panel h2{font-size:32px}#player,body.dock-open #player{left:50%;width:calc(100vw - 24px);bottom:12px;border-radius:22px;gap:8px;padding:8px 12px 8px 8px;z-index:3}#subtitles,body.dock-open #subtitles{left:50%;bottom:96px;width:calc(100vw - 32px)}#subtitles span{font-size:19px}#volume{display:none}}