/*
  Shared across the three pages: home, app, whitepaper.

  A document, not an app skin. Three earlier drafts were rejected as Zaibatsu
  copies and the fix kept aiming at colour. It was never colour -- a header,
  four tabs, one panel and a box asking for a token id is Zaibatsu's shape, and
  repainting it changes nothing. What was actually wanted is a page that
  explains the thing: numbered sections, prose, rules in tables, worked
  examples with real arithmetic. That structure is what stays.

  Dark, because the light version was painful to read for long. The greys are
  warm and neutral rather than the green-tinted black both neighbours use, and
  lime is kept for the few things that should pull the eye -- primary buttons,
  a working unit's badge, the word the headline turns on.
*/
:root {
  --paper: #17181a;
  --paper-2: #1f2023;
  --card: #1c1d20;
  --ink: #e7e8e4;
  --ink-2: #adaea8;
  --muted: #797b76;
  --line: #2a2c30;
  --line-2: #3b3e44;
  --lime: #ccff00;
  --lime-deep: #b3e600;
  --red: #ff6f60;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body { background: var(--paper); color: var(--ink); font: 15px/1.75 var(--mono); overflow-x: hidden; }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 26px; }

/* ---------- top ---------- */
.top {
  position: sticky; top: 0; z-index: 30;
  background: rgba(23,24,26,.93); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap;
}
.mark {
  display: flex; align-items: center; gap: 10px; font-weight: 700;
  letter-spacing: .04em; text-decoration: none; color: var(--ink);
}
/* The logo is a real unit rather than a shape: the collection is the brand,
   and the artwork is already 32x32 so it needs no scaling to sit here. */
.mark img { width: 24px; height: 24px; display: block; image-rendering: pixelated; }

nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a {
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; padding: 9px 11px;
  border-bottom: 2px solid transparent;
}
nav a:hover { color: var(--ink); }
nav a.on { color: var(--lime); border-bottom-color: var(--lime); }
@media (max-width: 900px) {
  .top .wrap { row-gap: 10px; }
  nav { order: 3; width: 100%; overflow-x: auto; }
  nav a { white-space: nowrap; padding: 8px 9px; }
}

/* ---------- hero ---------- */
.hero { padding: 74px 0 30px; }
.kicker { font-size: 12px; letter-spacing: .2em; color: var(--muted); text-transform: uppercase; }
.hero h1 {
  font-size: clamp(38px, 6.6vw, 70px); line-height: 1.03; letter-spacing: -.02em;
  font-weight: 800; margin: 12px 0 20px;
}
.hero h1 em { font-style: normal; color: var(--lime); }
.hero p { font-size: 17px; color: var(--ink-2); max-width: 62ch; }

/* ---------- sections ---------- */
section { padding-top: 78px; }
.num { font-size: 12px; letter-spacing: .2em; color: var(--muted); }
h2 {
  font-size: clamp(28px, 5vw, 44px); line-height: 1; letter-spacing: -.02em;
  font-weight: 800; margin: 6px 0 8px; text-transform: uppercase;
}
h3 { font-size: 15px; letter-spacing: .04em; margin: 28px 0 10px; }
.sub {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
  margin-bottom: 26px;
}
section p, .prose p { max-width: 66ch; margin-bottom: 18px; color: var(--ink-2); }
section p strong, section p b, .prose strong { color: var(--ink); }
ul, ol { max-width: 66ch; margin: 0 0 18px 22px; color: var(--ink-2); }
li { margin-bottom: 8px; }

/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; margin: 26px 0 8px; font-size: 14px; }
thead th {
  text-align: left; font-weight: 500; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); padding: 12px 16px;
  border-bottom: 1px solid var(--line-2);
}
td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td:first-child { color: var(--ink); }
td:not(:first-child) { color: var(--ink-2); }
.boxed { border: 1px solid var(--line); background: var(--card); }
.boxed table { margin: 0; }
.num-col { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- callouts ---------- */
.calls { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin: 30px 0; }
.calls div { padding: 4px 22px; border-left: 1px solid var(--line-2); }
.calls div:first-child { border-left: none; padding-left: 0; }
.calls b { display: block; font-size: 32px; line-height: 1.1; letter-spacing: -.03em; font-weight: 800; color: var(--ink); }
.calls span { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.calls i { display: block; font-style: normal; font-size: 11px; letter-spacing: .1em; color: var(--line-2); }

/* ---------- demo ---------- */
.demo { border: 1px dashed var(--line-2); padding: 24px; margin: 28px 0; background: var(--card); }
.switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.switch button {
  font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 1px solid var(--line-2);
  padding: 11px 15px; cursor: pointer;
}
.switch button:hover { background: var(--paper-2); }
.switch button[aria-pressed="true"] { background: var(--lime); color: #17181a; border-color: var(--lime); }
.caption { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 18px; line-height: 1.8; max-width: none; }

/* ---------- gallery ---------- */
.gallery { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 20px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.gallery figure { flex: 0 0 132px; }
.frame { border: 1px solid var(--line-2); background: var(--card); }
canvas, .frame img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
figcaption { font-size: 10px; letter-spacing: .06em; margin-top: 8px; color: var(--muted); line-height: 1.6; }

/* ---------- controls ---------- */
button {
  font: 600 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); padding: 14px 20px;
}
button:hover:not(:disabled) { background: #fff; border-color: #fff; }
button:disabled { opacity: .28; cursor: not-allowed; }
button.brand { background: var(--lime); color: #17181a; border-color: var(--lime); }
button.brand:hover:not(:disabled) { background: #d9ff3d; border-color: #d9ff3d; }
button.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
button.ghost:hover:not(:disabled) { background: var(--paper-2); border-color: var(--line-2); }
button.sm { padding: 10px 14px; font-size: 12px; }

.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 13px; }
.meter { height: 6px; background: var(--paper-2); border: 1px solid var(--line); margin: 18px 0 10px; }
.meter i { display: block; height: 100%; width: 0; background: var(--lime); }

/* ---------- unit cards ---------- */
.units { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: 8px; }
.unit { border: 1px solid var(--line-2); background: var(--card); display: flex; flex-direction: column; }
.unit .art canvas, .unit .art img { display: block; width: 100%; image-rendering: pixelated; }
.unit .body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.unit .id { font-weight: 700; font-size: 14px; }
.badge {
  align-self: flex-start; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; border: 1px solid var(--line-2); color: var(--muted);
}
.badge.on { background: var(--lime); border-color: var(--lime); color: #17181a; }
.badge.mid { background: #3a3418; border-color: #6b6130; color: #e8d98a; }
.unit .act { margin-top: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.unit .act button { flex: 1 1 auto; }
.earn { font-size: 12px; font-weight: 700; color: var(--lime-deep); }
.empty { border: 1px dashed var(--line-2); padding: 40px 24px; text-align: center; color: var(--muted); background: var(--card); }

/* ---------- misc ---------- */
.note { border-left: 2px solid var(--lime); padding: 4px 0 4px 18px; margin-top: 22px; font-size: 13px; color: var(--ink-2); word-break: break-word; max-width: 66ch; }
.note.warn { border-left-color: var(--red); color: var(--red); }
code { font-size: 12px; background: var(--paper-2); color: var(--lime-deep); padding: 2px 7px; border: 1px solid var(--line); word-break: break-all; }
a { color: var(--lime-deep); }
footer { margin-top: 90px; padding: 28px 0 80px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--muted); line-height: 2; }
[hidden] { display: none !important; }
.scroll { overflow-x: auto; }