/* games.ofork.dev — "The Scoresheet". The binding spec is DESIGN.md next to
   this file: one continuous ruled sheet, printed black on the whitest stock
   the printer has, with named columns whose hairlines run unbroken from the
   table head to the last fixture. The site never speaks in vermilion; only
   the visitor does, and every accent mark on the page is something this
   person did on this device.

   Rules this file keeps, and which a script can check:
   - one committed light theme; the file answers no colour-scheme preference
   - no hex outside :root (the wordmark's one literal lives in marketplace.js)
   - one shadow recipe (--press) on one component (a.mk-play), and its collapse
   - no radius above 1px, no gradient, no translucency, no web font, no url()
   - the class vocabulary is DESIGN.md section 5; the renderer emits nothing
     this file does not name. */

:root {
  color-scheme: light;

  --bg: #FFFFFF;
  --ink: #111316;
  --muted: #63686E;
  --line: #D6D8DC;
  --rule: var(--ink);
  --accent: #E4231A;
  --accent-ink: #FFFFFF;
  --wash: #FCEEEC;
  --well: #F7F7F8;
  --good: #12663C;
  --warn: #7E6000;
  --critical: #9B0E5C;
  --focus: #111316;
  --focus-on-accent: #FFFFFF;
  --backdrop: rgba(17, 19, 22, .55);
  --press: 3px 3px 0 0 var(--ink);

  --font-head: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-fig: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --gut: 18px;
  --wrap: 1280px;
  --t: 120ms;
}
@media (min-width: 820px) { :root { --gut: 28px; } }
@media (min-width: 1200px) { :root { --gut: 40px; } }

/* ---------- ground ---------- */

* { box-sizing: border-box; }
/* the renderer hides the flash band, a field error and the phone play bar by
   setting .hidden; a class that sets display must never win against that. */
[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.45 var(--font-text);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
::selection { background: var(--wash); }

.mk-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--gut);
}
.mk-main { display: block; padding-bottom: 64px; }
.mk-main:focus { outline: none; }

.mk-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 14px;
  font: 700 11px/1 var(--font-head);
  letter-spacing: .17em;
  text-transform: uppercase;
}
.mk-skip:focus { left: 0; }
.mk-noscript {
  margin: 0;
  padding: 18px var(--gut);
  border-bottom: 1px solid var(--line);
  font: 400 13px/1.45 var(--font-text);
}
.mk-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- type ---------- */

.mk-display-1,
.mk-display-2 {
  margin: 0;
  font: 800 46px/.98 var(--font-head);
  letter-spacing: -.045em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.mk-h1 {
  margin: 0;
  font: 800 26px/1.04 var(--font-head);
  letter-spacing: -.04em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.mk-h2 {
  margin: 0;
  font: 800 26px/1.06 var(--font-head);
  letter-spacing: -.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.mk-h2--sm { font-size: 20px; }
.mk-h3 {
  margin: 0;
  font: 800 20px/1.1 var(--font-head);
  letter-spacing: -.035em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
@media (min-width: 820px) {
  .mk-display-1, .mk-display-2 { font-size: 64px; }
  .mk-h1 { font-size: 46px; }
  .mk-h3 { font-size: 26px; }
}
.mk-lead {
  margin: 0;
  font: 400 15px/1.4 var(--font-text);
  max-width: 34ch;
  text-wrap: pretty;
}
@media (min-width: 620px) { .mk-lead { font-size: 15px; max-width: 42ch; } }
@media (min-width: 820px) { .mk-lead { font-size: 20px; } }
.mk-small {
  margin: 0;
  font: 400 13px/1.45 var(--font-text);
  max-width: 34ch;
  text-wrap: pretty;
}
@media (min-width: 620px) { .mk-small { max-width: 42ch; } }
.mk-label {
  font: 700 10px/1 var(--font-head);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
}
.mk-data {
  font: 400 13px/1.35 var(--font-fig);
}
.mk-data-sm {
  font: 500 11px/1.2 var(--font-fig);
  letter-spacing: .04em;
}
.mk-index {
  font: 700 20px/1 var(--font-fig);
  letter-spacing: .02em;
}

/* ---------- the nib: a printed register mark, never a fill ---------- */

.mk-lamp {
  flex: none;
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--muted);
  vertical-align: baseline;
}
.mk-lamp--good { background: var(--good); }
.mk-lamp--warn { background: var(--warn); }
.mk-lamp--critical { background: var(--critical); }
.mk-lamp--accent { background: var(--accent); }
.mk-lamp--lit { background: var(--ink); }
.mk-lamp--off { background: var(--muted); }

/* ---------- controls ---------- */

.mk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: 700 13px/1 var(--font-head);
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: transform 80ms linear;
}
/* the border step is the hover; a ground colour here would be --well outside
   the two places §1 permits it (the send preview and the locked-mark well). */
.mk-btn:hover { text-decoration: none; }
.mk-btn:active { transform: translateY(1px); }
.mk-btn--ghost { border-color: var(--line); }
.mk-btn--ghost:hover { border-color: var(--ink); }
.mk-btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.mk-btn--accent:hover { background: color-mix(in srgb, var(--accent) 96%, var(--ink)); }
.mk-btn--accent:focus-visible { outline-color: var(--focus-on-accent); outline-offset: -4px; }
.mk-btn--sm { padding: 6px 10px; font-size: 11px; }
.mk-btn[disabled] { color: var(--muted); border-color: var(--line); background: var(--well); cursor: default; }
.mk-linkbtn,
.mk-reportlink {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: 400 13px/1.45 var(--font-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mk-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: 700 11px/1 var(--font-head);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 80ms linear;
}
.mk-chip small { font: 500 11px/1 var(--font-fig); color: var(--muted); }
.mk-chip:hover { border-color: var(--ink); }
.mk-chip:active { transform: translateY(1px); }
.mk-chip[aria-pressed="true"],
.mk-chip[aria-checked="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.mk-chip[aria-pressed="true"] small,
.mk-chip[aria-checked="true"] small { color: var(--bg); }

input[type="text"],
input[type="url"],
input[type="search"],
input[type="file"],
textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 1px;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.4 var(--font-text);
}
input[type="search"] { -webkit-appearance: none; appearance: none; }
textarea { resize: vertical; }
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-bottom: 2px solid var(--ink);
}
input[disabled] { background: var(--well); color: var(--muted); }
textarea.mk-data { font-family: var(--font-fig); }

/* ---------- masthead ---------- */

.mk-header {
  background: var(--bg);
  border-bottom: 2px solid var(--rule);
  padding: 16px 0 12px;
}
.mk-header-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 20px;
  /* start, not end: the record block is the tallest thing in this row, and
     with `end` it dragged the wordmark to the bottom of it. The mark is the
     top of the page. */
  align-items: start;
}
@media (min-width: 620px) {
  .mk-header-in {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "mark strap record"
      "nav search account";
  }
  .mk-wordmark--h { grid-area: mark; }
  .mk-strap { grid-area: strap; }
  .mk-record { grid-area: record; justify-self: end; align-self: start; }
  /* the second masthead line still sets on one line: only the top row is
     start-aligned, because the record is tall and the mark leads it. */
  .mk-nav { grid-area: nav; align-self: center; }
  .mk-search { grid-area: search; justify-self: end; align-self: center; }
  .mk-account { grid-area: account; justify-self: end; align-self: center; }
}
.mk-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
}
.mk-wordmark:hover { text-decoration: none; }
.mk-wordmark svg { display: block; width: auto; }
.mk-wordmark--h svg { height: 30px; }
.mk-wordmark--f svg { height: 22px; }
.mk-strap { display: none; color: var(--muted); }
@media (min-width: 620px) { .mk-strap { display: block; } }
.mk-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.mk-nav a,
.mk-account-handle {
  font: 700 10px/1 var(--font-head);
  letter-spacing: .17em;
  text-transform: uppercase;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.mk-nav a[aria-current="page"] { border-bottom-color: var(--ink); }
.mk-account { display: flex; align-items: center; gap: 10px; }
.mk-account-handle {
  font-family: var(--font-fig);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.mk-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 320px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--bg);
}
.mk-search input {
  border: 0;
  padding: 8px 0;
  font-size: 13px;
}
.mk-search input:focus-visible { outline-offset: 4px; border-bottom: 0; }
.mk-search kbd {
  font: 500 11px/1 var(--font-fig);
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 2px 5px;
}

/* ---------- the record: the visitor's own marks ---------- */

.mk-record {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}
@media (min-width: 620px) { .mk-record { align-items: flex-end; width: auto; } }
.mk-record-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mk-record-count { color: var(--muted); }
.mk-standing {
  padding: 4px 8px;
  border: 1px solid var(--line);
  font: 700 13px/1 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.mk-record[data-record="ok"] .mk-standing { border: 2px solid var(--ink); }
.mk-record[data-record="blocked"] .mk-standing { border: 1px solid var(--line); color: var(--muted); }
.mk-record-clear { align-self: center; }
.mk-meter {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.mk-meter-cells { display: flex; gap: 4px; }
.mk-meter-cell {
  display: block;
  width: 30px;
  height: 22px;
  border: 1px solid var(--line);
  background: var(--bg);
}
@media (min-width: 620px) { .mk-meter-cell { width: 34px; } }
.mk-meter-cell--filled {
  background: var(--accent);
  border-color: var(--accent);
}
.mk-slot--quest {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.mk-slot--quest .mk-label { color: inherit; font-size: 10px; letter-spacing: .1em; }
.mk-slot--quest:hover { text-decoration: none; border-style: solid; }
.mk-slot--entered {
  background: var(--accent);
  border-style: solid;
  color: var(--accent-ink);
  width: auto;
  padding: 0 8px;
}
.mk-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mk-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.mk-mark .mk-label { color: inherit; }
.mk-mark--locked {
  border: 1px solid var(--line);
  background: var(--well);
  color: var(--muted);
}
.mk-record-note { color: var(--muted); max-width: 46ch; }
@media (min-width: 620px) { .mk-record-note { text-align: right; } }

/* the stamp: dated, serialled, pressed once */
.mk-stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 9px;
  border: 2px solid var(--accent);
  background: var(--bg);
  color: var(--accent);
  transform: rotate(-3deg);
  text-align: center;
}
.mk-stamp .mk-label { color: inherit; letter-spacing: .12em; font-size: 11px; }
.mk-stamp-serial { color: inherit; letter-spacing: .12em; }
/* an outline on the sheet's own ground, not a filled well: on arrival the
   only thing that may be tinted is the visitor's record, and this slot is
   the absence of one. */
.mk-stamp--empty {
  border: 1px dashed var(--line);
  background: none;
  color: var(--muted);
  transform: none;
}
.mk-stamp--empty .mk-label { color: var(--muted); }
@keyframes mk-press {
  0% { transform: rotate(-3deg) scale(1.6); opacity: 0; }
  60% { transform: rotate(-3deg) scale(.92); opacity: 1; }
  100% { transform: rotate(-3deg) scale(1); opacity: 1; }
}
.mk-stamp--fresh { animation: mk-press 140ms ease-out 1; }

/* ---------- running head, notices ---------- */

.mk-ticker {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mk-ticker-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-height: 34px;
  padding-block: 8px;
}
.mk-ticker-track .mk-label + .mk-label::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 12px;
  background: var(--ink);
  vertical-align: middle;
}
.mk-notice {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mk-notice .mk-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 10px;
  font-size: 13px;
}

/* ---------- the sheet: one component, three densities ---------- */

.mk-table {
  container-type: inline-size;
  margin: 0 0 24px;
}
.mk-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--rule);
}
.mk-table--hero .mk-rows { border-top: 0; }
.mk-thead { display: none; }
.mk-colhead {
  font: 700 10px/1 var(--font-head);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 10px;
}

.mk-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "pos  text"
    "plate plate"
    "rail rail"
    "host host"
    "p    p";
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  transition: background var(--t) linear;
}
.mk-row > .mk-index { grid-area: pos; }
.mk-row > .mk-cover-link { grid-area: plate; }
.mk-row > * { min-width: 0; }
.mk-row-text { grid-area: text; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mk-row .mk-facts--rail { grid-area: rail; }
.mk-row-host { grid-area: host; min-width: 0; }
.mk-row-p { grid-area: p; min-width: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-row-p .mk-play { flex: 1 1 auto; justify-content: center; }
.mk-row:hover { border-bottom-color: var(--ink); }
/* the hover inverts the POS block to ink, never to the accent: an accent POS
   block means "I opened this" (§7, no accent drift), and a cursor is not an
   act. The rule-weight step above carries the hover on its own. */
.mk-row:hover > .mk-index {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.mk-row--played { background: var(--wash); border-bottom-color: var(--accent); }
.mk-row--gated .mk-cover { opacity: .55; }
.mk-row--down .mk-row-host { color: var(--critical); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mk-row--down .mk-row-host .mk-lamp { background: var(--critical); }

.mk-row > .mk-index {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
}
.mk-row--hero > .mk-index {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
/* Last, and named tightly enough to beat both `.mk-row > .mk-index` and the
   hover rule above: the inverted POS block is the visitor's mark, so it is
   the one state on a row that nothing else may paint over. */
.mk-row > .mk-index.mk-index--played,
.mk-row--hero > .mk-index.mk-index--played {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* reduced table form: the plate keeps 160px, nothing is hidden */
@container (min-width: 820px) {
  .mk-thead {
    display: grid;
    grid-template-columns: 44px 160px minmax(0, 1fr) 92px 132px;
    border-top: 2px solid var(--rule);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .mk-colhead--4, .mk-colhead--5, .mk-colhead--6, .mk-colhead--7 { display: none; }
  .mk-colhead + .mk-colhead { border-left: 1px solid var(--line); }
  .mk-rows { border-top: 0; }
  .mk-row {
    grid-template-columns: 44px 160px minmax(0, 1fr) 92px 132px;
    grid-template-areas:
      "pos plate text host p"
      "pos plate rail host p";
    gap: 0;
    padding: 0;
  }
  .mk-row > * { padding: 14px 10px; align-content: start; }
  .mk-row > .mk-cover-link,
  .mk-row-text,
  .mk-row .mk-facts--rail,
  .mk-row-host,
  .mk-row-p { border-left: 1px solid var(--line); }
  .mk-row > .mk-index { align-self: stretch; height: auto; }
  .mk-row .mk-facts--rail { padding-top: 0; }
  /* nowrap with the direction: in a column, `flex-basis: 100%` on the
     disclosure is a HEIGHT, and a wrapping column would break into a second
     column that runs off the right edge of the cell. */
  .mk-row-p { align-items: flex-start; flex-direction: column; flex-wrap: nowrap; }
  .mk-row-p .mk-play { flex: none; align-self: stretch; }
}

/* full table form: the nine named columns, the rail dissolved into them */
@container (min-width: 1100px) {
  .mk-thead {
    grid-template-columns: 44px 200px minmax(0, 1fr) 132px 76px 72px 92px 92px 132px;
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .mk-colhead--4, .mk-colhead--5, .mk-colhead--6, .mk-colhead--7 { display: block; }
  .mk-row {
    grid-template-columns: 44px 200px minmax(0, 1fr) 132px 76px 72px 92px 92px 132px;
    grid-template-areas: "pos plate text in ori size session host p";
  }
  .mk-row .mk-facts--rail { display: contents; }
  .mk-fact--in { grid-area: in; }
  .mk-fact--ori { grid-area: ori; }
  .mk-fact--size { grid-area: size; }
  .mk-fact--session { grid-area: session; }
  /* The four stat tracks are wide enough for the longest declared value to
     wrap at a space, and words are never broken: a column of five-character
     fragments is not a value lining up in its column. */
  .mk-row .mk-fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 14px 10px;
    border-left: 1px solid var(--line);
    overflow-wrap: normal;
    hyphens: none;
  }
  /* the column head is the rubric at this density (the rail is dissolved),
     so the in-cell one is taken off the page but kept for a screen reader,
     because .mk-thead is aria-hidden. */
  .mk-row:not(.mk-row--hero) .mk-fact .mk-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* the hero is the same row at 2x, after the container blocks so it wins */
.mk-hero { padding-top: 20px; }
.mk-row--hero {
  border-bottom-width: 1px;
  gap: 14px;
  padding: 0 0 24px;
}
.mk-row--hero > * { padding: 0; }
.mk-row--hero .mk-cover-link { max-width: 520px; }
.mk-row--hero .mk-row-text { gap: 12px; }
.mk-row--hero .mk-row-p { flex-direction: column; align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.mk-row--hero .mk-facts--rail { display: flex; }
@media (min-width: 820px) {
  .mk-row--hero {
    grid-template-columns: 44px minmax(0, 520px) minmax(0, 1fr);
    grid-template-areas:
      "pos plate text"
      ".   plate rail"
      ".   plate host"
      ".   plate p";
    column-gap: 28px;
    align-items: start;
  }
  /* the table's column ruling stops at the hero: these two are named because
     the container rules that draw them (`.mk-row > .mk-cover-link`,
     `.mk-row .mk-facts--rail`) outrank a bare `.mk-row--hero > *`. */
  .mk-row--hero > .mk-cover-link,
  .mk-row--hero .mk-facts--rail,
  .mk-row--hero > *,
  .mk-row--hero .mk-fact { border-left: 0; padding: 0; }
  .mk-row--hero .mk-facts--rail { display: flex; grid-area: rail; }
  .mk-row--hero .mk-row-p { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .mk-row--hero .mk-row-p .mk-play { flex: none; }
}
.mk-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.mk-kicker .mk-label { color: var(--ink); }
.mk-kicker .mk-label + .mk-label { color: var(--muted); }
.mk-kicker > span + span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  background: var(--ink);
  vertical-align: middle;
}

/* the grid: the same component in card form, on creator pages */
.mk-grid {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 20px;
  border-top: 2px solid var(--rule);
  padding-top: 8px;
}
@media (min-width: 620px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- the plate ---------- */

.mk-cover-link { display: block; text-decoration: none; }
.mk-cover-link:hover { text-decoration: none; }
.mk-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--ink);
  border-radius: 1px;
  background: var(--bg);
  overflow: hidden;
}
.mk-cover-img,
.mk-cover-tile {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mk-cover-tile-ground { fill: var(--bg); }
.mk-cover-tile-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.mk-cover-tile-ink { fill: var(--ink); }
.mk-cover-tile-hit { fill: var(--accent); }
.mk-cover-tile-frame { fill: none; stroke: var(--ink); stroke-width: 1; }
.mk-cover .mk-stamp {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.mk-flag {
  display: inline-block;
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- maker line, badges, printed states ---------- */

.mk-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
}
.mk-byline .mk-small { max-width: 42ch; color: var(--muted); }
.mk-who {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.mk-who-name { font: 400 13px/1.4 var(--font-text); }
.mk-who .mk-data { color: var(--muted); }
.mk-avatar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: 700 13px/1 var(--font-fig);
}
.mk-avatar--32 { width: 32px; height: 32px; font-size: 11px; }
.mk-avatar--40 { width: 40px; height: 40px; }
.mk-avatar--64 { width: 64px; height: 64px; font-size: 20px; }
.mk-badge-host,
.mk-badge-made {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 7px;
  border: 1px solid var(--line);
  font: 500 11px/1.2 var(--font-fig);
  letter-spacing: .04em;
  min-width: 0;
}
.mk-badge-host span { overflow-wrap: anywhere; }
.mk-badge-made { text-transform: uppercase; letter-spacing: .1em; }
.mk-verified,
.mk-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1.2 var(--font-fig);
  letter-spacing: .04em;
}
.mk-verified[data-verified="unverified"] { color: var(--muted); }
.mk-verified[data-verified="unverified"] .mk-lamp { display: none; }
.mk-verified[data-verified="creator-checked"] { color: var(--good); }
.mk-verified[data-verified="reported-down"] { color: var(--critical); }
.mk-status { text-transform: uppercase; letter-spacing: .1em; }
.mk-status[data-status="live"] { color: var(--good); }
.mk-status[data-status="unlisted"] { color: var(--warn); }
.mk-status[data-status="draft"] { color: var(--muted); }
.mk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.mk-tags span {
  font: 500 11px/1 var(--font-fig);
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 3px 6px;
}

/* ---------- facts, rails ---------- */

.mk-facts--rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  min-width: 0;
}
.mk-fact {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.mk-fact .mk-data-sm { color: var(--ink); }
.mk-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 20px 0 0;
  border-top: 1px solid var(--line);
}
.mk-facts > div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.mk-facts dt { margin: 0; }
.mk-facts dd { margin: 0; overflow-wrap: anywhere; }
.mk-facts > .mk-fact--wide { grid-template-columns: minmax(0, 1fr); gap: 4px; }

/* ---------- browse: chips, orders, count ---------- */

.mk-browse { padding: 28px 0 12px; }
.mk-browse-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.mk-count { color: var(--muted); margin: 0; }
.mk-browse .mk-marks { margin-bottom: 14px; }
.mk-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--gut) * -1);
  padding: 4px var(--gut) 12px;
  scrollbar-width: thin;
}
.mk-chips .mk-chip { scroll-snap-align: start; }
.mk-chips--wrap {
  flex-wrap: wrap;
  overflow: visible;
  margin-inline: 0;
  padding-inline: 0;
}
.mk-sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding-bottom: 16px;
}
.mk-sort > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mk-sort > p { margin: 0; }

/* ---------- empties, skeleton ---------- */

.mk-empty {
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--line);
  padding: 32px 0;
  margin-bottom: 24px;
}
.mk-empty .mk-h1 { font-size: 26px; }
.mk-empty .mk-small { margin: 10px 0 18px; }
.mk-home-empty { padding-top: 32px; }
.mk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.mk-actions--secondary { gap: 8px; }
.mk-skeleton { min-height: 96px; }
.mk-skeleton > .mk-index { color: var(--muted); }

/* ---------- game page ---------- */

.mk-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 16px 0;
  font: 400 13px/1.35 var(--font-fig);
  color: var(--muted);
}
.mk-crumbs a { color: var(--ink); }
.mk-game {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 960px) {
  .mk-game { grid-template-columns: 7fr 5fr; gap: 0; }
  .mk-game-plate { padding-right: 40px; }
  .mk-game-copy { padding-left: 40px; border-left: 1px solid var(--line); }
}
.mk-game-plate { min-width: 0; }
.mk-game-plate .mk-flag { margin-top: 8px; }
.mk-game-copy { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mk-game-copy .mk-kicker { margin: 0; }
.mk-flags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--warn);
}
.mk-creator {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.mk-creator-who { display: flex; flex-direction: column; gap: 2px; }
.mk-creator-who .mk-data { color: var(--muted); }
.mk-hostline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.mk-playwrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.mk-playwrap-note {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  max-width: none;
  font-size: 13px;
}
.mk-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font: 800 15px/1 var(--font-head);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 80ms linear, box-shadow 80ms linear;
}
/* The one shadow recipe, and it is spent on the one control that has to be
   the most pressable object on the page: the hero's Play and the game
   page's. Stamped down a column of rows it would rank nothing. The key
   travel stays on every Play. */
a.mk-play--xl { box-shadow: var(--press); }
a.mk-play:hover {
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 96%, var(--ink));
}
a.mk-play:active { transform: translateY(1px); }
a.mk-play--xl:active { box-shadow: 0 0 0 0 var(--ink); }
a.mk-play:focus-visible { outline-color: var(--focus-on-accent); outline-offset: -4px; }
.mk-play svg { flex: none; }
.mk-play--xl { padding: 14px 22px; font-size: 20px; }
.mk-play--gated,
.mk-play--onion,
.mk-play--invalid {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font: 400 13px/1.45 var(--font-text);
}
.mk-play--gated .mk-lamp,
.mk-play--onion .mk-lamp,
.mk-play--invalid .mk-lamp { margin-top: 5px; }
.mk-play--invalid { color: var(--critical); }
.mk-play--gated .mk-small,
.mk-play--onion .mk-small,
.mk-play--invalid .mk-small { max-width: 42ch; min-width: 0; overflow-wrap: anywhere; }
.mk-play--gated .mk-data,
.mk-play--onion .mk-data,
.mk-play--invalid .mk-data { overflow-wrap: anywhere; }
.mk-disclosure {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
}
.mk-wire {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
}
.mk-wire-node {
  font: 400 13px/1.35 var(--font-fig);
  border: 1px solid var(--line);
  padding: 4px 8px;
  overflow-wrap: anywhere;
}
.mk-wire-line {
  position: relative;
  display: block;
  width: 2px;
  height: 24px;
  margin-left: 18px;
  background: var(--ink);
}
.mk-wire-line::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -1px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 7px solid var(--ink);
}
@media (min-width: 620px) {
  .mk-wire { flex-direction: row; align-items: center; gap: 0; }
  .mk-wire-line { width: 48px; height: 2px; margin: 0 0; }
  .mk-wire-line::after {
    left: auto;
    right: -1px;
    bottom: -3px;
    border: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid var(--ink);
  }
}
.mk-wire-off { margin: 8px 0 0; color: var(--muted); }
.mk-wire-off s { color: var(--muted); }
.mk-before {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.mk-before-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.mk-before-head .mk-data-sm { color: var(--muted); }
.mk-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) { .mk-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mk-check {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.mk-check + .mk-check { border-left: 1px solid var(--line); padding-left: 12px; }
/* submit step 1 draws five of these as <fieldset>, whose UA border is a 2px
   groove on all four sides: unset the two this file does not draw, or the
   step prints five bevelled boxes (§7 bans drawn depth). */
fieldset.mk-check {
  border-top: 0;
  border-right: 0;
  margin: 0;
  min-width: 0;
}
.mk-check > legend { padding: 0; }
.mk-check-value { display: flex; align-items: center; gap: 6px; }
.mk-check .mk-small { color: var(--muted); }
.mk-description { padding: 28px 0; }
.mk-description p { margin: 0 0 14px; max-width: 68ch; text-wrap: pretty; }
.mk-reportline { margin: 0 0 32px; }
.mk-playbar {
  position: sticky;
  bottom: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border-top: 2px solid var(--rule);
  padding: 10px var(--gut);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}
.mk-playbar .mk-h3 {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 960px) { .mk-playbar { display: none; } }

/* ---------- creator page ---------- */

.mk-creator-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 24px 0;
  border-bottom: 2px solid var(--rule);
  margin-bottom: 24px;
}
@media (min-width: 620px) {
  .mk-creator-head {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 20px;
  }
}
.mk-creator-head-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mk-creator-head-text .mk-data { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--muted); }
.mk-blurb { color: var(--muted); }
.mk-creator-head-text .mk-data-sm { color: var(--muted); }

/* ---------- submit ---------- */

.mk-submit { padding-bottom: 40px; }
.mk-submit-head { padding: 24px 0 12px; }
.mk-submit-head .mk-small { margin-top: 6px; color: var(--muted); }
.mk-steps {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin: 0 0 24px;
  padding: 0;
}
.mk-step-mark {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.mk-step-mark + .mk-step-mark { border-left: 0; }
.mk-step-mark .mk-index {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  font-size: 13px;
}
.mk-step-mark--current { color: var(--ink); }
/* only the numeral is reversed out of the ink block; the step's name is set
   on the white panel and must stay ink, or the current step reads as a bare
   numeral with no label. */
.mk-step-mark--current .mk-index {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.mk-step-mark--current .mk-label { color: var(--ink); }
.mk-step-mark--current { border-color: var(--ink); }
.mk-step-mark--done { color: var(--ink); border-color: var(--accent); }
.mk-step-mark--done .mk-index {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.mk-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 720px;
  border-top: 2px solid var(--rule);
  padding-top: 24px;
}
.mk-field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mk-field legend { padding: 0; }
.mk-field--error input,
.mk-field--error textarea { border-color: var(--critical); }
.mk-hint { margin: 0; font: 400 13px/1.4 var(--font-text); color: var(--muted); max-width: 46ch; }
.mk-hint--error { display: flex; align-items: center; gap: 6px; color: var(--critical); }
.mk-choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.mk-choices--col { flex-direction: column; gap: 8px; }
.mk-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.mk-choice input { accent-color: var(--ink); }
.mk-hostcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 620px) { .mk-hostcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-hostcard {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  cursor: pointer;
}
.mk-hostcard:hover { border-color: var(--ink); }
.mk-hostcard-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-hostcard .mk-h3 { font-size: 15px; letter-spacing: 0; }
.mk-hostcard .mk-small { color: var(--muted); }
.mk-checkresult {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 13px;
}
.mk-review {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--line);
}
.mk-review > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.mk-review dt, .mk-review dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mk-review dd { font: 400 13px/1.4 var(--font-text); }
.mk-review .mk-small { color: var(--muted); }
.mk-sendpreview { border-top: 2px solid var(--rule); padding-top: 16px; }
.mk-sendpreview pre {
  margin: 12px 0;
  padding: 14px;
  background: var(--well);
  border: 1px solid var(--line);
  font: 400 13px/1.5 var(--font-fig);
  overflow-x: auto;
  white-space: pre;
}
.mk-sendpreview .mk-small { color: var(--muted); }
.mk-step-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
}
.mk-cover--preview { max-width: 320px; }
@media (max-width: 819px) {
  .mk-step { min-height: 100dvh; }
  .mk-step-foot {
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 2px solid var(--rule);
    padding: 10px 0;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .mk-steps { position: sticky; top: 0; z-index: 2; background: var(--bg); }
}

/* ---------- comments ---------- */

.mk-thread { padding: 28px 0; border-top: 1px solid var(--line); }
.mk-thread .mk-h2 .mk-data { color: var(--muted); }
.mk-thread-caption { color: var(--muted); margin: 6px 0 0; }
.mk-signin { margin: 16px 0; }
.mk-composer { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 24px; max-width: 620px; }
.mk-composer-input:focus-visible { border-bottom: 2px solid var(--ink); }
.mk-composer-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mk-composer-foot .mk-hint { flex: 1 1 auto; }
.mk-composer-foot .mk-data-sm { color: var(--muted); }
.mk-comments { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mk-comment { padding: 16px 0; border-bottom: 1px solid var(--line); }
.mk-comment-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-comment-head .mk-data-sm { color: var(--muted); }
.mk-comment-body {
  margin: 8px 0 0;
  max-width: 68ch;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.mk-comment-foot { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 12px; }
.mk-comment--pinned .mk-comment-pin { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.mk-comment--pinned .mk-comment-pin::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--accent);
}
.mk-comment--hidden { color: var(--muted); }

/* ---------- sheets ---------- */

.mk-sheet {
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  width: 100%;
  max-width: 100%;
  margin: auto auto 0;
  max-height: 90dvh;
}
.mk-sheet::backdrop { background: var(--backdrop); animation: mk-fade 160ms linear 1; }
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 820px) {
  .mk-sheet { max-width: 440px; margin: auto; }
}
.mk-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  overflow-y: auto;
  max-height: 90dvh;
}
.mk-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mk-sheet-head .mk-h2 { font-size: 20px; }
.mk-sheet .mk-small { color: var(--muted); }

.mk-framebanner { border: 2px solid var(--ink); margin: 16px 0 32px; max-width: 720px; }
.mk-framebanner-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
}
.mk-framebanner-frame { border: 0; border-radius: 0; }
.mk-board .mk-thread + .mk-thread { margin-top: 8px; }

/* ---------- imprint ---------- */

.mk-footer { border-top: 2px solid var(--rule); }
.mk-footer-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  padding: 24px var(--gut) 40px;
}
.mk-footer-in .mk-small { color: var(--muted); }
.mk-footer-nav { display: flex; gap: 18px; align-items: center; }
.mk-footer-nav a,
.mk-footer-nav .mk-linkbtn { font-size: 13px; }
.mk-footer-figure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  margin-left: auto;
  color: var(--muted);
}
.mk-footer-figure .mk-label { border: 1px solid var(--line); padding: 4px 6px; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
  }
  .mk-btn:active,
  .mk-chip:active,
  a.mk-play:active { transform: none; }
}

/* Hosting stays inside the marketplace sheet. */
#host-your-own{scroll-margin-top:24px;padding:32px var(--gut) 40px;border-top:1px solid currentColor}.mk-hosting-guide{margin:20px 0;max-width:820px}.mk-hosting-guide summary{cursor:pointer;font-weight:600;padding:10px 0}.mk-hosting-guide li{margin:12px 0}.mk-hosting-guide p{line-height:1.6}

.mk-main > .mk-wrap.mk-browse { padding-inline: var(--gut); }


/* September 12 owner correction: art-led discovery within the same marketplace. */
.mk-header { border-bottom: 1px solid var(--line); }
.mk-header-in { display: flex; align-items: center; gap: 32px; padding-block: 24px; }
.mk-header .mk-wordmark { width: 166px; flex: 0 0 166px; }
.mk-header .mk-nav { display: flex; gap: 24px; margin: 0; padding: 0; border: 0; flex: 1; }
.mk-header .mk-nav a { font-size: 12px; letter-spacing: 0; text-transform: none; padding: 8px 0; }
.mk-header .mk-search { margin: 0; width: 210px; flex: 0 1 210px; }
.mk-header .mk-account { margin: 0; }
.mk-header .mk-btn { padding: 10px 14px; text-transform: none; letter-spacing: 0; }
.mk-discover { padding-top: 42px; }
.mk-discover-intro { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 34px; }
.mk-discover-intro .mk-label { margin: 0 0 14px; }
.mk-discover-intro h1 { margin: 0; font-size: clamp(34px,4vw,52px); font-weight: 750; line-height: 1.06; letter-spacing: -.05em; }
.mk-discover-intro h1 span { color: var(--muted); }
.mk-discover-intro > p { margin: 0 0 4px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.mk-chess-feature { display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid var(--line); min-width: 0; }
.mk-chess-art { position: relative; display: block; min-width: 0; overflow: hidden; background: var(--ink); color: var(--bg); }
.mk-chess-art img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1.45; }
.mk-art-caption { position: absolute; left: 24px; top: 24px; padding: 8px 10px; background: var(--ink); font: 600 11px/1 var(--font-fig); letter-spacing: .13em; }
.mk-art-credit { position: absolute; right: 12px; bottom: 12px; padding: 4px 7px; background: var(--ink); font-size: 10px; }
.mk-chess-info { display: flex; flex-direction: column; padding: 32px; justify-content: center; min-width: 0; }
.mk-feature-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 30px; }
.mk-free { color: var(--good); font-size: 12px; font-weight: 600; white-space: nowrap; }
.mk-chess-info h2 { margin: 0 0 18px; font-size: clamp(32px,3.5vw,48px); line-height: 1.05; letter-spacing: -.045em; font-weight: 750; }
.mk-chess-info h2 span { display: block; color: var(--muted); }
.mk-chess-description { font-size: 14px; line-height: 1.7; margin: 0 0 22px; color: var(--muted); }
.mk-chess-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.mk-chess-tags span { border: 1px solid var(--line); padding: 5px 9px; font-size: 11px; }
.mk-chess-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mk-chess-actions .mk-btn { flex: 1; justify-content: space-between; padding: 15px 16px; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.mk-demo-note { margin: 15px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mk-creator-invite { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; margin: 0; border-bottom: 1px solid var(--line); }
.mk-creator-invite .mk-label { font-size: 9px; }
.mk-creator-invite h2 { font-size: 17px; font-weight: 600; margin: 7px 0 0; letter-spacing: -.025em; }
.mk-inline-link { font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
#host-your-own.mk-hosting { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; padding: 46px 0 0; border: 0; scroll-margin-top: 24px; }
.mk-hosting-intro .mk-label { margin: 0 0 16px; }
.mk-hosting-intro h2 { margin: 0 0 18px; font-size: 34px; letter-spacing: -.04em; line-height: 1.12; }
.mk-hosting-intro p:not(.mk-label) { color: var(--muted); max-width: 43ch; line-height: 1.7; font-size: 14px; margin-bottom: 22px; }
.mk-hosting-intro .mk-btn { padding: 13px 16px; text-transform: none; letter-spacing: 0; gap: 24px; }
.mk-hosting-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ink); padding: 0 0 16px; }
.mk-hosting-heading .mk-data-sm { color: var(--muted); }
.mk-hosting-guide { margin: 0; border-bottom: 1px solid var(--line); }
.mk-hosting-guide summary { display: flex; gap: 16px; align-items: baseline; list-style: none; padding: 21px 0; font-size: 14px; font-weight: 600; }
.mk-hosting-guide summary::-webkit-details-marker { display: none; }
.mk-hosting-guide summary::after { content: "+"; margin-left: auto; font-size: 18px; font-weight: 400; }
.mk-hosting-guide[open] summary::after { content: "−"; }
.mk-guide-number { font: 11px/1 var(--font-fig); color: var(--muted); }
.mk-hosting-guide p { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.mk-hosting-guide .mk-inline-link { display: inline-block; margin-bottom: 20px; }
.mk-record-drawer { padding-bottom: 24px; }
.mk-record-drawer summary { cursor: pointer; font-size: 13px; }
.mk-record-drawer .mk-record { max-width: 520px; margin-top: 20px; }
.mk-search-heading { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.mk-search-empty { padding: 32px 0; }
.mk-search-empty h2 { font-size: 24px; }
.mk-search-empty p,.mk-catalog-status { color: var(--muted); }
.mk-footer { border-top: 1px solid var(--line); }
.mk-footer-in { padding-block: 24px; }
@media (max-width: 1000px) {
  .mk-header-in { gap: 22px; flex-wrap: wrap; }
  .mk-header .mk-nav { gap: 20px; }
  .mk-header .mk-search { flex-basis: 100%; width: 100%; order: 4; }
  .mk-chess-info { padding: 24px; }
  .mk-feature-label { margin-bottom: 24px; }
  .mk-chess-tags { margin-bottom: 24px; }
  #host-your-own.mk-hosting { gap: 36px; }
}
@media (max-width: 680px) {
  .mk-header-in { padding-block: 18px; gap: 18px; }
  .mk-header .mk-wordmark { width: 142px; flex-basis: 142px; }
  .mk-header .mk-account { margin-left: auto; }
  .mk-header .mk-nav { order: 3; flex-basis: 100%; gap: 24px; }
  .mk-header .mk-search { order: 4; }
  .mk-discover { padding-top: 28px; }
  .mk-discover-intro { display: block; margin-bottom: 26px; }
  .mk-discover-intro > p { margin-top: 16px; font-size: 13px; }
  .mk-discover-intro > p br { display: none; }
  .mk-chess-feature { grid-template-columns: 1fr; }
  .mk-chess-art img { aspect-ratio: 16/10; max-height: 340px; }
  .mk-chess-info { padding: 24px 20px; }
  .mk-feature-label { margin-bottom: 20px; }
  .mk-chess-info h2 { font-size: 36px; }
  .mk-chess-info h2 span { display: block; }
  .mk-chess-actions .mk-btn { padding: 15px 12px; }
  .mk-creator-invite { align-items: flex-start; flex-direction: column; gap: 18px; padding-block: 24px; }
  #host-your-own.mk-hosting { grid-template-columns: 1fr; gap: 30px; padding-top: 32px; }
  .mk-hosting-intro h2 { font-size: 30px; }
  .mk-hosting-intro h2 br { display: none; }
  .mk-footer-figure { margin-left: 0; }
}