body{margin:0}
[hidden]{display:none!important}
/* Layout: one cinematic dusk scene, full-bleed. Glass nav pill on top, headline left, stop index right, caption + sun along the bottom. Single dark look by design. */
:root{
  color-scheme:dark;
  --bg:#1c1a21; --ink:#f3ede6; --muted:rgba(243,237,230,.66); --glass:rgba(46,41,50,.46); --glass-strong:rgba(34,30,38,.72);
  --line:rgba(243,237,230,.3); --hair:rgba(243,237,230,.14); --accent:#f0cfa2; --accent-ink:#221c18;
  --sans:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif; --serif:"Instrument Serif","Cormorant Garamond",Georgia,serif;
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:14px;overflow:hidden;overscroll-behavior:none}
#stage{position:fixed;inset:0;touch-action:none}
#stage canvas{display:block;width:100%;height:100%;outline:none}
#ui{position:fixed;inset:0;pointer-events:none;display:grid;grid-template-rows:auto 1fr auto;gap:14px;
  padding-block:calc(14px + env(safe-area-inset-top,0px)) calc(14px + env(safe-area-inset-bottom,0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
#ui > *{min-width:0}
.glass{pointer-events:auto;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}
.caps{font-size:11px;letter-spacing:.26em;text-transform:uppercase;font-weight:400}
nav{border-radius:999px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;padding:8px 10px 8px 26px}
.brand{font-size:19px;letter-spacing:.14em;font-weight:300;white-space:nowrap}
.brand sup{font-size:9px;letter-spacing:.2em;color:var(--muted);margin-left:6px;vertical-align:top}
.modes{display:flex;gap:6px}
.modes button{appearance:none;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--muted);font:400 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:12px 18px;cursor:pointer}
.modes button:hover{color:var(--ink)}
.modes button[aria-pressed="true"]{color:var(--ink);border-color:var(--line);background:rgba(243,237,230,.1)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mid{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:0}
#hero{max-width:min(520px,100%);display:grid;gap:18px;align-content:center;text-shadow:0 1px 24px rgba(20,16,24,.55)}
#hero .caps{color:var(--muted)}
#hero h1{margin:0;font-weight:200;font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance}
#hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent);letter-spacing:0}
#hero p{margin:0;font-size:clamp(15px,1.5vw,19px);line-height:1.5;color:var(--muted);max-width:44ch}
.cta{pointer-events:auto;justify-self:start;appearance:none;border:1px solid var(--line);border-radius:999px;background:var(--glass);color:var(--ink);font:400 11px var(--sans);letter-spacing:.26em;text-transform:uppercase;padding:15px 26px;cursor:pointer;backdrop-filter:blur(14px)}
.cta:hover{background:rgba(243,237,230,.16)}
.side{margin-left:auto;border-radius:26px;padding:10px 0;max-height:100%;overflow:auto}
.side button{appearance:none;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--muted);display:grid;grid-template-columns:30px 1fr;gap:6px;align-items:baseline;width:100%;text-align:left;font:400 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:9px 22px;cursor:pointer}
.side button:last-child{border-bottom:0}
.side button span{font-variant-numeric:tabular-nums;opacity:.6}
.side button small{display:block;font-size:10px;letter-spacing:.12em;opacity:.7;grid-column:2}
.side button:hover{color:var(--ink)}
.side button[aria-pressed="true"]{color:var(--accent)}
.bottom{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.caption{border-radius:26px;padding:18px 22px;max-width:min(440px,100%);display:grid;gap:8px;background:var(--glass-strong)}
.caption .caps{color:var(--accent)}
.caption h2{margin:0;font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.05;text-wrap:balance}
.caption p{margin:0;line-height:1.5;color:var(--muted);font-size:14.5px;max-width:58ch}
.navrow{display:flex;align-items:center;gap:12px;margin-top:6px}
.navrow button{appearance:none;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:400 10.5px var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:9px 16px;cursor:pointer}
.navrow button:disabled{opacity:.3;cursor:default}
.navrow .next{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:500}
.ticks{display:flex;gap:3px;flex:1;min-width:0}
.ticks i{flex:1;height:2px;background:var(--hair)}
.ticks i.on{background:var(--accent)}
.sun{border-radius:22px;padding:12px 18px;display:grid;gap:6px;min-width:230px;margin-left:auto}
.sun .row{display:flex;gap:10px;align-items:center;justify-content:space-between;color:var(--muted)}
.sun .row b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.1em}
.sun input[type=range]{width:100%;accent-color:var(--accent)}
.sun select{font:400 12px var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.sun select option{color:#221c18;background:#f3ede6}
#stick{position:fixed;left:calc(24px + env(safe-area-inset-left,0px));bottom:calc(250px + env(safe-area-inset-bottom,0px));width:104px;height:104px;border-radius:50%;touch-action:none}
#stick b{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;background:var(--accent)}
@media (pointer:fine){#stick{display:none}}
@media (pointer:coarse){body.walk .caption p{display:none}}
#err{position:fixed;inset:auto 16px 16px 16px;padding:14px 18px;border-radius:18px}
@media (max-width:1000px), (max-height:720px){ #index{display:none} }
@media (max-width:640px){
  nav{padding:8px 8px 8px 18px;border-radius:26px} .brand{font-size:15px} .modes{gap:2px} .modes button{padding:10px 11px;letter-spacing:.16em;font-size:10px}
  .caption{padding:14px 16px;border-radius:20px} .caption h2{font-size:26px} .caption p{font-size:13.5px} .sun{min-width:0;flex:1 1 200px;padding:10px 14px}
  .mid{align-items:flex-start} #hero{padding-top:10vh;gap:12px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }