/* Library of Pump Fun — Redshift.
 *
 * A scientific instrument with an archivist's voice. The river's light is
 * warm and redshifted by age; chapters are the one cool colour ("blueshift")
 * so they stand out against it. Archivo throughout — widened for titles,
 * normal for text — with readings in Martian Mono. Text sits on dark plates
 * wherever it crosses the river. Canvas layers read their colours from these
 * tokens (js/ui.js readTheme). */

:root {
    --bg: oklch(0.12 0.018 272);
    --ink: oklch(0.955 0.012 85);
    --ink-2: oklch(0.8 0.014 265);
    --dim: oklch(0.645 0.016 265);
    --faint: oklch(0.47 0.016 265);
    --line: oklch(0.93 0.02 85 / 0.1);
    --line-2: oklch(0.93 0.02 85 / 0.18);
    --accent: oklch(0.845 0.115 78);          /* starlight gold: tokens */
    --accent-soft: oklch(0.845 0.115 78 / 0.13);
    --event: oklch(0.78 0.13 238);            /* blueshift: chapters */
    --event-ink: oklch(0.86 0.09 236);
    --event-soft: oklch(0.78 0.13 238 / 0.14);
    --live: oklch(0.88 0.06 245);
    --surface: oklch(0.15 0.018 270 / 0.72);
    --surface-2: oklch(0.155 0.018 270 / 0.9);
    --hover: oklch(0.93 0.02 85 / 0.055);
    --shadow: 0 24px 60px oklch(0.04 0.02 270 / 0.6);
    --radius: 14px;
    --radius-sm: 9px;

    --display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --plate: oklch(0.1 0.02 270 / 0.66);
    --mono: 'Martian Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --data: 400 10px/1.5 var(--mono);

    --gutter: clamp(16px, 2.2vw, 30px);
    --reader-w: min(clamp(400px, 34vw, 520px), calc(100vw - 2 * var(--gutter)));
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    color-scheme: dark;
}

/* ------------------------------------------------------------------ base */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
}

button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-soft); color: var(--ink); }

#gl, #overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
}
#gl { touch-action: none; cursor: default; }
#gl.grabbing { cursor: grabbing; }
#gl.pointing { cursor: pointer; }
#overlay { pointer-events: none; }

.display {
    font-family: var(--display);
    font-weight: 500;
    letter-spacing: -0.02em;
    font-stretch: 112%;
}
.ev-label .t, #total, .toc .t, .view .title, .view .name, .view .vh h2, .view .stat .big, .view .pager .pt,
#card .ctitle, .tok .name, .hud .cap2 b, .hud.coin .row b, .cap, .finale h1, #range-tip.ev b, .finder-title {
    font-stretch: 112%;
    letter-spacing: -0.015em;
}
.eyebrow {
    margin: 0;
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--event);
}

.frame {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px 0 oklch(1 0 0 / 0.035);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    font: var(--data);
    letter-spacing: 0.02em;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: none;
    color: var(--ink-2);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
.btn:hover { color: var(--ink); border-color: color-mix(in oklch, var(--ink) 40%, transparent); }
.btn.primary { color: var(--ink); border-color: color-mix(in oklch, var(--event) 55%, transparent); background: var(--event-soft); }
.btn.primary:hover { border-color: var(--event); }

/* ---------------------------------------------------------------- labels */

#labels { position: fixed; inset: 0; pointer-events: none; }

.ev-label {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: auto;
    /* A solid plate, no live blur: dozens of these ride over a river that
       changes every frame, and each blur is a full pass. */
    background: oklch(0.1 0.02 270 / 0.84);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 10px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    opacity: 0.84;
    transition: opacity 0.25s var(--ease);
}
.ev-label:hover, .ev-label.on, .ev-label.hover { opacity: 1; }
.ev-label .d {
    font: 500 8.5px/1 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--event);
}
.ev-label .t {
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--ink);
}
.ev-label.on .t { color: var(--event-ink); }
.ev-label .stem {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 20px;
    margin-left: -0.5px;
    background: repeating-linear-gradient(to bottom, var(--event) 0 2px, transparent 2px 5px);
    opacity: 0.65;
}
.ev-label.on .stem, .ev-label.hover .stem, .ev-label:hover .stem { opacity: 1; }
/* Labels fade out and in as the view changes, rather than blinking. */
.ev-label.off { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.18s, visibility 0s linear 0.18s; }
.ev-label.fresh { animation: labelIn 0.35s var(--ease) both; }
@keyframes labelIn { from { opacity: 0; } }
.ev-label.flash { padding: 3px 7px; border-radius: 6px; }

/* Chapters on the river: a diamond for one, a numbered pin for a few. */
#pins { position: fixed; inset: 0; pointer-events: none; transition: opacity 0.8s var(--ease); }
.pin {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: auto;
}
.pin[hidden] { display: none; }
.pin.ghost { pointer-events: none; }
.pin.one { width: 22px; height: 22px; }
.pin.one::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 1.5px;
    background: var(--event);
    transform: rotate(45deg);
    box-shadow: 0 0 0 2px oklch(0.07 0.02 270 / 0.9), 0 0 12px oklch(0.78 0.13 238 / 0.65);
    transition: transform 0.2s var(--ease), background-color 0.2s;
}
.pin.one:hover::before { transform: rotate(45deg) scale(1.45); background: var(--event-ink); }
.pin.many {
    --size: calc(19px + var(--n, 2) * 0.9px);
    min-width: var(--size);
    height: var(--size);
    padding: 0 5px;
    border: 1px solid color-mix(in oklch, var(--event) 72%, transparent);
    border-radius: 999px;
    background: oklch(0.12 0.03 255 / 0.92);
    box-shadow: 0 0 0 2px oklch(0.06 0.02 270 / 0.55), 0 0 16px oklch(0.78 0.13 238 / 0.42);
    color: var(--event-ink);
    font: 500 10px/1 var(--mono);
    font-variant-numeric: tabular-nums;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.2s var(--ease);
}
.pin.many b { font-weight: 500; }
.pin.many:hover, .pin.many.open { background: color-mix(in oklch, var(--event) 34%, oklch(0.12 0.03 255)); border-color: var(--event); color: var(--ink); box-shadow: 0 0 0 2px oklch(0.06 0.02 270 / 0.55), 0 0 0 5px oklch(0.78 0.13 238 / 0.22), 0 0 20px oklch(0.78 0.13 238 / 0.6); }
body.intro-on #pins { opacity: 0; }
body.intro-on.show-labels #pins { opacity: 1; }
body.intro-on .pin { pointer-events: none; }

#pin-list {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9;
    width: 400px;
    max-width: calc(100vw - 24px);
    overflow: hidden;
    animation: pop 0.16s var(--ease);
}
#pin-list[hidden] { display: none; }
#pin-list .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
#pin-list .head b { font-family: var(--display); font-weight: 500; font-size: 15px; font-stretch: 108%; }
#pin-list .head span { font: var(--data); font-size: 9.5px; color: var(--event); white-space: nowrap; }
#pin-list .rows { max-height: min(52vh, 380px); overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
#pin-list .row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto 4ch;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
    color: var(--ink);
}
#pin-list .row:hover { background: var(--hover); }
#pin-list .row .glyph { display: grid; }
#pin-list .row .glyph svg { width: 9px; height: 9px; fill: var(--event); }
#pin-list .row .t { font-size: 13px; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#pin-list .row .d, #pin-list .row .n { font: var(--data); font-size: 9.5px; color: var(--dim); white-space: nowrap; }
#pin-list .row .n { color: var(--ink-2); text-align: right; }
#pin-list .zoom { display: block; width: 100%; padding: 10px 14px 11px; border: 0; border-top: 1px solid var(--line); background: none; font: var(--data); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); text-align: left; }
#pin-list .zoom:hover { color: var(--ink); background: var(--hover); }
.ev-label.flash .t { font: 400 11px/1 var(--mono); letter-spacing: 0.04em; color: var(--live); }

/* ------------------------------------------------------------------- top */

#top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 470px) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: var(--gutter);
    pointer-events: none;
    z-index: 5;
}
#top > * { pointer-events: auto; }

#brand {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    justify-self: start;
    padding-top: 9px;
}
.logo { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.15; }
.logo circle { fill: var(--ink); stroke: none; }
#brand .word {
    font: 500 11.5px/1 var(--sans);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    white-space: nowrap;
}

#search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: var(--surface);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--dim);
    font-size: 14px;
    text-align: left;
    transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), color 0.2s;
}
#search:hover { border-color: color-mix(in oklch, var(--accent) 45%, transparent); background: var(--surface-2); color: var(--ink-2); }
#search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
#search .ph { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#search kbd, #finder kbd {
    font: 400 10px/1 var(--mono);
    color: var(--dim);
    border: 1px solid var(--line-2);
    border-radius: 5px;
    padding: 3px 6px;
}

#results {
    max-height: min(56vh, 520px);
    overflow-y: auto;
    padding: 4px 10px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}
#results .sec {
    font: 500 9px/1.4 var(--mono);
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 12px 10px 6px;
}
#results .row {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 7px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    transition: background-color 0.15s;
}
#results .row:hover, #results .row[aria-selected='true'] { background: var(--hover); }
#results .row .img, #results .row .glyph {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    background: oklch(0.2 0.02 270) center / cover no-repeat;
    display: grid;
    place-items: center;
}
#results .row .glyph { background: var(--event-soft); color: var(--event); }
#results .row .glyph svg { width: 13px; height: 13px; fill: currentColor; }
#results .row .nm { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results .row .nm b { font-weight: 500; }
#results .row .nm span { color: var(--dim); font: var(--data); margin-left: 7px; }
#results .row .when { font: var(--data); color: var(--dim); white-space: nowrap; }
#results .empty { padding: 16px 12px; color: var(--dim); font-size: 13.5px; }
#results .note { padding: 8px 12px 10px; color: var(--faint); font: var(--data); }

#counter { justify-self: end; text-align: right; }
#counter .n { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; line-height: 1; }
#total {
    font-family: var(--display);
    font-size: 30px;
    font-weight: 300;
    font-variant-numeric: tabular-nums;
}
#counter .unit { font: 500 9.5px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
#counter .sub {
    margin-top: 8px;
    white-space: nowrap;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    font: var(--data);
    color: var(--dim);
}
.live { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); }
.live.on { background: var(--live); box-shadow: 0 0 10px var(--live); }
.live.on::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--live);
    animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
    0% { transform: scale(0.5); opacity: 0.9; }
    70%, 100% { transform: scale(1.8); opacity: 0; }
}

/* -------------------------------------------------------------- chapters */

/* Chapters and Intro sit under the search bar, leaving the left column to
   the reader. */
#tools {
    position: fixed;
    left: 50%;
    top: calc(var(--gutter) + 52px);
    transform: translateX(-50%);
    z-index: 6;
    display: flex;
    gap: 8px;
}
#chapters-toggle, #replay {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 32px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
#chapters-toggle svg, #replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#replay svg { fill: currentColor; stroke: none; width: 11px; height: 11px; }
#chapters-toggle:hover, #replay:hover { color: var(--ink); background: var(--surface-2); }
#chapters-toggle .count { font: var(--data); color: var(--event); }
#chapters-toggle[aria-expanded='true'] { border-color: color-mix(in oklch, var(--event) 55%, transparent); color: var(--ink); }

/* ---------------------------------------------------------------- reader */

#reader {
    position: fixed;
    left: var(--gutter);
    top: calc(var(--gutter) + 56px);
    bottom: 128px;
    width: var(--reader-w);
    z-index: 7;
    overflow: hidden;
    animation: readerIn 0.4s var(--ease);
}
@keyframes readerIn { from { opacity: 0; transform: translateX(-10px); } }
#reader .bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 0 12px;
    z-index: 2;
}
/* A shade behind the buttons, only when the view has scrolled under them. */
#reader .bar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(var(--surface-2) 70%, transparent);
    opacity: 0;
    transition: opacity 0.2s;
}
#reader.scrolled .bar::before { opacity: 1; }
#reader .spacer { flex: 1; }
#reader .back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 78%;
    height: 30px;
    padding: 0 10px 0 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--dim);
    font-size: 12.5px;
    transition: color 0.2s, background-color 0.2s;
}
#reader .back:hover { color: var(--ink); background: var(--hover); }
#reader .back svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#reader .back .to { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#reader .close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--dim);
    transition: color 0.2s, background-color 0.2s;
}
#reader .close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
#reader .close:hover { color: var(--ink); background: var(--hover); }
#reader .views {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 34px 26px 30px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
}
.view.enter-forward { animation: viewFwd 0.36s var(--ease); }
.view.enter-back { animation: viewBack 0.36s var(--ease); }
@keyframes viewFwd { from { opacity: 0; transform: translateX(14px); } }
@keyframes viewBack { from { opacity: 0; transform: translateX(-14px); } }

.view .vh h2 { margin: 6px 0 0; font-size: 30px; line-height: 1.05; }
.view .vh p { margin: 8px 0 0; color: var(--dim); font-size: 13px; line-height: 1.55; }

.toc { list-style: none; margin: 12px -14px 0; padding: 0; }
.toc li button {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    width: 100%;
    padding: 10px 14px 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    transition: background-color 0.15s;
}
.toc li button:hover { background: var(--hover); }
.toc li button.on { background: var(--event-soft); }
.toc .k { font: var(--data); color: var(--event); opacity: 0.8; padding-top: 3px; font-variant-numeric: tabular-nums; }
.toc .t { display: block; font-family: var(--display); font-size: 15.5px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.toc .c { display: block; font: var(--data); color: var(--dim); margin-top: 5px; }
.toc .era {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 14px 8px;
    font: 500 9.5px/1.4 var(--mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.toc .era::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.toc .era:first-child { padding-top: 8px; }

.view .title { margin: 10px 0 0; font-size: 29px; line-height: 1.08; }
.view .lede { margin: 14px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.66; }
.view .stat { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.view .stat .big { font-family: var(--display); font-size: 30px; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.view .stat .lbl { color: var(--ink-2); font-size: 13.5px; }
.view .stat .how { flex-basis: 100%; font: var(--data); color: var(--dim); margin-top: 4px; }
.view .hist { display: block; width: 100%; height: 56px; margin-top: 16px; }
.view .how-when { margin: 6px 0 0; font: var(--data); font-size: 9px; color: var(--faint); }
.view .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.view .sub { margin: 26px 0 0; font: 500 9px/1.4 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.view .members { list-style: none; padding: 0; margin: 10px -10px 0; display: grid; gap: 1px; }
.view .members.loading li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 7px 10px; }
.view .members.loading .img { width: 34px; height: 34px; border-radius: 9px; }
.view .members.loading .shimmer-line { width: 60%; margin: 0; }
.view .members button {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    transition: background-color 0.15s;
}
.view .members button:hover { background: var(--hover); }
.view .members .img { width: 32px; height: 32px; border-radius: 8px; background: oklch(0.2 0.02 270) center / cover no-repeat; }
.view .members .nm { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view .members .nm span { color: var(--dim); font: var(--data); margin-left: 7px; }
.view .members .v { font: var(--data); color: var(--ink-2); }
.view button.more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: none;
    font: var(--data);
    font-size: 10.5px;
    color: var(--ink-2);
    transition: background-color 0.15s, color 0.15s;
}
.view button.more:hover { background: var(--hover); color: var(--ink); }
.view button.more svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.view .src { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); font: var(--data); font-size: 9.5px; color: var(--faint); line-height: 1.7; overflow-wrap: anywhere; }
.view .src a { display: block; color: var(--dim); text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.view .pager { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
.view .pager button {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    transition: border-color 0.2s, background-color 0.2s;
}
.view .pager button:hover { border-color: var(--line-2); background: var(--hover); }
.view .pager .nx { text-align: right; align-items: flex-end; }
.view .pager .dir { display: inline-flex; align-items: center; gap: 4px; font: 500 8.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--event); }
.view .pager .dir svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.view .pager .nx .dir svg { transform: rotate(180deg); }
.view .pager .pt { font-family: var(--display); font-size: 14.5px; line-height: 1.25; color: var(--ink); }

.view .hero { display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center; margin-top: 6px; }
.view .hero .img { width: 88px; height: 88px; border-radius: 18px; background: oklch(0.2 0.02 270) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line), 0 12px 30px oklch(0.04 0.02 270 / 0.6); }
.view .name { margin: 0; font-size: 26px; line-height: 1.08; overflow-wrap: anywhere; }
.view .sym { margin-top: 7px; font: var(--data); font-size: 11px; letter-spacing: 0.05em; color: var(--accent); overflow-wrap: anywhere; }
.view .sym.none { color: var(--dim); }
.view .figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 20px 0 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--line); }
.view .figures > div { background: var(--surface-2); padding: 10px 12px; }
.view .figures dt { font: 500 8.5px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--dim); }
.view .figures dd { margin: 7px 0 0; font: 400 13px/1.2 var(--mono); color: var(--ink); }
.view .figures dd span { display: block; margin-top: 4px; font-size: 9px; color: var(--dim); }
.view .desc { margin: 16px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.62; white-space: pre-wrap; overflow-wrap: anywhere; }
.view .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid color-mix(in oklch, var(--event) 40%, transparent);
    border-radius: 999px;
    background: var(--event-soft);
    color: var(--event-ink);
    font-size: 12.5px;
    transition: border-color 0.2s;
}
.chip:hover { border-color: var(--event); }
.chip svg { width: 8px; height: 8px; fill: currentColor; }
.view .links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; }
.view .links a { display: inline-flex; align-items: center; gap: 5px; font: var(--data); color: var(--ink-2); text-decoration: none; }
.view .links a:hover { color: var(--accent); }
.view .links svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; }

.cat { font: var(--data); color: var(--dim); margin-bottom: 11px; }
.cat b { color: var(--ink); font-weight: 500; }
.meta { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font: var(--data); color: var(--ink-2); }
.meta dt { color: var(--dim); font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; padding-top: 2px; }
.meta dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ card */

#card {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 8;
    width: 300px;
    padding: 14px 15px 13px;
    pointer-events: none;
    font-size: 13px;
    animation: pop 0.16s var(--ease);
}
@keyframes pop { from { opacity: 0; } }
#card .ctitle { margin-top: 8px; font-family: var(--display); font-size: 21px; line-height: 1.12; }
.tok { display: grid; grid-template-columns: 46px 1fr auto; gap: 13px; align-items: center; }
.tok .img { width: 46px; height: 46px; border-radius: 11px; background: oklch(0.2 0.02 270) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.tok .img.loading, .shimmer {
    background: linear-gradient(100deg, oklch(0.2 0.02 270) 30%, oklch(0.28 0.02 270) 50%, oklch(0.2 0.02 270) 70%) 0 0 / 300% 100%;
    animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -150% 0; } }
.tok .name { font-family: var(--display); font-size: 19px; line-height: 1.15; overflow-wrap: anywhere; }
.tok .sym { font: var(--data); letter-spacing: 0.05em; color: var(--accent); margin-top: 4px; overflow-wrap: anywhere; }
.tok .sym.none { color: var(--dim); }
.tok .ath { font: var(--data); font-size: 11.5px; text-align: right; color: var(--ink); white-space: nowrap; }
.tok .ath span { display: block; color: var(--dim); font-size: 8.5px; letter-spacing: 0.12em; margin-top: 3px; }
.badges { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font: var(--data); font-size: 9.5px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.badge.ev { border-color: color-mix(in oklch, var(--event) 45%, transparent); color: var(--event-ink); }
.badge.ev::before { content: ''; width: 5px; height: 5px; background: var(--event); transform: rotate(45deg); }
.badge.grad { color: var(--ink); }
.badge.dim { color: var(--dim); }
.card-hint { margin-top: 11px; color: var(--faint); font: var(--data); font-size: 9.5px; }
.shimmer-line { height: 11px; border-radius: 4px; margin-top: 7px; }

/* -------------------------------------------------------------- timeline */

#bottom {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 var(--gutter) calc(var(--gutter) * 0.66 + env(safe-area-inset-bottom));
    z-index: 5;
    pointer-events: none;
}
#timeline {
    position: relative;
    height: 58px;
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
#timeline.on-event { cursor: pointer; }
#timeline.dragging { cursor: grabbing; }
#scrub { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#window {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid oklch(0.955 0.012 85 / 0.72);
    border-radius: 3px;
    background: oklch(0.955 0.012 85 / 0.06);
    box-shadow: 0 0 0 1px oklch(0.04 0.02 270 / 0.5), 0 0 24px oklch(0.955 0.012 85 / 0.06);
    cursor: grab;
    will-change: transform, width;
}
#window.grabbing { cursor: grabbing; }
#window .grip {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 14px;
    cursor: ew-resize;
    outline-offset: 0;
}
#window .grip.l { left: -7px; }
#window .grip.r { right: -7px; }
#window .grip::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 50%;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    border-radius: 2px;
    background: var(--ink);
    box-shadow: 0 0 0 1px oklch(0.04 0.02 270 / 0.7);
    transition: background-color 0.15s, height 0.15s, margin-top 0.15s;
}
#window .grip:hover::before, #window .grip:focus-visible::before { background: var(--accent); height: 26px; margin-top: -13px; }
#window.narrow .grip.l { left: -15px; }
#window.narrow .grip.r { right: -15px; }
#brush {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid color-mix(in oklch, var(--event) 70%, transparent);
    border-radius: 3px;
    background: var(--event-soft);
    pointer-events: none;
}
#range-tip {
    position: absolute;
    left: 0;
    bottom: calc(100% + 30px);
    padding: 6px 10px;
    border: 1px solid var(--line-2);
    border-radius: 7px;
    background: var(--surface-2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font: var(--data);
    color: var(--ink-2);
    white-space: nowrap;
    pointer-events: none;
}
#range-tip b { color: var(--ink); font-weight: 500; }
#range-tip.ev { border-color: color-mix(in oklch, var(--event) 55%, transparent); }
#range-tip.ev b { color: var(--event-ink); font-family: var(--display); font-size: 13px; font-weight: 500; }


/* ----------------------------------------------------------------- intro */

#intro {
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    transition: opacity 0.9s var(--ease), visibility 0.9s;
}
#intro.gone { opacity: 0; visibility: hidden; }
#intro::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(80% 95% at 10% 75%, oklch(0.07 0.02 272 / 0.82), transparent 70%),
        linear-gradient(to top, oklch(0.07 0.02 272 / 0.55), transparent 55%);
}
.captions {
    position: absolute;
    left: clamp(24px, 7vw, 120px);
    bottom: clamp(120px, 24vh, 260px);
    max-width: min(900px, calc(100vw - 48px));
}
.cap {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(28px, 4.2vw, 58px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-shadow: 0 2px 30px oklch(0.06 0.02 272 / 0.9), 0 0 2px oklch(0.06 0.02 272 / 0.8);
    text-wrap: balance;
    animation: capIn 1.1s var(--ease) both;
}
.cap em { font-style: normal; font-weight: 300; color: var(--ink-2); }
.cap.small { margin-top: 16px; font-family: var(--sans); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.55; letter-spacing: 0; color: var(--ink-2); max-width: 560px; }
.cap.mid { font-size: clamp(24px, 3vw, 42px); max-width: 620px; }
.cap.kick { margin-bottom: 18px; font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-shadow: none; }
.cap .n { font-variant-numeric: tabular-nums; }
.captions.out .cap { animation: capOut 0.7s var(--ease) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
@keyframes capOut { to { opacity: 0; transform: translateY(-8px); filter: blur(6px); } }

.huds { position: absolute; inset: 0; }
.huds svg.leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.huds svg.leads line { stroke: var(--event); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.8; }
.hud {
    position: absolute;
    left: 0;
    top: 0;
    width: 300px;
    color: var(--ink);
    background: oklch(0.1 0.02 265 / 0.86);
    border: 1px solid oklch(0.78 0.13 238 / 0.35);
    box-shadow: 0 20px 50px oklch(0.03 0.02 270 / 0.7), 0 0 30px oklch(0.78 0.13 238 / 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    --br: var(--event);
    animation: hudOpen 0.5s var(--ease) both;
}
.hud::before {
    content: '';
    position: absolute;
    inset: -4px;
    pointer-events: none;
    background:
        linear-gradient(var(--br), var(--br)) 0 0 / 10px 1px no-repeat,
        linear-gradient(var(--br), var(--br)) 0 0 / 1px 10px no-repeat,
        linear-gradient(var(--br), var(--br)) 100% 0 / 10px 1px no-repeat,
        linear-gradient(var(--br), var(--br)) 100% 0 / 1px 10px no-repeat,
        linear-gradient(var(--br), var(--br)) 0 100% / 10px 1px no-repeat,
        linear-gradient(var(--br), var(--br)) 0 100% / 1px 10px no-repeat,
        linear-gradient(var(--br), var(--br)) 100% 100% / 10px 1px no-repeat,
        linear-gradient(var(--br), var(--br)) 100% 100% / 1px 10px no-repeat;
}
.hud.closing { animation: hudClose 0.32s var(--ease) both; }
/* Built ahead, out of sight, so a clip is already playing when it opens. */
.hud.staged { animation: none; opacity: 0; visibility: hidden; transform: translate(-9999px, 0) !important; }
.hud.staged .media iframe { visibility: visible; }
@keyframes hudOpen {
    0% { clip-path: inset(50% 0 50% 0); opacity: 0; }
    35% { clip-path: inset(49% 0 49% 0); opacity: 1; }
    100% { clip-path: inset(-6px -6px -6px -6px); opacity: 1; }
}
@keyframes hudClose { to { clip-path: inset(50% 0 50% 0); opacity: 0; } }
.hud .bar { display: flex; justify-content: space-between; gap: 10px; padding: 7px 9px; font: 500 8px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--event); border-bottom: 1px solid oklch(0.78 0.13 238 / 0.2); }
.hud .bar .rec::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 6px; border-radius: 50%; background: oklch(0.68 0.2 25); vertical-align: 1px; animation: rec 1.2s steps(2) infinite; }
@keyframes rec { 50% { opacity: 0.2; } }
.hud .media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: oklch(0.06 0.01 265); }
.hud .media img, .hud .media iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.hud .media img { opacity: 0; transition: opacity 0.18s linear; transform: scale(1.06); }
.hud .media img.on { opacity: 1; animation: drift 2.4s linear both; }
@keyframes drift { from { transform: scale(1.06) translate(1%, 0); } to { transform: scale(1.14) translate(-1%, -1%); } }
/* The player is drawn larger than its frame so YouTube's title bar and logo
 * fall outside it; nothing inside can be hovered, so its controls stay down. */
.hud .media iframe { pointer-events: none; top: -18%; left: -18%; width: 136%; height: 136%; }
.hud .media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, oklch(0 0 0 / 0.16) 0 1px, transparent 1px 3px),
        radial-gradient(120% 90% at 50% 50%, transparent 55%, oklch(0 0 0 / 0.55));
}
.hud .cap2 { padding: 10px 11px 12px; }
.hud .cap2 .eyebrow { font-size: 8.5px; }
.hud .cap2 b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 500; font-size: 17px; line-height: 1.15; }
.hud .cap2 span { display: block; margin-top: 7px; font: var(--data); color: var(--ink-2); }
.hud.data { width: 210px; }
.hud.data canvas { display: block; width: 100%; height: 64px; }
.hud.data .cap2 b { font-size: 15px; }
.hud.coin { width: 210px; }
.hud.coin .row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px 11px; }
.hud.coin .row .img { width: 40px; height: 40px; border-radius: 9px; background: oklch(0.2 0.02 270) center / cover no-repeat; }
.hud.coin .row b { display: block; font-family: var(--display); font-weight: 500; font-size: 14px; line-height: 1.15; }
.hud.coin .peak { padding: 0 11px 11px; }
.hud.coin .peak strong { display: block; font: 300 26px/1 var(--display); font-stretch: 112%; letter-spacing: -0.02em; color: var(--ink); }
.hud.coin .peak span { display: block; margin-top: 5px; font: var(--data); font-size: 9px; color: var(--dim); }
/* A moment on the river: how many tokens, over how long. */
.hud.stats { width: 214px; pointer-events: none; }
.hud.stats .bar span { white-space: nowrap; }
.hud.stats .row { display: flex; align-items: baseline; gap: 10px; padding: 11px 12px 13px; }
.hud.stats .n { font: 300 32px/1 var(--display); font-stretch: 112%; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hud.stats .what { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink-2); }
.hud.stats .what em { font: var(--data); font-size: 9.5px; font-style: normal; color: var(--event-ink); }
.hud.coin .row span { display: block; margin-top: 4px; font: var(--data); color: var(--accent); }

.finale {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: auto;
    width: min(760px, calc(100vw - 48px));
    text-shadow: 0 1px 24px oklch(0.06 0.02 272 / 0.9);
}
/* A pool of dark behind the welcome, so the river glows around it, not through it. */
.finale::before {
    content: '';
    position: absolute;
    inset: -34% -22%;
    z-index: -1;
    background: radial-gradient(closest-side, oklch(0.07 0.02 272 / 0.86), oklch(0.07 0.02 272 / 0.55) 55%, transparent);
    animation: capIn 1s var(--ease) both;
    pointer-events: none;
}
.finale.leaving::before { animation: fadeOut 0.5s var(--ease) both; }
@keyframes fadeOut { to { opacity: 0; } }
.finale .kicker { margin: 0 0 24px; font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); animation: capIn 1s var(--ease) both; }
.finale h1 { margin: 0; font-size: clamp(40px, 6.6vw, 84px); font-weight: 400; line-height: 1; letter-spacing: -0.03em; animation: capIn 1.2s 0.15s var(--ease) both; }
.finale h1 em { display: block; font-style: normal; font-weight: 300; color: color-mix(in oklch, var(--ink) 82%, var(--accent)); }
/* Entering: the words rush past as the camera dives in. */
.finale.leaving .kicker, .finale.leaving h1, .finale.leaving #enter { animation: leave 0.8s cubic-bezier(0.55, 0, 0.8, 0.2) both; }
@keyframes leave { to { opacity: 0; transform: scale(2.6); filter: blur(10px); } }
#enter {
    margin-top: 40px;
    height: 48px;
    padding: 0 30px;
    border: 1px solid color-mix(in oklch, var(--accent) 60%, transparent);
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    animation: capIn 1s 0.5s var(--ease) both;
    transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
#enter:hover { background: color-mix(in oklch, var(--accent) 22%, transparent); border-color: var(--accent); }
.deck {
    position: absolute;
    left: 50%;
    bottom: calc(var(--gutter) + 6px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: oklch(0.12 0.018 272 / 0.66);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    pointer-events: auto;
}
.deck > button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-2);
    transition: background-color 0.15s, color 0.15s;
}
.deck > button:hover { background: var(--hover); color: var(--ink); }
.deck > button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.deck .play .i-play { display: none; fill: currentColor; stroke: none; }
.deck.paused .play .i-play { display: block; }
.deck.paused .play .i-pause { display: none; }
.deck .ticks { display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.deck .ticks button { width: 16px; height: 16px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.deck .ticks button::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background-color 0.2s, transform 0.2s; }
.deck .ticks button.done::before { background: var(--dim); }
.deck .ticks button.on::before { background: var(--accent); transform: scale(1.35); }
.deck .ticks button.ch::before { border-radius: 1px; transform: rotate(45deg); }
.deck .ticks button.ch.on::before { transform: rotate(45deg) scale(1.35); background: var(--event); }
#skip {
    width: auto !important;
    display: inline-flex !important;
    gap: 8px;
    padding: 0 10px;
    font: var(--data);
    color: var(--dim);
}
#skip kbd { font: inherit; font-size: 9px; padding: 1px 5px; border: 1px solid var(--line-2); border-radius: 4px; }
.deck { transition: opacity 0.3s var(--ease); }
#intro.diving .deck { opacity: 0; pointer-events: none; }
.deck > button:disabled { opacity: 0.35; pointer-events: none; }

/* ---------------------------------------------------------------- intro */

/* "Most of it is noise": TV static filling in over the river. */
#static {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    image-rendering: pixelated;
    transition: opacity 0.6s var(--ease);
}
#static.on { opacity: 0.2; transition: opacity 2.8s ease-in; }
#intro svg.defs { position: absolute; width: 0; height: 0; }
.cap .noisy { filter: url(#noisy-text); }
@media (prefers-reduced-motion: reduce) { .cap .noisy { filter: none; } }
/* While the camera moves, chapter pins and titles wait under a mask, then
   sweep in from the left (intro.js veil/sweep). */
body.veiled #pins, body.veiled #labels {
    -webkit-mask-image: linear-gradient(90deg, #000 var(--reveal, 120%), transparent calc(var(--reveal, 120%) + 16%));
    mask-image: linear-gradient(90deg, #000 var(--reveal, 120%), transparent calc(var(--reveal, 120%) + 16%));
}
#intro .hud.coin.pointed { width: 214px; pointer-events: none; }
#intro .hud.coin.pointed .bar { display: flex; }
#intro .hud.coin.pointed .row { padding: 9px 10px; }
#intro .hud.coin.pointed .who { margin: 0; min-width: 0; }
#intro .hud.coin.pointed .who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#intro .hud.coin.pointed .who > span { color: var(--accent); }
#intro .hud.coin.pointed .who em { font-style: normal; color: var(--ink); }

/* ---------------------------------------------------------------- stage */

/* An open chapter's feeds over the dimmed river (ChapterStage). */
#stage { position: fixed; inset: 0; z-index: 4; pointer-events: none; user-select: none; -webkit-user-select: none; }
#stage .hud { pointer-events: auto; }
#stage .hud[hidden] { display: none; }
#stage .hud.coin { width: 206px; padding: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
#stage .hud.coin:hover { border-color: oklch(0.78 0.13 238 / 0.8); box-shadow: 0 20px 50px oklch(0.03 0.02 270 / 0.7), 0 0 34px oklch(0.78 0.13 238 / 0.28); }
#stage .hud.coin .bar { display: flex; }
#stage .hud.coin .row { padding: 9px 10px; min-width: 0; }
#stage .hud.coin .who { min-width: 0; margin: 0; }
#stage .hud.coin .row b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stage .hud.coin .who > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent); }
#stage .hud.coin .who em { font-style: normal; color: var(--ink); }
#stage .hud.feed { width: 270px; }
.hud .media img.photo { opacity: 1; transform: scale(1.04); animation: slowdrift 16s ease-in-out infinite alternate; }
/* A portrait: a square around the face, centred, black at the sides. */
.hud .media.square { background: #000; }
.hud .media.square img.photo { left: 50%; right: auto; width: auto; aspect-ratio: 1; translate: -50% 0; }
/* A coin's square picture, centred, its edges fading into a blurred copy of itself. */
.hud .media .backdrop { position: absolute; inset: -15%; background: center / cover no-repeat; filter: blur(22px) saturate(1.3) brightness(0.5); }
.hud .media img.coinshot {
    left: 50%;
    right: auto;
    width: auto;
    aspect-ratio: 1;
    translate: -50% 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
    mask-image: radial-gradient(closest-side, #000 72%, transparent);
}
@keyframes slowdrift { from { transform: scale(1.04) translate(-1.2%, -0.8%); } to { transform: scale(1.12) translate(1.2%, 0.8%); } }
.hud .cap2 .credit { display: block; margin-top: 6px; font-size: 8.5px; line-height: 1.35; color: var(--dim); }
.hud .cap2.slim { padding: 8px 11px 9px; }
.hud .cap2.slim > span:first-child { margin-top: 0; }
.hud .cap2.slim .credit:first-child { margin-top: 0; }
.hud .cap2 .credit a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); }
/* The footage in the reader, when the river has no room for it. */
.view .footage-slot:empty { display: none; }
.view .footage-slot { margin: 16px 0 4px; }
.view .footage-slot .hud.feed { position: relative; width: auto; transform: none; }
/* In the panel the date is already above the title: no bar; a shorter picture. */
#reader .footage-slot .hud .bar { display: none; }
.view .footage-slot .hud .media { aspect-ratio: 2 / 1; }
.view .footage-slot { margin: 12px 0 2px; }
#stage .hud.feed .cap2 span:not(.eyebrow) { color: var(--ink-2); }
#stage svg.leads line { transition: opacity 0.3s; }
/* While a chapter is staged, other chapters' labels step aside. */
body.staging #labels .ev-label { opacity: 0; pointer-events: none; }

/* ----------------------------------------------------------------- ride */

/* The chapters in order: back, play, forward, where you are. Placed by
   main.js just above the timeline, or above the reader on a phone. */
#ride {
    position: fixed;
    left: 0;
    bottom: 150px;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: oklch(0.12 0.018 272 / 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px oklch(0.04 0.02 270 / 0.5);
    overflow: hidden;
    transform: translateX(-50%);
    transition: opacity 0.8s var(--ease), left 0.4s var(--ease), bottom 0.4s var(--ease);
    transition-delay: 0.6s, 0s, 0s;
}
#ride > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 34px;
    height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink-2);
    font: 500 10px/1 var(--mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}
#ride > button:hover { background: var(--hover); color: var(--ink); }
#ride > button:focus-visible { outline-offset: -2px; }
#ride > button:disabled { opacity: 0.3; pointer-events: none; }
#ride svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#ride .play { color: var(--ink); padding: 0 12px 0 10px; }
#ride .play svg.i-play { width: 11px; height: 11px; fill: var(--accent); stroke: none; }
#ride .play .i-pause { display: none; }
#ride.playing .play .i-play { display: none; }
#ride.playing .play .i-pause { display: block; }
#ride .where { padding: 0 10px 0 6px; font: var(--data); font-size: 10px; color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
#ride .where b { font-weight: 400; color: var(--event-ink); }
#ride .where:empty { display: none; }
#ride .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform-origin: left; transform: scaleX(var(--u, 0)); opacity: 0; transition: opacity 0.3s; }
#ride.playing .progress { opacity: 0.85; }
body.intro-on #ride { opacity: 0; pointer-events: none; transition-delay: 0s; }

/* While the intro runs, the instrument waits; then it comes up in order. */
#labels, #top, #tools, #bottom { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
body.intro-on #top, body.intro-on #tools, body.intro-on #bottom { opacity: 0; pointer-events: none; }
body.intro-on #top > *, body.intro-on #timeline { pointer-events: none; }
body.intro-on #top { transform: translateY(-6px); }
body.intro-on #bottom { transform: translateY(6px); }
body.intro-on #labels { opacity: 0; }
body.intro-on.show-labels #labels { opacity: 1; }
body.intro-on #labels .ev-label { pointer-events: none; }
#top { transition-delay: 0.2s; }
#tools { transition-delay: 0.35s; }
#bottom { transition-delay: 0.5s; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; color: var(--dim); }

/* ----------------------------------------------------------------- small */

@media (max-width: 1080px) {
    #brand .word { letter-spacing: 0.22em; }
    #total { font-size: 25px; }
}

@media (max-width: 900px) {
    #top { grid-template-columns: 1fr auto; grid-template-areas: 'brand counter' 'search search'; gap: 12px; }
    #brand { grid-area: brand; }
    #counter { grid-area: counter; }
    #search { grid-area: search; }
    #tools { top: calc(var(--gutter) + 112px); left: var(--gutter); transform: none; }
    #reader { top: calc(var(--gutter) + 152px); }
}

@media (max-width: 760px) {
    #brand .word { font-size: 10.5px; }
    #counter .unit { display: none; }
    #total { font-size: 19px; }
    #reader {
        left: 8px;
        right: 8px;
        top: auto;
        bottom: 100px;
        width: auto;
        height: min(46vh, 440px);
        animation-name: sheetIn;
    }
    /* While reading on a phone the sheet needs the height; search waits. */
    body.reading #search { display: none; }
    body.reading #tools { top: calc(var(--gutter) + 56px); }
    #counter { min-width: 0; max-width: 52vw; }
    #counter .sub { overflow: hidden; }
    #live-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #reader .views { padding: 46px 20px 24px; }
    #card { width: min(300px, calc(100vw - 24px)); }
    #timeline { width: 100%; height: 48px; }
    .deck .ticks { display: none; }
    #ride .where { display: none; }
    #ride .play .lbl { max-width: 62vw; overflow: hidden; text-overflow: ellipsis; }
    .captions { left: 20px; right: 20px; bottom: 130px; }
    .hud { width: 220px; }
    .hud.data, .hud.coin { display: none; }
}
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
    .live.on::after, .shimmer, .tok .img.loading, .hud .bar .rec::before { animation: none; }
    #reader, #card, .view.enter-forward, .view.enter-back, .hud, .hud .media img.on { animation: none; }
}

/* ---------------------------------------------------------------- finder */

#finder { position: fixed; inset: 0; z-index: 12; }
#finder .scrim {
    position: absolute;
    inset: 0;
    background: oklch(0.06 0.02 272 / 0.5);
    backdrop-filter: blur(6px) saturate(0.9);
    -webkit-backdrop-filter: blur(6px) saturate(0.9);
    animation: fadeIn 0.25s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } }
#finder .panel {
    position: absolute;
    left: 50%;
    top: clamp(24px, 11vh, 120px);
    width: min(980px, calc(100vw - 32px));
    transform: translateX(-50%);
    border: 1px solid var(--line-2);
    border-radius: 20px;
    background:
        linear-gradient(to bottom, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0.015) 40%),
        oklch(0.14 0.02 270 / 0.62);
    backdrop-filter: blur(34px) saturate(1.35);
    -webkit-backdrop-filter: blur(34px) saturate(1.35);
    box-shadow: 0 40px 120px oklch(0.03 0.02 270 / 0.75), inset 0 1px 0 oklch(1 0 0 / 0.09);
    overflow: hidden;
    animation: finderIn 0.38s var(--ease);
}
@keyframes finderIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0.985); } }
#finder .field { display: flex; align-items: center; gap: 14px; height: 70px; padding: 0 22px; border-bottom: 1px solid var(--line); }
#finder .field svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linecap: round; }
#q {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 21px;
    font-stretch: 108%;
    letter-spacing: -0.01em;
}
#q::placeholder { color: var(--dim); }
#q::-webkit-search-cancel-button { display: none; }
#finder .suggest { padding: 16px 22px 20px; }
#finder .suggest header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#finder .suggest h2 { margin: 0; font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
#finder .arrows { display: flex; gap: 6px; }
#finder .arrows button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-2);
    border-radius: 50%;
    background: oklch(1 0 0 / 0.03);
    color: var(--ink-2);
    transition: background-color 0.15s, color 0.15s, opacity 0.2s;
}
#finder .arrows button:hover:not(:disabled) { background: var(--hover); color: var(--ink); }
#finder .arrows button:disabled { opacity: 0.3; cursor: default; }
#finder .arrows svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#finder .track { overflow: hidden; }
#finder .cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 50px) / 6);
    gap: 10px;
    transition: transform 0.5s var(--ease);
}
.card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: oklch(1 0 0 / 0.035);
    text-align: left;
    overflow: hidden;
    transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--ease);
}
.card:hover { border-color: var(--line-2); background: oklch(1 0 0 / 0.06); transform: translateY(-2px); }
.card .pic { aspect-ratio: 1; background: oklch(0.2 0.02 270) center / cover no-repeat; position: relative; }
.card.ch .pic { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, oklch(0.78 0.13 238 / 0.28), oklch(0.14 0.02 265) 70%); }
.card.ch .pic svg { width: 26px; height: 26px; fill: var(--event); filter: drop-shadow(0 0 12px oklch(0.78 0.13 238 / 0.7)); }
/* A chapter's cover is its biggest coin, washed in the chapter colour. */
.card.ch .pic.cover { background-size: cover; background-position: center; }
.card.ch .pic.cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.13 0.03 250 / 0.85), oklch(0.13 0.03 250 / 0.1) 60%), oklch(0.55 0.13 238 / 0.22); }
.card.ch .pic.cover svg { position: absolute; right: 9px; bottom: 9px; width: 14px; height: 14px; z-index: 1; }
.card .pic .tag { z-index: 1; }
.card .pic .tag { position: absolute; left: 8px; top: 8px; padding: 3px 6px; border-radius: 5px; background: var(--plate); font: 500 8px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.card.ch .pic .tag { color: var(--event); }
.card .txt { padding: 10px 11px 12px; display: grid; gap: 5px; }
.card b { font-weight: 500; font-size: 13px; line-height: 1.2; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.card .txt > span { font: var(--data); font-size: 9.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card b { font-family: var(--sans); font-stretch: 108%; min-height: 2.4em; }
.card .v { color: var(--accent); }
#finder .dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
#finder .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--faint); transition: background-color 0.2s, width 0.25s var(--ease); }
#finder .dots i.on { width: 16px; border-radius: 3px; background: var(--ink-2); }
#finder.typing .suggest { display: none; }
@media (prefers-reduced-motion: reduce) { #finder .panel, #finder .scrim, #finder .cards { animation: none; transition: none; } }
@media (max-width: 760px) {
    #finder .panel { top: 12px; width: calc(100vw - 16px); border-radius: 16px; }
    #finder .field { height: 58px; padding: 0 16px; gap: 10px; }
    #q { font-size: 16px; }
    #finder .field kbd { display: none; }
    #finder .suggest { padding: 14px 16px 16px; }
    #finder .cards { grid-auto-columns: calc((100% - 10px) / 2); }
}