@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600&family=Libre+Caslon+Display&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#e7e2d7;background:#080b0e;font-synthesis:none;font-weight:400;--muted:#9f9f97;--warm:#d7bd91}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;cursor:pointer}button{border:0}button:disabled{opacity:.45;cursor:wait}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--warm);outline-offset:5px}button:hover{filter:brightness(1.14)}[hidden]{display:none!important}
#ride,#scene,.shade{position:fixed;inset:0;width:100%;height:100%}#scene{display:block;background:#080b0e} .shade{pointer-events:none;background:linear-gradient(180deg,#05060960,transparent 22%,transparent 60%,#0305068c);transition:opacity 2s}.chrome{position:fixed;z-index:2;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;transition:opacity 1.8s;pointer-events:none}.chrome a,.chrome button{pointer-events:auto}header{top:32px}.wordmark{font-size:11px;letter-spacing:.25em;text-decoration:none;display:flex;align-items:center;gap:12px;font-weight:500}.moon{font-size:23px;color:var(--warm);line-height:1;transform:rotate(-35deg)}.scene-label{font-size:9px;letter-spacing:.2em;color:#bcb8ad;display:flex;align-items:center;gap:13px}.scene-label i{width:3px;height:3px;border-radius:50%;background:#b2966b}footer{bottom:25px;color:#b0aea5;font-size:10px;letter-spacing:.035em}.text-button{background:none;padding:5px 0;font-size:11px;color:#b7b9b1}.keyhint{font-size:9px;border:1px solid #ffffff26;border-radius:4px;padding:2px 5px;margin-left:10px;opacity:.7}
#arrival{position:fixed;left:8.5%;bottom:20%;z-index:2;transition:opacity 1.4s,transform 1.4s;max-width:90vw}#arrival.leaving{opacity:0;transform:translateY(8px);pointer-events:none}.eyebrow{font-size:9px;letter-spacing:.20em;color:#b3afa3;font-weight:500}#arrival .eyebrow{color:#c3b699;margin:0 0 16px}h1{font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(58px,7.1vw,112px);font-weight:400;letter-spacing:-.035em;line-height:1;margin:0;text-shadow:0 3px 40px #0008}.intro{font-size:13px;letter-spacing:.01em;color:#c2c0b5;margin:22px 0 28px}.enter{background:#e4dac5;color:#262822;padding:14px 19px;border-radius:4px;min-width:188px;text-align:left;font-size:12px;box-shadow:0 5px 35px #0003}.enter span{float:right;margin-left:25px}#loading{font-size:10px;color:#9b9b91;margin:14px 0;min-height:14px}.entered #arrival{display:none}.entered .shade{opacity:.45}
#reveal{position:fixed;bottom:70px;left:42px;z-index:4;background:#111713a6;backdrop-filter:blur(15px);border:1px solid #d2d7c01c;border-radius:30px;display:flex;align-items:center;gap:11px;padding:12px 16px;font-size:11px;color:#d4d5c9;transition:opacity 1.5s,background .3s;max-width:calc(100vw - 42px)}.tiny-bars{display:flex;align-items:center;gap:2px;height:13px}.tiny-bars i{width:2px;height:5px;background:#ccb789}.tiny-bars i:nth-child(2){height:12px}.tiny-bars i:nth-child(3){height:8px}.idle .chrome{opacity:0;pointer-events:none}.idle .chrome button,.idle .chrome a{pointer-events:none}.idle #reveal{opacity:.25}.idle #reveal:hover,.idle #reveal:focus-visible{opacity:1}.ui-hidden .chrome{opacity:0;pointer-events:none}.ui-hidden #reveal{opacity:.10}.ui-hidden #reveal:focus-visible,.ui-hidden #reveal:hover{opacity:1}
.panel{position:fixed;z-index:5;left:32px;bottom:65px;width:360px;max-height:calc(100dvh - 110px);overflow:auto;padding:20px 23px 11px;background:linear-gradient(135deg,#1b201ef5,#111613f5);border:1px solid #e9e0bf22;box-shadow:0 20px 90px #0008,inset 0 1px #ffffff04;border-radius:12px;backdrop-filter:blur(24px);scrollbar-width:thin;scrollbar-color:#66685e transparent;animation:panel-in .3s ease-out}.panel-head,.atmosphere-heading,.panel-foot{display:flex;align-items:center;justify-content:space-between}.icon-button{background:transparent;font-size:22px;width:34px;height:34px;color:#bdc0b5;display:inline-grid;place-items:center}.panel-head .icon-button{margin-right:-9px;font-size:24px}.track-row{display:flex;gap:15px;align-items:center;margin:14px 0 18px}.record{width:49px;height:49px;border-radius:50%;flex:none;background:repeating-radial-gradient(circle at center,#30352f 0 1px,#1a211c 1.5px 3px);border:1px solid #525848;display:grid;place-items:center}.record i{width:15px;height:15px;border-radius:50%;background:#baa47a;box-shadow:inset 0 0 0 6px #918260}.track-copy{min-width:0}.track-copy p{margin:0;line-height:1.5}#track-title{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis}#track-artist{font-size:10px;color:#adb1a4;margin-top:4px}.status{font-size:10px;color:#adb5a4;line-height:1.65;margin:0 0 13px}.spotify-button{display:flex;align-items:center;gap:9px;width:100%;border-radius:5px;background:#d9e1d2;color:#1c2a21;padding:12px;font-size:11px;font-weight:500}.spotify-button svg{width:18px;height:18px}.spotify-button span{margin-left:auto}.divider{height:1px;background:#ffffff12;margin:22px 0 13px}.range-row{display:flex;align-items:center;gap:12px;font-size:10px;margin:18px 0;color:#c8cabc}.range-row>input{flex:1;min-width:25px}.range-row>output{font-size:9px;min-width:31px;text-align:right;color:#b7bbae}.pace-row{margin-bottom:5px}.pace-row>output{min-width:63px}.pace-ends{display:flex;justify-content:space-between;padding-left:38px;padding-right:77px;font-size:8px;color:#8f9689}input[type=range]{height:3px;accent-color:#ccb68b;cursor:pointer}input[type=checkbox]{accent-color:var(--warm)}.toggle-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#c8cabc;margin:21px 0;position:relative}.toggle-row input{position:absolute;right:0;width:32px;height:20px;opacity:0;cursor:pointer;z-index:1}.switch{width:28px;height:16px;border-radius:10px;background:#363d33;border:1px solid #a6b08d20;position:relative}.switch:after{content:'';position:absolute;width:10px;height:10px;top:2px;left:2px;border-radius:50%;background:#909584;transition:transform .25s,background .25s}input:checked+.switch{background:#8d7c57}input:checked+.switch:after{transform:translateX(12px);background:#e4d7b8}input:focus-visible+.switch{outline:2px solid var(--warm);outline-offset:3px}details{border-top:1px solid #ffffff10;padding-top:14px}summary{font-size:10px;color:#b9beaf;cursor:pointer;list-style:none}summary:before{content:'+';margin-right:10px;color:#d4c29f}details[open] summary:before{content:'−'}summary>span{float:right;color:#818b7a;font-size:9px}.panel-foot{border-top:1px solid #ffffff10;margin-top:18px;padding-top:7px;font-size:8px;color:#8a9584}.panel-foot .icon-button{font-size:21px;width:29px}#spotify-setup{margin-top:15px;font-size:10px}#client-id{display:block;width:100%;margin:8px 0;background:#080e09;border:1px solid #6b775440;padding:11px;color:#dedfd1;border-radius:4px;font:inherit}code{display:block;font:9px monospace;word-break:break-all;margin-top:5px;color:#c6b895}.setup-note{font-size:10px;line-height:1.65;color:#a0aa96}.secondary-button{background:#374132;padding:10px;border-radius:4px;font-size:10px;width:100%;margin:3px 0 12px}#spotify-setup>a{font-size:9px;color:#b0bca2}.transport{display:flex;justify-content:center;align-items:center;gap:25px;margin:16px 0}.transport .icon-button{font-size:16px}.play{border-radius:50%;background:#d7dfcd;color:#182016;width:42px;height:42px}.transport~.text-button{margin-right:18px}#scene-error{position:fixed;top:110px;left:30px;max-width:430px;padding:20px;background:#242a21;border:1px solid #a99a6e;border-radius:8px;font-size:13px;line-height:1.6;z-index:9}@keyframes panel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.chrome{left:22px;right:22px}header{top:24px}.scene-label{display:none}.wordmark{font-size:9px;letter-spacing:.19em}#arrival{left:26px;bottom:22%}.intro{max-width:260px;line-height:1.7;font-size:12px}h1{font-size:64px}.eyebrow{font-size:8px}#reveal{left:22px;bottom:55px}.panel{left:12px;bottom:43px;width:calc(100% - 24px);padding:15px 20px 8px;max-height:calc(100dvh - 68px)}footer{bottom:18px}#hint{font-size:8px;max-width:165px}.keyhint{display:none}.panel-foot{font-size:8px}}
@media(max-height:550px){#arrival{bottom:19%}h1{font-size:54px}.intro{margin:12px 0 18px}#arrival .eyebrow{margin-bottom:10px}.panel{bottom:12px;max-height:calc(100dvh - 24px)}footer{bottom:16px}#reveal{bottom:50px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}