/* Visual theme: lime + near-black, soft rounded cards, pill buttons, bold numbers.
   Loaded after style.css; only changes looks, never layout logic. */

:root {
  --lime: #b9d95b; --lime-deep: #9cbf3c; --lime-soft: #e7f2c4;
  --night: #16180f; --night-2: #23261a;
  --bg-app: #eef3df; --card: #fbfdf4; --ink-1: #16180f; --ink-2: #5d6450; --line-1: #dfe7c8;
  --radius-lg: 28px; --radius-md: 20px; --radius-sm: 14px;
  --shadow-1: 0 1px 2px rgba(22, 24, 15, .06), 0 8px 24px rgba(22, 24, 15, .06);
}
@media (prefers-color-scheme: dark) {
  :root { --bg-app: #0e100a; --card: #1b1e14; --ink-1: #eef3df; --ink-2: #a3aa8f; --line-1: #2c3122;
          --lime-soft: #2f3a17; --night: #0a0b07; --night-2: #262a1c; }
}

body { font-family: "Plus Jakarta Sans", system-ui, "Hiragino Sans", "Noto Sans JP", sans-serif; }
body:has(.home), body:has(.details), body:has(.reader), body:has(.qz), body:has(.panel) { background: var(--bg-app); }

/* the colours the home, library and details pages use */
.home, .details, .menu-wrap {
  --ink: var(--ink-1); --ink-muted: var(--ink-2); --track: var(--line-1); --paper: var(--card);
}

/* ---- headings ---- */
.home .pile-h { color: var(--ink-1); font-weight: 700; letter-spacing: -.01em; }
.home .pile-h small, .home .pile-h .muted { color: var(--ink-2); font-weight: 500; }
.home h1, .home h2, .details h2 { letter-spacing: -.02em; }

/* ---- pills ---- */
.btn, .vol-nav .btn, .vol-btns .btn, .vol-btns .btn.big, .det-act .btn {
  border-radius: 999px !important; border: 1.5px solid var(--ink-1) !important; background: transparent; color: var(--ink-1);
  font-weight: 600; padding: 7px 16px; transition: background .12s, color .12s, transform .08s;
}
.btn:hover:not(:disabled) { background: var(--ink-1); color: var(--card); }
.read-btn, .vol-btns .read-btn {
  border-radius: 999px; background: var(--ink-1); color: var(--lime); font-weight: 700; border: 0;
  box-shadow: var(--shadow-1); transition: transform .08s, box-shadow .12s;
}
.read-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 24, 15, .18); }
#buyexp { background: var(--lime) !important; color: var(--night) !important; border-color: var(--lime) !important; }
#buyexp:hover { background: var(--lime-deep) !important; }
.vol-tag { border-radius: 999px; border: 0; background: var(--lime-soft); color: var(--ink-1); font-weight: 600; }

/* ---- progress bars ---- */
.rbar { background: var(--line-1); border-radius: 999px; height: 9px; }
.rbar span { background: linear-gradient(90deg, var(--lime-deep), var(--lime)); border-radius: 999px; }

/* ---- library row ---- */
.lib-card { border: 0 !important; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-1);
  transition: transform .1s, box-shadow .12s; }
.lib-card img, .lib-card .lib-ph { border-radius: var(--radius-sm); }
.lib-card:hover { transform: translateY(-2px); }
.lib-card.on { box-shadow: 0 0 0 3px var(--ink-1), var(--shadow-1); }
.lib-card.more .lib-ph { background: var(--night); color: var(--lime); border: 0; }
.lib-card.add .lib-ph { background: var(--lime); color: var(--night); border: 0; }
.lib-card.add, .lib-card.more { background: var(--card); }

/* ---- the three study tiles: lime, night, light ---- */
.home .tile {
  border: 0 !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  position: relative; overflow: hidden; transition: transform .1s, box-shadow .12s;
}
.home .tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(22, 24, 15, .14); }
.home .tile b { letter-spacing: -.04em; font-weight: 800; }
.home .tile.new { background: var(--lime); color: var(--night); }
.home .tile.new small { color: rgba(22, 24, 15, .65); }
.home .tile.learning { background: var(--night); color: #f4f7ea; }
.home .tile.learning b { color: var(--lime); }
.home .tile.learning small { color: #a9b096; }
.home .tile.learned { background: var(--card); color: var(--ink-1); outline: 1.5px solid var(--line-1); outline-offset: -1.5px; }
.home .tile:disabled { opacity: .55; }
/* a small round arrow in the corner, like a card you can open */
.home .tile:not(:disabled)::after {
  content: "→"; position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
  background: rgba(255, 255, 255, .55); color: var(--night);
}
.home .tile.learning:not(:disabled)::after { background: var(--lime); }

/* ---- the selected volume ---- */
.vol-sel { background: var(--card); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-1); gap: 22px; }
.vol-cover img { border: 0 !important; border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(22, 24, 15, .18); }
button.vol-cover:hover img { box-shadow: 0 10px 26px rgba(22, 24, 15, .26); }
.vol-info h2 { font-weight: 800; }
.rn-where { color: var(--ink-2); }
.ch-link { text-decoration-color: var(--lime-deep); }
.vol-card { border: 0 !important; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--shadow-1); }
.vol-card img { border-radius: var(--radius-sm); }

/* ---- menu ---- */
.menu-btn { border-radius: 999px; border: 0; background: var(--night); color: var(--lime); box-shadow: var(--shadow-1); padding: 8px 16px; }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--night-2); color: var(--lime); }
.menu { border: 0; border-radius: var(--radius-md); box-shadow: 0 18px 40px rgba(22, 24, 15, .2); padding: 8px; }
.menu a { border-radius: 12px; font-weight: 600; }
.menu a:hover { background: var(--lime-soft); }

/* ---- details, panels ---- */
.panel { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.det-head img { border: 0; border-radius: var(--radius-md); }
.det-table th { border-bottom-color: var(--line-1); }
.det-table td { border-bottom-color: var(--line-1); }
.det-table tr.on td { background: var(--lime-soft); }

/* ---- study screen ---- */
.qz { --ink: var(--ink-1); --ink-muted: var(--ink-2); --track: var(--line-1); --paper: var(--card); --focus: var(--lime-deep); }
.qz-bar { border-radius: 999px; overflow: hidden; height: 9px; }
.qz-bar div { background: var(--lime-deep); border-radius: 999px; }
.qz-box { border: 0 !important; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); background: var(--card); }
.qz-inrow input { border-radius: var(--radius-sm) !important; border: 1.5px solid var(--line-1) !important; }
.qz-check { border-radius: 999px !important; background: var(--night); color: var(--lime); font-weight: 700; }
.qz-result { border: 0 !important; border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.qz-ignore { border-radius: 999px; }
.badge { border-radius: 999px; }
.badge.learning { background: #d9a21b; } .badge.learned { background: var(--lime-deep); color: var(--night); }

/* ---- reader header ---- */
.rd-head .btn, .rd-head select { border-radius: 999px; }
.rd-panel { border-radius: var(--radius-md); }
.qz-head, .qz-bar { margin-right: 110px; }  /* room for the ☰ Menu pill */
@media (prefers-color-scheme: dark) {
  .read-btn, .vol-btns .read-btn { background: var(--lime); color: var(--night); }
  .home .tile.learning { background: var(--night-2); }
  .menu-btn { background: var(--night-2); }
  .qz-check { background: var(--lime); color: var(--night); }
  .lib-card.more .lib-ph { background: var(--night-2); }
}

/* ---- home fills the window: wider, and the parts grow with the window's height ---- */
.home { max-width: min(1680px, 94vw); padding: 0 56px 0 0; }
.home .pile-h { margin-top: 1.8vh; }
.lib-row { gap: 18px; }
.lib-row .lib-card img, .lib-row .lib-ph { max-height: 21vh; }
.lib-row .lib-card b { font-size: 15px; }
.home .tiles { gap: 22px; margin: 1.2vh 0 2.2vh; }
.home .tile { padding: clamp(14px, 3vh, 40px) 30px; min-height: 20vh; }
.home .tile b { font-size: clamp(34px, 7.5vh, 88px); }
.home .tile span { font-size: clamp(17px, 2.7vh, 28px); }
.home .tile small { font-size: clamp(13px, 1.7vh, 16px); }
.vol-sel { padding: 18px; }
.vol-cover img { height: 31vh; max-height: 340px; }
.vol-actions { height: 31vh; max-height: 340px; }
.vol-info h2 { font-size: clamp(22px, 3.6vh, 36px); }
.vol-info .ready, .rn-where { font-size: clamp(15px, 2vh, 19px); }
.vol-actions .vol-btns { min-width: 280px; }
.vol-btns .read-btn, .vol-btns .btn.big { font-size: clamp(15px, 2vh, 18px); padding: 1.3vh 20px; }
#main:has(> .home) { max-width: none; padding-bottom: 0; }

/* ---- home in three equal bands: library | study cards | current volume ---- */
.home { height: calc(100vh - 3.2vh); display: flex; flex-direction: column; margin-top: 1.6vh; }
.home > .pile-h { flex: none; margin: 0.8vh 0 0.6vh; }
.home > .lib-row, .home > .tiles, .home > .home-low { flex: 1 1 0; min-height: 0; margin: 0; }
.home > .home-low { margin-top: 1.4vh; }
/* library: portrait covers (3:4), as tall as the band allows, spread across the width */
.home > .lib-row { display: flex; justify-content: space-between; align-items: stretch; gap: 14px; padding: 0.6vh 2px; }
.home > .lib-row .lib-card { height: 100%; width: auto; display: flex; flex-direction: column; flex: 0 1 auto; padding: 6px; }
.home > .lib-row .lib-card img, .home > .lib-row .lib-ph { flex: 1 1 0; min-height: 0; height: auto; width: auto; max-height: none; aspect-ratio: 3 / 4; object-fit: cover; }
.home > .lib-row .lib-card b, .home > .lib-row .lib-card small { max-width: 100%; }
/* study cards fill their band */
.home > .tiles { align-items: stretch; }
.home > .tiles .tile { height: 100%; min-height: 0; justify-content: center; }
/* the volume block fills its band; the cover keeps its own shape */
.home-low, .vol-area { height: 100%; }
.vol-sel { height: 100%; box-sizing: border-box; }
.vol-sel .vol-cover { height: 100%; flex: none; }
.vol-sel .vol-cover img { height: 100%; max-height: none; min-height: 0; width: auto; aspect-ratio: auto; }
.vol-actions { height: 100%; max-height: none; min-height: 0; }
.vol-strip { height: 100%; align-items: stretch; }
.vol-strip .vol-card { height: 100%; display: flex; flex-direction: column; }
.vol-strip .vol-card img { flex: 1 1 0; min-height: 0; height: auto; max-height: none; aspect-ratio: 3 / 4; width: auto; }
#main:has(> .home) { margin-top: 0; margin-bottom: 0; }
/* each library card is a portrait card sized from the band's height */
.home > .lib-row .lib-card { height: 100%; aspect-ratio: 0.64; width: auto; flex: 0 0 auto; }
.home > .lib-row .lib-card img, .home > .lib-row .lib-ph { flex: 1 1 0; min-height: 0; width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; }

/* ---- reader: zoom = continuous scroll (webtoon) ---- */
.rd-close { display: none; }
.rd-zoom.on { background: var(--night) !important; color: var(--lime) !important; border-color: var(--night) !important; }
.reader.webtoon .rd-main { display: block; position: relative; padding: 6px 0 0; flex: 1; min-height: 0; }
.reader.webtoon .rd-web { height: 100%; overflow-y: auto; scroll-behavior: auto; display: flex; flex-direction: column;
  align-items: center; gap: 10px; padding-bottom: 40vh; }
.reader.webtoon .rd-web .rd-page { width: min(100%, 1100px); height: auto; flex: none; border-radius: 6px; overflow: hidden; }
.reader.webtoon .rd-web .rd-page img { height: auto; }
/* the explanation panel slides in over the pages when you click a bubble */
.reader.webtoon .rd-panel { position: fixed; top: 76px; right: 16px; bottom: 16px; width: min(440px, 92vw); z-index: 30;
  border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); border: 0;
  transform: translateX(calc(100% + 24px)); transition: transform .18s ease; }
.reader.webtoon .rd-panel.open { transform: none; }
.reader.webtoon .rd-close { display: block; position: sticky; top: 0; float: right; z-index: 2; border: 0; background: var(--lime-soft);
  color: var(--ink-1); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 15px; }
.reader.webtoon .rd-web { position: relative; }
body:has(.reader.webtoon) { overflow: hidden; }
/* step-by-step: each step's words, their pile, and the kanji */
.steps-dict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 5px; font-size: 13.5px; }
.sw { display: inline-flex; align-items: center; gap: 5px; }
.sw-key { font-weight: 700; font-size: 15px; }
.sw .mini, .steps-dict .mini { border-radius: 999px; }
.sw-kanji { color: var(--ink-2); font-weight: 600; text-decoration: none; border-bottom: 1.5px dotted var(--lime-deep); }
.steps li .kbox:not(:empty) { margin-top: 6px; }

/* zoom button: round, bottom-right of the reading area */
.rd-main { position: relative; }
.rd-zoom { position: absolute; right: 18px; bottom: 18px; z-index: 25; width: 52px; height: 52px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer; background: var(--night); color: var(--lime); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.rd-zoom:hover { transform: translateY(-2px); }
.rd-zoom.on { background: var(--lime); color: var(--night); }
.rd-zoom svg { width: 22px; height: 22px; }
/* normal mode: keep it over the page, not the side panel */
.reader:not(.webtoon) .rd-zoom { right: calc(min(30vw, 100%) + 34px); }
/* zoom mode with an explanation open: the pages move left and stay fully visible */
.reader.webtoon:has(.rd-panel.open) .rd-web { margin-right: calc(min(440px, 92vw) + 28px); }
.reader.webtoon:has(.rd-panel.open) .rd-zoom { right: calc(min(440px, 92vw) + 46px); }
/* the one-page view must really disappear in zoom mode (its own display:flex beat the hidden attribute,
   so after zooming out and back in it pushed the scroll area off screen) */
.reader.webtoon .rd-pagewrap, .rd-pagewrap[hidden], .rd-web[hidden] { display: none !important; }
.rd-zoom.on .zoom-plus { display: none; }  /* zoomed: the magnifier shows − */

/* ---- demo store: coins, shop, paywall ---- */
.menu-wrap { display: flex; gap: 8px; align-items: flex-start; }
.coin-pill { border: 0; border-radius: 999px; background: var(--lime); color: var(--night); font: inherit; font-size: 15px;
  padding: 8px 14px; cursor: pointer; box-shadow: var(--shadow-1); white-space: nowrap; }
.coin-pill:hover { background: var(--lime-deep); }
.coin-pill[hidden] { display: none; }
.menu-wrap .menu { top: calc(100% + 8px); right: 0; }
.lib-card.shop .lib-ph { background: var(--lime-soft); color: var(--night); border: 0; }
@media (prefers-color-scheme: dark) { .lib-card.shop .lib-ph { color: var(--lime); } }
.shop .shop-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 8px 0 4px; padding-right: 230px; }
.shop h1 { margin: 0; letter-spacing: -.02em; }
.coin-big { border: 0; border-radius: 999px; background: var(--night); color: var(--lime); font: inherit; font-weight: 700; padding: 10px 18px; cursor: pointer; }
.shop .lib-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.shop .lib-card { display: flex; flex-direction: column; gap: 4px; padding: 8px; text-align: left; }
.shop .lib-card img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.shop-price { font-weight: 700; color: var(--ink-1) !important; }
.shop-price.free { color: var(--lime-deep) !important; }
.shop-vol.locked img, .vol-card.locked img { filter: grayscale(.7) brightness(.85); }
.vol-card.locked { position: relative; }
.vol-card.locked::after { content: "🔒"; position: absolute; top: 10px; right: 10px; font-size: 16px; }
.shop-vol .btn.big { width: 100%; font-size: 14px; padding: 6px 10px; }
.shop-series { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--card); border-radius: var(--radius-md);
  padding: 14px 18px; box-shadow: var(--shadow-1); margin: 10px 0 14px; }
.shop-series .read-btn { margin-left: auto; padding: 10px 20px; }
.demo-note { background: var(--lime-soft); border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; }
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 10px 0 6px; max-width: 900px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; cursor: pointer; font: inherit;
  background: var(--card); color: var(--ink-1); border-radius: var(--radius-lg); padding: 26px 16px; box-shadow: var(--shadow-1); transition: transform .1s; }
.pack:hover { transform: translateY(-3px); }
.pack b { font-size: 30px; letter-spacing: -.02em; }
.pack em { font-style: normal; font-weight: 700; background: var(--night); color: var(--lime); border-radius: 999px; padding: 6px 16px; margin-top: 8px; }
.pack.best { background: var(--lime); color: var(--night); }
.pack-tag { position: absolute; top: -10px; background: var(--night); color: var(--lime); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.coin-uses { margin: 6px 0; padding-left: 20px; line-height: 1.8; }
.ledger { border-collapse: collapse; min-width: 520px; }
.ledger td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line-1); }
.ledger .num { text-align: right; font-weight: 700; }
.ledger .plus { color: var(--lime-deep); } .ledger .minus { color: #b5462f; }
.store-toggle { margin-top: 18px; padding-left: 0; }
.paywall { display: flex; gap: 28px; align-items: center; background: var(--card); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-1); margin-top: 16px; max-width: 900px; }
.paywall img { width: 200px; border-radius: var(--radius-md); filter: grayscale(.5); }

/* ---- pop-ups and the Anki import ---- */
.modal-bg { position: fixed; inset: 0; background: rgba(14, 16, 10, .45); display: grid; place-items: center; z-index: 100; padding: 20px; }
.modal { position: relative; background: var(--card); color: var(--ink-1); border-radius: var(--radius-lg); padding: 26px 28px; max-width: 560px; width: 100%;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .3); max-height: 90vh; overflow: auto;
  --ink: var(--ink-1); --ink-muted: var(--ink-2); --track: var(--line-1); --paper: var(--card); }
.modal h2 { margin: 0 0 8px; letter-spacing: -.02em; }
.modal-x { position: absolute; top: 14px; right: 14px; border: 0; background: var(--lime-soft); color: var(--ink-1); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.modal details summary { cursor: pointer; font-weight: 600; margin-top: 8px; }
.howto { line-height: 1.7; padding-left: 22px; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 30px; margin: 14px 0; border: 2.5px dashed var(--lime-deep);
  border-radius: var(--radius-md); background: var(--card); cursor: pointer; max-width: 900px; }
.dropzone.over { background: var(--lime-soft); }
.srs-card { background: var(--card); border-radius: var(--radius-md); padding: 18px 20px; box-shadow: var(--shadow-1); max-width: 900px; }
.srs-prev { border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; }
.srs-prev th, .srs-prev td { padding: 5px 10px; border-bottom: 1px solid var(--line-1); text-align: left; max-width: 220px; overflow: hidden; }
.srs-prev td.on { background: var(--lime-soft); font-weight: 600; }
.offer { display: flex; gap: 12px; align-items: flex-start; background: var(--lime-soft); border-radius: var(--radius-sm); padding: 14px; margin-top: 12px; cursor: pointer; }
.offer input { margin-top: 4px; transform: scale(1.2); }
.sample-offer { display: flex; gap: 20px; align-items: center; }
.sample-offer img { width: 140px; border-radius: var(--radius-sm); box-shadow: var(--shadow-1); }
/* library: search and sort */
.lib-tools { display: flex; gap: 12px; align-items: center; margin: 14px 0 4px; flex-wrap: wrap; }
.lib-tools input[type=search] { flex: 1; min-width: 220px; max-width: 520px; font: inherit; font-size: 16px; padding: 10px 16px;
  border-radius: 999px; border: 1.5px solid var(--line-1); background: var(--card); color: var(--ink-1); outline: none; }
.lib-tools input[type=search]:focus { border-color: var(--lime-deep); box-shadow: 0 0 0 3px var(--lime-soft); }
.seg { display: inline-flex; background: var(--card); border-radius: 999px; padding: 4px; box-shadow: var(--shadow-1); }
.seg button { border: 0; background: transparent; font: inherit; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; color: var(--ink-2); }
.seg button.on { background: var(--night); color: var(--lime); }
/* volume block in the middle, study cards at the bottom */
.home > .home-low { margin-top: 0.6vh; }
.home > .home-low + .pile-h { margin-top: 1.4vh; }

/* ---- more breathing room on the home page (still one screen) ---- */
.home { max-width: min(1600px, 90vw); height: calc(100vh - 7vh); margin-top: 3.2vh; }
.home > .pile-h { margin: 2.6vh 0 1.4vh; }
.home > .pile-h.first { margin-top: 0; }
.home > .lib-row { gap: 26px; padding: 0.4vh 2px 0.8vh; }
.home > .home-low { margin-top: 2.4vh; }
.home > .home-low + .pile-h { margin-top: 3vh; }
.home > .tiles { gap: 28px; }
.home .tile { padding: clamp(16px, 3.2vh, 44px) clamp(22px, 2.4vw, 40px); }
.vol-sel { padding: 22px 26px; gap: 32px; }
.vol-info { gap: 14px; }
.vol-info .ready { margin: 6px 0; }
.vol-actions { gap: 18px; }
.vol-actions .vol-btns { gap: 14px; }
/* removing from the library */
.lib-item { position: relative; }
.lib-item > .lib-card { width: 100%; }
.lib-rm { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; font-size: 14px;
  background: rgba(22, 24, 15, .72); color: #fff; opacity: 0; transition: opacity .12s; }
.lib-item:hover .lib-rm, .lib-rm:focus { opacity: 1; }
.lib-rm:hover { background: #b5462f; }
.btn.danger { border-color: #b5462f !important; color: #b5462f !important; }
.btn.danger:hover { background: #b5462f !important; color: #fff !important; }
.danger-link { color: #b5462f; }
.buy-explain { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 6px; padding: 14px; background: var(--lime-soft); border-radius: var(--radius-sm); }
.buy-explain .read-btn { margin: 0; align-self: flex-start; padding: 10px 18px; }
.buy-explain .muted { font-size: 13px; }
.yn-q { margin-top: 14px; line-height: 1.5; }
.yn { margin-top: 16px; }
.yn .read-btn, .yn .btn.big { min-width: 120px; justify-content: center; text-align: center; }
.rd-head { padding-right: 250px; }  /* room for the coin counter and ☰ Menu */