:root{
  /* layout: the street scene is fixed behind everything; each time of day is a tall chapter whose
     pinned stage holds free-standing copy on one side and tilting media cards on the other,
     leaving the bottom third of the screen clear for the street */
  --ink:#080b10;
  --paper:#f1f4f7;
  --muted:#a9b5c2;
  --rule:rgba(255,255,255,.2);
  --glass:rgba(10,14,20,.52);
  --accent:#b7cbe0;
  --display:"Noto Serif SC","Songti SC","SimSun",serif;
  --latin:"Barlow Condensed","Arial Narrow","Helvetica Neue",sans-serif;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:dark;
}
@view-transition{navigation:auto}
@property --es{syntax:'<number>';inherits:false;initial-value:1}
@property --ey{syntax:'<length>';inherits:false;initial-value:0px}
*{box-sizing:border-box;margin:0}
html{background:var(--ink)}
html.loading,html.locked{overflow:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
canvas#scene{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- top bar ---------- */
.bar{position:fixed;z-index:30;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:16px clamp(16px,3vw,40px);pointer-events:none;
  background:linear-gradient(rgba(6,9,14,.6),rgba(6,9,14,0))}
.bar>*{pointer-events:auto}
.mark{font-family:var(--latin);font-weight:800;font-size:22px;letter-spacing:.14em;text-transform:uppercase;margin-right:6px;white-space:nowrap}
.mark b{color:var(--accent);font-weight:800}
.chip{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;background:var(--glass);border:0;
  -webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);font-size:13px;white-space:nowrap}
.clock b{font-family:var(--latin);font-weight:600;font-size:18px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.clock span{color:var(--muted)}
.links{margin-left:auto;gap:2px;padding:0 5px}
.links span{padding:5px 13px;border-radius:999px;color:var(--muted);cursor:default}
.links a{padding:5px 13px;border-radius:999px;color:var(--paper);text-decoration:none}
.links a:hover{background:rgba(255,255,255,.1)}
.links a.fresh{position:relative}
.links a.fresh::after{content:"";position:absolute;top:5px;right:6px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.links .login{color:var(--paper);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.sound{cursor:pointer;transition:box-shadow .3s,color .3s}
.sound[aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.eq i{width:2px;height:4px;background:currentColor;border-radius:1px}
.sound[aria-pressed="true"] .eq i{animation:eq .9s ease-in-out infinite}
.sound[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.3s}.sound[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:3px}50%{height:12px}}

/* ---------- time rail ---------- */
.rail{position:fixed;z-index:30;right:clamp(16px,2.2vw,34px);top:50%;transform:translateY(-50%);height:min(240px,34vh);width:2px;background:rgba(255,255,255,.22);border-radius:2px}
.rail .fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0)*100%);background:var(--accent);border-radius:2px}
.rail button{position:absolute;right:-6px;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:#0c1118;transform:translateY(-50%);cursor:pointer;padding:0;transition:background .3s,border-color .3s,transform .3s}
.rail button span{position:absolute;right:24px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font-size:12px;color:#fff;opacity:0;transition:opacity .25s,transform .25s;background:var(--glass);padding:3px 10px;border-radius:999px;pointer-events:none}
.rail button:hover span,.rail button.on span,.rail button:focus-visible span{opacity:1;transform:translate(0,-50%)}
.rail button.on{border-color:var(--accent);background:var(--accent);transform:translateY(-50%) scale(1.15)}

/* ---------- chapters ---------- */
main{position:relative;z-index:10}
.chapter{position:relative;height:200vh;--o:1;--ty:0px}
.chapter.hero{height:150vh}
.chapter.hero .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:center;
  padding:92px clamp(28px,6.5vw,116px) 34vh;isolation:isolate}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--o);
  background:radial-gradient(ellipse 50% 66% at 22% 38%,rgba(7,10,16,.74),rgba(7,10,16,.5) 42%,rgba(7,10,16,0) 76%)}
.chapter.r .stage::before{background:radial-gradient(ellipse 50% 66% at 78% 38%,rgba(7,10,16,.74),rgba(7,10,16,.5) 42%,rgba(7,10,16,0) 76%)}
.chapter.r .copy{order:2}
.copy{opacity:var(--o);transform:translate3d(0,var(--ty),0);text-shadow:0 1px 16px rgba(4,7,12,.6)}
.meta{display:flex;align-items:center;gap:12px;font-size:13px;letter-spacing:.1em;color:#dde4ea}
.meta .no{font-family:var(--latin);font-weight:600;font-size:16px;color:var(--accent);letter-spacing:.16em}
.meta .line{width:46px;height:1px;background:var(--accent);opacity:.75;transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.16,.84,.24,1) .25s}
.chapter.on .meta .line{transform:none}
.time{font-family:var(--latin);font-weight:300;font-size:clamp(56px,11.5vh,108px);line-height:.92;color:var(--accent);font-variant-numeric:tabular-nums;margin:12px 0 4px -3px}
h1{font-family:var(--latin);font-weight:800;text-transform:uppercase;line-height:.84;letter-spacing:.015em;font-size:clamp(60px,min(14vh,7.7vw),128px);margin:14px 0 0 -4px}
h1 small{display:block;font-weight:300;font-size:.25em;letter-spacing:.44em;margin-top:.55em;color:var(--accent);white-space:nowrap}
h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,5.2vh,46px);line-height:1.22;text-wrap:balance}
.lede{font-size:clamp(15px,2.05vh,17px);line-height:1.9;color:#e6ebf0;max-width:30em;margin-top:16px}
.fine{font-size:13px;color:var(--muted);margin-top:18px}
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:24px;position:relative}
.feats::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.16,.84,.24,1) .4s}
.chapter.on .feats::before{transform:none}
.feats div{padding:14px 14px 0 0}
.feats div+div{padding-left:16px;border-left:1px solid var(--rule)}
.feats dt{font-weight:700;font-size:15px}
.feats dd{font-size:13px;color:var(--muted);margin:2px 0 0;line-height:1.55}
.actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px}
.cta{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#0a0e14;background:var(--accent);border:0;padding:13px 20px 13px 26px;border-radius:999px;cursor:pointer;
  text-shadow:none;box-shadow:0 14px 34px -12px var(--accent);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.cta svg{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.cta:hover{transform:translateY(-2px);box-shadow:0 20px 40px -12px var(--accent)}
.cta:hover svg{transform:translateX(4px)}
.hint{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:8px}
.hint::after{content:"";width:1px;height:26px;background:linear-gradient(var(--muted),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:translateY(-6px);opacity:0}40%{opacity:1}100%{transform:translateY(8px);opacity:0}}
.pending{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);padding:11px 20px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);text-shadow:none}
.pending::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:24px 0 0;padding:0;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;left:14px;right:22%;top:14px;height:1px;background:var(--rule)}
.steps li{list-style:none;counter-increment:s;font-size:13px;line-height:1.5;padding-right:12px;position:relative}
.steps li::before{content:counter(s);display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#0c1118;box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent);
  font-family:var(--latin);font-weight:600;font-size:16px;margin-bottom:10px;text-shadow:none}
.more{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.more span{font-size:13px;color:var(--muted);padding:5px 13px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);text-shadow:none}

/* ---------- entrance ---------- */
.ch{display:inline-block;overflow:hidden;vertical-align:top}
.ch>i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .95s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--i)*28ms + 140ms)}
h1 .ch{line-height:.95}
.ttl{white-space:nowrap}
.chapter.on .ch>i{transform:none}
.chapter:not(.on) .ch>i{transition-duration:.3s;transition-delay:0s}
.rise{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .95s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--r,0)*70ms + 90ms)}
.chapter.on .rise{opacity:1;transform:none}
.chapter:not(.on) .rise{transition-duration:.3s;transition-delay:0s}

/* ---------- media cards ---------- */
.media{position:relative;height:min(50vh,470px);opacity:var(--o)}
.card{position:absolute;display:block;padding:0;border:0;background:#0b1016;border-radius:18px;overflow:hidden;cursor:zoom-in;aspect-ratio:16/9;
  --es:.9;--ey:54px;opacity:0;
  transform:perspective(1100px) translate3d(0,calc(var(--py,0px) + var(--ey)),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--rz,0deg)) scale(calc(var(--sc,1)*var(--es)));
  box-shadow:0 0 0 1px rgba(255,255,255,.2),0 36px 70px -26px rgba(0,0,0,.8),0 12px 26px -12px rgba(0,0,0,.55);transition:--es 1.15s cubic-bezier(.16,.84,.24,1) var(--d,.1s),--ey 1.15s cubic-bezier(.16,.84,.24,1) var(--d,.1s),opacity .7s ease var(--d,.1s),box-shadow .35s;will-change:transform}
.chapter.on .card{--es:1;--ey:0px;opacity:1}
.chapter:not(.on) .card{transition-duration:.35s,.35s,.3s,.35s;transition-delay:0s}
.card.a{left:0;top:0;width:82%;--rz:-1.6deg}
.card.b{right:0;bottom:0;width:54%;--rz:2.4deg;z-index:2;--d:.26s}
.media.solo{height:auto}
.media.solo .card{position:relative;width:100%;--rz:1.2deg}
.card img{width:100%;height:100%;object-fit:cover;display:block;image-rendering:pixelated;background:#121a22;
  transform:scale(1.07) translate(var(--ix,0%),var(--iy,0%));filter:saturate(.94);transition:filter .4s}
.card:hover img,.card:focus-visible img{filter:saturate(1.12) brightness(1.07)}
.card .glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.36),rgba(255,255,255,0) 46%);opacity:0;transition:opacity .3s;mix-blend-mode:screen;pointer-events:none}
.card:hover .glare{opacity:1}
.card .cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;text-align:left;background:linear-gradient(rgba(5,8,12,0),rgba(5,8,12,.86));display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:#fff;font-size:14px;line-height:1.4}
.cap b{font-weight:700}
.cap i{font-style:normal;font-size:12px;color:var(--muted)}
.card .zoom{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;background:rgba(8,12,18,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:grid;place-items:center;opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s cubic-bezier(.2,.8,.2,1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.card:hover .zoom,.card:focus-visible .zoom{opacity:1;transform:none}
.card:hover,.card:focus-visible{box-shadow:0 0 0 1.5px var(--accent),0 46px 90px -26px rgba(0,0,0,.9),0 0 60px -18px var(--accent)}
.play{position:absolute;left:50%;top:46%;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;display:grid;place-items:center;background:rgba(8,12,18,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.6);animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.7);opacity:0}}
.card:hover .play{transform:scale(1.12);background:var(--accent)}
.card:hover .play svg{fill:#0a0e14}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:60;display:grid;place-items:center}
#lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;background:rgba(4,6,10,.84);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;transition:opacity .45s}
#lb.open .lb-bg{opacity:1}
#lb figure{position:relative;margin:0;width:min(90vw,calc(78vh*16/9))}
.lb-frame{position:relative;transform-origin:0 0;border-radius:14px;overflow:hidden;box-shadow:0 50px 140px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.16)}
.lb-frame img{width:100%;aspect-ratio:16/9;display:block;image-rendering:pixelated}
.lb-note{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:rgba(6,9,14,.5);font-size:15px;padding:20px}
.lb-note b{display:block;font-family:var(--display);font-size:26px;margin-bottom:6px}
.lb-note[hidden]{display:none}
#lb figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:14px;font-size:14px;opacity:0;transform:translateY(6px);transition:opacity .35s .2s,transform .35s .2s}
#lb.open figcaption{opacity:1;transform:none}
#lb figcaption span{color:var(--muted);font-size:13px}
.lb-btn{position:absolute;z-index:2;width:46px;height:46px;border-radius:50%;border:0;background:var(--glass);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer;display:grid;place-items:center;
  opacity:0;transition:opacity .3s .15s,background .25s,transform .25s}
#lb.open .lb-btn{opacity:1}
.lb-btn:hover{background:rgba(255,255,255,.16);transform:scale(1.08)}
.lb-close{top:22px;right:24px}.lb-prev{left:22px;top:50%;margin-top:-23px}.lb-next{right:22px;top:50%;margin-top:-23px}

.badge{position:fixed;z-index:20;left:clamp(12px,2vw,26px);bottom:14px;font-size:12px;color:var(--muted);background:var(--glass);padding:4px 12px;border-radius:999px}

/* ---------- loader ---------- */
#loader{position:fixed;inset:0;z-index:50;background:rgba(7,10,15,.58);-webkit-backdrop-filter:blur(16px) brightness(.8);backdrop-filter:blur(16px) brightness(.8);
  display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,4vw,48px);cursor:pointer}
#glass{position:absolute;inset:0;width:100%;height:100%}
#loader>:not(canvas){position:relative}
.l-top{font-family:var(--latin);font-weight:800;letter-spacing:.14em;font-size:22px;text-transform:uppercase}
.l-top span{display:block;font-family:var(--body);font-weight:400;font-size:13px;letter-spacing:0;color:var(--muted);text-transform:none;margin-top:4px}
.l-bot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
#count{font-family:var(--latin);font-weight:300;font-size:clamp(110px,24vw,300px);line-height:.8;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.l-status{max-width:20rem;font-size:14px;color:#dfe5ea;text-align:right;padding-bottom:10px}
.l-status .ln{height:2px;background:var(--rule);margin-top:10px;border-radius:2px;overflow:hidden}
.l-status .ln i{display:block;height:100%;width:0;background:var(--paper)}
.l-status small{display:block;color:var(--muted);font-size:12px;margin-top:8px}

.prog{display:none}
/* phones and narrow windows: the same pinned chapters, stacked. Copy on top, a swipeable row of cards under it, the street along the bottom */
@media (max-width:899px){
  .links,.rail,.clock span,.hint,.fine,.more,.badge,.lb-prev,.lb-next{display:none}
  .prog{display:block;position:fixed;z-index:31;left:0;top:0;height:2px;width:calc(var(--p,0)*100%);background:var(--accent)}
  .bar{padding:12px 16px;gap:8px}
  .mark{font-size:17px;letter-spacing:.08em;margin-right:auto}
  .chip{height:34px;padding:0 12px}
  .stage,.chapter.hero .stage{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:clamp(10px,2svh,18px);padding:70px 18px 0}
  .stage::before,.chapter.r .stage::before{background:linear-gradient(rgba(6,9,14,.84),rgba(6,9,14,.68) 50%,rgba(6,9,14,0) 78%)}
  .chapter.r .copy{order:0}
  .meta{font-size:12px}
  h1{font-size:clamp(46px,16.5vw,84px);margin-top:8px}
  .time{font-size:clamp(40px,7.6svh,62px);margin:6px 0 2px -2px}
  h2{font-size:clamp(22px,3.5svh,28px)}
  .lede{font-size:14.5px;line-height:1.72;margin-top:8px}
  .actions{margin-top:14px}
  .feats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .feats::before{display:none}
  .feats div,.feats div+div{padding:4px 11px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);background:rgba(8,12,18,.35)}
  .feats dt{font-size:13px;font-weight:500}
  .feats dd{display:none}
  .media,.media.solo{height:auto;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -18px;padding:6px 18px 18px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
  .media::-webkit-scrollbar{display:none}
  .card,.card.a,.card.b,.media.solo .card{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:0 0 min(80%,340px);width:auto;scroll-snap-align:center;--rz:0deg;border-radius:14px}
  .media.solo .card{flex-basis:min(100%,420px)}
  .card .zoom{opacity:1;transform:none;width:30px;height:30px;top:8px;right:8px}
  .card .cap{font-size:13px;padding:30px 12px 9px}
  .play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .steps{grid-template-columns:1fr 1fr;row-gap:10px;margin-top:12px}
  .steps::before{display:none}
  .steps li{display:flex;align-items:center;gap:8px;padding-right:6px}
  .steps li::before{margin:0;flex:none;width:24px;height:24px;font-size:14px}
  .chapter:last-child .media{display:none}
  .l-status{text-align:left}
  #lb figure{width:94vw}
  #lb figcaption{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){.play::before,.hint::after,.eq i{animation:none!important}
  .rise,.ch>i,.card,.meta .line,.feats::before{transition:none!important;opacity:1!important;transform:none}
  .card{--es:1;--ey:0px}}