/* The site's design system. One dark look: a black page, panels told apart by their fill,
   one cream accent, Instrument Sans for words and IBM Plex Mono for addresses and figures.

   HOW TO USE IT FROM ANOTHER PAGE
   Link this file, put <header class="site-header" id="siteHeader"></header> first in the body
   and <footer class="site-footer" id="siteFooter"></footer> last, and call boot() from
   common.js. boot() fills both from one place. The name and mark come from config.js.

   TOKENS
   Fills      --page (the body)   --panel (a panel)   --raised (a part inside a panel)
              --raised-hover (a raised part under the pointer, the active chip)
              --field (a text input)
   Text       --text   --text-soft   --muted (labels)   --dim (hints, never below 12 px)
   Accent     --accent (cream text)   --accent-fill + --accent-ink (the primary button)
   Lines      --hair (a hairline between rows inside a panel; a panel has no border)
   States     --ok --warn --bad (text)   --ok-fill --warn-fill --bad-fill (the note behind it)
   Type       --font-sans   --font-mono
              --fs-xs 12   --fs-sm 13   --fs-base 16   --fs-md 17   --fs-lg 20   --fs-xl 26
   Shape      --r-panel 16   --r-card 11   --r-control 9   --r-main 14   --r-chip 7
   Motion     --ease-out   --ease-in-out
   Layout     --gutter (side margin)   --header-h
   Older names (--bg, --panel-2, --line, --line-2, --font-display, --font-body, --radius,
   --radius-sm, --radius-lg, --accent-hover, --accent-soft, --ok-soft, --bad-soft) still
   resolve, so a page written for the earlier stylesheet keeps working. New code uses the
   names above.

   COMPONENTS
   .wrap                    the page column, 1280 px wide
   .page-top                a centred page title (h1) with one sentence (p) under it
   .panel  .panel-title     a panel and its title (h2)
   .raised                  a part inside a panel
   .field  .input  .input-wrap .suffix  .help  .error-text     a labelled input
   .btn  .btn-primary  .btn-main (56 px, the one main action)  .btn-sm  .btn-block  .icon-btn
   .halves                  the two-halves switch (Buy / Sell): buttons with aria-pressed
   .seg                     a switch between views or options: buttons with aria-pressed
   .module  .module-head  .module-body  .toggle     a module row with its toggle
   .chip  .chips            a small label, or a pressable chip (button.chip with aria-pressed)
   .tag  .badge             small labels on older pages (same look as .chip)
   .coin-card  .coin-grid   the coin card of Explore and the grid it sits in
   .table  .kv              a table of figures, a list of label and value
   .note  .note.warn  .note.refuse     a quiet note, a warning, a refusal
   .steps                   numbered steps with a state (doing, done, failed)
   .toast                   made by toast() in common.js

   RULES
   No border on a panel. One accent. No gradient anywhere. Shadow on the coin card and on the
   menu only. Every text colour here passes WCAG AA on the fill it is used on (--dim on
   --raised-hover is the lowest, 4.8 to 1). Press feedback is scale(0.97) over 160 ms. Hover
   effects sit inside (hover: hover) and (pointer: fine). */

@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); }

:root {
  --page: #000000;
  --panel: #101216;
  --raised: #16191E;
  --raised-hover: #21242B;
  --field: #090A0E;
  --text: #FFFFFF;
  --text-soft: #F5F5F7;
  --muted: #B7B7B3;
  --dim: #8F8F8B;
  --accent: #F8F0E9;
  --accent-fill: #E1DAD4;
  --accent-fill-hover: #F1EBE5;
  --accent-ink: #151515;
  --hair: rgba(248, 240, 233, 0.1);
  --ok: #72C69D;
  --warn: #E5B578;
  --bad: #F29599;
  --ok-fill: #17261F;
  --warn-fill: #2F2419;
  --bad-fill: #302428;
  --shadow-card: 0 16px 32px rgba(0, 0, 0, 0.32);

  --font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.625rem;

  --r-panel: 16px;
  --r-card: 11px;
  --r-control: 9px;
  --r-main: 14px;
  --r-chip: 7px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --gutter: 16px;
  --header-h: 72px;

  /* older names, kept so pages written for the earlier stylesheet still resolve */
  --bg: var(--field);
  --panel-2: var(--raised);
  --line: var(--hair);
  --line-2: var(--hair);
  --accent-hover: #FFFFFF;
  --accent-soft: rgba(248, 240, 233, 0.1);
  --ok-soft: var(--ok-fill);
  --bad-soft: var(--bad-fill);
  --buy: var(--accent);
  --sell: var(--muted);
  --focus: rgba(248, 240, 233, 0.4);
  --shadow: var(--shadow-card);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --radius: var(--r-control);
  --radius-sm: var(--r-chip);
  --radius-lg: var(--r-panel);
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 24px; --header-h: 88px; } }

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -0.006em;
  color: var(--text);
  /* the page is black with a few faint specks: a small tiled drawing, never a gradient */
  background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='720'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='37' cy='96' r='.8' opacity='.42'/%3E%3Ccircle cx='193' cy='41' r='.6' opacity='.3'/%3E%3Ccircle cx='246' cy='248' r='.9' opacity='.34'/%3E%3Ccircle cx='82' cy='344' r='.6' opacity='.28'/%3E%3Ccircle cx='345' cy='131' r='.7' opacity='.36'/%3E%3Ccircle cx='478' cy='96' r='.6' opacity='.26'/%3E%3Ccircle cx='506' cy='305' r='.9' opacity='.4'/%3E%3Ccircle cx='651' cy='214' r='.6' opacity='.3'/%3E%3Ccircle cx='690' cy='37' r='.7' opacity='.32'/%3E%3Ccircle cx='378' cy='430' r='.6' opacity='.28'/%3E%3Ccircle cx='147' cy='533' r='.8' opacity='.38'/%3E%3Ccircle cx='31' cy='652' r='.6' opacity='.26'/%3E%3Ccircle cx='283' cy='618' r='.7' opacity='.32'/%3E%3Ccircle cx='447' cy='574' r='.6' opacity='.28'/%3E%3Ccircle cx='601' cy='486' r='.8' opacity='.36'/%3E%3Ccircle cx='668' cy='655' r='.6' opacity='.3'/%3E%3Ccircle cx='534' cy='694' r='.7' opacity='.26'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
a.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); }
h1 { font-weight: 480; font-size: clamp(2.5rem, 4.4vw + 1rem, 3.5rem); line-height: 1; letter-spacing: -0.045em; }
h2 { font-weight: 600; font-size: var(--fs-xl); line-height: 1.23; letter-spacing: -0.03em; }
h3 { font-weight: 600; font-size: var(--fs-md); line-height: 1.4; letter-spacing: -0.012em; }
h4 { font-weight: 600; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.eyebrow { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: var(--fs-sm); }
.mono, code, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
code { font-size: 0.86em; background: var(--raised); padding: 1px 5px; border-radius: 4px; }
pre { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.5; letter-spacing: 0; background: var(--field); border-radius: var(--r-card); padding: 14px 16px; overflow-x: auto; margin: 0 0 1em; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.buy { color: var(--text); }
.sell { color: var(--muted); }
.accent { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--hair); margin: 28px 0; }
img { max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
svg { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { width: 100%; max-width: calc(1280px + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main { flex: 1 0 auto; padding-top: 8px; padding-bottom: 72px; }
@media (min-width: 768px) { main { padding-bottom: 104px; } }
section { margin: 0 0 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }

/* a page title: centred, one sentence under it. What follows it is panels and columns. */
.page-top, .page-head { text-align: center; padding: 20px 0 28px; }
.page-top p, .page-head p { max-width: 56ch; margin: 14px auto 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.5; }
.page-head .eyebrow { margin-bottom: 10px; }
@media (min-width: 768px) { .page-top, .page-head { padding: 24px 0 40px; } .page-top p, .page-head p { font-size: 1.125rem; } }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: var(--fs-base); }
.back svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--text); } }

[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ---- the shell: header, menu, footer (filled by boot() in common.js) ---- */
.site-header { position: sticky; top: 0; z-index: 40; height: var(--header-h); background: var(--page); flex: none; }
.site-header-in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 var(--gutter); max-width: 1440px; margin: 0 auto; }
@media (min-width: 768px) { .site-header-in { padding: 0 40px; } }
.site-mark { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; color: var(--accent); border-radius: 12px; transition: transform 160ms var(--ease-out); }
.site-mark:active { transform: scale(0.97); }
.site-mark svg, .site-mark img { width: 34px; height: 34px; }
.site-mark img { object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; color: var(--muted); white-space: nowrap; transition: color 150ms ease; }
.site-nav a[aria-current="page"] { color: var(--text); }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--text); } }
/* on a phone the centre keeps one link; the other moves into the menu */
@media (max-width: 639px) { .site-nav a[data-nav="explore"] { display: none; } .site-nav a { color: var(--text); font-size: var(--fs-base); } }
@media (min-width: 640px) { .menu-item.phone-only { display: none; } }
.site-menu { justify-self: end; position: relative; }
.menu-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--accent); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.menu-btn svg { width: 26px; height: 26px; }
.menu-btn:active { transform: scale(0.97); }
.menu-btn[aria-expanded="true"] { background: var(--panel); }
@media (hover: hover) and (pointer: fine) { .menu-btn:hover { background: var(--panel); } }
/* a small mark on the menu button while a wallet is connected */
.menu-btn .on-dot { position: absolute; right: 8px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.menu-sheet { position: absolute; right: 0; top: calc(100% + 6px); width: min(336px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto; background: var(--panel); border-radius: var(--r-panel); padding: 8px; box-shadow: var(--shadow-card); z-index: 60; transform-origin: top right; transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out); }
.menu-sheet.out { opacity: 0; transform: scale(0.97); transition-duration: 110ms; }
@starting-style { .menu-sheet { opacity: 0; transform: scale(0.97); } }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft); font-size: var(--fs-base); font-weight: 550; text-align: left; cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.menu-item:active { transform: scale(0.98); }
.menu-item svg { width: 20px; height: 20px; flex: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .menu-item:hover { background: var(--raised); } }
.menu-item[aria-current="page"] { background: var(--raised); }
.menu-wallet { margin-top: 8px; padding: 4px; background: var(--raised); border-radius: var(--r-card); }
.wallet-btn { color: var(--accent); }
.wallet-btn svg { color: var(--accent); }
.wallet-btn .addr { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-btn.on .addr { font-family: var(--font-mono); letter-spacing: 0; }
.wallet-btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; }
@media (hover: hover) and (pointer: fine) { .wallet-btn:hover { background: var(--raised-hover); } }
.pop { padding-top: 2px; }
.pop .item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 6px 12px; border: 0; background: transparent; border-radius: 8px; text-align: left; cursor: pointer; font-size: var(--fs-base); color: var(--text); transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.pop .item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .pop .item:hover { background: var(--raised-hover); } }
.pop .item img, .pop .item .ph { width: 26px; height: 26px; border-radius: 7px; background: var(--raised-hover); flex: none; }
.pop .item .sub { display: block; font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-mono); letter-spacing: 0; }
.pop .note, .pop .empty-w { font-size: var(--fs-sm); color: var(--muted); padding: 8px 12px 10px; line-height: 1.5; background: none; }
.menu-foot { padding: 10px 12px 6px; font-size: var(--fs-xs); color: var(--muted); }
.menu-foot .mono { color: var(--text-soft); }

.site-footer { flex: none; padding: 40px 0 48px; }
.site-footer-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.foot-brand { display: flex; align-items: center; gap: 12px; color: var(--accent); }
.foot-brand svg, .foot-brand img { width: 34px; height: 34px; object-fit: contain; }
.foot-name { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.foot-label { font-size: var(--fs-xs); line-height: 1.5; font-weight: 620; letter-spacing: -0.005em; color: rgba(248, 240, 233, 0.58); margin-bottom: 4px; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.foot-links a { display: flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 600; color: var(--text-soft); transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } }
.foot-risk p { font-size: 0.875rem; line-height: 1.55; color: var(--text-soft); margin: 6px 0 0; max-width: 44ch; }
@media (min-width: 900px) {
  .site-footer { padding: 56px 0 64px; }
  .site-footer-in { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.6fr); gap: 24px; align-items: start; }
  .foot-links { grid-template-columns: minmax(0, 1fr); }
  .foot-links a { min-height: 32px; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-control);
  background: var(--raised); color: var(--text);
  font-weight: 600; font-size: 0.9375rem; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease, opacity 150ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary, .btn-buy { background: var(--accent-fill); color: var(--accent-ink); }
.btn-sell { background: var(--raised-hover); color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: var(--raised-hover); }
  .btn-primary:hover:not(:disabled), .btn-buy:hover:not(:disabled) { background: var(--accent-fill-hover); }
}
/* a button that sits on the page itself or on a raised part takes the panel fill one step up */
.raised .btn:not(.btn-primary), .module .btn:not(.btn-primary) { background: var(--raised-hover); }
.btn-main, .btn-lg { min-height: 56px; padding: 0 26px; border-radius: var(--r-main); font-size: var(--fs-md); }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); border-radius: 8px; }
@media (pointer: coarse) { .btn-sm { min-height: 44px; } }
.btn-block { width: 100%; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-chip); background: transparent; color: var(--muted); cursor: pointer; transition: transform 160ms var(--ease-out), color 150ms ease, background-color 150ms ease; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .icon-btn:hover { color: var(--text); background: var(--raised-hover); } }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }

/* ---- surfaces ---- */
.panel, .card { background: var(--panel); border-radius: var(--r-panel); padding: 16px; min-width: 0; }
@media (min-width: 768px) { .panel, .card { padding: 20px; } }
.card + .card { margin-top: 12px; }
.panel-title { margin-bottom: 16px; }
.card h3 { margin-bottom: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.card-head h3 { margin: 0; }
.raised { background: var(--raised); border-radius: var(--r-card); padding: 12px; min-width: 0; }
.stack > * + * { margin-top: 12px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 0.875rem; margin: 0; }
.kv dt { color: var(--muted); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; min-width: 0; overflow-wrap: anywhere; }
.kv.lg { font-size: var(--fs-base); }

/* small labels. A pressable chip is a button with aria-pressed. */
.chip, .badge, .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 8px; border: 0; border-radius: var(--r-chip); background: var(--raised); color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 550; line-height: 1; white-space: nowrap; }
.panel .chip, .card .chip, .panel .badge, .card .badge, .panel .tag, .card .tag { background: var(--raised); }
.raised .chip, .raised .tag, .raised .badge { background: var(--raised-hover); color: var(--text-soft); }
.tag { min-height: 22px; padding: 0 6px; font-size: var(--fs-xs); }
.tag.accent, .badge.accent { color: var(--accent); }
.chip.ok, .badge.ok { color: var(--ok); background: var(--ok-fill); }
.chip.bad, .badge.bad { color: var(--bad); background: var(--bad-fill); }
.chip.warn, .badge.warn { color: var(--warn); background: var(--warn-fill); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
button.chip, .chips button, .quick button { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-chip); background: var(--raised); color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 550; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--ease-out), color 150ms ease, background-color 150ms ease; }
button.chip:active, .chips button:active, .quick button:active { transform: scale(0.97); }
button.chip[aria-pressed="true"], .chips button[aria-pressed="true"], .quick button[aria-pressed="true"] { background: var(--raised-hover); color: var(--text); }
@media (hover: hover) and (pointer: fine) { button.chip:hover, .chips button:hover, .quick button:hover { color: var(--text); } }
@media (pointer: coarse) { button.chip, .chips button, .quick button { min-height: 44px; } }
.quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }

/* ---- forms ---- */
.field { display: block; margin-bottom: 14px; min-width: 0; }
.field > span, .label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); margin-bottom: 6px; }
.field > span .dim, .label .dim { color: var(--dim); text-align: right; }
.input, select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-base); letter-spacing: inherit; color: var(--text-soft);
  background: var(--field); border: 0; border-radius: var(--r-control);
  padding: 11px 12px; min-height: 46px; outline: none;
  transition: box-shadow 150ms ease;
}
/* a field on the page itself, outside every panel, takes the panel fill so it can be seen */
.on-page .input, .input.on-page { background: var(--panel); }
textarea { resize: vertical; min-height: 84px; line-height: 1.5; display: block; }
.input:focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.input::placeholder, textarea::placeholder { color: var(--dim); opacity: 1; }
.input.num, .input.mono { font-family: var(--font-mono); letter-spacing: 0; }
.input:user-invalid, .input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--bad); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
select { cursor: pointer; appearance: none; padding-right: 36px; background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7B7B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.input-wrap { position: relative; }
.input-wrap .suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-sm); font-weight: 550; pointer-events: none; }
.input-wrap .input { padding-right: 52px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 130px; }
.help { font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); margin-top: 6px; }
.error-text { color: var(--bad); font-size: var(--fs-sm); line-height: 1.5; margin-top: 6px; }
.error-text:empty { display: none; }
.error-text > span { display: block; }
input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent-fill); background: transparent; cursor: pointer; }
details.more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; font-size: var(--fs-base); font-weight: 550; color: var(--text-soft); list-style: none; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: ""; width: 14px; height: 14px; flex: none; background: no-repeat center / 14px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B7B7B3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transition: transform 160ms var(--ease-out); }
details.more[open] > summary::after { transform: rotate(180deg); }

/* the two-halves switch: the active half takes the cream */
.halves { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--raised); border-radius: var(--r-card); }
.halves button { min-height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--text-soft); font-weight: 600; font-size: var(--fs-base); cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.halves button:active { transform: scale(0.97); }
.halves button[aria-pressed="true"] { background: var(--accent-fill); color: var(--accent-ink); }
/* a switch between views or options: the active one is lifted, not cream */
.seg { display: inline-flex; padding: 4px; border-radius: var(--r-card); background: var(--raised); gap: 4px; }
.panel .seg, .card .seg { background: var(--raised); }
.seg button { flex: 1; min-height: 40px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 550; font-size: 0.9375rem; cursor: pointer; white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.seg button:active { transform: scale(0.97); }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--raised-hover); color: var(--text); }
.seg.full { display: flex; width: 100%; }
.seg.buysell button { min-height: 44px; font-weight: 600; color: var(--text-soft); }
.seg.buysell button[aria-pressed="true"] { background: var(--accent-fill); color: var(--accent-ink); }
@media (pointer: coarse) { .seg button { min-height: 44px; } }

/* ---- a module: a row with a toggle; its fields open under it ---- */
.module { background: var(--raised); border-radius: var(--r-card); }
.module + .module { margin-top: 8px; }
.module-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 60px; padding: 8px 12px; border: 0; border-radius: var(--r-card); background: transparent; color: var(--text-soft); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.module-icon { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.module-icon svg { width: 22px; height: 22px; }
.module[data-on="true"] .module-icon { color: var(--accent); }
.module-name { flex: 1; min-width: 0; font-size: var(--fs-base); font-weight: 550; line-height: 1.25; }
.module-name small { display: block; margin-top: 2px; font-size: var(--fs-xs); font-weight: 400; color: var(--muted); font-family: var(--font-mono); letter-spacing: 0; }
.toggle { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: #6B6F78; transition: background-color 150ms ease; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-soft); transition: transform 160ms var(--ease-out), background-color 150ms ease; }
[aria-checked="true"] > .toggle { background: var(--accent-fill); }
[aria-checked="true"] > .toggle::after { transform: translateX(14px); background: var(--accent-ink); }
.module-body { padding: 2px 12px 12px; }
.module-body .row { align-items: flex-end; }
.module-body .field { margin-bottom: 8px; }
.module-body .field > span { flex-wrap: wrap; }
.module-body .field > span .dim { margin-left: auto; }
.module-body .input { background: var(--field); }
.module-body .help { margin: 0; }
.module-body .error-text { margin: 0 0 6px; }
.module-body .error-text span { display: block; }
.module-group + .module-group { margin-top: 24px; }
.module-group > h3 { margin-bottom: 4px; }
.module-group > p { font-size: var(--fs-sm); color: var(--muted); margin: 0 0 12px; }

/* ---- notes: a quiet one, a warning, a refusal ---- */
.note { background: var(--raised); border-radius: var(--r-card); padding: 12px 14px; color: var(--muted); font-size: 0.875rem; line-height: 1.55; }
.note b, .note strong, .note h3, .note h4 { color: var(--text); }
.note.warn { background: var(--warn-fill); color: var(--text-soft); }
.note.warn > h3, .note.warn > h4, .note.warn > b:first-child { color: var(--warn); }
.note.refuse { background: var(--bad-fill); color: var(--text-soft); }
.note.refuse > h3, .note.refuse > h4, .note.refuse > b:first-child { color: var(--bad); }
.note > h3, .note > h4 { margin-bottom: 6px; font-size: 0.9375rem; }
.note ul { margin: 0; padding: 0; list-style: none; }
.note li { padding: 6px 0; border-top: 1px solid var(--hair); }
.note li:first-child { border-top: 0; padding-top: 0; }
.note li:last-child { padding-bottom: 0; }
.inline-msg { font-size: 0.875rem; color: var(--muted); padding: 12px 0; }

/* ---- the coin card of Explore, and its grid ---- */
.coin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1184px; margin: 0 auto; }
@media (min-width: 640px) { .coin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 900px) { .coin-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .coin-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.coin-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 6px 6px 8px; background: var(--panel); border-radius: var(--r-panel); box-shadow: var(--shadow-card); transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.coin-card:has(.coin-link:active) { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .coin-card:has(.coin-link:hover) { background: var(--raised); } }
.coin-art { display: block; aspect-ratio: 213 / 136; border-radius: 10px; background: var(--raised); overflow: hidden; }
.coin-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coin-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 5px 0; min-width: 0; }
.coin-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.coin-link { font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.025em; line-height: 1.3; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
/* the whole card opens the coin; the link icons sit above that */
.coin-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-panel); }
.coin-pair { flex: none; max-width: 100%; white-space: nowrap; overflow: hidden; font-size: var(--fs-sm); color: var(--muted); }
@media (max-width: 639px) { .coin-pair { display: none; } }
.coin-kind { min-height: 18px; font-size: var(--fs-xs); line-height: 1.5; color: var(--dim); overflow-wrap: anywhere; }
.coin-kind b { font-weight: 500; color: var(--muted); margin-right: 6px; }
.coin-figs { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 6px; }
.coin-figs .l { display: block; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.coin-figs .v { display: block; font-size: var(--fs-md); font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-age { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; padding-bottom: 3px; }
.coin-links { position: relative; z-index: 1; display: flex; gap: 0; margin: 4px 0 -4px -4px; align-items: center; }
.coin-links:empty { display: none; }
.coin-body { padding-bottom: 6px; }
.coin-links a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9px; color: var(--muted); transition: color 150ms ease, transform 160ms var(--ease-out); }
.coin-links a:active { transform: scale(0.94); }
.coin-links svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .coin-links a:hover { color: var(--text); } }

/* ---- Explore: the bar above the grid ---- */
.explore-bar { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 auto 16px; max-width: 1184px; }
.search { position: relative; flex: 0 1 280px; min-width: 0; }
.search svg { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search .input { min-height: 44px; padding: 9px 12px 9px 42px; border-radius: 8px; background: var(--panel); font-size: 0.875rem; }
.explore-bar .btn { background: var(--panel); border-radius: 8px; font-weight: 500; font-size: 0.875rem; padding: 0 14px; }
.explore-bar .btn svg { width: 17px; height: 17px; }
.explore-bar .btn.square { width: 44px; padding: 0; flex: none; }
.explore-bar .btn[aria-expanded="true"] { background: var(--raised-hover); }
@media (hover: hover) and (pointer: fine) { .explore-bar .btn:hover:not(:disabled) { background: var(--raised); } }
@media (max-width: 479px) { .explore-bar .btn .word { display: none; } .explore-bar .btn.filters-btn { width: 44px; padding: 0; flex: none; } .search { flex: 1 1 auto; } .search svg { display: none; } .search .input { padding-left: 12px; font-size: var(--fs-base); } }
.filters { max-width: 1184px; margin: 0 auto 16px; padding: 14px 16px; background: var(--panel); border-radius: var(--r-panel); display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: flex-end; }
.filters .group { min-width: 0; }
.filters .group > span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 8px; }
.filters .status { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--muted); }
.explore-state { max-width: 1184px; margin: 0 auto; padding: 56px 20px; text-align: center; color: var(--muted); background: var(--panel); border-radius: var(--r-panel); }
.explore-state .btn { margin-top: 16px; }
.coin-card.ghost { box-shadow: none; }
.coin-card.ghost .coin-art, .coin-card.ghost .bar { animation: pulse 1.2s ease-in-out infinite; }
.coin-card.ghost .bar { display: block; height: 14px; width: 60%; margin: 4px 0; border-radius: 4px; background: var(--raised); }
.coin-card.ghost .bar.short { width: 34%; }

/* ---- Launch a token: the chooser ---- */
.choose { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (min-width: 900px) { .choose { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; } }
.choose-card { display: flex; flex-direction: column; min-width: 0; background: var(--panel); border-radius: var(--r-panel); overflow: hidden; }
.choose-art { display: flex; align-items: center; justify-content: center; aspect-ratio: 2 / 1; background: var(--page); color: var(--accent); margin: 6px 6px 0; border-radius: 10px; }
.choose-art svg { width: min(46%, 190px); height: auto; }
@media (min-width: 900px) { .choose-art { aspect-ratio: 4 / 3; } }
.choose-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.choose-body p { color: var(--muted); font-size: 0.9375rem; margin: 0 0 8px; max-width: 40ch; }
.choose-body .btn { margin-top: auto; background: var(--raised); }
.choose-body ul { margin: 0 0 10px; padding: 0; list-style: none; font-size: 0.875rem; color: var(--muted); }
.choose-body li { padding: 2px 0; }

/* ---- Module Mode: three columns; one of them at a time under 1000 px ---- */
.studio-tabs { display: flex; width: 100%; max-width: 640px; margin: 0 auto 12px; }
.studio { display: block; }
.studio-col { max-width: 640px; margin: 0 auto; min-width: 0; }
.studio-col > .panel-title { text-align: center; }
@media (max-width: 999px) {
  .studio > .studio-col { display: none; }
  .studio[data-view="modules"] > [data-col="modules"], .studio[data-view="coin"] > [data-col="coin"], .studio[data-view="details"] > [data-col="details"] { display: block; }
}
@media (min-width: 1000px) {
  .studio-tabs { display: none; }
  .studio { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
  .studio-col { max-width: none; margin: 0; }
}
@media (min-width: 1280px) { .studio { grid-template-columns: 348px minmax(0, 1fr) 348px; } }
.presets { margin: 0 0 14px; }
.coin-preview { width: 196px; max-width: 100%; margin: 4px auto 16px; padding: 12px; background: var(--panel); border-radius: 17px; box-shadow: var(--shadow-card); text-align: center; }
.coin-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--page); }
.coin-preview .name { margin-top: 12px; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.03em; line-height: 1.25; overflow-wrap: anywhere; }
.coin-preview .ticker { margin-top: 2px; font-size: var(--fs-xs); color: var(--muted); }
.coin-preview .kind { min-height: 18px; font-size: var(--fs-xs); color: var(--muted); }
.coin-preview .pair { margin-top: 8px; font-size: var(--fs-xs); font-weight: 650; }
.image-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.image-pick .input { flex: 1 1 160px; }
.file-btn { position: relative; overflow: hidden; flex: none; }
.file-btn svg { width: 18px; height: 18px; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.file-btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings > h3 { font-size: 0.9375rem; margin-bottom: 10px; }
.settings .input { background: var(--field); }
.settings > .field:last-child { margin-bottom: 0; }

/* ---- the Collectible and Custom hook pages: what you set, and the review beside it ---- */
.launch-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.launch-set, .launch-review { min-width: 0; }
@media (min-width: 1024px) {
  .launch-cols { grid-template-columns: minmax(0, 1fr) 420px; align-items: start; }
  /* the review sticks beside the form. When it is taller than the window it scrolls inside its
     panel, and the button under it stays in view. */
  .launch-review { position: sticky; top: calc(var(--header-h) + 4px); }
  .launch-review > .panel { display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 12px); }
  .review-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -10px; padding-right: 10px; scrollbar-width: thin; scrollbar-color: var(--raised-hover) transparent; }
  .launch-review .go { flex: none; margin-top: 12px; }
}
/* beside a form the preview is a compact row, so the review keeps the room */
.launch-review .coin-preview { width: auto; margin: 0 0 16px; padding: 10px; background: var(--raised); box-shadow: none; text-align: left; display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; align-items: center; border-radius: var(--r-card); }
.launch-review .coin-preview img { grid-row: 1 / span 4; width: 72px; border-radius: 8px; }
.launch-review .coin-preview .name { margin-top: 0; font-size: var(--fs-md); }
.launch-review .coin-preview .pair { margin-top: 2px; }
.launch-review .coin-preview .kind:empty { display: none; }
.check-lines { margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.check-lines li { padding: 6px 0; border-top: 1px solid var(--hair); }
.check-lines li:first-child { border-top: 0; }
.hook-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .hook-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hook-option { display: block; width: 100%; min-height: 60px; padding: 12px; border: 0; border-radius: var(--r-card); background: var(--raised); color: var(--text-soft); text-align: left; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease; }
.hook-option:active { transform: scale(0.98); }
.hook-option b { display: block; font-size: var(--fs-base); font-weight: 600; }
.hook-option span { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.45; color: var(--muted); }
.hook-option .mono { font-size: var(--fs-xs); }
.hook-option[aria-pressed="true"] { background: var(--raised-hover); box-shadow: inset 0 0 0 2px var(--accent-fill); }
@media (hover: hover) and (pointer: fine) { .hook-option:hover { background: var(--raised-hover); } }
.hook-body > h3 { margin-bottom: 4px; }
.hook-body > p { color: var(--muted); font-size: 0.875rem; }

/* ---- the review: what a buy and a sell pay, the first buy, the lock, the cost ---- */
.review { container-type: inline-size; }
.review-sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@container (min-width: 440px) { .review-sides { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.review h4 { margin: 0 0 10px; }
.kv.fees { gap: 8px 0; }
.kv.fees dd { padding-left: 16px; }
.kv.fees dt { white-space: normal; color: var(--text-soft); }
.kv.fees dt .to { display: block; font-size: var(--fs-xs); color: var(--muted); }
.kv.fees .sum { border-top: 1px solid var(--hair); padding-top: 8px; font-weight: 600; color: var(--text); }
#revNote { margin-top: 14px; }
#revNote .help { margin: 0 0 6px; }
#revNote:empty, #rentNote:empty, #devBuyNote:empty, #revFirstNote:empty { display: none; }
.review-part { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.review .kv { grid-template-columns: minmax(38%, 1fr) minmax(0, auto); }
.review .kv dt { white-space: normal; }
.total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-weight: 600; }
.total .v { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-md); }
.go { margin-top: 16px; }
.go-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 0.875rem; color: var(--muted); }
.go-total .v { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-base); font-weight: 600; color: var(--text); white-space: nowrap; }
/* beside a form the total sits right under the list of costs: the list does not repeat it */
.launch-review .review .total { display: none; }
.go .steps { margin-bottom: 14px; }
.steps { margin: 0; padding: 0; list-style: none; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 0.875rem; line-height: 1.5; }
.steps .n { width: 24px; height: 24px; border-radius: 50%; background: var(--raised-hover); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-xs); flex: none; }
.steps li.doing .n { background: var(--accent-fill); color: var(--accent-ink); }
.steps li.done .n { background: var(--ok); color: var(--accent-ink); }
.steps li.failed .n { background: var(--bad); color: var(--accent-ink); }
.steps .d { color: var(--muted); }
.tx-result { margin-top: 12px; font-size: 0.875rem; }
.tx-result:empty { display: none; }
.summary { background: var(--raised); border-radius: var(--r-card); padding: 14px 16px; }
.summary .kv dd { color: var(--text); }
.verdict-box { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-card); background: var(--raised); font-size: 0.875rem; overflow-wrap: anywhere; }
.verdict-box .verdict { font-weight: 600; margin-bottom: 6px; }
/* The hook's own settings on the Custom hook page (built by workshop-lib.js): what a hook's
   descriptor and the guard on its setup say keep the status colours. */
#customSetup p.error-text { color: var(--bad); }
#customSetup p.ok { color: var(--ok); }
#customSetup .setup-fields { margin-top: 4px; }
#customSetup .verdict-box, #customVerdict .verdict-box { margin-top: 0; }
#customVerdict:not(:empty), #customSetup:not([hidden]) { margin-bottom: 12px; }

/* ==== the pages that are not rebuilt on the parts above yet (coin, pool, hook checker, docs,
        the workshop). Their own classes, on the same tokens. ==== */

/* a choice between a few options, each a label around a radio */
.choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 640px) { .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice { display: block; position: relative; border-radius: var(--r-card); padding: 12px 14px; background: var(--raised); cursor: pointer; transition: background-color 150ms ease, transform 160ms var(--ease-out); }
.choice:active { transform: scale(0.99); }
.choice > input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(> input[type="radio"]:checked) { background: var(--raised-hover); box-shadow: inset 0 0 0 2px var(--accent-fill); }
.choice:has(> input[type="radio"]:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice .title { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.choice p { color: var(--muted); font-size: var(--fs-sm); margin: 4px 0 0; }
.choice.wide { grid-column: 1 / -1; }
.fee-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fee-choices .choice { padding: 9px 10px; text-align: center; }
.fee-choices .choice .title { justify-content: center; font-family: var(--font-mono); letter-spacing: 0; font-size: 0.9375rem; }
.fee-choices .choice p { font-size: var(--fs-xs); margin-top: 2px; }

/* the sliders of the collectible art editor */
.rg-field { margin-bottom: 14px; }
.rg-field .label { margin-bottom: 4px; }
.rg-field .label output { color: var(--text-soft); }

/* collectible pieces */
.piece-img { display: block; border-radius: 8px; image-rendering: pixelated; background: var(--raised); }
.pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.piece { min-width: 0; }
.piece .piece-img { width: 100%; height: auto; aspect-ratio: 1; }
.piece .n { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-xs); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0; font-size: 11px; min-width: 0; }
.piece .meta .dim { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.piece-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.piece-strip .piece-img { width: 100%; height: auto; aspect-ratio: 1; }
.art-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 4px 0 14px; }
@media (min-width: 720px) { .art-editor.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 20px; } }
.art-sliders .rg-field { margin-bottom: 6px; }
.art-preview { display: grid; gap: 10px; justify-items: start; }
.art-preview .piece-strip { width: 100%; }
.earn-line { margin-top: 10px; font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-sm); color: var(--accent); }
.earn-line .sub { margin-top: 4px; font-family: var(--font-sans); color: var(--muted); }
.mine-status { font-size: var(--fs-sm); color: var(--accent); margin: 0 0 12px; }
.piece.blank .blank-img { width: 100%; aspect-ratio: 1; box-shadow: inset 0 0 0 1px var(--hair); background: transparent; }
.piece.blank .n { color: var(--muted); }
.blank-img.pulsing { animation: pulse 1.2s ease-in-out infinite; }
.mine-peg { font-size: var(--fs-sm); margin: 0 0 12px; }
.mine-peg .over { color: var(--bad); }
.piece.own { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; transition: transform 160ms var(--ease-out); }
.piece.own:active { transform: scale(0.97); }
.piece.own .piece-frame, .piece.own .n { display: block; }
.piece-frame { position: relative; }
.piece.own[aria-pressed="true"] .piece-img { box-shadow: 0 0 0 2px var(--accent-fill); }
.piece .pos, .piece .ribbon { position: absolute; left: 6px; padding: 0 5px; border-radius: 5px; background: var(--field); font-family: var(--font-mono); letter-spacing: 0; font-size: 11px; line-height: 18px; white-space: nowrap; }
.piece .pos { top: 6px; min-width: 20px; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; }
.piece .ribbon { bottom: 6px; color: var(--accent); }
.piece.burns .piece-img, .piece.blank.burns .blank-img { box-shadow: 0 0 0 2px var(--bad); }
.piece.burns .ribbon { color: var(--bad); }
.pieces.mine { grid-auto-flow: row dense; }
.pieces-more { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.piece-panel { grid-column: 1 / -1; min-width: 0; padding: 14px 16px; background: var(--raised); border-radius: var(--r-card); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style { .piece-panel.in { opacity: 0; transform: translateY(4px); } }
.pp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pp-head .mono { font-weight: 500; }
.piece-panel .lock { font-size: var(--fs-sm); margin: 0 0 10px; }
.pp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.send-row { display: flex; gap: 8px; margin-top: 14px; }
.send-row .input { flex: 1; min-width: 0; }
.earn-line.cost { color: var(--bad); }
.earn-line.cost:empty { display: none; }
.mine-send { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); container-type: inline-size; }
.mine-send h4 { margin-bottom: 10px; }
.send-coins { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 8px; }
@container (max-width: 600px) { .send-coins { grid-template-columns: minmax(0, 1fr) auto; } .send-coins .coin-to { grid-column: 1 / -1; } }
.mine-send .earn-line:empty, .mine-send .tx-result:empty { display: none; }
.mine-upkeep { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: var(--fs-sm); color: var(--muted); }
.mine-upkeep > div { flex: 1 1 260px; min-width: 0; }
.tx-result .burned { margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0; color: var(--muted); }
.confirm-line { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-card); font-size: var(--fs-sm); background: var(--bad-fill); color: var(--text-soft); }
.confirm-line .btn { margin-top: 8px; background: var(--raised-hover); }
.confirm-line .confirm-acts .btn { margin-top: 0; }

/* lists in rows: tabs, a toolbar, a table of coins or hooks */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 550; cursor: pointer; white-space: nowrap; transition: color 150ms ease, background-color 150ms ease; }
.tabs button[aria-selected="true"] { color: var(--text); background: var(--raised); }
.tabs button .n { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-xs); color: var(--muted); margin-left: 6px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .input { max-width: 300px; min-height: 44px; background: var(--panel); }
.tb-status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--muted); }
.table-wrap { border-radius: var(--r-panel); background: var(--panel); overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.grid th { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); text-align: left; padding: 14px 14px 10px; white-space: nowrap; }
.grid td { padding: 10px 14px; border-top: 1px solid var(--hair); vertical-align: middle; }
.grid .r { text-align: right; }
.grid td.r, .grid td.num { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid .act { white-space: nowrap; text-align: right; }
.grid .act .btn-sm + .btn-sm { margin-left: 6px; }
.coin-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coin-cell .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.coin-cell .sym { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-xs); margin-left: 6px; }
.coin-cell .sub { color: var(--muted); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: 0; }
.avatar { width: 32px; height: 32px; border-radius: 8px; flex: none; object-fit: cover; background: var(--raised); }
.avatar.lg { width: 56px; height: 56px; border-radius: 11px; }
.ext { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-sm); }
.ext svg { width: 11px; height: 11px; }
@media (hover: hover) and (pointer: fine) { .ext:hover { text-decoration: underline; text-underline-offset: 3px; } .tabs button:hover { color: var(--text); } }
.skeleton { display: inline-block; height: 0.9em; width: 4em; border-radius: 4px; background: var(--raised-hover); animation: pulse 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty .btn { margin-top: 14px; }
@media (max-width: 767px) {
  .grid thead { display: none; }
  .grid, .grid tbody, .grid tr, .grid td { display: block; }
  .grid tr { padding: 12px 14px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .grid tr:first-child { border-top: 0; }
  .grid td { padding: 0; border: 0; }
  .grid td.full, .grid td.act { grid-column: 1 / -1; }
  .grid td.r { text-align: left; }
  .grid td[data-label]::before { content: attr(data-label); display: block; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 2px; font-family: var(--font-sans); }
  .grid .act { text-align: left; }
  .tb-status { margin-left: 0; }
}

/* the coin page */
.coin-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.coin-main, .coin-side, .layout-doc > * { min-width: 0; }
@media (min-width: 1024px) { .coin-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } .coin-side { position: sticky; top: calc(var(--header-h) + 4px); max-height: calc(100vh - var(--header-h) - 12px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--raised-hover) transparent; } }
@media (max-width: 1023px) { .coin-side { order: -1; } }
.coin-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.coin-head h1 { font-size: clamp(1.6rem, 2.8vw, 2.1rem); font-weight: 650; line-height: 1.05; letter-spacing: -0.035em; }
.coin-head .sym { font-weight: 400; color: var(--muted); font-size: var(--fs-md); margin-left: 10px; letter-spacing: 0; }
.coin-head .price { margin-left: auto; text-align: right; }
.coin-head .price .v { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.coin-head .price .l { font-size: var(--fs-xs); color: var(--muted); }
.head-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.addr-row { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); margin-bottom: 14px; align-items: center; }
.addr { display: inline-flex; align-items: center; gap: 4px; }
.addr .mono { color: var(--text-soft); }
.addr .label { margin: 0; color: var(--muted); }
.ext-links { display: flex; gap: 4px; align-items: center; }
.ext-links a { color: var(--muted); font-size: var(--fs-sm); padding: 6px 8px; border-radius: 6px; min-height: 32px; display: inline-flex; align-items: center; transition: color 150ms ease; }
@media (hover: hover) and (pointer: fine) { .ext-links a:hover { color: var(--text); } }
.live-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border-radius: var(--r-panel); padding: 12px 16px; margin-bottom: 16px; }
.live-row .live { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: -0.01em; }
.live-row .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.live-row .mint { display: inline-flex; align-items: center; gap: 2px; font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-sm); color: var(--muted); }
.live-row .acts { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 640px) { .live-row .acts { margin-left: 0; width: 100%; } .live-row .acts .btn { flex: 1; } }
.chart-wrap { position: relative; height: 340px; }
.chart { height: 100%; }
.chart-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.chart-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: var(--fs-sm); pointer-events: none; }
@media (max-width: 640px) { .chart-wrap { height: 260px; } }

.hook-card .kind { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.hook-card .kind h3 { margin: 0; }
.hook-card .sentences, .pick-panel .sentences { margin: 0 0 12px; padding: 0; list-style: none; }
.hook-card .sentences li, .pick-panel .sentences li { padding: 7px 0; border-top: 1px solid var(--hair); font-size: 0.875rem; }
.hook-card .sentences li:first-child, .pick-panel .sentences li:first-child { border-top: 0; }
.hook-card .status { font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 8px; align-items: flex-start; }
.hook-card .status .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 7px; background: var(--muted); }
.hook-card .status.frozen .dot { background: var(--ok); }
.hook-card .status.platform .dot { background: var(--accent); }
.hook-card .params, .hook-act, .wrapped, .hook-admin, .watch { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair); }
.hook-run { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.hook-run > span { flex: 1 1 200px; min-width: 0; }
.hook-act, .wrapped, .watch { font-size: var(--fs-sm); }
.hook-act-v { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hook-act-v b { font-weight: 500; color: var(--text); text-align: right; }
.hook-act-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 8px; }
.hook-act-row > span { flex: 1 1 0; min-width: 0; }
.hook-act-row .btn { flex: none; }
.hook-admin h4 { margin-bottom: 10px; }
.hook-admin .field { margin-bottom: 0; }
.hook-admin-acts, .confirm-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.watch .score { font-weight: 600; text-transform: capitalize; }
.watch ul { margin: 8px 0 0; padding-left: 1.1em; color: var(--muted); }

.trade .out { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin: 14px 0; }
.trade .out .v { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.trade .out .l { color: var(--muted); font-size: var(--fs-sm); }
.trade-note { font-size: var(--fs-sm); margin: -4px 0 12px; }
.trade-note:empty { display: none; }
.trade-note > div + div { margin-top: 6px; }
.trade-note .wrapped-note { color: var(--accent); }
.slip { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.slip button { min-height: 32px; padding: 0 9px; border: 0; border-radius: var(--r-chip); background: var(--raised); color: var(--muted); font-size: var(--fs-xs); font-weight: 550; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.slip button[aria-pressed="true"] { color: var(--text); background: var(--raised-hover); }
.slip button:active { transform: scale(0.96); }
.slip input { width: 64px; min-height: 32px; padding: 4px 8px; font-size: var(--fs-xs); border-radius: var(--r-chip); }
@media (pointer: coarse) { .slip button, .slip input { min-height: 44px; } }
.balance { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-xs); color: var(--muted); margin-top: 6px; font-family: var(--font-mono); letter-spacing: 0; }
.balance button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* the Max of the trade card is a tap target on a phone too */
@media (pointer: coarse) { .balance { align-items: center; } .balance button { min-height: 44px; padding: 0 0 0 12px; } }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th, .table td { padding: 9px 10px; text-align: right; border-top: 1px solid var(--hair); white-space: nowrap; font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.table th { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-xs); color: var(--muted); border-top: 0; }
.table th:first-child, .table td:first-child { text-align: left; padding-left: 0; }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table-scroll { overflow-x: auto; }
.table a { color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .table a:hover { color: var(--text); } }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stat .l { font-size: var(--fs-xs); color: var(--muted); }
.stat .v { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; font-size: var(--fs-base); margin-top: 2px; overflow-wrap: anywhere; }

/* a coin's rules on its page */
.switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--text); font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rates { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0 0 12px; }
.rates th { font-weight: 600; font-size: var(--fs-xs); color: var(--muted); text-align: right; padding: 0 0 6px; }
.rates th:first-child, .rates td:first-child { text-align: left; }
.rates td { padding: 6px 0; border-top: 1px solid var(--hair); text-align: right; font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.rates td:first-child { font-family: var(--font-sans); color: var(--muted); }
.rates tr.sum td { color: var(--text); font-weight: 600; }
.rule-blocks { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
@media (min-width: 720px) { .rule-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rule-block { min-width: 0; padding: 14px 0 16px; border-top: 1px solid var(--hair); }
.rule-block h4 { margin-bottom: 10px; }
.rule-block .kv dt { white-space: normal; }
.rule-block .help { margin: 10px 0 0; }
.rule-block .balance { display: grid; gap: 4px; margin-top: 8px; }
.rule-block .balance > span { display: flex; justify-content: space-between; gap: 8px; }
@media (pointer: coarse) { .rule-block .balance button { min-height: 32px; padding: 0 6px; } }
.rule-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.rule-acts .input-wrap { flex: 1 1 100%; min-width: 0; }

/* the hook checker's picker */
.pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .pick { grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; } }
.pick-list, .pick-panel { min-width: 0; }
.pick-list { display: flex; flex-direction: column; gap: 4px; }
.pick-list .eyebrow { margin: 14px 0 6px 12px; }
.pick-list .eyebrow:first-child { margin-top: 0; }
.pick-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; min-height: 46px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--muted); font-weight: 550; cursor: pointer; transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.pick-list button:active { transform: scale(0.98); }
.pick-list button[aria-pressed="true"] { color: var(--text); background: var(--panel); }
.pick-list button .n { font-family: var(--font-mono); letter-spacing: 0; font-size: var(--fs-xs); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .pick-list button:hover { color: var(--text); } }
@media (max-width: 899px) { .pick-list { flex-direction: row; flex-wrap: wrap; } .pick-list .eyebrow { flex: 1 0 100%; margin: 8px 0 2px 4px; } }
.pick-panel { background: var(--panel); border-radius: var(--r-panel); padding: 20px; min-height: 420px; }
.pick-panel h2 { margin: 6px 0 12px; }
.pick-panel .chips-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.pick-panel .diagram { margin: 6px 0 18px; }
.flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.flow-step { flex: 1 1 150px; min-width: 0; background: var(--raised); border-radius: var(--r-card); padding: 12px 14px; }
.flow-step.hook { box-shadow: inset 0 0 0 2px var(--accent-fill); }
.flow-step b { display: block; font-size: var(--fs-base); font-weight: 600; }
.flow-step span { display: block; margin-top: 2px; font-size: var(--fs-sm); line-height: 1.4; color: var(--muted); }
.flow-arrow { flex: 0 1 auto; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 150px; padding: 0 2px; font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); text-align: center; }
.flow-arrow svg { width: 18px; height: 18px; color: var(--dim); }
.diagram > .help { margin-top: 10px; }
.pick-panel .foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* the docs */
.doc { max-width: 72ch; }
.doc h2 { margin: 40px 0 12px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 24px 0 8px; }
.doc h4 { margin: 22px 0 8px; }
.doc p, .doc li { color: var(--text-soft); }
.doc ul, .doc ol { padding-left: 1.3em; margin: 0 0 1em; }
.doc li { margin-bottom: 6px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin: 0 0 1.2em; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-top: 1px solid var(--hair); vertical-align: top; }
.doc th { font-weight: 600; color: var(--muted); border-top: 0; font-size: var(--fs-xs); }
.doc td code { white-space: nowrap; }
.doc td:first-child, .doc td.bit { white-space: nowrap; }
.doc td.bit { font-family: var(--font-mono); letter-spacing: 0; }
@media (max-width: 640px) { .doc table { display: block; overflow-x: auto; } }
.toc { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--fs-sm); margin: 0 0 28px; padding: 0; list-style: none; }
.toc a { color: var(--muted); min-height: 32px; display: inline-flex; align-items: center; }
@media (hover: hover) and (pointer: fine) { .toc a:hover { color: var(--text); } }
.layout-doc { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 1024px) { .layout-doc { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; } .layout-doc > aside { position: sticky; top: calc(var(--header-h) + 4px); } }

/* ---- the coin page: one large panel (the coin, its figures, the chart, the trade box), then
        one panel per thing the coin has, in a fixed order ---- */
.coin-page .back { margin: 0 0 8px -2px; }
.coin-page #layout > * + * { margin-top: 12px; }
.coin-panels > .panel + .panel { margin-top: 12px; }
@media (min-width: 768px) { .coin-top { padding: 24px; } }
.coin-page .coin-head { display: flex; gap: 16px; align-items: center; flex-wrap: nowrap; margin-bottom: 14px; }
.coin-page .coin-head .avatar.lg { width: 64px; height: 64px; border-radius: var(--r-card); }
.coin-id { min-width: 0; }
.coin-name { display: flex; align-items: center; gap: 2px 12px; flex-wrap: wrap; }
.coin-page .coin-name h1 { font-size: clamp(1.6rem, 2.4vw + 0.6rem, 2.1rem); font-weight: 650; letter-spacing: -0.035em; line-height: 1.15; overflow-wrap: anywhere; }
.coin-page .coin-name h1 .sym { font-weight: 400; color: var(--muted); font-size: var(--fs-md); letter-spacing: -0.01em; margin-left: 10px; white-space: nowrap; }
.head-links { display: inline-flex; margin-left: -8px; }
.head-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 9px; color: var(--muted); transition: color 150ms ease; }
.head-links svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) { .head-links a:hover { color: var(--text); } }
@media (pointer: coarse) { .head-links a { width: 44px; height: 44px; } }
.coin-page .head-tags { margin-top: 6px; }
.coin-desc { margin: 0 0 12px; max-width: 70ch; }
.coin-page .addr-row { gap: 6px 16px; margin-bottom: 4px; }
.copy-addr svg { width: 15px; height: 15px; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 16px 0 20px; }
@media (min-width: 640px) { .figs { display: flex; flex-wrap: wrap; gap: 12px 40px; } }
.fig .l { font-size: var(--fs-sm); color: var(--muted); }
.fig .v { margin-top: 2px; font-size: var(--fs-lg); font-weight: 650; letter-spacing: -0.02em; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coin-top-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 1024px) { .coin-top-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; } }
@media (max-width: 1023px) { .coin-top-grid .trade { order: -1; } }
.coin-chart { min-width: 0; }
.coin-chart .chart-wrap { height: 380px; }
@media (max-width: 640px) { .coin-chart .chart-wrap { height: 260px; } }
.chart-tools .seg button { min-height: 32px; padding: 0 10px; font-size: var(--fs-sm); }
@media (pointer: coarse) { .chart-tools .seg button { min-height: 44px; } }
.coin-page .trade { min-width: 0; }
.coin-page .trade .seg.buysell { margin-bottom: 12px; }
.amount-box { background: var(--raised); border-radius: var(--r-panel); padding: 14px 16px; margin: 0; }
.amount-box .input { background: transparent; font-size: 1.625rem; padding: 6px 76px 6px 0; min-height: 52px; }
.amount-box .input:focus-visible { box-shadow: none; }
.amount-box:focus-within { box-shadow: 0 0 0 2px var(--accent); }
.amount-box .input-wrap .suffix { right: 0; padding: 7px 10px; border-radius: var(--r-control); background: var(--raised-hover); color: var(--text); font-weight: 600; }
.amount-box .quick button { background: var(--raised-hover); }
.coin-page .trade .btn-main { width: 100%; }
.coin-page .trade .btn-sell { background: var(--accent-fill); color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .coin-page .trade .btn-sell:hover:not(:disabled) { background: var(--accent-fill-hover); } }
/* every panel opens with its title, whatever element the script drew it with */
.coin-page .panel > h3:first-child, .coin-page .panel > .card-head h3, .coin-page .panel > h2:first-child { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.23; margin: 0 0 16px; }
.coin-page .panel > .card-head { margin-bottom: 16px; }
.coin-page .panel > .card-head h3, .coin-page .panel > .card-head h2 { margin: 0; }
.coin-page .hook-card .kind { margin-bottom: 12px; }
.coin-page .hook-card .kind h2 { margin: 0; }
.coin-panels .rule-block { border-top: 0; padding-top: 0; }
.coin-panels .rule-blocks:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.coin-panels #ruBurnBlock > h4:first-child { display: none; }
@media (min-width: 720px) { .coin-panels .rule-blocks > .rule-block + .rule-block { padding-left: 32px; box-shadow: inset 1px 0 0 var(--hair); } }
@media (max-width: 719px) { .coin-panels .rule-blocks > .rule-block + .rule-block { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hair); } }

/* ---- the pool page, the hook checker and the docs ---- */
.section-title { font-size: var(--fs-xl); margin: 44px 0 16px; }
.checker-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 900px) { .checker-in { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; } }
.checker .panel-title { margin-bottom: 8px; }
.hooks-doc { margin-top: 44px; }
.doc-panel { padding: 20px; }
@media (min-width: 768px) { .doc-panel { padding: 32px 40px; } }
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.toc-col .toc { margin: 0; gap: 6px; }
.toc-col .toc a { min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--panel); color: var(--muted); transition: color 150ms ease, background-color 150ms ease; }
@media (pointer: coarse) { .toc-col .toc a { min-height: 44px; } }
@media (min-width: 1024px) {
  .docs-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; }
  .toc-col { position: sticky; top: calc(var(--header-h) + 8px); }
  .toc-col .toc { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .toc-col .toc a { display: flex; background: transparent; }
}
@media (hover: hover) and (pointer: fine) { .toc-col .toc a:hover { color: var(--text); background: var(--panel); } }
.pool-page .card > h3:first-child { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.23; margin: 0 0 16px; }
.pool-page .layout-doc > .stack > .card + .card, .pool-page .layout-doc > aside > .card + .card { margin-top: 12px; }

/* ---- the curve: the launch choice, the progress to graduation, the graduated mark ---- */
.start-field { margin-bottom: 12px; }
/* side by side where the column is wide, one above the other in the narrow column of Module Mode */
.choices.start-choices { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.choice.off { opacity: 0.45; cursor: not-allowed; }
.choice.off:active { transform: none; }
.fact .fact-v { font-family: var(--font-mono); letter-spacing: 0; font-variant-numeric: tabular-nums; font-size: var(--fs-base); color: var(--text-soft); }
.settings > .field:has(+ .field[hidden]:last-child) { margin-bottom: 0; }
.start-note { margin-top: 12px; }
.start-note .help { margin: 0 0 6px; }
.start-note .help:last-child { margin-bottom: 0; }
.curve-line { max-width: 560px; }
.coin-page .curve-line { margin: -6px 0 22px; }
.pool-curve { margin: 0 0 22px; }
.curve-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--muted); }
.curve-raised b { color: var(--text); font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-md); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.curve-sold { font-variant-numeric: tabular-nums; }
.curve-bar { height: 6px; margin-top: 8px; border-radius: 3px; background: var(--raised-hover); overflow: hidden; }
.curve-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-fill); transition: width 400ms var(--ease-out); }
.curve-bar.thin { height: 3px; margin-top: 6px; border-radius: 2px; }
.curve-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.curve-done { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.coin-curve { margin-top: 6px; }
.coin-curve-top { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); font-variant-numeric: tabular-nums; }
.curve-mark { font-weight: 600; color: var(--accent); }
.curve-mark.done { color: var(--muted); font-weight: 500; }
.curve-shut { margin: 0 0 12px; }
.trade-note .curve-grad { color: var(--text-soft); }
.tx-result .grad-said { margin-top: 4px; color: var(--text-soft); }
@media (prefers-reduced-motion: reduce) { .curve-bar > span { transition: none; } }

/* ---- toasts ---- */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--raised-hover); color: var(--text); padding: 12px 14px; border-radius: var(--r-card); font-size: 0.875rem; line-height: 1.45; box-shadow: var(--shadow-card); transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out); overflow-wrap: anywhere; cursor: pointer; }
@starting-style { .toast { opacity: 0; transform: translateY(8px); } }
.toast.out { opacity: 0; transform: translateY(8px); transition-duration: 160ms; }
.toast.ok::before, .toast.err::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; background: var(--ok); }
.toast.err::before { background: var(--bad); }
.toast a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .seg button, .halves button, .quick button, .chips button, button.chip, .slip button, .icon-btn, .choice, .pop .item, .menu-item, .menu-btn, .pick-list button, .piece.own, .toggle, .toggle::after, .coin-card, .hook-option, .site-mark { transition-duration: 80ms; }
  .btn:active, .seg button:active, .halves button:active, .quick button:active, .chips button:active, button.chip:active, .icon-btn:active, .choice:active, .pop .item:active, .menu-item:active, .menu-btn:active, .pick-list button:active, .piece.own:active, .hook-option:active, .site-mark:active, .coin-links a:active, .coin-card:has(.coin-link:active) { transform: none; }
  .menu-sheet, .toast, .piece-panel { transition: opacity 160ms ease; }
  .menu-sheet.out, .toast.out { transform: none; }
  @starting-style { .menu-sheet, .toast, .piece-panel.in { transform: none; } }
  .skeleton, .blank-img.pulsing, .coin-card.ghost .coin-art, .coin-card.ghost .bar { animation: none; opacity: 0.7; }
}