/* Everriddle — the Everlyce POS design language, applied to a riddle game.
 *
 * Tokens, component shapes and copy are lifted from the POS app so the two
 * products read as one: same grey page, same white cards, same 12px radius,
 * same blue accent, same badge/button/stat vocabulary. Nothing here is dark;
 * the game chose the POS light theme, so even the "hidden text" puzzles hide
 * by contrast and geometry rather than by darkness.
 */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --border: #e6e8ec;
  --border-2: #d7dbe1;
  --ink: #20242b;
  --ink-2: #414852;
  --muted: #737b87;
  --accent: #3563b8;
  --accent-strong: #294f98;
  --accent-soft: #edf2fa;
  --accent-softer: #f5f7fb;
  --green: #278252;
  --green-soft: #eaf4ee;
  --red: #bf4c46;
  --red-soft: #f9eeed;
  --amber: #ae721f;
  --amber-soft: #faf3e8;
  --blue-soft: #edf2fa;
  --blue: #3563b8;
  --shadow-sm: 0 1px 2px rgba(26, 35, 48, 0.035);
  --shadow: 0 2px 8px rgba(26, 35, 48, 0.045);
  --shadow-lg: 0 18px 48px -22px rgba(18, 27, 42, 0.28);
  --radius: 12px;
  --radius-sm: 8px;
  --green-brand: #17b978;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--accent);
  text-decoration: none;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
}
button {
  font-family: inherit;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection {
  background: #d6e3f6;
}

/* ---------- layout ---------- */

.layout {
  display: flex;
  min-height: 100vh;
  width: 100%;
}
.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 40;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 20px 18px 18px;
}
.brand .logo,
.brand .brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  flex-shrink: 0;
}
.brand .titles {
  line-height: 1.15;
  min-width: 0;
}
.brand .titles strong {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.015em;
}
.brand .titles span {
  font-size: 11px;
  color: var(--muted);
}
.brand .titles span .prod {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.18em;
}

.nav {
  flex: 1;
  padding: 4px 12px 14px;
  overflow-y: auto;
}
.nav .nav-group {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8a919c;
  padding: 19px 12px 7px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 2px 0;
  border-radius: 10px;
  color: #4b535f;
  font-size: 13.5px;
  font-weight: 540;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav a svg {
  width: 17px;
  height: 17px;
  color: #818995;
  stroke-width: 1.8;
}
.nav a:hover {
  background: #f5f6f8;
  color: var(--ink);
}
.nav a:hover svg {
  color: var(--accent);
}
.nav a.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: inset 2px 0 var(--accent);
}
.nav a.active svg {
  color: var(--accent);
}
.nav a .count {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nav a.active .count {
  color: var(--accent);
}

.sidebar .foot {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidebar .foot .foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar .foot .foot-row b {
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sidebar .foot .foot-row span {
  font-size: 12px;
  color: var(--muted);
}

/* level index */
.levelmap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 2px 4px 6px;
}
.levelmap button,
.levelmap a {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  padding: 6px 0;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
}
.levelmap button:hover,
.levelmap a:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.levelmap .done {
  background: var(--green-soft);
  border-color: #cfe6da;
  color: var(--green);
}
.levelmap .done:hover {
  border-color: var(--green);
  color: var(--green);
}
.levelmap .here {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.levelmap .done.here {
  background: var(--green-soft);
  color: var(--green);
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}
.levelmap .locked {
  opacity: 0.5;
  cursor: default;
}
.levelmap .locked:hover {
  border-color: var(--border);
  color: var(--muted);
}
.levelmap .chapter-sep {
  grid-column: 1 / -1;
  height: 9px;
}

.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.progress > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ---------- main ---------- */

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.content-inner {
  flex: 1;
  width: 100%;
  max-width: 940px;
  padding: 0 34px 90px;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 34px 4px;
  flex-wrap: wrap;
}
.topbar h1 {
  font-size: 25px;
  line-height: 1.2;
  font-weight: 720;
  letter-spacing: -0.04em;
}
.topbar .sub {
  font-size: 13px;
  color: var(--muted);
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.card + .card {
  margin-top: 14px;
}
.card.flat {
  box-shadow: none;
}
.card h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
.card p {
  margin: 0 0 12px;
}
.card p:last-child {
  margin-bottom: 0;
}
.muted {
  color: var(--muted);
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* ---------- buttons, badges, fields ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border-2);
  background: var(--surface);
  color: var(--ink);
  border-radius: 9px;
  padding: 9px 15px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.btn svg {
  width: 16px;
  height: 16px;
}
.btn:hover {
  border-color: #c6ccd5;
  background: var(--surface-2);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}
.btn.ghost:hover {
  background: var(--surface-2);
  color: var(--ink);
}
.btn.sm {
  padding: 7px 13px;
  font-size: 13px;
  border-radius: 7px;
}
.btn.lg {
  padding: 12px 20px;
  font-size: 15px;
}
.btn.wide {
  width: 100%;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.ok {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  line-height: 1.6;
}
.badge.gray {
  background: #edf1ee;
  color: #59665f;
}
.badge.green {
  background: var(--green-soft);
  color: var(--green);
}
.badge.amber {
  background: var(--amber-soft);
  color: var(--amber);
}
.badge.red {
  background: var(--red-soft);
  color: var(--red);
}
.badge.blue,
.badge.info {
  background: var(--blue-soft);
  color: var(--blue);
}
.badge.indigo {
  background: var(--accent-soft);
  color: var(--accent);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
  text-align: left;
}
.field label {
  font-size: 12.5px;
  font-weight: 570;
  color: var(--ink-2);
}
.field input {
  border: 1px solid var(--border-2);
  border-radius: 9px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  width: 100%;
}
.field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.pill {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 46px 20px;
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ---------- level chrome ---------- */

.stage-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.level-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-radius: 10px;
  padding: 7px 13px;
  font-weight: 700;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.level-chip small {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  opacity: 0.75;
}
.rule {
  height: 1px;
  background: var(--border);
  margin: 22px 0;
}

.answerbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.answerbar .verdict {
  font-weight: 650;
  font-size: 13.5px;
}
.answerbar .verdict.bad {
  color: var(--red);
}
.answerbar .verdict.good {
  color: var(--green);
}
.strikes {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.hintbox {
  border: 1px solid var(--border);
  background: var(--accent-softer);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.hintbox .hlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}
.hintbox.locked {
  color: var(--muted);
  background: var(--surface-2);
}

.tokenbar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.token {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}
.token.spent {
  background: var(--border-2);
}

/* ---------- puzzle widgets ---------- */

.tiles {
  display: grid;
  gap: 14px;
}
.tiles.t3 {
  grid-template-columns: repeat(3, 1fr);
}
.tiles.t2 {
  grid-template-columns: repeat(2, 1fr);
}
.tiles.t4 {
  grid-template-columns: repeat(4, 1fr);
}
.tile {
  appearance: none;
  border: 1px solid var(--border-2);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 16px 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  transition: border-color 0.12s, background 0.12s, transform 0.08s;
}
.tile:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tile:active {
  transform: translateY(1px);
}
.tile .cap {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.tile svg {
  width: 100%;
  height: auto;
  max-width: 150px;
  display: block;
}
.tile.picked {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.tile .ord {
  position: absolute;
  margin: -8px 0 0 -8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
}

.plate {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px;
  display: grid;
  place-items: center;
  overflow: auto;
}
.plate img,
.plate svg {
  display: block;
  max-width: 100%;
}
.plate.toolable {
  position: relative;
}
.plate .zoomed {
  max-width: none;
  width: 240%;
  image-rendering: pixelated;
}
.plate .filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  align-items: center;
}
.plate .filters .spacer {
  flex: 1;
}
.plate.hidden-until-found {
  cursor: crosshair;
}

table.grid-puzzle {
  border-collapse: collapse;
  margin: 0 auto;
  user-select: none;
}
table.grid-puzzle td {
  border: 1px solid var(--border-2);
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  background: var(--surface);
  padding: 0;
  color: var(--ink);
}
table.grid-puzzle td.void {
  background: var(--surface-2);
  cursor: default;
}
table.grid-puzzle td.mark {
  background: var(--red-soft);
  color: var(--red);
  font-weight: 700;
}
table.grid-puzzle td.hit {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
table.grid-puzzle td.clue {
  background: var(--surface-2);
  color: var(--ink-2);
  font-weight: 650;
  cursor: default;
}
table.grid-puzzle td.bad {
  background: var(--red-soft);
}
table.grid-puzzle td .n {
  display: block;
  line-height: 30px;
}

.kv {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13.5px;
}
.kv b {
  color: var(--muted);
  font-weight: 600;
}

.deadend {
  max-width: 640px;
}

/* ---------- key page ---------- */

.keylist {
  display: grid;
  gap: 10px;
}
.keyrow {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 12px 15px;
}
.keyrow summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 13.5px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}
.keyrow summary::-webkit-details-marker {
  display: none;
}
.keyrow summary .n {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 700;
  min-width: 34px;
}
.keyrow .sol {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-2);
  font-size: 13.5px;
  color: var(--ink-2);
}
.keyrow .ans {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--accent-softer);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 13px;
  color: var(--accent-strong);
}
.keyrow .hintline {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--muted);
}

.warnbox {
  border: 1px solid #f0d9d6;
  background: var(--red-soft);
  color: #8f2a20;
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 13.5px;
}

/* ---------- title page ---------- */

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 26px;
  align-items: center;
}
.hero .lede {
  font-size: 16px;
  color: var(--ink-2);
  line-height: 1.6;
}
.hero .lede b {
  color: var(--ink);
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.stat {
  position: relative;
  overflow: hidden;
  min-height: 118px;
}
.stat .label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.stat .value {
  font-size: 27px;
  font-weight: 730;
  margin-top: 9px;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat .sub {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

.artboard {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 20px;
  display: grid;
  place-items: center;
}
.artboard svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}

/* ---------- mobile ---------- */

.mobilebar {
  display: none;
}
@media (max-width: 860px) {
  .layout {
    flex-direction: column;
  }
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar .nav {
    max-height: 210px;
  }
  .content-inner {
    padding: 0 14px 70px;
  }
  .topbar {
    padding: 20px 14px 4px;
  }
  .topbar h1 {
    font-size: 21px;
  }
  .hero {
    grid-template-columns: 1fr;
  }
  .tiles.t3,
  .tiles.t4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .btn {
    min-height: 44px;
  }
  .field input {
    min-height: 44px;
  }
  .stats {
    grid-template-columns: 1fr;
  }
}
/* ---------- /key walkthrough ---------- */

/* Not a list of answers: a route through the whole game, chapter by chapter,
   in order, with each level's steps above its answer. */

.wtochead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 8px;
}
.wtoc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.wtoc a {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  background: var(--surface);
  text-decoration: none;
  line-height: 1.3;
}
.wtoc a:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.wtoc a b {
  font-size: 13px;
  color: var(--ink);
  font-weight: 650;
}
.wtoc a span {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.wrow {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px;
  margin-bottom: 14px;
  scroll-margin-top: 20px;
}
.whead {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.whead .n {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent);
  min-width: 30px;
  font-size: 14px;
}
.wtitle {
  font-weight: 650;
  font-size: 14.5px;
  color: var(--ink);
}
.wtitle:hover {
  color: var(--accent);
}
.wkind {
  margin-left: auto;
}
.wlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 6px;
}
.wsteps {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.65;
}
.wsteps li {
  margin-bottom: 5px;
}
pre.ans {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--accent-softer);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-size: 13px;
  color: var(--accent-strong);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  line-height: 1.55;
}
.whint {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
}
.wwhy {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.65;
}
.wnext {
  display: inline-block;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--accent);
}

/* Selectable but invisible.
 *
 * Text painted in the colour of the page. A browser does not select HTML
 * comments and does not select text that is not rendered -- but it will happily
 * select a real text node that happens to be white on white, and the selection
 * highlight then shows it. That is the whole trick, and it is the only way
 * "select all and look at what you selected" can actually work. */
.pick {
  color: #ffffff;
  user-select: all;
}

/* ---------- morse ----------
 *
 * Printed morse, not played: the game has no audio at all. The elements are
 * empty <i> tags, so every one of these rules is load-bearing -- without a size
 * and a background they render as nothing at all and the level looks empty.
 */
.morsebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 22px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
}
.mrow {
  display: flex;
  align-items: center;
  gap: 15px;
}
.mdot,
.mdash {
  display: inline-block;
  background: var(--ink);
}
.mdot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.mdash {
  width: 38px;
  height: 12px;
  border-radius: 6px;
}
/* Wider than a symbol gap, narrower than a word gap. */
.mgap {
  display: inline-block;
  width: 24px;
}
.wgap {
  display: inline-block;
  width: 30px;
}

/* ---------- plate ----------
 *
 * The state classes below are the whole mechanic of the picture chapter, so
 * they are the load-bearing part of this file: without them the Invert button
 * toggles a class that styles nothing and the level silently becomes
 * unsolvable.
 */
.plate .art {
  position: relative;
  display: block;
  /* The plate is a centred grid, so its item is shrink-to-fit. An <svg> with a
     viewBox but no width or height resolves against a container whose width
     depends on the svg, and the result is zero: every picture level rendered
     as an empty box. Giving the art a definite width breaks the circularity. */
  width: 100%;
  min-width: 0;
}
.plate .art > div {
  width: 100%;
}
.plate .art svg {
  display: block;
  width: 100%;
  height: auto;
}
/* Two sheets of the same dot grid, held together. Multiplying the inks is what
   makes the overlap darker than either sheet alone, which is the entire
   mechanic: only the dots both sheets have are the word. */
.plate .layB {
  display: none;
}
.plate .art.layered .layB {
  display: block;
  position: absolute;
  inset: 0;
}
.plate .art.layered .layB svg {
  mix-blend-mode: multiply;
}
.plate .art.layered .layA {
  opacity: 0.55;
}

.plate .art.inv svg {
  filter: invert(1);
}
.plate .art.hi svg {
  filter: contrast(7) saturate(1.4);
}
.plate .art.zoomed svg {
  max-width: none;
  width: 250%;
  margin-left: -75%;
}

/* ---------- walkthrough answer art ----------
 *
 * The marked picture on /key. The svg has a viewBox but no width, and this sits
 * in a plain block, so it needs a definite width for the same reason the plate
 * art did: left to itself an svg with only a viewBox collapses.
 */
.wansart {
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 12px;
  margin-bottom: 4px;
}
.wansart svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- click pictures ----------
 *
 * Safe to resize: wireCoord measures the svg's own rendered rectangle, not the
 * plate, so the coordinates hold at any size. These used to be sized only by
 * width, which made level 36's square field taller than the viewport -- you
 * had to scroll to see the bottom of the thing you were being asked to click.
 */
#coord {
  max-width: 100%;
}
#coord svg {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 58vh;
  margin: 0 auto;
}