:root {
  --bg: #f7f5f0; --panel: #fff; --text: #1d1b18; --muted: #6f6a61; --line: #e3ded4;
  --accent: #c0392b; --good: #2e8b57; --bad: #c0392b; --learning: #d68910; --learned: #2e8b57;
  --new: #7f8c8d;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #171614; --panel: #22201d; --text: #ece8e1; --muted: #a39d93; --line: #34312c;
          --accent: #e5604f; --good: #4fbf7f; --bad: #e5604f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font-family: system-ui, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif; }
header { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 12px 20px;
         background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.brand { font-weight: 700; font-size: 20px; color: var(--accent); }
.brand span { color: var(--text); font-size: 15px; margin-left: 4px; }
nav { display: flex; gap: 4px; }
#views { margin-left: auto; }
button, select, input { font: inherit; color: inherit; }
nav button, .btn { background: transparent; border: 1px solid var(--line); border-radius: 8px;
                   padding: 6px 12px; cursor: pointer; }
nav button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
select, input[type=text] { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
main { max-width: 900px; margin: 24px auto; padding: 0 16px 60px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-bottom: 16px; }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stat { text-align: center; padding: 14px; border-radius: 10px; border: 1px solid var(--line); }
.stat b { display: block; font-size: 28px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; color: #fff; }
.badge.new { background: var(--new); } .badge.learning { background: var(--learning); } .badge.learned { background: var(--learned); }

.card { text-align: center; }
.big { font-size: 96px; line-height: 1.2; margin: 10px 0; }
.big.word { font-size: 56px; }
.big.grammar { font-size: 36px; }
.reading { font-size: 22px; color: var(--muted); }
.meaning { font-size: 22px; margin: 8px 0; }
.examples { text-align: left; margin-top: 14px; }
.examples div { padding: 6px 0; border-top: 1px dashed var(--line); font-size: 18px; }
.examples small { color: var(--muted); margin-left: 8px; font-size: 12px; }
mark { background: color-mix(in srgb, var(--accent) 25%, transparent); color: inherit; border-radius: 3px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.options button { padding: 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel);
                  cursor: pointer; font-size: 17px; text-align: left; }
.options button.jp { font-size: 26px; text-align: center; }
.options button:hover:not(:disabled) { border-color: var(--text); }
.options button.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 18%, var(--panel)); }
.options button.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, var(--panel)); }
.options kbd { color: var(--muted); font-size: 12px; margin-right: 6px; }
.feedback { margin-top: 14px; min-height: 28px; font-weight: 600; }
.feedback.good { color: var(--good); } .feedback.bad { color: var(--bad); }
.progress { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.progress div { height: 100%; background: var(--accent); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.k { font-size: 22px; white-space: nowrap; }
td.num { color: var(--muted); text-align: right; }
tr:hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
@media (max-width: 640px) { .options { grid-template-columns: 1fr; } .big { font-size: 72px; } #views { margin-left: 0; } }
.answer { display: flex; gap: 8px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.answer input { font-size: 20px; padding: 10px 14px; min-width: 260px; flex: 1; max-width: 420px;
                background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.answer input:focus { outline: 2px solid var(--accent); }
a.btn { text-decoration: none; color: inherit; display: inline-block; }

/* ---- quiz (typed answer): fits one screen, no scrolling ---- */
.qz { --ink: #1e2044; --ink-muted: #6b7090; --track: #c5cadb; --paper: #f7f8fb; --focus: #3d5afe;
      --good: #2e7d4f; --bad: #c0392b;
      max-width: min(1400px, 94vw); margin: 0 auto; color: var(--ink);
      height: calc(100dvh - var(--hdr, 64px) - 32px); display: flex; flex-direction: column; overflow: hidden; }
@media (prefers-color-scheme: dark) {
  .qz { --ink: #e4e6f2; --ink-muted: #9aa0bd; --track: #3a3e58; --paper: #1d1f30; --focus: #6d83ff;
        --good: #4fbf7f; --bad: #ef6f5f; }
}
body:has(.qz) { background: #ecedf1; }
@media (prefers-color-scheme: dark) { body:has(.qz) { background: #14151f; } }
body:has(.qz) main { margin: 12px auto 0; padding-bottom: 0; max-width: none; }
.qz-head { display: flex; align-items: baseline; gap: 20px; font-size: clamp(17px, 2.6vh, 24px); flex: none; }
.qz-count { color: var(--ink-muted); }
.qz-head .badge { font-size: 12px; align-self: center; }
.qz-quit { margin-left: auto; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 4px; }
.qz-quit:hover { color: var(--ink); }
.qz-bar { height: 7px; background: var(--track); margin: 1.4vh 0 3vh; flex: none; }
.qz-bar div { height: 100%; background: var(--ink); transition: width .2s; }

.qz-main { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
           gap: clamp(24px, 4vw, 64px); align-items: start; }
.qz-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.qz-box { position: relative; width: min(64vh, 48vw); aspect-ratio: 1;
          border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; }
.qz-box::before, .qz-box::after { content: ""; position: absolute; opacity: .55; }
.qz-box::before { left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--ink-muted); }
.qz-box::after { top: 50%; left: 0; right: 0; border-top: 1px dashed var(--ink-muted); }
.qz-box span { position: relative; z-index: 1; line-height: 1.1; display: inline-block; max-width: 88%;
               text-align: center; overflow-wrap: anywhere;
               font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: min(45vh, 34vw); }
/* fitText() in app.js then shrinks the font until the text fits the box */

.qz-right { min-width: 0; display: flex; flex-direction: column; }
.qz-form label { display: block; font-size: clamp(17px, 2.6vh, 24px); font-weight: 500; margin-bottom: 1.2vh; }
.qz-inrow { display: flex; gap: 10px; }
.qz-inrow input { flex: 1; min-width: 0; font-size: clamp(20px, 3.2vh, 30px); padding: 1.8vh 22px; background: var(--paper); color: var(--ink);
                  border: 3px solid var(--ink); border-radius: 2px; outline: none; }
.qz-inrow input:focus { box-shadow: 0 0 0 4px var(--focus); }
.qz-check { background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; padding: 0 clamp(22px, 2.4vw, 40px);
            font-size: clamp(18px, 2.8vh, 26px); cursor: pointer; min-height: 7vh; }
.qz-check:disabled, .qz-inrow input:disabled { opacity: .5; cursor: default; }
.qz-hint { color: var(--ink-muted); font-size: clamp(15px, 2.2vh, 20px); margin: 1.8vh 0 0; }

.qz-result { margin-top: 2vh; padding: 2vh 24px; background: var(--paper); border: 1px solid var(--track);
             display: flex; flex-direction: column; gap: 1vh; }
.qz-fb { font-weight: 700; font-size: clamp(16px, 2.5vh, 22px); }
.qz-fb.good { color: var(--good); } .qz-fb.bad { color: var(--bad); }
.qz-ans { font-size: clamp(22px, 3.8vh, 34px); font-weight: 600; line-height: 1.25;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qz-sub { color: var(--ink-muted); font-size: clamp(15px, 2.4vh, 21px); overflow: hidden;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qz-ex { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qz-left .qz-ex { max-width: min(64vh, 48vw); white-space: normal;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qz-nextrow { display: flex; gap: 14px; align-items: center; margin-top: 6px; }
.qz-nextrow .qz-check { min-height: 6vh; }
.qz-flip { background: none; border: 0; color: var(--ink-muted); text-decoration: underline; cursor: pointer; font-size: clamp(14px, 2vh, 18px); }

/* narrow or short screens: stack, smaller box */
@media (max-width: 720px) {
  .qz-main { grid-template-columns: 1fr; gap: 14px; }
  .qz-left { align-items: center; }
  .qz-box { width: min(30vh, 60vw); }
  .qz-box span { font-size: min(21vh, 42vw); }
  .qz-left .qz-ex { max-width: 100%; }
  .qz-inrow input { font-size: 18px; padding: 10px 12px; }
  .qz-result { margin-top: 10px; padding: 10px 12px; }
  .qz-ans { font-size: 20px; }
}

/* radicals of a kanji / kanji of a word */
.parts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 15px; }
.card .parts { justify-content: center; margin: 8px 0; }
.parts-label { color: var(--ink-muted, var(--muted)); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.part b { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 20px; font-weight: 600; margin-right: 2px; }
.qz-result .parts { margin-top: 2px; font-size: clamp(15px, 2.4vh, 21px); }
.qz-result .part b { font-size: clamp(20px, 3.4vh, 30px); }
.qz-result .parts-label { font-size: clamp(12px, 1.8vh, 16px); }
.sim .part { white-space: nowrap; }
.sim-st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 2px; vertical-align: middle; }
.sim-st.learning { background: var(--learning); } .sim-st.learned { background: var(--learned); }

/* ---- start screen: the series ---- */
body:has(.home) { background: #ecedf1; }
@media (prefers-color-scheme: dark) { body:has(.home) { background: #14151f; } }
.home { --ink: #1e2044; --ink-muted: #6b7090; --track: #c5cadb; --paper: #f7f8fb;
        max-width: 1100px; margin: 6vh auto 0; color: var(--ink); }
@media (prefers-color-scheme: dark) { .home { --ink: #e4e6f2; --ink-muted: #9aa0bd; --track: #3a3e58; --paper: #1d1f30; } }
.home .muted { color: var(--ink-muted); font-size: 17px; margin: 6px 0 0; }
.home-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.home h1 { font-size: clamp(34px, 5vh, 52px); margin: 0; }
.series-select { font-size: 17px; padding: 6px 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 2px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 5vh 0 4vh; }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
        padding: clamp(22px, 4vh, 40px) 28px; background: var(--paper); color: var(--ink);
        border: 3px solid var(--ink); border-radius: 2px; border-top-width: 10px; transition: transform .08s, box-shadow .08s; }
.tile.new { border-top-color: #7f8c8d; } .tile.learning { border-top-color: #d68910; } .tile.learned { border-top-color: #2e8b57; }
.tile b { font-size: clamp(44px, 8vh, 76px); line-height: 1; font-weight: 700; }
.tile span { font-size: clamp(19px, 2.8vh, 26px); font-weight: 600; }
.tile small { color: var(--ink-muted); font-size: 15px; }
.tile:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
.tile:focus-visible { outline: 4px solid #3d5afe; outline-offset: 2px; }
.tile:disabled { opacity: .45; cursor: default; }
.home-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--ink-muted); font-size: 16px; }
.home-foot select { font-size: 16px; margin-left: 6px; background: var(--paper); color: var(--ink); border: 1px solid var(--track); padding: 4px 8px; }
.home-foot .links { margin-left: auto; }
.home-foot a, .backlink { color: var(--ink-muted, var(--muted)); }
.backlink { display: inline-block; margin-bottom: 12px; font-size: 16px; }
.tile-link { font-size: 18px; padding: 14px 24px; background: #1e2044; color: #fff; border: 0; cursor: pointer; }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } .home-foot .links { margin-left: 0; } }
.done .btn.primary:focus { outline: 3px solid #3d5afe; outline-offset: 2px; }

/* ---- scope, readiness, piles, chapters ---- */
.home { margin-top: 4vh; }
.scope { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 14px 0 10px; font-size: 17px; }
.scope select { font-size: 16px; padding: 6px 10px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 2px; margin-left: 6px; max-width: 420px; }
.read-btn { margin-left: auto; font-size: 17px; padding: 9px 18px; background: var(--ink); color: var(--paper); border: 0; border-radius: 2px; cursor: pointer; }
.ready { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; }
.rbar { display: inline-block; width: 160px; height: 10px; background: var(--track); border-radius: 5px; overflow: hidden; vertical-align: middle; }
.rbar span { display: block; height: 100%; background: #2e8b57; }
.pile-h { margin: 3vh 0 0; font-size: 18px; color: var(--ink-muted); font-weight: 600; }
.home .tiles { margin: 1.4vh 0 0; }
.tiles.small .tile { padding: 14px 20px; border-top-width: 6px; flex-direction: row; align-items: baseline; gap: 12px; }
.tiles.small .tile b { font-size: clamp(26px, 4vh, 36px); }
.tiles.small .tile span { font-size: 17px; }
.chlist { margin-top: 3vh; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 18px; }
.chlist a { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; padding: 6px 8px; border-radius: 4px; }
.chlist a span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chlist a .rbar { width: 90px; height: 7px; }
.chlist a.on { background: var(--paper); outline: 2px solid var(--ink); }
.chlist a:hover { background: var(--paper); }
.home-foot { margin-top: 3vh; }
.small-note { font-size: 14px !important; }
.modal { position: fixed; inset: 0; background: rgba(20, 22, 40, .45); display: grid; place-items: center; z-index: 10; }
.modal-box { background: #f7f8fb; color: #1e2044; border: 3px solid #1e2044; padding: 28px 32px; max-width: 520px; }
.modal-box h2 { margin-top: 0; }

/* ---- reader ---- */
body:has(.reader) { background: #ecedf1; }
@media (prefers-color-scheme: dark) { body:has(.reader) { background: #14151f; } }
body:has(.reader) main { max-width: none; margin: 0; padding: 10px 16px 0; }
.reader { --ink: #1e2044; --ink-muted: #6b7090; --track: #c5cadb; --paper: #f7f8fb; color: var(--ink);
          height: calc(100dvh - 10px); display: flex; flex-direction: column; }
@media (prefers-color-scheme: dark) { .reader { --ink: #e4e6f2; --ink-muted: #9aa0bd; --track: #3a3e58; --paper: #1d1f30; } }
.rd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: none; }
.rd-head .backlink { margin: 0; }
.rd-head select { font-size: 15px; padding: 4px 8px; }
.rd-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 15px; }
.rd-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30vw); gap: 16px; padding: 10px 0; }
.rd-pagewrap { min-height: 0; display: flex; justify-content: center; align-items: flex-start; }
.rd-page { position: relative; height: 100%; max-width: 100%; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.2); }
.rd-page img { width: 100%; height: 100%; display: block; user-select: none; }
.noimg-note { display: none; }
.rd-page.noimg img { visibility: hidden; }
.rd-page.noimg .noimg-note { display: block; position: absolute; inset: 30% 10% auto; margin: 0; padding: 16px; border-radius: 10px;
  background: #fff8e6; color: #3a2e10; border: 1px solid #e6cf8c; font-size: 15px; line-height: 1.5; text-align: center; z-index: 1; }
.bubble { position: absolute; background: transparent; border: 2px solid transparent; border-radius: 4px; cursor: pointer; padding: 0; }
.bubble:hover { border-color: rgba(61, 90, 254, .6); background: rgba(61, 90, 254, .08); }
.bubble.on { border-color: #3d5afe; background: rgba(61, 90, 254, .15); }
.rd-panel { overflow-y: auto; background: var(--paper); border: 1px solid var(--track); padding: 16px 18px; }
.rd-panel h4 { margin: 16px 0 6px; color: var(--ink-muted); text-transform: uppercase; font-size: 13px; letter-spacing: .05em; }
.rd-text { font-size: 22px; line-height: 1.5; font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; margin-bottom: 10px; }
.rd-word { padding: 6px 8px; border-radius: 4px; }
.rd-word.hl { background: color-mix(in srgb, #d68910 18%, transparent); }
.rd-key { font-size: 19px; font-weight: 600; margin-right: 6px; }
.rd-mean { font-size: 15px; }
.rd-word .badge { margin-left: 4px; }
.mini { font-size: 12px; padding: 1px 8px; margin-left: 4px; cursor: pointer; background: transparent; border: 1px solid var(--ink-muted); border-radius: 4px; color: var(--ink); }
.rd-tr { margin: 8px 0; padding: 10px; background: color-mix(in srgb, #3d5afe 8%, transparent); font-size: 15px; }
.rd-foot { font-size: 13px; margin-top: 18px; }
@media (max-width: 800px) { .rd-main { grid-template-columns: 1fr; } .rd-page { height: auto; width: 100%; } }
.home .tiles:not(.small) .tile { padding: 2.2vh 24px; }
.home .tiles:not(.small) .tile b { font-size: clamp(36px, 6vh, 64px); }
.ruby-mask { position: absolute; pointer-events: none; }
.rd-furi { font-size: 14px; color: var(--ink-muted); }
.rd-furi select { font-size: 14px; margin-left: 4px; }
/* kanji breakdown of a compound word */
.rd-compound { color: inherit; text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; }
.kbox:empty { display: none; }
.kbox { margin: 6px 0 2px 10px; border-left: 3px solid var(--track, #ccc); padding-left: 10px; }
.kd { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; }
.kd-ch { font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; font-size: 28px; line-height: 1; min-width: 32px; }
.kd-body { font-size: 14px; flex: 1; min-width: 0; }
.kd-more { font-size: 12px; margin-left: 6px; color: var(--ink-muted, #777); }
.kd-extra { margin-top: 3px; }
.kd-toggle { font-size: 13px; color: var(--ink-muted); margin-left: 6px; }
.qz-result .kbox { max-height: 22vh; overflow-y: auto; }
.rd-ai { margin-bottom: 6px; }
.rd-ctx { font-size: 15px; padding: 2px 0; }
.rd-ex { font-size: 13px; color: var(--ink-muted); margin-top: 2px; }
/* progress over time */
.prog-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 10px; }
.prog-chart { width: 100%; height: auto; max-height: 62vh; }
.prog-table { font-size: 14px; }
.prog-table td, .prog-table th { padding: 4px 6px; }
.prog-table .up { color: #2e8b57; font-weight: 600; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
body:has(.prog) main { max-width: 1300px; margin-top: 12px; }
@media (max-width: 900px) { .prog-body { grid-template-columns: 1fr; } }
/* stats */
.stat-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.stile { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.stile b { font-size: 30px; line-height: 1.1; }
.stile small { color: var(--muted); font-size: 12px; }
.stats-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; margin-top: 10px; }
.stats-body h4 { margin: 8px 0 2px; font-size: 14px; }
.stats-chart { width: 100%; height: auto; max-height: 26vh; }
body:has(.stats-page) main { max-width: 1300px; margin-top: 12px; }
@media (max-width: 900px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } .stats-body { grid-template-columns: 1fr; } }
/* video player */
.vd-wrap { position: relative; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vd-wrap video { max-width: 100%; max-height: calc(100dvh - 210px); background: #000; }
.vd-sub { min-height: 84px; text-align: center; font-size: clamp(22px, 3.2vh, 32px); line-height: 1.9; cursor: pointer;
          font-family: "Hiragino Sans", "Noto Sans JP", sans-serif; }
.vd-sub rt { font-size: 0.45em; color: var(--ink-muted); }
.vw { border-radius: 4px; padding: 0 1px; }
.vw:hover { background: rgba(61, 90, 254, .15); }
.vw.learning { box-shadow: inset 0 -3px 0 #d68910; }
.vw.new { box-shadow: inset 0 -3px 0 #c5cadb; }
.vd-pop { position: absolute; width: 320px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
          padding: 10px 12px; font-size: 15px; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.vd-who { color: var(--ink-muted); font-size: .6em; margin-right: 6px; }
/* fullscreen player: video fills the screen, subtitles over its lower part */
.vd-wrap.vd-full { position: fixed; inset: 0; z-index: 50; }
.vd-wrap:fullscreen, .vd-wrap.vd-full { background: #000; justify-content: center; padding: 0; gap: 0; }
.vd-wrap:fullscreen video, .vd-wrap.vd-full video { width: 100vw; height: 100vh; max-height: none; object-fit: contain; }
.vd-wrap:fullscreen .vd-sub, .vd-wrap.vd-full .vd-sub { position: absolute; left: 0; right: 0; bottom: 9vh; margin: 0 auto; width: fit-content; max-width: 90vw;
  padding: 4px 18px; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; font-size: clamp(28px, 4.2vh, 48px); }
.vd-wrap:fullscreen .vd-sub rt, .vd-wrap.vd-full .vd-sub rt { color: #ddd; }
.vd-wrap:fullscreen .vw.new, .vd-wrap.vd-full .vw.new { box-shadow: inset 0 -3px 0 #8890b0; }
.vd-wrap:fullscreen .vd-who, .vd-wrap.vd-full .vd-who { color: #bbb; }
.vd-wrap:fullscreen .vd-pop, .vd-wrap.vd-full .vd-pop { --paper: #f7f8fb; --ink: #1e2044; }
/* the player's own control bar */
.vd-box { position: relative; max-width: 100%; line-height: 0; }
.vd-box video { max-width: 100%; max-height: calc(100dvh - 210px); background: #000; cursor: pointer; }
.vd-ctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
           background: linear-gradient(transparent, rgba(0,0,0,.75)); color: #fff; line-height: 1; transition: opacity .25s; }
.vd-ctrl.hide { opacity: 0; }
.vd-ctrl button { background: none; border: 0; color: #fff; font-size: 18px; cursor: pointer; padding: 2px 4px; }
.vd-ctrl #vtime { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vd-ctrl #vseek { flex: 1; accent-color: #fff; }
.vd-ctrl #vvol { width: 80px; accent-color: #fff; }
.vd-ctrl #vfull { margin-left: 4px; }
.vd-wrap:fullscreen .vd-box, .vd-wrap.vd-full .vd-box { width: 100vw; height: 100vh; }
.vd-wrap:fullscreen .vd-box video, .vd-wrap.vd-full .vd-box video { width: 100%; height: 100%; max-height: none; }
/* add to library */
.lb { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.lb-list { max-height: 34vh; overflow-y: auto; display: flex; flex-direction: column; margin-top: 6px; }
.lb-list a { padding: 3px 4px; color: inherit; text-decoration: none; border-radius: 4px; }
.lb-list a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.ltable { font-size: 14px; margin-top: 10px; }
.ltable input[type=text] { font-size: 14px; padding: 3px 6px; width: 100%; }
.ltable .lfile { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
details summary { cursor: pointer; margin-top: 10px; }
/* continue where you left off */
.cont { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 2.4vh; }
.cont-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 2px;
             background: var(--paper); color: var(--ink); text-decoration: none; }
.cont-item:hover { box-shadow: 0 4px 0 var(--ink); }
.cont-what { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.cont-item small { color: var(--ink-muted); }
.cont-item .rbar { width: 100%; height: 6px; }

/* ---- menu (top right, on every page) ---- */
.menu-wrap { position: fixed; top: 12px; right: 16px; z-index: 50;
  --ink: #1e2044; --ink-muted: #6b7090; --track: #c5cadb; --paper: #f7f8fb; }
@media (prefers-color-scheme: dark) { .menu-wrap { --ink: #e4e6f2; --ink-muted: #9aa0bd; --track: #3a3e58; --paper: #1d1f30; } }
.menu-btn { font: inherit; font-size: 15px; font-weight: 600; background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  border-radius: 10px; padding: 6px 14px; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.menu-btn:hover, .menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.menu { position: absolute; right: 0; top: calc(100% + 8px); width: 290px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 6px; }
.menu[hidden] { display: none; }
.menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 16px; }
.menu a:hover { background: rgba(61, 90, 254, .1); }
.menu-sep { height: 1px; background: var(--track); margin: 6px 4px; }
.menu-opt { display: block; padding: 8px 12px; font-size: 15px; cursor: pointer; }
.menu-opt input { margin-right: 6px; transform: scale(1.15); }
.menu-opt small { display: block; color: var(--ink-muted); font-size: 12.5px; margin: 3px 0 0 24px; line-height: 1.35; }
.home-head { padding-right: 120px; }
.vd-wrap:fullscreen ~ .menu-wrap { display: none; }

/* ---- home: library, cover, details ---- */
.home { margin-top: 3vh; }
.pile-h.first { margin-top: 0; }
.pile-h small { font-weight: 400; font-size: 15px; }
.lib-row { display: flex; gap: 14px; overflow-x: auto; padding: 10px 2px 12px; scroll-snap-type: x proximity; }
.lib-card { flex: 0 0 132px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 2px solid var(--track); border-radius: 4px; text-align: left; scroll-snap-align: start; font: inherit; }
.lib-card img, .lib-ph { width: 100%; height: 150px; object-fit: cover; border-radius: 2px; background: var(--track); display: flex;
  align-items: center; justify-content: center; font-size: 46px; color: var(--ink-muted); }
.lib-card b { font-size: 15px; line-height: 1.2; }
.lib-card small { color: var(--ink-muted); font-size: 12.5px; }
.lib-card:hover { border-color: var(--ink); }
.lib-card.on { border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
.home .tiles { margin: 1.6vh 0 2.4vh; }
.home-low { display: flex; gap: 28px; align-items: flex-start; }
.vol-area { flex: 1; min-width: 0; }
.cont-col { flex: 0 0 280px; }
.cont-col .pile-h { margin-top: 0; }
.cont-col .cont { grid-template-columns: 1fr; }
.vol-sel { display: flex; gap: 24px; align-items: flex-start; }
.vol-cover img { width: 190px; max-height: 280px; object-fit: contain; border: 2px solid var(--ink); border-radius: 2px; background: #000; display: block; }
.vol-info { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.vol-info h2 { margin: 0; font-size: 28px; }
.vol-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.vol-nav .btn, .vol-btns .btn { background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 2px; padding: 5px 12px; cursor: pointer; }
.vol-btns { display: flex; gap: 12px; align-items: center; }
.vol-btns .read-btn { margin-left: 0; }
.vol-btns .btn.big { font-size: 17px; padding: 8px 18px; }
.vol-strip { display: flex; gap: 12px; overflow-x: auto; padding: 10px 2px 12px; }
.vol-card { flex: 0 0 100px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 6px; cursor: pointer; font: inherit;
  background: var(--paper); color: var(--ink); border: 2px solid var(--track); border-radius: 3px; }
.vol-card:hover { border-color: var(--ink); }
.vol-card img { width: 100%; height: 130px; object-fit: cover; background: var(--track); }
.vol-card b { font-size: 13.5px; }
.vol-card .rbar { width: 100%; height: 6px; }
.vol-card small { color: var(--ink-muted); font-size: 12px; }
.details { --ink: #1e2044; --ink-muted: #6b7090; --track: #c5cadb; --paper: #f7f8fb; max-width: 1000px; }
@media (prefers-color-scheme: dark) { .details { --ink: #e4e6f2; --ink-muted: #9aa0bd; --track: #3a3e58; --paper: #1d1f30; } }
.det-head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 18px; }
.det-head img { width: 140px; border: 2px solid var(--ink); }
.det-head h2 { margin: 0 0 8px; }
.det-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.det-table th { text-align: left; font-size: 13px; color: var(--ink-muted); font-weight: 600; padding: 6px 8px; border-bottom: 2px solid var(--track); }
.det-table td { padding: 8px; border-bottom: 1px solid var(--track); }
.det-table tr.on td { background: rgba(61, 90, 254, .08); }
.det-table .det-bar .rbar { width: 220px; }
.det-act { text-align: right; white-space: nowrap; }
.det-act .btn { margin-left: 6px; }
@media (max-width: 800px) { .home-low, .vol-sel { flex-direction: column; } .cont-col { flex-basis: auto; width: 100%; } .det-table .det-bar { display: none; } }

/* ---- step-by-step AI explanation ---- */
.steps-btn { margin: 8px 0 4px; }
.steps { margin: 8px 0; padding-left: 22px; }
.steps li { margin-bottom: 9px; line-height: 1.45; }
.steps-jp { font-size: 1.15em; margin-right: 4px; }
.steps-role { font-size: 11.5px; padding: 1px 7px; border-radius: 9px; background: rgba(61, 90, 254, .12); margin-left: 4px; white-space: nowrap; }
.steps-err { margin: 6px 0; padding: 8px 10px; border-left: 3px solid #d68910; background: rgba(214, 137, 16, .08); font-size: 14px; }
.steps-err code { word-break: break-all; }
.unlock { margin-left: auto; display: inline-flex; align-items: center; }
.unlock + .rd-nav { margin-left: 12px; }
.unlock-st { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.unlock-st .rbar { width: 90px; height: 7px; }
.rd-head { padding-right: 110px; }  /* room for the fixed ☰ Menu button */
.lib-card.add { border-style: dashed; border-color: var(--ink-muted); }
.lib-card.add .lib-ph { background: transparent; border: 2px dashed var(--track); color: var(--ink-muted); }
.lib-card.add:hover { border-color: var(--ink); }
.lib-card.add:hover .lib-ph { color: var(--ink); border-color: var(--ink-muted); }
.reading-now { border: 2px solid var(--ink); background: var(--paper); padding: 12px 16px; border-radius: 2px; display: flex; flex-direction: column; gap: 10px; }
.rn-where { font-size: 17px; }
.rn-on { color: #2e8b57; font-weight: 600; font-size: 16px; }
.explain-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.explain-buy .rbar { width: 120px; }
.qz-ignore { margin-left: auto; color: var(--ink-muted); font-size: 14px; text-decoration: none; border: 1px solid var(--track); border-radius: 6px; padding: 2px 10px; }
.qz-ignore:hover { color: var(--ink); border-color: var(--ink); }
.qz-ignore + .qz-quit { margin-left: 14px; }
.badge.ignored { background: #e2e2e2; color: #777; text-decoration: line-through; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; padding: 10px 2px 12px; }
.lib-grid .lib-card { flex: none; }
.lib-card.more .lib-ph { background: var(--paper); border: 2px solid var(--track); color: var(--ink-muted); }
.lib-card.more:hover .lib-ph { color: var(--ink); border-color: var(--ink-muted); }
/* compact volume block: everything within the cover's height */
.vol-cover img { height: 250px; width: auto; max-width: 180px; object-fit: cover; }
.vol-info { height: 250px; justify-content: space-between; gap: 8px; }
.vol-info h2 { font-size: 26px; margin-bottom: 6px; }
.vol-info .ready { margin-bottom: 4px; }
.rn-where { font-size: 16px; color: var(--ink-muted); }
.vol-btns { flex-wrap: wrap; gap: 10px; }
.vol-btns .read-btn, .vol-btns .btn.big { font-size: 16px; padding: 8px 16px; }
.vol-tag { font-size: 15px; padding: 8px 12px; border: 2px solid var(--track); border-radius: 2px; color: var(--ink-muted); }
.vol-tag.on { color: #2e8b57; border-color: #2e8b57; font-weight: 600; }
@media (max-width: 800px) { .vol-info { height: auto; } }
/* home library row: 4 last opened + Whole library + Add content, always fits, no scrolling */
.lib-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; overflow: visible; }
.lib-row .lib-card { flex: none; min-width: 0; }
.lib-row .lib-card img, .lib-row .lib-ph { height: auto; aspect-ratio: 3 / 4; max-height: 170px; }
.lib-row .lib-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
@media (max-width: 700px) { .lib-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
button.vol-cover { padding: 0; border: 0; background: none; cursor: pointer; display: block; }
button.vol-cover img { transition: transform .08s, box-shadow .08s; }
button.vol-cover:hover img { transform: translateY(-3px); box-shadow: 0 6px 0 var(--ink); }
.ch-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 5px; }
.ch-link.small { font-size: 15px; font-weight: 500; color: var(--ink-muted); }
/* volume block: cover | info | actions on the right, all within the cover's height */
.vol-sel { align-items: stretch; }
.vol-info { flex: 1; height: auto; justify-content: center; gap: 10px; }
.vol-actions { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; gap: 12px; height: 250px; }
.vol-actions .vol-nav { justify-content: flex-end; }
.vol-actions .vol-btns { display: flex; flex-direction: column; align-items: stretch; gap: 10px; min-width: 240px; }
.vol-actions .vol-btns > * { text-align: center; }
@media (max-width: 900px) { .vol-sel { flex-wrap: wrap; } .vol-actions { height: auto; align-items: flex-start; width: 100%; } .vol-actions .vol-nav { justify-content: flex-start; } }
.qz-nextrow { display: flex; align-items: center; gap: 14px; }
.qz-nextrow .qz-ignore { margin-left: auto; }

/* ---- home fits the window: no scrolling (sizes follow the window height) ---- */
.home { margin: 1.6vh auto 0; }
.home .pile-h { margin-top: 1.4vh; font-size: clamp(14px, 1.9vh, 18px); }
.home .pile-h.first { margin-top: 0; }
.lib-row { padding: 0.8vh 2px 0.6vh; gap: 12px; }
.lib-row .lib-card { padding: 6px; gap: 2px; }
.lib-row .lib-card img, .lib-row .lib-ph { max-height: 17vh; }
.lib-row .lib-card b { font-size: 14px; }
.lib-row .lib-card small { font-size: 12px; }
.home .tiles { margin: 1vh 0 1.8vh; gap: 16px; }
.home .tile { padding: clamp(10px, 2vh, 28px) 22px; gap: 4px; border-top-width: 8px; }
.home .tile b { font-size: clamp(30px, 5.6vh, 64px); }
.home .tile span { font-size: clamp(16px, 2.3vh, 24px); }
.home .tile small { font-size: 13.5px; }
.vol-cover img { height: 26vh; max-height: 250px; min-height: 150px; max-width: none; width: auto; }
.vol-actions { height: 26vh; max-height: 250px; min-height: 150px; }
.vol-info h2 { font-size: clamp(20px, 2.8vh, 28px); }
.vol-strip { padding: 0.8vh 2px; }
.vol-card img { height: 18vh; max-height: 130px; }
.menu-opt select { margin-left: 8px; font: inherit; }