:root{--ink:#f4eee5;--muted:rgba(244,238,229,.66);--faint:rgba(244,238,229,.42);--hair:rgba(244,238,229,.24)}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#111;color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{overflow:hidden}
button,input{font:inherit}
.experience{position:relative;width:100%;height:100svh;min-height:540px;overflow:hidden;isolation:isolate;background:#111}
.art,.shade,.grain{position:absolute;inset:0}
.art{z-index:-3;background:url('assets/background.webp') center 52%/cover no-repeat;transform:scale(1.006);filter:saturate(.96) contrast(.98) brightness(1.02);animation:breath 30s ease-in-out infinite alternate}
.shade{z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.04),transparent 30%,transparent 70%,rgba(0,0,0,.34));pointer-events:none}
.grain{z-index:20;opacity:.022;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.site-mark{position:absolute;z-index:4;left:28px;right:28px;top:max(23px,env(safe-area-inset-top));display:flex;justify-content:space-between;align-items:center;font:400 8px/1 Arial,Helvetica,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,238,229,.76)}
.mark-title{white-space:nowrap}.playlist-link{border:0;background:none;color:inherit;cursor:pointer;padding:4px 0;font:inherit;letter-spacing:inherit}.playlist-link:hover{color:#fff}
.message{position:absolute;z-index:3;left:50%;top:12.5%;transform:translateX(-50%);width:min(600px,90vw);text-align:center;pointer-events:none}.message-line{font:400 clamp(8px,.78vw,10px)/1.45 Arial,Helvetica,sans-serif;letter-spacing:.18em;color:rgba(244,238,229,.72);text-shadow:0 2px 18px rgba(0,0,0,.32)}

/* Minimal bottom player: deliberately close to the quiet, image-first reference treatment. */
.player{position:absolute;z-index:12;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(680px,calc(100vw - 38px));color:var(--ink)}
.player-main{display:grid;grid-template-columns:54px minmax(130px,190px) auto minmax(130px,1fr) auto auto;align-items:center;gap:12px;padding:7px 8px 7px 7px;background:rgba(12,11,10,.27);border:1px solid rgba(244,238,229,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.12)}
.cover-button{position:relative;width:54px;height:54px;border:0;padding:0;background:#151311;overflow:hidden;cursor:pointer}.cover-button img{width:100%;height:100%;object-fit:cover;display:block}.cover-play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.13);font-size:10px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);opacity:.95}
.track-block{min-width:0}.track-title{font:400 9px/1.25 Arial,Helvetica,sans-serif;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist{margin-top:5px;font:400 8px/1 Arial,Helvetica,sans-serif;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-controls{display:flex;align-items:center;gap:0}.player-controls button{border:0;background:none;color:var(--ink);font:300 21px/1 Arial,Helvetica,sans-serif;padding:5px 4px;cursor:pointer}.player-controls button:hover{opacity:.62}
.progress-wrap{min-width:100px}.progress-wrap input{display:block;width:100%;margin:0}.progress-wrap input[type=range]{appearance:none;height:1px;background:rgba(244,238,229,.42);outline:none;cursor:pointer}.progress-wrap input[type=range]::-webkit-slider-thumb{appearance:none;width:6px;height:6px;border-radius:50%;background:var(--ink)}.progress-wrap input[type=range]::-moz-range-thumb{width:6px;height:6px;border:0;border-radius:50%;background:var(--ink)}
.time-row{display:flex;justify-content:space-between;margin-top:5px;font:400 7px/1 Arial,Helvetica,sans-serif;color:var(--faint);font-variant-numeric:tabular-nums}
.sound,.spotify{border:0;background:none;color:var(--muted);font:400 7px/1 Arial,Helvetica,sans-serif;letter-spacing:.10em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;padding:4px}.sound:hover,.spotify:hover{color:#fff}
.status{position:absolute;left:7px;bottom:-13px;font:400 6px/1 Arial,Helvetica,sans-serif;letter-spacing:.1em;color:rgba(244,238,229,.58);text-transform:uppercase}
.veil{position:absolute;z-index:10;inset:0;background:rgba(0,0,0,.20);opacity:0;pointer-events:none;transition:opacity .35s}.veil.on{opacity:1;pointer-events:auto}
.playlist{position:absolute;z-index:13;top:0;right:0;height:100%;width:min(390px,100vw);padding:28px 26px 18px;background:rgba(12,11,10,.66);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transform:translateX(102%);transition:transform .42s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}.playlist.open{transform:translateX(0)}
.playlist-head{display:flex;justify-content:space-between;align-items:flex-start;padding-top:max(8px,env(safe-area-inset-top));border-bottom:1px solid var(--hair);padding-bottom:17px}.playlist-label{font:400 7px/1 Arial,Helvetica,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.playlist h2{margin:8px 0 0;font-size:16px;font-weight:400;letter-spacing:.10em}.close-btn{border:0;background:none;color:var(--muted);font-size:20px;line-height:1;padding:2px 4px;cursor:pointer}.playlist-scroll{overflow:auto;padding:7px 0;flex:1}.playlist-scroll::-webkit-scrollbar{width:3px}.playlist-scroll::-webkit-scrollbar-thumb{background:rgba(244,238,229,.25)}.track-row{display:grid;grid-template-columns:27px 1fr auto;gap:10px;align-items:center;padding:11px 3px;border:0;border-bottom:1px solid rgba(244,238,229,.06);background:transparent;color:inherit;width:100%;text-align:left;cursor:pointer}.track-row:hover{background:rgba(244,238,229,.045)}.track-row.active{background:rgba(244,238,229,.08)}.track-num{font:400 7px/1 Arial,Helvetica,sans-serif;color:var(--faint)}.track-name{font:400 10px/1.3 Arial,Helvetica,sans-serif}.track-artist{display:block;margin-top:4px;font:400 8px/1.2 Arial,Helvetica,sans-serif;color:var(--faint)}.track-state{font:400 7px/1 Arial,Helvetica,sans-serif;color:var(--faint)}.playlist-foot{display:flex;justify-content:space-between;border-top:1px solid var(--hair);padding-top:14px;font:400 7px/1 Arial,Helvetica,sans-serif;letter-spacing:.10em;text-transform:uppercase;color:var(--faint)}.playlist-foot a{color:var(--muted);text-decoration:none}
#yt-player{position:fixed;width:200px;height:200px;right:8px;top:8px;opacity:.01;pointer-events:none;z-index:2}
@keyframes breath{from{transform:scale(1.006)}to{transform:scale(1.014)}}
@media(max-width:760px){.site-mark{left:17px;right:17px;top:max(18px,env(safe-area-inset-top));font-size:7px}.message{top:11%;width:88vw}.message-line{font-size:8px;letter-spacing:.14em}.player{width:calc(100vw - 16px);bottom:max(8px,env(safe-area-inset-bottom))}.player-main{grid-template-columns:44px minmax(80px,1fr) auto;gap:8px;padding:6px}.cover-button{width:44px;height:44px}.player-controls button{font-size:19px}.progress-wrap,.sound,.spotify{display:none}.playlist{padding:20px 18px 16px}.art{background-position:50% 48%}}
@media(prefers-reduced-motion:reduce){.art{animation:none}.playlist{transition:none}}