/* PrintR site add-on, 5 Oct 2026: the minds carousel over the hero box and the two cards under the hero (home), and
   on coin pages the PrintR Verified slot, the green running line, the market cap badge and the question box.
   Uses the live site's own tokens (--bg-1, --text, --fill… switch with data-theme on <html>), with fallbacks.
   One magenta: #c41c70, #ff4fa3 in dark mode. No status dots, no outlined pills, no gradients, no glows. Green and
   red only where they say up/down or running (the market cap square, the running line); the verified panel's gold
   badge lives in verified/verified.css. */
:root {
  --pa-accent: #c41c70;
  --pa-accent-2: #a81660;
  --pa-on-accent: #fff;
  --pa-tint: #c41c7014;
  --pa-run: #1a7f37;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pa-accent: #ff4fa3;
    --pa-accent-2: #ff7ab8;
    --pa-on-accent: #1a0a12;
    --pa-tint: #ff4fa321;
    --pa-run: #3fb950;
  }
}
:root[data-theme="dark"] {
  --pa-accent: #ff4fa3;
  --pa-accent-2: #ff7ab8;
  --pa-on-accent: #1a0a12;
  --pa-tint: #ff4fa321;
  --pa-run: #3fb950;
}

.pa-minds,
.pa-minds *,
.pa-cards,
.pa-cards * {
  box-sizing: border-box;
}
.pa-minds,
.pa-cards {
  font-family: var(--font-ui, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--text, #111114);
  -webkit-font-smoothing: antialiased;
}
.pa-minds :focus-visible,
.pa-cards :focus-visible {
  outline: 2px solid var(--pa-accent);
  outline-offset: 2px;
}
/* inside the carousel the ring is drawn inward: its edges (and the slide's) are clipped by overflow:hidden */
.pa-minds :focus-visible {
  outline-offset: -2px;
}

/* React's own box stays in the page (its size drives ours), hidden under the carousel while the carousel is shown */
html.pa-minds-on .mh-hero-side {
  visibility: hidden;
}
/* its live window is taken out (display:none): React's IntersectionObserver then sees it off screen and stops
   downloading a frame a second that nobody sees (visibility:hidden alone does not stop it). A block of the same
   1280x800 shape keeps the box exactly the same size. */
html.pa-minds-on .mh-hero-side .md-shot {
  display: none;
}
html.pa-minds-on .mh-hero-side .md-win::after {
  content: "";
  display: block;
  aspect-ratio: 1280 / 800;
}

/* ---------- the carousel, exactly over the box ---------- */
.pa-minds {
  position: absolute;
  z-index: 5; /* under the site's top bar (30), sheets, popovers and bottom bar (60) */
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* never wider than the box (the dots row has a min-content width) */
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  background: var(--bg-1, #fff);
  overflow: hidden;
}
.pa-minds[hidden] {
  display: none !important;
}
.pa-minds.is-single {
  grid-template-rows: minmax(0, 1fr);
}
.pa-minds.is-single .pa-m-nav {
  display: none;
}
.pa-m-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.pa-m-track {
  display: flex;
  gap: 24px; /* GAP in printr-addon.js */
  height: 100%;
  transition: transform 0.42s var(--ease, cubic-bezier(0.2, 0.7, 0.2, 1));
  will-change: transform;
}
.pa-m-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 26px minmax(0, 1fr) auto auto;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
}
.pa-m-slide:hover .pa-m-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pa-m-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pa-m-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pa-m-pic {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-2, #f5f5f7);
}
.pa-m-pic::before {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 600 12px/1 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-m-pic.is-brand::before {
  content: none;
}
.pa-m-pic img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pa-m-name {
  font: 600 13.5px/1.2 var(--font-ui, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pa-m-sym {
  font: 500 12px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace);
  color: var(--dim, #62626a);
  white-space: nowrap;
}
.pa-m-state {
  flex: none;
  font: 600 13px/1.2 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-m-state.is-run {
  color: var(--pa-accent);
}
.pa-m-win {
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr);
  min-height: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-3, #e8e8eb);
  box-shadow: inset 0 0 0 1px var(--line, #11111412);
}
.pa-m-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  background: var(--bg-2, #f5f5f7);
  font: 500 12px/1 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
  min-width: 0;
}
.pa-m-host {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.pa-m-right {
  flex: none;
  white-space: nowrap;
}
.pa-m-right.is-live {
  color: var(--pa-accent);
  font-weight: 600;
}
.pa-m-shot {
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-3, #e8e8eb);
}
.pa-m-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.2s linear;
  -webkit-user-drag: none;
  pointer-events: none;
}
.pa-m-shot.has-img img {
  opacity: 1;
}
.pa-m-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 500 13px/1.3 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
.pa-m-shot.has-img .pa-m-empty {
  visibility: hidden;
}
.pa-m-last {
  margin: 0;
  font: 400 14px/1.45 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
  height: 2.9em; /* two lines, always: the box does not jump between slides */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pa-m-model {
  margin: 0;
  font: 400 12.5px/1.4 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.4em;
}
.pa-m-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
}
.pa-m-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--fill, #1111140e);
  color: var(--text, #111114);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.pa-m-arrow:hover {
  background: var(--fill-2, #11111417);
}
.pa-m-arrow:active {
  background: var(--fill-3, #11111421);
}
.pa-m-dots {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.pa-m-dot {
  flex: none;
  position: relative;
  width: var(--pa-dot, 16px); /* set by printr-addon.js to fit the box: 16px down to 6px */
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pa-m-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(6px, var(--pa-dot, 16px));
  height: 6px;
  transform: translate(-50%, -50%);
  border-radius: 3px;
  background: var(--fill-3, #11111421);
  transition: width 0.2s ease, background-color 0.2s ease;
}
.pa-m-dot:hover::before {
  background: var(--line-3, #11111442);
}
.pa-m-dot.is-on::before {
  width: max(6px, min(14px, calc(var(--pa-dot, 16px) - 2px)));
  background: var(--pa-accent);
}
.pa-m-count {
  flex: none;
  min-width: 3.6em;
  text-align: right;
  font: 500 12px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace);
  color: var(--dim, #62626a);
}
/* a narrow box: the dots alone say which mind is shown */
.pa-minds.is-narrow .pa-m-count {
  display: none;
}
@media (max-width: 600px) {
  /* phones: swipe and dots, no arrows */
  .pa-m-arrow {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pa-m-track {
    transition: none;
  }
}

/* ---------- the two cards under the hero ---------- */
.pa-cards {
  position: relative; /* the carousel, first in it, is placed over the box from here */
  display: block;
  padding: 28px 0 0;
}
.pa-wrap {
  width: 100%;
  max-width: var(--max, 1200px);
  margin: 0 auto;
  padding: 0 var(--pad, clamp(16px, 2.4vw, 28px));
}
.pa-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pa-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pa-card {
  margin: 0;
  padding: 22px;
  border-radius: 16px;
  background: var(--bg-1, #fff);
  box-shadow: var(--shadow, 0 1px 2px #1111140d, 0 1px 1px #11111408);
  min-width: 0;
}
.pa-card h2,
.pa-card h3,
.pa-card p,
.pa-card ul {
  margin: 0;
}
.pa-kicker {
  font: 600 12.5px/1.2 var(--font-ui, sans-serif);
  color: var(--pa-accent);
  margin: 0 0 8px !important;
}
.pa-title {
  font: 650 20px/1.2 var(--font-ui, sans-serif);
  letter-spacing: -0.012em;
  color: var(--text, #111114);
  margin: 0 0 14px !important;
}
.pa-sub {
  font: 650 15px/1.3 var(--font-ui, sans-serif);
  color: var(--text, #111114);
  margin: 20px 0 10px !important;
}
.pa-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 11px;
}
.pa-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font: 400 14.5px/1.45 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-list li b {
  color: var(--text, #111114);
  font-weight: 600;
}
.pa-tick {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--pa-tint);
  color: var(--pa-accent);
  margin-top: -1px;
}
.pa-list.is-next .pa-tick {
  background: var(--fill, #1111140e);
  color: var(--text-2, #45454d);
}
.pa-spot {
  display: flex;
  flex-direction: column;
}
.pa-spot-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  min-width: 0;
}
.pa-spot-pic {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-2, #f5f5f7);
}
.pa-spot-pic::before {
  content: attr(data-letter);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 650 26px/1 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-spot-pic img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pa-spot-id {
  min-width: 0;
}
.pa-spot-id .pa-title {
  margin: 0 0 4px !important;
  font-size: 24px;
}
.pa-spot-sym {
  font: 500 12.5px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace);
  color: var(--dim, #62626a);
}
.pa-facts {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0 0 14px !important;
}
.pa-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font: 600 14px/1.3 var(--font-ui, sans-serif);
  color: var(--text, #111114);
}
.pa-spot-model {
  font: 400 13.5px/1.45 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
  margin: 0 0 16px !important;
}
.pa-spot-model:empty {
  display: none;
}
.pa-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 12px;
  background: var(--fill, #1111140e);
  color: var(--text, #111114);
  font: 600 14.5px/1 var(--font-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.pa-btn:hover {
  background: var(--fill-2, #11111417);
}
.pa-btn.is-accent {
  background: var(--pa-accent);
  color: var(--pa-on-accent);
}
.pa-btn.is-accent:hover {
  background: var(--pa-accent-2);
}
.pa-foot {
  margin: 10px 0 0;
  font: 400 12.5px/1.4 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
@media (max-width: 480px) {
  .pa-card {
    padding: 18px;
  }
  .pa-btn {
    flex: 1 1 100%;
  }
  .pa-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pa-spot-holders {
  font: 400 13.5px/1.45 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
  margin: -8px 0 18px !important;
}

/* ---------- coin pages (/coin/<mint>) ---------- */
.pa-verified,
.pa-verified *,
.pa-q,
.pa-q *,
.pa-mc,
.pa-mc * {
  box-sizing: border-box;
}
.pa-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the mind's status line under its live window: React draws it in --warn (yellow) whatever the state; green while the
   mind runs (its own state chip in the same live box says so: .md-state.is-run). "AI is refilling" keeps its own
   colour (.is-refill). CSS only: no class is added to React's nodes. */
.md-coin .md-live:has(.md-live-head .md-state.is-run) .md-live-why:not(.is-refill) {
  color: var(--pa-run);
}
/* a verified coin between two runs ("Between runs: back in a few seconds.", printr-addon.js): plain text colour */
html.pa-back-soon .md-coin .md-live:has(.md-live-head .md-state:not(.is-run)) .md-live-why:not(.is-refill) {
  color: var(--text-2, #45454d);
}

/* the PrintR Verified slot, between the header and the mind (the panel itself: verified/verified.css) */
.pa-verified {
  display: block;
  margin-top: 16px;
  min-width: 0;
}
.pa-verified:empty {
  display: none;
}

/* the market cap badge, after the coin's name: on the name's row when it fits, else on the next row */
.tr-id-t:has(> .pa-mc) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.tr-id-t:has(> .pa-mc) > * {
  flex: 1 1 100%;
  min-width: 0;
}
.tr-id-t:has(> .pa-mc) > .tr-name {
  flex: 0 1 auto;
}
.tr-id-t > .pa-mc {
  flex: 0 1 auto;
}
/* one row of 26 px when it fits; in a narrow name block (phones under ~400 px) it wraps inside itself
   ("MC $18.3K" / "■ 24h +424%") instead of running under the star and share buttons */
.pa-mc {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  justify-self: start;
  max-width: 100%;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 8px;
  background: var(--fill, #1111140e);
  color: var(--text, #111114);
  font: 600 13px/1 var(--font-ui, "Geist", ui-sans-serif, system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  white-space: nowrap;
  -webkit-font-smoothing: antialiased;
}
.pa-mc-v {
  font-weight: 600;
}
.pa-mc-d {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pa-mc-sq {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--up, #15753a);
}
.pa-mc-sq.is-down {
  background: var(--down, #c02626);
}
.pa-mc-ch {
  font: 500 12px/1 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
.pa-mc [hidden] {
  display: none;
}

/* the question box: the same frame as the coin page's own boxes (.mk-box.md-box) */
.pa-q {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 18px 20px;
  border-radius: var(--r-3, 16px);
  background: var(--bg-1, #fff);
  box-shadow: var(--shadow, 0 1px 2px #1111140d, 0 1px 1px #11111408);
  color: var(--text, #111114);
  font-family: var(--font-ui, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
.pa-q[hidden] {
  display: none;
}
.pa-q h2,
.pa-q h3,
.pa-q p,
.pa-q ol,
.pa-q ul {
  margin: 0;
}
.pa-q :focus-visible {
  outline: 2px solid var(--pa-accent);
  outline-offset: 2px;
}
.pa-q-head,
.pa-q-sub-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}
.pa-q-title {
  font: 650 16.5px/1.3 var(--font-ui, sans-serif);
  letter-spacing: -0.01em;
}
.pa-q-wait,
.pa-q-pstate {
  font: 500 13px/1.3 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
.pa-q-lede {
  font: 400 13.5px/1.5 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-q-form {
  display: grid;
  gap: 8px;
}
.pa-q-field {
  display: block;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--bg-2, #f5f5f7);
  color: var(--text, #111114);
  font: 400 15px/22px var(--font-ui, sans-serif);
  resize: none;
  overflow-y: hidden;
}
.pa-q-field::placeholder {
  color: var(--dim, #62626a);
}
.pa-q-field:focus {
  outline: none;
  border-color: var(--pa-accent);
}
.pa-q-field:focus-visible {
  outline: none;
}
.pa-q-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pa-q-count {
  font: 500 12.5px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace);
  color: var(--dim, #62626a);
}
.pa-q-count.is-warn {
  color: var(--warn, #935000);
}
.pa-q-later {
  flex: 1 1 auto;
  min-width: 0;
  font: 400 12.5px/1.3 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
.pa-q-ask {
  flex: none;
  margin-left: auto;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--pa-accent);
  color: var(--pa-on-accent);
  font: 600 14px/1 var(--font-ui, sans-serif);
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.pa-q-ask:hover:not(:disabled) {
  background: var(--pa-accent-2);
}
.pa-q-ask:disabled {
  opacity: 0.45;
  cursor: default;
}
.pa-q-status {
  font: 400 13px/1.45 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-q-status:empty {
  display: none;
}
.pa-q-poll {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #11111412);
}
.pa-q-poll[hidden] {
  display: none;
}
.pa-q-poll-b {
  display: grid;
  gap: 10px;
}
.pa-q-sub {
  font: 650 14.5px/1.3 var(--font-ui, sans-serif);
  color: var(--text, #111114);
}
.pa-q-pq {
  font: 500 14.5px/1.45 var(--font-ui, sans-serif);
}
.pa-q-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pa-q-opt {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--fill, #1111140e);
  color: var(--text, #111114);
  font: 600 14px/1.25 var(--font-ui, sans-serif);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.pa-q-opt:hover:not(:disabled) {
  background: var(--fill-2, #11111417);
}
.pa-q-opt:disabled {
  opacity: 0.6;
  cursor: default;
}
.pa-q-bars {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.pa-q-bar {
  display: grid;
  gap: 5px;
}
.pa-q-bar-t {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  flex-wrap: wrap;
  font: 400 14px/1.35 var(--font-ui, sans-serif);
}
.pa-q-bar.is-mine .pa-q-bar-x {
  font-weight: 600;
}
.pa-q-bar-n {
  font: 500 12.5px/1.3 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pa-q-mine {
  margin-left: 8px;
  font: 600 12px/1 var(--font-ui, sans-serif);
  color: var(--pa-accent);
  white-space: nowrap;
}
.pa-q-track {
  height: 8px;
  border-radius: 4px;
  background: var(--fill, #1111140e);
  overflow: hidden;
}
.pa-q-fill {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  background: var(--text-2, #45454d);
  opacity: 0.55;
}
.pa-q-bar.is-mine .pa-q-fill {
  background: var(--pa-accent);
  opacity: 1;
}
.pa-q-note {
  font: 400 13.5px/1.45 var(--font-ui, sans-serif);
  color: var(--text-2, #45454d);
}
.pa-q-answers {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #11111412);
}
.pa-q-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
}
.pa-q-item {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.pa-q-q,
.pa-q-a {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  align-items: baseline;
  font: 400 14.5px/1.45 var(--font-ui, sans-serif);
}
.pa-q-q {
  color: var(--text-2, #45454d);
}
.pa-q-q .pa-q-mine {
  grid-column: 2;
  margin: 2px 0 0;
}
.pa-q-a {
  color: var(--text, #111114);
}
.pa-q-k {
  font: 650 12px/1 var(--font-mono, "Geist Mono", ui-monospace, monospace);
  color: var(--dim, #62626a);
}
.pa-q-a .pa-q-k {
  color: var(--pa-accent);
}
.pa-q-foot {
  padding-left: 28px;
  font: 400 12.5px/1.4 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
.pa-q-src {
  color: var(--pa-accent);
  text-decoration: none;
  font-weight: 500;
}
.pa-q-src:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pa-q-empty {
  font: 400 13.5px/1.45 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
.pa-q-more {
  justify-self: start;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  background: var(--fill, #1111140e);
  color: var(--text, #111114);
  font: 550 13.5px/1 var(--font-ui, sans-serif);
  cursor: pointer;
}
.pa-q-more:hover {
  background: var(--fill-2, #11111417);
}
.pa-q-fine {
  font: 400 12.5px/1.45 var(--font-ui, sans-serif);
  color: var(--dim, #62626a);
}
@media (max-width: 559.98px) {
  .pa-q {
    padding: 16px 14px;
  }
  .pa-q-field {
    font-size: 16px; /* iOS Safari zooms into a smaller field */
  }
  .pa-q-opts {
    display: grid;
  }
  .pa-q-opt {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pa-q-ask,
  .pa-q-opt {
    transition: none;
  }
}