/* foidslop: plain white layout in Hanken Grotesk, one accent colour. */
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/hanken-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'Hanken Grotesk'; font-style: italic; font-weight: 800; font-display: swap; src: url('/assets/fonts/hanken-grotesk-800i.woff2') format('woff2'); }
:root {
  --bg: #ffffff;
  --ink: #17151b;
  --ink-2: #3e3a45;
  --muted: #625e69;
  --faint: #8a8592;
  --line: #ebe8ee;
  --line-strong: #cdc9d3;
  --soft: #f4f1f5;
  --soft-2: #faf9fb;
  --accent: #e0246b;
  --accent-hover: #b51a54;
  --accent-tint: #faf6f8;
  --accent-track: #ebe3e8;

  --v-foid-bg: #e0246b;
  --v-foid-fg: #ffffff;
  --v-not-bg: #e6f0ec;
  --v-not-fg: #1d5c45;
  --v-close-bg: #fbf0d9;
  --v-close-fg: #7a5410;
  --v-need-bg: #f1eff3;
  --v-need-fg: #625e69;

  --font: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--font);
  overflow-wrap: break-word;
}
main#main { flex: 1 0 auto; width: 100%; }
img { max-width: 100%; }
a { color: var(--ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent); color: #fff; }

.shell {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.col { max-width: 680px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 12px; z-index: 30; }
.skip:focus { left: 8px; }

.wordmark {
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--accent); font-style: italic; padding-left: 1px; }

/* ---------- header ---------- */
.mast { border-bottom: 1px solid var(--line); }
.mast__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 18px;
}
.mast__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; font-size: 15px; font-weight: 600; }
.mast__nav a { color: var(--muted); text-decoration: none; }
.mast__nav a:hover { color: var(--ink); }
.mast__nav a[aria-current="page"] { color: var(--ink); }
.mast__nav a:last-child { color: #fff; background: var(--ink); padding: 9px 16px; border-radius: 6px; }
.mast__nav a:last-child:hover { background: var(--ink-2); color: #fff; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: 700 16px/1.2 var(--font);
  text-decoration: none;
  justify-self: start;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn--dark { background: var(--ink); border-color: var(--ink); }
.btn--dark:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--light { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.btn--light:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.btn:disabled { opacity: .5; }
.link-strong { font-weight: 700; }

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 480px;
  gap: 64px;
  align-items: center;
  padding-block: 52px 44px;
}
.hero__text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hero h1 { font-size: 68px; line-height: 1; letter-spacing: -2.5px; }
.hero__lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); max-width: 520px; }
.hero__lede b { color: var(--ink); }
.hero__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15px; }
.hero__links a { font-weight: 700; }
.hero__links span { color: var(--faint); }

.today {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.today .media { height: 220px; border-radius: 0; }
.today__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 12px; }
.today__kicker { font-size: 13px; font-weight: 700; color: var(--accent); }
.today h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.8px; }
.today h2 a { color: var(--ink); text-decoration: none; }
.today h2 a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ---------- photos ---------- */
.media { position: relative; overflow: hidden; background: var(--soft); border-radius: 8px; }
.media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media--row { width: 112px; height: 112px; flex: none; }
.media--thumb { width: 72px; height: 72px; flex: none; }
.media--hero { width: 100%; height: 440px; border-radius: 10px; }

/* ---------- vote widgets ---------- */
.vote { min-width: 0; }
.vote__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vote button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 700 15px/1.2 var(--font);
  transition: background-color .15s, border-color .15s, color .15s;
}
.vote button:hover { border-color: var(--ink); }
.vote--big button { min-height: 52px; font-size: 17px; }
.vote--big button[data-v="yes"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.vote--big button[data-v="yes"]:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.vote--big button[aria-pressed="false"] { background: #fff; border-color: var(--line-strong); color: var(--ink); }
.vote button[aria-pressed="true"],
.vote button[aria-pressed="true"]:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.vote--big { display: flex; flex-direction: column; gap: 12px; }
.vote--card { background: var(--accent-tint); border-radius: 10px; padding: 24px 26px; gap: 16px; }
.vote__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 22px; }
.vote__aside { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.vote__result { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.vote--big .vote__result { gap: 10px; }
.vote__text { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.vote__text.is-error { color: var(--accent-hover); font-weight: 700; }
.vote__more { font-size: 13px; color: var(--muted); }
.vote__note { font-size: 13px; color: var(--muted); }
.vote__after { display: flex; flex-wrap: wrap; gap: 8px; }
.vote__after .btn { flex: 1 1 140px; min-height: 46px; font-size: 15px; }

.verdict {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.take { display: flex; flex-direction: column; gap: 8px; margin-block: 4px; padding: 16px 18px; border-left: 3px solid var(--ink); background: var(--soft, #faf9fb); border-radius: 0 8px 8px 0; }
.take__head { display: flex; align-items: center; gap: 10px; }
.take__k { font-size: 13px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; }
.take p { margin: 0; font-size: 17px; line-height: 1.5; }
.take-line { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.take-word { font-weight: 700; }
.take-word--foid { color: var(--accent); }
.take-word--not { color: var(--v-not-fg); }
.take-word--close { color: var(--v-close-fg); }
.today__take { margin: -4px 0 0; }
.today__take:empty { display: none; }
.vote__agree { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.verdict--foid { background: var(--v-foid-bg); color: var(--v-foid-fg); }
.verdict--not { background: var(--v-not-bg); color: var(--v-not-fg); }
.verdict--close { background: var(--v-close-bg); color: var(--v-close-fg); }
.verdict--need, .verdict--early { background: var(--v-need-bg); color: var(--v-need-fg); }

.bar { height: 8px; border-radius: 4px; background: var(--accent-track); overflow: hidden; }
.vote--big .bar { height: 10px; border-radius: 5px; }
.bar__yes { display: block; height: 100%; width: 0; background: var(--accent); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.meter { display: flex; gap: 3px; }
.meter i { flex: 1; height: 8px; border-radius: 2px; background: var(--line); }
.meter i.on { background: var(--accent); }
.vote--big .meter i { height: 10px; }

/* the row version: grey yes/no buttons, accent when chosen */
.row .vote { display: contents; }
.row .vote__btns { grid-template-columns: 1fr 1fr; gap: 4px; }
.row .vote button { min-height: 40px; padding: 0 10px; background: var(--soft); border-color: transparent; color: var(--ink-2); font-size: 14px; }
.row .vote button:hover { background: var(--line); border-color: transparent; }
.row .vote button[aria-pressed="true"],
.row .vote button[aria-pressed="true"]:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- ads ---------- */
.ad { display: block; min-width: 0; }
.ad__label, .xp__tag { display: block; font-size: 11px; color: var(--faint); margin-bottom: 4px; }
.ad--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  color: var(--faint);
  font-size: 13px;
  text-align: center;
}
.ad--placeholder.ad--banner { height: 90px; width: 100%; max-width: 728px; margin-inline: auto; }
.ad--placeholder.ad--rect { height: 250px; width: 300px; max-width: 100%; }
.ad--placeholder.ad--feed { height: 120px; }
.ad__m { display: none; }
.ad-row, .xp-slot { margin-block: 0 8px; }

/* ---------- board ---------- */
.board { padding-block: 32px 56px; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}
.section-head h2 { font-size: 28px; letter-spacing: -.6px; }
.section-head p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.section-head a { font-size: 15px; font-weight: 700; }
.sorts { display: flex; gap: 22px; font-size: 15px; font-weight: 600; }
.sorts button { padding: 0; border: 0; background: none; color: var(--muted); font: 600 15px var(--font); }
.sorts button:hover { color: var(--ink); }
.sorts button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 250px 132px;
  column-gap: 28px;
  row-gap: 8px;
  align-items: center;
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
}
.row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.row__q { font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; color: var(--ink); text-decoration: none; text-wrap: balance; }
.row__q:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.row__lede {
  font-size: 15px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed-ad, .feed-xp { padding-block: 18px; border-bottom: 1px solid var(--line); }

/* ---------- item page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 28px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent-hover); }
.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
  padding-block: 28px 64px;
}
.case-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.case-head { display: flex; flex-direction: column; gap: 16px; }
.case-head h1 { font-size: 56px; line-height: 1.02; letter-spacing: -2px; }
.lede { font-size: 21px; line-height: 1.5; color: var(--ink-2); }
.hero-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.hero-fig figcaption { font-size: 13px; color: var(--faint); }
.hero-fig figcaption a { color: var(--muted); }

.prose { display: flex; flex-direction: column; gap: 16px; max-width: 680px; font-size: 17px; line-height: 1.65; color: var(--ink); }
.prose h2 { font-size: 22px; margin-top: 8px; }
.prose a { text-decoration: underline; }
.prose-fig { margin: 4px 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 320px; align-self: center; }
.prose-fig img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--soft); }
.prose-fig figcaption { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: center; }
.prose-fig figcaption span { color: var(--faint); }

.sides { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.sides > div { min-width: 0; }
.sides h3 { font-size: 18px; margin-bottom: 10px; }
.sides ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); }

.share { display: flex; flex-wrap: wrap; gap: 10px; }
.share a, .share button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 700 15px var(--font);
  text-decoration: none;
}
.share a:hover, .share button:hover { border-color: var(--ink); color: var(--ink); }

.case-side { display: flex; flex-direction: column; gap: 18px; padding-top: 52px; min-width: 0; }
.side-block { display: flex; flex-direction: column; gap: 12px; }
.side-block h2 { font-size: 18px; }
.side-block + .side-block { padding-top: 18px; border-top: 1px solid var(--line); }
.more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.more-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: center; color: var(--ink); text-decoration: none; }
.more-item__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.more-item__q { font-size: 16px; font-weight: 700; line-height: 1.25; }
.more-item:hover .more-item__q { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.more-item__res { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz-link { font-weight: 700; }

.next { padding-block: 40px 16px; display: flex; flex-direction: column; gap: 4px; }

/* ---------- quiz ---------- */
.quiz { display: flex; flex-direction: column; gap: 22px; padding-block: 8px 24px; }
.quiz__progress { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.quiz__track { height: 6px; border-radius: 3px; background: var(--accent-track); overflow: hidden; }
.quiz__track i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.quiz__q { font-size: 30px; line-height: 1.15; letter-spacing: -.8px; }
.quiz__answers { display: flex; flex-direction: column; gap: 10px; }
.quiz__answers button {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  font: 600 17px/1.35 var(--font);
  transition: border-color .15s, background-color .15s;
}
.quiz__answers button:hover, .quiz__answers button:focus-visible { border-color: var(--accent); background: var(--accent-tint); }
.quiz__answers kbd {
  min-width: 28px;
  padding: 3px 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  font: 700 13px var(--font);
  text-align: center;
}
.quiz__hint { font-size: 14px; color: var(--muted); }
.result { background: var(--accent-tint); border-radius: 10px; padding: clamp(22px, 4vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.result__kicker { font-size: 13px; font-weight: 700; color: var(--muted); }
.result__score { font-size: clamp(64px, 12vw, 96px); font-weight: 800; line-height: .9; letter-spacing: -3px; color: var(--accent); font-variant-numeric: tabular-nums; }
.result h2 { font-size: 30px; letter-spacing: -.6px; }
.result p { font-size: 18px; line-height: 1.5; max-width: 36rem; }

.quiz-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.quiz-list li { border-bottom: 1px solid var(--line); }
.quiz-list a { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: baseline; column-gap: 24px; row-gap: 6px; gap: 6px 24px; padding-block: 22px; text-decoration: none; color: var(--ink); }
.quiz-list .media--quiz { grid-row: 1 / span 2; grid-column: 1; align-self: center; width: 112px; height: 112px; }
.quiz-list h3 { grid-column: 2; align-self: end; }
.quiz-fig { margin-bottom: 8px; }
.media--quizhero { height: 300px; }
.quiz-list h3 { font-size: 24px; letter-spacing: -.4px; }
.quiz-list p { grid-column: 2; align-self: start; color: var(--muted); }
.quiz-list span { grid-row: 1; grid-column: 3; white-space: nowrap; font-size: 14px; color: var(--muted); }
.quiz-list a:hover h3 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* ---------- glossary ---------- */
.dict { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.dict li { border-bottom: 1px solid var(--line); }
.dict a { display: flex; flex-direction: column; gap: 6px; padding-block: 20px; color: var(--ink); text-decoration: none; }
.dict p { color: var(--muted); }
.dict a:hover .term { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.headword { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.headword .term { font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.6px; }
.headword .ipa { font-size: 15px; color: var(--muted); }
.headword .pos { font-size: 15px; font-style: italic; color: var(--muted); }
.term-head { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; }
.term-head h1 { font-size: 56px; letter-spacing: -2px; line-height: 1.02; }
.definition { font-size: 21px; line-height: 1.5; color: var(--ink-2); padding-left: 18px; border-left: 3px solid var(--accent); }
.terms-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.terms-inline a { font-weight: 700; }

/* ---------- simple pages ---------- */
.page-head { display: flex; flex-direction: column; gap: 12px; padding-block: 48px 24px; }
.page-head h1 { font-size: 56px; line-height: 1.02; letter-spacing: -2px; }
.page-head p { font-size: 20px; line-height: 1.5; color: var(--ink-2); max-width: 40rem; }
.page-body { padding-bottom: 64px; }

.form { display: flex; flex-direction: column; gap: 22px; padding-block: 8px 24px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.form small { font-weight: 400; color: var(--muted); }
.form input, .form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 400 17px var(--font);
}
.form textarea { min-height: 110px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form .hp { position: absolute; left: -5000px; }
.form__msg { min-height: 1.4em; font-size: 15px; color: var(--muted); }

/* ---------- homepage columns ---------- */
.cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  margin-top: 24px;
  padding-block: 32px 64px;
  border-top: 1px solid var(--line);
}
.cols__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cols h2 { font-size: 18px; margin-bottom: 4px; }
.cols p { color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.stack a, .cols__item > a { text-decoration: none; }
.stack a:hover, .cols__item > a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.more { padding-top: 32px; }
.more h2 { font-size: 14px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.more ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.more a { font-weight: 700; }
.more span { color: var(--muted); }
.foot { margin-top: auto; border-top: 1px solid var(--line); background: var(--soft-2); }
.foot__in {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px 32px;
  padding-block: 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
.foot p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; }
.foot nav a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; }

.prefs { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 12px 40px rgba(23, 21, 27, .18); }
.prefs::backdrop { background: rgba(23, 21, 27, .45); }
.prefs form { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; }
.prefs h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.prefs__lede { margin: 0; color: var(--muted); font-size: 15px; }
.prefs__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.prefs__row span { display: flex; flex-direction: column; gap: 2px; }
.prefs__row b { font-size: 16px; }
.prefs__row small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.prefs__row input { appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 2px 0 0; border-radius: 99px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
.prefs__row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.prefs__row input:checked { background: var(--ink); }
.prefs__row input:checked::after { transform: translateX(18px); }
.prefs__row input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.prefs__note { margin: 0; font-size: 13px; color: var(--muted); }
.prefs__btns { display: flex; gap: 8px; }
.prefs__btns .btn { flex: 1; min-height: 44px; }
.prefs__more { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .prefs__row input, .prefs__row input::after { transition: none; } }
.linkish { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.foot nav .prefs { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 12px 40px rgba(23, 21, 27, .18); }
.prefs::backdrop { background: rgba(23, 21, 27, .45); }
.prefs form { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; }
.prefs h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.4px; }
.prefs__lede { margin: 0; color: var(--muted); font-size: 15px; }
.prefs__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer; }
.prefs__row span { display: flex; flex-direction: column; gap: 2px; }
.prefs__row b { font-size: 16px; }
.prefs__row small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.prefs__row input { appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 2px 0 0; border-radius: 99px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
.prefs__row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.prefs__row input:checked { background: var(--ink); }
.prefs__row input:checked::after { transform: translateX(18px); }
.prefs__row input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.prefs__note { margin: 0; font-size: 13px; color: var(--muted); }
.prefs__btns { display: flex; gap: 8px; }
.prefs__btns .btn { flex: 1; min-height: 44px; }
.prefs__more { font-size: 13px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .prefs__row input, .prefs__row input::after { transition: none; } }
.linkish { color: var(--muted); }
.foot nav .linkish:hover { color: var(--ink); text-decoration: underline; }
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--ink);
  color: #fff;
  font-size: 14px;
}
.consent a { color: #fff; }
.consent div { display: flex; gap: 8px; }
.consent button { min-height: 36px; padding: 6px 14px; border: 1px solid #fff; border-radius: 6px; background: #fff; color: var(--ink); font: 700 14px var(--font); }
.consent button.ghost { background: transparent; color: #fff; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
}

/* ---------- tablet ---------- */
@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 36px 32px; }
  .hero h1 { font-size: clamp(44px, 9vw, 68px); }
  .row { grid-template-columns: 96px minmax(0, 1fr); padding-block: 16px; }
  .row .media--row { width: 96px; height: 96px; grid-row: span 2; align-self: start; }
  .row .vote { display: grid; grid-column: 2; gap: 10px; }
  .row__lede { display: none; }
  .row .vote__btns { grid-template-columns: 140px 140px; justify-content: start; }
  .cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 52rem) {
  .case-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .case-side { padding-top: 0; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------- phone ---------- */
@media (max-width: 40rem) {
  body { font-size: 16px; }
  .hero__links span { display: none; }
  .wordmark { font-size: 24px; }
  .mast__in { padding-block: 14px; }
  .mast__nav { gap: 6px 18px; font-size: 15px; }
  .hero { padding-block: 26px 24px; gap: 28px; }
  .hero h1 { font-size: 40px; letter-spacing: -1.5px; }
  .hero__lede { font-size: 17px; }
  .today .media { height: 170px; }
  .today__body { padding: 16px; gap: 10px; }
  .today h2 { font-size: 24px; letter-spacing: -.6px; }
  .vote--big button { min-height: 50px; }
  .vote--card { padding: 18px; }

  .ad--placeholder.ad--banner { height: 100px; }
  .ad__d { display: none; }
  .ad__m { display: inline; }

  .section-head h2 { font-size: 24px; }
  .row { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding-block: 14px; align-items: start; }
  .row .media--row { width: 76px; height: 76px; }
  .row__q { font-size: 18px; }
  .row .bar, .row .meter, .row .vote__more { display: none; }
  .row .vote__btns { grid-template-columns: 1fr 1fr; gap: 6px; justify-content: stretch; }
  .row .vote button { min-height: 38px; font-size: 14px; }
  .vote__result { gap: 6px; }

  .case-head h1 { font-size: 36px; letter-spacing: -1.3px; line-height: 1.05; }
  .lede { font-size: 18px; }
  .case-main { gap: 18px; }
  .hero-fig { margin-inline: -16px; }
  .hero-fig figcaption { padding-inline: 16px; }
  .media--hero { height: 260px; border-radius: 0; }
  .sides { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .more-item { grid-template-columns: 64px minmax(0, 1fr); }
  .media--thumb { width: 64px; height: 64px; }
  .quiz__q { font-size: 24px; }
  .page-head { padding-block: 32px 18px; }
  .page-head h1, .term-head h1 { font-size: 40px; letter-spacing: -1.5px; }
  .page-head p { font-size: 17px; }
  .definition { font-size: 18px; }
  .quiz-list a { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 14px; padding-block: 18px; }
  .quiz-list .media--quiz { width: 76px; height: 76px; grid-row: 1 / span 3; align-self: start; }
  .quiz-list h3 { font-size: 20px; }
  .quiz-list span { grid-row: auto; grid-column: 2; }
  .media--quizhero { height: 200px; }
  .foot__in { flex-direction: column; }
  .consent { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- house ad (chm.lol) ----------
   Cards, card backs, the pack and the color buddy are the game's own CSS, copied from
   the Chromadie repo (src/lib/pack/packCard.css and pack.css). Layout rules after that
   are ours. Solid card stock + ink border + hard drop, like the game's printed cards. */
@font-face { font-family: 'Silkscreen'; src: url('/assets/fonts/silkscreen-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
.xp, .xp-row { --pack-font: 'Hanken Grotesk', Arial, sans-serif; }

/* -- from Chromadie packCard.css (card faces, Common to Anomaly) -- */
/* ---------- Color card face (PackCardFace) ----------
   After Balatro's editions (card study v14). Sized from its own width with
   container units. Rarity sets the finish on the card body; on Legendary and
   Anomaly the color is a bordered tile standing off the card in 3D. The color
   itself is never tinted. Every tilted layer keeps a 2px transparent border so
   its visible edge is smoothed, and hides its back so nothing shows through
   the pack card's back mid-flip. */
@property --ce-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
/* How far the color tiles stand off the face: 0 while the pack card flips, so
   they never swing out beside it edge-on, then they rise back out. */
@property --ce-depth { syntax: "<number>"; inherits: true; initial-value: 1; }
.ce { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --ce-depth: 1; transition: --ce-depth .45s cubic-bezier(.2, .8, .3, 1.2) .05s; container-type: inline-size; position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.ce__bob, .ce__wob, .ce__tilt { position: absolute; inset: 0; transform-style: preserve-3d; }
.ce__tilt { transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; }
/* Common to Epic have nothing standing off the card, so they tilt as one flat
   surface under their own perspective. A preserve-3d scene drew a grid of
   seams in Firefox when zoomed. */
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]), .ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) :is(.ce__bob, .ce__wob, .ce__tilt) { transform-style: flat; }
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) .ce__wob { perspective: 450cqw; }
.ce__face, .ce__tile, .ce__seal { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ce__face { position: absolute; inset: 0; overflow: hidden; border: 2px solid transparent; border-radius: calc(6cqw + 2px); background: var(--ce-body, #f4efe2); background-clip: padding-box; box-shadow: inset 0 0 0 .9cqw rgba(0, 0, 0, .12); will-change: transform; }
/* The hard drop under the card is its own layer, drawn like the face (inside a
   transparent border), so its edge stays smooth when the card tilts. A
   box-shadow on a tilted layer is drawn with stepped edges. Common to Epic
   have no drop (owner pick, 2026-10-23); Legendary and Anomaly keep a tinted
   core, like a thick card. */
.ce__drop { position: absolute; inset: 0; border: 2px solid transparent; border-radius: calc(6cqw + 2px); background: var(--ce-drop, rgba(0, 0, 0, .32)); background-clip: padding-box; transform: translateY(2.8cqw); backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; }
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) .ce__drop { display: none; }
.ce[data-tier="4"] { --ce-drop: #8a560f; }
.ce[data-tier="5"] { --ce-drop: #1c1236; }
.ce__ed, .ce__rays, .ce__rule, .ce__vortex, .ce__slice, .ce__scan { position: absolute; pointer-events: none; }
.ce__ed { inset: 0; }
.ce__win { position: absolute; inset: 7cqw 7cqw 43cqw; border-radius: 3.4cqw; background: var(--ce-color); box-shadow: inset 0 0 0 1cqw rgba(0, 0, 0, .13); }
/* Common to Epic (printed card, owner pick 2026-10-29): a paper card in a thick
   ink frame, and the color window in an ink rim with a hard drop under it.
   Legendary and Anomaly keep their own edges. */
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) { --ce-body: #fbfaf6; }
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) .ce__face { box-shadow: inset 0 0 0 3.8cqw #101014; }
/* On the dark canvas the ink frame would melt into the page; a thin grey edge keeps the card's outline. */
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) .ce__win { box-shadow: 0 0 0 1.1cqw #101014, 0 1.4cqw 0 1.1cqw #101014; }
.ce__txt { position: absolute; left: 6cqw; right: 6cqw; bottom: 19cqw; display: grid; justify-items: center; gap: 1.6cqw; color: var(--ce-tx, #2b2a33); font-family: Silkscreen, var(--pack-font, Inter, ui-sans-serif, system-ui, sans-serif); text-align: center; }
.ce__txt b { font-size: 9.6cqw; font-weight: 400; line-height: 1; letter-spacing: -.02em; }
/* The hex is the card's name; the score is what it added to your hand (owner
   pick, 2026-10-29): smaller, softer and set apart. */
.ce__txt span { margin-top: .6cqw; padding: .8cqw 2.4cqw; border-radius: 99px; background: rgba(255, 255, 255, .88); color: color-mix(in srgb, var(--ce-tx, #2b2a33) 70%, transparent); font: 700 6.8cqw/1 "Bricolage Grotesque Variable", var(--pack-font, Inter, ui-sans-serif, system-ui, sans-serif); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ce__badge { position: absolute; left: 50%; bottom: 6cqw; padding: 1.8cqw 4.4cqw 2cqw; border-radius: 99px; background: var(--ce-k); color: #fff; font: 400 5.4cqw/1 Silkscreen, var(--pack-font, Inter, ui-sans-serif, system-ui, sans-serif); white-space: nowrap; transform: translateX(-50%); border: max(1.5px, 1cqw) solid #101014; box-shadow: 0 max(1.5px, 1cqw) 0 #101014; }
/* Legendary and Anomaly: your color as a thick tile standing off the card. */
.ce__tile { position: absolute; left: 7cqw; right: 7cqw; top: 7cqw; bottom: 43cqw; border: 2px solid transparent; border-radius: calc(3.4cqw + 2px); background-color: var(--ce-color); background-clip: padding-box; pointer-events: none; box-shadow: inset 0 0 0 .7cqw rgba(255, 255, 255, .14), 0 3cqw 5cqw -2cqw rgba(0, 0, 0, .4); animation: ce-float 3s ease-in-out infinite alternate; }
.ce[data-tier="4"] .ce__win, .ce[data-tier="5"] .ce__win { background: color-mix(in oklab, var(--ce-color), black 24%); }
.ce__seal { position: absolute; right: 2.5cqw; top: 2.5cqw; display: grid; place-items: center; width: 17cqw; aspect-ratio: 1; border: 2px solid transparent; border-radius: 50%; background-color: #f08a12; background-clip: padding-box; color: #fff3d6; font: 400 8cqw/1 var(--pack-font, Inter, ui-sans-serif, system-ui, sans-serif); box-shadow: inset 0 0 0 1.3cqw #ffb14a, 0 1cqw 0 rgba(0, 0, 0, .28); transform: translateZ(calc(30px * var(--ce-depth))) rotate(-10deg); }

.ce[data-tier="0"] { --ce-k: #6f6e7c; }
.ce[data-tier="1"] { --ce-k: #3fb487; }
.ce:is([data-tier="0"], [data-tier="1"], [data-tier="2"], [data-tier="3"]) .ce__ed { inset: 3.8cqw; border-radius: 2.4cqw; background-position: calc(50% + (var(--mx) - 50%) * -.2) calc(50% + (var(--my) - 50%) * -.2); }
/* Common (owner pick, 2026-10-30, "D"): graph paper drawn in a pale mix of the
   card's own color, the quietest print, so the tiers step grid, dots, stripes, checks. */
.ce[data-tier="0"] .ce__ed { --g: max(5.6cqw, 6px); --gl: color-mix(in oklab, var(--ce-color) 28%, #fbfaf6); background-image: linear-gradient(var(--gl) max(.5cqw, 1px), transparent 0), linear-gradient(90deg, var(--gl) max(.5cqw, 1px), transparent 0); background-size: var(--g) var(--g); }
.ce[data-tier="1"] .ce__ed { --dot: max(1.6cqw, 2px); background-image: radial-gradient(circle, #cfeee0 0 var(--dot), transparent calc(var(--dot) + .5px)); background-size: max(5.8cqw, 7px) max(5.8cqw, 7px); }
.ce[data-tier="2"] { --ce-k: #009dff; }
.ce[data-tier="2"] .ce__ed { --stripe: max(2.6cqw, 2.5px); background-image: repeating-linear-gradient(-45deg, #d6ecfb 0 var(--stripe), transparent var(--stripe) calc(var(--stripe) * 2)); background-size: calc(var(--stripe) * 5.657) calc(var(--stripe) * 5.657); }
.ce[data-tier="3"] { --ce-k: #8f4fe0; }
.ce[data-tier="3"] .ce__ed { background-image: repeating-conic-gradient(#cdb4f5 0 25%, transparent 0 50%); background-size: max(8.4cqw, 8px) max(8.4cqw, 8px); }
.ce[data-tier="3"] .ce__ed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 0 calc(var(--mx) - 16%), rgba(255, 255, 255, .55) calc(var(--mx) - 16%) calc(var(--mx) - 7%), transparent calc(var(--mx) - 7%) calc(var(--mx) - 3%), rgba(255, 255, 255, .35) calc(var(--mx) - 3%) var(--mx), transparent var(--mx)); }
/* Legendary (Gilded): a polished gold card with an engraved sunburst and an orange crowned seal. */
.ce[data-tier="4"] { --ce-k: #f07d0c; --ce-body: linear-gradient(165deg, #7a5214 0%, #f2d184 20%, #b5832a 36%, #fff0c4 50%, #9c6c1c 66%, #e9c25e 82%, #7a5214 100%); --ce-tx: #4a2c04; }
.ce[data-tier="4"] .ce__face { background-size: 100% 260%; background-position: 50% var(--my); box-shadow: inset 0 0 0 .6cqw rgba(90, 56, 8, .35); }
.ce__rays { inset: 0; background: repeating-conic-gradient(from 0deg at 50% 36%, rgba(255, 255, 255, .2) 0 1deg, transparent 1deg 6deg); }
.ce__rule { inset: 3.6cqw; border-radius: 3.6cqw; box-shadow: inset 0 0 0 .4cqw rgba(90, 56, 8, .4); }
.ce[data-tier="4"] .ce__txt b { text-shadow: 0 .35cqw 0 rgba(255, 240, 200, .6); }
.ce[data-tier="4"] .ce__tile { box-shadow: inset 0 0 0 1.5cqw #fff3cf, inset 0 0 0 1.9cqw rgba(0, 0, 0, .22), 0 3cqw 5cqw -2cqw rgba(0, 0, 0, .45); }
/* Anomaly (Corrupted): a dark card over a slow vortex with a turning rainbow edge,
   your color as a stack of three tiles, and every few seconds the card corrupts. */
.ce[data-tier="5"] { --ce-k: #15121f; --ce-body: #140f24; --ce-tx: #f6f2ff; }
.ce[data-tier="5"] .ce__txt span { background: rgba(20, 15, 36, .85); }
.ce[data-tier="5"] .ce__face { box-shadow: none; animation: ce-corrupt 3.4s steps(1) infinite; }
.ce__vortex { inset: -30%; background: conic-gradient(from var(--ce-ang) at 50% 43%, #3b1a6e, #0d3550, #5a1650, #123f5c, #2b1160, #0d3550, #3b1a6e); animation: ce-spin 16s linear infinite; }
.ce__vortex::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from var(--ce-ang) at 50% 43%, rgba(255, 255, 255, .08) 0 1.5deg, transparent 1.5deg 12deg); animation: ce-spin 10s linear infinite reverse; }
.ce[data-tier="5"] .ce__ed { padding: 2.6cqw; border-radius: 6cqw; background: conic-gradient(from var(--ce-ang), hsl(0 95% 64%), hsl(50 95% 60%), hsl(130 85% 55%), hsl(190 95% 58%), hsl(255 95% 70%), hsl(315 90% 64%), hsl(360 95% 64%)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: ce-spin 3.5s linear infinite, ce-surge 5s ease-in-out infinite; }
.ce__scan { inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.ce__slice { left: 0; right: 0; height: 6cqw; background: linear-gradient(90deg, hsl(0 95% 64%), hsl(50 95% 60%), hsl(130 85% 55%), hsl(190 95% 58%), hsl(255 95% 70%), hsl(315 90% 64%), hsl(360 95% 64%)); mix-blend-mode: difference; opacity: 0; animation: ce-slice 3.4s steps(1) infinite; }
.ce[data-tier="5"] .ce__txt b { text-shadow: -.5cqw 0 rgba(255, 60, 130, .65), .5cqw 0 rgba(60, 200, 255, .65); }
.ce[data-tier="5"] .ce__badge { background: linear-gradient(90deg, #ff6a6a, #ffd34d, #5ee08a, #55c8ff, #b67bff, #ff6a6a); background-size: 200% 100%; color: #15121f; animation: ce-badge 3s linear infinite; }
.ce[data-tier="5"] .ce__tile { box-shadow: inset 0 0 0 1.3cqw #fff, inset 0 0 0 1.9cqw #101014, 0 0 0 .7cqw #101014, 0 3cqw 5cqw -2cqw rgba(0, 0, 0, .5); animation: ce-float-big 2.6s ease-in-out infinite alternate, ce-tear 3.4s steps(1) infinite; }
.ce[data-tier="5"] .ce__tile--echo { animation: none; background-color: color-mix(in oklab, var(--ce-color), black 14%); box-shadow: inset 0 0 0 1.3cqw rgba(255, 255, 255, .5), 0 0 0 .7cqw rgba(16, 16, 20, .6); transform: translateZ(calc(16px * var(--ce-depth))); }
.ce[data-tier="5"] .ce__tile--deep { background-color: color-mix(in oklab, var(--ce-color), black 30%); transform: translateZ(calc(7px * var(--ce-depth))); }

@keyframes ce-spin { to { --ce-ang: 360deg; } }
@keyframes ce-float { from { transform: translateZ(calc(12px * var(--ce-depth))); } to { transform: translateZ(calc(26px * var(--ce-depth))); } }
@keyframes ce-float-big { from { transform: translateZ(calc(24px * var(--ce-depth))); } to { transform: translateZ(calc(40px * var(--ce-depth))); } }
@keyframes ce-bob { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(-2.6cqw) rotate(1.2deg); } }
@keyframes ce-surge { 0%, 78%, 100% { filter: brightness(1) saturate(1); } 85% { filter: brightness(1.55) saturate(1.35); } }
@keyframes ce-badge { to { background-position: 200% 0; } }
@keyframes ce-slice { 0%, 70%, 100% { opacity: 0; top: 20%; } 72% { opacity: .9; top: 22%; translate: 4cqw 0; } 75% { opacity: .9; top: 61%; height: 3cqw; translate: -6cqw 0; } 78% { opacity: .8; top: 38%; height: 9cqw; translate: 2cqw 0; } 81% { opacity: 0; } }
@keyframes ce-corrupt { 0%, 70%, 100% { translate: 0 0; filter: none; } 72% { translate: 1.5cqw 0; filter: hue-rotate(60deg) saturate(1.4); } 75% { translate: -2cqw 0; filter: hue-rotate(-50deg); } 78% { translate: .8cqw 0; filter: invert(.15); } 81% { translate: 0 0; filter: none; } }
@keyframes ce-tear { 0%, 70%, 100% { translate: 0 0; clip-path: none; } 72% { translate: -3cqw 0; clip-path: inset(0 0 55% 0); } 75% { translate: 3cqw 0; clip-path: inset(40% 0 0 0); } 78% { translate: -1cqw 0; clip-path: inset(20% 0 30% 0); } 81% { translate: 0 0; clip-path: none; } }

/* The big card in the reveal bobs gently. Small cards (the finale row) drop to
   the hex and rarity and stay still until hovered. */
@container (min-width: 141px) {
  .ce__bob { animation: ce-bob 3.4s ease-in-out infinite alternate; }
}
@container (max-width: 140px) {
  .ce__txt { bottom: 20cqw; }
  .ce__txt span { display: none; }
  .ce__txt b { font-size: 10.6cqw; }
  .ce__badge { padding: 2cqw 4cqw 2.4cqw; font-size: 7.6cqw; }
  .ce__seal { width: 22cqw; font-size: 11cqw; }
}
/* Phone-sized cards (the finale row is about 65px wide): Silkscreen is drawn
   on an 8px grid, so the hex holds at 8px and the badge at 6.5px, tightened. */
@container (max-width: 90px) {
  .ce__txt { left: 3cqw; right: 3cqw; bottom: 22cqw; }
  .ce__txt b { font-size: 8px; letter-spacing: -.04em; }
  .ce__badge { bottom: 5cqw; padding: 2px 4px 3px; font-size: 6.5px; letter-spacing: -.02em; }
}
@media (prefers-reduced-motion: reduce) {
  .ce *, .ce *::before, .ce *::after { animation: none !important; }
}


/* -- from Chromadie pack.css (pack, card-back digits, color buddy) -- */
.pack-digits { position: absolute; inset: -2cqw; overflow: hidden; color: rgba(255, 255, 255, .09); font: 500 4.4cqw/1.25 ui-monospace, Menlo, monospace; letter-spacing: .12em; word-break: break-all; pointer-events: none; }
.pack-buddy-tag { position: absolute; left: 50%; top: 50%; width: var(--bs, 40cqw); transform: translate(-50%, -50%); }
.pack-buddy-tag__cube { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 26%; background: var(--bc); box-shadow: 0 0 0 calc(var(--bs, 40cqw) * .045) #101014, 0 calc(var(--bs, 40cqw) * .09) 0 calc(var(--bs, 40cqw) * .045) #101014; transition: background-color .5s ease; }
.pack-buddy-tag__eye { position: absolute; top: 36%; left: 29%; width: 10%; height: 19%; border-radius: 99px; background: #101014; transform: translate(var(--ex, 0px), var(--ey, 0px)); transition: transform .12s ease-out; animation: pack-buddy-blink 4.6s infinite; }
.pack-buddy-tag__eye--r { left: auto; right: 29%; }
.pack-buddy-tag__cheek { position: absolute; top: 62%; left: 13%; width: 13%; height: 7%; border-radius: 99px; background: #ff6aa8; opacity: .6; }
.pack-buddy-tag__cheek--r { left: auto; right: 13%; }
.pack-buddy-tag__code { position: absolute; left: 50%; top: calc(100% + var(--bs, 40cqw) * .2); padding: .35em .6em .4em; border: calc(var(--bs, 40cqw) * .022) solid #101014; border-radius: .45em; background: #fff; color: #101014; font: 400 calc(var(--bs, 40cqw) * .16)/1 Silkscreen, var(--pack-font); letter-spacing: .02em; white-space: nowrap; transform: translateX(-50%) rotate(-3deg); box-shadow: 0 calc(var(--bs, 40cqw) * .03) 0 #101014; }
@keyframes pack-buddy-blink { 0%, 94%, 100% { scale: 1 1; } 96% { scale: 1 .12; } }
.cpk__top, .cpk__body { position: absolute; left: 0; right: 0; overflow: hidden; background: #0d0d12; }
.cpk__top { top: 0; height: 17%; z-index: 2; clip-path: polygon(0 4cqw, 4% 0, 8% 4cqw, 12% 0, 16% 4cqw, 20% 0, 24% 4cqw, 28% 0, 32% 4cqw, 36% 0, 40% 4cqw, 44% 0, 48% 4cqw, 52% 0, 56% 4cqw, 60% 0, 64% 4cqw, 68% 0, 72% 4cqw, 76% 0, 80% 4cqw, 84% 0, 88% 4cqw, 92% 0, 96% 4cqw, 100% 0, 100% 100%, 0 100%); }
.cpk__body { top: 17%; bottom: 0; z-index: 3; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4cqw), 96% 100%, 92% calc(100% - 4cqw), 88% 100%, 84% calc(100% - 4cqw), 80% 100%, 76% calc(100% - 4cqw), 72% 100%, 68% calc(100% - 4cqw), 64% 100%, 60% calc(100% - 4cqw), 56% 100%, 52% calc(100% - 4cqw), 48% 100%, 44% calc(100% - 4cqw), 40% 100%, 36% calc(100% - 4cqw), 32% 100%, 28% calc(100% - 4cqw), 24% 100%, 20% calc(100% - 4cqw), 16% 100%, 12% calc(100% - 4cqw), 8% 100%, 4% calc(100% - 4cqw), 0 100%); }
.cpk__top::before, .cpk__body::before { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 10cqw; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1px, rgba(255, 255, 255, .12) 1px 2px, transparent 2px 5px), linear-gradient(180deg, #3a3a46, #17171c); }
.cpk__top::before { top: 0; }
.cpk__body::before { bottom: 0; }
.cpk__top::after, .cpk__body::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 16%, rgba(255, 255, 255, .1) 40%, rgba(255, 255, 255, .18) 47%, rgba(255, 255, 255, 0) 58%, rgba(0, 0, 0, 0) 82%, rgba(0, 0, 0, .42)); }
.cpk__tear { position: absolute; left: 0; right: 0; bottom: 4cqw; z-index: 3; text-align: center; color: #f2f2f6; font: 400 4.4cqw/1 Silkscreen, var(--pack-font); letter-spacing: .08em; text-transform: uppercase; }
.cpk__slit { position: absolute; left: 0; top: calc(17% - 1px); z-index: 4; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, rgba(242, 242, 246, .75) 0 4px, transparent 4px 8px); }
.cpk__slit i { position: absolute; left: 0; top: -1px; width: 0; height: 4px; border-radius: 2px; background: #fff; }
.cpk__label { position: absolute; left: 9cqw; right: 9cqw; top: 5cqw; z-index: 3; display: grid; gap: 2.6cqw; padding: 5cqw 6cqw; border: 2.5px solid #000; border-radius: 4cqw; background: #101014; color: #f2f2f6; box-shadow: 0 4px 0 #000; transform: rotate(-2deg); }
.cpk__label span { color: #a9a9b6; font: 400 4.1cqw/1 Silkscreen, var(--pack-font); letter-spacing: .06em; text-transform: uppercase; }
.cpk__label b { font: 400 9.6cqw/1 Silkscreen, var(--pack-font); letter-spacing: -.01em; }
.cpk__body .pack-buddy-tag { --bs: 48cqw; top: auto; bottom: 30cqw; transform: translateX(-50%); z-index: 3; }
.cpk__body .pack-buddy-tag__code { top: calc(100% - var(--bs) * .1); }
.cpk__foot { position: absolute; left: 8cqw; bottom: 13cqw; z-index: 3; color: #9a9aa8; font: 400 3.7cqw/1 Silkscreen, var(--pack-font); letter-spacing: .06em; text-transform: uppercase; }

/* -- ad layout (ours) -- */
.xp { display: block; min-width: 0; container-type: inline-size; }
.xp__box { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center;
  padding: 18px 28px 16px; background: #f2f2f6; color: #101014; border: 1.5px solid #101014; border-radius: 12px; box-shadow: 0 2px 0 #101014; }

.xp__stage { position: relative; display: grid; gap: 14px; justify-items: center; }
.xp__cards { display: flex; gap: 12px; }
.hcard { position: relative; width: 94px; aspect-ratio: 5 / 7; flex: none; }
.hcard__back, .hcard__front { position: absolute; inset: 0; }
.hcard__back { container-type: inline-size; overflow: hidden; border: 2.5px solid #2a2a31; border-radius: 10px; background: #f2f2f6; background-clip: padding-box; outline: 1px solid transparent; }
.hcard__panel { position: absolute; inset: 6cqw; overflow: hidden; border-radius: 3.6cqw; background: #0d0d12; }
.hcard__back .pack-buddy-tag { --bs: 44cqw; top: 46%; }
.hcard__front[hidden] { display: none; }
.hcard .ce__bob { animation: none; }
.hcard .ce__txt, .xp-row__card .ce__txt { bottom: 25cqw; }
/* sealed: the cards are still inside the pack, the ladder waits */
.xp:not(.is-open) .hcard { visibility: hidden; }
[data-xp="wide"]:not(.is-open) .xp__ladder { visibility: hidden; }

/* the pack sits over the card row until it tears */
.cpk { position: absolute; left: 50%; top: -6px; width: 128px; aspect-ratio: 1 / 1.52; translate: -50% 0; padding: 0; border: 0; background: none; cursor: pointer;
  container-type: inline-size; filter: drop-shadow(0 5px 0 #000); z-index: 3; animation: cpk-wiggle 3.2s ease-in-out 1s infinite; }
.cpk:focus-visible { outline: 3px solid #009dff; outline-offset: 6px; border-radius: 8px; }
.cpk:hover { animation-duration: 1.1s; }
@keyframes cpk-wiggle { 0%, 82%, 100% { rotate: 0deg; } 86% { rotate: -4deg; } 90% { rotate: 3.5deg; } 94% { rotate: -2deg; } }
.cpk .pack-buddy-tag__code { font-size: 9px; }
.xp__hint { position: absolute; left: 50%; top: calc(100% - 14px); translate: -50% 0; z-index: 4; padding: 5px 8px 6px; border: 2px solid #101014; border-radius: 6px; background: #fff;
  font: 400 9px/1 Silkscreen, monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 0 #101014; transition: opacity .2s; }
.xp.is-open .xp__hint, .xp.is-open .cpk { pointer-events: none; }
.xp.is-open .xp__hint { opacity: 0; }

/* the rarity ladder, Common to Anomaly */
.xp__ladder { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.xp__ladder i { font: 400 8px/1 Silkscreen, monospace; letter-spacing: .02em; text-transform: uppercase; font-style: normal; padding: 4px 6px 5px; border-radius: 99px;
  border: 1.5px solid #101014; background: #fff; color: #101014; transition: background .25s, color .25s, transform .25s; }
.xp__ladder i[data-t="0"] { background: #6f6e7c; color: #fff; }
.xp__ladder i[data-t="1"] { background: #3fb487; color: #fff; }
.xp__ladder i[data-t="2"] { background: #009dff; color: #fff; }
.xp__ladder i[data-t="3"] { background: #8f4fe0; color: #fff; }
.xp__ladder i[data-t="4"] { background: #f07d0c; color: #fff; }
.xp__ladder i[data-t="5"] { background: linear-gradient(90deg, #ff6a6a, #ffd34d, #5ee08a, #55c8ff, #b67bff, #ff6a6a); background-size: 200% 100%; color: #15121f; animation: ce-badge 3s linear infinite; }
.xp__ladder i.top { transform: translateY(-2px); box-shadow: 0 2px 0 #101014; }
.xp__over { position: absolute; inset: 0; z-index: 5; display: none; }
.xp.is-done .xp__over { display: block; }

.xp__copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 6px; align-items: center; min-width: 0; color: #101014; text-decoration: none; }
.xp__copy > :not(.xp__cta) { grid-column: 1; }
.xp__copy .xp__cta { grid-column: 2; grid-row: 1 / span 3; }
.xp__copy:hover { color: #101014; }
.xp__brand { display: flex; align-items: center; gap: 8px; font: 400 13px/1 Silkscreen, monospace; letter-spacing: .06em; text-transform: uppercase; }
.xp__brand img { border-radius: 6px; }
.xp__h { font-size: 26px; line-height: 1.08; font-weight: 800; letter-spacing: -.8px; text-wrap: balance; }
.xp__result { min-height: 0; font: 400 11px/1.3 Silkscreen, monospace; letter-spacing: .03em; text-transform: uppercase; color: #101014; }
.xp__result:empty { display: none; }
.xp__p { font-size: 15px; line-height: 1.5; color: #3b3a44; max-width: 52ch; }
.xp__cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px; border: 2.5px solid #101014; border-radius: 10px; background: #101014; color: #fff;
  font: 400 14px/1 Silkscreen, monospace; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 4px 0 #ff6aa8; transition: transform .12s, box-shadow .12s; }
.xp__copy:hover .xp__cta { transform: translateY(-2px); box-shadow: 0 6px 0 #ff6aa8; }
.xp__copy:active .xp__cta { transform: translateY(2px); box-shadow: 0 2px 0 #ff6aa8; }
.xp.is-done .xp__cta { animation: xp-nudge .6s ease .2s both; }
@keyframes xp-nudge { 0%, 100% { scale: 1; } 35% { scale: 1.06; } 70% { scale: .98; } }

/* narrow container: stack */
@container (max-width: 860px) {
  .xp__box { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 20px; }
  .xp__copy { grid-template-columns: minmax(0, 1fr); }
  .xp__copy .xp__cta { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .xp__h { font-size: 24px; }
}
@container (max-width: 560px) {
  .xp__cards { gap: 8px; }
  .hcard { width: 72px; }
  .cpk { width: 106px; }
}
@container (max-width: 420px) {
  .xp__cards { gap: 6px; }
  .hcard { width: 58px; }
  .cpk { width: 92px; }
  .xp__ladder i { font-size: 7px; padding: 3px 5px 4px; }
}
@container (max-width: 330px) { .hcard { width: 50px; } .xp__cards { gap: 5px; } }

/* native in-feed row: same shape as a vote row */
.xp--row { container-type: normal; }
.xp-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 250px 132px; gap: 28px; align-items: center; padding: 18px 0; color: var(--ink); text-decoration: none; }
.xp-row:hover { color: var(--ink); }
.xp-row__card { width: 80px; aspect-ratio: 5 / 7; justify-self: center; }
.xp-row__card .ce__bob { animation: none; }
.xp-row__main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xp-row__q { font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -.5px; }
.xp-row__q [data-top-hex] { font-family: Silkscreen, monospace; font-weight: 400; font-size: .82em; letter-spacing: 0; }
.xp-row__sub { font-size: 15px; color: var(--muted); }
.xp-row__by { font-size: 13px; color: var(--faint); }
.xp-row__by .xp__tag { display: inline; margin: 0; }
.xp-row__side { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.xp-row__side .xp__ladder { justify-content: flex-start; opacity: 1; }
.xp-row__pull { font: 400 10px/1.2 Silkscreen, monospace; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.xp-row__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border-radius: 6px; background: #101014; color: #fff; font: 400 12px/1 Silkscreen, monospace; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 0 #ff6aa8; }
.xp-row:hover .xp-row__cta { transform: translateY(-1px); box-shadow: 0 4px 0 #ff6aa8; }
@media (max-width: 60rem) {
  .xp-row { grid-template-columns: 96px minmax(0, 1fr); row-gap: 10px; padding-block: 16px; }
  .xp-row__card { grid-row: span 3; width: 72px; align-self: start; }
  .xp-row__side, .xp-row__cta { grid-column: 2; }
  .xp-row__cta { justify-self: start; }
}
@media (max-width: 40rem) {
  .xp-row { grid-template-columns: 76px minmax(0, 1fr); column-gap: 14px; }
  .xp-row__card { width: 64px; }
  .xp-row__q { font-size: 18px; }
  .xp-row__sub { display: none; }
  .xp-row__side .xp__ladder { display: none; }
  .xp-row__cta { justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .cpk, .xp__ladder i, .xp__cta { animation: none !important; transition: none !important; }
}
/* smallest ad cards (phones): lift the hex clear of the badge */
@container (max-width: 66px) { .hcard .ce__txt { bottom: 27.5cqw; } .hcard .ce__badge { bottom: 4cqw; } }

/* Glossary extras, case links, hubs */
.updated { font-size: 14px; color: var(--muted); }
.sources { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.guides { padding-top: 40px; }
.guides h2 { font-size: 22px; margin-bottom: 12px; }
.case-links { font-size: 15px; color: var(--muted); }
.case-links a { text-decoration: underline; }
.hub-head { padding-bottom: 8px; }
.hub-intro { padding-bottom: 8px; }
.term-fig { margin-top: 24px; }
.term-fig .media--hero { height: 360px; }
@media (max-width: 40rem) { .term-fig .media--hero { height: 220px; } }

/* Quiz as plain HTML (hidden once JS takes over), and the list of results */
.js .quiz-static { display: none; }
.quiz-static__qs { display: flex; flex-direction: column; gap: 22px; padding-left: 22px; }
.quiz-static__qs h2 { font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.quiz-static__qs ul { padding-left: 18px; color: var(--ink-2); }
.quiz-results { margin-top: 8px; padding-block: 16px; border-top: 1px solid var(--line); }
.quiz-results summary { cursor: pointer; font-weight: 700; }
.quiz-results dl { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.quiz-results dt { font-weight: 700; margin-top: 10px; }
.quiz-results dd { margin: 0; color: var(--ink-2); line-height: 1.55; }

/* ---------- girl math calculator ---------- */
.gm-head { padding-bottom: 16px; }
.gm { display: flex; flex-direction: column; gap: 20px; padding-bottom: 40px; }
.gm-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.gm-presets button { font: inherit; font-weight: 700; color: var(--ink); background: var(--accent-tint); border: 1px solid var(--accent-track); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.gm-presets button:hover { border-color: var(--accent); color: var(--accent-hover); }
.gm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 40px; align-items: start; }
.gm-form { display: flex; flex-direction: column; gap: 18px; }
.gm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.gm-f { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 15px; }
.gm-f--wide { grid-column: 1 / -1; }
.gm-f small { font-weight: 400; color: var(--muted); font-size: 13px; margin-top: -4px; }
.gm-f input, .gm-f select { font: inherit; font-weight: 500; font-size: 17px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; margin-top: auto; }
.gm-f input:focus, .gm-f select:focus { outline: none; border-color: var(--accent); }
.gm-pay, .gm-more { border: 0; margin: 0; padding: 0; min-width: 0; }
.gm-pay legend, .gm-more legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.gm-more legend small { font-weight: 400; color: var(--muted); margin-left: 6px; }
.gm-more { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.gm-pay { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-pay legend { width: 100%; }
.gm-pay label { cursor: pointer; }
.gm-pay input { position: absolute; opacity: 0; pointer-events: none; }
.gm-pay span { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 15px; font-weight: 600; }
.gm-pay input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.gm-pay input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.gm-check { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; cursor: pointer; align-self: end; padding-bottom: 12px; }
.gm-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.gm-out { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.gm-verdict { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: 10px; background: var(--soft); }
.gm-verdict b { font-size: 30px; line-height: 1.1; letter-spacing: -.8px; }
.gm-verdict span { color: var(--ink-2); font-size: 15px; }
.gm-verdict--win { background: var(--accent); color: #fff; }
.gm-verdict--win span { color: #fff; opacity: .92; }
.gm-r { font-family: "SF Mono", ui-monospace, Menlo, Consolas, "Courier New", monospace; font-size: 13.5px; line-height: 1.4; background: #fffdf8; color: var(--ink); padding: 22px 22px 30px; border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(23, 21, 27, .06); position: relative;
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 10px repeat-x; }
.gm-r__shop { text-align: center; font-weight: 700; font-size: 18px; letter-spacing: 1px; }
.gm-r__meta { text-align: center; color: var(--muted); font-size: 12px; margin-top: 2px; }
.gm-r__rule { border-top: 1px dashed var(--line-strong); margin: 12px 0; }
.gm-r__line { display: flex; justify-content: space-between; gap: 14px; padding: 4px 0; }
.gm-r__line span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.gm-r__line small { color: var(--faint); font-size: 12px; }
.gm-r__line b { font-weight: 500; white-space: nowrap; }
.gm-r__line--item b, .gm-r__line--item span { font-weight: 700; }
.gm-r__total { font-size: 16px; }
.gm-r__total span, .gm-r__total b { font-weight: 700; }
.gm-r__real { color: var(--muted); font-size: 12.5px; text-align: center; }
.gm-r__bars { height: 38px; margin: 14px 20px 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px, var(--ink) 8px 11px, transparent 11px 13px); }
.gm-r__foot { text-align: center; font-size: 11.5px; color: var(--muted); letter-spacing: .5px; }
.gm-share button { cursor: pointer; }
.gm-msg { font-size: 14px; color: var(--muted); min-height: 1.4em; }
.gm-copy { padding-top: 16px; }
@media (max-width: 52rem) {
  .gm-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gm-out { position: static; }
}
@media (max-width: 40rem) {
  .gm-row { grid-template-columns: minmax(0, 1fr); }
  .gm-check { padding-bottom: 0; }
  .gm-verdict b { font-size: 26px; }
}
.gm-mini { display: none; }
@media (max-width: 52rem) {
  .gm-mini:not([hidden]) { display: flex; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border: 0; border-radius: 12px; background: var(--ink); color: #fff; font: inherit; font-size: 16px; box-shadow: 0 6px 24px rgba(23, 21, 27, .25); cursor: pointer; text-align: left; }
  .gm-mini b { font-size: 18px; }
  .gm-mini span { font-size: 14px; opacity: .85; white-space: nowrap; }
  .gm-mini.gm-mini--win:not([hidden]) { background: var(--accent); }
}
/* boy math mode */
.gm-mode { align-items: center; }
.gm-mode .gm-mode__l { width: auto; margin: 0 6px 0 0; }
.gm-mode span { font-size: 16px; padding: 9px 18px; }
.gm-boy, .gm-presets [data-mode="boy"] { display: none !important; }
.gm--boy .gm-girl, .gm--boy .gm-presets [data-mode="girl"] { display: none !important; }
.gm--boy .gm-boy { display: flex !important; }
.gm--boy .gm-presets [data-mode="boy"] { display: inline-block !important; }
.gm--boy .gm-verdict--win, .gm--boy .gm-mini.gm-mini--win:not([hidden]) { background: var(--ink); }
.gm-r__lore { text-align: center; font-size: 12.5px; margin-top: 12px; padding: 0 8px; }
.gm-r__lore b { display: block; font-size: 11.5px; letter-spacing: .5px; margin-bottom: 2px; }