[hidden] { display: none !important; }   /* a class that sets a display must never show an element the page hides */
/* Same system as beltek.xyz: one type size, hierarchy only through weight, colour and capitals. */
:root {
  --beltek: #0052FF;
  --blue-text: #3375FF;   /* the brand blue, lifted a little so small text stays readable on the night ground */
  --ground: #080B16;
  --panel: #10142A;
  --text: #ECE7DC;
  --soft: #9C9DAB;
  --line: #232840;
  --paper: #F3EEE3;
  --ok: #7FD69B;
  --err: #FF8A7A;
  --font: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --hand: "Babbles Hand", var(--font);
  color-scheme: dark;
}
:root[data-dil="en"] [lang="tr"], :root[data-dil="tr"] [lang="en"] { display: none !important; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (min-width: 1000px) { html { zoom: 0.67; } }   /* the site reads best at 67% on desktop */
body { margin: 0; background: var(--ground); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; padding-inline: clamp(16px, 4vw, 56px); padding-bottom: 96px; }
.page { max-width: 1180px; margin: 0 auto; }
a { color: var(--blue-text); }
h1, h2, h3 { font-size: inherit; margin: 0; color: var(--blue-text); font-weight: 700; letter-spacing: 0.01em; font-family: var(--hand); }
h1, h2, h3 { text-transform: uppercase; }
p { margin: 0 0 1.5em; max-width: 62ch; }
.soft { color: var(--soft); }
button, input { font: inherit; }

/* top bar */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 22px; }
.crumb { display: flex; gap: 8px; align-items: baseline; }
.crumb a { color: var(--text); text-decoration: none; font-weight: 700; }
.crumb span { color: var(--soft); }
.top-right { display: flex; gap: 14px; align-items: center; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.lang button { background: none; border: 0; color: var(--soft); padding: 4px 10px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--beltek); color: #fff; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: 24px 72px; }
.stage { position: relative; }
.stage canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--paper); border-radius: 2px; transition: border-radius 0.6s ease; }
.stage-bar { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--soft); font-size: 13px; }
.stage-bar button { white-space: nowrap; background: none; border: 1px solid var(--line); color: var(--text); padding: 3px 10px; border-radius: 3px; cursor: pointer; }
.stage-bar button:hover { border-color: var(--beltek); }
.views { display: flex; gap: 10px; }
.views span[aria-current="true"] { color: var(--blue-text); }
.hero h1 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.1; margin-bottom: 18px; }
.hero .tagline { font-size: 20px; margin-bottom: 18px; }
.cta { display: inline-block; background: var(--beltek); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 3px; font-weight: 700; margin-right: 12px; }
.cta:hover { filter: brightness(1.12); }
.counter { color: var(--soft); }
.counter b { color: var(--text); }

section { border-top: 1px solid var(--line); padding-block: 48px; }
section > h2 { margin-bottom: 24px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.manifesto { white-space: pre-line; color: var(--text); }

/* three things every child makes */
.things { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.thing img { width: 100%; height: auto; aspect-ratio: 1; display: block; background: var(--paper); }
.thing h3 { margin: 14px 0 6px; }
.thing p { font-size: 14px; color: var(--soft); }

/* roadmap */
.road { list-style: none; margin: 0; padding: 0; }
.road li { display: grid; grid-template-columns: 56px 200px minmax(0, 1fr); gap: 16px; padding-block: 18px; border-bottom: 1px dashed var(--line); }
.road li:last-child { border-bottom: 0; }
.road .no { color: var(--soft); }
.road .when { font-weight: 700; color: var(--text); }
.road .now .when { color: var(--ok); }
.road h3 { margin-bottom: 4px; }
.road p { margin: 0; color: var(--soft); }
.road p + p { margin-top: 10px; }
.road .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); margin-right: 8px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* waitlist */
.join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); }
.steps { list-style: none; margin: 0 0 24px; padding: 0; counter-reset: step; }
.steps li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 3px; margin-bottom: 10px; background: var(--panel); }
.steps li.done { border-color: #2c5a3c; }
.steps li.done .tick { visibility: visible; }
.tick { visibility: hidden; color: var(--ok); margin-right: 6px; }
.btn { background: var(--panel); border: 1px solid var(--beltek); color: var(--text); padding: 6px 12px; border-radius: 3px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--beltek); color: #fff; }
form label { display: block; margin-bottom: 14px; }
form label > span { display: block; color: var(--soft); margin-bottom: 6px; }
form input[type="text"] { width: 100%; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: 3px; }
form input[type="text"]:focus { outline: 2px solid var(--beltek); outline-offset: 0; border-color: transparent; }
form input[aria-invalid="true"] { border-color: var(--err); }
.check { display: flex !important; gap: 10px; align-items: flex-start; }
.check input { margin-top: 4px; accent-color: var(--beltek); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form button[type="submit"] { background: var(--beltek); color: #fff; border: 0; padding: 11px 20px; border-radius: 3px; font-weight: 700; cursor: pointer; }
form button[disabled] { opacity: 0.5; cursor: default; }
.msg { min-height: 1.5em; margin-top: 12px; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--ok); }
.done-box { border: 1px solid var(--beltek); background: var(--panel); border-radius: 3px; padding: 22px; }
.done-box h3 { margin-bottom: 10px; }
.share-link { display: flex; gap: 8px; margin: 14px 0; }
.share-link input { flex: 1; background: var(--ground); border: 1px solid var(--line); color: var(--soft); padding: 8px 10px; border-radius: 3px; min-width: 0; }
.rules { font-size: 13px; color: var(--soft); }
.rules p { margin-bottom: 0.8em; }

footer { border-top: 1px solid var(--line); padding-top: 24px; color: var(--soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .hero, .cols, .join { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: 8px 48px; }
  .things { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .road li { grid-template-columns: 36px minmax(0, 1fr); }
  .road .when { grid-column: 2; }
  .road .body { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .road .dot { animation: none; } .stage canvas { transition: none; } }

/* ── pages: hub, about, roadmap, waitlist ── */
.crumb a { color: var(--text); }
.crumb a.here { color: var(--soft); font-weight: 400; pointer-events: none; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 8px; }
.subnav a { text-decoration: none; color: var(--soft); padding: 4px 10px; border: 1px solid transparent; border-radius: 3px; }
.subnav a:hover { color: var(--text); border-color: var(--line); }
.subnav a[aria-current="page"] { color: var(--text); border-color: var(--line); background: var(--panel); }
.subnav a .n { color: var(--soft); margin-right: 6px; }

/* the three doors on the hub */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.door { display: flex; flex-direction: column; gap: 10px; padding: 22px; min-height: 230px; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 3px; transition: border-color .2s, transform .2s; }
.door:hover, .door:focus-visible { border-color: var(--beltek); transform: translateY(-2px); }
.door .n { color: var(--soft); }
.door h2 { font-size: 20px; }
.door p { color: var(--soft); margin: 0; flex: 1; }
.door .go { color: var(--blue-text); font-weight: 700; }
.door.main { background: var(--beltek); border-color: var(--beltek); }
.door.main h2, .door.main .go, .door.main .n { color: #fff; }
.door.main p { color: rgba(255, 255, 255, .85); }
.door.main:hover { filter: brightness(1.08); }

/* long-form pages */
.lead { font-size: 18px; max-width: 58ch; margin: 28px 0 8px; }
.chapter { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); border-top: 1px solid var(--line); padding-block: 40px; }
.chapter > .label { color: var(--soft); }
.chapter > .label b { display: block; color: var(--blue-text); text-transform: uppercase; margin-bottom: 4px; }
.chapter p { max-width: 64ch; }
.facts { list-style: none; margin: 0 0 1.5em; padding: 0; display: grid; gap: 10px; max-width: 70ch; }
.facts li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.facts li b { color: var(--text); }
.facts li span { color: var(--soft); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 14px; margin: 8px 0 1.5em; }
.gallery.big { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; aspect-ratio: 1; display: block; background: var(--paper); }
.gallery figcaption { font-size: 13px; margin-top: 6px; }
.gallery figcaption b { display: block; color: var(--text); font-weight: 700; }
.gallery figcaption span { color: var(--soft); }
.note { color: var(--soft); font-size: 13px; }
.next { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.ghost { display: inline-block; border: 1px solid var(--line); color: var(--text); text-decoration: none; padding: 10px 16px; border-radius: 3px; }
.ghost:hover { border-color: var(--beltek); }
.big-count { font-size: 15px; color: var(--soft); margin: 18px 0 0; }
.big-count b { color: var(--text); }

@media (max-width: 860px) {
  .doors { grid-template-columns: minmax(0, 1fr); }
  .door { min-height: 0; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 32px; }
  .facts li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
.crumb { flex-wrap: wrap; min-width: 0; row-gap: 0; }
@media (max-width: 520px) { .crumb { font-size: 13px; } .top-right { gap: 10px; } }
/* the live drawing's view switch: click a view to pin it, click it again to let it cycle */
.views button { background: none; border: 0; padding: 2px 0; color: var(--soft); font: inherit; font-size: 13px; cursor: pointer; text-underline-offset: 3px; }
.views button:hover { color: var(--text); text-decoration: underline; }
.views button[aria-current="true"] { color: var(--blue-text); }
.views button[aria-pressed="true"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--beltek); text-decoration-thickness: 2px; }
.views button[aria-pressed="true"]::before { content: "● "; color: var(--beltek); }
.pin-hint { color: var(--soft); font-size: 12px; text-align: right; }

/* hub: three visual doors to the showcases */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 6px; }
.tile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--text); }
.tile img { width: 100%; height: auto; aspect-ratio: 1; display: block; background: var(--paper); outline: 1px solid var(--line); outline-offset: -1px; transition: outline-color .2s, transform .2s; }
.tile:hover img, .tile:focus-visible img { outline: 2px solid var(--beltek); transform: translateY(-2px); }
.tile span { font-weight: 700; color: var(--blue-text); font-size: 13px; }
.subnav .sep { width: 1px; background: var(--line); margin: 2px 6px; }

/* showcase grid */
.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px; }
.controls button, .w-panel button { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 12px; border-radius: 3px; cursor: pointer; font: inherit; font-size: 13px; }
.controls button:hover, .w-panel button:hover:not([disabled]) { border-color: var(--beltek); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 16px; }
.card { background: none; border: 0; padding: 0; text-align: left; color: var(--text); cursor: zoom-in; font: inherit; }
.card canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--panel); outline: 1px solid var(--line); outline-offset: -1px; transition: outline-color .2s; }
.card.done canvas { background: var(--paper); }
.card:hover canvas, .card:focus-visible canvas { outline: 2px solid var(--beltek); }
.card .cap { display: flex; flex-direction: column; margin-top: 8px; font-size: 13px; }
.card .cap span { color: var(--soft); }
.card:not(.done) canvas { animation: wait 1.4s ease-in-out infinite; }
@keyframes wait { 50% { opacity: .55; } }

/* one child, large */
dialog#viewer { border: 1px solid var(--line); background: var(--ground); color: var(--text); padding: 0; width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: 4px; }
dialog#viewer::backdrop { background: rgba(4, 6, 12, .8); }
.v-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; padding: 22px; }
.v-in canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--paper); }
.v-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.v-top .nav { display: flex; gap: 6px; }
.v-top .nav button, .vv button, #vWrite { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 6px 10px; border-radius: 3px; cursor: pointer; font: inherit; font-size: 13px; }
.vv { display: flex; gap: 6px; flex-wrap: wrap; }
.vv button[aria-pressed="true"] { background: var(--beltek); border-color: var(--beltek); color: #fff; }
#vWrite { background: var(--beltek); border-color: var(--beltek); color: #fff; font-weight: 700; align-self: flex-start; }
.traits { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.traits li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.traits li span { color: var(--soft); }

/* write with an alphabet */
.writer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.w-canvas canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--paper); }
.w-panel { display: flex; flex-direction: column; gap: 14px; }
.w-panel h2 { margin: 0; }
.w-panel label { display: flex; flex-direction: column; gap: 6px; color: var(--soft); }
.w-panel input, .w-panel select { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 10px 12px; border-radius: 3px; font: inherit; }
.w-panel .row { display: flex; gap: 8px; flex-wrap: wrap; }
.w-panel button.primary { background: var(--beltek); border-color: var(--beltek); color: #fff; font-weight: 700; }
.w-panel button[disabled] { opacity: .45; cursor: default; }

@media (max-width: 860px) {
  .v-in, .writer { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
}
.hero > div { min-width: 0; }
.stage-bar { flex-wrap: wrap; row-gap: 6px; } .views { flex-wrap: wrap; }

/* round 2: calls to action, notices, contents, questions */
.top-cta { background: var(--beltek); color: #fff !important; text-decoration: none; padding: 5px 12px; border-radius: 3px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.top-cta:hover { filter: brightness(1.12); }
.hero-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-cta .cta { margin: 0; }
.tiles-label { color: var(--soft); font-size: 13px; margin: 0 0 4px; }
.notice { border: 1px solid var(--line); border-left: 3px solid var(--beltek); background: var(--panel); padding: 10px 14px; border-radius: 2px; max-width: none; margin: 4px 0 14px; }
.notice b { color: var(--text); }
.badge { display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ground); background: #F5CA02; padding: 2px 6px; border-radius: 2px; margin-left: 6px; }
.card img { width: 100%; height: auto; aspect-ratio: 1; display: block; background: var(--paper); outline: 1px solid var(--line); outline-offset: -1px; transition: outline-color .2s; }
.card:hover img, .card:focus-visible img { outline: 2px solid var(--beltek); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 18px 0 8px; }
.toc a { font-size: 13px; color: var(--text); text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 4px 9px; }
.toc a:hover { border-color: var(--beltek); }
.toc .n { color: var(--soft); margin-right: 6px; }
.chapter { scroll-margin-top: 16px; }
.faq { max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; color: var(--text); }
.faq summary::marker { color: var(--beltek); }
.faq details p { color: var(--soft); margin: 10px 0 0; }
@media (max-width: 520px) { .top-cta { padding: 5px 9px; font-size: 12px; } .top a[href*="x.com"] { display: none; } }

/* the specimen of one child's alphabet */
.specimen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
.specimen figure { margin: 0; }
.specimen canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--paper); }
.specimen figcaption { margin-top: 8px; font-size: 13px; display: flex; flex-direction: column; }
.specimen figcaption b { color: var(--text); }
.specimen figcaption span, .sp-go span { color: var(--soft); }
.sp-go a { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 1; padding: 22px; text-decoration: none; border: 1px solid var(--line); background: var(--panel); border-radius: 3px; color: var(--text); }
.sp-go a:hover { border-color: var(--beltek); }
@media (max-width: 860px) { .specimen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* alphabets page: the writer first, then the other hands, then the specimen */
@media (min-width: 761px) { .alpha-wide { --sw: min(calc(100vw - 48px), 1640px); width: var(--sw); margin-left: calc(50% - var(--sw) / 2); } }
.alpha-wide section { border-top: 0; }
.tester { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; padding-block: 28px 40px; }
.tester canvas { width: 100%; aspect-ratio: 1; display: block; background: var(--paper); }
.tp { display: flex; flex-direction: column; gap: 18px; }
.tp h2 { margin: 0; }
.tp p { margin: 0; }
.tp input { height: 76px; background: var(--panel); border: 1px solid var(--beltek); color: var(--text); font: inherit; font-size: 30px; padding: 0 20px; border-radius: 3px; }
.tp input:focus { outline: 2px solid var(--beltek); outline-offset: 2px; }
.tp label { display: flex; flex-direction: column; gap: 8px; color: var(--soft); }
.tp select, .tp button { height: 56px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; padding: 0 16px; border-radius: 3px; cursor: pointer; }
.tp .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp button.primary { background: var(--beltek); border-color: var(--beltek); color: #fff; font-weight: 700; }
.tp button[disabled] { opacity: .5; cursor: progress; }
.tp button:hover:not([disabled]) { border-color: var(--beltek); }
.tp .ghost { background: none; text-align: left; color: var(--blue-text); }
.who2 { color: var(--soft); } .who2 b { color: var(--text); }
.strip-sec { padding-block: 8px 40px !important; border-bottom: 1px solid var(--line); }
.strip-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.strip-top #more { margin-left: auto; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 3px; cursor: pointer; }
.grid.strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 12px; scroll-snap-type: x proximity; }
.grid.strip .card { flex: 0 0 140px; cursor: pointer; scroll-snap-align: start; }
.grid.strip .card .cap { display: none; }
.grid.strip .card.on img, .grid.strip .card.on canvas { outline: 3px solid var(--beltek); outline-offset: 2px; }
.pieces { padding-top: 16px !important; }
.piece { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: center; padding-block: 40px; border-bottom: 1px solid var(--line); }
.piece canvas { width: 100%; max-width: 760px; aspect-ratio: 1; display: block; background: var(--paper); }
.piece.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.piece.rev canvas { order: 2; justify-self: end; }
.piece.rev .cap { text-align: right; } .piece.rev .cap p { margin-left: auto; }
.piece .n { color: var(--blue-text); font-size: 56px; font-weight: 700; line-height: 1; }
.piece h3 { color: var(--text); font-size: 22px; margin: 14px 0 10px; }
.piece .cap p { color: var(--soft); margin: 0; max-width: 34ch; }
@media (max-width: 760px) {
  .tester, .piece, .piece.rev { grid-template-columns: minmax(0, 1fr); }
  .piece.rev canvas { order: 0; } .piece.rev .cap { text-align: left; } .piece.rev .cap p { margin-left: 0; }
  .piece .n { font-size: 36px; }
  .tp input { height: 60px; font-size: 22px; }
  /* on a phone the text box comes first, so the writing is seen right under it while typing */
  .tester { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .tp { display: contents; }
  .tester > * , .tp > * { order: 3; }
  .tp h2 { order: 0; } .tp input { order: 1; } .tester canvas, .tp .btns { order: 2; }
  .grid.strip .card { flex-basis: 110px; }
}
/* one child's page */
.child .facts li { grid-template-columns: 130px minmax(0, 1fr); gap: 14px; }
.child .next .cta { margin-right: 0; }
button.ghost { background: none; font: inherit; cursor: pointer; }
/* roadmap pictures */
.road-figs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.road-figs img { width: clamp(88px, 22vw, 150px); height: auto; aspect-ratio: 1; display: block; border-radius: 2px; background: var(--paper); }
/* the legal page */
.legal-nav { color: var(--soft); }
.legal-list { margin: 0 0 1.5em; padding-left: 1.2em; max-width: 62ch; }
.legal-list li { margin-bottom: 0.5em; }
/* bold marks what matters in running text: brighter, not bigger */
p b, li b, details b { color: var(--text); font-weight: 700; }
/* headings and the short heading-like lines are written in Babbles Hand; body text stays in Roboto Mono */
.tagline, .lead, .chapter > .label, .gallery figcaption b, .card .cap b, .specimen figcaption b { font-family: var(--hand); }
/* the legal page keeps its headings in Roboto Mono */
.page:has(.legal-nav) :is(h1, h2, h3, .lead, .tagline, .chapter > .label) { font-family: var(--font); }
/* roadmap: the step still to come is drawn fainter, with a dashed rule above it */
.road li.later { border-top: 1px dashed var(--line); }
.road li.later .when { color: var(--soft); font-weight: 400; }
.road li.later h3 { color: var(--soft); }
/* studio, before it opens: one line in Babbles Hand, as large as the screen allows */
.studio-big { min-height: 66vh; display: flex; align-items: center; justify-content: center; margin: 24px 0; }
.studio-big .sw { width: min(100%, 860px); height: auto; max-height: 62vh; }
/* the strokes draw themselves one after another, in the order the child writes them */
.sw path { stroke-dasharray: 1 1; stroke-dashoffset: 1; stroke-opacity: 0; animation: sw-draw var(--d) linear var(--t) forwards; }   /* hidden until its turn: a round cap would show as a dot */
@keyframes sw-draw { from { stroke-opacity: 1; } to { stroke-dashoffset: 0; stroke-opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sw path { animation: none; stroke-dashoffset: 0; stroke-opacity: 1; } }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* hub: the Studio tile, "STUDIO" in Babbles Hand on a dark card */
.tile-box { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--panel); outline: 1px solid var(--line); outline-offset: -1px; color: var(--blue-text); transition: outline-color .2s, transform .2s; }
.tile-box .sw { width: 84%; height: auto; }
.tile:hover .tile-box, .tile:focus-visible .tile-box { outline: 2px solid var(--beltek); transform: translateY(-2px); }
.sw.still path { animation: none; stroke-dashoffset: 0; stroke-opacity: 1; }
@media (max-width: 520px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* hub: the live drawing is clickable (another child) */
.hero #stage { cursor: pointer; }
/* the brand page */
.dls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; margin-bottom: 14px; }
.dl { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text); font-size: 13px; }
.dl-pic { aspect-ratio: 3 / 2; background: var(--panel); outline: 1px solid var(--line); outline-offset: -1px; display: grid; place-items: center; overflow: hidden; margin-bottom: 6px; }
.dl-pic img { width: 100%; height: 100%; object-fit: contain; padding: 8%; box-sizing: border-box; display: block; }
.dl:hover .dl-pic, .dl:focus-visible .dl-pic { outline: 2px solid var(--beltek); }
.dl span:last-child { color: var(--soft); font-size: 12px; }
.sws { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 16px; }
.sw-c { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.sw-c > span { height: 64px; border-radius: 3px; outline: 1px solid var(--line); margin-bottom: 6px; }
.sw-c em { font-style: normal; color: var(--soft); font-size: 12px; }
.hand-sample { font-family: var(--hand); font-size: clamp(28px, 4vw, 44px); color: var(--blue-text); margin: 0 0 12px; text-transform: none; }
.copybox { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 14px 16px; margin-bottom: 12px; max-width: 72ch; }
.copybox p { margin: 0 0 10px; }
/* the holders' studio */
.st-who { margin-top: 18px; }
.st-look { display: flex; gap: 8px; flex: 1 1 320px; min-width: 0; }
.st-look input { flex: 1; min-width: 0; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 10px; border-radius: 3px; }
#stMine { margin-top: 18px; }
.st-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: 36px; }
.st-one canvas.round { border-radius: 50%; }
.st-one h2 { margin: 0 0 6px; }
.st-one .traits { margin: 14px 0 22px; }
.st-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.st-tabs button { background: none; border: 1px solid transparent; border-bottom: 0; color: var(--soft); padding: 7px 12px; cursor: pointer; font: inherit; border-radius: 3px 3px 0 0; }
.st-tabs button[aria-selected="true"] { color: var(--text); border-color: var(--line); background: var(--panel); }
.st-panel { padding: 16px 0; }
@media (max-width: 760px) { .st-one { grid-template-columns: minmax(0, 1fr); } }
.st-in { width: 100%; box-sizing: border-box; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 8px 10px; border-radius: 3px; font: inherit; margin: 8px 0; }
.st-try p { font-size: 34px; line-height: 1.2; margin: 6px 0; overflow-wrap: anywhere; }
.st-try .note { font-family: var(--mono, inherit); font-size: 12px; vertical-align: middle; margin-right: 8px; }
.st-opts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 8px 0; }
.st-opts select { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 6px 8px; border-radius: 3px; font: inherit; font-size: 13px; }
.st-sw input { position: absolute; opacity: 0; } .st-sw span { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; }
.st-sw input:checked + span { border-color: var(--text); outline: 2px solid var(--beltek); }
.st-out { width: 100%; height: auto; display: block; margin: 10px 0; outline: 1px solid var(--line); }
.st-check { background: repeating-conic-gradient(#1a1e33 0% 25%, #12152a 0% 50%) 0 / 24px 24px; }
.st-chain { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 28px; }
.st-num { width: 110px; background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 10px; border-radius: 3px; font: inherit; }
.st-chain select { background: var(--panel); border: 1px solid var(--line); color: var(--text); padding: 7px 8px; border-radius: 3px; font: inherit; }
.st-frame { width: min(100%, 640px); aspect-ratio: 1; border: 0; display: block; background: var(--paper); margin-top: 10px; }
.st-keepers { list-style: decimal-leading-zero; padding-left: 3.2em; margin: 10px 0; font-size: 14px; max-width: 560px; }
.st-keepers li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.st-keepers li { display: list-item; } .st-keepers li span { float: right; color: var(--soft); }
/* today's Babble on the hub */
.daily { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; margin: 8px 0 24px; }
.daily-pic img { width: 100%; height: auto; display: block; background: var(--paper); outline: 1px solid var(--line); }
.daily-pic:hover img { outline: 2px solid var(--beltek); }
.daily h2 { margin: 0 0 16px; font-size: clamp(32px, 5vw, 56px); }
.daily .traits { max-width: 460px; margin-bottom: 14px; }
@media (max-width: 640px) { .daily { grid-template-columns: minmax(0, 1fr); } }

/* the clock: always in the bottom right corner, out of the way of the text */
.clock { position: fixed; z-index: 20; margin: 0; right: max(12px, env(safe-area-inset-right, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px));
  padding: 6px 10px; background: var(--ground); border: 1px solid var(--line); color: var(--soft); font-size: 11px; letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums; pointer-events: none; }
footer { margin-bottom: 44px; }
@media print { .clock { display: none; } }
/* long contract addresses and the engine fingerprint wrap on phones instead of pushing the page sideways */
.legal-list code { overflow-wrap: anywhere; word-break: break-all; }