:root { --paper: #efeadf; --ink: #1c2320; --muted: #5f655d; --line: rgb(28 35 32 / .28); --accent: #0f7a35; --caption: rgb(239 234 223 / .92); }
:root { --sans: Geist, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; }
:root[lang="vi"] { --sans: Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; }
:root.night { --ink: #d6e2f5; --caption: rgb(13 24 52 / .82); }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 400 16px/1.5 var(--sans); }
#track { height: 3145vh; }
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#grain {
  position: fixed; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .5 0 0 0 0 .42 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; font: 500 10.5px/1.25 var(--mono); letter-spacing: .02em; }
#labels span { position: absolute; left: 0; top: 0; padding: 0 3px; background: rgb(239 234 223 / .86); white-space: nowrap; text-align: center; will-change: transform; }
#labels span small { display: block; font-size: 9.5px; font-weight: 400; color: var(--muted); }
#labels span.minor { font-weight: 400; color: var(--muted); font-size: 9.5px; }
#labels span.dim { font-weight: 400; background: var(--paper); }
#bar { position: fixed; top: 20px; left: 28px; right: 28px; display: flex; justify-content: space-between; font: 500 12px/1 var(--mono); letter-spacing: .04em; }
#bar { color: var(--ink); }
#end { position: fixed; right: 28px; bottom: 72px; padding: 12px 16px; font-size: 16px; color: var(--ink); background: var(--caption); border: 1px solid currentColor; text-decoration: none; opacity: 0; visibility: hidden; }
#bar nav { display: flex; gap: 16px; align-items: baseline; }
#bar nav a { display: inline-block; padding: 6px 2px; }
#bar .lang a { padding: 6px 6px; border-bottom: 0; opacity: .75; }
#bar .lang a.on { opacity: 1; border-bottom: 1px solid currentColor; }
#bar a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
#hero { position: fixed; top: 64px; left: 28px; max-width: 900px; }
#hero .eyebrow { margin: 0 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
#hero h1 { margin: 0; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.02; letter-spacing: -.03em; font-weight: 600; }
#hero .lede { margin: 12px 0 0; max-width: 460px; font-size: 16px; color: var(--muted); }
#block { position: fixed; right: 28px; bottom: 24px; width: 300px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 10px; background: var(--paper); border: 1px solid var(--ink); font: 400 10.5px/1.35 var(--mono); }
#block dl { margin: 0; display: grid; gap: 5px; }
#block dt { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
#block dd { margin: 0; font-weight: 500; }
#block .warn { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid var(--line); color: var(--accent); }
#captions p { position: fixed; left: 28px; bottom: 72px; margin: 0; max-width: 500px; padding: 12px 16px; font-size: 18px; line-height: 1.35; letter-spacing: -.01em; background: var(--caption); color: var(--ink); opacity: 0; will-change: opacity, transform; }
#sky-labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; color: #d6e2f5; font: 500 12px/1 var(--mono); letter-spacing: .04em; opacity: 0; }
#sky-labels span { position: absolute; left: 0; top: 0; white-space: nowrap; }
#progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; }
#progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--accent); }
#loader { position: fixed; inset: 0; display: grid; place-content: center; gap: 10px; background: var(--paper); font: 500 12px/1 var(--mono); transition: opacity .5s; }
#loader i { display: block; width: 220px; height: 1px; background: var(--ink); transform-origin: left; transform: scaleX(0); }
#loader.done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s, visibility 0s .5s; }
#nowebgl { position: fixed; inset: 0; display: grid; place-content: center; padding: 16px; text-align: center; background: var(--paper); }
#nowebgl[hidden] { display: none; }
@media (max-width: 860px) {
  #end { top: 48px; bottom: auto; right: 16px; }
}
@media (max-width: 720px) {
  #hero { left: 16px; right: 16px; top: 52px; }
  #bar { left: 16px; right: 16px; }
  #captions p { left: 16px; right: 16px; bottom: 72px; font-size: 16px; }
  #block { display: none; }
}
#slow { position: fixed; top: 48px; left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; font-size: 14px; color: var(--ink); background: var(--caption); border: 1px solid var(--line); white-space: nowrap; }
#slow a { color: inherit; }
#nowebgl { display: none; }
.noscript { position: fixed; inset: auto 0 0; margin: 0; padding: 16px; background: var(--paper); }

/* the film, for phones and for devices that cannot run the walk */
:root.film body { min-height: 100vh; background: var(--paper); }
:root.film #stage, :root.film #grain, :root.film #labels, :root.film #hero, :root.film #block, :root.film #captions, :root.film #progress,
:root.film #sky-labels, :root.film #end, :root.film #track, :root.film #slow { display: none; }
:root.film #bar { position: static; padding: 20px 28px 0; }
#film { max-width: 1100px; margin: 0 auto; padding: 28px; }
#film h1 { margin: 0; font-size: clamp(30px, 6vw, 56px); line-height: 1.05; letter-spacing: -.03em; font-weight: 600; }
#film .eyebrow { margin: 0 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--accent); text-transform: uppercase; }
#film .lede { margin: 12px 0 20px; max-width: 60ch; color: var(--muted); }
#film .warn { color: var(--accent); font-size: 14px; }
#film figure { margin: 0 0 16px; }
#film video { display: block; width: 100%; height: auto; background: var(--ink); }
#film a { color: inherit; }

/* recording the film: pictures only */
:root.bare #labels, :root.bare #bar, :root.bare #hero, :root.bare #block, :root.bare #captions, :root.bare #progress, :root.bare #sky-labels, :root.bare #end, :root.bare #slow { display: none; }

@media (max-width: 720px) {
  :root.film #bar { padding: 16px 16px 0; }
  #film { padding: 16px; }
  #slow { left: 16px; right: 16px; transform: none; white-space: normal; }
}