:root {
  --ground: #0b0c0e; /* page background */
  --surface: #15171a; /* cards, panels, sheets */
  --raised: #1e2125; /* inputs on surface, chips, secondary buttons */
  --line: #2a2e33; /* hairlines and outlines */
  --text: #f2efe8; /* body text, primary buttons (dark text on it) */
  --dim: #a9adb3; /* secondary text: 8:1 on ground, 6:1 on raised */
  --good: #8fd3a8; /* have it, legal, ready, connected; in a game, a result that's good for you */
  --pick: #f0b45a; /* in a game: you can pick or play this. Never used for anything else on the board */
  --warn: #f0b45a; /* outside games only: need it, waiting, uploads pending, 25% baselines */
  --bad: #f07a62; /* destructive actions, banned; in a game, every warning */

  /* Phase stop ladder: shape and fill tell the kinds apart, not hue. */
  --stop-mine: #f2efe8; /* filled dot */
  --stop-opp: #a9adb3; /* outlined square */

  /* Seats, by turn order starting with you; you are always seat 1. A fixed colour-blind-safe
     palette (design/tokens.md): the seat dot, that player's arrows and the ring on their
     attacking creatures. */
  --seat-1: #408abf; /* you: blue */
  --seat-2: #b55af6; /* violet */
  --seat-3: #e8bae4; /* orchid */
  --seat-4: #757a8a; /* slate */
  --seat-5: #34b4f4; /* sky */
  --seat-6: #f434c4; /* magenta */

  /* Status tints, behind status text of the same tone (legality pills). */
  --good-tint: rgb(143 211 168 / 0.14);
  --warn-tint: rgb(240 180 90 / 0.14);
  --bad-tint: rgb(240 122 98 / 0.14);

  /* On top of commander art: white text, a grey for second lines, near-solid chips for small
     text and a soft shadow under big numbers. */
  --on-art: #fff;
  --on-art-dim: #d5d7db;
  --art-chip: rgb(11 12 14 / 0.82);
  --art-shadow: 0 2px 18px rgb(0 0 0 / 0.55);

  /* The playmat's names, kept as aliases so stylesheets written against them keep working.
     --paper-faint is retired: it failed 4.5:1. Use --dim for text and --line for decoration. */
  --felt: var(--ground);
  --felt-2: var(--surface);
  --felt-3: var(--raised);
  --paper: var(--text);
  --paper-dim: var(--dim);
  --paper-faint: var(--dim);
  --text-dim: var(--dim);
  --accent: var(--text);

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;

  /* Type. Body is 16 px; captions and meta 13 px; labels 14 px; credits 11 px. */
  --t-xs: 0.6875rem;
  --t-sm: 0.8125rem;
  --t-label: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.25rem;
  --t-lg: 1.5rem;
  --t-xl: 2rem;
  --t-2xl: 2.5rem;
  --t-big: 2.75rem; /* big numbers: prices, counts, win rates (28-56 px) */
  --t-title: 3rem; /* page titles: 48 px on phones, 64 px on laptops */
  --t-hero: 3.5rem; /* hero deck title: 56 px on phones, 96 px on laptops */

  /* Shape. --radius is the old single radius, now the input and nav-item size. */
  --radius: 12px;
  --r-input: 12px;
  --r-nav: 12px;
  --r-list: 16px;
  --r-panel: 20px;
  --r-sheet: 24px;
  --r-pill: 999px;
  --r-tile: 10px;
  --card-radius: 4.75% / 3.4%; /* a real card's corner, proportionally */

  /* Spacing: gaps of 8 / 12 / 16 / 24 / 32. */
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --gap: 16px;
  --page-pad: 16px;
  --content-w: 1120px;
  --target: 44px;
  --target-primary: 52px;
  --nav-h: 76px;
  --rail-w: 232px;
  color-scheme: dark;
}
/* Night table: the same type, surfaces, white accent and control shapes as the app. */
@font-face {
  font-family:'Big Shoulders Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/precon-fonts/big-shoulders-display-latin-700-normal.woff2') format('woff2')
}
@font-face {
  font-family:'Big Shoulders Display';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/precon-fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2')
}
@font-face {
  font-family:'Atkinson Hyperlegible Next';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/precon-fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2')
}
@font-face {
  font-family:'Atkinson Hyperlegible Next';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/precon-fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2')
}
* {
  box-sizing:border-box
}
html {
  color-scheme:dark;
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:var(--ground);
  color:var(--text);
  font:400 16px/1.5 var(--body);
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,.meta-rank,.result-value {
  font-family:var(--display);
  font-weight:700;
  line-height:1.05
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:64px;
  line-height:.94;
  letter-spacing:-.025em;
  font-weight:800;
  text-wrap:balance
}
h2 {
  font-size:36px;
  letter-spacing:-.015em
}
h3 {
  font-size:24px
}
p+p {
  margin-top:12px
}
a {
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px
}
a:hover {
  text-decoration-color:var(--dim)
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible {
  outline:2px solid var(--text);
  outline-offset:4px
}
small {
  display:block;
  font-size:12px;
  line-height:1.4;
  color:var(--dim);
  font-weight:400
}
.dim,.eyebrow {
  color:var(--dim)
}
.eyebrow {
  font-size:13px;
  margin-bottom:12px
}
.lede {
  font-size:18px;
  line-height:1.5;
  color:var(--dim)
}
.public-header,main,.public-footer {
  max-width:calc(var(--content-w) + 64px);
  margin-inline:auto;
  padding-inline:32px
}
.public-header {
  min-height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}
.public-wordmark {
  display:flex;
  width:88px;
  flex:none
}
.public-wordmark svg {
  width:100%;
  height:38px
}
nav {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px
}
nav a {
  text-decoration:none;
  font-size:14px;
  color:var(--dim)
}
nav a[aria-current=page],nav a:hover {
  color:var(--text)
}
.button,button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  color:var(--text);
  padding:10px 20px;
  min-height:44px;
  font:700 14px/1.3 var(--body);
  text-decoration:none;
  cursor:pointer;
  white-space:normal;
  text-align:center
}
.button:hover,button:hover {
  background:var(--raised);
  border-color:var(--dim)
}
.primary {
  background:var(--text);
  color:var(--ground);
  border-color:var(--text)
}
.primary:hover {
  background:white;
  color:var(--ground)
}
.public-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:32px 0 28px
}
.hero-copy h1 {
  font-size:88px;
  line-height:.88;
  margin-bottom:22px
}
.hero-copy>.dim {
  margin-top:16px;
  font-size:14px
}
.featured {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  align-self:stretch;
  display:flex;
  align-items:end;
  min-height:288px;
  border-radius:var(--r-panel);
  background:var(--surface);
  text-decoration:none;
  border:1px solid var(--line)
}
.featured>img,.public-art>img,.art-wash {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2
}
.art-wash {
  z-index:-1;
  background:linear-gradient(0deg,rgba(11,12,14,.98),rgba(11,12,14,.48) 60%,rgba(11,12,14,.12))
}
.featured-copy {
  padding:24px;
  width:100%
}
.featured-copy h2 {
  font-size:38px;
  margin:12px 0 6px;
  text-wrap:balance
}
.featured-copy p {
  font-size:14px;
  color:var(--dim)
}
.featured-link {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:18px;
  font-size:14px
}
.featured-link>span {
  font-size:22px
}
.feature-credit {
  font-size:10px;
  margin-top:18px
}
.hero-note {
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  background:var(--surface)
}
.hero-note p {
  color:var(--dim);
  margin:16px 0
}
.source-strip {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:16px 0 24px;
  border-bottom:1px solid var(--line);
  font-size:12px
}
.source-strip>a {
  margin-left:auto
}
.source-chip {
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:4px 10px;
  font-size:11px;
  line-height:1.4;
  white-space:nowrap
}
.featured .source-chip {
  background:var(--ground)
}
.rank-intro {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:24px;
  margin:28px 0 16px
}
.rank-intro>div {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px
}
.ranking-help {
  border:0;
  padding:0;
  margin:0;
  font-size:13px;
  color:var(--dim)
}
.ranking-help[open] { flex-basis:100%; }
.ranking-help .details-body { max-width:72ch; padding:8px 0 16px; }
.ranking-help p { margin:0 0 12px; }
.ranking-help summary { font-weight:700; }
.public-filters {
  display:flex;
  align-items:start;
  flex-wrap:wrap;
  gap:12px
}
.public-filters>.search {
  flex:1;
  min-width:160px
}
.public-filters>label:not(.search) {
  flex:0 1 190px
}
.public-filters label {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--dim)
}
input,select,textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:var(--r-input);
  min-height:44px;
  background:var(--surface);
  color:var(--text);
  padding:10px 14px;
  font:inherit;
  font-size:14px
}
input::placeholder {
  color:var(--dim)
}
textarea {
  font-family:monospace;
  margin-top:16px
}
.more-filters {
  padding:0;
  border:0;
  margin-left:2px
}
.more-filters summary {
  padding:10px 12px;
  min-height:44px;
  font-size:14px
}
.more-filters[open] {
  width:100%;
  order:5;
  margin:0
}
.more-filters[open] summary {
  padding-left:0
}
.filter-fields {
  display:flex;
  flex-wrap:wrap;
  align-items:end;
  gap:12px;
  padding:12px 16px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px
}
.filter-fields label {
  flex:1 1 140px
}
.filter-fields>a {
  font-size:14px;
  padding:10px
}
.filter-fields p {
  width:100%;
  color:var(--dim);
  font-size:12px
}
.table-note {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--dim);
  padding:16px 0 10px
}
.table-note span {
  text-align:right
}
.public-table {
  width:100%;
  border-collapse:collapse;
  font-variant-numeric:tabular-nums;
  text-align:left;
  table-layout:fixed
}
.public-table thead th {
  color:var(--dim);
  font-size:12px;
  font-weight:400;
  padding:10px 12px 12px;
  border-bottom:1px solid var(--line)
}
.public-table th:first-child {
  width:36%;
  padding-left:0
}
.public-table td,.public-table tbody th {
  padding:18px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
  font-weight:400
}
.public-table td:last-child,.public-table thead th:last-child {
  padding-right:0
}
.public-table tbody tr:hover {
  background:var(--surface)
}
.public-table small {
  font-size:11px;
  margin-top:4px
}
.deck-link {
  display:flex;
  gap:14px;
  align-items:center;
  text-decoration:none
}
.deck-link>span {
  min-width:0
}
.deck-link strong {
  display:block;
  font-size:16px;
  line-height:1.3;
  font-weight:700
}
.deck-link small {
  font-size:12px;
  margin:3px 0
}
.deck-thumb {
  width:64px;
  height:76px;
  object-fit:cover;
  border-radius:10px;
  flex:none
}
.deck-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:11px;
  color:var(--dim);
  margin-top:7px
}
.identity {
  display:inline-flex;
  gap:3px
}
.color {
  width:17px;
  height:17px;
  border-radius:50%;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:9px;
  line-height:1;
  color:var(--ground);
  font-weight:700
}
.color-W {
  background:#F1E4BC;
  color:#3A3122;
}
.color-U {
  background:#2C78C4;
  color:#F2F7FC;
}
.color-B {
  background:#4B4049;
  color:#F1EAF0;
}
.color-R {
  background:#D4472E;
  color:#FFF4F0;
}
.color-G {
  background:#2F8752;
  color:#F0FAF3;
}
.color-C {
  background:#A7A49A;
  color:#24231F;
}
.public-table .thumb-credit {
  font-size:9px;
  margin:8px 0 0;
  line-height:1.2
}
.meta-rank {
  display:block;
  font-size:36px;
  line-height:1
}
.result-value {
  display:inline-block;
  font-size:28px;
  line-height:1;
  text-decoration:none
}
.interval {
  width:100%;
  max-width:128px;
  height:14px;
  display:block;
  margin:8px 0 0;
  overflow:visible;
  fill:var(--text)
}
.interval-track {
  stroke:var(--line);
  stroke-width:2
}
.interval-baseline {
  stroke:var(--dim);
  stroke-width:1;
  stroke-dasharray:2 2
}
.interval-range {
  stroke:var(--text);
  stroke-width:2
}
.caution {
  display:block;
  font-size:10px;
  color:var(--dim);
  margin-top:6px;
  text-decoration:underline;
  text-decoration-style:dotted;
  text-underline-offset:3px
}
.price-cell .result-value {
  font-family:inherit;
  font-size:16px;
  font-weight:400
}
.pagination {
  justify-content:space-between;
  padding:24px 0;
  font-size:13px;
  color:var(--dim)
}
.pagination>div {
  display:flex;
  gap:10px
}
.reading-note {
  border-top:1px solid var(--line);
  padding:28px 0 8px;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:12px 32px
}
.reading-note p {
  font-size:14px;
  color:var(--dim)
}
.reading-note>a {
  grid-column:2;
  font-size:13px
}
.empty-state {
  padding:56px 0
}
.empty-state p {
  margin-top:12px;
  color:var(--dim)
}
.back-link {
  display:inline-block;
  margin:16px 0 24px;
  font-size:14px;
  color:var(--dim);
  text-decoration:none
}
.public-art {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:var(--r-panel);
  background:var(--surface);
  min-height:380px;
  display:flex;
  align-items:end;
  padding:40px 40px 50px
}
.art-heading {
  max-width:850px
}
.art-heading h1 {
  font-size:80px;
  margin-bottom:14px
}
.art-heading>p:not(.eyebrow) {
  font-size:18px
}
.art-heading .deck-meta {
  font-size:13px;
  margin-top:14px;
  gap:12px
}
.art-credit {
  position:absolute;
  left:40px;
  right:20px;
  bottom:16px;
  color:var(--dim);
  font-size:11px
}
.public-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin:24px 0 44px
}
.public-actions .primary {
  min-height:52px;
  padding-inline:24px
}
.text-action {
  font-size:14px;
  padding:12px
}
.evidence-heading,.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:20px
}
.evidence-heading>a,.section-heading>a {
  font-size:13px;
  color:var(--dim)
}
.evidence-heading .eyebrow {
  margin-bottom:6px
}
.public-evidence {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px
}
.public-panel {
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  background:var(--surface);
  padding:28px;
  min-width:0
}
.public-panel h3 {
  margin-bottom:24px
}
.public-panel .result-value,.public-panel .meta-rank {
  font-size:56px
}
.public-panel>small {
  margin-top:8px;
  font-size:13px
}
.public-panel p {
  font-size:14px;
  margin-top:16px
}
.public-panel .interval {
  max-width:100%;
  margin:18px 0 8px
}
.meta-panel {
  background:var(--raised)
}
.meta-panel h3 {
  margin:16px 0 24px
}
.public-panel .caution {
  font-size:12px
}
.price-pair {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:28px
}
.price-pair h3 {
  font:400 14px/1.4 var(--body);
  color:var(--dim);
  margin-bottom:12px
}
.price-pair small {
  margin-top:6px
}
.price-pair .result-value {
  font-size:40px
}
details {
  border-top:1px solid var(--line);
  padding:16px 0
}
summary {
  cursor:pointer;
  font-size:14px;
  min-height:28px
}
details li {
  margin:8px 0;
  color:var(--dim);
  font-size:14px
}
.public-panel details {
  margin-top:20px;
  padding-bottom:0
}
.support-note {
  margin:28px 0;
  color:var(--dim)
}
.support-note p {
  margin-top:12px;
  font-size:14px
}
.list-section {
  margin-top:48px
}
.list-section>p {
  font-size:13px
}
.list-section>h3 {
  margin:28px 0 12px
}
.list-section>h3 .dim {
  font-size:18px;
  margin-left:8px
}
.public-card-list {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none;
  padding:0;
  margin:0;
  gap:2px 28px
}
.public-card-list a {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-height:83px;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:14px
}
.public-card-list img {
  width:48px;
  flex:none;
  height:auto;
  object-fit:contain
}
.public-card-list small {
  font-size:11px;
  margin-top:4px
}
.card-qty {
  color:var(--dim);
  margin-right:4px
}
.list-section>details {
  margin-top:28px
}
.public-intro {
  padding:48px 0 28px
}
.public-intro .lede {
  margin-top:20px
}
.method-nav {
  padding-bottom:32px;
  border-bottom:1px solid var(--line);
  gap:8px
}
.public-prose {
  max-width:760px
}
.public-prose section {
  padding:48px 0;
  border-bottom:1px solid var(--line)
}
.public-prose h2 {
  font-size:44px;
  margin-bottom:24px
}
.public-prose h3 {
  margin:28px 0 16px
}
.public-prose p {
  color:var(--dim);
  margin-top:16px;
  line-height:1.65
}
.formula {
  font:700 30px/1.35 var(--display);
  padding:24px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-list);
  margin:24px 0;
  background:var(--surface)
}
.publication {
  margin-top:16px
}
.publication>summary {
  font-size:16px
}
.public-prose dl {
  display:grid;
  grid-template-columns:150px 1fr;
  gap:12px 24px;
  font-size:14px
}
dt {
  color:var(--dim)
}
dd {
  margin:0;
  overflow-wrap:anywhere
}
.field-list {
  columns:2;
  padding-left:20px
}
.field-list li {
  break-inside:avoid;
  font-size:12px;
  overflow-wrap:anywhere
}
.public-footer {
  margin-top:64px;
  padding-bottom:40px;
  color:var(--dim);
  font-size:13px
}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid var(--line);
  padding:24px 0
}
.site-notice {
  font-size:11px;
  line-height:1.6;
  max-width:100ch
}
.site-notice p+p {
  margin-top:8px
}
.skip {
  position:absolute;
  top:-100px;
  left:16px;
  padding:12px;
  background:var(--text);
  color:var(--ground);
  z-index:10
}
.skip:focus {
  top:12px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0
}
@media(min-width:1000px) {
  .public-table:has(th:nth-child(6)) th:first-child {
    width:31%
  }
  .public-table:has(th:nth-child(6)) .deck-thumb {
    width:52px;
    height:68px
  }
  .public-table:has(th:nth-child(6)) .deck-link {
    gap:10px
  }
  .public-table:has(th:nth-child(6)) td {
    padding-inline:10px
  }
}
@media(max-width:900px) {
  .public-hero {
    gap:28px
  }
  .hero-copy h1 {
    font-size:72px
  }
  .source-strip>a {
    margin-left:0
  }
  .rank-intro {
    display:block
  }
  .rank-intro p {
    max-width:none;
    margin-top:10px
  }
  .public-card-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .public-table thead {
    display:none
  }
  .public-table,.public-table tbody {
    display:block
  }
  .public-table tr {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px 12px;
    padding:20px 0;
    border-bottom:1px solid var(--line)
  }
  .public-table th:first-child {
    display:block;
    width:auto;
    grid-column:1/-1;
    padding:0
  }
  .public-table td {
    display:block;
    padding:0;
    border:0
  }
  .public-table td::before {
    content:attr(data-label);
    display:block;
    color:var(--dim);
    font-size:11px;
    margin-bottom:8px
  }
  .public-table .deck-link strong {
    font-size:18px
  }
  .public-table .thumb-credit {
    margin-left:78px
  }
  .public-table tr:hover {
    background:none
  }
  .public-table .meta-rank {
    font-size:32px
  }
  .public-table .result-value {
    font-size:26px
  }
  .public-table .price-cell {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px 10px
  }
  .price-cell::before {
    margin-bottom:0!important
  }
  .price-cell small {
    margin:0
  }
  .public-table .price-cell .result-value {
    font-size:14px
  }
  .table-note span {
    max-width:43ch
  }
  .art-heading h1 {
    font-size:64px
  }
  .public-art {
    min-height:340px;
    padding-inline:28px
  }
  .art-credit {
    left:28px
  }
  .public-evidence {
    gap:12px
  }
}
@media(max-width:600px) {
  .public-header,main,.public-footer {
    padding-inline:20px
  }
  .public-header {
    min-height:76px;
    gap:16px
  }
  .public-wordmark {
    width:68px
  }
  .public-wordmark svg {
    height:30px
  }
  .public-header nav {
    gap:14px;
    flex-wrap:nowrap
  }
  .public-header nav a {
    font-size:12px
  }
  .public-header .button {
    padding:8px 12px;
    min-height:40px
  }
  .public-header .button span {
    display:none
  }
  .public-hero {
    display:block;
    padding:24px 0
  }
  .hero-copy h1 {
    font-size:64px;
    line-height:.9
  }
  .hero-copy .lede {
    font-size:16px
  }
  .hero-copy .lede br {
    display:none
  }
  .hero-copy>.dim {
    margin-top:12px
  }
  .featured {
    margin-top:24px;
    min-height:240px
  }
  .featured-copy {
    padding:22px
  }
  .featured-copy h2 {
    font-size:36px
  }
  .feature-credit {
    margin-top:14px
  }
  .hero-note {
    margin-top:24px;
    padding:24px
  }
  .source-strip {
    padding-top:0;
    padding-bottom:20px;
    gap:7px
  }
  .source-strip>a {
    width:100%;
    margin-top:4px
  }
  .source-strip .source-chip {
    font-size:10px
  }
  .rank-intro {
    margin-top:24px
  }
  .rank-intro h2 {
    font-size:32px
  }
  .rank-intro>div {
    gap:10px
  }
  .public-filters {
    gap:8px
  }
  .public-filters>.search {
    flex-basis:100%
  }
  .public-filters>label:not(.search) {
    flex:1
  }
  .more-filters {
    width:100%;
    order:5
  }
  .more-filters summary {
    padding-left:0;
    font-size:13px;
    min-height:44px
  }
  .filter-fields {
    gap:12px;
    padding:14px
  }
  .filter-fields label {
    flex-basis:calc(50% - 8px);
    min-width:0
  }
  .table-note {
    padding-top:8px
  }
  .table-note span {
    display:none
  }
  .public-table tr {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px 12px
  }
  .public-table:has(td:nth-child(6)) tr {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .public-table:has(td:nth-child(6)) .meta-cell {
    grid-column:1/-1;
    display:flex;
    align-items:center;
    gap:10px
  }
  .public-table:has(td:nth-child(6)) .meta-cell:before {
    margin-bottom:0
  }
  .public-table .thumb-credit {
    font-size:9px
  }
  .public-table td::before {
    font-size:10px
  }
  .public-table small {
    font-size:10px
  }
  .public-table .caution {
    font-size:9px
  }
  .public-table .price-cell {
    margin-top:2px
  }
  .pagination {
    padding-block:20px;
    gap:12px
  }
  .pagination .button {
    padding:10px 14px;
    font-size:12px
  }
  .reading-note {
    display:block;
    padding-top:24px
  }
  .reading-note p {
    margin:12px 0
  }
  .reading-note h3 {
    font-size:26px
  }
  .public-footer {
    margin-top:40px;
    padding-bottom:28px
  }
  .footer-top {
    display:block
  }
  .footer-top nav {
    margin-top:14px;
    gap:24px
  }
  .footer-top nav a {
    font-size:12px
  }
  .back-link {
    margin:12px 0 20px
  }
  .public-art {
    min-height:360px;
    padding:26px 24px 52px
  }
  .art-heading h1 {
    font-size:56px;
    line-height:.95
  }
  .art-heading>p:not(.eyebrow) {
    font-size:16px
  }
  .art-heading .deck-meta {
    font-size:11px
  }
  .art-credit {
    left:24px;
    font-size:10px
  }
  .public-actions {
    gap:10px;
    margin:20px 0 32px
  }
  .public-actions .button {
    flex:1 1 100%;
    min-height:48px
  }
  .text-action {
    padding-left:0;
    font-size:13px
  }
  .evidence-heading {
    align-items:start
  }
  .evidence-heading h2 {
    font-size:32px
  }
  .evidence-heading>a {
    max-width:95px;
    text-align:right;
    font-size:12px
  }
  .public-evidence {
    grid-template-columns:1fr
  }
  .public-panel {
    padding:24px
  }
  .public-panel .result-value,.public-panel .meta-rank {
    font-size:52px
  }
  .public-panel h3 {
    margin-bottom:20px
  }
  .price-pair {
    gap:16px
  }
  .price-pair .result-value {
    font-size:36px
  }
  .price-pair small {
    font-size:10px
  }
  .list-section {
    margin-top:32px
  }
  .section-heading {
    display:block
  }
  .section-heading>a {
    display:block;
    margin-top:16px
  }
  .public-card-list {
    grid-template-columns:1fr
  }
  .public-card-list a {
    min-height:78px
  }
  .public-intro {
    padding-top:28px
  }
  .public-intro h1 {
    font-size:56px
  }
  .public-intro .lede {
    font-size:16px
  }
  .public-prose section {
    padding:32px 0
  }
  .public-prose h2 {
    font-size:36px
  }
  .public-prose p {
    font-size:15px
  }
  .formula {
    font-size:26px;
    padding:20px
  }
  .public-prose dl {
    grid-template-columns:100px 1fr;
    gap:12px;
    font-size:12px
  }
  .field-list {
    columns:1
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}

/* Keep narrow-screen navigation and disclosure targets comfortable to tap. */
.public-wordmark { min-height:44px; align-items:center; }
.public-header nav > a { min-height:44px; display:flex; align-items:center; }
summary, .more-filters summary { min-height:44px; align-content:center; }
.featured-caution { margin-top:8px; font-size:11px; }
.public-card-ref { display:inline-flex; align-items:center; gap:8px; text-underline-offset:3px; }
.public-card-ref .public-card-thumb { display:block; width:48px; height:auto; border-radius:3px; }
.public-card-preview { position:fixed; z-index:2200; overflow:auto; border:1px solid var(--line,#2a2e33); border-radius:14px; background:var(--surface,#15171a); color:var(--text,#f2efe8); box-shadow:0 14px 60px #0009; pointer-events:none; }
.public-card-preview > img { display:block; width:100%; height:auto; border-radius:13px; }
.public-card-preview > p { padding:16px; }
.public-card-preview.is-pinned { pointer-events:auto; }
.public-card-preview-actions { display:none; padding:10px; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }
.public-card-preview.is-pinned .public-card-preview-actions { display:flex; }
.public-card-preview-actions button { min-height:36px; border:1px solid var(--line,#2a2e33); border-radius:5px; padding:6px 12px; color:inherit; background:var(--raised,#1e2125); cursor:pointer; }
@media(max-width:600px) { .public-card-preview.is-pinned { left:50% !important; top:50% !important; transform:translate(-50%,-50%); width:min(320px,calc(100vw - 24px)) !important; max-height:calc(100dvh - 24px) !important; } }
@media(max-width:350px) {
  .public-header { padding-inline:16px; gap:12px; }
  .public-wordmark { width:60px; }
  .public-header nav { gap:10px; }
  .public-header nav a { font-size:11px; }
  .public-header .button { padding-inline:10px; }
}

/* Shared decks, profiles and collections (server/src/sharing/html.rs). */
.share-profile-head { padding:40px 0 8px; }
.share-profile-head h1 { font-size:64px; margin:6px 0 10px; overflow-wrap:anywhere; }
.share-decks { list-style:none; margin:24px 0 16px; padding:0; display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.share-deck { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-panel); background:var(--surface); overflow:hidden; }
.share-deck-main { position:relative; isolation:isolate; display:flex; align-items:end; min-height:200px; color:inherit; text-decoration:none; }
.share-deck-main>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.share-deck-copy { display:flex; flex-direction:column; gap:4px; padding:18px; }
.share-deck-copy b { font-family:var(--display); font-weight:800; font-size:26px; line-height:1; }
.share-deck-copy small { color:var(--dim); }
.share-deck-main:hover b, .share-deck-main:focus-visible b { text-decoration:underline; text-underline-offset:3px; }
.share-deck-configs { border-top:1px solid var(--line); padding:0 18px; font-size:14px; }
.share-deck-configs ul { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.share-deck-configs a, .share-configs a { display:inline-flex; align-items:center; min-height:36px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--raised); color:inherit; text-decoration:none; }
.share-configs { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:20px 0 0; font-size:14px; }
.share-configs ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.share-configs a[aria-current="page"] { background:var(--text); color:var(--ground); border-color:var(--text); }
.art-credits { font-size:11px; }
.share-collection { width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.share-collection th { text-align:left; font-weight:600; color:var(--dim); border-bottom:1px solid var(--line); padding:8px 10px; }
.share-collection td { border-bottom:1px solid var(--line); padding:8px 10px; vertical-align:top; }
.share-collection .num { text-align:right; font-variant-numeric:tabular-nums; }
.pager { display:flex; gap:16px; align-items:center; margin:16px 0 40px; font-size:14px; }
@media(max-width:600px) {
  .share-profile-head h1 { font-size:44px; }
  .share-collection th:nth-child(4), .share-collection td:nth-child(4) { display:none; }
}
/* Scryfall's art crop is 626 px wide: on wide screens it stays a window on the right, near its
   own size, and the wash takes it into the panel on the left, where the text sits. */
@media(min-width:901px) {
  .public-art { --art-w:min(100%,820px); }
  .public-art>img { left:auto; width:var(--art-w); }
  .public-art>.art-wash { background:linear-gradient(90deg,var(--surface) calc(100% - var(--art-w)),rgba(11,12,14,.55) calc(100% - var(--art-w) + 220px),transparent calc(100% - var(--art-w) + 420px)),linear-gradient(0deg,rgba(11,12,14,.98),rgba(11,12,14,.5) 60%,rgba(11,12,14,.15)); }
}

/* Shared deck pages: the deck page's status row, stacks and the sections under the list. */
.share-status { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:20px 0 0; }
.pill { display:inline-flex; align-items:center; min-height:32px; padding:4px 12px; border:1px solid var(--line); border-radius:999px; background:var(--raised); color:inherit; font-size:14px; font-weight:700; text-decoration:none; }
.pill.good { border-color:#3f6b4f; }
.pill.bad { border-color:#8a5a2b; }
.pill.dashed { border-style:dashed; font-weight:400; }
.public-deck-errors { width:100%; margin:4px 0 0; padding-left:20px; color:var(--dim); font-size:14px; }

.layout-pick { position:absolute; opacity:0; pointer-events:none; }
.layout-toggle { display:inline-flex; gap:4px; margin:0 0 16px; padding:3px; border:1px solid var(--line); border-radius:999px; }
.layout-toggle label { min-height:36px; display:inline-flex; align-items:center; padding:4px 14px; border-radius:999px; cursor:pointer; font-size:14px; }
#layout-stacks:checked ~ .layout-toggle label[for="layout-stacks"],
#layout-list:checked ~ .layout-toggle label[for="layout-list"] { background:var(--text); color:var(--ground); }
#layout-stacks:focus-visible ~ .layout-toggle label[for="layout-stacks"],
#layout-list:focus-visible ~ .layout-toggle label[for="layout-list"] { outline:2px solid var(--text); outline-offset:2px; }
#layout-stacks:checked ~ .public-list, #layout-list:checked ~ .public-stacks { display:none; }

.public-stacks { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:24px 14px; align-items:start; margin-bottom:16px; }
.public-stack h3 { display:flex; justify-content:space-between; gap:8px; margin:0 0 8px; font-size:20px; }
.public-stack h3 .dim { font:400 14px var(--body); }
.public-stack-cards { display:flex; flex-direction:column; }
.public-stack-card { position:relative; display:block; border-radius:4.75% / 3.5%; overflow:hidden; box-shadow:0 -2px 8px rgba(0,0,0,.4); }
.public-stack-card + .public-stack-card { margin-top:-118%; }
.public-stack-card:hover, .public-stack-card:focus-visible { z-index:1; }
.public-stack-card img { display:block; width:100%; height:auto; }
.public-stack-card .qty-badge { position:absolute; right:8%; top:5%; padding:1px 7px; border-radius:999px; background:rgba(11,12,14,.85); font-size:13px; font-weight:700; }
.stack-fallback { display:flex; align-items:flex-start; aspect-ratio:488/680; padding:10px; background:var(--raised); border:1px solid var(--line); font-size:14px; }

.share-more { display:grid; gap:16px; margin:24px 0 40px; }
.share-more h2 { font-size:32px; margin:0 0 12px; }
.share-more h3 { font-size:20px; margin:24px 0 8px; }
.share-more .label { display:block; color:var(--dim); font-size:14px; margin-bottom:4px; }
.share-more .result-value { display:block; font-size:44px; }
.bracket-pair, .dstat-row, .sim-rows { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px 24px; }
.bracket-pair .estimate .result-value { color:var(--dim); }
.sim-row[aria-current] .label { color:var(--text); font-weight:700; }
.public-flags, .public-combos { margin:8px 0 0; padding-left:20px; font-size:14px; }
.public-flags li, .public-combos li { margin:6px 0; }
.public-combos span { display:block; color:var(--dim); }
.dstat-charts { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:16px; }
.curve { width:100%; max-width:420px; height:auto; }
.curve .creatures { fill:var(--text); }
.curve .others { fill:#7c838c; }
.curve .cap, .curve .tick { fill:var(--dim); font-size:12px; }
.curve .baseline { stroke:var(--line); }
.curve-legend { display:flex; gap:16px; list-style:none; margin:0 0 8px; padding:0; font-size:13px; color:var(--dim); }
.curve-swatch { display:inline-block; width:10px; height:10px; margin-right:6px; border-radius:2px; }
.curve-swatch.creatures { background:var(--text); }
.curve-swatch.others { background:#7c838c; }
.pip-table { width:100%; border-collapse:collapse; font-size:14px; }
.pip-table th, .pip-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); font-weight:400; }
.pip-table thead th { color:var(--dim); }
.pip-table .mana-count { display:inline-block; min-width:2.5ch; font-variant-numeric:tabular-nums; }
.pip-table meter { width:60%; height:8px; vertical-align:middle; }
.share-deck-configs { padding:10px 18px 14px; }
.share-deck-configs ul { margin:0; }
.sim-row .caution { display:block; margin-top:6px; }

/* Comparable figures share one row; expanding one panel needn't stretch its neighbours. */
.public-evidence { grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); align-items:start; }
.public-panel { padding:24px; }
.public-panel h3 { margin-bottom:16px; }
.public-panel details { margin-top:16px; }
.public-panel details p { max-width:72ch; }
.public-panel > details:last-child { padding-bottom:0; }

/* Shared by the app and the server-rendered public pages. Keep native select
   behavior, with room for both the label and a consistently inset chevron. */
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
  appearance: none;
  min-width: 0;
  padding-inline-end: 44px;
  background-image: url("/select-chevron-v1.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}

/* Every disclosure has the same spacing and a full touch target. The chevron
   stays separate from wrapping text, including on small screens. */
:where(details > summary) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding-block: 8px;
  list-style: none;
  cursor: pointer;
}
:where(details > summary)::-webkit-details-marker {
  display: none;
}
:where(details > summary)::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-inline: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
:where(details[open] > summary)::before {
  transform: rotate(45deg);
}

@media (forced-colors: active) {
  select:not([multiple]):not([size]),
  select:not([multiple])[size="1"] {
    appearance: auto;
    background-image: none;
    padding-inline-end: 14px;
  }
}

/* Page banners share the whole composition. A wide cover crop can remove the
   subject's face; containing the art preserves it without guessing a focal point.
   Scryfall art stays at its native proportions and is never filtered. */
.public-art > img,
.art-panel.art-scene > .art-img {
  left: auto;
  right: 0;
  width: min(100%, 626px);
  height: 100%;
  object-fit: contain;
  object-position: right top;
}
.public-art > .art-wash,
.art-panel.art-scene > .art-wash {
  background: linear-gradient(0deg, var(--ground) 0%, rgb(11 12 14 / .82) 45%, rgb(11 12 14 / .08) 85%);
}
@media (min-width: 900px) {
  .public-art > .art-wash,
  .art-panel.art-scene > .art-wash {
    background:
      linear-gradient(90deg, var(--ground) 0%, transparent 75%),
      linear-gradient(0deg, var(--ground) 0%, transparent 65%);
  }
}
/* Short mobile banners still leave a window above the title for the subject. */
@media (max-width: 899px) {
  .public-art,
  .lab-art.art-panel {
    min-height: 320px;
  }
}
/* Cover-fitted tiles and compact rows favour the upper part of the composition.
   Page banners above preserve the entire image rather than applying this crop. */
.featured > img,
.art-panel:not(.art-scene) > .art-img {
  object-position: var(--art-position, center top);
}