/* Floza's home page: the road (2 Nov 2026). Built in floza-lab-plus-out/previews/road-home and split
   into this file, src/site/markup.html and road.js by that folder's road_to_site step. It loads after
   floza.css and floza-account.css (which the sign-in dialogs need), so the few site rules that would
   change the road are set back at the end of this file. */
/* Floza road: a prototype home page (2 Nov 2026, Navneet: "a long road where the car is moving and then
   it stops and at each stop it shows what it can do"). One drive, seven stops. The car stays put and the
   world slides under it; far things slide slower than near ones. Press the right arrow (or Next, or swipe)
   to drive to the next stop. Drawn in code, in Floza's own colours and type. */

@font-face { font-family: 'Geist'; src: url(fonts/geist-vf.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url(fonts/geist-mono-vf.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Floza's ink and accents (floza.css) */
  --ink:      oklch(0.16 0.06 268);
  --ink-soft: oklch(0.36 0.05 268);
  --paper:    oklch(0.985 0.004 268);
  --cyan:     oklch(0.72 0.16 232);
  --violet:   oklch(0.56 0.24 292);
  --magenta:  oklch(0.64 0.28 348);

  /* the world in Floza's own colours (Navneet: "everything in floza colors"): Floza's ink for the night,
     its cyan, violet and magenta for the land, paper for the lines; the glow is the home page's aurora */
  --sky-top:    oklch(0.11 0.05 268);
  --sky-low:    oklch(0.22 0.09 285);
  --cloud:      oklch(0.72 0.12 292 / 0.22);   /* soft violet haze, lit by the glow */
  --city:       oklch(0.17 0.06 276);
  --city-top:   oklch(0.27 0.08 284);
  --city-rim:   oklch(0.6 0.12 290 / 0.55);
  --city-far:   oklch(0.2 0.075 290 / 0.75);
  --window:     oklch(0.72 0.16 232 / 0.55);
  --hill-far:   oklch(0.28 0.11 285);
  --hill-near:  oklch(0.33 0.13 262);
  --field:      oklch(0.17 0.07 268);
  --hill1-top:  oklch(0.29 0.1 290);
  --fog:        oklch(0.25 0.1 292);
  --ridge-low:  oklch(0.25 0.1 292);
  --hill2-top:  oklch(0.36 0.14 262);
  --hill2:      oklch(0.22 0.09 266);
  --tree:       oklch(0.5 0.15 232);
  --tree-dark:  oklch(0.46 0.2 292);
  --trunk:      oklch(0.3 0.06 268);
  --path:       transparent;   /* the winding path read as a stray stroke at night: left out */
  --road:       oklch(0.15 0.035 268);
  --road-mid:   oklch(0.18 0.035 268);
  --walk:       oklch(0.25 0.05 268);
  --kerb:       oklch(0.3 0.05 268);
  --lamp-warm:  oklch(0.95 0.06 90);
  --road-edge:  oklch(0.97 0.008 268 / 0.9);
  --verge:      oklch(0.16 0.06 268);

  --display: 'Geist', system-ui, sans-serif;
  --body: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --accent-ink: oklch(0.5 0.24 292);   /* the one word that matters, on a white board */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --drive: cubic-bezier(0.65, 0, 0.35, 1);   /* pull away, cruise, roll to a stop */
  --drive-ms: 1500ms;

  --road-h: clamp(92px, 14vh, 132px);
  --ground: 26vh;                            /* from the bottom of the screen to the top of the road */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  /* light text on the night, so the site's pop-ups (account menu, sign-in) read; the boards set their own ink */
  overflow: hidden; background: var(--sky-top); color: var(--paper);
  font: 400 16px/1.5 var(--body); -webkit-font-smoothing: antialiased;
}
::selection { background: var(--violet); color: #fff; }
a { color: inherit; }

/* ---- dry or rain (Navneet, 2 Nov 2026: "instead have a rainy and dry theme") ----
   Always night. The switch in the top bar brings the rain: low clouds hide the moon and stars, drops fall
   (drawn on a canvas, slanting more as the car speeds up), they splash on the road, and the wet road
   mirrors the lamps, the billboards and the car's lights in long streaks. */
.weather {
  width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer;
  border: 1.5px solid oklch(0.97 0.008 268 / 0.55); background: transparent; color: var(--paper);
  transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.weather:active { transform: scale(0.94); }
.weather:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.weather[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
#rain { position: fixed; inset: 0; z-index: 25; pointer-events: none; display: none; }
.wet #rain { display: block; }
.l-clouds { top: -4vh; height: 34vh; background-size: auto 100%; opacity: 0; transition: opacity 900ms var(--ease-out); }
.wet .l-clouds { opacity: 1; }
.moon, .l-stars { transition: opacity 900ms var(--ease-out); }
.wet .moon { opacity: 0.18; }
.wet .l-stars { opacity: 0; }
/* the rain's grey veil over the distance */
.wet .haze { background: linear-gradient(transparent, oklch(0.4 0.06 285 / 0.45) 60%, oklch(0.32 0.05 285 / 0.25)); }
.wet .l-city { filter: brightness(0.85) saturate(0.8); }
/* the wet road: darker, glossier, and a mirror for every light above it */
.wet .road { filter: brightness(0.82) contrast(1.08); }
.reflect { position: absolute; top: 0; height: 100%; pointer-events: none; opacity: 0; transition: opacity 900ms var(--ease-out); filter: blur(3px); }
.wet .reflect { opacity: 1; }
.reflect.lampref { width: 8vh; margin-left: -4vh; background: radial-gradient(50% 100% at 50% 0, oklch(0.95 0.06 90 / 0.42), oklch(0.95 0.06 90 / 0.1) 65%, transparent); }
.reflect.bbref {
  filter: blur(5px);
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, oklch(0.02 0 0 / 0.22) 9px 12px),
    linear-gradient(oklch(0.9 0.08 215 / 0.2), oklch(0.85 0.1 220 / 0.05) 70%, transparent);
  /* soft at both ends, so it reads as light on water, not a box */
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.wet .pool { opacity: 0.4; }

.car .tailref, .car .headref { position: absolute; top: 96%; height: 34%; pointer-events: none; display: none; filter: blur(3px); }
.car .tailref { left: 0; width: 11%; background: radial-gradient(50% 100% at 50% 0, oklch(0.62 0.24 20 / 0.55), transparent); }
.car .headref { left: 91%; width: 11%; background: radial-gradient(50% 100% at 50% 0, oklch(0.97 0.06 90 / 0.5), transparent); }
.wet .car .tailref, .wet .car .headref { display: block; }
/* spray from the tyres when driving in the wet */
.car .puff { display: none; }
.wet .car .puff { display: block; left: 2%; top: 84%; width: 10%; background: oklch(0.85 0.02 260 / 0.38); filter: blur(3px); }

/* ---- top bar ---- */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: 64px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 40px);
}
/* the logo only: the account menu's face in this bar is drawn by the site's own styles */
.top > a > img { height: 30px; width: auto; display: block; }
.top nav { display: flex; align-items: center; gap: 22px; font: 600 0.95rem/1 var(--display); color: var(--paper); }
.top nav a { text-decoration: none; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pill {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--paper); color: var(--ink) !important; text-decoration: none !important;
  transition: transform 160ms var(--ease-out);
}
.pill:active { transform: scale(0.97); }

/* ---- the world ---- */
.world {
  position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(60% 55% at 92% 8%, oklch(0.56 0.24 292 / 0.5), transparent 70%),
    radial-gradient(70% 30% at 50% 70%, oklch(0.6 0.25 330 / 0.32), transparent 72%),
    radial-gradient(40% 40% at 100% 40%, oklch(0.64 0.28 348 / 0.22), transparent 70%),
    linear-gradient(oklch(0.09 0.045 268), var(--sky-top) 30%, oklch(0.2 0.1 290) 64%, oklch(0.3 0.14 320) 78%);
}
/* soft edges, so the eye settles on the road and the billboard */
.world::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(120% 90% at 50% 55%, transparent 60%, oklch(0.06 0.04 268 / 0.55));
}
/* the moon, low over the city, with a halo */
.moon {
  position: absolute; left: 22%; top: 12vh; width: clamp(40px, 4vw, 60px); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(22% 22% at 62% 38%, oklch(0.86 0.02 268 / 0.7), transparent 70%),
    radial-gradient(14% 14% at 36% 64%, oklch(0.84 0.02 268 / 0.7), transparent 70%),
    radial-gradient(10% 10% at 30% 32%, oklch(0.86 0.02 268 / 0.6), transparent 70%),
    radial-gradient(circle at 38% 36%, oklch(0.99 0.02 95), oklch(0.92 0.03 95) 70%);
  box-shadow: 0 0 30px 6px oklch(0.95 0.05 95 / 0.35), 0 0 120px 40px oklch(0.7 0.15 292 / 0.22);
}
/* haze where the city meets the hills: distance */
.haze {
  position: absolute; left: 0; right: 0; bottom: calc(var(--ground) + 2vh); height: 16vh; pointer-events: none;
  background: linear-gradient(transparent, oklch(0.42 0.17 310 / 0.32) 70%, oklch(0.36 0.15 300 / 0.12));
}
.layer {
  position: absolute; left: 0; height: 100%; bottom: 0; top: 0;
  background-repeat: repeat-x; will-change: transform;
}
.l-stars  { top: 0; height: 58vh; background-size: auto 100%; }
.l-city   { top: auto; bottom: calc(var(--ground) + 6vh); height: 34vh; background-position: left bottom; background-size: auto 100%; }
.l-far    { top: auto; bottom: calc(var(--ground) - 1px); height: 26vh; background-position: left bottom; background-size: auto 100%; }
.l-near   { top: auto; bottom: calc(var(--ground) - 1px); height: 18vh; }
.world { touch-action: pan-y; cursor: grab; }
.world.dragging { cursor: grabbing; }
/* ChatGPT's trees and bushes (2 Nov 2026), placed by scatter(): a near row, and a smaller, dimmer row on the
   hills behind */
.prop { position: absolute; bottom: 0; height: auto; pointer-events: none; transform-origin: 50% 100%; }
.l-near .prop { filter: brightness(0.8); }
.l-ground { top: auto; bottom: 0; height: calc(var(--ground) + 1px); background: linear-gradient(var(--fog), var(--field) 45%); }
/* mist along the foot of the trees */
.mist {
  position: absolute; left: 0; right: 0; bottom: calc(var(--ground) - 1px); height: 9vh; pointer-events: none;
  background: linear-gradient(transparent, var(--fog));
}
/* the pavement: slabs, a kerb on the road side, moving with the road */
.l-walk {
  top: auto; bottom: calc(var(--ground) - 4vh); height: calc(4vh + 1px);
  background:
    linear-gradient(transparent calc(100% - 7px), oklch(0.98 0.01 268 / 0.25) calc(100% - 7px) calc(100% - 6px), var(--kerb) calc(100% - 6px)),
    linear-gradient(oklch(0.12 0.05 268 / 0.5), transparent 30%),
    var(--walk);
}
.l-road   { top: auto; bottom: calc(var(--ground) - var(--road-h) - 4vh); height: var(--road-h); }
/* The road (Navneet, 2 Nov 2026: "can the road improve too?"): fine asphalt grain, a soft sheen down the
   middle, darker worn tracks where tyres run, a gutter shadow under each kerb, crisp edge lines, long
   centre dashes, and at night small cyan road studs between the dashes. All of it moves with the road. */
.road {
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.85%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.32%20-0.1%22/%3E%3C/filter%3E%3Crect%20width%3D%22220%22%20height%3D%22220%22%20filter%3D%22url%28%23n%29%22/%3E%3C/svg%3E") 0 0 / 220px 220px,
    linear-gradient(oklch(0.04 0.02 268 / 0.7), transparent 9%, transparent 91%, oklch(0.04 0.02 268 / 0.6)),
    linear-gradient(transparent 22%, oklch(0.06 0.02 268 / 0.28) 27%, transparent 33%, transparent 67%, oklch(0.06 0.02 268 / 0.28) 73%, transparent 78%),
    linear-gradient(oklch(0.12 0.03 268), var(--road-mid) 50%, var(--road));
}
.road::before {   /* the two edge lines, a little in from the kerbs */
  content: ""; position: absolute; left: 0; right: 0; top: 10%; bottom: 10%; pointer-events: none;
  border-top: 2.5px solid oklch(0.96 0.01 95 / 0.62); border-bottom: 2.5px solid oklch(0.96 0.01 95 / 0.62);
}
.road::after {   /* the dashed middle line: long dashes, long gaps, like a real carriageway */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  background: repeating-linear-gradient(90deg, oklch(0.97 0.01 95 / 0.82) 0 72px, transparent 72px 180px);
}
/* road studs between the dashes, lit by the headlights at night */
.road .studs {
  position: absolute; left: 126px; right: 0; top: 50%; height: 12px; margin-top: -6px; pointer-events: none;
  background: radial-gradient(circle at 6px 6px, oklch(0.86 0.13 220) 0 1.6px, oklch(0.78 0.15 225 / 0.45) 2.4px, transparent 6px) 0 0 / 180px 12px repeat-x;
}
/* the near verge: a kerb, then grass with tufts that rush past faster than the road */
.l-front {
  top: auto; bottom: 0; height: calc(var(--ground) - var(--road-h) - 4vh);
  background:
    linear-gradient(oklch(0.98 0.01 268 / 0.22) 0 1px, var(--kerb) 1px 6px, oklch(0.06 0.03 268 / 0.7) 6px 9px, transparent 9px),
    linear-gradient(oklch(0.2 0.08 270), oklch(0.12 0.055 268));
}

/* Street lights stand on the far edge of the road, every other one cyan or magenta (the same two colours as
   Floza's mark), each with its pool of light on the road under it. Lamps and pools share one tile width (two
   lamps per 61.6vh), so they move with the road and never drift apart. */
.l-lamps { top: auto; bottom: calc(var(--ground) - 4vh); height: 27vh; pointer-events: none; }
.l-lamps .lamp { position: absolute; bottom: 0; height: 100%; width: auto; }
/* each lamp's pool of light on the road, under its head */
.pool {
  position: absolute; top: 2%; height: 60%; width: 30vh; margin-left: -15vh; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 30%, oklch(0.95 0.06 90 / 0.2), transparent 72%);
}
/* the lamp's light falling from its head to the pavement */
.l-lamps .cone {
  position: absolute; top: 3%; bottom: 0; width: 15vh; margin-left: -7.5vh; pointer-events: none;
  background: linear-gradient(oklch(0.95 0.06 90 / 0.26), oklch(0.95 0.06 90 / 0.05) 85%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
/* the finish: a tall pole with a chequered flag beside the line */
.flag { position: absolute; bottom: 0; width: 70px; height: 20vh; }
.flag i { position: absolute; left: 0; bottom: 0; width: 6px; height: 100%; border-radius: 3px; background: var(--paper); }
.flag b {
  position: absolute; left: 6px; top: 4px; width: 64px; height: 42px; border-radius: 0 4px 4px 0;
  background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 16px 16px;
  transform-origin: 0 50%;
}
.at-end .flag b { animation: wave 1.6s ease-in-out infinite alternate; }
@keyframes wave { from { transform: skewY(-4deg) scaleX(0.94); } to { transform: skewY(4deg) scaleX(1); } }

/* ---- the stops: a sign beside the road for each ---- */
.l-signs { top: 0; bottom: auto; height: calc(100% - var(--ground) + 2px); pointer-events: none; }
/* Every sign stands beside the road the whole time; the car drives past them, the way roads and driving
   games do it (Navneet, 2 Nov 2026). Only the one the car has stopped at takes clicks.
   The billboard is ChatGPT's second one (2 Nov 2026): a slim lit frame on one monopole, drawn with an
   empty face 3.76% in from the left, 93% wide, 9.9% down and 40.9% tall; the stop's words sit on it. Sizes follow the
   billboard's own width (cqw), so the content always fits its face. */
.sign {
  color: var(--ink);
  /* as wide as fits, but never so tall it climbs into the top bar (the billboard is 0.796 as tall as wide) */
  position: absolute; bottom: 0; width: min(800px, 56vw, calc((100vh - var(--ground) - 84px) / 0.796));
  container-type: inline-size;
}
.sign.here { pointer-events: auto; }
.sign .bb { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 3cqw oklch(0.95 0.06 90 / 0.14)); }
.sign .face {
  position: absolute; left: 3.76%; width: 93%; top: 9.9%; height: 40.9%;
  padding: 3cqw 6cqw 2.6cqw; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
/* Each board reads in two steps (2 Nov 2026, "use visual hierarchy in text"): the headline, with its one key
   word in violet, then the commands or buttons, smaller and quieter. */
.sign h2 {
  margin: 0; font: 680 max(1.5rem, 7.2cqw)/0.98 var(--display); color: var(--ink);
  letter-spacing: -0.045em; text-wrap: balance;
}
.sign h2 em { font-style: normal; color: var(--accent-ink); }
.sign p { margin: 0.6cqw 0 0; color: var(--ink-soft); font-size: max(0.8rem, 2cqw); line-height: 1.4; max-width: 46ch; text-wrap: pretty; }
.sign .pic { margin-top: 1.6cqw; display: grid; gap: 1.2cqw; grid-auto-flow: column; justify-content: start; }
.sign .pic img { width: auto; max-width: 100%; height: auto; max-height: 18cqw; justify-self: start; display: block; border-radius: 10px; border: 1px solid oklch(0.9 0.01 268); background: oklch(0.96 0.01 268); }
.chips { margin-top: 1.6cqw; display: flex; flex-wrap: wrap; gap: 1cqw; }
.chips code {
  font: 450 max(0.8rem, 2.15cqw)/1 var(--mono); padding: 1.15cqw 1.8cqw; border-radius: 999px;
  background: oklch(0.94 0.025 280); box-shadow: inset 0 0 0 1.5px oklch(0.86 0.04 280); color: var(--violet);
}
.chips code:nth-child(3n+1) { color: oklch(0.5 0.15 232); }
.chips code:nth-child(3n) { color: oklch(0.52 0.22 348); }
.faces { margin-top: 1.4cqw; display: flex; gap: 1.6cqw; align-items: flex-end; }
.faces img { height: 18cqw; width: auto; border-radius: 14px; background: oklch(0.94 0.035 292); }
.cta { margin-top: 2cqw; display: flex; gap: 1.4cqw; flex-wrap: wrap; }
.cta a { height: max(38px, 5.6cqw); padding: 0 max(16px, 3cqw); display: inline-flex; align-items: center; border-radius: 999px; font: 600 max(0.9rem, 2.1cqw)/1 var(--display); text-decoration: none; transition: transform 160ms var(--ease-out); }
.cta a:active { transform: scale(0.97); }
/* the small print under the buttons (no trial length here: it will change) */
.sign .note { margin: 1.4cqw 0 0; font: 500 max(0.75rem, 1.8cqw)/1 var(--display); color: oklch(0.45 0.05 268); }
.cta .go { background: var(--ink); color: var(--paper); }
.cta .edge { border: 1.5px solid var(--ink); }
@container (max-width: 520px) {
  .sign .pic, .sign .faces { display: none; }
  .sign .face { padding: 3cqw 5cqw; }
  /* phones: bigger words on a board that is already as wide as the screen */
  .sign h2 { font-size: 8.6cqw; }
  .sign.start h2 { font-size: 7.6cqw; }
  .chips code { font-size: 3.4cqw; }
  .hint { font-size: 3cqw !important; }
}
/* The board the car stops at comes alive (2 Nov 2026): its LED edge brightens, a thin line in Floza's colours
   draws under the headline, and its commands type themselves out, one after another. It plays again each
   time the car comes back. */
.sign .led {
  position: absolute; left: 3.3%; width: 93.9%; top: 9.4%; height: 41.8%; border-radius: 1.8cqw; pointer-events: none;
  box-shadow: 0 0 3cqw oklch(0.78 0.15 220 / 0.55), inset 0 0 0 0.3cqw oklch(0.86 0.13 215 / 0.85);
  opacity: 0; transition: opacity 600ms var(--ease-out);
}
.sign.lit .led { opacity: 1; }
.sign h2::after {
  content: ""; display: block; width: 9cqw; height: 0.45cqw; margin-top: 1.8cqw; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--violet), var(--magenta));
  transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out) 120ms;
}
.sign.lit h2::after { transform: scaleX(1); }
.sign .chips code { opacity: 0; transition: opacity 180ms var(--ease-out); }
.sign.lit .chips code { opacity: 1; transition-delay: var(--d); }
.sign .chips code span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; }
.sign.lit .chips code span { animation: type calc(var(--n) * 55ms) steps(var(--n), end) var(--d) forwards; }
@keyframes type { to { width: calc(var(--n) * 1ch); } }
/* the pole stands on a low concrete base */
.sign::after {
  content: ""; position: absolute; left: calc(50.2% - 6.5cqw); bottom: -0.4cqw; width: 13cqw; height: 1.8cqw;
  border-radius: 0.5cqw 0.5cqw 0 0; background: linear-gradient(oklch(0.34 0.03 268), oklch(0.22 0.03 268));
}
/* the first stop is a billboard too (Navneet, 2 Nov 2026: "a billboard instead of random text in the sky"):
   the mark, the line, and how to drive */
.sign.start img.mark { height: 4.6cqw; width: auto; display: block; margin-bottom: 2cqw; }
.sign.start h2 { font-size: max(1.5rem, 6.6cqw); }
.hint { display: inline-flex; align-items: center; gap: 1.2cqw; margin-top: 2.6cqw !important; color: oklch(0.45 0.05 268) !important; font: 500 max(0.75rem, 1.8cqw)/1 var(--display) !important; }
.hint kbd {
  display: inline-grid; place-items: center; min-width: max(30px, 5cqw); height: max(28px, 4.4cqw); padding: 0 1cqw; border-radius: 8px;
  font: 600 max(0.85rem, 2.1cqw)/1 var(--display); color: var(--paper); background: var(--ink);
  box-shadow: 0 3px 0 oklch(0.4 0.08 268);
}

/* the finish: a chequered line across the road at the last stop */
.finish {
  position: absolute; top: 4px; bottom: 4px; width: 26px;
  background: conic-gradient(var(--paper) 25%, var(--ink) 0 50%, var(--paper) 0 75%, var(--ink) 0) 0 0 / 13px 13px;
}

/* ---- Floza's car: ChatGPT's body and wheel, put together here ----
   The body is ChatGPT's second car (2 Nov 2026, "improve the car"): a sleek electric hatchback with its own
   LED head and tail lights. Its arches are centred 305 and 1623 px along its 1983 px; a wheel is 376 px
   across, its centre 705 px down a 900 px box, a little taller than the body so the tyres reach below it. */
.car {
  position: fixed; z-index: 20; left: clamp(16px, 8vw, 130px);
  bottom: calc(var(--ground) - var(--road-h) - 4vh + var(--road-h) * 0.2);
  width: clamp(210px, 23vw, 330px);
}
.car-in { position: relative; aspect-ratio: 1983 / 900; transform-origin: 50% 100%; }
/* the headlight: a soft cone of light on the road ahead */
.car .beam {
  position: absolute; left: 97%; top: 26%; width: 110%; height: 70%; pointer-events: none;
  background: linear-gradient(90deg, oklch(0.98 0.05 95 / 0.34), oklch(0.98 0.05 95 / 0.08) 60%, transparent);
  clip-path: polygon(0 26%, 100% 6%, 100% 100%, 0 46%);
  filter: blur(6px);
}
.car .spot {   /* where the headlight lands on the road */
  position: absolute; left: 110%; top: 78%; width: 90%; height: 26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.98 0.05 95 / 0.2), transparent);
}
.car .tail {
  position: absolute; left: -2%; top: 29%; width: 13%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.64 0.26 20 / 0.55), transparent);
}
.car .body { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform-origin: 50% 85%; }
.car .wheel { position: absolute; width: 18.96%; height: auto; aspect-ratio: 1; top: 57.44%; transform-origin: 50% 50%; }
.car .w1 { left: 5.9%; }
.car .w2 { left: 72.37%; }
/* at speed the spokes smear into a disc, as they do on a real wheel */
.car .blur {
  position: absolute; width: 18.96%; aspect-ratio: 1; top: 57.44%; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, transparent 13%, oklch(0.5 0.025 280 / 0.85) 16%, oklch(0.4 0.03 280 / 0.9) 60%, oklch(0.75 0.02 270 / 0.6) 70%, transparent 74%);
}
/* a street lamp's light sliding over the paint as the car passes under it (night) */
.car .sheen {
  position: absolute; left: 0; top: 0; width: 100%; height: 88.1%; pointer-events: none; opacity: 0;
  background: radial-gradient(34% 80% at var(--sx, 50%) 0%, oklch(0.97 0.05 90 / 0.55), transparent 72%);
  -webkit-mask: url(road/car-body.webp) 0 0 / 100% 100% no-repeat; mask: url(road/car-body.webp) 0 0 / 100% 100% no-repeat;
  mix-blend-mode: screen;
}
/* the LED line's glow on the road under the car (night) */
.car .under {
  position: absolute; left: 6%; right: 6%; bottom: -6%; height: 16%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.78 0.15 220 / 0.22), transparent);
}

.car .shadow { position: absolute; left: 2%; right: 1%; bottom: -4%; height: 12%; border-radius: 50%; background: oklch(0.04 0.03 268 / 0.7); filter: blur(5px); }
.car .puff { position: absolute; left: -2%; top: 66%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: oklch(0.97 0.008 268 / 0.5); opacity: 0; }
.driving .car .body { animation: bob 320ms ease-in-out infinite alternate; }
.driving .car .puff { animation: puff 700ms var(--ease-out) infinite; }
.driving .car .puff:nth-of-type(2) { animation-delay: 230ms; }
.driving .car .puff:nth-of-type(3) { animation-delay: 460ms; }
@keyframes roll { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-1.2%); } }
@keyframes puff { 0% { opacity: 0.6; transform: translate(0, 0) scale(0.6); } 100% { opacity: 0; transform: translate(-160%, -40%) scale(1.6); } }

/* ---- Back, dots, Next ---- */
.bar {
  position: fixed; inset: auto 0 0 0; z-index: 30; padding: 14px clamp(16px, 4vw, 40px) 18px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.move {
  height: 44px; padding: 0 18px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1.5px solid oklch(0.97 0.008 268 / 0.7); background: oklch(0.16 0.06 268 / 0.6); color: var(--paper);
  font: 700 0.95rem/1 var(--display); cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out), visibility 0s linear 0s;
}
.move:active { transform: scale(0.97); }
.move:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.move svg { transition: transform 160ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  #next:hover svg { transform: translateX(2px); }
  #back:hover svg { transform: translateX(-2px); }
}
#back { justify-self: start; }
#next { justify-self: end; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.move:disabled { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms var(--ease-out), visibility 0s linear 160ms; }
#back:disabled { opacity: 0.35; visibility: visible; transition: opacity 160ms var(--ease-out); }
.dots { display: flex; gap: 8px; }
/* the policy pages, small and quiet, at the last stop only, on the right where Next was (Navneet, 2 Nov
   2026: "visible only at the last stop", "at right side and not centre") */
#next, .legal { grid-column: 3; grid-row: 1; }
.legal { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; font: 500 0.75rem/1 var(--body); opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms; }
.at-end .legal { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease-out), visibility 0s; }
.legal a { color: oklch(0.97 0.008 268 / 0.6); text-decoration: none; transition: color 160ms var(--ease-out); }
.legal a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.legal a:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; border-radius: 2px; }
.dots button {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 99px; cursor: pointer;
  background: oklch(0.97 0.008 268 / 0.4); transition: width 260ms var(--ease-out), background-color 260ms var(--ease-out);
}
.dots button[aria-current="true"] { width: 26px; background: var(--paper); }
.dots button:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ---- phones: the sign stands above the car, the car sits on the left of the road ---- */
@media (max-width: 720px) {
  :root { --ground: 30vh; --road-h: 84px; }
  /* a billboard never climbs into the top bar: its pictures shrink first */
  .sign .pic img { max-height: 20vh; }
  .sign .board { padding: 18px 18px 20px; }
  .top nav a:not(.pill):not(.login) { display: none; }
  /* as wide as the screen, but never so tall that it reaches the top bar */
  .sign { width: min(calc(100vw - 24px), calc((100vh - var(--ground) - 84px) / 0.796)); }
  .car { width: 170px; left: 12px; }
  .faces img { height: 96px; }
  .move { height: 42px; padding: 0 14px; }
  .legal { gap: 6px 12px; font-size: 0.7rem; max-width: 130px; }
}
@media (max-height: 640px) and (min-width: 721px) {
  .sign .pic { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --drive-ms: 1ms; }
  .at-end .flag b { animation: none; }
  .driving .car .wheel, .driving .car .body, .driving .car .puff { animation: none; }
  .sign .chips code { opacity: 1; }
  .sign .chips code span { width: auto; animation: none !important; }
  .sign h2::after { transform: scaleX(1); transition: none; }
}

/* ---- living beside the site's own styles ----
   floza.css draws a solid paper bar at the top and its own link colours; the road's bar is see-through
   over the night sky. The home page is always night, so the light theme never applies here. */
.road-page .top { position: fixed; background: none; color: var(--paper); border-bottom: 0; }
.road-page .top nav a:not(.pill) { color: var(--paper); }
.road-page .top nav a:not(.pill):hover { color: var(--paper); }
.road-page .top .pill { background: var(--paper); color: var(--ink) !important; }
/* floza-account.js gives Log in the site's "opt" class, which floza.css hides on phones; the home page keeps
   Log in showing there (Navneet, 2 Nov 2026: "on top right, we need to have a log in button") */
@media (max-width: 720px) { .road-page .top nav a[href="account.html"] { display: inline; } }
/* the cookie box (consent.js) sits above the bottom bar here, clear of Back */
.road-page .consent { bottom: calc(clamp(12px, 3vw, 24px) + 72px); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }