:root{color-scheme:dark;--ink:#fbf2e8;--quiet:#d4d9db;--copper:#f3c7a4;font-family:"Helvetica Neue",Arial,sans-serif;font-synthesis:none}*{box-sizing:border-box}html{background:#0a1119}body{margin:0;color:var(--ink);-webkit-font-smoothing:antialiased}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--copper);outline-offset:4px}.skip{position:fixed;top:-100px;left:16px;z-index:50;background:var(--ink);color:#0a1119;padding:10px 16px}.skip:focus{top:16px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.room{min-height:100svh;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3.3vw,60px) clamp(22px,4vw,74px) 22px;background:#0c131d}.art,.wash{position:absolute;inset:0;z-index:-2;pointer-events:none}.art img,.art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.art img{filter:saturate(.9)}.art video{opacity:0;transition:opacity 3s ease}.room.has-video .art video{opacity:1}.wash{z-index:-1;background:linear-gradient(90deg,rgba(3,9,17,.82),rgba(3,9,17,.35) 46%,rgba(3,9,17,.08) 80%),linear-gradient(0deg,rgba(5,10,17,.96),rgba(5,10,17,.17) 31%,transparent 70%),linear-gradient(180deg,rgba(5,10,17,.54),transparent 29%);transition:background 2s,opacity 2s}.room.is-dim .wash{background:#03060b;opacity:.93}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:10;transition:opacity 1.7s}.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand span{font-size:clamp(23px,2.1vw,30px);font-weight:500;letter-spacing:-.078em}.brand img{filter:brightness(0) invert(1);opacity:.92}.period{color:var(--copper)}.library-link{font-size:14px;letter-spacing:.02em;text-decoration:none;border-bottom:1px solid #f9f1e97a;padding-bottom:4px}.library-link:hover{border-color:#fff}
.introduction{position:relative;z-index:2;margin:clamp(45px,10vh,150px) 0 auto;max-width:760px;transition:opacity 2.4s ease,transform 2.4s ease}.eyebrow{color:var(--copper);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin:0 0 28px}.separator{display:inline-block;width:18px;height:1px;vertical-align:middle;margin:0 12px;background:currentColor;opacity:.7}h1{font-weight:300;letter-spacing:-.073em;line-height:.99;font-size:clamp(56px,9vw,136px);margin:0 0 30px}.description{font-size:clamp(17px,1.5vw,21px);line-height:1.5;font-weight:300;color:#f8f2eddb;max-width:430px;margin:0}.room.is-playing .introduction{opacity:0;transform:translateY(-12px);pointer-events:none}.words{position:absolute;left:10%;right:10%;top:43%;z-index:3;margin:0;text-align:center;font-size:clamp(22px,3.6vw,54px);font-weight:300;letter-spacing:-.035em;line-height:1.22;color:#fff7ed;text-shadow:0 2px 34px #071019;opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity 2.2s ease,filter 2.4s ease,transform 2.4s ease;pointer-events:none}.words.is-visible{opacity:1;filter:blur(0);transform:translateY(0)}
.player{z-index:10;position:relative;width:min(100%,950px);align-self:center;margin-top:60px;padding:24px 27px 13px;background:linear-gradient(135deg,rgba(7,15,24,.68),rgba(18,29,38,.4));border:1px solid #f7eee650;-webkit-backdrop-filter:blur(25px) saturate(1.1);backdrop-filter:blur(25px) saturate(1.1);box-shadow:0 15px 55px #03060d55;transition:opacity 1.5s ease,transform 1.5s ease}.player-primary{display:flex;align-items:center;gap:18px}.play{width:62px;height:62px;flex:none;border:1px solid #f9f2e7ab;border-radius:50%;background:radial-gradient(circle at 34% 28%,#f7e8d8,#d8a982);color:#0b1921;display:grid;place-items:center;font-size:18px;padding-left:4px;box-shadow:0 0 30px #deb59244}.play:hover{filter:brightness(1.08)}.play.is-playing{padding-left:0}.play-copy{display:flex;flex-direction:column;gap:3px}.play-copy strong{font-size:19px;font-weight:400}.play-copy span{font-size:13px;color:#f8f1e5b5}.timing{display:flex;gap:10px;margin-left:auto;font-size:16px;font-variant-numeric:tabular-nums;color:#f9f2e8}.time-divider{opacity:.4}.seek{display:block;width:100%;height:4px;margin:20px 0 15px;accent-color:#f2c9a8;cursor:pointer}.seek:disabled{opacity:.5;cursor:default}.actions{display:flex;gap:4px;flex-wrap:wrap}.actions button{border:0;background:none;color:#f8f2e5bc;font-size:12px;letter-spacing:.02em;padding:9px 13px;min-height:40px}.actions button:first-child{margin-left:-13px}.actions button:hover,.actions button[aria-pressed=true]{color:#fff}.actions button[aria-pressed=true]:before{content:"•";color:var(--copper);margin-right:7px}.after{position:relative;z-index:5;align-self:center;width:min(100%,950px);display:flex;flex-wrap:wrap;gap:12px 25px;align-items:center;justify-content:space-between;color:#f8eee6b0;font-size:12px;padding:18px 0 0}.after p{margin:0}.after a{color:inherit}.after details{order:1;width:100%;font-size:14px}.after details summary{width:max-content;cursor:pointer;color:#f8eee6}.after details:not([open]){width:auto;order:0}.after details[open]{background:#101d25e6;padding:16px 20px;max-height:240px;overflow:auto}.after details p{font-size:14px;line-height:1.6;padding:7px 0;border-bottom:1px solid #ffffff18}.room.is-idle .topbar,.room.is-idle .player,.room.is-idle .after{opacity:0;transform:translateY(10px);pointer-events:none}.room.is-idle{cursor:none}.room.is-idle:focus-within .player{opacity:1;pointer-events:auto}.room.is-dim .art{opacity:.15}.room.motion-paused .art video{opacity:0}
@media(max-width:650px){.room{padding:19px 18px 13px}.brand span{font-size:23px}.library-link{font-size:12px}.introduction{margin-top:clamp(58px,12vh,130px)}h1{font-size:clamp(53px,12vw,78px)}.description{font-size:17px;max-width:320px}.wash{background:linear-gradient(0deg,rgba(4,9,16,.95),rgba(4,9,16,.15) 50%,rgba(4,9,16,.4)),linear-gradient(90deg,#060b11a8,transparent 90%)}.player{margin-top:40px;padding:16px 17px 8px}.play{width:58px;height:58px}.play-copy strong{font-size:16px}.play-copy span{font-size:12px}.timing{font-size:13px;gap:5px}.actions{justify-content:space-between;gap:0}.actions button{font-size:11px;padding:8px 5px}.actions button:first-child{margin-left:0}.after{font-size:11px;gap:8px 15px}.after p{width:100%;order:2}.words{top:37%;left:8%;right:8%;font-size:clamp(23px,6vw,34px)}}
@media(max-width:380px){.actions button{font-size:10px}.play-copy span{display:none}}
@media(prefers-reduced-motion:reduce){.art video{display:none}.room *, .room *:before,.room *:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Play and pause use a drawn icon rather than a font glyph. */
.play{padding:0;border-radius:17px;background:rgba(17,27,34,.58);color:#fff3e3;box-shadow:inset 0 1px 0 #ffffff24,0 9px 28px #0000002e;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.play:hover{background:rgba(255,236,210,.17);border-color:#fff3e3;transform:translateY(-1px);filter:none}
.play.is-playing{padding:0}
.transport-icon{display:block;width:24px;height:24px}
.transport-icon .icon-pause,.is-playing .transport-icon .icon-play{display:none}
.is-playing .transport-icon .icon-pause{display:block}