/* Black, white and one green; a bold grotesque; square corners. */

@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(fonts/barlow-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Barlow; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Barlow; font-weight: 500; font-display: swap; src: url(fonts/barlow-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Barlow; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Barlow; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #000;
  --ink: #fff;
  --ink-2: rgb(255 255 255 / 0.74);
  --ink-3: rgb(255 255 255 / 0.5);
  --line: rgb(255 255 255 / 0.16);
  --line-2: rgb(255 255 255 / 0.34);
  --green: #76b900;
  --green-up: #8fd400; /* the green, under the pointer */
  --panel: rgb(12 12 12 / 0.9);
  /* signers write in every script: the system's own faces take over where Barlow has no letters */
  --sans: Barlow, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", Arial, sans-serif;
  --edge: clamp(16px, 2.6vw, 40px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --top: clamp(104px, 19vh, 210px); /* where the number and the panel begin */
  --sheet: 0px; /* a phone's sheet: how much of the bottom it takes */
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-align: inherit; }
p, h2, h3, ul, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100dvh; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
/* the frame darkens toward its edges so the words on it stay readable over the lights */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0.8), transparent 17%, transparent 74%, rgb(0 0 0 / 0.92)),
    radial-gradient(ellipse at 50% 46%, transparent 52%, rgb(0 0 0 / 0.62) 100%);
}

/* small bold capitals: labels, buttons, tabs */
.eyebrow, .brand-name, #modes button, #tabs button, .chip, #cta, .kind, .badge, h3, #caption-when, #clock, #axis, .mark, #status {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12px;
  font-weight: 700;
}
.panel { background: var(--panel); border: 1px solid var(--line); }
.dot { display: inline-block; width: 8px; height: 8px; background: var(--c, var(--ink-3)); flex: none; }
.portrait { --s: 44px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; border: 2px solid var(--green); background: #111 50% / cover no-repeat; }
.chip { border: 1px solid var(--line-2); padding: 7px 12px 6px; white-space: nowrap; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.chip:hover { color: var(--green); border-color: var(--green); }
.chip[aria-pressed="true"] { color: #000; border-color: var(--green); background: var(--green); }
.chip.square { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; }
.chip.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.chip svg { width: 13px; height: 13px; }

/* everything on the frame waits for the lights, and steps back while the story is told */
#top, #hero, #bottom, #explorer, #marks, #ticker, #dock { transition: opacity 0.9s var(--ease); }
.booting :is(#top, #hero, #bottom, #explorer, #marks, #ticker, #dock, #caption) { opacity: 0; pointer-events: none; }
.intro :is(#modes, #tools, #legend, #cta, #marks, #ticker, #pace, #explorer, #dock) { opacity: 0; pointer-events: none; }
#modes, #tools, #legend, #cta, #pace { transition: opacity 1.2s var(--ease); }

/* — top — */
#top {
  position: fixed;
  inset: 0 0 auto;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding: var(--edge);
  pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; justify-self: start; }
.brand-mark { width: 12px; height: 12px; background: var(--green); grid-row: span 2; }
.brand-name { font-size: 15px; letter-spacing: 0.1em; white-space: nowrap; line-height: 1.2; }
.brand-sub { grid-column: 2; color: var(--ink-3); font-size: 13px; }
.brand-sub .narrow { display: none; }
/* who made the page, and where to find them */
.by { display: inline-flex; align-items: center; gap: 0.4em; vertical-align: bottom; color: var(--ink); font-weight: 600; transition: color 0.2s; }
.by:hover { color: var(--green); }
.by .x { width: 0.85em; height: 0.85em; fill: currentColor; stroke: none; }

#modes { display: flex; border: 1px solid var(--line-2); background: rgb(0 0 0 / 0.6); }
#modes button { padding: 9px 20px 8px; color: var(--ink-2); transition: color 0.2s, background 0.2s; }
#modes button:hover { color: var(--green); }
#modes button[aria-pressed="true"] { color: #000; background: var(--green); }

#tools { display: flex; align-items: center; gap: 10px; justify-self: end; }
.search { display: flex; align-items: center; gap: 9px; width: min(290px, 38vw); height: 34px; padding: 0 10px; border: 1px solid var(--line-2); background: rgb(0 0 0 / 0.6); transition: border-color 0.2s; }
.search:focus-within { border-color: var(--green); }
.search svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.search input { width: 100%; background: none; border: 0; outline: 0; font-size: 14px; border-radius: 0; }
.search input::placeholder { color: var(--ink-3); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
#about-open { height: 34px; width: 34px; text-transform: none; font-size: 14px; }

#results {
  position: fixed;
  z-index: 5;
  top: calc(var(--edge) + 40px);
  right: var(--edge);
  width: min(380px, calc(100vw - 2 * var(--edge)));
  max-height: min(60dvh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  border-top: 3px solid var(--green);
  background: #0c0c0c;
}
#results .head { padding: 10px 14px; color: var(--ink-3); font-size: 13px; border-bottom: 1px solid var(--line); }
#results button { display: grid; grid-template-columns: 8px 1fr; column-gap: 10px; align-items: baseline; width: 100%; padding: 9px 14px; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
#results button:hover, #results button:focus-visible { background: rgb(255 255 255 / 0.08); outline: 0; }
#results .who, #results .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results .who { font-weight: 600; }
#results .what { grid-column: 2; color: var(--ink-3); font-size: 13px; }

/* — the number — */
#hero { position: fixed; z-index: 2; left: var(--edge); top: var(--top); width: min(300px, 44vw); pointer-events: none; }
#hero > * { pointer-events: auto; }
/* a soft shadow behind the column, so the ring passing under it does not fight the words */
#hero::before { content: ""; position: absolute; inset: -60px -90px -60px calc(-1 * var(--edge)); z-index: -1; pointer-events: none; background: radial-gradient(ellipse closest-side, rgb(0 0 0 / 0.66), transparent); }
.eyebrow { color: var(--green); font-size: 13px; letter-spacing: 0.09em; }
#count {
  margin-top: 6px;
  font-size: clamp(54px, 7.4vw, 124px);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#count i { display: inline-block; width: 0.535em; text-align: center; font-style: normal; }
#pace { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 22px; margin-top: 12px; color: var(--ink-2); font-size: 14px; font-weight: 500; }
#status { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-3); }
#status i { width: 8px; height: 8px; background: var(--ink-3); }
#status.live { color: var(--green); }
#status.live i { background: var(--green); animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(118 185 0 / 0.7); } 100% { box-shadow: 0 0 0 9px rgb(118 185 0 / 0); } }

#legend { margin-top: clamp(16px, 3vh, 30px); border-top: 1px solid var(--line-2); }
#legend button { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 10px 2px; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink-2); transition: color 0.2s, opacity 0.2s; }
#legend button:hover { color: var(--ink); }
#legend .n { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
#legend.filtered button[aria-pressed="false"] { opacity: 0.4; }
#legend button[aria-pressed="true"] { color: var(--ink); box-shadow: inset 3px 0 0 var(--green); padding-left: 12px; }
#note { margin-top: 16px; color: var(--ink-3); font-size: 13px; line-height: 1.45; }

/* — the explorer: voices, people, organisations, pulse; and whoever was picked — */
#explorer {
  position: fixed;
  z-index: 3;
  right: var(--edge);
  top: var(--top);
  bottom: 118px;
  width: min(380px, 31vw);
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--green);
}
#sheet-head { flex: none; touch-action: none; }
#grip { display: none; }
#tabs { display: flex; border-bottom: 1px solid var(--line); }
#tabs button { flex: 1; padding: 14px 2px 12px; text-align: center; color: var(--ink-3); white-space: nowrap; transition: color 0.2s; }
#tabs button:hover { color: var(--ink); }
#tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--green); }
#pane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px 20px 22px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
#pane > * { animation: rise 0.45s var(--ease) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

h3 { margin: 24px 0 10px; color: var(--green); }
h3:first-child { margin-top: 0; }
.hint { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.faces + .hint { margin-top: 18px; }

/* a signer */
.who { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.who .portrait { --s: 56px; }
.kind { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 11.5px; }
.name { margin-top: 4px; font-size: 25px; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.title { margin-top: 3px; color: var(--ink-2); overflow-wrap: anywhere; }
.badge { display: inline-block; margin-top: 14px; padding: 4px 9px 3px; background: var(--green); color: #000; font-size: 11px; }
.voice { margin-top: 16px; padding-left: 14px; border-left: 3px solid var(--green); font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.foot { margin-top: 16px; color: var(--ink-3); font-size: 13px; }
.credit { margin-top: 12px; color: var(--ink-3); font-size: 12px; }
.credit a, #about-credits a { text-decoration: underline; text-underline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.back { display: inline-flex; align-items: center; gap: 6px; margin: -6px 0 14px -4px; padding: 6px 8px 6px 4px; color: var(--ink-3); font-weight: 600; font-size: 13px; }
.back:hover { color: var(--green); }
.back svg { width: 12px; height: 12px; }

/* the voice of the moment */
.now { min-height: 148px; }
.now .name { font-size: 21px; }
.now-bar { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.now-bar .chip.square svg { fill: currentColor; stroke: none; }
.now-bar .progress { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.now-bar .progress i { display: block; height: 100%; background: var(--green); transform-origin: left; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.chips .chip { padding: 5px 10px 4px; font-size: 11px; }
.feed button, .list button { display: block; width: 100%; padding: 11px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); }
.feed .by { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 13px; }
.feed .by b { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .said { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; color: var(--ink-2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.feed button:hover .said { color: var(--ink); }
.list { margin-top: 18px; border-top: 1px solid var(--line); }
.list button { padding: 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list button:hover b { color: var(--green); }
.list b { font-weight: 600; }
.list .sub { margin-left: 8px; color: var(--ink-3); font-size: 13px; }

/* the well-known supporters */
.faces { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faces button { display: grid; justify-items: center; align-content: start; gap: 2px; padding: 18px 10px 16px; text-align: center; background: #0c0c0c; transition: background 0.2s; }
.faces button:hover { background: #1a1a1a; }
.faces .portrait { --s: 84px; margin-bottom: 10px; }
.faces b { font-weight: 600; font-size: 16px; line-height: 1.2; }
.faces .sub { color: var(--ink-3); font-size: 12.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* organisations, and anything else counted */
.bars li > * { display: grid; grid-template-columns: minmax(0, 46%) 1fr auto; gap: 10px; align-items: center; width: 100%; padding: 7px 0; color: var(--ink-2); }
.bars button:hover { color: var(--green); }
.bars b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars.still b { white-space: normal; line-height: 1.3; }
.bars i { height: 6px; background: currentColor; min-width: 2px; justify-self: start; }
.bars .n { font-weight: 600; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars + .hint { margin-top: 16px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tiles div { padding: 14px 14px 12px; background: #0c0c0c; }
.tiles b { display: block; font-size: 32px; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tiles span { display: block; margin-top: 6px; color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.stack { display: flex; gap: 2px; height: 10px; }
.stack i { background: var(--c); min-width: 2px; }
.stack-key { margin-top: 10px; }
.stack-key li { display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center; padding: 4px 0; color: var(--ink-2); }
.stack-key .n { font-weight: 600; font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.said button { display: grid; grid-template-columns: 1fr auto; gap: 12px; width: 100%; padding: 8px 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); color: var(--ink-2); }
.said button:hover { color: var(--green); }
.said .n { font-weight: 600; font-size: 13px; color: var(--ink-3); }
.said + *, .hint + .said { margin-top: 6px; }

#hover { position: fixed; z-index: 6; max-width: 300px; padding: 10px 12px; pointer-events: none; font-size: 14px; border-left: 3px solid var(--green); }
#hover b { display: block; font-weight: 600; overflow-wrap: anywhere; }
#hover span { display: block; color: var(--ink-2); font-size: 13px; overflow-wrap: anywhere; }
#hover .kind { margin-top: 6px; color: var(--ink-3); font-size: 11px; }
#hover q { margin-top: 7px; color: var(--ink-2); font-size: 13px; quotes: none; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* a box drawn around the light being looked at: four corners, and a square that opens out from it */
#reticle {
  --corner: linear-gradient(var(--green), var(--green)) no-repeat;
  position: fixed;
  z-index: 2;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  pointer-events: none;
  background:
    var(--corner) 0 0 / 9px 2px, var(--corner) 0 0 / 2px 9px, var(--corner) 100% 0 / 9px 2px, var(--corner) 100% 0 / 2px 9px,
    var(--corner) 0 100% / 9px 2px, var(--corner) 0 100% / 2px 9px, var(--corner) 100% 100% / 9px 2px, var(--corner) 100% 100% / 2px 9px;
}
#reticle::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--green); animation: ping 2.4s var(--ease) infinite; }
@keyframes ping { from { transform: scale(0.4); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }

/* — words and faces pinned to places in the scene — */
#marks { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mark { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; color: var(--ink-2); font-size: 11px; font-weight: 600; text-shadow: 0 0 6px #000, 0 0 12px #000; transition: opacity 0.5s; }
.mark small { margin-left: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.mark.org { pointer-events: auto; cursor: pointer; padding: 3px 0 3px 12px; }
.mark.org::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: var(--line-2); }
.mark.org:hover, .mark.org.on { color: var(--green); }
.mark.sector { color: var(--ink-3); font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-align: center; }
.mark.core { color: var(--green); font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-align: center; }
.mark.core small, .mark.sector small { display: block; margin: 2px 0 0; text-align: center; letter-spacing: 0.04em; }
.mark.core small { color: var(--ink-2); }
.mark.note { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 500; padding-left: 46px; }
.mark.note::before { content: ""; position: absolute; left: 7px; top: 50%; width: 32px; height: 1px; background: var(--green); }
.mark.note::after { content: ""; position: absolute; left: -3px; top: calc(50% - 3px); width: 6px; height: 6px; background: var(--green); }
.mark.ripple { width: 10px; height: 10px; margin: -5px; border: 1px solid #c8ff7a; animation: ping 1.6s var(--ease) forwards; }
.mark.guest { --s: 46px; pointer-events: auto; cursor: pointer; width: var(--s); height: var(--s); text-shadow: none; }
.mark.guest .portrait { --s: inherit; display: block; box-shadow: 0 0 18px rgb(118 185 0 / 0.55); transition: transform 0.25s var(--ease), box-shadow 0.25s; }
.mark.guest b { position: absolute; left: 50%; top: 100%; translate: -50% 7px; padding: 3px 7px 2px; background: #000; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; opacity: 0; transition: opacity 0.25s, background 0.25s, color 0.25s; pointer-events: none; }
.mark.guest:hover .portrait, .mark.guest.on .portrait { transform: scale(1.18); box-shadow: 0 0 28px rgb(118 185 0 / 0.95); }
/* a name shows where there is room for it (ui.js says so), and always for the face pointed at or picked */
.mark.guest.named b, .mark.guest:hover b, .mark.guest.on b { opacity: 1; }
.mark.guest:hover b, .mark.guest.on b { background: var(--green); color: #000; }
.mark.guest:hover { z-index: 1; }

/* — the story, told once — */
#caption { position: fixed; z-index: 2; left: 50%; bottom: clamp(104px, 14vh, 150px); translate: -50% 0; width: min(820px, 92vw); padding: 26px 40px; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.8s var(--ease); background: radial-gradient(ellipse closest-side, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.5) 60%, transparent); }
#caption.on { opacity: 1; }
#caption-when { display: block; color: var(--green); font-size: 13px; letter-spacing: 0.1em; }
#caption-what { display: block; margin-top: 6px; font-size: clamp(21px, 2.5vw, 34px); font-weight: 600; line-height: 1.25; text-shadow: 0 0 22px #000, 0 0 8px #000; }

#ticker { position: fixed; z-index: 2; left: var(--edge); bottom: 166px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
#ticker li { display: flex; align-items: center; gap: 8px; max-width: min(360px, 70vw); font-size: 13px; animation: tick 7s var(--ease) forwards; }
#ticker li b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ticker li span { color: var(--ink-3); white-space: nowrap; }
@keyframes tick { 0% { opacity: 0; transform: translateY(8px); } 8%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

#dock { position: fixed; z-index: 3; left: var(--edge); bottom: 118px; display: flex; border: 1px solid var(--line-2); background: rgb(0 0 0 / 0.6); }
#dock button { width: 34px; height: 32px; display: grid; place-items: center; color: var(--ink-2); transition: color 0.2s, background 0.2s; }
#dock button + button { border-left: 1px solid var(--line-2); }
#dock button:hover { color: #000; background: var(--green); }
#dock svg { width: 13px; height: 13px; }

/* — the timeline — */
#bottom { position: fixed; z-index: 3; inset: auto 0 0; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: clamp(12px, 1.8vw, 26px); padding: 0 var(--edge) calc(var(--edge) * 0.7 + env(safe-area-inset-bottom)); }
#play { width: 40px; height: 40px; border: 1px solid var(--line-2); display: grid; place-items: center; transition: border-color 0.2s, color 0.2s, background 0.2s; }
#play:hover { border-color: var(--green); background: var(--green); color: #000; }
#play svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
#play .icon-pause, #play.playing .icon-play { display: none; }
#play.playing .icon-pause { display: block; }
#timeline { position: relative; height: 62px; cursor: ew-resize; touch-action: none; }
#bars { position: absolute; inset: 0 0 16px; width: 100%; height: calc(100% - 16px); }
#playhead { position: absolute; top: -4px; bottom: 12px; left: 0; width: 2px; background: var(--green); pointer-events: none; will-change: transform; }
#axis { position: absolute; inset: auto 0 0; height: 12px; color: var(--ink-3); font-size: 10.5px; font-weight: 600; pointer-events: none; }
#axis span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
#bar-tip { position: absolute; bottom: calc(100% + 6px); translate: -50% 0; padding: 6px 9px; white-space: nowrap; pointer-events: none; font-size: 12px; border-top: 2px solid var(--green); }
#bar-tip b { display: block; font-weight: 700; letter-spacing: 0.04em; }
#bar-tip span { color: var(--ink-2); }
#clock { color: var(--ink-2); min-width: 15ch; text-align: right; font-variant-numeric: tabular-nums; }
/* the way out of the story and the call to sign take the same place, one after the other */
#skip, #cta { grid-area: 1 / 4; justify-self: end; }
#cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 12px; background: var(--green); color: #000; font-size: 13px; white-space: nowrap; transition: background 0.2s; }
#cta svg { width: 14px; height: 14px; stroke-width: 2; }
#cta:hover { background: var(--green-up); }

/* — about — */
dialog { color: inherit; }
#about { width: min(600px, calc(100vw - 2 * var(--edge))); max-height: 84dvh; padding: 30px 32px; overflow: auto; border-top: 3px solid var(--green); background: #0c0c0c; }
#about::backdrop { background: rgb(0 0 0 / 0.7); }
#about h2 { font-size: 24px; font-weight: 600; margin-bottom: 14px; }
#about p { color: var(--ink-2); line-height: 1.6; margin-top: 12px; }
#about span:not(#about-burst) { color: var(--ink); font-weight: 600; } /* the figures in it */
#about .small { font-size: 13px; color: var(--ink-3); }
#about-close { position: absolute; top: 10px; right: 14px; width: 30px; height: 30px; font-size: 24px; text-align: center; color: var(--ink-3); }
#about-close:hover { color: var(--green); }

#toast { position: fixed; z-index: 8; left: 50%; bottom: calc(var(--sheet) + 132px); translate: -50% 12px; padding: 9px 14px 8px; background: var(--green); color: #000; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.3s, translate 0.3s var(--ease); }
#toast.on { opacity: 1; translate: -50% 0; }

#boot { position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 20px; background: var(--bg); font-size: 14px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; transition: opacity 1.4s var(--ease), visibility 0s 1.4s; }
#boot .brand-mark { animation: beat 1.4s ease-in-out infinite; }
@keyframes beat { 50% { transform: scale(1.8); opacity: 0.5; } }
body:not(.booting) #boot { opacity: 0; visibility: hidden; }
#boot.failed { max-width: none; padding: 0 var(--edge); text-align: center; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 16px; line-height: 1.5; }
#boot.failed .brand-mark { animation: none; }

/* — a low window: no room under the legend for who just signed — */
@media (max-height: 700px) and (min-width: 821px) {
  #ticker { display: none; }
}

/* — a narrower window: the panel gives room to the planet — */
@media (max-width: 1180px) and (min-width: 821px) {
  #explorer { width: min(340px, 34vw); }
  #hero { width: min(260px, 30vw); }
  #count { font-size: clamp(46px, 6.4vw, 84px); }
}

/* — a phone: the scene on top, the timeline under it, everything to read in a sheet pulled up from the bottom — */
@media (max-width: 820px) {
  :root { --edge: 14px; --sheet: 172px; }
  .intro { --sheet: 0px; } /* while the story is told there is no sheet: the timeline sits at the bottom */
  body::before { background: linear-gradient(to bottom, rgb(0 0 0 / 0.84), transparent 30%, transparent 64%, rgb(0 0 0 / 0.7)); }

  #top { grid-template-columns: auto 1fr; gap: 10px; padding: calc(10px + env(safe-area-inset-top)) var(--edge) 0; }
  .brand-sub { font-size: 10.5px; line-height: 1.1; white-space: nowrap; }
  .brand-sub .wide { display: none; }
  .brand-sub .narrow { display: inline; }
  .brand-name { font-size: 13px; }
  .brand { column-gap: 9px; height: 34px; align-content: center; }
  #tools { justify-self: stretch; justify-content: flex-end; gap: 8px; min-width: 0; }
  /* the search is a button until it is used: then it takes the whole bar */
  .search { width: 34px; padding: 0; justify-content: center; cursor: pointer; }
  .search input { width: 0; padding: 0; font-size: 16px; }
  .search:focus-within, .searching .search { position: absolute; z-index: 1; left: var(--edge); right: var(--edge); width: auto; padding: 0 12px; justify-content: flex-start; background: #000; }
  .search:focus-within input, .searching .search input { width: 100%; }
  #modes { grid-row: 2; grid-column: 1; justify-self: start; }
  #modes button { padding: 8px 14px 7px; }
  #results { top: calc(52px + env(safe-area-inset-top)); left: var(--edge); right: var(--edge); width: auto; max-height: 62dvh; }

  #hero { top: calc(100px + env(safe-area-inset-top)); width: auto; right: 0; }
  #hero::before { display: none; }
  .eyebrow { font-size: 11px; }
  #count { margin-top: 2px; font-size: clamp(42px, 13.5vw, 60px); }
  #pace { margin-top: 6px; min-height: 0; font-size: 13px; }
  /* the legend becomes a row of chips to swipe through */
  #legend { display: flex; gap: 6px; margin: 10px calc(-1 * var(--edge)) 0; padding: 0 var(--edge); border: 0; overflow-x: auto; scrollbar-width: none; }
  #legend::-webkit-scrollbar { display: none; }
  #legend button { display: flex; width: auto; gap: 7px; padding: 6px 10px 5px; border: 1px solid var(--line-2); background: rgb(0 0 0 / 0.6); font-size: 13px; white-space: nowrap; }
  #legend button[aria-pressed="true"] { border-color: var(--green); box-shadow: none; padding-left: 10px; }
  #note { display: none; }

  /* the timeline rides on top of the sheet; the call to sign moves up beside the views */
  #bottom { bottom: var(--sheet); grid-template-columns: auto 1fr; gap: 10px; padding: 0 var(--edge) 6px; transition: bottom 0.42s var(--ease), opacity 0.9s var(--ease); }
  .dragging #bottom, .dragging #explorer, .dragging #caption { transition: none; }
  /* pulled up, the sheet takes the timeline's place; the call to sign stays */
  .reading #bottom { pointer-events: none; }
  .reading :is(#play, #timeline) { opacity: 0; }
  #play, #timeline { transition: opacity 0.4s var(--ease); }
  #play { width: 34px; height: 34px; }
  #timeline { height: 46px; }
  #clock { display: none; }
  #skip { position: fixed; right: var(--edge); bottom: calc(var(--sheet) + 60px); background: #000; }
  #cta { position: fixed; top: calc(54px + env(safe-area-inset-top)); right: var(--edge); padding: 9px 12px 8px; gap: 7px; font-size: 12px; pointer-events: auto; }
  #cta svg { width: 12px; height: 12px; }

  #explorer { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: var(--sheet); border-width: 3px 0 0; background: rgb(10 10 10 / 0.96); padding-bottom: env(safe-area-inset-bottom); transition: height 0.42s var(--ease), opacity 0.9s var(--ease); }
  #grip { display: grid; place-items: center; width: 100%; height: 18px; }
  #grip i { width: 40px; height: 3px; background: var(--line-2); }
  #tabs button { padding: 8px 2px 11px; font-size: 11.5px; letter-spacing: 0.04em; }
  #pane { padding: 16px 16px 20px; }
  .now { min-height: 0; }
  .now .name, .name { font-size: 20px; }
  .voice { font-size: 16px; margin-top: 12px; }
  .faces .portrait { --s: 72px; }

  #caption { bottom: calc(var(--sheet) + 58px); padding: 14px 18px; transition: bottom 0.42s var(--ease), opacity 0.8s var(--ease); }
  #caption-what { font-size: 19px; }
  #dock, #ticker, .mark.note, .mark.sector small { display: none; }
  .mark.guest { --s: 36px; }
  .mark.guest b { font-size: 10px; padding: 2px 5px 1px; }
  .mark.sector { font-size: 10.5px; letter-spacing: 0.1em; }
  .mark { font-size: 10px; }
  #about { padding: 22px 20px; }
  #toast { bottom: calc(var(--sheet) + 64px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01s !important; transition-duration: 0.01s !important; }
}