/* Pump Phone website, design 3.7 "capsule navigation" (docs/FRONTENDS.md, section 4; the
   numbers: docs/PUMP.md, section 8), its text in the "Amber" draft (owner, 2026-10-16: IBM Plex
   Mono everywhere, labels in capitals) and its colours in the "Mono" theme (owner, 2026-10-16):
   black, white and greys, labels in grey capitals. One page, its three
   sections (Live, Treasury, How it works) scrolling under the capsule at the top, which marks the
   one being read. The accent (green) is for gains only, text only, never a chart mark; losses in
   red; the chart in the labels' grey. No blur, no backdrop-filter.
   Sizes: calc(N * var(--u)) is N px at a 1440x900 window, the drafts' size, and grows and shrinks
   with the window, so any window shows the drafts' proportions (phones: their own draft's px). */

@font-face {
  font-family: "IBM Plex Mono";
  /* site/fonts/ (SIL Open Font License, OFL-IBMPlexMono.txt): Google Fonts' latin and
     latin-ext subsets (accented coin names), weights 400, 500 and 600 */
  src: url("fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  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: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  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: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  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: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-600-latin-ext.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, 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 {
  color-scheme: dark;
  /* the "Mono" theme (owner, 2026-10-16: canvas "Pump Phone color themes", board 5): greys, the
     only colours the gains, the losses and the Live dot. Text on black (WCAG): --text 18.8,
     --text-2 14.9, --sec 9.7, --muted 7.8, --dim 5.8; the labels 12.6 (11.3 on the capsule's
     #111111); --nav 13.4 on the capsule */
  --bg: #000000;
  --text: #f2f2f2;
  --text-2: #d9d9d9;
  --sec: #b0b0b0;
  --muted: #9e9e9e;
  --dim: #868686;
  --nav: #d9d9d9;
  --label: #c8c8c8;
  /* hairlines and rings */
  --line: #262626;
  --line-2: #171717;
  --ring: #262626;
  --pill-line: #3a3a3a;
  --btn-line: #333333;
  --panel: #111111;
  /* gains (11.8 on black), losses (7.5), the chart: its line the labels' grey (12.6), its 10%
     area, the grid, the start line, the crosshair */
  --accent: #3ddc84;
  --loss: #ff6b5f;
  --chart: #c8c8c8;
  --grid: #171717;
  --start: #3a3a3a;
  --cross: #5c5c5c;
  /* the capsule's Live dot while the stream is live (3.9 on its light pill, 4.3 on its dark; the
     draft's #ff5f56 is 2.4 on the light pill) */
  --live: #e5302a;
  /* the labels: grey capitals */
  --label-size: max(11px, calc(11.5 * var(--u)));
  --label-track: 0.1em;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* layout */
  --vh: 100vh;
  /* the unit: the window's height / 900 or its width / 1440, whichever is smaller (0.9 to 2 px) */
  --u: max(0.9px, min(calc(var(--vh) / 900), calc(100vw / 1440), 2px));
  /* the capsule, and the header's row it sits in (8 above and below it) */
  --cap-h: calc(max(44px, 44 * var(--u)) + 12 * var(--u));
  --head-h: calc(var(--cap-h) + 16 * var(--u));
  /* the band the stuck capsule covers: a section scrolled to starts under it */
  --stick-h: var(--head-h);
  --gutter: calc(32 * var(--u));
  /* the phone's screen, width / height (720x1600); site.js follows the video if it differs */
  --ar: 0.45;
  /* the phone's body round the screen, as ai-phone's: black, the bezel as wide all round */
  --bezel: calc(10 * var(--u));
  /* the Live view's phone (its body): the window's height less the header, 14 above it and 24
     below (790 px at 1440x900), unless the words beside it would get less than the drafts'
     columns and gaps (32 + 340 + 72, the phone, 72 + 340 + 32: the phone in the middle, under
     the capsule) */
  --phone-h: max(
    340px,
    min(
      calc(var(--vh) - var(--head-h) - 38 * var(--u)),
      calc(
        (100vw - var(--scrollbar, 0px) - 888 * var(--u) - 2 * var(--bezel)) / var(--ar) +
          2 * var(--bezel)
      )
    )
  );
  --screen-h: calc(var(--phone-h) - 2 * var(--bezel));
  --screen-w: calc(var(--screen-h) * var(--ar));
  /* the screen's corners, 6.8% of its width as ai-phone's: tight, because the stream's status
     bar (ai-phone's look) runs close to the edges, and ai-phone measured that up to 7% keeps the
     clock's first digit whole; the body's follow them one bezel out, so the bezel is as wide
     round the corners as along the sides */
  --screen-r: calc(var(--screen-w) * 0.068);
  --body-r: calc(var(--screen-r) + var(--bezel));
}

@supports (height: 100dvh) {
  :root {
    --vh: 100dvh;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* an always-visible scrollbar (Windows, or a Mac set to show them) takes its width from the
     right edge only; the same width on the left (site.js measures it; overlay scrollbars take
     none) keeps the Live view in the window's middle */
  padding-left: var(--scrollbar, 0px);
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.55;
  /* (the browser's own smoothing, as in the drafts: "antialiased" drew it thinner and greyer) */
  overflow-x: hidden;
}

h1,
h2,
h3,
p,
ol,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

a {
  color: var(--text);
  text-underline-offset: 4px;
}

a:hover {
  color: #ffffff;
}

button {
  font: inherit;
  color: inherit;
}

::selection {
  background: rgba(242, 242, 242, 0.25);
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* a view's heading gets the focus when the view opens: no ring for that */
[tabindex="-1"]:focus {
  outline: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.is-up {
  color: var(--accent);
}

.is-down {
  color: var(--loss);
}

/* ---- the page and its header --------------------------------------------------------------- */

.page {
  position: relative;
  min-height: var(--vh);
  display: flex;
  flex-direction: column;
}

/* the band under the stuck capsule: what scrolls up goes into black there, so nothing shows
   around the capsule (site.js sets --band: 0 at the page's top, 1 once the header has scrolled
   away) */
.page::before {
  content: "";
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--stick-h) + 16 * var(--u));
  background: linear-gradient(#000000 calc(100% - 24 * var(--u)), rgba(0, 0, 0, 0));
  opacity: var(--band, 0);
  pointer-events: none;
}

.top {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  min-height: var(--head-h);
  padding: 0 var(--gutter);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

/* the mark: Clawd (claudeonfon's) holding pump.fun's pill, 24x10 pixels, each a whole number of
   CSS px (2; 3 on big windows) so it stays sharp */
.brand svg {
  flex: none;
  height: 20px;
  height: round(nearest, calc(20 * var(--u)), 10px);
  width: auto;
  aspect-ratio: 12 / 5;
}

/* elsewhere: the token, X and the docs, right of the name, left of the mode (owner, 2026-10-18; their
   addresses: config.js `links`); as written, like everything top right: no capitals (owner) */
.links {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  margin-left: auto;
}

.links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 calc(8 * var(--u));
  color: var(--nav);
  font-size: max(12.5px, calc(13.5 * var(--u)));
  text-decoration: none;
  white-space: nowrap;
}

.links a[href]:hover {
  color: #ffffff;
}

/* the trading mode (its sentence is the tooltip): Paper, Real SOL, Trading off, Halted */
.mode-pill,
.demo-tag {
  padding: calc(3 * var(--u)) calc(10 * var(--u));
  border: 1px solid var(--pill-line);
  border-radius: 4px;
  color: var(--label);
  font-size: max(11.5px, calc(12 * var(--u)));
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: default;
}

.demo-tag {
  border-style: dashed;
  color: var(--muted);
}

.page[data-mode="halted"] .mode-pill {
  color: var(--loss);
  border-color: rgba(255, 138, 122, 0.5);
}

/* ---- the capsule: Live, Wallet, Activity, at the top ---------------------------------------- */

/* in the middle of the header's row (phones: a row of its own under it), and it stays at the top
   while the page scrolls */
.capsule {
  position: sticky;
  top: calc(8 * var(--u));
  z-index: 6;
  align-self: center;
  display: flex;
  gap: calc(4 * var(--u));
  margin: calc((var(--head-h) + var(--cap-h)) / -2) 0 calc((var(--head-h) - var(--cap-h)) / 2);
  padding: calc(6 * var(--u));
  border-radius: 999px;
  background: var(--panel);
  box-shadow:
    0 0 0 1px var(--ring),
    0 10px 30px rgba(0, 0, 0, 0.6);
  font-size: max(12.5px, calc(13 * var(--u)));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.capsule a {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  min-height: max(44px, calc(44 * var(--u)));
  padding: 0 calc(18 * var(--u));
  border-radius: 999px;
  color: var(--nav);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.capsule a:hover {
  color: #ffffff;
}

.capsule a[aria-current="true"] {
  background: var(--text);
  color: #000000;
  font-weight: 600;
}

.capsule a:focus-visible {
  outline-offset: 2px;
}

/* the Live dot, before the word: the stream's own state (live: red; off: gray) */
.live-dot {
  width: max(6px, calc(7 * var(--u)));
  height: max(6px, calc(7 * var(--u)));
  border-radius: 50%;
  background: var(--dim);
}

.page[data-stream="live"] .live-dot {
  background: var(--live);
}

/* ---- Live: the thought, the phone, the numbers (the first screen) --------------------------- */

.sections {
  flex: 1;
  min-width: 0;
}

.live {
  min-height: calc(var(--vh) - var(--head-h));
  display: grid;
  /* (the numbers' column as wide as the thought's, for the phone in the middle; their own block
     stays the drafts' 300 wide) */
  grid-template-columns: minmax(0, calc(340 * var(--u))) auto minmax(0, calc(340 * var(--u)));
  grid-template-areas: "thought player numbers";
  justify-content: center;
  align-content: center;
  align-items: center;
  column-gap: calc(72 * var(--u));
  padding: calc(14 * var(--u)) var(--gutter) calc(24 * var(--u));
}

/* the thought and the numbers, each in a hairline frame (owner, 2026-10-16: draft 7 of the
   canvas "Pump Phone: Claude's thoughts drafts") */
.thought {
  grid-area: thought;
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
  min-width: 0;
  padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  border: 1px solid var(--line);
}

/* Clawd with his pill, then one word for what the AI is doing (owner, 2026-10-16) */
.thought-label {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--label);
  overflow-wrap: anywhere;
}

/* whole CSS px per pixel of the mark, as in the header */
.thought-mark {
  flex: none;
  height: 20px;
  height: round(nearest, calc(20 * var(--u)), 10px);
  width: auto;
  aspect-ratio: 17 / 10;
}

.thought-text {
  font-size: max(17px, calc(22 * var(--u)));
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* the AI's own lines in quotation marks, the opening one hanging (site.js: data-quoted; not
   the site's own words, such as "Be right back.") */
.thought-text[data-quoted] {
  text-indent: -0.6em;
}

.thought-text[data-quoted]::before {
  content: "“";
}

.thought-text[data-quoted]::after {
  content: "”";
}

.numbers {
  grid-area: numbers;
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  min-width: 0;
  padding: calc(18 * var(--u));
  border: 1px solid var(--line);
}

/* each number under its label */
.num {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
}

.num-fig {
  font-size: calc(26 * var(--u));
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.num-pnl .num-fig {
  font-size: calc(44 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.num-cap {
  order: -1;
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--label);
}

/* ---- the player (the stream's one video, wherever it shows) ---------------------------------- */

.player {
  grid-area: player;
  position: relative;
  width: calc(var(--screen-w) + 2 * var(--bezel));
  height: var(--phone-h);
  padding: var(--bezel);
  border-radius: var(--body-r);
  background: #000000;
  /* a hairline round the body: the page is as black as the phone */
  box-shadow: 0 0 0 1px var(--line);
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: var(--screen-r);
  overflow: hidden;
  isolation: isolate;
  background: #0d0d0d;
}

/* a hairline of glass over the display's edge, so no layer's antialiased edge shows */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #000000;
  pointer-events: none;
}

/* the front camera, as ai-phone's, exactly over the one the stream's status bar draws
   (studio/statusbar/make-assets.py: 34.8 px across, centred at (360, 22.35) of the 720x1600
   picture), so it shows over every card too */
.punch-hole {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 1.397%;
  width: 4.833%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 34% 30%, rgba(150, 175, 230, 0.22) 0, rgba(150, 175, 230, 0) 22%),
    radial-gradient(circle at 50% 50%, #0d0e12 0, #050506 38%, #000000 64%);
  box-shadow: 0 0 0 max(0.5px, calc(0.5 * var(--u))) rgba(0, 0, 0, 0.6);
}

.screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #0d0d0d;
}

/* the HLS picture's last frame while WebRTC takes over (site.js, holdStill) */
.screen .still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* loading / offline / break card over the video */
.screen-card {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12%;
  text-align: center;
  background: #0d0d0d;
  transition: opacity 0.4s ease;
}

.screen-card[data-kind="live"] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}

.screen-icon {
  width: calc(var(--screen-w) * 0.2);
  height: calc(var(--screen-w) * 0.2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: calc(var(--screen-w) * 0.06);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}

.screen-icon:empty,
.screen-card[data-kind="loading"] .screen-icon {
  display: none;
}

.screen-icon svg {
  width: 42%;
  height: 42%;
}

.screen-card .spinner {
  display: none;
  margin-bottom: calc(var(--screen-w) * 0.06);
}

.screen-card[data-kind="loading"] .spinner,
.screen-card[data-kind="waiting"] .spinner {
  display: block;
}

.screen-title {
  font-size: max(17px, calc(var(--screen-w) * 0.07));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.screen-card[data-kind="loading"] .screen-title,
.screen-card[data-kind="waiting"] .screen-title {
  font-size: max(14px, calc(var(--screen-w) * 0.046));
  font-weight: 500;
  color: var(--muted);
}

.screen-text {
  margin-top: calc(var(--screen-w) * 0.028);
  font-size: max(13.5px, calc(var(--screen-w) * 0.045));
  line-height: 1.4;
  color: var(--muted);
  text-wrap: balance;
}

.screen-text:empty {
  display: none;
}

/* a break: the phone asleep on its lock screen: the clock and the date (the phone's, site.js
   renderLock), the mark where a notification's icon would be, and "Be right back" where it would
   say how to unlock (on the cards' grey, not an always-on display's black: the bezel shows) */
.lock {
  display: none;
}

.screen-card[data-kind="break"] {
  justify-content: flex-end;
  padding: 0 8% 15%;
}

.screen-card[data-kind="break"] .lock {
  position: absolute;
  top: 19%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lock-time {
  font-size: calc(var(--screen-w) * 0.24);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.lock-date {
  margin-top: calc(var(--screen-w) * 0.04);
  font-size: max(13px, calc(var(--screen-w) * 0.046));
  font-weight: 500;
  color: var(--sec);
}

/* whole CSS px per pixel of the mark, as in the header */
.lock-mark {
  margin-top: calc(var(--screen-w) * 0.09);
  height: 20px;
  height: round(nearest, calc(var(--screen-w) * 0.07), 10px);
  width: auto;
  aspect-ratio: 12 / 5;
}

.screen-card[data-kind="break"] .screen-title {
  font-size: max(11px, calc(var(--screen-w) * 0.036));
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--label);
}

.screen-card[data-kind="break"] .screen-text {
  margin-top: calc(var(--screen-w) * 0.024);
  font-size: max(13px, calc(var(--screen-w) * 0.042));
}

/* a circular progress indicator */
.spinner {
  width: 44px;
  height: 44px;
  color: var(--text);
}

.screen-card .spinner {
  width: max(30px, calc(var(--screen-w) * 0.1));
  height: max(30px, calc(var(--screen-w) * 0.1));
}

.spinner svg {
  width: 100%;
  height: 100%;
  animation: spin 1.6s linear infinite;
}

.spinner circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1 126;
  stroke-dashoffset: 0;
  animation: dash 1.4s ease-in-out infinite;
}

.buffering {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  padding: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
}

.tap-play {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.55);
}

.tap-play-icon {
  width: max(56px, calc(var(--screen-w) * 0.2));
  height: max(56px, calc(var(--screen-w) * 0.2));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #000000;
  background: var(--text);
  transition: transform 0.2s var(--ease);
}

.tap-play:hover .tap-play-icon {
  transform: scale(1.05);
}

.tap-play-icon svg {
  width: 44%;
  height: 44%;
  margin-left: 5%;
}

/* the controls on the picture: only "Jump to live", while the picture is behind live (no sound
   button or volume, no full screen and no "Tap for sound" chip: owner, 2026-10-16; the stream
   plays muted) */
.controls {
  --ctl: max(36px, calc(var(--screen-w) * 0.11));
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--screen-w) * 0.012);
  padding: calc(var(--screen-w) * 0.16) calc(var(--screen-w) * 0.035) calc(var(--screen-w) * 0.045);
  white-space: nowrap;
  color: #ffffff;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.66));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.controls:has(:focus-visible),
.screen.is-behind .controls {
  opacity: 1;
  pointer-events: auto;
}

/* nothing to control without a picture */
.player:not([data-play="live"]) .controls {
  display: none;
}

.controls-gap {
  flex: 1 1 auto;
}

.ctl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--ctl);
  min-width: var(--ctl);
  padding: 0;
  border: 0;
  border-radius: calc(var(--ctl) / 2);
  flex: none;
  cursor: pointer;
  font: inherit;
  font-size: max(13px, calc(var(--screen-w) * 0.04));
  font-weight: 600;
  color: #ffffff;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s;
}

.ctl-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.ctl-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 1px;
}

.ctl-btn .ico {
  width: max(18px, calc(var(--screen-w) * 0.058));
  height: max(18px, calc(var(--screen-w) * 0.058));
}

.ctl-golive {
  padding: 0 calc(var(--screen-w) * 0.042) 0 calc(var(--screen-w) * 0.032);
  background: rgba(255, 255, 255, 0.16);
}

.ctl-golive:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* ---- Treasury --------------------------------------------------------------------------------- */

/* the sections after Live: a hairline over each, and a section scrolled to starts under the
   capsule */
.treasury,
.activity {
  width: 100%;
  max-width: calc(1120 * var(--u));
  margin: 0 auto;
  padding: calc(72 * var(--u)) var(--gutter);
  border-top: 1px solid var(--line-2);
  scroll-margin-top: var(--stick-h);
  display: flex;
  flex-direction: column;
  gap: calc(44 * var(--u));
  font-size: max(13px, calc(14 * var(--u)));
}

/* the heading row (draft 22): Clawd, "Claude's wallet" and, live, the address, one link to
   Solscan; the range buttons on the right */
.t-top {
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--u));
}

.t-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u)) calc(24 * var(--u));
}

.t-title {
  font-size: inherit;
  font-weight: 400;
}

.t-link {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(4 * var(--u)) calc(14 * var(--u));
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

.t-mark {
  flex: none;
  height: 20px;
  height: round(nearest, calc(20 * var(--u)), 10px);
  width: auto;
  aspect-ratio: 12 / 5;
}

/* (and Activity's heading) */
.t-name,
.a-title {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--label);
}

.t-addr {
  font-size: max(13px, calc(13 * var(--u)));
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: var(--pill-line);
  text-underline-offset: 4px;
}

.t-addr::after {
  content: " ↗";
}

a.t-link[href]:hover .t-addr {
  color: #ffffff;
}

.t-notice {
  font-size: max(13px, calc(14 * var(--u)));
  color: var(--loss);
}

.page[data-desk="offline"]:not([data-mode="halted"]) .t-notice {
  color: var(--sec);
}

.t-chart {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
}

/* the sections' own headings: label capitals too */
.t-block h3 {
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--label);
}

.t-buttons {
  margin-left: auto;
  display: flex;
  gap: calc(4 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
}

/* the active range says its name and the change over it ("Last hour −0.4%"), the others their
   short name (draft 22) */
.pill-btn .r-long,
.pill-btn .r-change,
.pill-btn[aria-pressed="true"] .r-short {
  display: none;
}

.pill-btn[aria-pressed="true"] .r-long {
  display: inline;
}

.pill-btn[aria-pressed="true"] .r-change:not(:empty) {
  display: inline;
  margin-left: calc(3 * var(--u));
  font-weight: 600;
}

.pill-btn {
  min-height: max(34px, calc(36 * var(--u)));
  padding: 0 calc(12 * var(--u));
  border: 1px solid var(--btn-line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: max(12px, calc(12.5 * var(--u)));
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.pill-btn[aria-pressed="true"] {
  border-color: var(--text);
}

.pill-btn:hover {
  color: #ffffff;
}

/* the chart: an svg sized in px by site.js, its labels in html (site.js reads the unit off the
   labels' font size: 12 * --u) */
.chart {
  position: relative;
  height: calc(440 * var(--u));
  outline-offset: 4px;
  border-radius: 4px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.chart-svg {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  overflow: visible;
}

.c-grid {
  fill: none;
  stroke: var(--grid);
  stroke-width: 1;
}

.c-start {
  fill: none;
  stroke: var(--start);
  stroke-width: 1;
}

.c-area {
  fill: var(--chart);
  fill-opacity: 0.1;
  stroke: none;
}

.c-line {
  fill: none;
  stroke: var(--chart);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.c-end {
  fill: var(--chart);
  stroke: #000000;
  stroke-width: 2;
}

.chart-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-size: calc(12 * var(--u));
  font-variant-numeric: tabular-nums;
}

.y-tick,
.x-tick,
.start-label,
.end-label {
  position: absolute;
  white-space: nowrap;
  color: var(--dim);
}

.y-tick {
  left: 0;
  font-size: calc(12 * var(--u));
  transform: translateY(-50%);
}

.x-tick {
  bottom: 0;
  font-size: calc(12 * var(--u));
  transform: translateX(-50%);
}

.start-label {
  font-size: calc(11 * var(--u));
  transform: translateY(-120%);
}

.end-label {
  right: 0;
  font-size: calc(13 * var(--u));
  font-weight: 600;
  color: var(--text-2);
  transform: translateY(-50%);
}

.chart-cross,
.chart-dot,
.chart-tip {
  display: none;
  position: absolute;
  pointer-events: none;
}

.chart.is-hover .chart-cross,
.chart.is-hover .chart-dot,
.chart.is-hover .chart-tip {
  display: block;
}

.chart-cross {
  width: 1px;
  background: var(--cross);
}

.chart-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chart);
  box-shadow: 0 0 0 2px #000000;
  transform: translate(-50%, -50%);
}

.chart-tip {
  top: 0;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(10 * var(--u));
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--ring);
  white-space: nowrap;
}

.tip-value {
  display: block;
  font-size: calc(16 * var(--u));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tip-when {
  display: block;
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--sec);
}

/* fewer than two points: the value now, and when the line comes */
.chart-empty {
  display: none;
}

.chart.is-empty {
  height: auto !important;
}

.chart.is-empty .chart-svg,
.chart.is-empty .chart-labels {
  display: none;
}

.chart.is-empty .chart-empty {
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--u));
  padding: calc(40 * var(--u)) 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.chart-empty-value {
  font-size: calc(26 * var(--u));
  font-weight: 600;
}

.chart-empty-value:empty {
  display: none;
}

.chart-empty-text {
  color: var(--muted);
}

/* the holdings (draft 22): a strip, a cell per coin, hairlines between them; the grid reaches past
   the strip's edges so every row's first cell lines up with the heading and its line is cut off */
.t-strip {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.t-strip-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(190 * var(--u)), 1fr));
  margin: -1px calc(-18 * var(--u)) 0 calc(-18 * var(--u) - 1px);
  font-variant-numeric: tabular-nums;
}

.t-strip-list li {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--u));
  min-width: 0;
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.s-top,
.s-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
}

.s-bottom {
  flex-wrap: wrap;
}

.s-top .sym {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.s-top .c-pct {
  flex: none;
  font-weight: 600;
}

.s-bottom .c-value {
  font-size: calc(20 * var(--u));
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.s-bottom .unit,
.s-bottom .c-mc {
  font-size: max(12px, calc(12 * var(--u)));
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
  white-space: nowrap;
}

.s-bottom .c-mc {
  color: var(--dim);
}

/* the holdings' heading */
.t-block h3 {
  margin-bottom: calc(6 * var(--u));
}

.sym {
  font-weight: 600;
  unicode-bidi: isolate;
}

/* ---- Activity: the trades and calls in one feed, newest first (draft 2) ----------------------- */

.activity {
  gap: calc(20 * var(--u));
}

.f-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u)) calc(24 * var(--u));
}

.feed {
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

.feed li {
  display: grid;
  grid-template-columns: calc(104 * var(--u)) calc(56 * var(--u)) minmax(0, 1fr) auto;
  grid-template-areas:
    "time tag main result"
    ". . why why";
  column-gap: calc(16 * var(--u));
  align-items: baseline;
  padding: calc(14 * var(--u)) 0;
  border-bottom: 1px solid var(--line-2);
}

.f-time {
  grid-area: time;
  font-size: max(12px, calc(13 * var(--u)));
  color: var(--dim);
  white-space: nowrap;
}

.f-tag {
  grid-area: tag;
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--accent);
}

[data-side="sell"] .f-tag {
  color: var(--loss);
}

[data-kind="call"] .f-tag {
  color: var(--text-2);
}

.f-main {
  grid-area: main;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.f-notes:not(:empty) {
  margin-left: calc(4 * var(--u));
  font-size: max(12px, calc(13 * var(--u)));
  color: var(--muted);
}

.f-result {
  grid-area: result;
  text-align: right;
  color: var(--muted);
  white-space: nowrap;
}

.f-result.is-up,
.f-result.is-down,
.f-x.is-up,
.f-x.is-down {
  font-weight: 600;
}

.f-result.is-up,
.f-x.is-up {
  color: var(--accent);
}

.f-result.is-down,
.f-x.is-down {
  color: var(--loss);
}

.f-x.is-tracking {
  color: var(--muted);
}

.feed .why {
  grid-area: why;
}

/* a trade that didn't happen reads quieter: a blocked one whole, an expired or failed one its tag */
.feed li[data-status="blocked"],
.feed li[data-status="blocked"] .f-tag,
.feed li[data-status="blocked"] .f-result,
.feed li[data-status="expired"] .f-tag,
.feed li[data-status="failed"] .f-tag {
  color: var(--dim);
}

.feed li[data-status="blocked"] .sym {
  font-weight: 400;
}

.f-more {
  align-self: flex-start;
  margin-top: calc(4 * var(--u));
}

/* the AI's reason, a call's thesis: one line, the rest on a click */
.why {
  display: block;
  width: 100%;
  margin: calc(4 * var(--u)) 0 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: max(12px, calc(12.5 * var(--u)));
  line-height: 1.45;
  text-align: left;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: anywhere;
  unicode-bidi: plaintext;
  cursor: pointer;
}

.why.is-open {
  white-space: normal;
}

.why.fits {
  cursor: default;
}

@media (hover: hover) {
  .why:not(.fits):hover {
    color: var(--sec);
  }
}

/* a new trade or call: a short wash */
.is-new {
  animation: row-new 3.2s ease-out both;
}

@keyframes row-new {
  0%,
  25% {
    background-color: rgba(242, 242, 242, 0.08);
  }
  100% {
    background-color: rgba(242, 242, 242, 0);
  }
}

.t-empty {
  padding: calc(12 * var(--u)) 0;
  color: var(--muted);
  border-bottom: 1px solid var(--line-2);
}

/* ---- the page's foot -------------------------------------------------------------------------- */

.foot {
  padding: calc(18 * var(--u)) var(--gutter) calc(24 * var(--u));
  border-top: 1px solid var(--line-2);
  text-align: center;
  font-size: max(12px, calc(12 * var(--u)));
  color: var(--muted);
}

/* ---- tablets (720 to 1099 px): Live in two columns, the phone and the words beside it ------- */

@media (max-width: 1099px) {
  /* the links closer together, clear of the capsule down to 720 px */
  .links {
    gap: 0;
  }

  .links a {
    padding: 0 6px;
    font-size: 12.5px;
  }

  :root {
    /* the phone: as tall as on a desktop, unless the words beside it would get less than 300
       (32 + the phone + 48 + 300 + 32) */
    --phone-h: max(
      340px,
      min(
        calc(var(--vh) - var(--head-h) - 38 * var(--u)),
        calc(
          (100vw - var(--scrollbar, 0px) - 412 * var(--u) - 2 * var(--bezel)) / var(--ar) +
            2 * var(--bezel)
        )
      )
    );
  }

  .live {
    grid-template-columns: auto minmax(0, calc(360 * var(--u)));
    grid-template-areas:
      "player thought"
      "player numbers";
    align-content: center;
    column-gap: calc(48 * var(--u));
    row-gap: calc(36 * var(--u));
  }

  .thought {
    align-self: end;
  }

  .numbers {
    align-self: start;
    max-width: none;
  }
}

/* ---- phones (under 720 px): everything stacked ------------------------------------------------ */

@media (max-width: 719px) {
  :root {
    /* the phone draft's own px */
    --u: 1px;
    --head-h: 50px;
    --cap-h: 54px;
    /* (the capsule: 8 px from the top, then 10 px of air under it) */
    --stick-h: calc(var(--cap-h) + 18px);
    --gutter: 16px;
    /* the Live phone: the window's width less 16 px gutters, unless that is taller than the room
       on the first screen under the header and the capsule's row (its 54 px and 10 under it): 4
       px under that and 16 above the window's foot. Then smaller, centered. Never under 300 px
       (a phone on its side). Its bezel 7 px, as ai-phone's on a phone */
    --bezel: 7px;
    --phone-h: max(
      300px,
      min(
        calc((100vw - 32px - 2 * var(--bezel)) / var(--ar) + 2 * var(--bezel)),
        calc(var(--vh) - var(--head-h) - var(--cap-h) - 30px)
      )
    );
  }

  @supports (height: 100svh) {
    :root {
      --vh: 100svh;
    }
  }

  .top {
    gap: 12px;
  }

  .mode-pill,
  .demo-tag {
    padding: 2px 9px;
  }

  /* the capsule: its own row under the name and the mode */
  .capsule {
    gap: 2px;
    margin: 0 0 10px;
    padding: 5px;
  }

  .capsule a {
    gap: 7px;
    padding: 0 16px;
  }

  /* the phone first, then the thought, then the numbers */
  .live {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 0 44px;
  }

  .player {
    order: -1;
    flex: none;
    margin: 4px auto 0;
  }

  /* full width (the tablets' end and start alignments would push a short thought right and
     squeeze the numbers) */
  .thought {
    align-self: stretch;
    gap: 10px;
    margin: 22px 16px 0;
    padding: 14px 16px 16px;
  }

  .thought-text {
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -0.01em;
  }

  .numbers {
    align-self: stretch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 12px 16px 0;
    padding: 14px 16px 16px;
  }

  .num-fig,
  .num-pnl .num-fig {
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .num .unit {
    display: none;
  }

  .num-cap {
    font-size: 10.5px;
    letter-spacing: 0.08em;
  }

  /* the Treasury and Activity on a phone */
  .treasury,
  .activity {
    gap: 36px;
    padding: 44px 20px;
  }

  .t-buttons {
    margin-left: 0;
  }

  .chart-tip {
    top: -8px;
    padding: 6px 10px;
  }

  .tip-value {
    font-size: 15px;
  }

  .tip-when {
    font-size: 11px;
  }

  .y-tick,
  .x-tick {
    font-size: 11px;
  }

  .end-label {
    font-size: 12px;
  }

  .t-block h3 {
    margin-bottom: 4px;
  }

  /* the feed on a phone: Buy / Sell / Call, the coin and the time; under them what came of it and
     the reason */
  .activity {
    gap: 16px;
  }

  .feed li {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    grid-template-areas:
      "tag main time"
      ". result result"
      ". why why";
    column-gap: 10px;
    row-gap: 2px;
    padding: 12px 0;
  }

  .f-time {
    font-size: 12px;
  }

  .f-result {
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

}

/* narrow: "Jump to live" as an icon; the label stays for screen readers */
@media (max-width: 360px) {
  .links a {
    padding: 0 4px;
  }

  .ctl-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ctl-golive {
    width: var(--ctl);
    padding: 0;
  }

  .capsule {
    font-size: 12px;
    letter-spacing: 0.02em;
  }

  .capsule a {
    padding: 0 11px;
  }
}

/* under 350 px the name gives way to the links: Clawd alone (the name stays for screen readers) */
@media (max-width: 349px) {
  .brand {
    font-size: 0;
  }
}

/* ---- motion ------------------------------------------------------------------------------ */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1 126;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90 126;
    stroke-dashoffset: -20;
  }
  100% {
    stroke-dasharray: 90 126;
    stroke-dashoffset: -125;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* a still arc instead of a spinning one */
  .spinner circle {
    stroke-dasharray: 80 126;
  }
}