/* Meta Brain — chalk on coal. */

:root {
  color-scheme: dark;
  --paper: #1b1b1a;   /* ground: coal */
  --white: #242423;   /* lifted surfaces: cards, buttons */
  --ink: #d6d3ca;     /* chalk */
  --ink2: #8a887f;    /* muted chalk */
  --faint: #383836;   /* hairlines, fills */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --rule: 2px solid var(--ink);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.5 var(--serif); min-height: 100vh; display: flex; flex-direction: row; align-items: stretch;
}
/* Sand. Sparse, crisp specks (single-octave noise, hard threshold) under a soft vignette. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(ellipse 90% 70% at 50% 35%, transparent 30%, rgba(0, 0, 0, .18) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .92  0 0 0 0 .9  0 0 0 0 .84  0 0 0 1 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 .18 .24 .24 .24 .24'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 256px 256px;
  animation: drift 40s linear infinite;
}
a { color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
h2 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--ink2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink2); }
.rule {
  border-bottom: var(--rule); padding-bottom: 0.35rem; margin: 0 0 1.2rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.rule small { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--ink2); }

/* ---- motion ---- */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } }
@keyframes tick { 40% { transform: scale(1.18); } }
@keyframes slam { 0% { transform: rotate(-9deg) scale(1.9); opacity: 0; } 60% { transform: rotate(-4deg) scale(.96); opacity: 1; } 100% { transform: rotate(-5deg) scale(1); } }
@keyframes deal { from { opacity: 0; transform: translateX(28px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes bump { 50% { transform: translateY(-3px); } }
@keyframes drift { to { background-position: 0 0, 256px 256px; } }
@keyframes glow { 0% { opacity: 0; letter-spacing: 0.06em; } 100% { opacity: 1; letter-spacing: -0.01em; } }
.rise { animation: rise .32s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
.leaving { opacity: 0; transform: translateY(-4px); transition: opacity .11s ease, transform .11s ease; }
.pop { animation: pop .26s var(--ease) both; }
.tick { animation: tick .18s var(--ease); }
.deal { animation: deal .3s var(--ease) both; }
.bump { animation: bump .32s var(--ease); }
/* Reduced motion: keep the fades (colour, shadow, opacity), drop anything that moves or loops. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, box-shadow, opacity, letter-spacing !important; }
  a:hover, button:hover, a:active, button:active, .mcard:hover, .mcard:hover .icon, .chip:hover, .card.mini:hover, .stats span:hover, .road li:hover .box, .tile:hover .v { transform: none !important; }
}

/* ---- frame: sidebar on the left, stage on the right ---- */
.side {
  position: sticky; top: 0; height: 100vh; width: 232px; flex: none; display: flex; flex-direction: column; gap: 1.8rem;
  padding: 1.4rem 1.1rem 1.1rem; border-right: var(--rule); background: color-mix(in srgb, var(--paper) 70%, transparent);
}
.brand { text-decoration: none; font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.95rem; padding: 0 0.6rem; transition: letter-spacing .25s var(--ease), color .22s; }
.brand:hover { letter-spacing: 0.3em; }
.nav { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.14em; }
.nav a {
  display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink2); padding: 0.7rem 0.9rem; border: 1.5px solid transparent; border-radius: 3px;
  transition: color .22s, background .22s, border-color .22s, transform .22s var(--ease);
}
.nav a::before { content: "▸"; width: 0; overflow: hidden; opacity: 0; transition: width .25s var(--ease), opacity .25s; }
.nav a:hover { color: var(--ink); border-color: var(--faint); background: var(--white); transform: translateX(3px); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.nav a:hover::before, .nav a.on::before { width: 0.9em; opacity: 1; }
.nav a:active { transform: translateX(3px) scale(.98); }
.nav a.on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.nav a.on:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .35), 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.stats { margin-top: auto; display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.6rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink2); }
.stats b { color: var(--ink); font-weight: 700; }
.stats span { transition: color .25s, transform .2s var(--ease); }
.stats span:hover { color: var(--ink); transform: translateX(3px); }
main { flex: 1; min-width: 0; width: 100%; max-width: 880px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.foot {
  border-top: 1px solid var(--faint); padding: 0.9rem 0.6rem 0; display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.74rem; color: var(--ink2); font-family: var(--mono);
}
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
button.link { transition: color .22s, text-underline-offset .25s; }
button.link:hover { color: var(--ink); text-underline-offset: 5px; }

/* ---- controls ---- */
.btn {
  appearance: none; cursor: pointer; font: inherit; font-family: var(--mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.75rem 1.5rem; border: var(--rule); background: var(--white); color: var(--ink); border-radius: 3px; user-select: none;
  transition: background .22s ease, color .22s ease, transform .22s var(--ease), box-shadow .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); outline: none; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.btn.primary:hover, .btn.primary:focus-visible { box-shadow: 0 6px 16px rgba(0, 0, 0, .4), 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: none; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover, .btn.primary:focus-visible { background: var(--white); color: var(--ink); }
.btn.small { padding: 0.4rem 0.8rem; font-size: 0.68rem; border-width: 1.5px; border-color: var(--faint); background: transparent; color: var(--ink2); }
.btn.small:hover, .btn.small:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--ink2); }
.btn.quiet:hover, .btn.quiet:focus-visible { color: var(--ink); background: var(--faint); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
.btn:disabled:hover { background: var(--white); color: var(--ink); }
.btn.primary:disabled:hover { background: var(--ink); color: var(--paper); }
.actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 2.2rem; }
kbd { font-family: var(--mono); font-size: 0.68rem; border: 1px solid var(--ink2); padding: 0 0.4em; border-radius: 3px; color: var(--ink); }

.choice { text-align: center; padding: 1.1rem 0; }
.choice-label { display: block; font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink2); margin-bottom: 0.6rem; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }
.chip {
  appearance: none; cursor: pointer; font: inherit; font-family: var(--mono); font-size: 0.82rem; padding: 0.42rem 0.85rem;
  border: 1.5px solid var(--faint); background: transparent; color: var(--ink2); border-radius: 3px;
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .07s ease;
}
.chip:hover { border-color: var(--ink2); color: var(--ink); transform: translateY(-1px); }
.chip:active { transform: scale(.94); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); animation: tick .22s var(--ease); }

/* ---- hub ---- */
.hub { display: flex; flex-direction: column; gap: 1.4rem; padding-top: clamp(0.5rem, 8vh, 5rem); }
.hub .title { text-align: center; }
.hub .title h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); margin-bottom: 0.3rem; animation: glow .45s var(--ease) both; }
.hub .grid > * { animation: rise .32s var(--ease) both; animation-delay: calc(40ms + var(--i, 0) * 35ms); }
.hub .grid > :nth-child(1) { --i: 0; } .hub .grid > :nth-child(2) { --i: 1; } .hub .grid > :nth-child(3) { --i: 2; } .hub .grid > :nth-child(4) { --i: 3; }
.hub .grid > :nth-child(5) { --i: 4; } .hub .grid > :nth-child(6) { --i: 5; } .hub .grid > :nth-child(7) { --i: 6; } .hub .grid > :nth-child(8) { --i: 7; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem; }
.mcard {
  display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 0 1.1rem; text-decoration: none;
  border: 1.5px solid var(--faint); background: var(--white); border-radius: 3px; overflow: hidden;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease), box-shadow .2s ease;
}
.mcard:hover, .mcard:focus-visible { border-color: var(--ink); background: var(--faint); transform: translateX(4px); outline: none; box-shadow: 0 10px 28px rgba(0, 0, 0, .45); }
.mcard .icon { transition: border-color .25s ease, background .25s ease, color .25s ease, transform .2s var(--ease); }
.mcard:hover .icon { transform: scale(1.08); }
.mcard:active { transform: translateX(4px) scale(.985); }
.mcard h3::before { content: "▸ "; display: inline-block; width: 0; overflow: hidden; opacity: 0; transition: width .25s var(--ease), opacity .25s; }
.mcard:hover h3::before, .mcard:focus-visible h3::before { width: 1em; opacity: 1; }
.mcard.locked { background: transparent; border-style: dashed; color: var(--ink2); cursor: default; }
.mcard.locked:hover { transform: none; box-shadow: none; background: transparent; border-color: var(--ink2); }
.mcard.locked:hover .icon { background: transparent; color: inherit; transform: none; border-color: var(--ink2); }
.mcard.locked h3::before { display: none; }
.mcard .icon {
  align-self: stretch; display: grid; place-items: center; min-height: 108px; border-right: 1.5px solid var(--faint);
  font-family: var(--mono); font-weight: 700; font-size: 2.4rem; letter-spacing: -0.03em; background: var(--paper); transition: border-color .25s ease, background .25s ease, color .25s ease;
}
.mcard:hover .icon, .mcard:focus-visible .icon { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.mcard.locked .icon { border-right-style: dashed; background: transparent; }
.mcard .body { padding: 0.9rem 1rem 0.9rem 0; min-width: 0; }
.mcard h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.mcard .meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard:hover .meta { color: var(--ink); }

/* ---- roadmap ---- */
.roadmap { display: grid; grid-template-columns: repeat(var(--tracks, 2), 1fr); column-gap: 1.8rem; row-gap: 0; margin: 0 auto; }
main:has(.roadmap) { max-width: 1160px; }
.roadmap .span { grid-column: 1 / -1; }
.roadmap .span .road { max-width: 420px; margin: 0 auto; }
.trackhead { display: grid; grid-template-columns: repeat(var(--tracks, 2), 1fr); column-gap: 1.8rem; margin: 1.2rem 0 0.4rem; }
.trackhead > div { display: flex; justify-content: space-between; align-items: baseline; border-bottom: var(--rule); padding-bottom: 0.35rem; }
.trackhead h3 { font-size: 1.15rem; }
.stagehead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem; padding: 1.8rem 0 0.5rem; border-bottom: 1px solid var(--faint); margin-bottom: 0.2rem; }
.stagehead h3 { font-size: 1.05rem; text-align: center; }
.stagehead .eyebrow:last-child { text-align: right; }
.stagehead.done { border-bottom-color: var(--ink); }
.stagehead.done h3::after { content: ' ✓'; }
.road { list-style: none; margin: 0; padding: 0; }
.road li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; column-gap: 0.9rem; padding: 0.65rem 0.5rem 0.65rem 0; margin-left: -0.5rem; padding-left: 0.5rem; border-radius: 3px; position: relative; color: var(--ink2); transition: color .25s, background .25s; }
.road li:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 70%, transparent); }
.road li .btn.small { opacity: .55; transition: opacity .25s, background .22s, color .22s, border-color .22s, transform .22s var(--ease), box-shadow .25s; }
.road li:hover .btn.small { opacity: 1; }
.road li::before { content: ""; position: absolute; left: calc(0.5rem + 10px); top: 0; bottom: 0; width: 1.5px; background: var(--faint); z-index: 0; }
.road li:first-child::before { top: 50%; } .road li:last-child::before { bottom: 50%; }
.road li:only-child::before { display: none; }
.road .box { position: relative; z-index: 1; width: 22px; height: 22px; border: 1.5px solid var(--faint); background: var(--paper); display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; transition: border-color .25s, transform .2s var(--ease); }
.road li:hover .box { border-color: var(--ink); transform: scale(1.15); }
.road li.got { color: var(--ink); }
.road li.got .box { border-color: var(--ink); background: var(--ink); color: var(--paper); animation: pop .3s var(--ease) .25s both; }
.road b { display: block; font-size: 0.95rem; }
.road .muted { font-family: var(--mono); font-size: 0.7rem; }
@media (max-width: 640px) {
  .roadmap, .trackhead { grid-template-columns: 1fr; }
  .trackhead > div:not(:first-child) { display: none; }
  .roadmap > .road + .road { border-top: 1px dashed var(--faint); margin-top: 0.3rem; padding-top: 0.3rem; }
}

table.log { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.78rem; }
table.log th { text-align: left; font-weight: 400; color: var(--ink2); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.64rem; border-bottom: 1.5px solid var(--ink); padding: 0.4rem 0.5rem 0.4rem 0; }
table.log td { padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--faint); transition: background .22s, color .22s; }
table.log tbody tr { color: var(--ink2); }
table.log tbody tr:hover { color: var(--ink); }
table.log tbody tr:hover td { background: color-mix(in srgb, var(--white) 70%, transparent); }
table.log td.r, table.log th.r { text-align: right; padding-right: 0; }
.empty { color: var(--ink2); text-align: center; }

/* ---- module frame ---- */
.modhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 1rem; border-bottom: var(--rule); padding-bottom: 0.7rem; margin-bottom: 2.2rem; }
.modhead .back { display: inline-block; font-family: var(--mono); font-size: 0.74rem; text-decoration: none; letter-spacing: 0.08em; color: var(--ink2); transition: color .22s, transform .25s var(--ease); }
.modhead .back:hover { color: var(--ink); transform: translateX(-3px); }
.modhead h1 { font-size: 1.9rem; text-align: center; }
.modhead .meta { font-family: var(--mono); font-size: 0.68rem; color: var(--ink2); text-align: right; }
.modbody { text-align: center; }
.setup { max-width: 600px; margin: 0 auto; }
.toolbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.toolbar .clock { font-family: var(--mono); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bar { height: 3px; background: var(--faint); margin-bottom: 2.4rem; }
.bar i { display: block; height: 100%; background: var(--ink); width: 0; }

/* ---- digits ---- */
.digits {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.3rem; font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 4.4vw, 2.5rem); letter-spacing: 0.06em; line-height: 1.3; padding: 1.2rem 0;
}
.digits.small { font-size: 1.25rem; padding: 1rem 0; }
.grp { display: inline-flex; gap: 0.1em; }
.cell { display: inline-grid; place-items: center; width: 1.2em; height: 1.45em; border-bottom: 3px solid var(--faint); position: relative; transition: border-color .25s, background .25s; }
.entry .cell:hover { background: color-mix(in srgb, var(--faint) 60%, transparent); border-bottom-color: var(--ink2); }
.cell.filled { border-bottom-color: var(--ink); }
.cell.cur { background: var(--faint); border-bottom-color: var(--ink); }
.cell.ok { border-bottom-color: var(--faint); }
.cell.bad { text-decoration: line-through; text-decoration-thickness: 3px; color: var(--ink2); border-bottom-color: var(--ink2); }
.cell.bad::after { content: attr(data-ans); position: absolute; left: 0; right: 0; top: 100%; font-size: 0.5em; text-align: center; color: var(--ink); text-decoration: none; margin-top: 3px; }
.digits.review { padding-bottom: 2.2rem; }
.ghost { position: absolute; opacity: 0; width: 1px; height: 1px; left: 50%; top: 0; }
.entry { position: relative; cursor: text; }

/* ---- cards ---- */
.card {
  position: relative; aspect-ratio: 5 / 7; border: 2px solid var(--ink); border-radius: 7px; background: var(--white);
  display: grid; place-items: center; font-family: var(--serif); user-select: none;
}
.card .rank { position: absolute; top: 0.25em; left: 0.4em; font-weight: 700; line-height: 1; font-size: 0.55em; }
.card .rank.b { top: auto; left: auto; bottom: 0.25em; right: 0.4em; transform: rotate(180deg); }
.card .suit { font-size: 1em; line-height: 1; }
.card.red .rank { font-style: italic; }
.card.big { width: min(220px, 48vw); font-size: 5rem; margin: 0 auto; }
.card.mid { width: 100%; font-size: 2rem; }
.card.mini { width: 42px; font-size: 1.1rem; cursor: pointer; border-radius: 4px; transition: opacity .2s ease, transform .07s ease, background .22s ease; }
.card.mini .rank { top: 0.15em; left: 0.3em; }
.card.mini .rank.b { display: none; }
.card.mini:hover { background: var(--faint); transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, .4); }
.card.mini:active { transform: scale(.88); box-shadow: none; }
.card.mini.used { opacity: 0.15; cursor: default; pointer-events: none; }
.card.bad { border-style: dashed; opacity: 0.5; }
.chrono { font-family: var(--mono); font-size: clamp(2rem, 6vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; margin: -1.2rem 0 1rem; letter-spacing: 0.04em; }
.stage { padding: 0.5rem 0; }
.stage .count { font-family: var(--mono); font-size: 0.74rem; color: var(--ink2); margin-bottom: 1.2rem; letter-spacing: 0.1em; }
.stage .holder { min-height: 320px; display: grid; place-items: center; }
.stage .digits { font-size: clamp(3.5rem, 12vw, 7rem); letter-spacing: 0.1em; padding: 0; }
.stage .digits .cell { border-bottom-width: 4px; }
.stage .nav { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.6rem; }
.cardgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; max-width: 760px; margin: 0 auto; }
.cgrp { display: flex; gap: 0.35rem; }
.cardgrid .card { width: 70px; font-size: 1.8rem; }
.hand { display: flex; justify-content: center; gap: 1rem; }
.hand .card.big { --w: min(220px, calc((min(88vw, 840px) - (var(--n) - 1) * 1rem) / var(--n))); width: var(--w); font-size: calc(var(--w) * 0.36); margin: 0; }
.sgrp { display: flex; gap: 0.3rem; }
.picker { display: grid; gap: 0.45rem; justify-content: center; }
.picker .row { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; align-items: center; }
.picker .row .eyebrow { width: 1.2rem; font-size: 0.9rem; color: var(--ink2); }
.strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.9rem; padding: 0.7rem; border: 1.5px solid var(--faint); border-radius: 4px;
  margin: 0 auto 1.4rem; max-width: 720px; align-content: flex-start;
}
.strip .card.mini { cursor: pointer; }
.slot { width: 42px; aspect-ratio: 5 / 7; border: 1.5px dashed var(--faint); border-radius: 4px; display: grid; place-items: center; font-family: var(--mono); font-size: 0.6rem; color: var(--faint); cursor: pointer; }
.strip .cur { outline: 2px solid var(--ink); outline-offset: 2px; }
.strip .slot.cur { border-color: var(--ink); color: var(--ink2); }
.pairs { display: grid; grid-template-columns: repeat(auto-fit, 60px); justify-content: center; gap: 0.6rem 0.4rem; margin: 1rem auto 0; max-width: 720px; }
.pair { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-family: var(--mono); font-size: 0.62rem; color: var(--ink2); }
.pair .card.mini { cursor: default; pointer-events: none; }
.pair .ans { font-size: 0.72rem; color: var(--ink); font-family: var(--serif); font-weight: 700; }

/* ---- faces ---- */
.facegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 1rem 0.8rem; max-width: 760px; margin: 0 auto; }
.face { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-width: 0; }
.face .portrait { width: 100%; max-width: 150px; border: 1.5px solid var(--faint); border-radius: 4px; background: var(--white); overflow: hidden; transition: border-color .25s; }
.face .portrait svg { display: block; width: 100%; height: auto; }
.face:hover .portrait { border-color: var(--ink2); }
.face .name { font-family: var(--serif); font-weight: 700; font-size: 0.95rem; line-height: 1.2; text-align: center; }
.face.big { gap: 0.9rem; }
.face.big .portrait { max-width: min(260px, 60vw); border-width: 2px; border-color: var(--ink); }
.face.big .name { font-size: 1.6rem; }
.face .fields { display: flex; flex-direction: column; gap: 0.3rem; width: 100%; }
.face input.nm {
  width: 100%; font: inherit; font-size: 0.85rem; text-align: center; padding: 0.3rem 0.4rem; border: 1.5px solid var(--faint); border-radius: 3px;
  background: var(--white); color: var(--ink); outline: none; transition: border-color .22s, background .22s;
}
.face input.nm::placeholder { color: var(--faint); font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; }
.face input.nm:focus { border-color: var(--ink); background: var(--paper); }
.facegrid.review .face.ok .portrait { border-color: var(--ink); }
.facegrid.review .face.bad .portrait { border-style: dashed; opacity: 0.6; }
.facegrid.review .name .bad { text-decoration: line-through; text-decoration-thickness: 2px; color: var(--ink2); }
.facegrid.review .ans { font-family: var(--mono); font-size: 0.68rem; color: var(--ink); letter-spacing: 0.04em; }
.stage .holder .face { min-height: 0; }

/* ---- results ---- */
.results { text-align: center; }
.stamp {
  display: inline-block; transform: rotate(-5deg); font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.24em;
  font-size: 0.82rem; padding: 0.35rem 0.8rem; border: 3px double var(--ink); border-radius: 4px; margin: 0.9rem 0 0.2rem;
  animation: slam .5s var(--ease) .35s both;
}
.bigscore { font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; line-height: 1; margin: 0.3rem 0 0.6rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.bigscore small { font-size: 0.38em; color: var(--ink2); font-weight: 400; letter-spacing: 0; }
.facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.6rem; font-family: var(--mono); font-size: 0.8rem; margin: 0.8rem 0 2rem; color: var(--ink2); }
.facts b { font-weight: 700; color: var(--ink); }
.tags { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.tags span { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.2rem 0.55rem; background: var(--ink); color: var(--paper); border-radius: 2px; }
.review { border-top: 1px solid var(--faint); padding-top: 1.4rem; }

@media (max-width: 720px) {
  body { flex-direction: column; }
  .side { position: static; height: auto; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.8rem 1rem; border-right: 0; border-bottom: var(--rule); }
  .brand { padding: 0; }
  .nav { order: 3; width: 100%; flex-direction: row; gap: 0.3rem; }
  .nav a { flex: 1; justify-content: center; padding: 0.5rem 0.4rem; }
  .nav a::before { display: none; }
  .nav a:hover { transform: none; }
  .stats { margin: 0 0 0 auto; flex-direction: row; gap: 0.8rem; padding: 0; font-size: 0.66rem; }
  .foot { border: 0; padding: 0; gap: 0.8rem; }
  main { padding: 1.6rem 1rem 3rem; }
  .modhead { grid-template-columns: auto 1fr; }
  .modhead .meta { display: none; }
  .stage .holder { min-height: 260px; }
}
}

/* ---- analysis ---- */
.chips.center { justify-content: center; margin-bottom: 1.6rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); border: 1.5px solid var(--faint); border-radius: 3px; overflow: hidden; margin-bottom: 2rem; }
.tile { padding: 0.8rem 0.6rem; text-align: center; border-right: 1px solid var(--faint); border-bottom: 1px solid var(--faint); }
.tile { transition: background .25s; }
.tile:hover { background: var(--white); }
.tile .v { font-family: var(--mono); font-size: 1.3rem; font-weight: 700; font-variant-numeric: tabular-nums; display: inline-block; transition: transform .2s var(--ease); }
.tile:hover .v { transform: scale(1.08); }
.tile .k { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink2); margin-top: 0.15rem; }
.asec { margin-bottom: 2.2rem; min-width: 0; }
.asech { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--faint); padding-bottom: 0.35rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.asech h3 { font-size: 1.05rem; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 700px) { .two { grid-template-columns: 1fr; } }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--faint); stroke-width: 1; }
.chart .lbl { fill: var(--ink2); font-family: var(--mono); font-size: 10px; }
.chart .lbl.small { font-size: 9px; fill: var(--ink); }
.two .chart .lbl { font-size: 15px; }
.two .chart .lbl.small { font-size: 13px; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.chart .line.b { stroke: var(--ink2); stroke-dasharray: 4 3; }
.chart .dot { fill: var(--ink); }
.chart .dot.b { fill: var(--ink2); }
.chart .bx { fill: var(--ink); }
.chart .bx.b { fill: var(--ink2); }
.heat { display: grid; gap: 2px; font-family: var(--mono); font-size: 0.62rem; }
.heat .hl { color: var(--ink2); text-align: center; align-self: center; padding: 0.1rem 0.2rem; }
.heat .hc { aspect-ratio: 1; display: grid; place-items: center; border-radius: 2px; background: color-mix(in srgb, var(--ink) var(--v, 0%), var(--white)); color: var(--ink2); min-width: 0; }
.heat .hc:not(.none) { color: color-mix(in srgb, var(--paper) clamp(0%, calc((var(--v, 0%) - 45%) * 100), 100%), var(--ink)); }
.heat .hc.none { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }
.heat.big .hc { font-size: 0.6rem; }
.conf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.3rem 1rem; font-family: var(--mono); font-size: 0.8rem; }
.conf li { padding: 0.3rem 0; border-bottom: 1px solid var(--faint); }
.nodata { color: var(--faint); text-align: center; padding: 2rem 0; font-family: var(--mono); }

/* ---- roadmap tabs: one road at a time ---- */
.tabs { display: flex; gap: 0; margin: -0.4rem 0 0.4rem; border-bottom: 1px solid var(--faint); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  appearance: none; cursor: pointer; flex: none; display: flex; align-items: baseline; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink2);
  background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0.7rem 0.62rem 0.6rem;
  transition: color .2s, border-color .2s, background .2s;
}
.tab small { font-size: 0.62rem; letter-spacing: 0.04em; opacity: .7; font-variant-numeric: tabular-nums; }
.tab:hover { color: var(--ink); background: color-mix(in srgb, var(--white) 60%, transparent); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.tab.soon { color: color-mix(in srgb, var(--ink2) 70%, transparent); }
.tab.soon.on { color: var(--ink2); border-bottom-color: var(--ink2); border-bottom-style: dashed; }
.roadmap.solo { max-width: 560px; }
main:has(.tabs) { max-width: 1160px; }
.soonroad { text-align: center; padding: clamp(2.5rem, 10vh, 5rem) 1rem; }
.soonroad .icon {
  display: inline-grid; place-items: center; min-width: 108px; height: 108px; padding: 0 1rem; margin-bottom: 1.2rem;
  border: 1.5px dashed var(--ink2); border-radius: 3px; font-family: var(--mono); font-weight: 700; font-size: 2.4rem; color: var(--ink2);
}
.soonroad h3 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.soonroad p { color: var(--ink2); margin-bottom: 0.4rem; }

/* ---- palaces ---- */
main:has(.pal-list), main:has(.pal-editor), main:has(.pal-empty) { max-width: 720px; }
.pal-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.pal-editor { border: 1.5px solid var(--ink); border-radius: 3px; background: var(--white); padding: 1.1rem; margin-bottom: 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.pal-editor input, .pal-editor textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--faint); border-radius: 3px;
  padding: 0.6rem 0.75rem; outline: none; transition: border-color .2s; resize: vertical;
}
.pal-editor input { font-weight: 700; font-size: 1.1rem; }
.pal-editor textarea { font-family: var(--mono); font-size: 0.85rem; line-height: 1.6; }
.pal-editor input:focus, .pal-editor textarea:focus { border-color: var(--ink); }
.pal-editor ::placeholder { color: var(--ink2); opacity: .55; }
.pal-meta { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pal-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pal-btns.end { justify-content: flex-end; }

.loci { list-style: none; counter-reset: loc; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.loci:empty { display: none; }
.loci li { counter-increment: loc; display: flex; align-items: center; gap: 0.6rem; min-height: 2.9rem; padding: 0.35rem 0.6rem 0.35rem 0.35rem; border: 1px solid var(--faint); border-radius: 3px; background: var(--paper); font-size: 0.92rem; line-height: 1.25; transition: border-color .2s; }
.loci li:hover { border-color: var(--ink2); }
.loci li::before { content: counter(loc); flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 2px; background: var(--white); border: 1px solid var(--faint); font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.loci li span { min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 560px) { .loci { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pal-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--faint); }
.pal-row { border-bottom: 1px solid var(--faint); }
.pal-head {
  appearance: none; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.4rem; align-items: center; gap: 1rem;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer; padding: 0.85rem 0.4rem;
  transition: background .2s;
}
.pal-head:hover { background: color-mix(in srgb, var(--white) 70%, transparent); }
.pal-head .nm-wrap { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.pal-head .nm { font-weight: 700; font-size: 1.1rem; }
.pal-head .peek { font-family: var(--mono); font-size: 0.7rem; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-head .chev { font-family: var(--mono); color: var(--ink2); text-align: center; }
.pal-row.open .pal-head .chev { color: var(--ink); }
.pal-body { padding: 0.2rem 0.4rem 1rem; display: flex; flex-direction: column; gap: 0.9rem; animation: rise .25s var(--ease) both; }
.pal-empty { padding: 2rem 0; }
@media (max-width: 720px) { .nav { letter-spacing: 0.06em; font-size: 0.72rem; } .nav a { padding: 0.5rem 0.2rem; min-width: 0; } }

/* ---- my system (PAO) ---- */
main:has(.pao) { max-width: 880px; }
.sys-bar { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sys-status { font-family: var(--mono); font-size: 0.72rem; color: var(--ink2); letter-spacing: 0.04em; }
.sys-status.warn { color: var(--ink); }
.sys-status.warn::before { content: "● "; }
.sys-safe { margin-left: auto; display: flex; gap: 0.4rem; }
.sys-note { font-family: var(--mono); font-size: 0.68rem; color: var(--ink2); margin: 0.7rem 0 1.4rem; letter-spacing: 0.02em; }
.sys-train { position: relative; border: var(--rule); border-radius: 4px; background: var(--white); padding: 1.1rem 1.2rem 1.2rem; margin: 1rem 0 0.4rem; animation: rise .3s var(--ease) both; }
.sys-train[hidden] { display: none; }
.train-x { appearance: none; cursor: pointer; align-self: flex-start; background: none; border: 1.5px solid transparent; border-radius: 3px; color: var(--ink2); font: 1.2rem/1 var(--mono); padding: 0.2rem 0.45rem; transition: color .2s, border-color .2s; }
.train-x:hover { color: var(--ink); border-color: var(--faint); }
.train-x svg { display: block; }
.train-x.on { color: var(--ink); border-color: var(--ink2); }
.train-tools { display: flex; gap: 0.2rem; align-items: center; }
.gear-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.15rem; }
.gear-chips.enter { animation: rise .25s var(--ease) both; }
.tchip { appearance: none; cursor: pointer; font-family: var(--mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; padding: 0.42rem 0.65rem; border-radius: 3px; border: 1.5px solid var(--faint); background: transparent; color: var(--ink2); transition: background .18s, color .18s, border-color .18s; }
.tchip:hover { border-color: var(--ink2); color: var(--ink); }
.tchip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tchip.red { font-style: italic; }
.tchip.all { border-style: dashed; }
@media (max-width: 560px) { .gear-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3rem; } .tchip { padding: 0.45rem 0; font-size: 0.66rem; letter-spacing: -0.02em; white-space: nowrap; text-align: center; } }
.train-top { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0.8rem; margin: -0.5rem -0.6rem 0 0; }
.train-top.open { margin-bottom: 1.3rem; }
.train-lbl { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; }
.train-sub { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--ink2); }
.train-num { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 2.4rem); margin: 0.2rem 0 0.2rem; }
.train-num div { text-align: center; }
.train-num b { display: block; font-family: var(--mono); font-weight: 700; font-size: clamp(2.6rem, 9vw, 3.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.train-num b.red, .tip-key.red { font-style: italic; }
.train-num span { display: block; margin-top: 0.45rem; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink2); }
.test-rows { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.3rem; }
.test-rows .train-num { margin: 0; align-items: center; }
.test-rows em, .test-inputs em { font-style: normal; font-family: var(--mono); font-size: 0.62rem; color: var(--ink2); width: 1rem; text-align: right; align-self: center; }
.train-num.five { gap: clamp(0.8rem, 4vw, 2rem); }
.train-num.five b { font-size: clamp(1.8rem, 6.5vw, 2.6rem); }
.test-q { text-align: center; color: var(--ink2); margin: 0.2rem 0 0.8rem; }
.test-inputs { display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.test-inputs input { width: 3.6rem; text-align: center; font: 700 1.7rem var(--mono); letter-spacing: 0.04em; background: var(--paper); color: var(--ink); border: 1.5px solid var(--faint); border-bottom: 2px solid var(--ink2); border-radius: 3px; padding: 0.45rem 0; outline: none; transition: border-color .2s; }
.test-inputs input:focus { border-color: var(--ink); }
.test-score { text-align: center; margin: 0.2rem 0 0.9rem; }
.test-score b { display: block; font-family: var(--mono); font-size: clamp(2.4rem, 8vw, 3.2rem); line-height: 1; }
.test-score span { font-family: var(--mono); font-size: 0.72rem; color: var(--ink2); letter-spacing: 0.04em; }
.test-res { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; width: 100%; max-width: 480px; margin: 0 auto; }
.test-res > div { text-align: center; border: 1.5px dashed var(--faint); border-radius: 3px; padding: 0.6rem 0.35rem; background: var(--paper); }
.test-res > div.ok { border-style: solid; border-color: var(--ink2); }
.test-res b { display: block; font: 700 1.5rem var(--mono); }
.test-res .you { display: block; font-family: var(--mono); font-size: 0.85rem; color: var(--ink2); }
.test-res .you i { font-style: normal; }
.test-res .you i.x { color: #e38b7c; text-decoration: line-through; }
.test-res .hint { display: block; margin-top: 0.35rem; font-size: 0.74rem; color: var(--ink2); overflow-wrap: anywhere; line-height: 1.3; }
@media (max-width: 560px) { .test-inputs { gap: 0.3rem; } .test-inputs input { width: 2.9rem; font-size: 1.35rem; } .test-res { gap: 0.3rem; } .test-res b { font-size: 1.2rem; } }
.learn-pao { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; max-width: 640px; margin: 1.2rem auto 0; }
.learn-pao div { background: var(--paper); border: 1.5px solid var(--faint); border-radius: 3px; padding: 0.75rem 0.9rem; text-align: center; }
.learn-pao span { display: block; font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink2); margin-bottom: 0.3rem; }
.learn-pao b { font-size: 1.15rem; color: #fff; overflow-wrap: anywhere; }
.learn-pao b.none { font-weight: 400; font-style: italic; color: var(--ink2); opacity: .6; }
@media (max-width: 560px) { .learn-pao { grid-template-columns: 1fr; } }
.train-actions { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.2rem; }
.btn.small.on { border-color: var(--ink); color: var(--ink); }
.train-tip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--faint); }
.train-tip.enter { animation: rise .3s var(--ease) both; }
.tip-col { border: 1.5px solid var(--faint); border-radius: 3px; padding: 0.75rem 0.8rem; background: var(--paper); }
.tip-key { font-family: var(--mono); font-weight: 700; font-size: 1.15rem; margin-bottom: 0.45rem; }
.tip-line { display: flex; gap: 0.55rem; align-items: baseline; padding: 0.22rem 0.4rem; margin: 0 -0.4rem; border-radius: 2px; font-size: 0.92rem; color: color-mix(in srgb, var(--ink2) 80%, transparent); }
.tip-line i { flex: none; width: 0.9rem; font-style: normal; font-family: var(--mono); font-size: 0.62rem; color: var(--ink2); }
.tip-line .none { font-style: italic; opacity: .55; }
.tip-line.hit { color: #fff; font-weight: 700; background: color-mix(in srgb, var(--ink) 12%, transparent); }
.tip-line.hit i { color: var(--ink); }
@media (max-width: 560px) { .train-tip { grid-template-columns: 1fr; } }
.pao { margin-top: 1rem; }
.pao-head, .pao-row { display: grid; grid-template-columns: 3.2rem repeat(3, 1fr); gap: 0.4rem; align-items: center; }
.pao-head { position: sticky; top: 0; z-index: 2; background: var(--paper); padding: 0.5rem 0; border-bottom: 1px solid var(--faint);
  font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink2); }
.pao-group { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink2); padding: 1.1rem 0 0.35rem; border-bottom: 1px solid var(--faint); margin-bottom: 0.3rem; }
.pao-row { padding: 0.18rem 0; }
.pao-key { font-family: var(--mono); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }
.pao-key.red { font-style: italic; }
.pao-row input {
  min-width: 0; width: 100%; font: inherit; font-size: 0.92rem; color: var(--ink); background: transparent;
  border: 1px solid transparent; border-bottom-color: var(--faint); border-radius: 3px; padding: 0.38rem 0.5rem; outline: none;
  transition: border-color .15s, background .15s;
}
.pao-row input::placeholder { color: var(--faint); font-family: var(--mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; }
.pao-row input:hover { border-bottom-color: var(--ink2); }
.pao-row input:focus { border-color: var(--ink); background: var(--white); }
@media (max-width: 720px) {
  .sys-safe { margin-left: 0; }
  .pao-head, .pao-row { grid-template-columns: 2.4rem repeat(3, 1fr); gap: 0.25rem; }
  .pao-row input { font-size: 0.82rem; padding: 0.35rem 0.3rem; }
  .pao-head { top: 0; }
}
@media (max-width: 720px) { .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a { flex: 1 0 auto; white-space: nowrap; padding: 0.5rem 0.55rem; } }