/*
 * site.css: the chalkboard.
 *
 * One wall for a builders' camp: a near-black board, white chalk line art,
 * taped-up index cards, and the red box as the only saturated colour on the
 * page. Tokens are the ones fixed in SPEC.md section 1.
 */
:root {
  --board: #131417;
  --board-2: #1b1d21;
  --board-3: #24272c;
  --chalk: #f4f2ee;
  --chalk-2: #b9b6ad;
  --chalk-3: #7e7c76;
  --line: rgba(244, 242, 238, 0.16);
  --line-2: rgba(244, 242, 238, 0.32);
  --red: #e61e25;
  --red-deep: #b8151b;
  --white: #ffffff;
  --up: #8fe3a3;
  --down: #ff8b8b;

  --display: 'Jost', Futura, 'Century Gothic', 'Trebuchet MS', sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1180px;
  --gutter: 20px;
  --radius: 4px;
  --shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 768px) {
  :root { --gutter: 32px; }
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--board);
  color: var(--chalk);
  font: 400 17px/1.55 var(--display);
  overflow-x: clip;
  min-height: 100vh;
}
@media (max-width: 480px) { body { font-size: 16px; } }
/* chalk dust: three faint smudges, fixed behind everything. It sits at z-index
   -1 so in-flow content paints over it without needing a stacking context of
   its own: the cut-outs (mix-blend-mode) must blend against the real board. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 18% 8%, rgba(255, 255, 255, 0.035), transparent 60%),
    radial-gradient(50% 36% at 86% 68%, rgba(255, 255, 255, 0.028), transparent 60%),
    radial-gradient(40% 30% at 55% 100%, rgba(255, 255, 255, 0.02), transparent 60%);
}
header, main, footer, .marquee { position: relative; }
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--white); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
code, pre, .mono { font-family: var(--mono); }
/* an identifier like YoboFactory.build(params) may break rather than widen the page */
code { font-size: 0.9em; background: var(--board-3); padding: 0.1em 0.35em; border-radius: 3px; overflow-wrap: anywhere; }
pre {
  margin: 0;
  padding: 16px 18px;
  background: var(--board);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-size: 0.86rem;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre;
  color: var(--chalk);
}
pre code { background: none; padding: 0; font-size: inherit; }
hr { border: 0; border-top: 1px dashed var(--line-2); margin: 28px 0; }
::selection { background: var(--red); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--chalk-2); }
.dim { color: var(--chalk-3); }
.up { color: var(--up); }
.down { color: var(--down); }
.small { font-size: 0.9rem; }
.tiny { font-size: 0.78rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; overflow-wrap: anywhere; }
.min0 { min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack { display: grid; gap: 12px; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 36px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }

/* ------------------------------------------------------------- type -- */

.box {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font: italic 800 1em/1.05 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 0.1em 0.35em;
  -webkit-font-smoothing: antialiased;
}
/* the 9vw cap keeps one word of a page title ("MACHINES") narrower than a
   320px screen when the text is zoomed to 200% */
.box-xl { font-size: min(clamp(1.9rem, 5vw, 3rem), 9vw); }
.box-lg { font-size: clamp(1.35rem, 3vw, 2rem); }
.box-md { font-size: 1.1rem; }
.box-sm { font-size: 0.78rem; padding: 0.15em 0.45em; letter-spacing: 0.04em; }
.box-tilt { transform: rotate(-2deg); }
.box-tilt-r { transform: rotate(1.5deg); }

.hand { font-family: var(--hand); font-weight: 500; color: var(--chalk-2); line-height: 1.2; }
.hand-lg { font-size: clamp(1.5rem, 3vw, 2rem); }
.hand-md { font-size: 1.35rem; }
.hand-sm { font-size: 1.1rem; }

.label {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-3);
}
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.big-num { font: 500 clamp(1.5rem, 3vw, 2.1rem)/1.1 var(--mono); letter-spacing: -0.02em; }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--chalk-2); max-width: 46ch; }
.prose { max-width: 66ch; }
.prose p, .prose li { color: var(--chalk-2); }
.prose b, .prose strong { color: var(--chalk); font-weight: 600; }
.prose h3 { margin: 28px 0 10px; font-size: 1.15rem; color: var(--chalk); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 1em; }
.prose li { margin: 0.3em 0; }
.prose a { color: var(--chalk); border-bottom: 1px dashed var(--line-2); }
.prose code { color: var(--chalk); }

/* ---------------------------------------------------------- chalk svg -- */

.sk {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
  overflow: visible;
  vertical-align: -0.15em;
  flex: none;
}
.sk-2 { stroke-width: 2; }
.sk-lg { width: 48px; height: 48px; }
.sk-xl { width: 72px; height: 72px; }
.sk-deco { position: absolute; pointer-events: none; color: var(--chalk-2); }
.sk-underline { display: block; width: 100%; height: 14px; margin-top: 2px; }

/* the chalk cut-outs from the banner: near-black background, lighten blends it away */
.cut { display: block; mix-blend-mode: lighten; opacity: 0.9; pointer-events: none; user-select: none; }

/* ----------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font: 500 0.95rem/1.15 var(--display);
  color: var(--chalk);
  background: var(--board-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  /* A label wraps before it runs past the button: at 200% text zoom on a
     320px phone "Start typing" is wider than the screen as one line. */
  white-space: normal;
  text-align: center;
  transition: transform 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--board-3); color: var(--chalk); border-color: var(--chalk-3); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: var(--shadow); }
.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  font-style: italic;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.btn-red:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.btn-chalk { background: var(--chalk); border-color: var(--chalk); color: var(--board); }
.btn-chalk:hover { background: #fff; color: var(--board); border-color: #fff; }
.btn-ghost { background: transparent; box-shadow: none; border-style: dashed; }
.btn-lg { min-height: 56px; padding: 0 26px; font-size: 1.15rem; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 0.85rem; }
.btn-block { width: 100%; }
.btn-icon { width: 40px; min-height: 40px; padding: 0; }
.btn .sk { font-size: 1.1em; }

/* ------------------------------------------------------------- chips -- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px dashed var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--chalk-2);
  font: 500 0.88rem/1.2 var(--display);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.chip:hover { color: var(--chalk); border-style: solid; }
.chip[aria-pressed="true"], .chip.on { background: var(--chalk); color: var(--board); border-color: var(--chalk); border-style: solid; }
.chip:active { transform: translateY(1px); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font: 600 0.7rem/1 var(--display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  color: var(--chalk-2);
  white-space: nowrap;
}
.tag-up { color: var(--up); border-color: rgba(143, 227, 163, 0.5); }
.tag-down { color: var(--down); border-color: rgba(255, 139, 139, 0.5); }
.tag-red { background: var(--red); border-color: var(--red); color: #fff; font-style: italic; font-weight: 800; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--chalk-3); flex: none; }
.dot-up { background: var(--up); }
.dot-down { background: var(--down); }

/* -------------------------------------------------------------- cards -- */

.card {
  position: relative;
  background: var(--board-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 22px;
  min-width: 0;
}
.card::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 56px;
  height: 14px;
  margin-left: -28px;
  background: rgba(255, 255, 255, 0.14);
  transform: rotate(-2deg);
  pointer-events: none;
}
.card.tape-l::before { left: 26px; margin-left: 0; transform: rotate(-6deg); }
.card.tape-r::before { left: auto; right: 22px; margin-left: 0; transform: rotate(5deg); }
.card.no-tape::before { display: none; }
.card-pad-sm { padding: 16px; }
.card-title { font-size: 1.15rem; font-weight: 600; margin-bottom: 6px; }
.card a.card-link::after { content: ""; position: absolute; inset: 0; }
a.card { display: block; transition: transform 0.15s var(--ease), border-color 0.15s; }
a.card:hover { transform: translateY(-2px); border-color: var(--chalk-3); color: inherit; }

.note {
  padding: 14px 16px;
  border-left: 3px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--chalk-2);
  font-size: 0.95rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.note-red { border-left-color: var(--red); }
.note-up { border-left-color: var(--up); }
.note-down { border-left-color: var(--down); color: var(--down); }

/* ------------------------------------------------------------ inputs -- */

.field { display: block; min-width: 0; }
.field > .label { margin-bottom: 6px; }
.input, .textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  background: var(--board-3);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  color: var(--chalk);
  font: 400 1rem/1.5 var(--display);
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
}
.input::placeholder, .textarea::placeholder { color: var(--chalk-3); }
.input:focus, .textarea:focus { border-style: solid; border-color: var(--chalk-2); outline: none; }
.input.mono { font-family: var(--mono); font-size: 0.95rem; }
.textarea { min-height: 132px; resize: vertical; font-size: 1.2rem; line-height: 1.45; }
.input-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.input-row .input { flex: 1 1 auto; min-width: 0; }
.input-unit {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--chalk-2);
  flex: none;
}
.hint { margin-top: 6px; font-size: 0.86rem; color: var(--chalk-3); }
.hint.over, .over { color: var(--down); }

/* -------------------------------------------------------------- meter -- */

.meter {
  height: 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  overflow: hidden;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(244, 242, 238, 0.07) 6px 8px);
}
.meter > span { display: block; height: 100%; width: 0; background: var(--chalk); transition: width 0.5s var(--ease); }

/* ------------------------------------------------------------- layout -- */

.grid { display: grid; gap: 18px; }
.grid > * { min-width: 0; }
.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* The five number cards size their columns in em, so the row drops columns when
   the text is zoomed instead of letting "GRADUATION" run out of its card. The
   percentage floor caps the count at five (18%) and, on phones, at two (40%). */
.cols-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.5em, 18%)), 1fr)); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .cols-5.keep-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.5em, 40%)), 1fr)); } }

.sec { padding: 72px 0; }
.sec-tight { padding: 44px 0; }
@media (max-width: 767px) { .sec { padding: 48px 0; } .sec-tight { padding: 32px 0; } }
.sec + .sec { border-top: 1px dashed var(--line); }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 30px; }
.sec-head .hand { margin: 0; }
.sec-head .sec-link { margin-left: auto; }

.rv { --d: 0s; }
html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.55s var(--ease) var(--d), transform 0.55s var(--ease) var(--d); }
html.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.js .rv { opacity: 1; transform: none; transition: none; } }

/* ------------------------------------------------------------- header -- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(19, 20, 23, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 14px; min-height: 64px; position: relative; }
.hdr-logo { display: inline-flex; align-items: center; flex: none; }
.hdr-logo img { height: 28px; width: auto; display: block; }
.hdr-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.hdr-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  font-weight: 500;
  color: var(--chalk-2);
  border-bottom: 2px solid transparent;
}
.hdr-nav a:hover { color: var(--chalk); }
.hdr-nav a[aria-current="page"] { color: var(--chalk); border-bottom-color: var(--red); }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.hdr-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--chalk-2); }
.hdr-x:hover { color: var(--chalk); border-style: solid; }
.hdr-x svg { width: 15px; height: 15px; fill: currentColor; }
.hdr-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px dashed var(--line-2); border-radius: var(--radius); color: var(--chalk); }
.hdr-burger .sk { width: 20px; height: 20px; }
.connect-wrap { position: relative; }
.connect-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.token-strip { display: flex; align-items: center; gap: 6px; }
.token-strip:empty { display: none; }
@media (max-width: 859px) {
  .hdr-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 6px var(--gutter) 14px;
    background: var(--board);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  }
  .hdr-nav.open { display: flex; }
  .hdr-nav a { min-height: 48px; font-size: 1.05rem; border-bottom: 1px dashed var(--line); padding: 0 6px; }
  .hdr-nav a[aria-current="page"] { border-bottom: 1px dashed var(--line); color: var(--chalk); }
  .hdr-nav a[aria-current="page"]::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 10px; background: var(--red); }
  .hdr-burger { display: inline-flex; }
}
@media (max-width: 767px) { .hdr-logo img { height: 24px; } }
@media (max-width: 420px) { .hdr-x { display: none; } }
/* the header never wraps its own labels, whatever the zoom */
.hdr .btn { white-space: nowrap; }
/* A connected wallet shows "0xf39F...2266" in the header. At 320px that button
   plus the burger ran 9px past the screen; tighter padding, a smaller dot and a
   22px logo bring the row back to 272px of the 280 available. */
@media (max-width: 360px) {
  .hdr-in { gap: 10px; }
  .hdr-logo img { height: 22px; }
  .hdr .btn { padding: 0 11px; font-size: 0.88rem; }
  .connect-dot { width: 6px; height: 6px; margin-right: 5px; }
}

/* ------------------------------------------------------------ marquee -- */

.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 9px 0; background: var(--board); }
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track span {
  display: inline-flex;
  align-items: center;
  font: italic 700 0.78rem/1.4 var(--display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--chalk-2);
  padding: 0 14px 0 18px;
  white-space: nowrap;
}
.marquee-track span::after { content: "/"; margin-left: 32px; color: var(--chalk-3); }
.marquee-track span.red { color: #fff; background: var(--red); padding: 0 8px; margin: 0 10px; letter-spacing: 0.06em; }
.marquee-track span.red::after { content: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ------------------------------------------------------------- wallet -- */

.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 230px;
  background: var(--board-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 6px;
  z-index: 60;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.menu button, .menu a {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  text-align: left;
  color: var(--chalk);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 3px;
}
.menu button:hover, .menu a:hover { background: var(--board-3); }
.menu img { width: 22px; height: 22px; border-radius: 4px; }
.menu .sk { width: 18px; height: 18px; }
.menu-addr { font-family: var(--mono); font-size: 0.8rem; color: var(--chalk-2); padding: 8px 10px 4px; word-break: break-all; }
.toast {
  margin-top: 8px;
  font-size: 0.86rem;
  color: var(--down);
  max-width: 300px;
}
.toast.note { color: var(--chalk-2); }
.hdr .toast { position: absolute; right: 0; top: calc(100% + 6px); background: var(--board-2); border: 1px dashed var(--line-2); padding: 8px 12px; border-radius: var(--radius); width: max-content; max-width: min(320px, 80vw); z-index: 50; }
.busy { opacity: 0.6; pointer-events: none; }
.snack {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 80;
  background: var(--chalk);
  color: var(--board);
  font-weight: 500;
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  max-width: calc(100vw - 40px);
}

/* ------------------------------------------------------------- sticker -- */

.sticker {
  display: inline-block;
  width: 84px;
  height: 84px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--board);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(-2deg);
  flex: none;
}
.sticker svg, .sticker img { width: 100%; height: 100%; display: block; object-fit: cover; }
.sticker-lg { width: 128px; height: 128px; border-radius: 20px; }
.sticker-sm { width: 56px; height: 56px; border-radius: 9px; transform: rotate(-1.5deg); }
.sticker-xs { width: 40px; height: 40px; border-radius: 7px; transform: none; }
.sticker-r { transform: rotate(2deg); }

/* --------------------------------------------------------------- hero -- */

.hero { padding: 18px 0 0; }
.hero-art { position: relative; margin: 0 calc(-1 * var(--gutter)); overflow: hidden; }
@media (min-width: 1244px) { .hero-art { margin: 0; } }
.hero-art img { display: block; width: 100%; height: auto; }
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--board), transparent 8%, transparent 92%, var(--board)),
    linear-gradient(to bottom, transparent 70%, var(--board));
}
.hero-copy { display: grid; gap: 22px; align-items: end; padding: 12px 0 0; grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 767px) { .hero-copy { grid-template-columns: minmax(0, 1fr); } }
.hero-note { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.hero-note .sk { width: 40px; height: 40px; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-status { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--chalk-3); }

/* ------------------------------------------------------------ builder -- */

.builder { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.builder-form { display: grid; gap: 18px; }
.builder-text { font-size: 1.25rem; min-height: 150px; }
@media (max-width: 480px) { .builder-text { font-size: 1.1rem; } }
.builder-text:focus { border-color: var(--chalk); }
.advanced { display: grid; gap: 14px; padding: 16px; border: 1px dashed var(--line-2); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); }
.advanced-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .advanced-grid { grid-template-columns: minmax(0, 1fr); } }
.toggle-line { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--chalk-2); font-weight: 500; }
.toggle-line .sk { transition: transform 0.15s; }
.toggle-line[aria-expanded="true"] .sk { transform: rotate(180deg); }
.build-action { display: grid; gap: 10px; }
.build-note { font-size: 0.92rem; color: var(--chalk-2); }
.build-note.err { color: var(--down); }
.build-note.ok { color: var(--up); }

.preview { padding: 24px; }
.preview-top { display: flex; align-items: center; gap: 16px; min-width: 0; }
.preview-name { font-size: 1.35rem; font-weight: 600; line-height: 1.15; overflow-wrap: anywhere; }
.preview-sym { font-family: var(--mono); color: var(--chalk-2); font-size: 0.95rem; margin-top: 2px; }
.preview-tag { margin: 14px 0 6px; }
.preview-desc { color: var(--chalk-2); overflow-wrap: anywhere; }
.bp { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.bp h3, .bp h4 { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chalk-3); margin-bottom: 4px; }
.bp p { margin: 0; color: var(--chalk-2); overflow-wrap: anywhere; }
.bp ul, .bp ol { margin: 0; padding-left: 20px; color: var(--chalk-2); }
.bp li { margin: 2px 0; overflow-wrap: anywhere; }
.bp .links a { color: var(--chalk); text-decoration: underline dashed var(--line-2); text-underline-offset: 3px; margin-right: 12px; overflow-wrap: anywhere; }
.bytes { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: 0.76rem; color: var(--chalk-3); }
.bytes .over { color: var(--down); }
.claude-note { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: var(--radius); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 0.9rem; color: var(--chalk-2); }
.claude-note .btn { margin-left: auto; }
.problems { margin: 0; padding-left: 20px; color: var(--down); font-size: 0.9rem; }

/* --------------------------------------------------------------- how -- */

.how { position: relative; }
.how .card { padding-top: 26px; }
.how-step { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.how-step .sk { width: 40px; height: 40px; color: var(--chalk); }
.how-num { font-family: var(--hand); font-size: 1.4rem; color: var(--chalk-3); }
.how-arrow { position: absolute; top: 34px; right: -26px; width: 44px; height: 30px; color: var(--chalk-3); }
@media (max-width: 900px) { .how-arrow { display: none; } }

/* ---------------------------------------------------------------- stats -- */

.stats { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stat { padding: 16px 18px; }
.stat .label { margin-bottom: 6px; }
.stat-value { font: 500 1.7rem/1.1 var(--mono); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.stat-sub { font-size: 0.82rem; color: var(--chalk-3); margin-top: 4px; }

.eco .card { padding: 18px; }
.eco-value { font: 500 clamp(1.25rem, 1.7vw, 1.55rem)/1.1 var(--mono); margin: 6px 0 4px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.eco-sub { font-size: 0.82rem; color: var(--chalk-3); overflow-wrap: anywhere; }

/* ---------------------------------------------------------- build cards -- */

.bgrid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 360px) { .bgrid { grid-template-columns: minmax(0, 1fr); } }
.bcard { display: flex; flex-direction: column; gap: 12px; padding: 20px; color: inherit; }
.bcard-top { display: flex; align-items: center; gap: 14px; min-width: 0; flex-wrap: wrap; }
.bcard-top > .min0 { flex: 1 1 90px; }
.bcard-name { font-weight: 600; font-size: 1.05rem; line-height: 1.2; overflow-wrap: anywhere; }
.bcard-sym { font-family: var(--mono); font-size: 0.82rem; color: var(--chalk-2); overflow-wrap: anywhere; }
.bcard-desc { color: var(--chalk-2); font-size: 0.92rem; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.bcard-foot { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 0.78rem; color: var(--chalk-3); flex-wrap: wrap; }
.bcard .tag { margin-left: auto; }
.empty { text-align: center; padding: 40px 20px; }
.empty .hand { display: block; margin-bottom: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 24px; }
.toolbar .search { flex: 1 1 240px; position: relative; min-width: 0; }
.toolbar .search .input { padding-left: 40px; }
.toolbar .search .sk { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--chalk-3); }
.toolbar .group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.toolbar .label { margin-right: 4px; }
.count { font-family: var(--mono); font-size: 0.82rem; color: var(--chalk-3); margin-left: auto; }
@media (max-width: 600px) { .count { margin-left: 0; width: 100%; } }

/* ------------------------------------------------------------- project -- */

.proj-head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.proj-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.proj-name { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 600; line-height: 1.1; overflow-wrap: anywhere; }
.proj-sym { font-family: var(--mono); font-size: 1.05rem; color: var(--chalk-2); }
.proj-meta { display: flex; flex-wrap: wrap; gap: 12px 18px; font-size: 0.86rem; color: var(--chalk-3); margin-top: 8px; }
.proj-meta .mono { color: var(--chalk-2); }
.ca-list { display: grid; gap: 8px; margin-top: 18px; }
.ca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.86rem; min-width: 0; }
.ca .label { flex: none; width: 4.2em; } /* em: "TOKEN" is 3.9em wide at any zoom */
.ca .addr { font-family: var(--mono); color: var(--chalk-2); word-break: break-all; min-width: 0; flex: 1 1 200px; }
.ca .btn { flex: none; }
.ca-btns { display: flex; gap: 6px; flex: none; }
.proj-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 380px; align-items: start; margin-top: 30px; }
@media (max-width: 960px) { .proj-grid { grid-template-columns: minmax(0, 1fr); } }
/* Four stat cards, sized in em so zoomed text drops to two columns, then one.
   22% caps the row at four columns, 45% at two on phones. */
.proj-stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.4em, 22%)), 1fr)); }
@media (max-width: 720px) { .proj-stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.4em, 45%)), 1fr)); } }
/* beside the 380px trade column a 12-digit price needs 116px; four cards only
   have 97px each until the page is 1140px wide, so run two by two until then */
@media (min-width: 961px) and (max-width: 1140px) { .proj-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proj-stats .card { padding: 14px 16px; }
.proj-stats .stat-value { font-size: clamp(0.95rem, 1.25vw, 1.2rem); letter-spacing: -0.02em; }
.sold-line { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 0.8rem; color: var(--chalk-3); margin-top: 8px; flex-wrap: wrap; }

.trade { padding: 20px; }
/* The whole side column sticks, not the trade card alone: a sticky card slides down over its
   fees sibling inside the column as the page scrolls (seen on the graduated pages). */
.proj-grid > aside { position: sticky; top: 84px; }
@media (max-width: 960px) { .proj-grid > aside { position: static; } }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.tabs button { min-height: 40px; border-radius: 3px; font-weight: 600; color: var(--chalk-2); }
.tabs button[aria-selected="true"] { background: var(--chalk); color: var(--board); }
/* 3.2em of the card's font per button: four across at every phone width, two
   by two once the text is zoomed and "0.5%" no longer fits a quarter of the card */
.pcts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.2em), 1fr)); gap: 6px; }
.pcts button, .slips button { min-height: 40px; border: 1px dashed var(--line-2); border-radius: 3px; font-family: var(--mono); font-size: 0.82rem; color: var(--chalk-2); }
.pcts button:hover, .slips button:hover { color: var(--chalk); border-style: solid; }
.pcts button:disabled { opacity: 0.4; cursor: not-allowed; }
.slips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 3.2em), 1fr)); gap: 6px; align-items: stretch; }
.slips button[aria-pressed="true"] { background: var(--chalk); color: var(--board); border-style: solid; }
.slips .input { min-height: 40px; padding: 4px 8px; text-align: center; font-family: var(--mono); font-size: 0.82rem; }
.estimate { font-family: var(--mono); font-size: 0.82rem; color: var(--chalk-2); min-height: 1.4em; overflow-wrap: anywhere; }
.trade-err { color: var(--down); font-size: 0.88rem; }
.trade-err:empty { display: none; }

.trades { max-height: 460px; overflow: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.tbl th { text-align: left; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--chalk-3); font-weight: 600; padding: 8px 10px; border-bottom: 1px dashed var(--line-2); }
.tbl td { padding: 9px 10px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl .mono { font-size: 0.82rem; }
.tbl-wrap { overflow-x: auto; }
.tbl-addr td { word-break: break-all; }
@media (max-width: 480px) { .tbl { font-size: 0.8rem; } .tbl td, .tbl th { padding: 8px 6px; } }

.fees { display: grid; gap: 10px; }
.fees-num { font: 500 1.4rem/1.1 var(--mono); }

/* -------------------------------------------------------------- agents -- */

/* The Copy button sits beside the code, never on top of it: a long command
   scrolls under an overlaid button and its tail becomes unreadable. */
.snippet { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.snippet pre { flex: 1 1 240px; min-width: 0; }
.snippet .copy { flex: none; }
@media (max-width: 480px) { .snippet pre { flex-basis: 100%; } .snippet .copy { margin-left: auto; } }
.tools { display: grid; gap: 14px; }
.tools > * { min-width: 0; }
.tool { padding: 18px; }
.tool-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tool-name { font-family: var(--mono); font-weight: 500; color: var(--chalk); }
.tool-title { color: var(--chalk-2); }
.tool p { margin: 8px 0 0; color: var(--chalk-2); font-size: 0.94rem; overflow-wrap: anywhere; }
.tool .onchain { margin-top: 8px; font-family: var(--mono); font-size: 0.76rem; color: var(--chalk-3); overflow-wrap: anywhere; }
.tool details { margin-top: 10px; }
.tool summary { cursor: pointer; font-size: 0.86rem; color: var(--chalk-3); min-height: 32px; display: flex; align-items: center; }
.tool pre { margin-top: 8px; font-size: 0.78rem; }
.status-rows { display: grid; gap: 0; }
.status-rows > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 0.9rem; }
.status-rows > div:last-child { border-bottom: 0; }
.status-rows .k { color: var(--chalk-3); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; align-self: center; }
.status-rows .v { font-family: var(--mono); font-size: 0.84rem; color: var(--chalk-2); overflow-wrap: anywhere; }
@media (max-width: 480px) { .status-rows > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ---------------------------------------------------------------- docs -- */

.docs { display: grid; gap: 40px; grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
@media (max-width: 900px) { .docs { grid-template-columns: minmax(0, 1fr); } }
.doc-toc { position: sticky; top: 84px; }
@media (max-width: 900px) { .doc-toc { position: static; } }
.doc-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.doc-toc a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; color: var(--chalk-2); border-left: 2px solid transparent; border-radius: 0 3px 3px 0; }
.doc-toc a:hover { color: var(--chalk); background: rgba(255, 255, 255, 0.03); }
.doc-toc a.active { color: var(--chalk); border-left-color: var(--red); }
@media (max-width: 900px) { .doc-toc ul { display: flex; flex-wrap: wrap; gap: 6px; } .doc-toc a { border: 1px dashed var(--line-2); border-radius: 999px; padding: 0 12px; min-height: 36px; font-size: 0.9rem; } .doc-toc a.active { border-color: var(--chalk); border-style: solid; } }
.doc section { padding: 34px 0; border-top: 1px dashed var(--line); scroll-margin-top: 90px; }
.doc section:first-child { border-top: 0; padding-top: 0; }
.doc h2 { margin-bottom: 16px; }
.doc .tbl th:first-child, .doc .tbl td:first-child { white-space: nowrap; }
@media (max-width: 480px) { .doc .tbl th:first-child, .doc .tbl td:first-child { white-space: normal; } }
.faq details { border-bottom: 1px dashed var(--line); }
.faq summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 10px; font-weight: 500; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sk { color: var(--chalk-3); transition: transform 0.15s; }
.faq details[open] summary .sk { transform: rotate(180deg); }
.faq p { color: var(--chalk-2); margin: 0 0 16px; }

/* -------------------------------------------------------------- footer -- */

.ftr { border-top: 1px dashed var(--line-2); padding: 44px 0 36px; margin-top: 40px; }
.ftr-in { display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
@media (max-width: 700px) { .ftr-in { grid-template-columns: minmax(0, 1fr); } }
.ftr-logo img { height: 22px; width: auto; display: block; }
.ftr-camp { display: inline-block; margin-top: 12px; }
.ftr-camp .sk-underline { color: var(--chalk-3); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.ftr-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; color: var(--chalk-2); }
.ftr-links a:hover { color: var(--chalk); }
.ftr-x { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; color: var(--chalk-2); }
.ftr-x svg { width: 14px; height: 14px; fill: currentColor; }
.ftr-line { margin-top: 18px; font-family: var(--mono); font-size: 0.78rem; color: var(--chalk-3); display: flex; flex-wrap: wrap; gap: 6px 18px; }

/* Inline links that must stay a 40px tap target without changing the line:
   the padding grows the hit box, the negative margin gives the space back. */
.trades .tbl a, .bp .links a, .ca .addr a, .tbl-addr a, a.mono.break { display: inline-block; padding: 12px 0; margin: -12px 0; }
.proj-meta a { display: inline-block; padding: 11px 0; margin: -11px 0; }
.status-rows .v a { display: inline-block; padding: 11px 0; }

/* ----------------------------------------------------------- cut-outs -- */

/* One chalk cut-out from the banner, pinned to the right of a page's title on
   the pages that carry no banner. The .cut lighten blend melts the cut-out's
   black into the board (contrast crushes the webp grain first); the blend
   needs the board itself as backdrop, hence no stacking context on main.
   Phones and tablets skip it. */
.sec-head.has-cut { position: relative; padding-right: 220px; }
.sec-head .cut-deco { position: absolute; right: 0; top: calc(50% - 60px); height: 120px; } /* no transform: it would isolate the blend */
.sec-head .cut-deco img { display: block; height: 100%; width: auto; max-width: 210px; filter: contrast(1.4); }
@media (max-width: 900px) { .sec-head.has-cut { padding-right: 0; } .sec-head .cut-deco { display: none; } }

/* the agents page: numbered steps as a chalk list */
.steps { margin: 0; padding-left: 26px; display: grid; gap: 10px; color: var(--chalk-2); }
.steps li { padding-left: 4px; }
.steps li::marker { font-family: var(--hand); font-size: 1.25rem; color: var(--chalk-3); }

/* ------------------------------------------------------------ helpers -- */

.deploy-note { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--chalk-3); }
.deploy-note .dot { background: var(--chalk-3); }
.deploy-note.live .dot { background: var(--up); }
.copy-ok { color: var(--up); }
.skeleton { color: var(--chalk-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }