/* ------------------------------------------------------------------
   Burn Your Money · design tokens
   Type, three voices with one job each:
   - Bodoni Moda: the wordmark and display only (headings 22px and up), where a
     high-contrast Didone reads; never small text.
   - Inter: everything you read or press.
   - IBM Plex Mono: the ledger's voice: small labels and every figure (amounts,
     totals, times), tabular so sums line up, like a bank ledger or a receipt.
   Scale: 12 · 13 · 14 · 16 · 22 · 30 · 46.
   Colour: the wordmark's warm ink on white, its red for the one accent;
   otherwise the fire is the only colour.
   ------------------------------------------------------------------ */
:root {
  --page: #ffffff;
  --card: #ffffff;
  --hairline: rgba(20, 20, 22, .08);
  --line: #e4e5e8;
  --line-2: #cfd2d6;
  --text: #181816;             /* the wordmark's ink */
  --text-2: #5c6066;            /* 6.3:1 on white */
  --text-3: #70757c;            /* 4.7:1 on white */
  --chip: #f2f3f5;
  --chip-hover: #e9ebee;
  --chip-on: #181816;
  --chip-on-text: #ffffff;
  --btn: #181816;
  --btn-text: #ffffff;
  --btn-2: #f2f3f5;
  --btn-2-text: #181816;
  --focus: #181816;
  --accent: #a9281f;           /* the wordmark's red dot */
  --error: #b42318;             /* 6.3:1 on white */
  --ok: #1f7a3a;
  --warn-bg: #fff4e0;
  --warn-text: #7a4b00;
  --shadow: 0 1px 2px rgba(16, 17, 20, .05), 0 10px 30px -10px rgba(16, 17, 20, .16);
  --radius: 20px;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --page: #0c0c0d;
  --card: #161618;
  --hairline: rgba(255, 255, 255, .08);
  --line: #26272b;
  --line-2: #36383d;
  --text: #f3f2ef;
  --text-2: #a8abb1;
  --text-3: #8b8f96;
  --chip: #1f2023;
  --chip-hover: #27282c;
  --chip-on: #f3f2ef;
  --chip-on-text: #0c0c0d;
  --btn: #f3f2ef;
  --btn-text: #0c0c0d;
  --btn-2: #26272b;
  --btn-2-text: #f3f2ef;
  --focus: #f3f2ef;
  --accent: #e0594c;
  --error: #ff8a7a;
  --ok: #8fd19a;
  --warn-bg: #2b2210;
  --warn-text: #f2c26b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -16px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--page); color: var(--text);
  font: 400 15px/1.5 var(--sans); font-feature-settings: 'cv11', 'ss01'; letter-spacing: -.005em;
  transition: background-color .25s, color .25s; overflow: hidden;
}
.lights-fading, .lights-fading *, .lights-fading *::before, .lights-fading *::after {
  transition-property: background-color, color, border-color, box-shadow, fill, stroke, opacity !important;
  transition-duration: var(--fade, 1.2s) !important;
  transition-timing-function: cubic-bezier(.45, 0, .2, 1) !important;
}
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 16px; min-height: 44px; background: var(--btn); color: var(--btn-text); border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 10px; }

/* ---------- wordmark and tools, set in the stage beside the machine ---------- */
.brand-h { position: absolute; z-index: 4; top: 22px; left: 24px; margin: 0; font-size: inherit; font-weight: inherit; }
.brand { display: inline-flex; text-decoration: none; color: var(--text); border-radius: 8px; padding: 4px; margin: -4px; }
/* BURNYOUR. in sturdy letter-spaced bold caps over a hairline Didone MONEY, and the red dot */
.wordmark { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; }
.wm-top { font: 700 12px/1 var(--serif); font-variation-settings: 'opsz' 11; letter-spacing: .1em; margin-right: -.1em; }
/* MONEY, engraved like the lettering on a banknote: a sturdy roman, outlined, filled with fine
   diagonal hatching, all in the ink colour (so it follows the lights). Solid where clipping
   text to a background isn't supported, and in forced-colours modes. */
.wm-main {
  font: 700 46px/1 var(--serif); font-variation-settings: 'opsz' 22; letter-spacing: .06em; margin: 5px -.06em 0 0;
  color: var(--text);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wm-main {
    -webkit-text-fill-color: transparent;
    background-image: repeating-linear-gradient(135deg, currentColor 0 .017em, transparent .017em .043em);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-stroke: .022em currentColor;
    paint-order: stroke fill;
  }
}
@media (forced-colors: active) {
  .wm-main { -webkit-text-fill-color: CanvasText; background: none; -webkit-text-stroke: 0; }
}
.wm-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.tools { position: absolute; z-index: 4; top: 16px; right: 16px; display: flex; gap: 2px; }
.icon-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: transparent; border: 0; color: var(--text-2); cursor: pointer; text-decoration: none; padding: 0;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--chip); color: var(--text); }
.icon-btn svg { width: 20px; height: 20px; }
#sound-btn[aria-pressed="false"] .wave { opacity: .25; }
#sound-btn[aria-pressed="true"] { color: var(--text); }
#lights-btn .bulb-fill { opacity: 0; transition: opacity .15s; }
#lights-btn[aria-checked="true"] .bulb-fill { opacity: .9; color: #f2b33d; }

/* ---------- layout: machine | one column with the controls above Just burned ---------- */
.app {
  position: relative; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px;
  padding: max(16px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.stage { grid-column: 1; grid-row: 1; position: relative; min-height: 0; overflow: hidden; }
.side { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; padding: 22px 0 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }   /* never cut off: scrolls if the screen is short */
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* loading: the scene stays dark until it is drawn in full and the fire is lit, then fades in once */
.stage canvas { opacity: 0; transition: opacity 1.1s cubic-bezier(.3, 0, .2, 1); }
.stage.ready canvas { opacity: 1; }
/* while it loads, the wordmark's red dot glows where the fire will be */
.stage::after {
  content: ''; position: absolute; left: 50%; top: 78%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0; animation: ember 1.6s ease-in-out .5s infinite; pointer-events: none; transition: opacity .4s;
}
.stage.ready::after { animation: none; opacity: 0; }
@keyframes ember { 0%, 100% { opacity: .25; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.1); } }
/* type fades in once its faces have arrived */
.brand-h, .side, .page { transition: opacity .5s ease; }
.type-loading .brand-h, .type-loading .side, .type-loading .page { opacity: 0; }
#lightmap { mix-blend-mode: multiply; }

/* live pill */
.live-pill {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 2px; margin: 0 0 4px;
  background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--line); cursor: pointer;
  font-size: 14px; line-height: 1.2; text-align: left;
}
.live-pill .live-text { flex: 1; color: var(--text-2); }
.live-pill:hover .live-text { color: var(--text); }
.live-pill strong { font: 500 15px/1 var(--mono); font-variant-numeric: tabular-nums; }
.live-pill .chev { width: 16px; height: 16px; opacity: .7; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0594c; box-shadow: 0 0 0 3px rgba(224, 89, 76, .3); transition: background .3s, box-shadow .3s; }
/* nothing burned yet: an unlit dot; before the ledger arrives, the line is quiet */
.live-pill[data-state="empty"] .live-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.live-pill[data-state="loading"] .live-dot { background: var(--line-2); box-shadow: none; }
.live-pill[data-state="loading"] .live-text { color: var(--text-3); }
.live-pill .live-text { transition: color .3s; }
@media (min-width: 761px) {
  .live-pill, .panel-close { display: none !important; }   /* Just burned is always in the column */
}

/* ---------- dock ---------- */
.dock { flex: none; padding: 0 0 22px; border-bottom: 1px solid var(--line); }
.dock-form { display: flex; flex-direction: column; gap: 18px; }
.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); margin-bottom: 10px; padding: 0; }

.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chip { position: relative; }
.chip input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip > span {
  display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 10px;
  background: transparent; border: 1px solid var(--line); font: 500 17px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--text);
  font-variant-numeric: lining-nums; transition: background .15s, color .15s;
}
.chip:hover > span { background: var(--chip); }
.chip input:checked + span { background: var(--chip-on); border-color: var(--chip-on); color: var(--chip-on-text); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-custom { grid-column: span 2; }
.custom-wrap { gap: 1px; padding: 0 8px; }
.custom-wrap input {
  width: 100%; min-width: 0; background: transparent; border: 0; color: inherit; font: 500 17px/1 var(--mono); font-variant-numeric: tabular-nums;
  padding: 0; position: relative; z-index: 1; text-align: left; -moz-appearance: textfield;
}
.custom-wrap input::placeholder { color: var(--text-3); font: 400 16px var(--sans); }
.chip input:checked + span .custom-wrap input::placeholder { color: color-mix(in srgb, var(--chip-on-text) 60%, transparent); }
.custom-wrap input:focus { outline: none; }
.custom-wrap input::-webkit-inner-spin-button, .custom-wrap input::-webkit-outer-spin-button { -webkit-appearance: none; }
.chip-custom:focus-within > span { box-shadow: inset 0 0 0 2px var(--focus); }
.hint { margin: 8px 0 0; font-size: 13px; color: var(--text-3); min-height: 1.4em; }
.hint.err { color: var(--error); font-weight: 500; }

.identity { display: flex; flex-direction: column; gap: 8px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; padding: 1px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 9px; font: 500 14px var(--sans); color: var(--text-2); }
.segmented input:checked + span { background: var(--chip); color: var(--text); font-weight: 600; }
.segmented input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -2px; }
.text-input { width: 100%; height: 44px; padding: 0 14px; border-radius: 10px; background: transparent; border: 1px solid var(--line-2); color: var(--text); font: 16px var(--sans); }   /* 16px: iOS zooms into anything smaller */
.text-input:focus { border-color: var(--text); outline: none; box-shadow: 0 0 0 1px var(--text); }
.preview { margin: 8px 0 0; font-size: 13px; color: var(--text-2); }
.preview strong { color: var(--text); font-weight: 600; }

.machine-state { display: flex; align-items: flex-start; gap: 9px; margin: 2px 0 -6px; font-size: 13px; line-height: 1.4; color: var(--text-2); }
.state-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1.5px var(--text); transition: background .4s, box-shadow .4s; }
.machine-state[data-state="free"] .state-dot { background: var(--text); box-shadow: none; }
.machine-state[data-state="busy"] { color: var(--text); }
.machine-state[data-state="busy"] .state-dot { background: #e0594c; box-shadow: 0 0 0 3px rgba(224, 89, 76, .25); animation: live 1.4s ease-in-out infinite; }
.actions { display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; }
.actions-one { grid-template-columns: 1fr; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 16px; border-radius: 10px;
  font: 600 16px/1 var(--sans); cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap;
  transition: filter .15s, background .15s;
}
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn-primary { background: var(--btn); color: var(--btn-text); }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.15); }
:root[data-theme="dark"] .btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(.92); }
.btn-primary[aria-disabled="true"] { background: var(--chip); color: var(--text-3); }
.btn-secondary { background: transparent; color: var(--btn-2-text); border-color: var(--line-2); }
.btn-secondary:hover:not(:disabled) { background: var(--chip); }
.btn-secondary:disabled { opacity: .5; }
.fineprint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-3); }

.outcome { display: flex; flex-direction: column; gap: 12px; }
.outcome-status { margin: 0; font: 600 22px/1.25 var(--serif); font-variation-settings: 'opsz' 28; }
.outcome-status.ok { color: var(--ok); }
.outcome-status.pending { color: var(--warn-text); }
.outcome-detail { margin: 0; font-size: 14px; color: var(--text-2); }

/* ---------- Just burned panel ---------- */
.panel {
  background: var(--page); padding: 22px 0 8px; flex: 1 1 auto; min-height: 140px; overflow-y: auto; display: flex; flex-direction: column;
}
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel h2 { font: 500 30px/1.05 var(--serif); font-variation-settings: 'opsz' 60; letter-spacing: 0; margin: 0; flex: 1; }
.panel-close { width: 36px; height: 36px; border-color: transparent; }
.panel-close svg { width: 18px; height: 18px; }
.panel-sub { margin: 6px 0 0; color: var(--text-3); font-size: 13px; line-height: 1.4; }
/* the burn on now, and the line behind it */
.now-line { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; background: var(--chip); font-size: 13px; color: var(--text); animation: fade-in .3s ease both; }
.now-line .live-dot { flex: none; animation: live 1.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 5px rgba(224, 89, 76, .12); } }
.feed-total { margin: 12px 0 0; font-size: 13px; color: var(--text-2); animation: fade-in .4s ease both; }
.feed-total strong { color: var(--text); font: 500 14px/1 var(--mono); font-variant-numeric: tabular-nums; }
.feed { list-style: none; margin: 10px 0 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.feed li:first-child { border-top: 0; }
.feed li.new { animation: slide-in .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } }
.avatar { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.feed .who { font-size: 15px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.feed .when { display: block; color: var(--text-3); font: 400 12px/1.4 var(--mono); margin-top: 3px; font-variant-numeric: tabular-nums; }
.feed .amt { font: 500 16px/1 var(--mono); font-variant-numeric: tabular-nums; }
/* The empty ledger: hairlines ruled at exactly the height of a burn's row, fading down the
   page, with one quiet line on the first. The same rules show while the ledger loads, so
   loading, empty and the first entry never shift the layout. */
.feed li.feed-empty {
  display: block; position: relative; padding: 0; border-top: 0; min-height: calc(69px * 6);
}
.feed-empty::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 68px, var(--line) 68px 69px);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 100%); mask-image: linear-gradient(to bottom, #000 30%, transparent 100%);
}
.feed-empty-title, .feed-empty-line { margin: 0; animation: fade-in .6s ease both; }
.feed-empty-title { padding-top: 15px; font: italic 400 22px/1.15 var(--serif); font-variation-settings: 'opsz' 28; color: var(--text); }
.feed-empty-line { margin-top: 5px; font-size: 13px; color: var(--text-3); animation-delay: .12s; }
@keyframes fade-in { from { opacity: 0; } }
.feed li.enter { animation: fade-in .5s ease both; }   /* first rows, as the ledger arrives */
.scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 20; }

/* ---------- medium: a narrower column ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; padding-right: 20px; }
  .wm-main { font-size: 38px; }
  .wm-top { font-size: 10px; }
}

/* ---------- phone: stage on top, compact dock, panel as a sheet ---------- */
@media (max-width: 760px) {
  :root { --radius: 18px; }
  .brand-h { top: 14px; left: 16px; }
  .wm-top { font-size: 8.5px; }
  .wm-main { font-size: 28px; margin-top: 3px; background-image: repeating-linear-gradient(135deg, currentColor 0 .022em, transparent .022em .05em); }
  .wm-dot { width: 3px; height: 3px; margin-top: 4px; }
  .tools { top: 8px; right: 6px; gap: 0; }
  /* the stage starts below the notch / status bar, and the sides keep clear of it in landscape */
  .app { grid-template-columns: 1fr; grid-template-rows: minmax(250px, 1fr) auto; gap: 6px; overflow-y: auto;
    padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .stage { grid-column: 1; grid-row: 1; border-radius: 0; margin: 0 calc(-1 * max(14px, env(safe-area-inset-right))) 0 calc(-1 * max(14px, env(safe-area-inset-left))); }
  .side { grid-column: 1; grid-row: 2; display: block; padding: 0; overflow: visible; }
  .dock { padding: 0 0 2px; border-bottom: 0; }
  .dock-form { gap: 10px; }
  .field legend { margin-bottom: 8px; font-size: 12px; }
  .chips { gap: 5px; }
  .chip > span { height: 42px; font-size: 16px; border-radius: 10px; }
  .custom-wrap { padding: 0 6px; }
  .hint { margin-top: 6px; font-size: 13px; min-height: 0; }
  .identity { flex-direction: row; align-items: center; gap: 8px; }
  .identity .segmented { flex: 1 1 60%; }
  .identity .text-input { flex: 1 1 40%; height: 40px; padding: 0 10px; font-size: 16px; }
  .segmented span { height: 40px; font-size: 13px; }
  .preview { margin-top: 6px; font-size: 13px; }
  .btn { height: 46px; }
  .fineprint { font-size: 12px; line-height: 1.4; }
  .machine-state { font-size: 13px; margin: 0 0 -2px; }
  .live-pill { min-height: 42px; font-size: 13px; margin-bottom: 8px; }
  .panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 82dvh; min-height: 0; border-radius: 22px 22px 0 0; z-index: 30; background: var(--card); box-shadow: var(--shadow);
    transform: translateY(105%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); padding: 16px 18px calc(8px + env(safe-area-inset-bottom));
  }
  .app.panel-open .panel { transform: none; }
  .panel::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); margin: 0 auto 12px; }
  .panel h2 { font-size: 26px; }
  .feed li.feed-empty { min-height: calc(69px * 3); }   /* a compact sheet while the ledger is empty */
}
/* short screens with the column layout (landscape phones, small laptops): tighter, essentials first */
@media (min-width: 761px) and (max-height: 600px) {
  .brand-h { top: 12px; left: 16px; }
  .wm-main { font-size: 30px; } .wm-top { font-size: 9px; } .wm-dot { margin-top: 4px; }
  .side { padding-top: 10px; }
  .dock { padding-bottom: 14px; }
  .dock-form { gap: 10px; }
  .hint, .preview, .fineprint, .panel-sub { display: none; }
  .hint.err { display: block; }
  .panel { min-height: 0; padding-top: 14px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .preview { display: none; }
  .hint { display: none; }
  .hint.err { display: block; }
  .fineprint { display: none; }
}

/* ---------- about page ---------- */
body.page-body { overflow: auto; }
.page { max-width: 680px; margin: 0 auto; padding: max(32px, calc(16px + env(safe-area-inset-top))) max(20px, env(safe-area-inset-right)) calc(72px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.page-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 40px; font-size: 14px; }
.page-nav a { color: var(--text-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.page-nav a:hover { color: var(--text); }
.page-brand { margin: 0 0 28px -4px; }
.page-brand .wm-top { font-size: 11px; }
.page-brand .wm-main { font-size: 34px; }
.page h1 { font: 500 clamp(36px, 7vw, 52px)/1.04 var(--serif); font-variation-settings: 'opsz' 96; letter-spacing: 0; margin: 0 0 12px; }
.page h2 { font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2); margin: 40px 0 12px; }
.page p, .page li, .page dd { color: var(--text); max-width: 60ch; font-size: 16px; line-height: 1.6; }
.lede { font-size: 18px !important; color: var(--text-2) !important; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
dl.facts dt { font-weight: 600; font-size: 14px; color: var(--text-2); padding-top: 3px; }
dl.facts dd { margin: 0; }
@media (max-width: 560px) {
  dl.facts { grid-template-columns: 1fr; gap: 2px; }
  dl.facts dd { margin-bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .feed li.new, .feed li.enter, .feed-empty-title, .feed-empty-line, .feed-total { animation: none; }
  .stage::after { animation: none; opacity: .6; }
  .stage canvas { transition-duration: .3s; }
  body, .panel, #lights-btn .bulb-fill, .icon-btn, .btn, .chip > span { transition: none; }
}

/* ---------- payment: Stripe's embedded checkout in a slip of the site's own paper ---------- */
dialog.pay {
  width: min(520px, calc(100vw - 32px)); max-height: min(94dvh, 940px); padding: 22px 22px 14px; border: 0; border-radius: 18px;
  background: #ffffff; color: #181816; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); overflow: auto; overscroll-behavior: contain;
  --text-2: #5c6066; --text-3: #70757c; --chip: #f2f3f5; --focus: #181816;
}
dialog.pay[open] { animation: pay-in .32s cubic-bezier(.2, .8, .2, 1); }
dialog.pay::backdrop { background: rgba(10, 10, 11, .55); backdrop-filter: blur(3px); }
@keyframes pay-in { from { opacity: 0; transform: translateY(14px); } }
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pay-head .icon-btn { margin: -8px -8px 0 0; color: #5c6066; }
.pay-head .icon-btn:hover { background: #f2f3f5; color: #181816; }
.pay-kicker { margin: 0 0 8px; font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #5c6066; }
.pay h2 { margin: 0; font: 500 30px/1.05 var(--serif); font-variation-settings: 'opsz' 60; }
.pay-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: #5c6066; }
.pay-mount { margin-top: 16px; min-height: 440px; }
.pay-msg { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 440px; margin: 0; font-size: 14px; color: #5c6066; text-align: center; }
.pay-msg.err { color: #b42318; font-weight: 500; padding: 0 12px; }
.pay-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: ember 1.6s ease-in-out infinite; }
.pay-climate { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #ecedf0; font: italic 400 17px/1.4 var(--serif); font-variation-settings: 'opsz' 18; color: #181816; text-align: center; }
.pay-climate span { display: block; margin-top: 6px; font: 500 12px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #70757c; }
.pay-foot { margin: 10px 0 0; font-size: 12px; color: #70757c; text-align: center; }
@media (max-width: 760px) {
  dialog.pay { width: 100%; max-width: 100%; margin: auto 0 0; max-height: calc(100dvh - env(safe-area-inset-top) - 10px); border-radius: 20px 20px 0 0; padding: 18px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  dialog.pay[open] { animation-name: sheet-in; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }
  .pay h2 { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.pay[open], .now-line, .now-line .live-dot, .pay-dot, .state-dot { animation: none !important; }
}