/* Variant B: "Night traffic". Text panels float over a long-exposure city. */
:root {
  --night: #0A1324;
  --canvas: #050B18;
  --road: #1C2A44;
  --amber: #FFB547;
  --red: #FF4F5E;
  --cyan: #46B3E6;
  --text: #E7EDF6;
  --muted: #8D9BB3;
  --panel: rgba(8, 15, 30, 0.88);
  --display: 'Big Shoulders Display', 'Big Shoulders', 'Arial Narrow', sans-serif;
  --body: 'Newsreader', Georgia, serif;
  --col: min(34rem, 46vw);
}

* { box-sizing: border-box; }
html { background: var(--night); color: var(--text); }
body { margin: 0; font: 400 1.16rem/1.68 var(--body); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
a { color: var(--cyan); }
::selection { background: rgba(70, 179, 230, .35); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* ---------- stage ---------- */
#stage { display: none; }
body.wide #stage { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; touch-action: pan-y; }
.page { position: relative; z-index: 1; }
body.wide .page { pointer-events: none; }
body.wide .panel, body.wide .hero > * { pointer-events: auto; }

/* ---------- header ---------- */
.hero { padding: 14vh max(3vw, 1.5rem) 10vh; max-width: calc(var(--col) + 8rem); }
body.wide .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-venue { font: 600 1.05rem/1 var(--display); color: var(--amber); margin: 0 0 1.2rem; letter-spacing: .02em; }
.hero-title {
  font: 800 clamp(3rem, 7.4vw, 6.4rem)/0.9 var(--display);
  margin: 0; letter-spacing: -0.005em;
  text-shadow: 0 0 40px rgba(5, 11, 24, .9);
}
.hero-title span { color: var(--muted); font-weight: 500; }
.hero-sub { font: italic 400 1.25rem/1.45 var(--body); color: var(--text); max-width: 30rem; margin: 1.6rem 0 0; }
.hero-authors { font: 500 1.05rem/1.4 var(--display); color: var(--muted); margin: 1rem 0 0; letter-spacing: .02em; }
.hero-scroll { margin: 3.5rem 0 0; font: 600 1rem var(--display); color: var(--muted); }
.hero-scroll::after { content: ''; display: block; width: 1px; height: 3.5rem; margin-top: .6rem; background: linear-gradient(var(--amber), transparent); }

/* ---------- panels ---------- */
#essay { padding: 0 max(3vw, 1rem) 30vh; }
body.wide #essay { width: calc(var(--col) + max(3vw, 1rem)); }
.panel {
  background: var(--panel);
  border: 1px solid rgba(141, 155, 179, .14);
  border-radius: 6px;
  padding: 2.2rem 2.4rem 2.4rem;
  margin: 0 0 38vh;
  max-width: var(--col);
}
body:not(.wide) .panel { max-width: none; margin-bottom: 3rem; padding: 1.6rem 1.25rem 1.8rem; }
.panel h2 {
  font: 750 2.5rem/1 var(--display);
  margin: 0 0 1.2rem; letter-spacing: .005em;
}
.panel h2 .katex { font-size: .8em; }
.prose p { margin: 0 0 1rem; }
.prose strong { color: #fff; font-weight: 600; }
.prose em { color: #fff; }
.prose ol { padding-left: 1.3rem; margin: 0 0 1rem; }
.prose li { margin: .25rem 0; }
.prose li::marker { font: 700 1.05rem var(--display); color: var(--amber); }
.prose ul { padding-left: 1.2rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: .98rem; margin: 1.2rem 0; font-variant-numeric: tabular-nums; }
.prose th { text-align: left; font: 650 1.05rem var(--display); color: var(--muted); border-bottom: 1px solid rgba(141, 155, 179, .4); padding: .35rem .5rem .35rem 0; }
.prose td { border-bottom: 1px solid rgba(141, 155, 179, .16); padding: .5rem .5rem .5rem 0; vertical-align: top; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .3rem 0; margin: 1rem 0; }
.katex { font-size: 1.05em; }

/* ---------- figure controls ---------- */
figure.fig { margin: 1.8rem -1rem; padding: 1.2rem 1rem; border-top: 1px solid rgba(70, 179, 230, .35); border-bottom: 1px solid rgba(70, 179, 230, .35); }
.controls { display: flex; flex-direction: column; gap: 1rem; font: 400 .98rem/1.45 var(--body); }
.fig-note { color: var(--muted); font-style: italic; margin: 0; }
.fig-live { margin: 0; min-height: 3em; }
.inline-stage { display: block; width: 100%; height: 340px; border-radius: 4px; margin-bottom: 1rem; background: var(--canvas); touch-action: pan-y; }
.inline-stage.stage-playground { height: 400px; }
.inline-stage.stage-kinks { height: 500px; }

.readout { display: flex; flex-direction: column; gap: .3rem; }
.big { font: 800 2.6rem/1 var(--display); color: var(--amber); font-variant-numeric: tabular-nums; }
.big small { font: 500 1.05rem var(--display); color: var(--muted); margin-left: .4rem; letter-spacing: .02em; }
.big-sub { color: var(--text); }
.big-sub.good { color: var(--cyan); }

.btns { display: flex; flex-wrap: wrap; gap: .5rem; }
button {
  font: 650 1.05rem/1 var(--display); letter-spacing: .03em; color: var(--text);
  background: transparent; border: 1px solid rgba(231, 237, 246, .35); border-radius: 999px;
  padding: .55rem 1.1rem; cursor: pointer;
}
button:hover { border-color: var(--text); }
button.primary { background: var(--cyan); border-color: var(--cyan); color: var(--canvas); }
button.primary:hover { background: #6cc6ef; }
button:disabled { opacity: .4; cursor: default; }
.seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; }
.seg button[aria-pressed="true"] { background: rgba(70, 179, 230, .16); border-color: var(--cyan); color: #fff; }

label.slider { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: baseline; font-size: .98rem; }
label.slider output { font: 650 1.05rem var(--display); color: var(--cyan); font-variant-numeric: tabular-nums; }
label.slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--cyan); }
input[type=range]:disabled { opacity: .35; }

details.more summary { cursor: pointer; font: 600 1.05rem var(--display); color: var(--muted); letter-spacing: .02em; }
details.more[open] summary { margin-bottom: .8rem; }
details.more > label + label { margin-top: .8rem; display: grid; }

.routes { display: flex; flex-direction: column; gap: .5rem; }
.route { display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem; font-size: .95rem; }
.route b { font-weight: 500; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.route i { grid-column: 1 / -1; height: 3px; background: linear-gradient(90deg, var(--amber) var(--w), rgba(141, 155, 179, .18) var(--w)); border-radius: 2px; }

.spark-wrap { display: flex; flex-direction: column; gap: .25rem; }
.spark-head { display: flex; justify-content: space-between; font-size: .92rem; color: var(--muted); }
.spark-head b { font: 650 1rem var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
svg.spark { width: 100%; height: 56px; display: block; border-bottom: 1px solid rgba(141, 155, 179, .2); }
svg.spark .base { stroke: rgba(141, 155, 179, .45); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

.edit { display: flex; flex-direction: column; gap: .8rem; }
.edit:not(:empty) { border-left: 2px solid var(--cyan); padding-left: 1rem; }
.edit-title { display: flex; flex-direction: column; font: 650 1.1rem/1.2 var(--display); letter-spacing: .02em; }
.edit-title b { font: 400 .95rem var(--body); color: var(--muted); }

.hist svg { width: 100%; display: block; }
.hist rect { fill: rgba(141, 155, 179, .35); }
.hist rect.opt { fill: var(--amber); }
.hist circle { fill: var(--cyan); }
.hist text { font: 600 11px var(--display); fill: var(--muted); text-anchor: middle; }
.hist-key { font-size: .88rem; color: var(--muted); margin: .4rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.hist-key span { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; }
.k-bar { background: rgba(141, 155, 179, .35); } .k-opt { background: var(--amber); margin-left: .5rem; }
.k-dot { background: var(--cyan); border-radius: 50% !important; width: .55rem !important; height: .55rem !important; margin-left: .5rem; }

/* ---------- footer ---------- */
footer.panel { margin: 0 max(3vw, 1rem) 12vh; }
footer .links { display: flex; gap: 1.5rem; font: 650 1.2rem var(--display); }
footer pre { font-size: .8rem; line-height: 1.5; background: rgba(5, 11, 24, .7); border: 1px solid rgba(141, 155, 179, .2); border-radius: 4px; padding: 1rem; overflow-x: auto; }
footer .small { font-size: .9rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

.road-picker { font: 500 .95rem var(--body, serif); color: var(--text, #E7EDF6); background: #0A1324; border: 1px solid rgba(70, 179, 230, .45); border-radius: 999px; padding: .4rem .8rem; }
.road-picker:focus-visible { outline: 2px solid #46B3E6; outline-offset: 2px; }