/* =====================================================================
   LOGITRA — the chamber
   Warm paper and ink. Every model is a seat; the one that answers lights up vermilion.
   Instrument Serif for voice, Geist for interface, Geist Mono for data.
   ===================================================================== */
:root {
  --paper: #f3efe6; --paper-2: #ebe5d8; --card: #fbf9f4; --card-2: #f7f3ea;
  --ink: #16140f; --ink-2: #48443b; --ink-3: #847e71; --rule: #ddd5c5; --rule-2: #cbc1ad;
  --red: #f0461b; --red-2: #ff7a4f; --red-ink: #b8330f; --red-wash: #fde6dc;
  --cobalt: #2346e8; --cobalt-wash: #e3e8fd;
  --green: #17875a; --green-wash: #dcf1e6; --bad: #c42b3a;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow: 0 1px 0 rgba(22, 20, 15, .04), 0 12px 32px -18px rgba(22, 20, 15, .25);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--red); color: #fff; }
a { color: inherit; }
img, svg, canvas { display: block; }
code, pre { font-family: var(--mono); }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
.hidden { display: none !important; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.plate-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 50% -10%, rgba(240, 70, 27, .07), transparent 70%), var(--paper); }

/* ---------- chrome ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(243, 239, 230, .86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.brand b { font: 400 1.6rem/1 var(--serif); letter-spacing: -.01em; }
.top nav { display: flex; align-items: center; gap: 2px; }
.top nav a { text-decoration: none; font: 500 .9rem var(--sans); color: var(--ink-2); padding: 8px 12px; border-radius: 999px; }
.top nav a:hover { color: var(--ink); background: rgba(22, 20, 15, .05); }
.top nav a[aria-current] { color: var(--ink); background: rgba(22, 20, 15, .07); }
.top nav a.x { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; }
.top nav a.x svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .top nav a.opt { display: none; } .top nav a { padding: 8px 9px; } }
.foot { margin-top: 110px; border-top: 1px solid var(--rule); padding: 32px 0 44px; color: var(--ink-3); font-size: .9rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--ink); }

/* ---------- type ---------- */
.eng { font: 500 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.band { padding-top: 120px; }
.band h2, .page-head h1 { font: 400 clamp(2.4rem, 5.2vw, 4.2rem)/1 var(--serif); letter-spacing: -.02em; max-width: 20ch; }
.band h2 em, .page-head h1 em, .hero h1 em { font-style: italic; color: var(--red); }
.band .sub { margin-top: 18px; max-width: 64ch; color: var(--ink-2); font-size: 1.07rem; }
.page-head { padding: 72px 0 36px; }
.page-head > p:not(.eng) { margin-top: 16px; color: var(--ink-2); max-width: 60ch; }
.note { color: var(--ink-3); font-size: .88rem; }
.note.ok { color: var(--green); } .note.bad { color: var(--bad); }
.inl { font: 500 .88em var(--mono); color: var(--red-ink); background: var(--red-wash); border-radius: 6px; padding: .08em .4em; }
.inl.big { font-size: .7em; vertical-align: .12em; }
.mono { font-family: var(--mono); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font: 600 .95rem var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s; white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: default; }
.btn.hot { background: var(--ink); color: var(--paper); }
.btn.hot:hover:not(:disabled) { background: var(--red); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(240, 70, 27, .8); }
.btn.line { background: transparent; border-color: var(--rule-2); color: var(--ink); }
.btn.line:hover { border-color: var(--ink); }
.btn.sm { height: 36px; padding: 0 14px; font-size: .85rem; }
.btn.red { background: var(--red); color: #fff; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.field { width: 100%; min-height: 46px; padding: 11px 15px; border-radius: 14px; border: 1px solid var(--rule-2); background: var(--card); color: var(--ink); font: 400 .98rem var(--sans); outline: none; transition: border-color .2s, box-shadow .2s; }
.field::placeholder { color: var(--ink-3); }
.field:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(22, 20, 15, .07); }
textarea.field { min-height: 110px; resize: vertical; line-height: 1.5; }
.row .field { flex: 1 1 200px; width: auto; }
select.field { appearance: none; cursor: pointer; padding-right: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%; background-size: 6px 6px; background-repeat: no-repeat; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 500 .84rem var(--sans); color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; padding: 7px 13px; cursor: pointer; transition: all .15s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.free { border-color: rgba(23, 135, 90, .5); color: var(--green); }
.chip.free.on { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- cards ---------- */
.module { position: relative; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); min-width: 0; }
.module-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sample-tag { font: 500 .72rem var(--mono); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; background: var(--card-2); }
.offline { border-style: dashed; border-color: var(--red-2); background: #fff7f2; }
.stack { display: grid; gap: 18px; align-content: start; min-width: 0; }
.grid2 { display: grid; gap: 18px; grid-template-columns: 1.15fr 1fr; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; }
.kv dt { color: var(--ink-2); } .kv dd { margin: 0; font: 500 .95rem var(--mono); text-align: right; }
.readout { font-family: var(--mono); }
.pick { display: grid; gap: 6px; min-width: 0; }

/* numbers (the old tube API renders plain digits now) */
.nixie { display: inline-flex; font: 500 1em/1 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.nixie.md { font-size: 2.2rem; } .nixie.lg { font-size: clamp(2.6rem, 6vw, 3.8rem); } .nixie.xl { font-size: clamp(5rem, 16vw, 9rem); font-family: var(--serif); color: var(--red); }
.tube { display: inline-block; } .tube .ghost { display: none; } .tube.off { display: none; } .tube .lit { transition: opacity .12s; }

/* lamps */
.lamps { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.lamp { display: inline-flex; align-items: center; gap: 6px; font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lamp i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.lamp.on i { background: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.lamp.on.warn i, .lamp.warn.on i { background: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
.lamp.on.bad i { background: var(--bad); }
.wallet-chip { display: inline-flex; align-items: center; gap: 8px; font: 500 .85rem var(--mono); padding: 8px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); }
.wallet-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* replies */
.reply { margin-top: 16px; padding: 16px 18px; border-radius: 16px; background: var(--card-2); border: 1px solid var(--rule); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.reply small { display: block; margin-top: 12px; color: var(--ink-3); font: 500 .76rem var(--mono); }

/* code */
.code { border-radius: 20px; background: var(--ink); color: #e9e3d6; overflow: hidden; min-width: 0; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.code-head .eng { color: #9c9587; }
.code .btn.line { color: #e9e3d6; border-color: rgba(255, 255, 255, .2); }
.code .btn.line:hover { border-color: #fff; }
.code pre { margin: 0; padding: 20px; overflow-x: auto; font-size: .86rem; line-height: 1.7; }
.code .k { color: var(--red-2); } .code .s { color: #9fd8b5; } .code .f { color: #a9b8ff; } .code .c { color: #8a8475; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.seg button { font: 500 .78rem var(--mono); color: #9c9587; background: none; border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.seg button.on { background: var(--paper); color: var(--ink); }

/* addresses */
.addr-list { display: grid; gap: 1px; margin-top: 30px; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); background: var(--rule); }
.addr-list > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 16px 20px; background: var(--card); }
.addr-list code { font-size: .86rem; word-break: break-all; }
.addr-list a { text-decoration: none; } .addr-list a:hover code { color: var(--red); }
.none { color: var(--ink-3); font-style: normal; font-size: .9rem; }

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

/* ---------- docs ---------- */
.docs-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
.toc { position: sticky; top: 88px; align-self: start; display: grid; gap: 2px; }
.toc a { text-decoration: none; color: var(--ink-2); font-size: .92rem; padding: 6px 10px; border-radius: 8px; }
.toc a:hover { background: rgba(22, 20, 15, .05); color: var(--ink); }
@media (max-width: 860px) { .docs-grid { grid-template-columns: 1fr; } .toc { position: static; display: flex; flex-wrap: wrap; } }
.doc { min-width: 0; }
.doc h2 { font: 400 2.2rem/1.05 var(--serif); margin: 64px 0 14px; scroll-margin-top: 90px; }
.doc h3 { font: 600 1.05rem var(--sans); margin: 28px 0 10px; }
.doc p, .doc li { color: var(--ink-2); } .doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; } .doc li { margin: 6px 0; }
.doc code { font-size: .86em; color: var(--red-ink); }
.doc .code code, .doc pre code { color: inherit; }
.doc .code { margin: 18px 0; }
.t { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; }
.t th, .t td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.t th { font: 500 .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.t td:first-child { font-family: var(--mono); font-size: .85rem; white-space: nowrap; color: var(--ink); }
@media (max-width: 640px) { .t td:first-child { white-space: normal; word-break: break-word; } }

/* =====================================================================
   the landing page
   ===================================================================== */
.hero { padding: 84px 0 0; text-align: center; }
.hero .eng { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--card); }
.hero .eng i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
.hero h1 { margin: 26px auto 0; font: 400 clamp(3.6rem, 10vw, 8.4rem)/.9 var(--serif); letter-spacing: -.035em; }
.hero .lede { margin: 26px auto 0; max-width: 60ch; color: var(--ink-2); font-size: clamp(1.02rem, 1.6vw, 1.18rem); }

.chamber { position: relative; margin-top: 56px; }
.chamber-stage { position: relative; height: clamp(300px, 46vw, 520px); }
.chamber-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chamber-floor { margin-top: 18px; text-align: center; }
.chamber-floor .fl-why { margin-top: 6px; overflow-wrap: anywhere; }
.chamber-floor .fl-who { font: 400 clamp(1.4rem, 3vw, 2.1rem)/1.1 var(--serif); min-height: 1.2em; }
.chamber-floor .fl-why { font: 500 .78rem var(--mono); color: var(--ink-3); min-height: 1.3em; }
.chamber-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin-top: 22px; font: 500 .74rem var(--mono); color: var(--ink-3); }
.chamber-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chamber-legend i { width: 9px; height: 9px; border-radius: 50%; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.facts > div { padding: 22px 20px 24px; border-left: 1px solid var(--rule); }
.facts > div:first-child { border-left: 0; padding-left: 0; }
.facts b { display: block; font: 400 clamp(2.6rem, 5vw, 3.8rem)/1 var(--serif); letter-spacing: -.02em; }
.facts span { display: block; margin-top: 8px; color: var(--ink-2); font-size: .92rem; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, 1fr); } .facts > div:nth-child(3) { border-left: 0; padding-left: 0; } .facts > div:nth-child(n+3) { border-top: 1px solid var(--rule); } }

/* the floor: playground */
.play { margin-top: 40px; padding: 0; overflow: hidden; }
.holder-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--ink); color: var(--paper); }
.holder-bar .hb-text { display: flex; align-items: center; gap: 10px; font-size: .95rem; }
.holder-bar .hb-text i { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex: none; }
.holder-bar.on .hb-text i { background: #4ade9b; box-shadow: 0 0 0 3px rgba(74, 222, 155, .25); }
.holder-bar .btn.line { color: var(--paper); border-color: rgba(255, 255, 255, .3); }
.holder-bar .btn.line:hover { border-color: #fff; }
.holder-bar b { font-family: var(--mono); font-weight: 500; }
.play-body { padding: 24px; }
.pick-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: end; margin-bottom: 16px; }
.pick-row.solo { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .pick-row, .pick-row.solo { grid-template-columns: 1fr; } }
.cmp { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--rule-2); cursor: pointer; font-weight: 600; user-select: none; background: var(--card); }
.cmp:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cmp input { accent-color: var(--red); width: 16px; height: 16px; margin: 0; }
#ask-chips { margin-bottom: 12px; }
.answers { display: grid; gap: 14px; margin-top: 18px; }
.answers:empty { display: none; }
.answers.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .answers.two { grid-template-columns: 1fr; } }
.answer { border-radius: 18px; padding: 18px 20px; background: var(--card-2); border: 1px solid var(--rule); min-width: 0; animation: rise .5s var(--ease); }
.answer.err { border-color: rgba(196, 43, 58, .4); background: #fdf1f1; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.a-model { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.a-model b { font: 500 .95rem var(--mono); word-break: break-all; }
.tier { font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; font-style: normal; padding: 4px 9px; border-radius: 999px; }
.tier.fast { background: var(--cobalt-wash); color: var(--cobalt); }
.tier.deep { background: var(--red-wash); color: var(--red-ink); }
.tier.direct { background: var(--paper-2); color: var(--ink-2); }
.tier.zero { background: var(--green-wash); color: var(--green); }
.tier.bad { background: #fbe3e5; color: var(--bad); }
.a-why { margin: 8px 0 12px; color: var(--ink-3); font: 500 .78rem var(--mono); }
.a-body { white-space: pre-wrap; line-height: 1.6; overflow-wrap: anywhere; }
.a-body small { display: block; margin-top: 12px; color: var(--ink-3); font: 500 .76rem var(--mono); }
.a-meta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--ink-3); font: 500 .76rem var(--mono); }

/* promises + why */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; border-top: 1px solid var(--ink); }
.three > div { padding: 26px 26px 6px 0; }
.three > div + div { padding-left: 26px; border-left: 1px solid var(--rule); }
.three .eng { color: var(--red); }
.three h3 { margin-top: 12px; font: 400 1.9rem/1.05 var(--serif); }
.three p { margin-top: 12px; color: var(--ink-2); }
@media (max-width: 860px) { .three { grid-template-columns: 1fr; } .three > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); } }
.why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.why > div { padding: 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--rule); }
.why > div:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.why > div:first-child p { color: #c9c2b3; }
.why .n { font: 500 .72rem var(--mono); color: var(--red); }
.why b { display: block; margin-top: 10px; font: 400 1.45rem/1.1 var(--serif); }
.why p { margin-top: 10px; color: var(--ink-2); font-size: .93rem; }
@media (max-width: 1000px) { .why { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .why { grid-template-columns: 1fr; } }

/* catalogue */
.cat { margin-top: 40px; }
.cat-bar { display: grid; gap: 12px; margin-bottom: 16px; }
.cat-table { border-radius: 16px; overflow: hidden; border: 1px solid var(--rule); background: var(--card-2); }
.cat-row { display: grid; grid-template-columns: minmax(0, 2.3fr) .6fr 1.1fr 1.2fr; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--rule); background: var(--card); }
.cat-row:first-child { border-top: 0; }
.cat-row.head { background: var(--card-2); font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cat-row b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cat-row b i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cat-row code { display: block; margin-top: 2px; font-size: .76rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row .mono { font-size: .86rem; color: var(--ink-2); }
.zero { font: 600 .84rem var(--mono); color: var(--green); }
.free-tag { display: inline-block; margin-left: 8px; font: 500 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--green); background: var(--green-wash); border-radius: 999px; padding: 2px 7px; vertical-align: 1px; }
.cat-empty { padding: 24px 18px; color: var(--ink-3); font: 500 .9rem var(--mono); background: var(--card); }
@media (max-width: 720px) { .cat-row { grid-template-columns: 1fr 1fr; } .cat-row > span:first-child { grid-column: 1 / -1; } .cat-row > span:nth-child(2) { display: none; } }

/* how auto decides */
.signals { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 36px; }
.signals > div { padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--red); }
.signals b { font: 500 .9rem var(--mono); color: var(--red-ink); }
.signals span { display: block; margin-top: 6px; color: var(--ink-2); font-size: .9rem; }
@media (max-width: 900px) { .signals { grid-template-columns: repeat(2, 1fr); } }
.lane-fast { color: var(--cobalt); font-weight: 600; } .lane-deep { color: var(--red-ink); font-weight: 600; }

/* tab steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 40px; counter-reset: step; }
.steps > div { padding: 26px; border-radius: 20px; background: var(--card); border: 1px solid var(--rule); }
.steps .count { display: flex; align-items: baseline; gap: 10px; }
.steps .count b { font: 400 3.6rem/1 var(--serif); color: var(--red); }
.steps h3 { margin-top: 16px; font: 400 1.7rem/1.1 var(--serif); }
.steps p { margin-top: 10px; color: var(--ink-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.tabs-code { margin-top: 36px; }

/* coin */
.coin { margin-top: 36px; }
.coin-none { color: var(--ink-2); font: 500 .95rem var(--mono); }
.coin-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.coin-row code { font: 500 clamp(.82rem, 2.2vw, 1.1rem) var(--mono); word-break: break-all; }

/* faq */
.faq { display: grid; margin-top: 36px; max-width: 880px; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; font: 400 1.45rem/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 1.6rem/1 var(--sans); color: var(--red); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); max-width: 70ch; }

/* closing */
.closer { margin-top: 120px; padding: 64px 32px; border-radius: 28px; background: var(--ink); color: var(--paper); text-align: center; }
.closer h2 { margin-inline: auto; color: var(--paper); }
.closer p { margin: 18px auto 0; max-width: 52ch; color: #c9c2b3; }
.closer .btn.hot { background: var(--red); color: #fff; }
.closer .btn.line { color: var(--paper); border-color: rgba(255, 255, 255, .3); }

.facts b small { font: 500 .9rem var(--mono); color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }

/* coming soon */
.soon { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; padding: 20px 22px; border-radius: 20px; border: 1px dashed var(--rule-2); background: var(--card-2); }
.soon-tag { flex: none; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); background: var(--red-wash); border-radius: 999px; padding: 5px 10px; }
.soon b { display: block; font: 400 1.5rem/1.1 var(--serif); }
.soon p { margin-top: 6px; color: var(--ink-2); }
@media (max-width: 560px) { .soon { flex-direction: column; } }

/* what comes next */
.next { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 22px 0 12px; }
.phase { position: relative; padding: 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--rule); min-width: 0; }
.phase.live { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.phase.live li { color: #c9c2b3; }
.phase.live .ph-tag { color: var(--red-2); }
.ph-tag { font: 500 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); }
.phase h3 { margin: 10px 0 12px; font: 400 1.5rem/1.1 var(--serif); }
.phase ul { margin: 0; padding-left: 18px; }
.phase li { margin: 6px 0; font-size: .9rem; color: var(--ink-2); }
.phase.blur { filter: blur(4px); opacity: .7; user-select: none; pointer-events: none; }
.phase.blur .ph-tag { filter: none; }
@media (max-width: 960px) { .next { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .next { grid-template-columns: 1fr; } }

/* why on-chain */
.manifesto { margin-top: 30px; padding: 34px 36px; border-radius: 24px; background: var(--ink); color: var(--paper); border-left: 6px solid var(--red); }
.manifesto p { font-size: 1.12rem; line-height: 1.7; color: #e6e0d3; max-width: 78ch; }
.manifesto p + p { margin-top: 18px; }
@media (max-width: 560px) { .manifesto { padding: 24px 22px; } .manifesto p { font-size: 1.02rem; } }

/* catalogue sort + try, overhead readout */
.cat-top { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 10px; }
@media (max-width: 640px) { .cat-top { grid-template-columns: 1fr; } }
.cat-row { grid-template-columns: minmax(0, 2.3fr) .6fr 1.1fr 1.2fr 70px; }
.cat-row .try { height: 30px; padding: 0 12px; font-size: .8rem; }
@media (max-width: 720px) { .cat-row { grid-template-columns: 1fr 1fr auto; } .cat-row > span:nth-child(3) { display: none; } }
.a-meta .ovh { font-weight: 600; color: var(--green); }