/* Source: src/reader/styles/base.css */
:root {
  --jpdb-reader-theme-dark-bg: #181b20;
  --jpdb-reader-theme-dark-surface: #20242b;
  --jpdb-reader-theme-dark-surface-2: #282e37;
  --jpdb-reader-theme-dark-text: #f2f4f8;
  --jpdb-reader-theme-dark-muted: #aab2c0;
  --jpdb-reader-theme-dark-faint: #6f7a89;
  --jpdb-reader-theme-dark-border: rgba(255,255,255,.12);
  --jpdb-reader-theme-dark-accent-readable: #76bd99;
  --jpdb-reader-theme-dark-danger-readable: #ff8c8c;
  --jpdb-reader-theme-accent-text: #11161d;
  --jpdb-reader-theme-light-bg: #fbfcfe;
  --jpdb-reader-theme-light-surface: #f4f7fa;
  --jpdb-reader-theme-light-surface-2: #e8edf3;
  --jpdb-reader-theme-light-text: #17202a;
  --jpdb-reader-theme-light-muted: #4f5968;
  --jpdb-reader-theme-light-faint: #687384;
  --jpdb-reader-theme-light-border: rgba(37,52,73,.18);
  --jpdb-reader-theme-light-accent-readable: #245c42;
  --jpdb-reader-theme-light-danger-readable: #b42318;
  --jpdb-reader-theme-accent: #5ea780;
  --jpdb-reader-theme-danger: #e55353;
  --jpdb-reader-white: #ffffff;
  --jpdb-reader-black: #000000;
  --jpdb-reader-state-new: #58a6ff;
  --jpdb-reader-state-learning: #ffd166;
  --jpdb-reader-state-known: #7bd88f;
  --jpdb-reader-state-due: #5fb3b3;
  --jpdb-reader-state-failed: #ff6b6b;
  --jpdb-reader-state-ignored: #b8a7ff;
  --jpdb-reader-state-frequent: #4b8d7f;
  --jpdb-reader-state-unparsed: var(--jpdb-reader-faint);
  --jpdb-reader-state-not-in-deck: color-mix(in srgb, var(--jpdb-reader-state-new) 36%, var(--jpdb-reader-faint));
  --jpdb-reader-state-new-bright: #5aa9ff;
  --jpdb-reader-state-hard: #ffb454;
  --jpdb-reader-state-new-readable: var(--jpdb-reader-state-new);
  --jpdb-reader-state-not-in-deck-readable: color-mix(in srgb, var(--jpdb-reader-state-new-readable) 28%, var(--jpdb-reader-muted));
  --jpdb-reader-state-learning-readable: var(--jpdb-reader-state-learning);
  --jpdb-reader-state-known-readable: var(--jpdb-reader-state-known);
  --jpdb-reader-state-due-readable: var(--jpdb-reader-state-due);
  --jpdb-reader-state-failed-readable: var(--jpdb-reader-state-failed);
  --jpdb-reader-state-ignored-readable: var(--jpdb-reader-state-ignored);
  --jpdb-reader-state-frequent-readable: var(--jpdb-reader-state-frequent);
  --jpdb-reader-state-unparsed-readable: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-state-new-soft: color-mix(in srgb, var(--jpdb-reader-state-new) 16%, transparent);
  --jpdb-reader-state-not-in-deck-soft: color-mix(in srgb, var(--jpdb-reader-state-not-in-deck) 10%, transparent);
  --jpdb-reader-state-learning-soft: color-mix(in srgb, var(--jpdb-reader-state-learning) 16%, transparent);
  --jpdb-reader-state-known-soft: color-mix(in srgb, var(--jpdb-reader-state-known) 16%, transparent);
  --jpdb-reader-state-due-soft: color-mix(in srgb, var(--jpdb-reader-state-due) 16%, transparent);
  --jpdb-reader-state-failed-soft: color-mix(in srgb, var(--jpdb-reader-state-failed) 16%, transparent);
  --jpdb-reader-state-ignored-soft: color-mix(in srgb, var(--jpdb-reader-state-ignored) 16%, transparent);
  --jpdb-reader-state-frequent-soft: color-mix(in srgb, var(--jpdb-reader-state-frequent) 16%, transparent);
  --jpdb-reader-state-unparsed-soft: color-mix(in srgb, var(--jpdb-reader-state-unparsed) 16%, transparent);
  --jpdb-reader-pitch-heiban: #359eff;
  --jpdb-reader-pitch-atamadaka: #fe4b74;
  --jpdb-reader-pitch-nakadaka: #fba840;
  --jpdb-reader-pitch-odaka: #57ccb7;
  --jpdb-reader-pitch-kifuku: #9050f6;
  --jpdb-reader-pitch-unknown: #94a3b8;
  --jpdb-reader-pitch-heiban-readable: var(--jpdb-reader-pitch-heiban);
  --jpdb-reader-pitch-atamadaka-readable: var(--jpdb-reader-pitch-atamadaka);
  --jpdb-reader-pitch-nakadaka-readable: var(--jpdb-reader-pitch-nakadaka);
  --jpdb-reader-pitch-odaka-readable: var(--jpdb-reader-pitch-odaka);
  --jpdb-reader-pitch-kifuku-readable: var(--jpdb-reader-pitch-kifuku);
  --jpdb-reader-pitch-unknown-readable: var(--jpdb-reader-pitch-unknown);
  --jpdb-reader-pitch-heiban-soft: color-mix(in srgb, var(--jpdb-reader-pitch-heiban) 14%, transparent);
  --jpdb-reader-pitch-atamadaka-soft: color-mix(in srgb, var(--jpdb-reader-pitch-atamadaka) 14%, transparent);
  --jpdb-reader-pitch-nakadaka-soft: color-mix(in srgb, var(--jpdb-reader-pitch-nakadaka) 16%, transparent);
  --jpdb-reader-pitch-odaka-soft: color-mix(in srgb, var(--jpdb-reader-pitch-odaka) 14%, transparent);
  --jpdb-reader-pitch-kifuku-soft: color-mix(in srgb, var(--jpdb-reader-pitch-kifuku) 14%, transparent);
  --jpdb-reader-stats-learning: #f2b84b;
  --jpdb-reader-stats-due: #8fd694;
  --jpdb-reader-stats-failed: #ff7a7a;
  --jpdb-reader-stats-known: #74c0fc;
  --jpdb-reader-stats-suspended: #b27cff;
  --jpdb-reader-stats-ignored: #8b949e;
  --jpdb-reader-grade-something: #f59e0b;
  --jpdb-reader-video-text: var(--jpdb-reader-white);
  --jpdb-reader-video-text-muted: color-mix(in srgb, var(--jpdb-reader-white) 82%, transparent);
  --jpdb-reader-video-outline: var(--jpdb-reader-black);
  --jpdb-reader-video-panel: #1c222b;
  --jpdb-reader-video-frame: #05070a;
  --jpdb-reader-video-grid-line: color-mix(in srgb, var(--jpdb-reader-white) 10%, transparent);
  --jpdb-reader-video-control-hover: color-mix(in srgb, var(--jpdb-reader-white) 14%, transparent);
  --jpdb-reader-video-target-backdrop: color-mix(in srgb, var(--jpdb-reader-black) 38%, transparent);
  --jpdb-reader-video-shadow-strong: color-mix(in srgb, var(--jpdb-reader-black) 92%, transparent);
  --jpdb-reader-video-shadow-heavy: color-mix(in srgb, var(--jpdb-reader-black) 86%, transparent);
  --jpdb-reader-video-shadow: color-mix(in srgb, var(--jpdb-reader-black) 72%, transparent);
  --jpdb-reader-video-shadow-soft: color-mix(in srgb, var(--jpdb-reader-black) 58%, transparent);
  --jpdb-reader-video-shadow-faint: color-mix(in srgb, var(--jpdb-reader-black) 38%, transparent);
  --jpdb-reader-video-shadow-subtle: color-mix(in srgb, var(--jpdb-reader-black) 30%, transparent);
  --jpdb-reader-ocr-line-bg: rgba(24, 27, 32, 0.14);
  --jpdb-reader-ocr-bg: rgba(24, 27, 32, 0.32);
  --jpdb-reader-ocr-active-bg: rgba(24, 27, 32, 0.44);
  --jpdb-reader-ocr-border: color-mix(in srgb, var(--jpdb-reader-white) 10%, transparent);
  --jpdb-reader-ocr-active-border: color-mix(in srgb, var(--jpdb-reader-white) 18%, transparent);
  --jpdb-reader-ocr-inset: color-mix(in srgb, var(--jpdb-reader-white) 4%, transparent);
  --jpdb-reader-ocr-active-inset: color-mix(in srgb, var(--jpdb-reader-white) 5%, transparent);
  --jpdb-reader-image-caption-shadow-1: color-mix(in srgb, var(--jpdb-reader-black) 95%, transparent);
  --jpdb-reader-image-caption-shadow-2: color-mix(in srgb, var(--jpdb-reader-black) 90%, transparent);
  --jpdb-reader-image-caption-shadow-3: color-mix(in srgb, var(--jpdb-reader-black) 78%, transparent);
  --jpdb-reader-word-unknown-bg-shadow: 0 0 1px color-mix(in srgb, var(--jpdb-reader-white) 72%, transparent), 0 1px 2px color-mix(in srgb, var(--jpdb-reader-black) 48%, transparent);
  --jpdb-reader-doodle-ink-default: #141820;
  --jpdb-reader-doodle-number: #6b7280;
  --jpdb-reader-doodle-help: #3d4654;
  --jpdb-reader-doodle-paper: #f8f9fb;
  --jpdb-reader-doodle-grid: color-mix(in srgb, var(--jpdb-reader-black) 8%, transparent);
  --jpdb-reader-paper-inset: color-mix(in srgb, var(--jpdb-reader-white) 58%, transparent);
  --jpdb-reader-paper-inset-soft: color-mix(in srgb, var(--jpdb-reader-white) 48%, transparent);
  --jpdb-reader-paper-inset-strong: color-mix(in srgb, var(--jpdb-reader-white) 78%, transparent);
  --jpdb-reader-surface-inset: color-mix(in srgb, var(--jpdb-reader-white) 5%, transparent);
  --jpdb-reader-surface-inset-soft: color-mix(in srgb, var(--jpdb-reader-white) 3%, transparent);
  --jpdb-reader-shadow-soft: color-mix(in srgb, var(--jpdb-reader-shadow) 54%, transparent);
  --jpdb-reader-shadow-subtle: color-mix(in srgb, var(--jpdb-reader-shadow) 48%, transparent);
  --jpdb-reader-bg: var(--jpdb-reader-theme-dark-bg);
  --jpdb-reader-surface: var(--jpdb-reader-theme-dark-surface);
  --jpdb-reader-surface-2: var(--jpdb-reader-theme-dark-surface-2);
  --jpdb-reader-text: var(--jpdb-reader-theme-dark-text);
  --jpdb-reader-muted: var(--jpdb-reader-theme-dark-muted);
  --jpdb-reader-faint: var(--jpdb-reader-theme-dark-faint);
  --jpdb-reader-border: var(--jpdb-reader-theme-dark-border);
  --jpdb-reader-accent: var(--jpdb-reader-theme-accent);
  --jpdb-reader-accent-readable: var(--jpdb-reader-theme-dark-accent-readable);
  --jpdb-reader-accent-text: var(--jpdb-reader-theme-accent-text);
  --jpdb-reader-accent-soft: color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
  --jpdb-reader-selection-bg: color-mix(in srgb, var(--jpdb-reader-accent) 38%, var(--jpdb-reader-surface-2));
  --jpdb-reader-selection-text: var(--jpdb-reader-text);
  --jpdb-reader-danger: var(--jpdb-reader-theme-danger);
  --jpdb-reader-danger-readable: var(--jpdb-reader-theme-dark-danger-readable);
  --jpdb-reader-hover: rgba(255,255,255,.08);
  --jpdb-reader-backdrop: rgba(12,16,22,.74);
  --jpdb-reader-example-target-bg: color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
  --jpdb-reader-example-target-underline: color-mix(in srgb, var(--jpdb-reader-accent) 62%, transparent);
  --jpdb-reader-shadow: rgba(0,0,0,.34);
  --jpdb-reader-highlight-backdrop: rgba(12,16,22,.64);
  --jpdb-reader-highlight-shadow: 0 2px 7px rgba(0,0,0,.28);
  --jpdb-reader-paper: #f7f8fb;
  --jpdb-reader-paper-border: rgba(17,24,39,.18);
  --jpdb-reader-kanji-panel-bg: color-mix(in srgb, var(--jpdb-reader-bg) 88%, var(--jpdb-reader-black));
  --jpdb-reader-kanji-grid-line: color-mix(in srgb, var(--jpdb-reader-text) 8%, transparent);
  --jpdb-reader-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jpdb-reader-popup-font: "Nunito Sans", "Extra Sans JP", "Noto Sans Symbols2", "Segoe UI", "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans GB", "Meiryo", sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --jpdb-reader-bg: var(--jpdb-reader-theme-light-bg);
    --jpdb-reader-surface: var(--jpdb-reader-theme-light-surface);
    --jpdb-reader-surface-2: var(--jpdb-reader-theme-light-surface-2);
    --jpdb-reader-text: var(--jpdb-reader-theme-light-text);
    --jpdb-reader-muted: var(--jpdb-reader-theme-light-muted);
    --jpdb-reader-faint: var(--jpdb-reader-theme-light-faint);
    --jpdb-reader-border: var(--jpdb-reader-theme-light-border);
    --jpdb-reader-accent-readable: var(--jpdb-reader-theme-light-accent-readable);
    --jpdb-reader-danger-readable: var(--jpdb-reader-theme-light-danger-readable);
    --jpdb-reader-hover: rgba(37,52,73,.08);
    --jpdb-reader-backdrop: rgba(37,52,73,.24);
    --jpdb-reader-selection-bg: color-mix(in srgb, var(--jpdb-reader-accent) 24%, var(--jpdb-reader-surface-2));
    --jpdb-reader-example-target-bg: color-mix(in srgb, var(--jpdb-reader-accent) 16%, transparent);
    --jpdb-reader-example-target-underline: color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent);
    --jpdb-reader-shadow: rgba(25,37,52,.18);
    --jpdb-reader-highlight-backdrop: rgba(255,255,255,.86);
    --jpdb-reader-highlight-shadow: 0 1px 3px rgba(28,42,60,.16);
    --jpdb-reader-paper: var(--jpdb-reader-white);
    --jpdb-reader-paper-border: rgba(37,52,73,.16);
    --jpdb-reader-kanji-panel-bg: var(--jpdb-reader-white);
    --jpdb-reader-kanji-grid-line: rgba(37,52,73,.1);
  }
}

.jpdb-reader-theme-dark,
.yomu-page-theme-dark {
  --jpdb-reader-bg: var(--jpdb-reader-theme-dark-bg);
  --jpdb-reader-surface: var(--jpdb-reader-theme-dark-surface);
  --jpdb-reader-surface-2: var(--jpdb-reader-theme-dark-surface-2);
  --jpdb-reader-text: var(--jpdb-reader-theme-dark-text);
  --jpdb-reader-muted: var(--jpdb-reader-theme-dark-muted);
  --jpdb-reader-faint: var(--jpdb-reader-theme-dark-faint);
  --jpdb-reader-border: var(--jpdb-reader-theme-dark-border);
  --jpdb-reader-accent-readable: var(--jpdb-reader-theme-dark-accent-readable);
  --jpdb-reader-danger-readable: var(--jpdb-reader-theme-dark-danger-readable);
  --jpdb-reader-hover: rgba(255,255,255,.08);
  --jpdb-reader-backdrop: rgba(12,16,22,.74);
  --jpdb-reader-selection-bg: color-mix(in srgb, var(--jpdb-reader-accent) 38%, var(--jpdb-reader-surface-2));
  --jpdb-reader-example-target-bg: color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
  --jpdb-reader-example-target-underline: color-mix(in srgb, var(--jpdb-reader-accent) 62%, transparent);
  --jpdb-reader-shadow: rgba(0,0,0,.34);
  --jpdb-reader-highlight-backdrop: rgba(12,16,22,.64);
  --jpdb-reader-highlight-shadow: 0 2px 7px rgba(0,0,0,.28);
  --jpdb-reader-paper: #f7f8fb;
  --jpdb-reader-paper-border: rgba(17,24,39,.18);
  --jpdb-reader-kanji-panel-bg: color-mix(in srgb, var(--jpdb-reader-bg) 88%, var(--jpdb-reader-black));
  --jpdb-reader-kanji-grid-line: color-mix(in srgb, var(--jpdb-reader-text) 8%, transparent);
}

.jpdb-reader-theme-light,
.yomu-page-theme-light {
  --jpdb-reader-bg: var(--jpdb-reader-theme-light-bg);
  --jpdb-reader-surface: var(--jpdb-reader-theme-light-surface);
  --jpdb-reader-surface-2: var(--jpdb-reader-theme-light-surface-2);
  --jpdb-reader-text: var(--jpdb-reader-theme-light-text);
  --jpdb-reader-muted: var(--jpdb-reader-theme-light-muted);
  --jpdb-reader-faint: var(--jpdb-reader-theme-light-faint);
  --jpdb-reader-border: var(--jpdb-reader-theme-light-border);
  --jpdb-reader-accent-readable: var(--jpdb-reader-theme-light-accent-readable);
  --jpdb-reader-danger-readable: var(--jpdb-reader-theme-light-danger-readable);
  --jpdb-reader-hover: rgba(37,52,73,.08);
  --jpdb-reader-backdrop: rgba(37,52,73,.24);
  --jpdb-reader-selection-bg: color-mix(in srgb, var(--jpdb-reader-accent) 24%, var(--jpdb-reader-surface-2));
  --jpdb-reader-example-target-bg: color-mix(in srgb, var(--jpdb-reader-accent) 16%, transparent);
  --jpdb-reader-example-target-underline: color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent);
  --jpdb-reader-shadow: rgba(25,37,52,.18);
  --jpdb-reader-highlight-backdrop: rgba(255,255,255,.86);
  --jpdb-reader-highlight-shadow: 0 1px 3px rgba(28,42,60,.16);
  --jpdb-reader-paper: var(--jpdb-reader-white);
  --jpdb-reader-paper-border: rgba(37,52,73,.16);
  --jpdb-reader-kanji-panel-bg: var(--jpdb-reader-white);
  --jpdb-reader-kanji-grid-line: rgba(37,52,73,.1);
}

.jpdb-reader-middle-scan-active {
  overscroll-behavior: none;
  cursor: crosshair;
}

.jpdb-reader-middle-scan-active * {
  cursor: crosshair !important;
}

[data-jpdb-reader-root] {
  all: initial;
  box-sizing: border-box;
  color: var(--jpdb-reader-text);
  color-scheme: normal;
  direction: ltr;
  font: 14px/1.45 var(--jpdb-reader-font);
  letter-spacing: 0;
  text-transform: none;
  unicode-bidi: isolate;
}
[data-jpdb-reader-root],
[data-jpdb-reader-root] *,
[data-jpdb-reader-root]::before,
[data-jpdb-reader-root]::after,
[data-jpdb-reader-root] *::before,
[data-jpdb-reader-root] *::after {
  box-sizing: border-box;
}
[data-jpdb-reader-root] *,
[data-jpdb-reader-root] *::before,
[data-jpdb-reader-root] *::after {
  background: transparent;
  color: inherit;
}
[data-jpdb-reader-root]::selection,
[data-jpdb-reader-root] *::selection {
  background-color: var(--jpdb-reader-selection-bg);
  color: var(--jpdb-reader-selection-text);
  text-shadow: none;
}
[data-jpdb-reader-root]:where(a),
[data-jpdb-reader-root] :where(a) {
  border-bottom: 0;
  color: inherit;
  outline: revert;
  text-decoration: none;
}
[data-jpdb-reader-root]:where(button),
[data-jpdb-reader-root] :where(button) {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  cursor: pointer;
  display: inline-block;
  font: inherit;
  height: auto;
  min-height: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  line-height: normal;
  margin: 0;
  padding: 0;
  text-align: inherit;
  text-decoration: none;
  transform: none;
  transition: none;
  white-space: normal;
}
[data-jpdb-reader-root]:where(input, select, textarea),
[data-jpdb-reader-root] :where(input, select, textarea) {
  appearance: auto;
  -webkit-appearance: auto;
  background: revert;
  border: revert;
  border-radius: revert;
  box-shadow: none;
  color: inherit;
  font: inherit;
  height: auto;
  margin: 0;
  padding: revert;
  transform: none;
  transition: none;
  width: auto;
}
[data-jpdb-reader-root]:where(fieldset, legend, p, ul, ol, li, dl, dt, dd, blockquote, figure, form, table, th, td, hr, h1, h2, h3, h4, h5, h6),
[data-jpdb-reader-root] :where(fieldset, legend, p, ul, ol, li, dl, dt, dd, blockquote, figure, form, table, th, td, hr, h1, h2, h3, h4, h5, h6) {
  background: transparent;
  color: inherit;
  letter-spacing: normal;
  line-height: revert;
  margin: revert;
  padding: revert;
}
[data-jpdb-reader-root]:where(table),
[data-jpdb-reader-root] :where(table) {
  border-collapse: revert;
  border-spacing: revert;
}
[data-jpdb-reader-root]:where(th, td),
[data-jpdb-reader-root] :where(th, td) {
  border: revert;
  text-align: revert;
}
[data-jpdb-reader-root]:where(rt),
[data-jpdb-reader-root] :where(rt) {
  font-size: revert;
  opacity: revert;
}
[data-jpdb-reader-root]:where(button, input, select, textarea),
[data-jpdb-reader-root] :where(button, input, select, textarea) {
  font-family: var(--jpdb-reader-font);
  letter-spacing: 0;
  text-transform: none;
}
[data-jpdb-reader-root]:where(input[type="checkbox"], input[type="radio"]),
[data-jpdb-reader-root] :where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--jpdb-reader-accent) !important;
}


/* Source: src/reader/styles/new-tab.css */
.jpdb-reader-newtab-document,
.jpdb-reader-newtab-document body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--jpdb-reader-bg);
}

.jpdb-reader-newtab {
  --jpdb-reader-newtab-content-width: min(760px, 100%);
  display: block;
  min-height: 100dvh;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--jpdb-reader-bg);
  color: var(--jpdb-reader-text);
  font-family: Inter, ui-sans-serif, var(--jpdb-reader-font);
}

/* Swipe-grade edge glows (UT-21): hidden at rest, fade in only while a drag
   is in progress. Left = fail (red), right = pass (green), matching the
   grade the released swipe submits. The old static top accent strip read as
   a stuck green "swipe glow" on iOS and was removed. */
.jpdb-reader-newtab::before,
.jpdb-reader-newtab::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: clamp(56px, 18vw, 140px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms ease;
  z-index: 4;
}

.jpdb-reader-newtab::before {
  left: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--jpdb-reader-state-failed) 62%, transparent),
    transparent
  );
}

.jpdb-reader-newtab::after {
  right: 0;
  background: linear-gradient(
    270deg,
    color-mix(in srgb, var(--jpdb-reader-state-known) 62%, transparent),
    transparent
  );
}

.jpdb-reader-newtab[data-newtab-swipe-direction="left"]::before,
.jpdb-reader-newtab[data-newtab-swipe-direction="right"]::after {
  opacity: calc(0.25 + 0.75 * var(--jpdb-reader-newtab-swipe-progress, 0));
}

.jpdb-reader-newtab * {
  box-sizing: border-box;
}

.jpdb-reader-newtab button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-newtab-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jpdb-reader-newtab-shell {
  width: min(920px, calc(100vw - 28px));
  min-height: 100dvh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(12px, 2.2vh, 22px);
  padding: max(18px, env(safe-area-inset-top)) 0
    max(82px, calc(18px + env(safe-area-inset-bottom)));
}

.jpdb-reader-newtab-revealed.jpdb-reader-newtab-kanji-mode
  .jpdb-reader-newtab-shell {
  width: min(920px, calc(100vw - 28px));
}

.jpdb-reader-newtab-search-mode .jpdb-reader-newtab-shell {
  width: min(920px, calc(100vw - 28px));
}

.jpdb-reader-newtab-stats-mode .jpdb-reader-newtab-shell {
  width: min(1080px, calc(100vw - 28px));
  grid-template-rows: auto auto;
  align-content: start;
  padding-bottom: max(28px, calc(18px + env(safe-area-inset-bottom)));
}

.jpdb-reader-newtab-revealed .jpdb-reader-newtab-shell {
  padding-bottom: max(116px, calc(24px + env(safe-area-inset-bottom)));
}

.jpdb-reader-newtab:not(.jpdb-reader-newtab-search-mode):not(.jpdb-reader-newtab-stats-mode) .jpdb-reader-newtab-shell {
  padding-bottom: max(96px, calc(20px + env(safe-area-inset-bottom)));
}

.jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-shell {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.jpdb-reader-newtab-topbar {
  min-height: 42px;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr);
  align-items: center;
  gap: 6px;
}

.jpdb-reader-newtab-theme-controls {
  justify-self: end;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jpdb-reader-newtab-more {
  position: relative;
}

.jpdb-reader-newtab-more > summary {
  list-style: none;
}

.jpdb-reader-newtab-more > summary::-webkit-details-marker {
  display: none;
}

.jpdb-reader-newtab .jpdb-reader-newtab-overflow {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  text-decoration: none;
}

.jpdb-reader-newtab-brand {
  min-width: 112px;
  display: flex;
  align-items: center;
  padding-left: clamp(6px, 1.2vw, 14px);
}

.jpdb-reader-newtab-brand .title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 42px;
  color: var(--jpdb-reader-text);
  font-size: 16px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
}

.jpdb-reader-newtab-brand .logo {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 5px;
}

.jpdb-reader-newtab-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpdb-reader-newtab .jpdb-reader-newtab-overflow {
  padding: 0 0 4px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

.jpdb-reader-newtab-more-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 132px;
  padding: 6px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface);
  box-shadow: 0 14px 36px var(--jpdb-reader-shadow);
}

.jpdb-reader-newtab-more:not([open]) .jpdb-reader-newtab-more-menu {
  display: none;
}

.jpdb-reader-newtab-more-menu button {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: transparent;
  color: var(--jpdb-reader-text);
  font-size: 12px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.jpdb-reader-newtab-more-menu button[data-active="true"] {
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 18%,
    transparent
  );
  color: var(--jpdb-reader-text);
}

.jpdb-reader-newtab-mode {
  justify-self: center;
  min-width: 0;
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 78%,
    transparent
  );
}

.jpdb-reader-newtab-mode button {
  display: grid;
  place-items: center;
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-appearance {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-width: 48px;
  height: 36px;
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch {
  position: relative;
  display: block;
  width: 44px;
  min-width: 44px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 86%,
    transparent
  );
  cursor: pointer;
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch .check {
  position: absolute;
  top: 1px;
  left: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--jpdb-reader-bg);
  box-shadow: 0 1px 3px var(--jpdb-reader-shadow);
}

.jpdb-reader-newtab-theme-controls
  .jpdb-reader-theme-switch[aria-checked="true"]
  .check {
  transform: translateX(20px);
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch .icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  color: var(--jpdb-reader-muted);
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch .sun,
.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch .moon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch .sun::before {
  content: "☀";
}
.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch .moon::before {
  content: "☾";
}
.jpdb-reader-newtab-theme-controls
  .jpdb-reader-theme-switch[aria-checked="false"]
  .sun,
.jpdb-reader-newtab-theme-controls
  .jpdb-reader-theme-switch[aria-checked="true"]
  .moon {
  opacity: 0;
}
.jpdb-reader-newtab-theme-controls
  .jpdb-reader-theme-switch[aria-checked="true"]
  .sun,
.jpdb-reader-newtab-theme-controls
  .jpdb-reader-theme-switch[aria-checked="false"]
  .moon {
  opacity: 1;
}

.jpdb-reader-language-toggle {
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 620;
  line-height: 1;
  text-align: center;
  cursor: pointer;
}

.jpdb-reader-newtab-mode button[data-active="true"] {
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent-soft) 88%,
    var(--jpdb-reader-surface)
  );
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--jpdb-reader-accent-soft) 58%, transparent);
}

.jpdb-reader-newtab-search-mode .jpdb-reader-newtab-study {
  grid-template-rows: auto auto;
  align-content: start;
  align-items: start;
  gap: clamp(14px, 2.2vh, 24px);
  padding-bottom: clamp(28px, 7vh, 72px);
  cursor: auto;
  user-select: text;
}

.jpdb-reader-newtab-search-mode .jpdb-reader-newtab-prompt {
  justify-self: start;
  padding: 0;
  font-size: clamp(1.95rem, 4.4vw, 3.4rem);
  line-height: 1;
  text-align: left;
}

.jpdb-reader-newtab-search-mode .jpdb-reader-newtab-answer,
.jpdb-reader-newtab-search-mode .jpdb-reader-newtab-status {
  display: none;
}

.jpdb-reader-newtab-search {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 14px;
}

.jpdb-reader-newtab-search[hidden] {
  display: none;
}

.jpdb-reader-newtab-searchbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 82%,
    transparent
  );
  box-shadow: 0 12px 32px var(--jpdb-reader-shadow-subtle);
}

.jpdb-reader-newtab-searchbox input {
  min-width: 0;
  min-height: 46px;
  border: 0;
  border-radius: 7px;
  padding: 0 14px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-bg) 82%,
    transparent
  );
  color: var(--jpdb-reader-text);
  font: inherit;
  font-size: 18px;
  font-weight: 720;
  line-height: 1.2;
  outline: none;
}

.jpdb-reader-newtab-searchbox input::placeholder {
  color: var(--jpdb-reader-faint);
  opacity: 1;
}

.jpdb-reader-newtab-searchbox input:focus-visible {
  box-shadow: 0 0 0 2px
    color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent);
}

.jpdb-reader-newtab-searchbox button,
.jpdb-reader-newtab-search-suggestions button {
  min-height: 46px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  padding: 0 14px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 88%,
    transparent
  );
  color: var(--jpdb-reader-text);
  font-size: 12px;
  font-weight: 840;
  line-height: 1.1;
  cursor: pointer;
}

.jpdb-reader-newtab-searchbox button[type="submit"] {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 56%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
}

.jpdb-reader-newtab-search-results {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.jpdb-reader-newtab-search-empty {
  display: grid;
  gap: 10px;
  min-height: clamp(160px, 28vh, 240px);
  align-content: start;
}

.jpdb-reader-newtab-search-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 8px;
}

.jpdb-reader-newtab-search-suggestions[hidden] {
  display: none;
}

.jpdb-reader-newtab-search-suggestions button {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding-inline: 12px;
  text-align: left;
}

.jpdb-reader-newtab-search-suggestions button[data-active="true"] {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 68%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 76%,
    var(--jpdb-reader-accent) 24%
  );
}

.jpdb-reader-newtab-search-suggestion-term,
.jpdb-reader-newtab-search-suggestion-detail {
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.jpdb-reader-newtab-search-suggestion-term {
  color: var(--jpdb-reader-text);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.1;
}

.jpdb-reader-newtab-search-suggestion-detail {
  color: var(--jpdb-reader-muted);
  font-size: 10.5px;
  font-weight: 720;
  line-height: 1.15;
}

.jpdb-reader-newtab-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jpdb-reader-newtab-search-links a,
.jpdb-reader-newtab-search-links button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 78%,
    transparent
  );
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 820;
  text-decoration: none;
  cursor: pointer;
}

.jpdb-reader-newtab-handwriting {
  min-width: 0;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 70%,
    transparent
  );
  overflow: hidden;
}

.jpdb-reader-newtab-handwriting[open] {
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 82%,
    transparent
  );
}

.jpdb-reader-newtab-handwriting summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 860;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.jpdb-reader-newtab-handwriting-body {
  display: grid;
  grid-template-columns: minmax(156px, 220px) minmax(112px, 1fr);
  gap: 10px;
  align-items: start;
  padding: 0 12px 12px;
}

.jpdb-reader-newtab-search-doodle.jpdb-reader-doodle-stage {
  width: min(220px, 100%);
  min-width: 156px;
  max-width: 100%;
  margin: 0;
}

.jpdb-reader-newtab-handwriting-candidates {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.jpdb-reader-newtab-handwriting-candidates[hidden] {
  display: none;
}

.jpdb-reader-newtab-handwriting-candidates button {
  min-width: 44px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 88%,
    transparent
  );
  color: var(--jpdb-reader-text);
  font-size: 22px;
  font-weight: 840;
  line-height: 1;
  cursor: pointer;
}

.jpdb-reader-newtab-handwriting-message {
  flex-basis: 100%;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.35;
}

.jpdb-reader-newtab-handwriting-candidates
  .jpdb-reader-newtab-handwriting-manual-action {
  color: var(--jpdb-reader-accent-strong, var(--jpdb-reader-accent));
  font-size: 11px;
  font-weight: 840;
}

.jpdb-reader-newtab-search-section {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.jpdb-reader-newtab-search-section h2 {
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 860;
  line-height: 1.1;
  text-transform: uppercase;
}

.jpdb-reader-newtab-search-list,
.jpdb-reader-newtab-search-kanji-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.jpdb-reader-newtab-search-kanji-grid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  align-items: start;
}

.jpdb-reader-newtab-search-kanji-grid
  > .jpdb-reader-newtab-search-card-shell[data-newtab-search-expanded="true"] {
  grid-column: 1 / -1;
}

.jpdb-reader-newtab-search-card-shell {
  min-width: 0;
  display: grid;
  gap: 0;
}

.jpdb-reader-newtab-search-card {
  width: 100%;
  min-width: 0;
  min-height: 68px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 82%,
    transparent
  );
  color: var(--jpdb-reader-text);
  text-align: left;
  cursor: pointer;
}

.jpdb-reader-newtab-search-card[aria-expanded="true"] {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 62%,
    var(--jpdb-reader-border)
  );
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.jpdb-reader-newtab-search-kanji-card {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 3px;
  min-height: 58px;
  padding: 9px 11px;
}

.jpdb-reader-newtab-search-detail {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-bg) 72%,
    var(--jpdb-reader-surface) 28%
  );
}

.jpdb-reader-newtab-search-detail[hidden] {
  display: none;
}

.jpdb-reader-newtab-search-inline-kanji {
  display: grid;
  gap: 0;
  min-width: 0;
}

.jpdb-reader-newtab-search-inline-title {
  margin: 2px 0 0;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.jpdb-reader-newtab-search-inline-kanji .jpdb-reader-newtab-kanji-details {
  width: 100%;
  margin: 0;
  justify-self: stretch;
}

.jpdb-reader-newtab-search-detail > .jpdb-reader-newtab-kanji-details {
  width: 100%;
  margin: 0;
  justify-self: stretch;
}

.jpdb-reader-newtab-search-kanji-item {
  display: grid;
  gap: 0;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
}

.jpdb-reader-newtab-search-kanji-item:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.jpdb-reader-newtab-search-kanji-item + .jpdb-reader-newtab-search-kanji-item {
  margin-top: 14px;
}

.jpdb-reader-newtab-search-kanji-item-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  padding-bottom: 8px;
  color: var(--jpdb-reader-text);
}

.jpdb-reader-newtab-search-kanji-item-char {
  flex: 0 0 auto;
  font-size: 26px;
  font-weight: 880;
  line-height: 1;
}

.jpdb-reader-newtab-search-kanji-item-keyword {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-search-word {
  grid-template-columns: minmax(72px, max-content) minmax(0, 1fr);
  column-gap: 12px;
}

.jpdb-reader-newtab-search-term,
.jpdb-reader-newtab-search-kanji-char {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-weight: 880;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-search-term {
  grid-row: span 2;
  font-size: 22px;
}

.jpdb-reader-newtab-search-kanji-char {
  font-size: 44px;
}

.jpdb-reader-newtab-search-kanji-card .jpdb-reader-newtab-search-kanji-char {
  grid-row: 1 / span 2;
  font-size: 34px;
}

.jpdb-reader-newtab-search-kanji-card
  :is(.jpdb-reader-newtab-search-meaning, .jpdb-reader-newtab-search-meta) {
  min-width: 0;
}

.jpdb-reader-newtab-search-meta,
.jpdb-reader-newtab-search-meaning,
.jpdb-reader-newtab-search-message {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-search-meta {
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
}

.jpdb-reader-newtab-search-meaning,
.jpdb-reader-newtab-search-message {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.38;
}

.jpdb-reader-newtab-search-message {
  padding: 12px 0;
}

.jpdb-reader-newtab-study {
  width: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  align-items: start;
  justify-items: center;
  gap: clamp(8px, 1.8vh, 16px);
  cursor: pointer;
  user-select: none;
  /* UT-21: keep vertical scrolling native but own horizontal pans —
     without this iOS Safari claims the gesture and fires pointercancel
     before the swipe threshold, so swipe-to-grade never completed. */
  touch-action: pan-y;
  padding-top: clamp(16px, 3vh, 32px);
}

.jpdb-reader-newtab-study-anki-card {
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: clamp(12px, 2vh, 22px);
}

.jpdb-reader-newtab-study-anki-card .jpdb-reader-newtab-prompt-anki-card {
  align-self: start;
}

.jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-kanji-mode)
  .jpdb-reader-newtab-study {
  padding-bottom: 0;
}

.jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-study {
  grid-template-rows: auto auto auto auto;
  align-content: center;
  gap: clamp(10px, 2vh, 18px);
  padding-bottom: clamp(42px, 9vh, 96px);
}

.jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-answer {
  min-height: 0;
}

.jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-reading {
  max-width: min(620px, 100%);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.16;
}

.jpdb-reader-newtab-answer,
.jpdb-reader-newtab-meaning {
  cursor: auto;
  user-select: text;
}

.jpdb-reader-newtab-answer :is(button, a, summary),
.jpdb-reader-newtab-meaning :is(button, a, summary) {
  cursor: pointer;
}

.jpdb-reader-newtab-kanji-mode .jpdb-reader-newtab-study {
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  align-items: start;
  gap: clamp(14px, 2vh, 24px);
  padding-top: clamp(24px, 4vh, 48px);
  padding-bottom: clamp(64px, 9vh, 120px);
}

.jpdb-reader-newtab-revealed.jpdb-reader-newtab-kanji-mode
  .jpdb-reader-newtab-answer,
.jpdb-reader-newtab-revealed.jpdb-reader-newtab-kanji-mode
  .jpdb-reader-newtab-meaning {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  justify-items: center;
}

.jpdb-reader-newtab-count,
.jpdb-reader-newtab-status {
  max-width: min(100%, 520px);
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 780;
  text-align: center;
}

.jpdb-reader-newtab-count {
  --jpdb-reader-newtab-session-progress: 0;
  width: min(420px, calc(100vw - 56px));
  min-height: 26px;
  display: grid;
  gap: 6px;
  align-content: center;
  justify-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--jpdb-reader-text) 78%, var(--jpdb-reader-muted));
  box-shadow: none;
}

.jpdb-reader-newtab-count::before {
  content: "";
  display: block;
  width: 100%;
  height: 5px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 70%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      var(--jpdb-reader-accent) calc(var(--jpdb-reader-newtab-session-progress) * 100%),
      color-mix(in srgb, var(--jpdb-reader-surface) 72%, var(--jpdb-reader-bg)) 0
    );
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--jpdb-reader-black) 24%, transparent),
    0 8px 20px color-mix(in srgb, var(--jpdb-reader-accent-soft) 58%, transparent);
}

.jpdb-reader-newtab-count[hidden] {
  display: none;
}

.jpdb-reader-newtab-count:empty {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-kanji-mode)
  .jpdb-reader-newtab-count:empty {
  min-height: 34px;
  visibility: hidden;
}

button.jpdb-reader-newtab-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: min(360px, calc(100vw - 56px));
  min-height: 26px;
  padding: 5px 10px;
  border: 1px solid rgba(139, 160, 177, 0.24);
  border-radius: 999px;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 8px 22px rgba(2, 6, 10, 0.34);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.jpdb-reader-newtab-status:not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 44%,
    var(--jpdb-reader-border)
  );
  background: linear-gradient(
    180deg,
    color-mix(
      in srgb,
      var(--jpdb-reader-surface-2) 72%,
      var(--jpdb-reader-accent) 10%
    ),
    color-mix(
      in srgb,
      var(--jpdb-reader-surface) 86%,
      var(--jpdb-reader-accent) 8%
    )
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--jpdb-reader-white) 5%, transparent),
    0 8px 22px
      color-mix(in srgb, var(--jpdb-reader-accent) 12%, var(--jpdb-reader-shadow));
}

button.jpdb-reader-newtab-status:disabled {
  cursor: default;
}

button.jpdb-reader-newtab-status:disabled:not(:empty) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-color: transparent;
  background: transparent;
  color: color-mix(in srgb, var(--jpdb-reader-muted) 86%, var(--jpdb-reader-text));
  box-shadow: none;
}

button.jpdb-reader-newtab-status:disabled:empty {
  display: none;
}

.jpdb-reader-newtab-status-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jpdb-reader-faint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpdb-reader-faint) 16%, transparent);
}

.jpdb-reader-newtab-status-light[data-source="jpdb"] {
  background: var(--jpdb-reader-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
}

.jpdb-reader-newtab-status-light[data-source="jiten"] {
  background: var(--jpdb-reader-state-learning);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpdb-reader-state-learning) 18%, transparent);
}

.jpdb-reader-newtab-status-light[data-source="anki"] {
  background: var(--jpdb-reader-state-new-bright);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpdb-reader-state-new-bright) 18%, transparent);
}

button.jpdb-reader-newtab-status:not(:disabled):hover {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 64%,
    var(--jpdb-reader-border)
  );
  background: linear-gradient(
    180deg,
    color-mix(
      in srgb,
      var(--jpdb-reader-surface-2) 66%,
      var(--jpdb-reader-accent) 16%
    ),
    color-mix(
      in srgb,
      var(--jpdb-reader-surface) 82%,
      var(--jpdb-reader-accent) 12%
    )
  );
}

/* UT-21: the always-on review-mode edge glows lived here (accent green on
   both sides at opacity 0.2). They read as a stuck green swipe affordance,
   so the drag-gated red/green glows on .jpdb-reader-newtab::before/::after
   replace them. */

.jpdb-reader-newtab-prompt {
  max-width: min(100%, 720px);
  margin: 0;
  padding: 0 clamp(8px, 3vw, 22px);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--jpdb-reader-text);
  font-size: clamp(2.25rem, 7vw, 5.2rem);
  font-weight: 900;
  line-height: 1.06;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: 0 1px 2px var(--jpdb-reader-shadow-soft);
}

.jpdb-reader-newtab-prompt .jpdb-reader-word {
  --jpdb-reader-word-underline-offset: 0.08em;
  --jpdb-reader-word-underline-thickness: 0.08em;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
}

.jpdb-reader-newtab-prompt .jpdb-reader-word *,
.jpdb-reader-newtab-prompt .jpdb-reader-word::before,
.jpdb-reader-newtab-prompt .jpdb-reader-word::after,
.jpdb-reader-newtab-reading .jpdb-reader-word *,
.jpdb-reader-newtab-reading .jpdb-reader-word::before,
.jpdb-reader-newtab-reading .jpdb-reader-word::after {
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
}

.jpdb-reader-newtab-prompt-anki-card {
  width: min(100%, 760px);
  max-width: min(100%, 760px);
  min-width: 0;
  min-height: 0;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(10px, 1.8vh, 18px);
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 520;
  line-height: 1.45;
  text-align: center;
  text-shadow: none;
  text-wrap: wrap;
}

.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-study-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 auto;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-rendered-card,
.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-rendered-side {
  width: 100%;
  min-width: 0;
  align-content: center;
  justify-items: center;
}

.jpdb-reader-newtab-prompt-anki-card
  .jpdb-reader-anki-rendered-side-body {
  width: min(100%, 680px);
  max-width: min(100%, 680px);
  min-width: 0;
  border-left: 0;
  padding: 0;
  text-align: center;
  font-size: clamp(19px, 1.7vw, 26px);
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-prompt-anki-card
  .jpdb-reader-anki-rendered-side-body
  :where(*) {
  max-width: 100%;
  font-size: min(1em, 1.9rem) !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-rendered-side-body img,
.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-rendered-side-body video,
.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-rendered-side-body canvas,
.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-rendered-side-body svg {
  max-width: min(100%, 340px) !important;
  max-height: min(42vh, 260px) !important;
  object-fit: contain;
}

.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-sound {
  justify-self: center;
  margin: 0 0.18em;
  vertical-align: middle;
}

.jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-primary-sound {
  order: -1;
  align-self: center;
  justify-self: end;
  margin: 0 0 2px auto;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
}

.jpdb-reader-newtab-prompt-anki-card
  .jpdb-reader-anki-primary-sound
  svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
}

.jpdb-reader-newtab-front {
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.8vh, 18px);
  width: 100%;
  min-width: 0;
}

.jpdb-reader-newtab-term {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: inherit;
  line-height: inherit;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-term .jpdb-reader-word {
  padding: 0;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  text-shadow: none;
}

.jpdb-reader-newtab-kanji-mode .jpdb-reader-newtab-prompt {
  font-family: inherit;
  font-size: clamp(2.4rem, 6.4vw, 4.8rem);
  line-height: 1.02;
}

.jpdb-reader-newtab-kanji-front-keywords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 12px;
  max-width: min(100%, 680px);
}

.jpdb-reader-newtab-kanji-front-keyword {
  display: inline-flex;
  max-width: min(100%, 20em);
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  font-size: clamp(1.35rem, 3.7vw, 2.55rem);
  line-height: 1.04;
}

.jpdb-reader-newtab-kanji-front-keyword small {
  color: var(--jpdb-reader-muted);
  font-size: clamp(0.68rem, 1.7vw, 0.95rem);
  font-weight: 860;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.jpdb-reader-newtab-kanji-front-keyword span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-revealed.jpdb-reader-newtab-kanji-mode
  .jpdb-reader-newtab-prompt {
  font-size: clamp(3.5rem, 9vh, 5rem);
  margin-bottom: 4px;
}

.jpdb-reader-newtab-sentence {
  display: block;
  max-width: min(100%, 680px);
  color: var(--jpdb-reader-muted);
  font-size: clamp(1.05rem, 2.6vw, 1.8rem);
  font-weight: 760;
  line-height: 1.36;
  overflow-wrap: anywhere;
  text-wrap: balance;
  text-shadow: none;
}

.jpdb-reader-newtab-sentence .jpdb-reader-word {
  --jpdb-reader-word-underline-offset: 0.08em;
  padding: 0 0.08em;
  border-radius: 0.1em;
  color: inherit;
  text-underline-offset: 0.08em;
}

.jpdb-reader-newtab-sentence .jpdb-reader-example-target {
  padding: 0 0.08em;
  border-radius: 0.22em;
  background: var(
    --jpdb-reader-example-target-bg,
    var(--jpdb-reader-accent-soft)
  );
  box-shadow: inset 0 -0.16em 0
    var(--jpdb-reader-example-target-underline, color-mix(in srgb, var(--jpdb-reader-accent) 64%, transparent));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.jpdb-reader-newtab-sentence mark.jpdb-reader-example-target {
  color: inherit;
}

/* Front of a study card: the target word's own furigana gives the reading
   away (user-reported). Hide it until reveal; other words keep theirs, which
   matches jpdb's Learn front. visibility (not display) keeps the line height
   stable across reveal. */
.jpdb-reader-newtab:not(.jpdb-reader-newtab-revealed)
  .jpdb-reader-newtab-sentence
  .jpdb-reader-example-target
  :is(.jpdb-reader-furi, rt) {
  visibility: hidden;
}

.jpdb-reader-newtab-answer {
  width: min(640px, 100%);
  min-height: clamp(68px, 11vh, 124px);
  max-width: min(640px, 100%);
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 8px;
}

.jpdb-reader-newtab:not(.jpdb-reader-newtab-revealed):not(
    .jpdb-reader-newtab-kanji-mode
  )
  .jpdb-reader-newtab-answer {
  min-height: 0;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(4px);
  pointer-events: none;
  visibility: hidden;
}

.jpdb-reader-newtab:not(.jpdb-reader-newtab-revealed)
  .jpdb-reader-newtab-answer:has(.jpdb-reader-newtab-kanji-front) {
  min-height: clamp(68px, 11vh, 124px);
  opacity: 1;
  filter: none;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}

.jpdb-reader-newtab-answer:has(.jpdb-reader-newtab-kanji-answer) {
  width: 100%;
  max-width: 100%;
}

.jpdb-reader-newtab-reading {
  max-width: 100%;
  width: 100%;
  color: var(--jpdb-reader-text);
  font-size: clamp(1.2rem, 3.2vw, 2rem);
  font-weight: 780;
  line-height: 1.12;
  text-align: center;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-reading .jpdb-reader-word {
  --jpdb-reader-word-underline: transparent;
  background: transparent !important;
  color: inherit;
  text-decoration-color: transparent !important;
}

.jpdb-reader-newtab-meaning {
  width: min(640px, 100%);
  max-width: min(640px, 100%);
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--jpdb-reader-text);
  font-size: clamp(14px, 2.1vw, 18px);
  font-weight: 650;
  line-height: 1.42;
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.jpdb-reader-newtab-controls {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  justify-self: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
  width: min(680px, calc(100vw - 28px));
  padding: 8px;
}

.jpdb-reader-newtab-controls[hidden],
.jpdb-reader-newtab-search-mode .jpdb-reader-newtab-controls {
  display: none !important;
}

.jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  width: min(860px, calc(100vw - 28px));
  justify-content: start;
  align-items: center;
  overflow: visible;
  scrollbar-width: none;
}

.jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls::-webkit-scrollbar {
  display: none;
}

.jpdb-reader-newtab-controls button {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid
    rgba(139, 160, 177, 0.24);
  border-radius: 8px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--jpdb-reader-surface-2) 82%, var(--jpdb-reader-bg) 18%),
    color-mix(in srgb, var(--jpdb-reader-surface) 90%, var(--jpdb-reader-bg) 10%)
  );
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.05;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 1px 1px
    color-mix(in srgb, var(--jpdb-reader-black) 36%, transparent);
  cursor: pointer;
  transform: none;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-theme-light .jpdb-reader-newtab-controls button:not([data-grade]),
.yomu-page-theme-light .jpdb-reader-newtab-controls button:not([data-grade]) {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 20%, var(--jpdb-reader-border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--jpdb-reader-white) 88%, var(--jpdb-reader-accent) 6%),
      color-mix(in srgb, var(--jpdb-reader-surface-2) 76%, var(--jpdb-reader-white) 24%)
    );
  color: var(--jpdb-reader-text);
  text-shadow: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--jpdb-reader-white) 72%, transparent),
    0 5px 14px color-mix(in srgb, var(--jpdb-reader-accent) 8%, transparent);
}

.jpdb-reader-newtab-controls button[data-newtab-action="reveal"] {
  background: var(--jpdb-reader-text);
  border-color: var(--jpdb-reader-text);
  color: var(--jpdb-reader-bg);
}

.jpdb-reader-theme-light
  .jpdb-reader-newtab-controls
  button[data-newtab-action="reveal"],
.yomu-page-theme-light
  .jpdb-reader-newtab-controls
  button[data-newtab-action="reveal"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 72%, var(--jpdb-reader-border));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--jpdb-reader-accent) 94%, var(--jpdb-reader-white) 6%),
      var(--jpdb-reader-accent)
    );
  color: var(--jpdb-reader-accent-text, var(--jpdb-reader-white));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--jpdb-reader-white) 26%, transparent),
    0 8px 20px color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
}

.jpdb-reader-newtab-grade-target {
  justify-self: center;
  position: relative;
  min-width: 0;
  max-width: 100%;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  text-align: center;
}

.jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls:has(
    .jpdb-reader-newtab-grade-target-context
  ) {
  position: relative;
  padding-top: 34px;
}

.jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls:has(
    .jpdb-reader-newtab-grade-target-context[open]
  ) {
  padding-top: 104px;
}

.jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls
  .jpdb-reader-newtab-grade-target-context {
  position: absolute;
  top: 2px;
  right: 8px;
  left: 8px;
  z-index: 22;
  display: grid;
  justify-items: center;
  max-width: none;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  text-align: center;
  pointer-events: auto;
}

.jpdb-reader-newtab-grade-target-summary {
  width: 100%;
  min-height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-newtab-grade-target-summary::-webkit-details-marker {
  display: none;
}

.jpdb-reader-newtab-grade-target-summary::marker {
  content: "";
}

.jpdb-reader-newtab-grade-target-summary .jpdb-reader-mining-collapse {
  grid-column: 2;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 28px;
  min-width: 72px;
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  padding: 0;
  pointer-events: none;
}

.jpdb-reader-newtab-grade-target-summary .jpdb-reader-mining-collapse::before {
  content: "";
  position: relative;
  display: block;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--jpdb-reader-faint);
}

.jpdb-reader-newtab-grade-target-summary:hover .jpdb-reader-mining-collapse::before,
.jpdb-reader-newtab-grade-target-summary:focus-visible .jpdb-reader-mining-collapse::before,
.jpdb-reader-newtab-grade-target-context[open]
  .jpdb-reader-newtab-grade-target-summary
  .jpdb-reader-mining-collapse::before,
.jpdb-reader-newtab-grade-target-summary
  .jpdb-reader-mining-collapse[data-expanded="true"]::before {
  background: var(--jpdb-reader-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jpdb-reader-accent) 12%, transparent);
}

.jpdb-reader-newtab-grade-target-current {
  grid-column: 1;
  justify-self: end;
  min-width: 0;
  max-width: min(180px, 34vw);
  color: var(--jpdb-reader-muted);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.jpdb-reader-newtab-grade-target-selector-label {
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
  text-align: left;
}

.jpdb-reader-newtab-grade-target-panel {
  display: grid;
  gap: 6px;
  min-width: 0;
  width: min(280px, 100%);
  margin-top: 4px;
}

.jpdb-reader-newtab-grade-target-context:not([open])
  .jpdb-reader-newtab-grade-target-panel {
  display: none;
}

.jpdb-reader-newtab-grade-target-select {
  min-width: 0;
  width: 100%;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border), var(--jpdb-reader-accent) 26%);
  border-radius: 8px;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  line-height: 1;
  padding: 0 28px 0 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-controls {
  width: min(320px, calc(100vw - 44px));
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-controls button {
  min-height: 48px;
  border-radius: 10px;
  background: var(--jpdb-reader-text);
  border-color: var(--jpdb-reader-text);
  color: var(--jpdb-reader-bg);
}

.jpdb-reader-newtab-controls button[data-grade="fail"],
.jpdb-reader-newtab-controls button[data-grade="nothing"] {
  --jpdb-newtab-grade-accent: var(--jpdb-reader-state-failed);
}

.jpdb-reader-newtab-controls button[data-grade="pass"],
.jpdb-reader-newtab-controls button[data-grade="okay"] {
  --jpdb-newtab-grade-accent: var(--jpdb-reader-state-known);
}

.jpdb-reader-newtab-controls button[data-grade="easy"] {
  --jpdb-newtab-grade-accent: var(--jpdb-reader-state-known);
}

.jpdb-reader-newtab-controls button[data-grade="something"] {
  --jpdb-newtab-grade-accent: var(--jpdb-reader-grade-something);
}

.jpdb-reader-newtab-controls button[data-grade="hard"] {
  --jpdb-newtab-grade-accent: var(--jpdb-reader-state-learning);
}

.jpdb-reader-newtab-controls button[data-grade] {
  grid-template-rows: 1fr;
  border-color: color-mix(
    in srgb,
    var(
        --jpdb-newtab-grade-accent,
        var(--jpdb-reader-border)
      )
      54%,
    var(--jpdb-reader-border)
  );
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--jpdb-reader-surface-2) 84%, var(--jpdb-newtab-grade-accent, #7a92a5) 16%),
    color-mix(in srgb, var(--jpdb-reader-surface) 88%, var(--jpdb-newtab-grade-accent, #7a92a5) 12%)
  );
  color: var(--jpdb-reader-text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--jpdb-reader-white) 5%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--jpdb-newtab-grade-accent) 18%, transparent),
    0 8px 20px color-mix(in srgb, var(--jpdb-newtab-grade-accent) 10%, transparent);
}

.jpdb-reader-newtab-grade-label {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpdb-reader-newtab-controls button[data-grade]:disabled {
  opacity: 1;
  color: var(--jpdb-reader-text);
  -webkit-text-fill-color: var(--jpdb-reader-text);
}

.jpdb-reader-newtab-controls button[data-grade]:focus-visible {
  border-color: var(--jpdb-newtab-grade-accent);
  outline: 2px solid
    color-mix(in srgb, var(--jpdb-newtab-grade-accent) 54%, transparent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .jpdb-reader-newtab-controls button[data-grade]:hover {
    border-color: var(--jpdb-newtab-grade-accent);
    background: color-mix(
      in srgb,
      var(--jpdb-reader-surface-2) 82%,
      var(--jpdb-newtab-grade-accent) 18%
    );
    box-shadow: 0 8px 18px
      color-mix(in srgb, var(--jpdb-newtab-grade-accent) 18%, transparent);
    color: var(--jpdb-reader-text);
    transform: translateY(-0.12rem);
  }
}

.jpdb-reader-newtab-controls button[data-grade]:active {
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 88%,
    var(--jpdb-newtab-grade-accent) 12%
  );
  color: var(--jpdb-reader-text);
  transform: scale(0.98);
}

.jpdb-reader-newtab-kanji-answer {
  --jpdb-reader-newtab-kanji-panel: min(352px, calc((100vw - 74px) / 2));
  width: var(--jpdb-reader-newtab-content-width);
  max-width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--jpdb-reader-newtab-kanji-panel)));
  justify-content: center;
  align-items: start;
  justify-items: center;
  gap: clamp(18px, 3vw, 28px);
  justify-self: center;
  margin-inline: auto;
  margin-block: clamp(4px, 1.4vh, 14px) clamp(12px, 2.8vh, 28px);
}

.jpdb-reader-newtab-kanji-front {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(420px, calc(100vw - 32px));
  margin-block: clamp(12px, 3vh, 36px);
  margin-inline: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-newtab-kanji-front *,
.jpdb-reader-newtab-doodle-actions,
.jpdb-reader-newtab-doodle-actions button {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-newtab-kanji-mode:not(.jpdb-reader-newtab-revealed)
  .jpdb-reader-newtab-kanji-front {
  margin-block: 0;
}

.jpdb-reader-newtab-kanji-svg,
.jpdb-reader-newtab-doodle,
.jpdb-reader-newtab-doodle-preview {
  width: var(--jpdb-reader-newtab-kanji-panel, 100%);
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(
    --jpdb-reader-kanji-panel-bg,
    color-mix(in srgb, var(--jpdb-reader-bg) 88%, var(--jpdb-reader-black))
  );
  color: var(--jpdb-reader-text);
}

.jpdb-reader-newtab-kanji-svg {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: clamp(8px, 1.6vw, 14px);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1;
}

.jpdb-reader-newtab-kanji-svg .jpdb-reader-kanjivg-svg,
.jpdb-reader-newtab-doodle .jpdb-reader-kanjivg-svg {
  display: block;
  width: min(82%, 220px);
  height: min(82%, 220px);
}

.jpdb-reader-newtab-kanji-svg .jpdb-reader-kanjivg-strokes path,
.jpdb-reader-newtab-doodle .jpdb-reader-kanjivg-strokes path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jpdb-reader-newtab-kanji-svg .jpdb-reader-kanjivg-numbers,
.jpdb-reader-newtab-doodle .jpdb-reader-kanjivg-numbers {
  fill: color-mix(
    in srgb,
    var(--jpdb-reader-text) 56%,
    transparent
  );
  font-size: 8px;
  font-family: var(--jpdb-reader-font);
}

.jpdb-reader-doodle-stage.jpdb-reader-newtab-doodle {
  grid-column: 1 / -1;
  position: relative;
  width: min(420px, 100%);
  max-width: calc(100dvh - 240px);
  min-width: min(260px, 100%);
  aspect-ratio: 1;
  justify-self: center;
  margin-inline: auto;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  --jpdb-reader-doodle-ink: var(--jpdb-reader-text);
  background:
    linear-gradient(
      90deg,
      var(
        --jpdb-reader-kanji-grid-line,
        color-mix(in srgb, var(--jpdb-reader-text) 8%, transparent)
      ) 1px,
      transparent 1px
    ),
    linear-gradient(
      0deg,
      var(
        --jpdb-reader-kanji-grid-line,
        color-mix(in srgb, var(--jpdb-reader-text) 8%, transparent)
      ) 1px,
      transparent 1px
    ),
    var(
      --jpdb-reader-kanji-panel-bg,
      color-mix(in srgb, var(--jpdb-reader-bg) 88%, var(--jpdb-reader-black))
    );
  background-size: 25% 25%;
}

.jpdb-reader-newtab-doodle::before {
  content: none;
}

.jpdb-reader-newtab-doodle .jpdb-reader-doodle-ghost,
.jpdb-reader-newtab-doodle .jpdb-reader-doodle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.jpdb-reader-newtab-doodle .jpdb-reader-doodle-ghost {
  z-index: 1;
  display: grid;
  place-items: center;
  opacity: 0.18;
  pointer-events: none;
}

.jpdb-reader-newtab-doodle .jpdb-reader-doodle-ghost .jpdb-reader-kanjivg-svg {
  width: 76%;
  height: 76%;
}

.jpdb-reader-newtab-doodle .jpdb-reader-doodle-canvas {
  z-index: 2;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-newtab:not(.jpdb-reader-newtab-revealed):not(
    .jpdb-reader-newtab-kanji-mode
  )
  .jpdb-reader-newtab-doodle
  .jpdb-reader-doodle-canvas {
  pointer-events: none;
}

.jpdb-reader-newtab-doodle.trace-hidden .jpdb-reader-doodle-ghost {
  opacity: 0;
}

.jpdb-reader-newtab-doodle-actions {
  display: flex;
  position: static;
  z-index: auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 2px;
}

.jpdb-reader-newtab-doodle-actions button {
  min-height: 30px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 88%,
    transparent
  );
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 800;
}

.jpdb-reader-newtab-doodle-result {
  grid-column: 1 / -1;
  justify-self: center;
  min-height: 28px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 820;
}

.jpdb-reader-newtab-doodle-result:empty {
  display: none;
}

.jpdb-reader-newtab-doodle-preview {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
}

.jpdb-reader-newtab-doodle-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.jpdb-reader-newtab-kanji-details {
  display: grid;
  gap: 0;
  width: var(--jpdb-reader-newtab-content-width);
  max-width: 100%;
  min-width: 0;
  justify-self: center;
  margin-inline: auto;
  margin-top: 12px;
  margin-bottom: 34px;
  text-align: left;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.45;
}

.jpdb-reader-newtab-kanji-keywords {
  margin-bottom: 10px;
}

.jpdb-reader-newtab-kanji-details > *,
.jpdb-reader-newtab-kanji-details .jpdb-reader-newtab-kanji-sources,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local,
.jpdb-reader-newtab-kanji-details .jpdb-reader-source-card,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local-entry,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local-glossary,
.jpdb-reader-newtab-kanji-details .jpdb-reader-component-grid,
.jpdb-reader-newtab-kanji-details .jpdb-reader-similar-grid,
.jpdb-reader-newtab-kanji-details .jpdb-reader-origin-graph-wrap,
.jpdb-reader-newtab-kanji-details .jpdb-reader-rtk-elements,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local-head {
  max-width: 100%;
  min-width: 0;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-jiten-kanji-more {
  grid-column: 1 / -1;
  min-width: 0;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-local,
.jpdb-reader-newtab-kanji-details .jpdb-reader-source-card {
  margin-top: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid
    color-mix(
      in srgb,
      var(--jpdb-reader-border) 86%,
      transparent
    );
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-local-title {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.jpdb-reader-newtab-kanji-details
  .jpdb-reader-source-card
  > summary.jpdb-reader-local-title {
  min-height: 38px;
  padding: 8px 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.jpdb-reader-newtab-kanji-details
  .jpdb-reader-source-card[open]
  > summary.jpdb-reader-local-title {
  color: var(--jpdb-reader-text);
}

.jpdb-reader-newtab-kanji-details
  .jpdb-reader-source-card
  > summary.jpdb-reader-local-title::after {
  flex: 0 0 auto;
  color: var(--jpdb-reader-faint);
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-local-entry {
  display: grid;
  gap: 10px;
  padding: 10px 0 12px;
  border: 0;
  border-top: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 38%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jpdb-reader-newtab-kanji-details
  .jpdb-reader-source-card:not([open])
  .jpdb-reader-local-entry {
  display: none;
}

.jpdb-reader-newtab-kanji-info-body {
  gap: 10px;
}

.jpdb-reader-newtab-kanji-info-source .jpdb-reader-kanji-facts,
.jpdb-reader-newtab-origin-graph .jpdb-reader-kanji-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow: visible;
  padding-bottom: 0;
}
.jpdb-reader-newtab-origin-graph .jpdb-reader-kanji-facts {
  gap: 6px;
}

.jpdb-reader-newtab-kanji-info-source .jpdb-reader-kanji-facts > span,
.jpdb-reader-newtab-origin-graph .jpdb-reader-kanji-facts > span {
  display: inline-flex;
  align-items: baseline;
  flex: 0 1 auto;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 82%,
    var(--jpdb-reader-bg) 18%
  );
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 11px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.15;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}

.jpdb-reader-newtab-kanji-info-source .jpdb-reader-kanji-facts :is(strong, small),
.jpdb-reader-newtab-origin-graph .jpdb-reader-kanji-facts :is(strong, small) {
  display: inline;
  color: var(--jpdb-reader-muted);
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}
.jpdb-reader-newtab-kanji-info-source .jpdb-reader-kanji-fact-value,
.jpdb-reader-newtab-origin-graph .jpdb-reader-kanji-fact-value {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.jpdb-reader-newtab-origin-graph .jpdb-reader-kanji-facts {
  margin-top: 10px;
}

.jpdb-reader-newtab-origin-graph
  .jpdb-reader-origin-graph-wrap
  + .jpdb-reader-kanji-facts {
  margin-top: 12px;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-local-glossary,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local-terms,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local-term,
.jpdb-reader-newtab-kanji-details .jpdb-reader-meanings,
.jpdb-reader-newtab-kanji-details .jpdb-reader-meaning,
.jpdb-reader-newtab-kanji-details .jpdb-reader-jpdb-extras,
.jpdb-reader-newtab-kanji-details .jpdb-reader-jpdb-extra,
.jpdb-reader-newtab-kanji-details .jpdb-reader-jpdb-examples-group,
.jpdb-reader-newtab-kanji-details .jpdb-reader-jpdb-used-in-group,
.jpdb-reader-newtab-kanji-details .jpdb-reader-dictionary-source-list,
.jpdb-reader-newtab-kanji-details .jpdb-reader-dictionary-source {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-local-term,
.jpdb-reader-newtab-kanji-details .jpdb-reader-meaning,
.jpdb-reader-newtab-kanji-details .jpdb-reader-jpdb-example,
.jpdb-reader-newtab-kanji-details .jpdb-reader-local-glossary > div {
  padding: 7px 0 8px;
  border-top: 1px solid
    color-mix(
      in srgb,
      var(--jpdb-reader-border) 44%,
      transparent
    );
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-local-glossary,
.jpdb-reader-newtab-kanji-details .jpdb-reader-origin-detail,
.jpdb-reader-newtab-kanji-details .jpdb-reader-rtk p,
.jpdb-reader-newtab-kanji-details .jpdb-reader-jpdb-kanji p {
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > span,
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 86%,
    var(--jpdb-reader-accent) 8%
  );
  color: var(--jpdb-reader-muted);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font: inherit;
  font-size: 11px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button small {
  color: var(--jpdb-reader-faint);
  font-size: 10px;
  font-weight: 800;
}
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button:hover,
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button:focus-visible {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 64%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-text);
  outline: none;
}
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 72%, var(--jpdb-reader-border));
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface-2));
  color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-newtab-kanji-details .jpdb-reader-kanji-readings > button[aria-pressed="true"] small {
  color: currentColor;
  opacity: 0.78;
}

.jpdb-reader-newtab-kanji-vocab > span,
.jpdb-reader-newtab-kanji-vocab > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 3px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 12px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-component-card,
.jpdb-reader-newtab-kanji-details .jpdb-reader-component-button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 7px;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid
    color-mix(
      in srgb,
      var(--jpdb-reader-border) 70%,
      transparent
    );
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 62%,
    transparent
  );
  color: var(--jpdb-reader-text);
  text-align: left;
}

.jpdb-reader-newtab-kanji-details .jpdb-reader-component-card strong,
.jpdb-reader-newtab-kanji-details .jpdb-reader-component-button strong {
  font-size: 17px;
}

.jpdb-reader-newtab-kanji-vocab {
  display: grid;
  gap: 7px;
}

.jpdb-reader-newtab-kanji-vocab > span,
.jpdb-reader-newtab-kanji-vocab > button {
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  padding: 6px 0;
  border: 0;
  border-top: 1px solid
    color-mix(
      in srgb,
      var(--jpdb-reader-border) 48%,
      transparent
    );
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.jpdb-reader-newtab-kanji-vocab > button {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  column-gap: 10px;
  white-space: normal;
}

.jpdb-reader-newtab-kanji-vocab strong {
  min-width: 0;
  color: var(--jpdb-reader-text);
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-kanji-vocab-detail {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-kanji-mnemonic {
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.45;
  text-align: left;
}

.jpdb-reader-newtab-doodle-pass .jpdb-reader-newtab-doodle-result {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-state-known) 54%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-state-known) 16%,
    var(--jpdb-reader-surface)
  );
}

.jpdb-reader-newtab-doodle-fail .jpdb-reader-newtab-doodle-result {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-state-failed) 54%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-state-failed) 16%,
    var(--jpdb-reader-surface)
  );
}

.jpdb-reader-newtab-kanji-popover-word {
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
}

.jpdb-reader-newtab-prompt .jpdb-reader-newtab-kanji-popover-word {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  padding: 0;
}

.jpdb-reader-newtab-kanji-mining {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.jpdb-reader-newtab-mini-action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 820;
}

.jpdb-reader-newtab-mini-action.add,
.jpdb-reader-newtab-mini-action.review {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 54%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
}

.jpdb-reader-newtab-mini-action.nf {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-state-known) 54%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-state-known-readable);
}

.jpdb-reader-newtab-mini-action.blacklist,
.jpdb-reader-newtab-mini-action.danger {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-state-failed) 54%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-state-failed);
}

.jpdb-reader-newtab-origin-graph .jpdb-reader-origin-graph-wrap {
  margin-top: 0;
  height: clamp(240px, 44vw, 280px);
  min-height: 0;
}

.jpdb-reader-newtab-origin-graph
  .jpdb-reader-origin-graph-wrap[data-origin-has-subcomponents="true"] {
  height: clamp(260px, 46vw, 300px);
}

.jpdb-reader-newtab .jpdb-reader-origin-graph-node {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 33px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1;
}

.jpdb-reader-newtab .jpdb-reader-origin-graph-node.current {
  font-size: 35px;
}

.jpdb-reader-newtab .jpdb-reader-origin-graph-node.related {
  font-size: 29px;
}

.jpdb-reader-newtab .jpdb-reader-origin-graph-node[data-label-length="2"] {
  font-size: 27px;
}

.jpdb-reader-newtab .jpdb-reader-origin-graph-node[data-label-length="many"] {
  font-size: 22px;
}

.jpdb-reader-newtab-origin-graph .jpdb-reader-origin-graph-lines {
  opacity: 0.88;
}

.jpdb-reader-newtab-immersion {
  margin-top: clamp(6px, 1.6vh, 14px);
  width: min(640px, 100%);
  display: grid;
  justify-items: stretch;
  gap: 10px;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  min-width: 0;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-card,
.jpdb-reader-newtab-immersion .jpdb-reader-example-body {
  width: 100%;
  min-width: 0;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-body {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-toolbar {
  width: min(100%, 720px);
  margin: 0 auto 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-meta {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-source {
  flex: 0 0 auto;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-title {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-actions {
  justify-self: end;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-count {
  color: var(--jpdb-reader-muted);
  font-weight: 850;
}

.jpdb-reader-newtab-immersion .jpdb-reader-icon-mini {
  width: 34px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 82%,
    transparent
  );
  color: var(--jpdb-reader-text);
  cursor: pointer;
}

.jpdb-reader-newtab-immersion .jpdb-reader-icon-mini svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-media {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: min(520px, 52vh);
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 40%, var(--jpdb-reader-video-grid-line), transparent 48%),
    var(--jpdb-reader-video-frame);
  box-shadow:
    0 22px 60px var(--jpdb-reader-video-shadow-subtle),
    inset 0 0 0 1px var(--jpdb-reader-video-grid-line);
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-image {
  width: 100%;
  height: auto;
  max-height: min(520px, 52vh);
  object-fit: contain;
  display: block;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-sentence {
  display: block;
  width: min(100%, 38em);
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.62;
  text-align: center;
  text-shadow: none;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: balance;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 5%, 18px);
  z-index: 1;
  justify-self: stretch;
  box-sizing: border-box;
  max-width: calc(100% - clamp(28px, 8%, 52px));
  padding: 2px 6px;
  border-radius: 4px;
  transform: translateX(-50%);
  color: var(--subtitle-color, var(--jpdb-reader-video-text));
  font:
    var(--subtitle-weight, 760)
    var(--subtitle-font-size, clamp(13px, 1.7vw, 18px)) /
    1.36
    var(--subtitle-family, var(--jpdb-reader-font));
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: wrap;
  background: var(--jpdb-ocr-background-rgba, var(--jpdb-reader-ocr-bg));
  box-decoration-break: clone;
  box-shadow:
    0 6px 16px var(--jpdb-reader-shadow),
    inset 0 0 0 1px var(--jpdb-reader-ocr-inset);
  text-shadow:
    0 1px 2px var(--subtitle-outline, var(--jpdb-reader-video-outline)),
    0 0 3px var(--subtitle-outline, var(--jpdb-reader-video-outline)),
    0 0 8px var(--jpdb-reader-video-shadow-strong),
    0 3px 12px var(--jpdb-reader-video-shadow);
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-sentence
  .jpdb-reader-word {
  --jpdb-reader-subtitle-fallback: var(--subtitle-color, var(--jpdb-reader-video-text));
  display: inline;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word {
  text-shadow:
    0 1px 2px var(--subtitle-outline, var(--jpdb-reader-video-outline)),
    0 0 3px var(--subtitle-outline, var(--jpdb-reader-video-outline)),
    0 0 8px var(--jpdb-reader-video-shadow-strong),
    0 3px 12px var(--jpdb-reader-video-shadow);
  -webkit-text-stroke: 0.02em color-mix(in srgb, var(--subtitle-outline, var(--jpdb-reader-video-outline)) 78%, transparent);
  paint-order: stroke fill;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-has-furi {
  line-height: 2;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-target {
  padding: 0 0.08em;
  border-radius: 0.22em;
  background: var(
    --jpdb-reader-example-target-bg,
    var(--jpdb-reader-accent-soft)
  );
  box-shadow: inset 0 -0.1em 0
    var(--jpdb-reader-example-target-underline, color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.jpdb-reader-newtab-immersion mark.jpdb-reader-example-target {
  color: inherit;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target {
  background: var(
    --jpdb-reader-example-target-bg,
    var(--jpdb-reader-accent-soft)
  ) !important;
  box-shadow: inset 0 -0.1em 0
    var(--jpdb-reader-example-target-underline, color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent));
}
.jpdb-reader-newtab-immersion
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target.jpdb-reader-has-furi
  .jpdb-reader-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target {
  --jpdb-reader-word-underline: transparent;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 34%,
    var(--jpdb-reader-video-target-backdrop)
  ) !important;
  box-shadow:
    0 0.08em 0 color-mix(in srgb, var(--jpdb-reader-black) 58%, transparent),
    inset 0 -0.12em 0 color-mix(in srgb, var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 74%, transparent);
  text-decoration-color: transparent !important;
}
.jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target.jpdb-reader-has-furi
  .jpdb-reader-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration-color: transparent !important;
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence {
  --jpdb-reader-subtitle-fallback: var(--jpdb-reader-text);
  background: transparent;
  box-shadow: none;
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word {
  --jpdb-reader-subtitle-fallback: var(--jpdb-reader-text);
  background: transparent !important;
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word:hover,
:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word:focus-visible {
  background: var(
    --jpdb-reader-word-accessible-highlight,
    var(--jpdb-reader-word-highlight-source, var(--jpdb-reader-hover))
  ) !important;
  box-shadow: var(--jpdb-reader-word-highlight-shadow-source, none) !important;
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-furi {
  color: currentColor;
  opacity: 0.82;
  text-shadow: none;
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target {
  background: var(
    --jpdb-reader-example-target-bg,
    var(--jpdb-reader-accent-soft)
  ) !important;
  box-shadow: inset 0 -0.1em 0
    var(--jpdb-reader-example-target-underline, color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent)) !important;
  text-decoration-color: transparent !important;
}
:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target.jpdb-reader-has-furi
  .jpdb-reader-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration-color: transparent !important;
}

.jpdb-reader-newtab-immersion .jpdb-reader-example-translation {
  width: min(100%, 38em);
  color: var(--jpdb-reader-muted);
  font-family: var(--jpdb-reader-font);
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 650;
  line-height: 1.42;
  text-align: center;
  text-shadow: none;
  overflow-wrap: anywhere;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-translation {
  color: var(--jpdb-reader-video-text-muted);
  font-family: var(--subtitle-family, var(--jpdb-reader-font));
  font-size: clamp(12px, 1.2vw, 16px);
  text-shadow:
    0 1px 2px var(--subtitle-outline, var(--jpdb-reader-video-outline)),
    0 0 6px color-mix(in srgb, var(--jpdb-reader-black) 70%, transparent);
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-reader-newtab-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-translation {
  color: var(--jpdb-reader-muted);
  text-shadow: none;
}

.jpdb-reader-newtab-kanji-immersion {
  width: 100%;
  gap: 6px;
  text-align: left;
}

.jpdb-reader-newtab-kanji-immersion .jpdb-reader-example-toolbar {
  width: 100%;
  margin: 0 0 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.jpdb-reader-newtab-kanji-immersion .jpdb-reader-example-meta {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 2px;
}

.jpdb-reader-newtab-kanji-immersion .jpdb-reader-example-source {
  grid-column: 1 / -1;
  flex: none;
  max-width: 100%;
  font-size: 10.5px;
  line-height: 1.15;
  letter-spacing: 0;
}

.jpdb-reader-newtab-kanji-immersion .jpdb-reader-example-title {
  font-size: 11px;
  line-height: 1.25;
}

.jpdb-reader-newtab-kanji-immersion .jpdb-reader-icon-mini {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 5px;
  font-size: 13px;
}

.jpdb-reader-newtab-kanji-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-media {
  width: min(100%, 720px);
  max-width: 100%;
  max-height: var(--jpdb-reader-example-media-max-height, min(520px, 52vh));
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.jpdb-reader-newtab-kanji-immersion .jpdb-reader-example-image {
  width: auto;
  max-width: 100%;
  max-height: var(--jpdb-reader-example-media-max-height, min(520px, 52vh));
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-translation[data-yomu-immersion-translation-blurred="true"] {
  filter: blur(4px);
  cursor: pointer;
  user-select: none;
}

.jpdb-reader-newtab-immersion
  .jpdb-reader-example-translation[data-yomu-immersion-translation-blurred="true"]:hover,
.jpdb-reader-newtab-immersion
  .jpdb-reader-example-translation[data-yomu-immersion-translation-blurred="true"]:focus-visible {
  filter: blur(3px);
}

.jpdb-reader-newtab-install {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  color: var(--jpdb-reader-faint);
  font-size: 11px;
  font-weight: 760;
  text-decoration: none;
}

.jpdb-reader-newtab-install[hidden] {
  display: none !important;
}

.jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch:focus-visible,
.jpdb-reader-language-toggle:focus-visible,
.jpdb-reader-newtab-overflow:focus-visible,
.jpdb-reader-newtab-mode button:focus-visible,
.jpdb-reader-newtab-more-menu button:focus-visible,
.jpdb-reader-newtab-status:focus-visible,
.jpdb-reader-newtab-controls button:not([data-grade]):focus-visible,
.jpdb-reader-newtab-grade-target-summary:focus-visible,
.jpdb-reader-newtab-grade-target-select:focus-visible,
.jpdb-reader-newtab-doodle-actions button:focus-visible,
.jpdb-reader-newtab-searchbox button:focus-visible,
.jpdb-reader-newtab-search-suggestions button:focus-visible,
.jpdb-reader-newtab-handwriting-candidates button:focus-visible,
.jpdb-reader-newtab-search-card:focus-visible,
.jpdb-reader-newtab-search-links a:focus-visible,
.jpdb-reader-newtab-search-links button:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 60%,
    var(--jpdb-reader-border)
  );
  outline: 2px solid
    color-mix(in srgb, var(--jpdb-reader-accent) 54%, transparent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch:hover,
  .jpdb-reader-language-toggle:hover,
  .jpdb-reader-newtab-overflow:hover,
  .jpdb-reader-newtab-mode button:hover,
  .jpdb-reader-newtab-more-menu button:hover,
  .jpdb-reader-newtab-controls button:not([data-grade]):hover,
  .jpdb-reader-newtab-doodle-actions button:hover,
  .jpdb-reader-newtab-searchbox button:hover,
  .jpdb-reader-newtab-search-suggestions button:hover,
  .jpdb-reader-newtab-handwriting-candidates button:hover,
  .jpdb-reader-newtab-search-card:hover,
  .jpdb-reader-newtab-search-links a:hover,
  .jpdb-reader-newtab-search-links button:hover {
    border-color: color-mix(
      in srgb,
      var(--jpdb-reader-accent) 60%,
      var(--jpdb-reader-border)
    );
  }

  .jpdb-reader-language-toggle:hover {
    background: color-mix(
      in srgb,
      var(--jpdb-reader-surface) 84%,
      transparent
    );
    color: var(--jpdb-reader-text);
  }
}

.jpdb-reader-newtab-brand .title:hover,
.jpdb-reader-newtab-brand .title:focus-visible {
  outline: none;
  box-shadow: none;
  color: var(--jpdb-reader-text);
}

@media (pointer: coarse) and (min-width: 700px) {
  .jpdb-reader-newtab-shell {
    padding-top: max(84px, calc(env(safe-area-inset-top) + 72px));
  }

  .jpdb-reader-newtab-revealed .jpdb-reader-newtab-shell {
    padding-top: max(88px, calc(env(safe-area-inset-top) + 76px));
  }
}

@media (max-width: 640px) {
  .jpdb-reader-newtab-shell {
    width: min(100vw - 16px, 560px);
    gap: 12px;
  }

  .jpdb-reader-newtab-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand controls"
      "mode mode";
    align-items: center;
    gap: 8px 10px;
  }

  .jpdb-reader-newtab-brand {
    grid-area: brand;
    justify-self: start;
    min-width: 0;
  }

  .jpdb-reader-newtab-brand .title {
    gap: 0;
  }

  .jpdb-reader-newtab-brand span {
    display: none;
  }

  .jpdb-reader-newtab-theme-controls {
    grid-area: controls;
    justify-self: end;
    min-width: 0;
  }

  .jpdb-reader-newtab-mode {
    grid-area: mode;
    width: 100%;
    min-width: 0;
    max-width: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82px, 1fr);
    grid-template-columns: none;
    justify-self: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .jpdb-reader-newtab-mode::-webkit-scrollbar {
    display: none;
  }

  .jpdb-reader-newtab-mode button {
    min-width: 0;
    padding: 0 8px;
    font-size: 10px;
    white-space: nowrap;
  }

  .jpdb-reader-newtab-theme-controls .jpdb-reader-theme-appearance,
  .jpdb-reader-newtab .jpdb-reader-newtab-overflow {
    width: 44px;
    min-width: 44px;
  }

  .jpdb-reader-language-toggle {
    width: 32px;
    min-width: 32px;
    padding: 0;
    font-size: 15px;
  }

  .jpdb-reader-newtab-search-mode .jpdb-reader-newtab-study {
    gap: 12px;
  }

  .jpdb-reader-newtab-search-mode .jpdb-reader-newtab-prompt {
    font-size: clamp(1.8rem, 8vw, 2.55rem);
  }

  .jpdb-reader-newtab-searchbox {
    grid-template-columns: minmax(0, 1fr);
    padding: 7px;
  }

  .jpdb-reader-newtab-searchbox input {
    min-height: 44px;
    font-size: 16px;
  }

  .jpdb-reader-newtab-searchbox button {
    min-height: 40px;
  }

  .jpdb-reader-newtab-handwriting-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .jpdb-reader-newtab-search-doodle.jpdb-reader-doodle-stage {
    justify-self: center;
  }

  .jpdb-reader-newtab-handwriting-candidates {
    grid-column: 1;
  }

  .jpdb-reader-newtab-search-word {
    grid-template-columns: minmax(0, 1fr);
  }

  .jpdb-reader-newtab-search-term {
    grid-row: auto;
    font-size: 20px;
  }

  .jpdb-reader-newtab-prompt {
    font-size: clamp(1.9rem, 9.8vw, 2.62rem);
    line-height: 1.02;
  }

  .jpdb-reader-newtab-prompt-anki-card {
    width: min(100%, 480px);
    padding: 42px clamp(10px, 3vw, 16px) 0;
  }

  .jpdb-reader-newtab-prompt-anki-card .jpdb-reader-anki-primary-sound {
    position: absolute;
    top: 0;
    right: clamp(10px, 3vw, 16px);
    margin: 0;
  }

  .jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-prompt {
    font-size: clamp(1.9rem, 9.4vw, 2.55rem);
  }

  .jpdb-reader-newtab-setup-mode .jpdb-reader-newtab-reading {
    font-size: clamp(18px, 5.4vw, 22px);
  }

  .jpdb-reader-newtab-reading {
    font-size: clamp(1.1rem, 7vw, 1.65rem);
  }

  .jpdb-reader-newtab-meaning {
    font-size: clamp(13px, 4.2vw, 15px);
  }

  .jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-kanji-mode)
    .jpdb-reader-newtab-study {
    gap: 12px;
  }

  .jpdb-reader-newtab-setup-mode.jpdb-reader-newtab-revealed:not(
      .jpdb-reader-newtab-kanji-mode
    )
    .jpdb-reader-newtab-study {
    align-content: center;
  }

  .jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-kanji-mode)
    .jpdb-reader-newtab-answer {
    min-height: 0;
    gap: 5px;
  }

  .jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-kanji-mode)
    .jpdb-reader-newtab-meaning {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.34;
  }

  .jpdb-reader-newtab-kanji-mode .jpdb-reader-newtab-prompt {
    font-size: 2.75rem;
  }

  .jpdb-reader-newtab-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 6px;
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls:has(
      .jpdb-reader-newtab-grade-target-context
    ) {
    padding-top: 32px;
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls:has(
      .jpdb-reader-newtab-grade-target-context[open]
    ) {
    padding-top: 104px;
  }

  .jpdb-reader-newtab-grade-target {
    max-width: 100%;
    font-size: 10px;
  }

  .jpdb-reader-newtab-grade-target-current {
    max-width: min(150px, 38vw);
    font-size: 10px;
  }

  .jpdb-reader-newtab-grade-target-summary .jpdb-reader-mining-collapse {
    width: 64px;
    height: 28px;
    min-width: 64px;
    min-height: 28px;
  }

  .jpdb-reader-newtab-grade-target-panel {
    width: min(250px, 100%);
  }

  .jpdb-reader-newtab-grade-target-select {
    width: 100%;
    min-height: 34px;
    font-size: 12px;
  }

  .jpdb-reader-newtab-controls button {
    min-height: 42px;
    min-width: 0;
    padding: 0 6px;
    font-size: 11px;
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls button {
    min-height: 38px;
    padding: 0 4px;
    font-size: 10px;
  }

  .jpdb-reader-newtab-immersion {
    gap: 8px;
    margin-top: 4px;
  }

  /* Title and controls share one row (jpdb-frame pattern); the old
     centered, stacked controls wasted a whole row (user-reported). */
  .jpdb-reader-newtab-immersion .jpdb-reader-example-toolbar {
    gap: 7px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .jpdb-reader-newtab-immersion .jpdb-reader-example-title {
    font-size: 11.5px;
  }

  .jpdb-reader-newtab-immersion .jpdb-reader-icon-mini {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }

  .jpdb-reader-newtab-kanji-answer {
    --jpdb-reader-newtab-kanji-panel: min(280px, 100%);
    grid-template-columns: 1fr;
  }

  .jpdb-reader-newtab-kanji-svg {
    min-height: 116px;
  }

  .jpdb-reader-newtab-doodle {
    width: min(280px, 100%);
  }
}

@media (max-width: 860px) {
  .jpdb-reader-newtab-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand controls"
      "mode mode";
    align-items: center;
    gap: 8px 10px;
  }

  .jpdb-reader-newtab-brand {
    grid-area: brand;
    justify-self: start;
    min-width: 0;
  }

  .jpdb-reader-newtab-theme-controls {
    grid-area: controls;
    justify-self: end;
    min-width: 0;
  }

  .jpdb-reader-newtab-mode {
    grid-area: mode;
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-self: stretch;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(88px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .jpdb-reader-newtab-mode::-webkit-scrollbar {
    display: none;
  }

  .jpdb-reader-newtab-mode button {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .jpdb-reader-newtab.jpdb-reader-newtab-stats-mode
    .jpdb-reader-newtab-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .jpdb-reader-newtab.jpdb-reader-newtab-stats-mode
    .jpdb-reader-newtab-mode {
    grid-template-columns: none;
  }

  button.jpdb-reader-newtab-status {
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .jpdb-reader-newtab-shell {
    width: min(100vw - 12px, 420px);
  }

  .jpdb-reader-newtab-mode {
    grid-auto-columns: minmax(76px, 1fr);
    grid-template-columns: none;
  }

  .jpdb-reader-newtab-mode button {
    min-height: 36px;
    padding-inline: 7px;
    font-size: 10px;
  }

  .jpdb-reader-newtab:not(.jpdb-reader-newtab-search-mode):not(.jpdb-reader-newtab-stats-mode)
    .jpdb-reader-newtab-shell {
    padding-bottom: max(148px, calc(32px + env(safe-area-inset-bottom)));
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(420px, calc(100vw - 12px));
    gap: 4px;
  }

}

@media (pointer: coarse) {
  .jpdb-reader-newtab:not(.jpdb-reader-newtab-search-mode):not(.jpdb-reader-newtab-stats-mode)
    .jpdb-reader-newtab-shell {
    padding-bottom: max(116px, calc(24px + env(safe-area-inset-bottom)));
  }

  .jpdb-reader-language-toggle {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  /* Immersion Kit controls sit inline with the clip title; 36px visible
     size keeps the row compact (user-reported) while staying tappable. */
  .jpdb-reader-newtab-immersion .jpdb-reader-icon-mini {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .jpdb-reader-newtab-theme-controls .jpdb-reader-theme-appearance,
  .jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch,
  .jpdb-reader-newtab .jpdb-reader-newtab-overflow,
  .jpdb-reader-newtab-more-menu button,
  .jpdb-reader-newtab-mode button,
  button.jpdb-reader-newtab-status:not(:disabled),
  .jpdb-reader-language-toggle,
  .jpdb-reader-newtab-searchbox button,
  .jpdb-reader-newtab-grade-target-select,
  .jpdb-reader-newtab-controls button:not([data-grade]),
  .jpdb-reader-newtab-search-links a,
  .jpdb-reader-newtab-search-links button,
  .jpdb-reader-newtab-handwriting summary,
  .jpdb-reader-newtab-handwriting-candidates button,
  .jpdb-reader-newtab-doodle-actions button,
  .jpdb-reader-newtab-search-card,
  .jpdb-reader-newtab-kanji-details
    .jpdb-reader-source-card
    > summary.jpdb-reader-local-title,
  .jpdb-reader-newtab-kanji-details .jpdb-reader-component-button,
  .jpdb-reader-newtab-kanji-vocab > button,
  .jpdb-reader-newtab-mini-action,
  .jpdb-reader-newtab-install {
    min-height: 44px !important;
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls button {
    position: relative;
    min-height: 38px !important;
    overflow: visible;
    touch-action: manipulation;
  }

  .jpdb-reader-newtab-controls.jpdb-reader-newtab-grade-controls button::after {
    content: "";
    position: absolute;
    inset: -3px 0;
    border-radius: 10px;
  }

  .jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch {
    min-height: 24px !important;
  }

  .jpdb-reader-newtab-theme-controls .jpdb-reader-theme-switch::after {
    content: "";
    position: absolute;
    inset: -10px 0;
    border-radius: 999px;
  }
}

@media (pointer: coarse) and (max-width: 420px) {
  .jpdb-reader-newtab:not(.jpdb-reader-newtab-search-mode):not(.jpdb-reader-newtab-stats-mode)
    .jpdb-reader-newtab-shell {
    padding-bottom: max(148px, calc(32px + env(safe-area-inset-bottom)));
  }
}

/* Study-hub parity SH-3: "My Cards" browser on the idle Search tab. */
.jpdb-reader-newtab-browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0;
}
.jpdb-reader-newtab-browse-chip {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  color: var(--jpdb-reader-muted);
  font: 600 12px/1 var(--jpdb-reader-font);
  cursor: pointer;
}
.jpdb-reader-newtab-browse-chip[aria-pressed="true"] {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-accent-readable);
}
/* 2D reviews controls: one compact row — sort key, direction, select mode. */
.jpdb-reader-newtab-browse-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.jpdb-reader-newtab-browse-controls select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  color: var(--jpdb-reader-text);
  font: 600 12px/1 var(--jpdb-reader-font);
}
.jpdb-reader-newtab-browse-direction,
.jpdb-reader-newtab-browse-select-toggle {
  min-width: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  color: var(--jpdb-reader-muted);
  font: 600 12px/1 var(--jpdb-reader-font);
  cursor: pointer;
}
.jpdb-reader-newtab-browse-direction[aria-pressed="true"],
.jpdb-reader-newtab-browse-select-toggle[aria-pressed="true"] {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-accent-readable);
}

.jpdb-reader-newtab-browse-meta {
  margin: 4px 0 8px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
}
.jpdb-reader-newtab-browse-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.jpdb-reader-newtab-browse-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--jpdb-reader-border);
  background: none;
  color: var(--jpdb-reader-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.jpdb-reader-newtab-browse-row:hover,
.jpdb-reader-newtab-browse-row:focus-visible {
  background: color-mix(in srgb, var(--jpdb-reader-accent) 8%, transparent);
}
.jpdb-reader-newtab-browse-spelling {
  font-size: 17px;
  font-weight: 600;
}
.jpdb-reader-newtab-browse-reading {
  margin-left: 6px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
}
.jpdb-reader-newtab-browse-meaning {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-newtab-browse-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
}
.jpdb-reader-newtab-browse-pager {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.jpdb-reader-newtab-browse-empty {
  margin: 16px 0;
  color: var(--jpdb-reader-muted);
}
@media (max-width: 640px) {
  .jpdb-reader-newtab-browse-meaning { display: none; }
}

/* SH-4: jpdb.io's deck-membership line on live review backs. */
.jpdb-reader-newtab-deck-membership {
  margin: 8px 0 0;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
}

/* Study-hub parity SH-6: in-page JPDB deck scope for the study queue. */
.jpdb-reader-newtab-deck {
  box-sizing: border-box;
  width: min(320px, 80vw);
  max-width: min(320px, 80vw);
  margin: 6px auto 0;
  padding: 4px 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: var(--jpdb-reader-bg);
  color: var(--jpdb-reader-muted);
  font: 600 13px/1.3 system-ui, -apple-system, sans-serif;
}

@media (max-width: 768px), (pointer: coarse) {
  /* 16px keeps iOS from zooming the page when the select opens. */
  .jpdb-reader-newtab-deck {
    font-size: 16px;
    min-height: 40px;
  }
}

/* SH-4: "Composed of" component-kanji line on revealed word backs. */
.jpdb-reader-newtab-composed-of {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.jpdb-reader-newtab-composed-of-label {
  color: var(--jpdb-reader-muted);
  font-size: 12px;
}

.jpdb-reader-newtab-composed-of-kanji {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-text);
  font-size: 15px;
  cursor: pointer;
}

.jpdb-reader-newtab-composed-of-kanji small {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
}

/* Keyboard hints on study controls (jpdb/Jiten advertise theirs the same
   way); pointless on touch, so coarse pointers hide them. */
.jpdb-reader-newtab-key-hint {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 4px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (pointer: coarse) {
  .jpdb-reader-newtab-key-hint {
    display: none;
  }
}

/* UT-34: once any study shortcut has been used the hints stay gone. */
.jpdb-reader-newtab-key-hints-dismissed .jpdb-reader-newtab-key-hint {
  display: none;
}

/* SH-3 v2: select-page bulk bar in the My Cards browser (Jiten parity). */
.jpdb-reader-newtab-browse-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 8px 0;
  font-size: 13px;
  color: var(--jpdb-reader-muted);
}

.jpdb-reader-newtab-browse-bulk button {
  min-height: 32px;
  padding: 2px 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-text);
  cursor: pointer;
}

.jpdb-reader-newtab-browse-bulk button:disabled {
  opacity: 0.5;
  cursor: default;
}

.jpdb-reader-newtab-browse-bulk-select {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.jpdb-reader-newtab-browse-bulk-select input {
  margin: 0;
}

.jpdb-reader-newtab-browse-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.jpdb-reader-newtab-browse-item .jpdb-reader-newtab-browse-row {
  flex: 1;
}

@media (pointer: coarse) {
  .jpdb-reader-newtab-browse-select,
  .jpdb-reader-newtab-browse-bulk input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
}

/* iPad landscape (study-hub research persona 5): the revealed card wastes a
   short, wide viewport as one tall column. On coarse-pointer landscape
   tablets, split the study surface — prompt left, revealed answer right —
   while the session/status/control rows keep spanning the full width.
   The empty state ("No cards.") also carries -revealed but has no real card,
   so excluding -empty-mode keeps the よむ wordmark + message centred as one
   column instead of stranding them in opposite corners. */
@media (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) {
  :where(.jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-search-mode, .jpdb-reader-newtab-stats-mode, .jpdb-reader-newtab-empty-mode))
    .jpdb-reader-newtab-study {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 36px;
    align-items: start;
  }

  :where(.jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-search-mode, .jpdb-reader-newtab-stats-mode, .jpdb-reader-newtab-empty-mode))
    .jpdb-reader-newtab-study
    > :is(
      .jpdb-reader-newtab-count,
      .jpdb-reader-newtab-status,
      .jpdb-reader-newtab-deck,
      .jpdb-reader-newtab-search,
      [data-newtab-controls]
    ) {
    grid-column: 1 / -1;
  }

  :where(.jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-search-mode, .jpdb-reader-newtab-stats-mode, .jpdb-reader-newtab-empty-mode))
    .jpdb-reader-newtab-study > .jpdb-reader-newtab-prompt {
    grid-column: 1;
    align-self: center;
  }

  :where(.jpdb-reader-newtab-revealed:not(.jpdb-reader-newtab-search-mode, .jpdb-reader-newtab-stats-mode, .jpdb-reader-newtab-empty-mode))
    .jpdb-reader-newtab-study > .jpdb-reader-newtab-answer {
    grid-column: 2;
    text-align: left;
  }
}


/* UT-41: first-run connect call-to-action under the practice-words notice. */
.jpdb-reader-newtab-connect-cta {
  margin-top: 4px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-accent) 44%, var(--jpdb-reader-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 84%, var(--jpdb-reader-accent) 12%);
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
  font-weight: 600;
  cursor: pointer;
}


/* UT-45: shared card-enter motion after a grade (buttons and swipe alike). */
@keyframes jpdb-reader-newtab-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.jpdb-reader-newtab-card-fresh {
  animation: jpdb-reader-newtab-card-in 170ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .jpdb-reader-newtab-card-fresh {
    animation: none;
  }
}


/* Source: src/reader/styles/stats.css */
.jpdb-reader-newtab-stats-mode .jpdb-reader-newtab-study {
  align-content: start;
  align-items: start;
  justify-items: stretch;
  gap: 16px;
  padding: 4px 0 32px;
  cursor: auto;
  user-select: text;
}

.jpdb-reader-stats {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 16px;
}

.jpdb-reader-stats-header {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.jpdb-reader-stats-title {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.jpdb-reader-stats-title h1 {
  margin: 0;
  color: var(--jpdb-reader-text);
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.jpdb-reader-stats-title p {
  max-width: 64ch;
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.42;
}

.jpdb-reader-stats-refresh {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 86%, transparent);
  color: var(--jpdb-reader-text);
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}

.jpdb-reader-stats-tabs {
  justify-self: start;
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 78%, transparent);
}

.jpdb-reader-stats-tabs button,
.jpdb-reader-stats-activity-tabs button {
  min-height: 34px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 840;
  line-height: 1;
  text-align: center;
}

.jpdb-reader-stats-tabs button[data-active="true"],
.jpdb-reader-stats-activity-tabs button[data-active="true"] {
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 18%,
    var(--jpdb-reader-surface-2)
  );
  color: var(--jpdb-reader-text);
}

.jpdb-reader-stats-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.jpdb-reader-stats-metric,
.jpdb-reader-stats-panel,
.jpdb-reader-stats-connection {
  min-width: 0;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 82%, transparent);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--jpdb-reader-black) 14%, transparent);
}

.jpdb-reader-stats-metric {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 112px;
  padding: 12px;
}

.jpdb-reader-stats-metric-label,
.jpdb-reader-stats-metric-detail,
.jpdb-reader-stats-panel-heading span,
.jpdb-reader-stats-connection-main span {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
}

.jpdb-reader-stats-metric-label {
  text-transform: uppercase;
}

.jpdb-reader-stats-metric strong {
  color: var(--jpdb-reader-text);
  font-size: clamp(1.65rem, 3.3vw, 2.45rem);
  font-weight: 900;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.jpdb-reader-stats-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.jpdb-reader-stats-panel-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.jpdb-reader-stats-panel-heading h2 {
  margin: 0;
  color: var(--jpdb-reader-text);
  font-size: 14px;
  font-weight: 880;
  line-height: 1.1;
}

.jpdb-reader-stats-panel-actions {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.jpdb-reader-stats-activity-tabs {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(54px, 1fr));
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-bg) 54%, transparent);
}

.jpdb-reader-stats-activity-tabs button {
  min-height: 28px;
  padding: 0 9px;
  font-size: 10px;
}

.jpdb-reader-stats-activity-summary {
  margin: -4px 0 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.jpdb-reader-stats-panel-button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-accent) 48%, var(--jpdb-reader-border));
  border-radius: 8px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 84%, transparent);
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
  font-size: 11px;
  font-weight: 820;
  line-height: 1.1;
}

.jpdb-reader-stats-panel-button:disabled {
  border-color: var(--jpdb-reader-border);
  color: var(--jpdb-reader-muted);
  opacity: 0.58;
}

.jpdb-reader-stats-bars {
  height: 180px;
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  padding-top: 12px;
}

.jpdb-reader-stats-bar {
  position: relative;
  display: block;
  min-width: 0;
  height: 100%;
  border: 0;
  border-radius: 5px;
  padding: 0;
  background: color-mix(in srgb, var(--jpdb-reader-bg) 72%, transparent);
  cursor: pointer;
  overflow: visible;
}

.jpdb-reader-stats-bar::after,
.jpdb-reader-stats-heatmap-cell::before {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: min(260px, 72vw);
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  padding: 8px 9px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 94%, transparent);
  box-shadow: 0 12px 34px var(--jpdb-reader-shadow);
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translate(-50%, 4px);
  transition: opacity 120ms ease, transform 120ms ease;
  visibility: hidden;
  white-space: normal;
}

.jpdb-reader-stats-bar:hover::after,
.jpdb-reader-stats-bar:focus-visible::after,
.jpdb-reader-stats-heatmap-cell:hover::before,
.jpdb-reader-stats-heatmap-cell:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

.jpdb-reader-stats-bar:nth-child(-n+5)::after {
  left: 0;
  transform: translate(0, 4px);
}

.jpdb-reader-stats-bar:nth-child(-n+5):hover::after,
.jpdb-reader-stats-bar:nth-child(-n+5):focus-visible::after {
  transform: translate(0, 0);
}

.jpdb-reader-stats-bar:nth-last-child(-n+5)::after {
  right: 0;
  left: auto;
  transform: translate(0, 4px);
}

.jpdb-reader-stats-bar:nth-last-child(-n+5):hover::after,
.jpdb-reader-stats-bar:nth-last-child(-n+5):focus-visible::after {
  transform: translate(0, 0);
}

.jpdb-reader-stats-bar[data-selected="true"] {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--jpdb-reader-accent) 76%, var(--jpdb-reader-white)),
    0 0 0 1px color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
}

.jpdb-reader-stats-bar:focus-visible,
.jpdb-reader-stats-heatmap-cell:focus-visible {
  outline: 2px solid var(--jpdb-reader-accent);
  outline-offset: 2px;
}

.jpdb-reader-stats-bar-fill {
  position: absolute;
  inset: auto 0 0;
  height: var(--stats-bar-height, 1%);
  min-height: 2px;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--jpdb-reader-accent) 78%, var(--jpdb-reader-white)),
    var(--jpdb-reader-accent)
  );
}

.jpdb-reader-stats-bar[data-selected="true"] .jpdb-reader-stats-bar-fill {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-white) 34%, transparent);
}

.jpdb-reader-stats-bar[data-active="false"] .jpdb-reader-stats-bar-fill {
  background: color-mix(in srgb, var(--jpdb-reader-muted) 28%, transparent);
}

.jpdb-reader-stats-month-strip {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(108px, 1fr);
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 1px 1px 3px;
  scrollbar-width: thin;
}

.jpdb-reader-stats-month {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.jpdb-reader-stats-month-heading {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.jpdb-reader-stats-month-heading strong {
  color: var(--jpdb-reader-text);
  font-size: 10px;
  font-weight: 880;
  line-height: 1.1;
}

.jpdb-reader-stats-month-heading span {
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.1;
  text-align: right;
}

.jpdb-reader-stats-heatmap-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.jpdb-reader-stats-heatmap-spacer,
.jpdb-reader-stats-heatmap-cell {
  aspect-ratio: 1;
  min-height: 9px;
  border-radius: 2px;
}

.jpdb-reader-stats-heatmap-cell {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 38%, transparent);
  padding: 0;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 42%, var(--jpdb-reader-bg));
  cursor: pointer;
}

.jpdb-reader-stats-heatmap-cell[data-level="0"] {
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 30%, var(--jpdb-reader-bg));
}

.jpdb-reader-stats-heatmap-cell[data-level="1"] {
  background: color-mix(in srgb, var(--jpdb-reader-accent) 28%, var(--jpdb-reader-bg));
}

.jpdb-reader-stats-heatmap-cell[data-level="2"] {
  background: color-mix(in srgb, var(--jpdb-reader-accent) 44%, var(--jpdb-reader-bg));
}

.jpdb-reader-stats-heatmap-cell[data-level="3"] {
  background: color-mix(in srgb, var(--jpdb-reader-accent) 62%, var(--jpdb-reader-bg));
}

.jpdb-reader-stats-heatmap-cell[data-level="4"] {
  background: color-mix(in srgb, var(--jpdb-reader-accent) 82%, var(--jpdb-reader-bg));
}

.jpdb-reader-stats-heatmap-cell[data-today="true"]::after,
.jpdb-reader-stats-heatmap-cell[data-selected="true"]::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 2px;
  pointer-events: none;
}

.jpdb-reader-stats-heatmap-cell[data-today="true"]::after {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-text) 46%, transparent);
}

.jpdb-reader-stats-heatmap-cell[data-selected="true"]::after {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jpdb-reader-accent) 76%, var(--jpdb-reader-white));
}

.jpdb-reader-stats-stackbar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-bg) 76%, transparent);
  overflow: hidden;
}

.jpdb-reader-stats-stack-segment {
  min-width: 4px;
  height: 100%;
}

.jpdb-reader-stats-stack-segment.is-new,
.jpdb-reader-stats-legend .is-new {
  --stats-segment: var(--jpdb-reader-state-new);
}

.jpdb-reader-stats-stack-segment.is-learning,
.jpdb-reader-stats-legend .is-learning {
  --stats-segment: var(--jpdb-reader-stats-learning);
}

.jpdb-reader-stats-stack-segment.is-review,
.jpdb-reader-stats-legend .is-review {
  --stats-segment: var(--jpdb-reader-accent);
}

.jpdb-reader-stats-stack-segment.is-due,
.jpdb-reader-stats-legend .is-due {
  --stats-segment: var(--jpdb-reader-stats-due);
}

.jpdb-reader-stats-stack-segment.is-failed,
.jpdb-reader-stats-legend .is-failed {
  --stats-segment: var(--jpdb-reader-stats-failed);
}

.jpdb-reader-stats-stack-segment.is-known,
.jpdb-reader-stats-legend .is-known {
  --stats-segment: var(--jpdb-reader-stats-known);
}

.jpdb-reader-stats-stack-segment.is-suspended,
.jpdb-reader-stats-legend .is-suspended {
  --stats-segment: var(--jpdb-reader-stats-suspended);
}

.jpdb-reader-stats-stack-segment.is-ignored,
.jpdb-reader-stats-legend .is-ignored {
  --stats-segment: var(--jpdb-reader-stats-ignored);
}

.jpdb-reader-stats-stack-segment {
  background: var(--stats-segment, var(--jpdb-reader-muted));
}

.jpdb-reader-stats-stack-empty {
  flex: 1;
  background: color-mix(in srgb, var(--jpdb-reader-muted) 24%, transparent);
}

.jpdb-reader-stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

.jpdb-reader-stats-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.jpdb-reader-stats-legend span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--stats-segment, var(--jpdb-reader-muted));
}

.jpdb-reader-stats-connections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.jpdb-reader-stats-connection {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.jpdb-reader-stats-connection-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.jpdb-reader-stats-connection-main strong {
  color: var(--jpdb-reader-text);
  font-size: 14px;
  font-weight: 880;
  line-height: 1.1;
}

.jpdb-reader-stats-decks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 7.2em;
  overflow: auto;
  overflow-wrap: anywhere;
}

.jpdb-reader-stats-deck-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 86%, transparent);
  color: var(--jpdb-reader-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.jpdb-reader-stats-deck-toggle[data-active="true"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 58%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-text);
}

.jpdb-reader-stats-deck-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: var(--jpdb-reader-surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-black) 6%, transparent);
}

.jpdb-reader-stats-deck-toggle input:enabled:hover {
  border-color: var(--jpdb-reader-accent);
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 82%,
    var(--jpdb-reader-accent) 18%
  );
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}

.jpdb-reader-stats-deck-toggle input:checked {
  border-color: var(--jpdb-reader-accent);
  background: var(--jpdb-reader-accent);
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}

.jpdb-reader-stats-deck-toggle input:checked:enabled:hover {
  background: var(--jpdb-reader-accent);
}

.jpdb-reader-stats-deck-toggle input:checked::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--jpdb-reader-accent-text);
  border-bottom: 2.5px solid var(--jpdb-reader-accent-text);
  transform: rotate(-45deg) translate(1px, -1px);
}

.jpdb-reader-stats-deck-toggle input:focus-visible {
  outline: 2px solid var(--jpdb-reader-accent);
  outline-offset: 3px;
}

.jpdb-reader-stats-deck-toggle span {
  color: inherit;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpdb-reader-stats-connection-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: start;
  gap: 8px;
}

.jpdb-reader-stats-connection-actions button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-height: 36px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 84%, transparent);
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.1;
}

.jpdb-reader-stats-connection-actions button:first-child {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 58%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
}

.jpdb-reader-stats-dropzone {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px dashed color-mix(in srgb, var(--jpdb-reader-muted) 62%, transparent);
  border-radius: 8px;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}

.jpdb-reader-stats-dropzone[data-dragging="true"] {
  border-color: var(--jpdb-reader-accent);
  background: color-mix(in srgb, var(--jpdb-reader-accent) 12%, transparent);
}

.jpdb-reader-stats-dropzone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .jpdb-reader-stats-refresh:hover,
  .jpdb-reader-stats-tabs button:hover,
  .jpdb-reader-stats-activity-tabs button:hover,
  .jpdb-reader-stats-panel-button:hover,
  .jpdb-reader-stats-connection-actions button:hover,
  .jpdb-reader-stats-heatmap-cell:hover {
    border-color: color-mix(in srgb, var(--jpdb-reader-accent) 64%, var(--jpdb-reader-border));
    background: color-mix(in srgb, var(--jpdb-reader-surface-2) 78%, var(--jpdb-reader-accent) 12%);
  }

  .jpdb-reader-stats-panel-button:disabled:hover {
    border-color: var(--jpdb-reader-border);
    background: color-mix(in srgb, var(--jpdb-reader-surface-2) 84%, transparent);
  }
}

@media (max-width: 760px) {
  .jpdb-reader-newtab-stats-mode .jpdb-reader-newtab-mode {
    grid-template-columns: repeat(2, minmax(70px, 1fr));
  }

  .jpdb-reader-newtab-stats-mode .jpdb-reader-newtab-topbar {
    grid-template-columns: auto 1fr auto auto auto;
  }

  .jpdb-reader-stats-metrics,
  .jpdb-reader-stats-connections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jpdb-reader-stats-bars {
    height: 150px;
    gap: 3px;
  }

  .jpdb-reader-stats-month-strip {
    grid-auto-columns: 136px;
  }

  .jpdb-reader-stats-bar::after,
  .jpdb-reader-stats-heatmap-cell::before {
    content: none;
  }
}

@media (max-width: 520px) {
  .jpdb-reader-stats-header,
  .jpdb-reader-stats-panel-heading {
    align-items: start;
  }

  .jpdb-reader-stats-tabs {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .jpdb-reader-stats-metrics,
  .jpdb-reader-stats-connections {
    grid-template-columns: minmax(0, 1fr);
  }

  .jpdb-reader-stats-metric {
    min-height: 104px;
  }
}

@media (pointer: coarse) {
  .jpdb-reader-stats-refresh,
  .jpdb-reader-stats-tabs button,
  .jpdb-reader-stats-activity-tabs button,
  .jpdb-reader-stats-panel-button,
  .jpdb-reader-stats-deck-toggle,
  .jpdb-reader-stats-connection-actions button {
    min-height: 44px;
    touch-action: manipulation;
  }

  .jpdb-reader-stats-refresh {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .jpdb-reader-stats-bar,
  .jpdb-reader-stats-heatmap-cell {
    touch-action: manipulation;
  }

  .jpdb-reader-stats-bars,
  .jpdb-reader-stats-heatmap-grid {
    touch-action: manipulation;
  }
}

/* JPDB Learn parity: a compact "Words | Learning | You know" progress strip. */
.jpdb-reader-stats-progress {
  min-width: 0;
  display: grid;
  gap: 9px;
  padding: 2px 0 6px;
}

.jpdb-reader-stats-progress-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
}

.jpdb-reader-stats-progress-item {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.jpdb-reader-stats-progress-item-label {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.15;
}

.jpdb-reader-stats-progress-item strong {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  font-weight: 880;
  line-height: 1;
  overflow-wrap: anywhere;
}

.jpdb-reader-stats-progress-rail {
  min-width: 0;
  height: 7px;
  display: flex;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 64%, var(--jpdb-reader-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-border) 54%, transparent);
}

.jpdb-reader-stats-progress-rail span {
  min-width: 0;
}

.jpdb-reader-stats-progress-rail .is-learning {
  background: color-mix(in srgb, var(--jpdb-reader-state-learning) 82%, var(--jpdb-reader-white));
}

.jpdb-reader-stats-progress-rail .is-known {
  background: color-mix(in srgb, var(--jpdb-reader-state-known) 88%, var(--jpdb-reader-white));
}

.jpdb-reader-stats-progress-total {
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}


/* Source: src/reader/styles/reader-words-ocr.css */
.jpdb-reader-word {
  --jpdb-reader-word-color-source: currentColor;
  --jpdb-reader-word-decoration-source: transparent;
  --jpdb-reader-word-highlight-source: transparent;
  --jpdb-reader-word-highlight-shadow-source: none;
  --jpdb-reader-word-inline-gap: 0.08em;
  --jpdb-reader-word-highlight-size: calc(100% - var(--jpdb-reader-word-inline-gap) - var(--jpdb-reader-word-inline-gap));
  --jpdb-reader-word-highlight-block-size: 1.16em;
  --jpdb-reader-word-underline: var(--jpdb-reader-word-decoration-source, transparent);
  --jpdb-reader-word-underline-offset: 0.04em;
  --jpdb-reader-word-underline-style: solid;
  /* Scales with the word like the subtitle underline, with a 2px floor so it is
     clearly visible (was a too-thin flat 1px). */
  --jpdb-reader-word-underline-thickness: max(2px, 0.08em);
  --jpdb-reader-source-status-color: var(--jpdb-reader-status-readable, var(--jpdb-reader-status-color, currentColor));
  --jpdb-reader-source-status-decoration: var(--jpdb-reader-status-color, transparent);
  --jpdb-reader-source-status-soft: var(--jpdb-reader-status-soft, transparent);
  --jpdb-reader-source-status-highlight: var(--jpdb-reader-status-highlight, var(--jpdb-reader-source-status-soft, transparent));
  --jpdb-reader-source-jpdb-color: var(--jpdb-reader-jpdb-readable, var(--jpdb-reader-jpdb-color, currentColor));
  --jpdb-reader-source-jpdb-decoration: var(--jpdb-reader-jpdb-color, transparent);
  --jpdb-reader-source-jpdb-soft: var(--jpdb-reader-jpdb-soft, transparent);
  --jpdb-reader-source-jpdb-highlight: var(--jpdb-reader-jpdb-highlight, var(--jpdb-reader-source-jpdb-soft, transparent));
  --jpdb-reader-source-anki-color: var(--jpdb-reader-anki-readable, var(--jpdb-reader-anki-color, currentColor));
  --jpdb-reader-source-anki-decoration: var(--jpdb-reader-anki-color, transparent);
  --jpdb-reader-source-anki-soft: var(--jpdb-reader-anki-soft, transparent);
  --jpdb-reader-source-anki-highlight: var(--jpdb-reader-anki-highlight, var(--jpdb-reader-source-anki-soft, transparent));
  --jpdb-reader-source-pitch-color: var(--jpdb-reader-pitch-readable, var(--jpdb-reader-pitch-color, currentColor));
  --jpdb-reader-source-pitch-decoration: transparent;
  --jpdb-reader-source-pitch-soft: var(--jpdb-reader-pitch-soft, var(--jpdb-reader-pitch-unknown-soft, transparent));
  --jpdb-reader-source-pitch-highlight: var(--jpdb-reader-pitch-highlight, var(--jpdb-reader-source-pitch-soft, transparent));
  --jpdb-reader-source-pitch-highlight-shadow: var(--jpdb-reader-pitch-highlight-shadow, none);
  position: relative;
  display: inline !important;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal !important;
  border-radius: 3px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  text-decoration-line: underline !important;
  text-decoration-style: var(--jpdb-reader-word-underline-style) !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: var(--jpdb-reader-word-underline-thickness) !important;
  text-underline-offset: var(--jpdb-reader-word-underline-offset) !important;
  text-decoration-skip-ink: none !important;
  -webkit-text-fill-color: currentColor;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.jpdb-reader-word::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline: var(--jpdb-reader-word-inline-gap);
  inset-block-end: 0;
  border-block-end: var(--jpdb-reader-word-underline-thickness) var(--jpdb-reader-word-underline-style) var(--jpdb-reader-word-underline, transparent);
  pointer-events: none;
}

/* Long annotated prose may wrap even when the host says nowrap — but never
   inside passive UI controls (buttons, chips, tabs): their nowrap is a layout
   contract, and re-enabling wrapping stacks CJK labels one character per line
   (m.youtube action chips). */
.jpdb-reader-word.jpdb-reader-scan-word:not(.jpdb-reader-passive-word) {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere !important;
  line-break: auto;
  /* Scan words keep the absolutely-positioned ::after underline like every other
     reader word, so the pitch underline sits exactly on the highlight box's
     bottom edge and stays within its inline bounds (requested look; matches the
     subtitle treatment) rather than floating full-width above the baseline.
     Trade-off: a single token that wraps mid-word underlines only its first line
     box — rare for Japanese tokens and preferable to the previous floating
     native underline. */
}

.jpdb-reader-word.jpdb-reader-scan-word ruby,
.jpdb-reader-word.jpdb-reader-scan-word rt {
  white-space: normal;
}

/* Text mirrors preserve app-owned DOM/layout. Let surrounding mirrored text wrap
   as the host does, but keep each rendered word atomic so short YouTube metadata
   and action labels do not collapse into one-character vertical stacks. */
.jpdb-reader-text-mirror .jpdb-reader-word.jpdb-reader-scan-word {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal !important;
  line-break: strict;
  /* Text-mirror scan words stay nowrap (above), so they never split mid-token.
     Keep the gapped ::after overlay and its transparent native underline so
     short host labels (YouTube metadata/action chips) are unchanged. */
  text-decoration-color: transparent !important;
}
.jpdb-reader-text-mirror .jpdb-reader-word.jpdb-reader-scan-word::after {
  content: "";
}

.jpdb-reader-control-text-mirror {
  display: inline-flex;
  align-items: center;
  max-width: min(32ch, 100%);
  margin-inline-start: 0.35em;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
  pointer-events: auto;
  user-select: text;
  -webkit-user-select: text;
  opacity: 0.88;
}

input[data-jpdb-reader-control-placeholder-hidden="true"]::placeholder,
textarea[data-jpdb-reader-control-placeholder-hidden="true"]::placeholder {
  color: transparent !important;
  opacity: 0 !important;
  -webkit-text-fill-color: transparent !important;
}

.jpdb-reader-control-text-mirror[data-jpdb-reader-control-mirror-kind="placeholder"] {
  position: absolute;
  z-index: 2;
  display: block;
  align-items: normal;
  max-width: none;
  margin-inline-start: 0;
  vertical-align: baseline;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.jpdb-reader-control-text-mirror .jpdb-reader-word.jpdb-reader-scan-word {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal !important;
  line-break: strict;
  text-decoration-color: transparent !important;
}

.jpdb-reader-control-text-mirror .jpdb-reader-word.jpdb-reader-scan-word::after {
  content: "";
}

.jpdb-reader-text-mirror .jpdb-reader-word.jpdb-reader-scan-word ruby,
.jpdb-reader-text-mirror .jpdb-reader-word.jpdb-reader-scan-word rt,
.jpdb-reader-control-text-mirror .jpdb-reader-word.jpdb-reader-scan-word ruby,
.jpdb-reader-control-text-mirror .jpdb-reader-word.jpdb-reader-scan-word rt {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Hosted docs cards are links, so their annotated text is passive; still let
   the card prose wrap inside its own grid cell. */
.yomu-link-card .jpdb-reader-word.jpdb-reader-scan-word,
.yomu-install-step-link .jpdb-reader-word.jpdb-reader-scan-word {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere !important;
  line-break: auto;
}

.yomu-link-card .jpdb-reader-word.jpdb-reader-scan-word ruby,
.yomu-link-card .jpdb-reader-word.jpdb-reader-scan-word rt,
.yomu-install-step-link .jpdb-reader-word.jpdb-reader-scan-word ruby,
.yomu-install-step-link .jpdb-reader-word.jpdb-reader-scan-word rt {
  white-space: normal;
  overflow-wrap: anywhere;
}

.jpdb-reader-word.jpdb-reader-passive-word {
  cursor: inherit;
}

/* Touch reading without a stylus (Canna feedback): manga text boxes pack small,
   dense words that are hard to tap with a fingertip. On coarse pointers, grow
   each word's tap target with a transparent, layout-neutral hit expander so a
   tap near the word still resolves to it. Scoped to mokuro-style reader boxes
   to avoid disturbing normal prose. any-pointer:coarse so an iPad with an Apple
   Pencil (pointer:fine + hover:hover) still gets the larger tap targets. */
@media (any-pointer: coarse) {
  .jpdb-reader-word:not(.jpdb-reader-passive-word)::before {
    content: "";
    position: absolute;
    inset: -0.36em -0.06em;
    z-index: 0;
    pointer-events: auto;
  }

  .textBox .jpdb-reader-word::before,
  #pagesContainer .jpdb-reader-word::before,
  #manga-panel .jpdb-reader-word::before {
    inset: -0.4em -0.18em;
  }
}

.jpdb-reader-word.jpdb-reader-i-plus-one {
  --jpdb-reader-mining-insight-color: color-mix(in srgb, var(--jpdb-reader-state-hard) 42%, transparent);
  background-color: transparent !important;
  background-image: linear-gradient(transparent 58%, var(--jpdb-reader-mining-insight-color) 58%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) var(--jpdb-reader-word-highlight-block-size) !important;
}

/* Deck members previously used a CSS double underline (two parallel lines) as a
   "this word is in your deck" cue. It read as a rendering glitch (and competed
   with the pitch-accent meaning the underline already carries), so the underline
   stays a single solid line; deck state remains conveyed by the word's state
   color/highlight. */

.jpdb-reader-word:hover,
.jpdb-reader-word:focus {
  background-color: transparent !important;
  background-image:
    linear-gradient(var(--jpdb-reader-hover), var(--jpdb-reader-hover)),
    linear-gradient(
      var(--jpdb-reader-word-accessible-highlight, var(--jpdb-reader-word-highlight-source, transparent)),
      var(--jpdb-reader-word-accessible-highlight, var(--jpdb-reader-word-highlight-source, transparent))
    ) !important;
  background-position: center, center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size:
    var(--jpdb-reader-word-highlight-size) var(--jpdb-reader-word-highlight-block-size),
    var(--jpdb-reader-word-highlight-size) var(--jpdb-reader-word-highlight-block-size) !important;
  box-shadow: var(--jpdb-reader-word-highlight-shadow-source, none);
  outline: none;
}

.jpdb-reader-word.jpdb-reader-keyboard-active {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-accent-soft), var(--jpdb-reader-accent-soft)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) var(--jpdb-reader-word-highlight-block-size) !important;
  outline: 2px solid var(--jpdb-reader-accent);
  outline-offset: 2px;
}

.jpdb-reader-word:is(.jpdb-new, .jpdb-in-deck) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-new);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-new-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-new-soft);
}
.jpdb-reader-word.jpdb-not-in-deck {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-not-in-deck);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-not-in-deck-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-not-in-deck-soft);
}
.jpdb-reader-word:is(.jpdb-learning, .jpdb-young) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-learning-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-learning-soft);
}
.jpdb-reader-word:is(.jpdb-known, .jpdb-mature, .jpdb-mastered, .jpdb-never-forget, .jpdb-redundant) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-known);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-known-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-known-soft);
}
.jpdb-reader-word.jpdb-due {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-due);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-due-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-due-soft);
}
.jpdb-reader-word.jpdb-failed {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-failed);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-failed-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-failed-soft);
}
.jpdb-reader-word.jpdb-suspended {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-ignored-soft);
}
.jpdb-reader-word:is(.jpdb-blacklisted, .jpdb-locked) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-ignored-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-ignored-soft);
  opacity: 0.82 !important;
}
.jpdb-reader-word.jpdb-frequent {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-frequent);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-frequent-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-frequent-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-frequent);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-frequent-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-frequent-soft);
  --jpdb-reader-word-underline-style: dotted;
  text-decoration-style: dotted !important;
}
.jpdb-reader-word.jpdb-unparsed {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-unparsed-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-unparsed-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-unparsed-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-unparsed-soft);
  --jpdb-reader-word-underline-style: dashed;
  text-decoration-style: dashed !important;
}
.jpdb-reader-word.anki-new {
  --jpdb-reader-anki-color: var(--jpdb-reader-state-new);
  --jpdb-reader-anki-readable: var(--jpdb-reader-state-new-readable);
  --jpdb-reader-anki-soft: var(--jpdb-reader-state-new-soft);
}
.jpdb-reader-word.anki-learning {
  --jpdb-reader-anki-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-anki-readable: var(--jpdb-reader-state-learning-readable);
  --jpdb-reader-anki-soft: var(--jpdb-reader-state-learning-soft);
}
.jpdb-reader-word.anki-known {
  --jpdb-reader-anki-color: var(--jpdb-reader-state-known);
  --jpdb-reader-anki-readable: var(--jpdb-reader-state-known-readable);
  --jpdb-reader-anki-soft: var(--jpdb-reader-state-known-soft);
}
.jpdb-reader-word.anki-due {
  --jpdb-reader-anki-color: var(--jpdb-reader-state-due);
  --jpdb-reader-anki-readable: var(--jpdb-reader-state-due-readable);
  --jpdb-reader-anki-soft: var(--jpdb-reader-state-due-soft);
}
.jpdb-reader-word.anki-failed {
  --jpdb-reader-anki-color: var(--jpdb-reader-state-failed);
  --jpdb-reader-anki-readable: var(--jpdb-reader-state-failed-readable);
  --jpdb-reader-anki-soft: var(--jpdb-reader-state-failed-soft);
}
.jpdb-reader-word.anki-suspended {
  --jpdb-reader-anki-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-anki-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-anki-soft: var(--jpdb-reader-state-ignored-soft);
}
.jpdb-reader-word:is(.jpdb-new, .jpdb-in-deck, .anki-new) {
  --jpdb-reader-status-color: var(--jpdb-reader-state-new);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-new-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-new-soft);
}
.jpdb-reader-word.jpdb-not-in-deck {
  --jpdb-reader-status-color: var(--jpdb-reader-state-not-in-deck);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-not-in-deck-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-not-in-deck-soft);
}
.jpdb-reader-word:is(.jpdb-learning, .jpdb-young, .anki-learning) {
  --jpdb-reader-status-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-learning-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-learning-soft);
}
.jpdb-reader-word:is(.jpdb-known, .jpdb-mature, .jpdb-mastered, .jpdb-never-forget, .jpdb-redundant, .anki-known) {
  --jpdb-reader-status-color: var(--jpdb-reader-state-known);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-known-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-known-soft);
}
.jpdb-reader-word:is(.jpdb-due, .anki-due) {
  --jpdb-reader-status-color: var(--jpdb-reader-state-due);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-due-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-due-soft);
}
.jpdb-reader-word:is(.jpdb-failed, .anki-failed) {
  --jpdb-reader-status-color: var(--jpdb-reader-state-failed);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-failed-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-failed-soft);
}
.jpdb-reader-word:is(.jpdb-suspended, .anki-suspended) {
  --jpdb-reader-status-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-ignored-soft);
}
.jpdb-reader-word:is(
  .jpdb-new,
  .jpdb-not-in-deck,
  .jpdb-suspended,
  .jpdb-in-deck,
  .jpdb-learning,
  .jpdb-young,
  .jpdb-known,
  .jpdb-mature,
  .jpdb-mastered,
  .jpdb-never-forget,
  .jpdb-redundant,
  .jpdb-due,
  .jpdb-failed,
  .jpdb-blacklisted,
  .jpdb-locked,
  .jpdb-frequent,
  .jpdb-unparsed
) {
  --jpdb-reader-jpdb-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-jpdb-color) 36%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word.jpdb-not-in-deck {
  --jpdb-reader-jpdb-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-jpdb-color) 20%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word:is(
  .anki-new,
  .anki-suspended,
  .anki-learning,
  .anki-known,
  .anki-due,
  .anki-failed
) {
  --jpdb-reader-anki-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-anki-color) 36%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word:is(
  .jpdb-new,
  .jpdb-not-in-deck,
  .jpdb-suspended,
  .jpdb-in-deck,
  .jpdb-learning,
  .jpdb-young,
  .jpdb-known,
  .jpdb-mature,
  .jpdb-mastered,
  .jpdb-never-forget,
  .jpdb-redundant,
  .jpdb-due,
  .jpdb-failed,
  .jpdb-blacklisted,
  .jpdb-locked,
  .jpdb-frequent,
  .jpdb-unparsed,
  .anki-new,
  .anki-suspended,
  .anki-learning,
  .anki-known,
  .anki-due,
  .anki-failed
) {
  --jpdb-reader-status-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-status-color) 36%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word.jpdb-not-in-deck {
  --jpdb-reader-status-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-status-color) 20%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word:is(.jiten-new, .jiten-in-deck) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-new);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-new-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-new-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-new);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-new-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-new-soft);
}
.jpdb-reader-word.jiten-not-in-deck {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-not-in-deck);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-not-in-deck-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-not-in-deck-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-not-in-deck);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-not-in-deck-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-not-in-deck-soft);
}
.jpdb-reader-word:is(.jiten-learning, .jiten-young) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-learning-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-learning-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-learning-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-learning-soft);
}
.jpdb-reader-word:is(.jiten-known, .jiten-mature, .jiten-mastered, .jiten-never-forget, .jiten-redundant) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-known);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-known-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-known-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-known);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-known-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-known-soft);
}
.jpdb-reader-word.jiten-due {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-due);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-due-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-due-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-due);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-due-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-due-soft);
}
.jpdb-reader-word.jiten-failed {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-failed);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-failed-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-failed-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-failed);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-failed-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-failed-soft);
}
.jpdb-reader-word:is(.jiten-suspended, .jiten-blacklisted, .jiten-locked) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-ignored-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-ignored-soft);
}
.jpdb-reader-word.jiten-frequent {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-frequent);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-frequent-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-frequent-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-frequent);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-frequent-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-frequent-soft);
}
.jpdb-reader-word.jiten-unparsed {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-unparsed-readable);
  --jpdb-reader-jpdb-soft: var(--jpdb-reader-state-unparsed-soft);
  --jpdb-reader-status-color: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-unparsed-readable);
  --jpdb-reader-status-soft: var(--jpdb-reader-state-unparsed-soft);
}
.jpdb-reader-word:is(
  .jiten-new,
  .jiten-not-in-deck,
  .jiten-suspended,
  .jiten-in-deck,
  .jiten-learning,
  .jiten-young,
  .jiten-known,
  .jiten-mature,
  .jiten-mastered,
  .jiten-never-forget,
  .jiten-redundant,
  .jiten-due,
  .jiten-failed,
  .jiten-blacklisted,
  .jiten-locked,
  .jiten-frequent,
  .jiten-unparsed
) {
  --jpdb-reader-jpdb-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-jpdb-color) 36%,
    var(--jpdb-reader-highlight-backdrop)
  );
  --jpdb-reader-status-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-status-color) 36%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word.jiten-not-in-deck {
  --jpdb-reader-jpdb-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-jpdb-color) 20%,
    var(--jpdb-reader-highlight-backdrop)
  );
  --jpdb-reader-status-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-status-color) 20%,
    var(--jpdb-reader-highlight-backdrop)
  );
}
.jpdb-reader-word.jpdb-pitch-heiban {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-heiban);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-heiban-readable);
  --jpdb-reader-pitch-soft: var(--jpdb-reader-pitch-heiban-soft);
}
.jpdb-reader-word.jpdb-pitch-atamadaka {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-atamadaka);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-atamadaka-readable);
  --jpdb-reader-pitch-soft: var(--jpdb-reader-pitch-atamadaka-soft);
}
.jpdb-reader-word.jpdb-pitch-nakadaka {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-nakadaka);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-nakadaka-readable);
  --jpdb-reader-pitch-soft: var(--jpdb-reader-pitch-nakadaka-soft);
}
.jpdb-reader-word.jpdb-pitch-odaka {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-odaka);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-odaka-readable);
  --jpdb-reader-pitch-soft: var(--jpdb-reader-pitch-odaka-soft);
}
.jpdb-reader-word.jpdb-pitch-kifuku {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-kifuku);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-kifuku-readable);
  --jpdb-reader-pitch-soft: var(--jpdb-reader-pitch-kifuku-soft);
}
.jpdb-reader-word.jpdb-pitch-unknown {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-unknown);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-unknown-readable);
  --jpdb-reader-pitch-soft: var(--jpdb-reader-pitch-unknown-soft, transparent);
}
/* The card headword (.jpdb-reader-spelling) reuses the same pitch colors so it
   shows the pitch-accent underline like words on the page; previously the card
   header only rendered the pitch graph and never the underline. */
.jpdb-reader-spelling.jpdb-pitch-heiban { --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-heiban); }
.jpdb-reader-spelling.jpdb-pitch-atamadaka { --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-atamadaka); }
.jpdb-reader-spelling.jpdb-pitch-nakadaka { --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-nakadaka); }
.jpdb-reader-spelling.jpdb-pitch-odaka { --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-odaka); }
.jpdb-reader-spelling.jpdb-pitch-kifuku { --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-kifuku); }
.jpdb-reader-word-underline-pitch .jpdb-reader-spelling:is(
  .jpdb-pitch-heiban,
  .jpdb-pitch-atamadaka,
  .jpdb-pitch-nakadaka,
  .jpdb-pitch-odaka,
  .jpdb-pitch-kifuku
) {
  text-decoration: underline;
  text-decoration-color: var(--jpdb-reader-pitch-color, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}
.jpdb-reader-word:is(
  .jpdb-pitch-heiban,
  .jpdb-pitch-atamadaka,
  .jpdb-pitch-nakadaka,
  .jpdb-pitch-odaka,
  .jpdb-pitch-kifuku
) {
  --jpdb-reader-source-pitch-decoration: var(--jpdb-reader-pitch-color, transparent);
  --jpdb-reader-pitch-highlight: color-mix(
    in srgb,
    var(--jpdb-reader-pitch-color) 36%,
    var(--jpdb-reader-highlight-backdrop)
  );
  --jpdb-reader-pitch-highlight-shadow: var(--jpdb-reader-highlight-shadow);
}
.jpdb-reader-word-highlight-status .jpdb-reader-word {
  --jpdb-reader-word-highlight-source: var(--jpdb-reader-source-status-highlight, transparent);
}
.jpdb-reader-word-highlight-jpdb .jpdb-reader-word {
  --jpdb-reader-word-highlight-source: var(--jpdb-reader-source-jpdb-highlight, transparent);
}
.jpdb-reader-word-highlight-anki .jpdb-reader-word {
  --jpdb-reader-word-highlight-source: var(--jpdb-reader-source-anki-highlight, transparent);
}
.jpdb-reader-word-highlight-pitch .jpdb-reader-word {
  --jpdb-reader-word-highlight-source: var(--jpdb-reader-source-pitch-highlight, transparent);
  --jpdb-reader-word-highlight-shadow-source: var(--jpdb-reader-source-pitch-highlight-shadow, none);
}
:is(
  .jpdb-reader-word-highlight-status,
  .jpdb-reader-word-highlight-jpdb,
  .jpdb-reader-word-highlight-anki,
  .jpdb-reader-word-highlight-pitch
) .jpdb-reader-word {
  --jpdb-reader-word-highlight-paint: var(
    --jpdb-reader-word-accessible-highlight,
    var(--jpdb-reader-word-highlight-source, transparent)
  );
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) var(--jpdb-reader-word-highlight-block-size) !important;
  box-shadow: var(--jpdb-reader-word-highlight-shadow-source, none);
  color: var(
    --jpdb-reader-word-accessible-color,
    var(--jpdb-reader-word-color-source, currentColor)
  ) !important;
  -webkit-text-fill-color: var(
    --jpdb-reader-word-accessible-color,
    var(--jpdb-reader-word-color-source, currentColor)
  );
  text-shadow: var(--jpdb-reader-word-contrast-shadow, none);
}
.jpdb-reader-word-underline-status .jpdb-reader-word {
  --jpdb-reader-word-decoration-source: var(--jpdb-reader-source-status-decoration, transparent);
}
.jpdb-reader-word-underline-jpdb .jpdb-reader-word {
  --jpdb-reader-word-decoration-source: var(--jpdb-reader-source-jpdb-decoration, transparent);
}
.jpdb-reader-word-underline-anki .jpdb-reader-word {
  --jpdb-reader-word-decoration-source: var(--jpdb-reader-source-anki-decoration, transparent);
}
.jpdb-reader-word-underline-pitch .jpdb-reader-word {
  --jpdb-reader-word-decoration-source: var(--jpdb-reader-source-pitch-decoration, transparent);
}
:is(
  .jpdb-reader-word-underline-status,
  .jpdb-reader-word-underline-jpdb,
  .jpdb-reader-word-underline-anki,
  .jpdb-reader-word-underline-pitch
) .jpdb-reader-word {
  --jpdb-reader-word-underline: var(--jpdb-reader-word-accessible-underline, var(--jpdb-reader-word-decoration-source, transparent));
}
.jpdb-reader-word-text-status .jpdb-reader-word {
  --jpdb-reader-word-color-source: var(--jpdb-reader-source-status-color, currentColor);
}
.jpdb-reader-word-text-jpdb .jpdb-reader-word {
  --jpdb-reader-word-color-source: var(--jpdb-reader-source-jpdb-color, currentColor);
}
.jpdb-reader-word-text-anki .jpdb-reader-word {
  --jpdb-reader-word-color-source: var(--jpdb-reader-source-anki-color, currentColor);
}
.jpdb-reader-word-text-pitch .jpdb-reader-word {
  --jpdb-reader-word-color-source: var(--jpdb-reader-source-pitch-color, currentColor);
}
:is(
  .jpdb-reader-word-text-status,
  .jpdb-reader-word-text-jpdb,
  .jpdb-reader-word-text-anki,
  .jpdb-reader-word-text-pitch
) .jpdb-reader-word {
  color: var(--jpdb-reader-word-accessible-color, var(--jpdb-reader-word-color-source, currentColor)) !important;
  -webkit-text-fill-color: var(--jpdb-reader-word-accessible-color, var(--jpdb-reader-word-color-source, currentColor));
  text-shadow: var(--jpdb-reader-word-contrast-shadow, none);
}
:is(.jpdb-reader-word-text-status, .jpdb-reader-word-text-jpdb, .jpdb-reader-word-text-anki, .jpdb-reader-word-text-pitch)
  .jpdb-reader-word:is(:hover, :focus, .jpdb-reader-keyboard-active) {
  color: var(--jpdb-reader-word-accessible-color, var(--jpdb-reader-word-color-source, currentColor)) !important;
  -webkit-text-fill-color: var(--jpdb-reader-word-accessible-color, var(--jpdb-reader-word-color-source, currentColor));
}
:is(.jpdb-reader-word-highlight-pitch, .jpdb-reader-word-underline-pitch, .jpdb-reader-word-text-pitch) .jpdb-reader-word {
  opacity: 1 !important;
}
.jpdb-reader-word.jpdb-reader-has-furi,
:is(
  p,
  li,
  dd,
  dt,
  figcaption,
  blockquote,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  span,
  a,
  button,
  summary,
  label
):has(> .jpdb-reader-word.jpdb-reader-has-furi)
  > .jpdb-reader-word {
  line-height: 2.05;
}
.jpdb-reader-furi {
  font-size: 0.52em;
  color: var(--jpdb-reader-furi-accessible-color, var(--jpdb-reader-muted)) !important;
  line-height: 1;
  user-select: none;
}
.jpdb-reader-word ruby {
  position: static !important;
  display: ruby !important;
  ruby-align: center !important;
  ruby-position: over !important;
  line-height: 1;
  vertical-align: baseline !important;
  text-decoration-line: inherit !important;
  text-decoration-style: inherit !important;
  text-decoration-color: inherit !important;
  text-decoration-thickness: inherit !important;
  text-underline-offset: inherit !important;
}
.jpdb-reader-word rt.jpdb-reader-furi {
  display: ruby-text !important;
}
.jpdb-reader-ruby-base {
  display: inline;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.jpdb-reader-word rp {
  display: none;
}
.jpdb-reader-word rt {
  position: static;
  left: auto;
  bottom: auto;
  display: ruby-text;
  transform: none;
  white-space: nowrap;
  pointer-events: none;
  text-decoration: none !important;
  ruby-align: center;
  line-height: 1;
  text-align: center;
}
.jpdb-reader-word.jpdb-reader-scan-word rt.jpdb-reader-furi {
  white-space: normal;
  overflow-wrap: anywhere;
}
/* User feedback: the word contrast shadow (a white glow + a 2px dark drop) bleeds
   into the thin furigana strokes and makes the reading harder to read. Furigana
   takes a single tight outline instead — enough contrast on busy manga
   backgrounds without the muddy glow. Tunable via --jpdb-reader-furigana-shadow. */
.jpdb-reader-word rt {
  text-shadow: var(
    --jpdb-reader-furigana-shadow,
    0 0 1px color-mix(in srgb, var(--jpdb-reader-black) 55%, transparent)
  );
}
:is(.jpdb-reader-theme-light, .yomu-page-theme-light) .jpdb-reader-word rt {
  text-shadow: var(--jpdb-reader-furigana-shadow, none);
}
/* UT-47: per-group furigana hiding (settings: furiganaHiddenStateGroups).
   The classes apply on the page root AND on the settings preview container,
   so the preview restyles live. Example targets keep their ruby. */
.yomu-furi-hide-known
  .jpdb-reader-word:is(.jpdb-known, .jpdb-mature, .jpdb-mastered, .jpdb-never-forget, .jpdb-redundant, .jiten-known, .jiten-mature, .jiten-mastered, .jiten-never-forget, .jiten-redundant, .anki-known):not(.jpdb-reader-example-target)
  .jpdb-reader-furi {
  display: none;
}
.yomu-furi-hide-due
  .jpdb-reader-word:is(.jpdb-due, .jiten-due, .anki-due):not(.jpdb-reader-example-target)
  .jpdb-reader-furi {
  display: none;
}
.yomu-furi-hide-failed
  .jpdb-reader-word:is(.jpdb-failed, .jiten-failed, .anki-failed):not(.jpdb-reader-example-target)
  .jpdb-reader-furi {
  display: none;
}
.yomu-furi-hide-learning
  .jpdb-reader-word:is(.jpdb-learning, .jpdb-young, .jiten-learning, .jiten-young, .anki-learning):not(.jpdb-reader-example-target)
  .jpdb-reader-furi {
  display: none;
}
.yomu-furi-hide-new
  .jpdb-reader-word:is(.jpdb-new, .jpdb-not-in-deck, .jpdb-in-deck, .jiten-new, .anki-new):not(.jpdb-reader-example-target)
  .jpdb-reader-furi {
  display: none;
}

/* UT-47: hover-only furigana — ruby is rendered but only visible while the
   word is hovered (visibility keeps the line height stable). */
.yomu-furi-hover .jpdb-reader-word:not(:hover) .jpdb-reader-furi {
  visibility: hidden;
}

/* UT-47: "only colour new words" — every non-new word inherits the page's
   own colour and loses Yomu underline/highlight marking. */
.yomu-word-color-new-only
  .jpdb-reader-word:not(.jpdb-new, .jpdb-not-in-deck, .jpdb-in-deck, .jiten-new, .anki-new, .jpdb-reader-example-target) {
  --jpdb-reader-word-underline: transparent;
  color: inherit !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.jpdb-ocr-video-frame {
  position: fixed;
  z-index: 2147483642;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  object-fit: fill;
}

.jpdb-ocr-video-frame-pending {
  opacity: 0.001;
  pointer-events: none !important;
}

/* The status dot sets its own opacity:1, which (equal specificity, later in
   source) would otherwise beat the pending gate above; this compound selector
   raises specificity so a gated status spinner stays hidden during OCR. The
   image and resume controls have no competing opacity, so the plain rule gates
   them. */
.jpdb-ocr-video-frame-status.jpdb-ocr-video-frame-pending {
  opacity: 0.001;
}

/* Canvas-reader snapshot (e.g. BookWalker). The real <canvas> already shows the
   page, so this capture anchor stays invisible — it only provides pixels for OCR
   and a rect for overlay alignment. pointer-events:none lets the host viewer's
   own page-turn taps/swipes pass straight through. */
.jpdb-ocr-canvas-frame,
.jpdb-ocr-background-frame {
  position: fixed;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  object-fit: fill;
}

.jpdb-ocr-video-frame-resume {
  pointer-events: auto;
  cursor: pointer;
}

.jpdb-ocr-video-frame-resume-icon {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

.jpdb-ocr-video-frame-status {
  position: fixed;
  z-index: 2147483644;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  max-width: 24px !important;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;
  transition: opacity 360ms ease;
}

/* "ready" dot flashes briefly then fades out (see OCR_STATUS_FADE_MS). */
.jpdb-ocr-video-frame-status-fade-out {
  opacity: 0;
}

.jpdb-ocr-video-frame-status::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--jpdb-reader-accent, #7c9cff);
}

.jpdb-ocr-video-frame-status-loading::before {
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--jpdb-reader-accent, #7c9cff) 28%, transparent);
  border-top-color: var(--jpdb-reader-accent, #7c9cff);
  background: transparent;
  animation: jpdb-ocr-video-frame-status-spin 850ms linear infinite;
}

.jpdb-ocr-video-frame-status-ready::before {
  background: var(--jpdb-reader-state-known, #31c48d);
}

.jpdb-ocr-video-frame-status-empty,
.jpdb-ocr-video-frame-status-failed {
  color: var(--jpdb-reader-muted, #a8b0bd);
}

.jpdb-ocr-video-frame-status-empty::before {
  background: var(--jpdb-reader-muted, #a8b0bd);
}

.jpdb-ocr-video-frame-status-failed::before {
  background: var(--jpdb-reader-state-failed, #f87171);
}

@keyframes jpdb-ocr-video-frame-status-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jpdb-ocr-video-frame-status-loading::before {
    animation: none;
  }

  .jpdb-ocr-video-frame-status {
    transition: none;
  }
}

.jpdb-subtitle-player.jpdb-ocr-video-frame-resume-active .jpdb-subtitle-rail {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.jpdb-subtitle-rail .jpdb-ocr-video-frame-resume {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 50%, var(--jpdb-reader-border)) !important;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface)) !important;
  color: var(--jpdb-reader-text);
}

.jpdb-ocr-video-frame-resume-fallback {
  position: fixed;
  transform: translateX(-100%);
  z-index: 2147483644;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--jpdb-reader-border, rgba(255, 255, 255, 0.22));
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface, rgb(15, 18, 24)) 86%, transparent);
  color: var(--jpdb-reader-text, #fff);
  box-shadow: 0 12px 30px var(--jpdb-reader-shadow, rgba(0, 0, 0, 0.35));
  backdrop-filter: blur(14px);
  font: 700 12px/1 var(--jpdb-reader-font, system-ui);
}

.jpdb-ocr-video-frame-resume-fallback:hover,
.jpdb-ocr-video-frame-resume-fallback:focus-visible {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent, #7c9cff) 60%, var(--jpdb-reader-border, rgba(255, 255, 255, 0.22)));
  background: color-mix(in srgb, var(--jpdb-reader-accent, #7c9cff) 18%, var(--jpdb-reader-surface, rgb(15, 18, 24)));
}

.jpdb-ocr-video-frame-resume:focus-visible {
  outline: 2px solid var(--jpdb-reader-accent, #7c9cff);
  outline-offset: 2px;
}

.jpdb-ocr-layer {
  position: fixed;
  display: block;
  z-index: 2147483643;
  pointer-events: none;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout style;
}
.jpdb-ocr-layer[hidden] {
  display: none;
}
.jpdb-ocr-line {
  pointer-events: auto;
  box-sizing: border-box;
  font-family: var(--jpdb-reader-font);
  -webkit-tap-highlight-color: transparent;
}
.jpdb-ocr-line {
  position: absolute;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  min-width: 0;
  min-height: 0;
  padding: var(--jpdb-ocr-pad-top, 3px) var(--jpdb-ocr-pad-x, 5px)
    var(--jpdb-ocr-pad-bottom, 3px);
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: transparent;
  text-shadow: none;
  text-decoration: none !important;
  font-weight: 800;
  line-height: 1;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: none;
  opacity: 1;
  user-select: text;
  cursor: text;
  touch-action: manipulation;
}
.jpdb-ocr-line-text {
  display: inline-flex;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
  flex-wrap: nowrap;
  white-space: nowrap;
  max-width: none;
  overflow-wrap: normal;
}
.jpdb-ocr-line[data-vertical="true"] {
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
}
.jpdb-ocr-line[data-vertical="true"] .jpdb-ocr-line-text {
  white-space: normal;
  flex-wrap: wrap;
}
.jpdb-ocr-line-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) {
  color: var(--jpdb-ocr-text-color, var(--jpdb-reader-video-text));
  text-shadow:
    0 2px 2px var(--jpdb-ocr-outline-color, var(--jpdb-reader-video-outline)),
    0 0 3px var(--jpdb-ocr-outline-color, var(--jpdb-reader-video-outline)),
    0 0 10px var(--jpdb-ocr-outline-color, var(--jpdb-reader-video-outline));
  background: var(--jpdb-ocr-background-active-rgba, var(--jpdb-reader-ocr-active-bg));
  border-color: var(--jpdb-reader-ocr-active-border);
  box-shadow:
    0 10px 24px var(--jpdb-reader-shadow),
    inset 0 0 0 1px var(--jpdb-reader-ocr-active-inset);
  outline: none;
  z-index: 2;
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) {
  color: var(--jpdb-reader-text);
  text-shadow: none;
  background: color-mix(
    in srgb,
    color-mix(
      in srgb,
      var(--jpdb-reader-surface) 92%,
      var(--jpdb-reader-accent) 8%
    ) 82%,
    transparent
  );
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 24%,
    var(--jpdb-reader-border)
  );
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--jpdb-reader-shadow) 70%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-white) 68%, transparent);
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light)
  .jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active)
  .jpdb-reader-word {
  --jpdb-reader-subtitle-fallback: var(--jpdb-reader-text);
  color: var(
    --jpdb-reader-word-accessible-color,
    var(--jpdb-reader-word-color-source, var(--jpdb-reader-text))
  ) !important;
  text-shadow: none;
}
.jpdb-ocr-layer .jpdb-ocr-line .jpdb-reader-word {
  background-color: transparent !important;
  background-image: none !important;
  --jpdb-reader-word-underline: transparent;
  --jpdb-reader-word-underline-offset: 0.12em;
  --jpdb-reader-word-underline-thickness: 0.12em;
  box-shadow: none !important;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0.12em !important;
  text-underline-offset: 0.12em !important;
  color: inherit !important;
  pointer-events: auto;
  cursor: pointer;
  line-height: 1 !important;
}
.jpdb-ocr-layer .jpdb-ocr-line .jpdb-reader-word:is(
  .jpdb-pitch-heiban,
  .jpdb-pitch-atamadaka,
  .jpdb-pitch-nakadaka,
  .jpdb-pitch-odaka,
  .jpdb-pitch-kifuku
) {
  --jpdb-reader-source-pitch-decoration: var(
    --jpdb-reader-pitch-color,
    currentColor
  );
}
.jpdb-ocr-layer .jpdb-ocr-line .jpdb-reader-word.jpdb-reader-has-furi {
  line-height: 1 !important;
}
.jpdb-ocr-layer .jpdb-ocr-line .jpdb-reader-word.jpdb-reader-has-furi .jpdb-ocr-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
}
.jpdb-ocr-layer .jpdb-ocr-line[data-has-furi="true"] .jpdb-reader-word {
  display: inline-flex;
  align-items: flex-end;
}
.jpdb-ocr-line .jpdb-ocr-plain {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
  white-space: pre;
}
.jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) .jpdb-reader-word {
  --jpdb-reader-word-underline: var(--jpdb-reader-word-decoration-source, transparent);
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-source, transparent), var(--jpdb-reader-word-highlight-source, transparent)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  box-shadow: var(--jpdb-reader-word-highlight-shadow-source, none) !important;
  text-decoration-color: var(--jpdb-reader-word-decoration-source, transparent) !important;
  color: var(--jpdb-reader-word-accessible-color, var(--jpdb-reader-word-color-source, var(--jpdb-ocr-text-color, var(--jpdb-reader-video-text)))) !important;
  -webkit-text-fill-color: var(--jpdb-reader-word-accessible-color, var(--jpdb-reader-word-color-source, var(--jpdb-ocr-text-color, var(--jpdb-reader-video-text))));
}
.jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) .jpdb-reader-word:is(
  .jpdb-pitch-heiban,
  .jpdb-pitch-atamadaka,
  .jpdb-pitch-nakadaka,
  .jpdb-pitch-odaka,
  .jpdb-pitch-kifuku
) {
  --jpdb-reader-source-pitch-decoration: var(--jpdb-reader-pitch-color, currentColor);
}
.jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) .jpdb-reader-word.jpdb-reader-has-furi {
  background: transparent !important;
  box-shadow: none !important;
}
.jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) .jpdb-reader-word.jpdb-reader-has-furi .jpdb-ocr-ruby-base {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-source, transparent), var(--jpdb-reader-word-highlight-source, transparent)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  border-radius: 3px;
  box-shadow: var(--jpdb-reader-word-highlight-shadow-source, none) !important;
}
.jpdb-ocr-ruby {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  padding-top: 0.5em;
  line-height: 1;
  vertical-align: baseline;
}
.jpdb-ocr-ruby-base {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}
.jpdb-ocr-ruby-base-text {
  display: inline-flex;
  align-items: flex-end;
  line-height: 1;
}
.jpdb-ocr-furi {
  position: absolute;
  top: -1.18em;
  left: 50%;
  color: currentColor;
  font-size: 0.42em;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  text-shadow: none;
  transform: translateX(-50%);
  white-space: nowrap;
}
.jpdb-ocr-line:is(:hover, :focus, .jpdb-ocr-line-active) .jpdb-ocr-furi {
  opacity: 0.9;
}

/* Vertical-text OCR (mokuro / vertical manga & light novels): the reading
   belongs to the RIGHT of the kanji column, running top-to-bottom: real
   vertical ruby. The shared .jpdb-ocr-furi anchor is the horizontal
   "reading above the base span" geometry; in a writing-mode:vertical-rl line
   that physical top/left drops the reading on top of the first glyph of the
   column. Re-anchor the furigana to the right edge of its own base run,
   centered along the run and stacking vertically, so each reading sits beside
   the characters it annotates. Scoped to [data-vertical="true"] so horizontal
   furigana-above is left untouched. */
.jpdb-ocr-line[data-vertical="true"] .jpdb-ocr-ruby {
  padding-top: 0;
}
.jpdb-ocr-line[data-vertical="true"] .jpdb-ocr-furi {
  top: 50%;
  left: 100%;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-align: start;
  transform: translate(0.06em, -50%);
}

/* In a vertical column the word's pitch/decoration must stay on ONE side. The
   native text-decoration underline can NOT paint here: after
   normalizeOcrRenderedText the glyphs live inside inline-flex children
   (.jpdb-ocr-plain / .jpdb-ocr-ruby), and text-decoration does not propagate
   into atomic inline-level boxes — so the old text-underline-position:left
   underline never showed at all. The pitch rule is drawn instead by the base
   .jpdb-reader-word::after, whose border-block-end falls on the column's
   physical-left edge in vertical-rl (a single vertical rule down the side of the
   highlight, the same bordered box the horizontal underline uses). So keep that
   ::after (do NOT display:none it) and suppress only the dead native underline,
   leaving exactly ONE marked side (user feedback: "pitch accent is appearing
   confusingly on both sides"). Vertical OCR lines only — horizontal unaffected. */
.jpdb-ocr-line[data-vertical="true"] .jpdb-reader-word {
  text-decoration-line: none !important;
}

.asbplayer-subtitles-container-bottom {
  z-index: 2147483644 !important;
}
.asbplayer-subtitles-container-bottom .jpdb-reader-word {
  --jpdb-reader-subtitle-fallback: currentColor;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
  --jpdb-reader-word-underline: transparent;
  --jpdb-reader-word-underline-offset: 0.15em;
  --jpdb-reader-word-underline-thickness: 0.08em;
  text-decoration-line: underline !important;
  text-decoration-style: solid !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 0.08em !important;
  text-underline-offset: 0.15em !important;
  color: inherit !important;
}
.jpdb-reader-fab {
  position: fixed !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  z-index: 2147483645 !important;
  flex: 0 0 auto !important;
  inline-size: 52px !important;
  block-size: 52px !important;
  min-inline-size: 52px !important;
  min-block-size: 52px !important;
  max-inline-size: 52px !important;
  max-block-size: 52px !important;
  min-width: 52px !important;
  width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  padding: 0 !important;
  border: 1px solid var(--jpdb-reader-border) !important;
  border-radius: 50% !important;
  background: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-text) !important;
  box-shadow: 0 10px 28px var(--jpdb-reader-shadow) !important;
  opacity: 0.78 !important;
  font: 700 14px/1 var(--jpdb-reader-font) !important;
  cursor: pointer !important;
  touch-action: none !important;
  transform: translate3d(0, 0, 0) !important;
}
.jpdb-reader-fab:hover,
.jpdb-reader-fab:focus-visible {
  border-color: var(--jpdb-reader-accent) !important;
  color: var(--jpdb-reader-accent-readable) !important;
  opacity: 1 !important;
  outline: none !important;
}
.jpdb-reader-fab-over-video:not(:hover):not(:focus-visible) {
  opacity: 0.28 !important;
  transform: translate3d(0, 6px, 0) scale(0.92) !important;
}

/* Jiten Reader parity: with "Hide styling on JPDB-redundant words" enabled,
   redundant words keep lookup behavior but render as plain page text — no
   state color, underline, or highlight. */
html.jpdb-reader-suppress-redundant .jpdb-reader-word.jpdb-redundant {
  --jpdb-reader-word-underline: transparent;
  --jpdb-reader-jpdb-color: transparent;
  --jpdb-reader-jpdb-readable: inherit;
  --jpdb-reader-jpdb-soft: transparent;
  --jpdb-reader-jpdb-highlight: transparent;
  background: none !important;
  color: inherit !important;
  text-decoration: none !important;
}

/* Hosts with their own bottom action dock (e.g. jiten.moe study): keep the
   puck clear of native controls. */
.jpdb-reader-fab.jpdb-reader-fab-raised {
  bottom: max(150px, calc(env(safe-area-inset-bottom) + 136px)) !important;
}

/* ── Puck radial menu ──────────────────────────────────────────────────────
   A context menu that blooms out of the puck. Visual language mirrors the
   kanji origin-graph: accent-haloed circular nodes, soft elevation, springy
   scale-in, color-mix tints. */

/* Puck states while the menu is engaged. */
.jpdb-reader-fab.jpdb-reader-fab--menu-open {
  z-index: 2147483647 !important; /* above the backdrop so it stays a bright hub */
  opacity: 1 !important;
  border-color: var(--jpdb-reader-accent) !important;
  color: var(--jpdb-reader-accent-readable) !important;
  box-shadow: 0 12px 34px var(--jpdb-reader-shadow), 0 0 0 3px color-mix(in srgb, var(--jpdb-reader-accent) 32%, transparent) !important;
  transform: translate3d(0, 0, 0) scale(1.06) !important;
}
/* Annotations paused → drain the colour so on/off reads at a glance. */
.jpdb-reader-fab.jpdb-reader-fab--paused {
  filter: grayscale(1) !important;
  opacity: 0.55 !important;
  border-style: dashed !important;
}
.jpdb-reader-fab.jpdb-reader-fab--paused:hover,
.jpdb-reader-fab.jpdb-reader-fab--paused:focus-visible {
  filter: grayscale(0.7) !important;
  opacity: 0.85 !important;
}

.jpdb-reader-fab-radial {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483646 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  pointer-events: auto !important;
}
/* Independent scrim so the items keep full opacity while the page dims. */
.jpdb-reader-fab-radial::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: color-mix(in srgb, var(--jpdb-reader-background, #15171c) 34%, transparent) !important;
  -webkit-backdrop-filter: blur(2px) saturate(0.92) !important;
  backdrop-filter: blur(2px) saturate(0.92) !important;
  opacity: 0 !important;
  transition: opacity 220ms ease !important;
  pointer-events: none !important;
}
.jpdb-reader-fab-radial.is-open::before {
  opacity: 1 !important;
}
.jpdb-reader-fab-radial.is-closing::before {
  opacity: 0 !important;
}

.jpdb-reader-fab-radial-item {
  position: absolute !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  inline-size: 46px !important;
  block-size: 46px !important;
  min-width: 46px !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--jpdb-reader-border) !important;
  border-radius: 50% !important;
  background: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-text) !important;
  box-shadow: 0 9px 24px color-mix(in srgb, var(--jpdb-reader-shadow) 78%, transparent) !important;
  font: 700 13px/1 var(--jpdb-reader-font) !important;
  cursor: pointer !important;
  /* Start collapsed at the hub; the .is-open parent springs each item out. */
  transform: translate(-50%, -50%) scale(0.2) !important;
  opacity: 0 !important;
  transition:
    transform 280ms cubic-bezier(0.34, 1.42, 0.5, 1),
    opacity 200ms ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background-color 0.16s ease,
    color 0.16s ease !important;
  transition-delay: 0ms !important;
}
.jpdb-reader-fab-radial.is-open .jpdb-reader-fab-radial-item {
  transform: translate(calc(-50% + var(--radial-x, 0px)), calc(-50% + var(--radial-y, 0px))) scale(1) !important;
  opacity: 1 !important;
  transition-delay: calc(var(--radial-i, 0) * 28ms) !important;
}
.jpdb-reader-fab-radial.is-closing .jpdb-reader-fab-radial-item {
  transform: translate(-50%, -50%) scale(0.2) !important;
  opacity: 0 !important;
  transition:
    transform 170ms cubic-bezier(0.4, 0, 1, 1),
    opacity 150ms ease !important;
  transition-delay: 0ms !important;
}

.jpdb-reader-fab-radial-item:hover,
.jpdb-reader-fab-radial-item:focus-visible {
  outline: none !important;
  border-color: var(--jpdb-reader-accent) !important;
  color: var(--jpdb-reader-accent-readable) !important;
  box-shadow:
    0 14px 32px color-mix(in srgb, var(--jpdb-reader-shadow) 88%, transparent),
    0 0 0 3px color-mix(in srgb, var(--jpdb-reader-accent) 26%, transparent) !important;
}
.jpdb-reader-fab-radial.is-open .jpdb-reader-fab-radial-item:hover,
.jpdb-reader-fab-radial.is-open .jpdb-reader-fab-radial-item:focus-visible {
  transform: translate(calc(-50% + var(--radial-x, 0px)), calc(-50% + var(--radial-y, 0px))) scale(1.1) !important;
}

/* Primary action (the on/off power toggle): a touch larger with an accent ring. */
.jpdb-reader-fab-radial-item.is-primary {
  inline-size: 50px !important;
  block-size: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
  height: 50px !important;
}

/* Toggle state colouring. */
.jpdb-reader-fab-radial-item.is-on {
  border-color: var(--jpdb-reader-accent) !important;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 24%, var(--jpdb-reader-surface)) !important;
  color: var(--jpdb-reader-accent-readable) !important;
}
.jpdb-reader-fab-radial-item.is-off {
  filter: grayscale(1) !important;
  color: color-mix(in srgb, var(--jpdb-reader-text) 62%, transparent) !important;
}
.jpdb-reader-fab-radial-item.is-disabled {
  opacity: 0.4 !important;
  filter: grayscale(1) !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--jpdb-reader-shadow) 60%, transparent) !important;
}

.jpdb-reader-fab-radial-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}
.jpdb-reader-fab-radial-icon svg {
  inline-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}
.jpdb-reader-fab-radial-icon.is-glyph {
  font: 700 22px/1 var(--jpdb-reader-font) !important;
}

/* Per-item label — a pill above the node, revealed only for the focused/hovered
   item so the ring of icons stays uncluttered and labels never collide with the
   node beneath them. */
.jpdb-reader-fab-radial-label {
  position: absolute !important;
  bottom: calc(100% + 8px) !important;
  top: auto !important;
  left: 50% !important;
  transform: translate(-50%, 4px) !important;
  padding: 3px 8px !important;
  border-radius: 7px !important;
  background: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-text) !important;
  border: 1px solid var(--jpdb-reader-border) !important;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--jpdb-reader-shadow) 70%, transparent) !important;
  font: 600 12px/1.2 var(--jpdb-reader-font) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.14s ease, transform 0.14s ease !important;
}
/* Lift the hovered node (and its label) above the surrounding ring. */
.jpdb-reader-fab-radial.is-open .jpdb-reader-fab-radial-item:hover,
.jpdb-reader-fab-radial.is-open .jpdb-reader-fab-radial-item:focus-visible {
  z-index: 2 !important;
}
.jpdb-reader-fab-radial-item:hover .jpdb-reader-fab-radial-label,
.jpdb-reader-fab-radial-item:focus-visible .jpdb-reader-fab-radial-label {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .jpdb-reader-fab-radial-item,
  .jpdb-reader-fab-radial.is-open .jpdb-reader-fab-radial-item,
  .jpdb-reader-fab-radial.is-closing .jpdb-reader-fab-radial-item,
  .jpdb-reader-fab-radial::before {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* Note appended to mokuro's "OCR enabled" toggle label, clarifying that off uses
   Yomu's OCR and on uses mokuro's built-in OCR. */
.yomu-mokuro-ocr-note {
  margin-inline-start: 0.4em;
  opacity: 0.7;
  font-size: 0.85em;
  font-style: italic;
  white-space: normal;
}


/* Source: src/reader/styles/popover-core.css */
.jpdb-reader-backdrop {
  position: fixed;
  display: block;
  inset: 0;
  z-index: 2147483646;
  background: var(--jpdb-reader-backdrop);
}

.jpdb-reader-popover,
.jpdb-reader-settings {
  position: fixed;
  display: block;
  pointer-events: auto !important;
  z-index: 2147483647;
  box-sizing: border-box;
  background: var(--jpdb-reader-bg);
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 12px;
  box-shadow: 0 16px 48px var(--jpdb-reader-shadow);
  color: var(--jpdb-reader-text);
  color-scheme: light dark;
  font: 14px/1.45 var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
}

.jpdb-reader-popover {
  width: min(520px, calc(100vw - 16px));
  max-height: min(580px, calc(100vh - 16px));
  overflow: auto;
  overflow-anchor: none;
  padding: 14px;
  container-type: inline-size;
  scrollbar-gutter: stable;
  /* Subtle fade-in on appear. Opacity-only (no transform/position transition)
     so it never shifts layout and never slides between words; it also masks the
     one-frame pre-position flash. Auto-completes to opacity 1, so the popover
     can never get stuck invisible. ~110ms reads as instant-with-polish, which
     keeps fast word-to-word hovering feeling immediate. */
  animation: jpdb-reader-popover-in 0.11s ease-out both;
}

.jpdb-reader-popover-body,
.jpdb-reader-word-pills,
.jpdb-reader-popover :is(a[href], button, input, select, textarea, summary, [role="button"], [data-action], .jpdb-reader-word, .jpdb-reader-action-pill),
.jpdb-reader-settings :is(a[href], button, input, select, textarea, summary, [role="button"], [data-action]) {
  pointer-events: auto !important;
}

@keyframes jpdb-reader-popover-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .jpdb-reader-popover {
    animation: none;
  }
}

.jpdb-reader-popover
  :is(
    .jpdb-reader-parseable,
    .jpdb-reader-spelling,
    .jpdb-reader-reading,
    .jpdb-reader-kanji-inline,
    .jpdb-reader-jpdb-compound-term,
    .jpdb-reader-jpdb-compound-reading,
    .jpdb-reader-jpdb-used-in-term,
    .jpdb-reader-example-sentence,
    .jpdb-reader-kanji-char,
    .jpdb-reader-kanji-readings,
    .jpdb-reader-local-expression,
    .jpdb-reader-local-reading
  ) {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
}

.jpdb-reader-popover.jpdb-reader-sheet {
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100%;
  height: var(--jpdb-reader-sheet-height, var(--jpdb-reader-sheet-collapsed-height, 70dvh));
  min-height: var(--jpdb-reader-sheet-min-height, 180px);
  max-height: var(--jpdb-reader-sheet-viewport-height, 100dvh);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.jpdb-reader-popover.jpdb-reader-sheet.jpdb-reader-sheet-resizing {
  user-select: none;
}

.jpdb-reader-popover.jpdb-reader-sheet:has(.jpdb-reader-popover-body) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
  scrollbar-gutter: auto;
}

.jpdb-reader-popover.jpdb-reader-sheet:has(.jpdb-reader-popover-body) .jpdb-reader-popover-body {
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  scrollbar-gutter: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.jpdb-reader-popover.jpdb-reader-sheet:has(.jpdb-reader-popover-body) .jpdb-reader-popover-body > * {
  min-width: 0;
  max-width: 100%;
}

.jpdb-reader-popover.jpdb-reader-sheet:has(.jpdb-reader-popover-body) .jpdb-reader-actions {
  padding: 6px 16px calc(18px + env(safe-area-inset-bottom));
}

.jpdb-reader-popover.jpdb-reader-sheet:has(.jpdb-reader-popover-body) .jpdb-reader-actions.jpdb-reader-actions-has-mining {
  padding-top: 31px;
}

.jpdb-reader-popover.jpdb-reader-sheet.jpdb-reader-sheet-expanded {
  border-radius: 0;
  padding-top: max(8px, env(safe-area-inset-top));
}

.jpdb-reader-sheet .jpdb-reader-sheet-handle {
  display: block;
}

.jpdb-reader-popover.jpdb-reader-sheet > .jpdb-reader-sheet-handle {
  width: 100%;
  margin: 0;
}

.jpdb-reader-sheet-close {
  position: absolute;
  top: 8px;
  right: max(12px, env(safe-area-inset-right));
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  color: var(--jpdb-reader-text);
  box-shadow: 0 8px 20px var(--jpdb-reader-shadow);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.jpdb-reader-sheet-close:hover,
.jpdb-reader-sheet-close:focus-visible {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-accent-readable);
  outline: none;
}

.jpdb-reader-sheet-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

:root.jpdb-reader-theme-dark .jpdb-reader-popover,
:root.jpdb-reader-theme-dark .jpdb-reader-settings,
:root.jpdb-reader-theme-dark .jpdb-reader-onboarding {
  color-scheme: dark;
}
:root.jpdb-reader-theme-light .jpdb-reader-popover,
:root.jpdb-reader-theme-light .jpdb-reader-settings,
:root.jpdb-reader-theme-light .jpdb-reader-onboarding {
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not(.jpdb-reader-theme-light) .jpdb-reader-popover,
  :root:not(.jpdb-reader-theme-light) .jpdb-reader-settings,
  :root:not(.jpdb-reader-theme-light) .jpdb-reader-onboarding {
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  :root:not(.jpdb-reader-theme-dark) .jpdb-reader-popover,
  :root:not(.jpdb-reader-theme-dark) .jpdb-reader-settings,
  :root:not(.jpdb-reader-theme-dark) .jpdb-reader-onboarding {
    color-scheme: light;
  }
}

.jpdb-reader-sheet-handle {
  display: none;
  position: relative;
  width: calc(100% + 32px);
  height: 46px;
  border-bottom: 1px solid var(--jpdb-reader-border);
  border-radius: 16px 16px 0 0;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 72%,
    transparent
  );
  margin: -14px -16px 10px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-sheet-handle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: var(--jpdb-reader-faint);
  transform: translate(-50%, -50%);
}
.jpdb-reader-sheet-handle:active {
  cursor: grabbing;
}
.jpdb-reader-sheet-handle:hover::before,
.jpdb-reader-sheet-handle:focus-visible::before {
  background: var(--jpdb-reader-accent);
}

.jpdb-reader-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.jpdb-reader-heading {
  min-width: 0;
  flex: 1 1 auto;
}
.jpdb-reader-card-tools {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: auto;
}
.jpdb-reader-popover .jpdb-reader-icon-btn,
.jpdb-reader-settings .jpdb-reader-icon-btn,
.jpdb-reader-icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  flex: 0 0 auto;
  padding: 0 !important;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 50%;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  cursor: pointer;
  overflow: hidden;
  transform: translateY(-0.01rem);
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-popover .jpdb-reader-icon-btn:hover,
.jpdb-reader-popover .jpdb-reader-icon-btn:focus-visible,
.jpdb-reader-settings .jpdb-reader-icon-btn:hover,
.jpdb-reader-settings .jpdb-reader-icon-btn:focus-visible,
.jpdb-reader-icon-btn:hover,
.jpdb-reader-icon-btn:focus-visible {
  border-color: var(--jpdb-reader-accent);
  box-shadow: 0 8px 18px
    color-mix(in srgb, var(--jpdb-reader-accent) 26%, transparent);
  color: var(--jpdb-reader-accent-readable);
  transform: translateY(-0.25rem);
  outline: none;
}
.jpdb-reader-popover .jpdb-reader-icon-btn:active,
.jpdb-reader-settings .jpdb-reader-icon-btn:active,
.jpdb-reader-icon-btn:active {
  transform: scale(0.98);
}
.jpdb-reader-popover .jpdb-reader-icon-btn:disabled,
.jpdb-reader-popover .jpdb-reader-icon-btn[aria-disabled="true"],
.jpdb-reader-settings .jpdb-reader-icon-btn:disabled,
.jpdb-reader-settings .jpdb-reader-icon-btn[aria-disabled="true"],
.jpdb-reader-icon-btn:disabled,
.jpdb-reader-icon-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}
.jpdb-reader-popover .jpdb-reader-icon-btn:disabled:hover,
.jpdb-reader-popover .jpdb-reader-icon-btn[aria-disabled="true"]:hover,
.jpdb-reader-settings .jpdb-reader-icon-btn:disabled:hover,
.jpdb-reader-settings .jpdb-reader-icon-btn[aria-disabled="true"]:hover,
.jpdb-reader-icon-btn:disabled:hover,
.jpdb-reader-icon-btn[aria-disabled="true"]:hover {
  border-color: var(--jpdb-reader-border);
  box-shadow: none;
  color: var(--jpdb-reader-text);
  transform: none;
}

.jpdb-reader-onboarding {
  position: fixed;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647;
  box-sizing: border-box;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 42px 32px 28px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 10px;
  background: var(--jpdb-reader-bg);
  color: var(--jpdb-reader-text);
  box-shadow: 0 22px 56px var(--jpdb-reader-shadow);
  color-scheme: light dark;
  font: 15px/1.5 var(--jpdb-reader-font);
}
.jpdb-reader-onboarding-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
.jpdb-reader-onboarding h2 {
  margin: 0 0 8px -0.06em;
  padding: 0;
  border: 0 !important;
  color: var(--jpdb-reader-text);
  font-size: 48px;
  line-height: 1;
  letter-spacing: 0;
}
.jpdb-reader-onboarding p {
  max-width: 560px;
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-size: 14px;
}
.jpdb-reader-onboarding-eyebrow {
  color: var(--jpdb-reader-accent-readable);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.jpdb-reader-onboarding-basics {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(260px, 1fr);
  gap: 20px;
  align-items: start;
  margin: 22px 0 0;
  padding: 18px 0;
  border-top: 1px solid var(--jpdb-reader-border);
  border-bottom: 1px solid var(--jpdb-reader-border);
}
.jpdb-reader-onboarding-preferences {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.jpdb-reader-onboarding-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 18px 0 20px;
  padding: 0;
  list-style: none;
}
.jpdb-reader-onboarding-features li {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  min-width: 0;
}
.jpdb-reader-onboarding-features li::before {
  content: "";
  grid-row: 1 / span 2;
  width: 4px;
  height: 100%;
  min-height: 34px;
  border-radius: 999px;
  background: var(--jpdb-reader-accent);
}
.jpdb-reader-onboarding-features strong {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 850;
}
.jpdb-reader-onboarding-features span {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  line-height: 1.45;
}
.jpdb-reader-onboarding-language {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-weight: 750;
  font-size: 13px;
}
.jpdb-reader-onboarding-language select {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid var(--jpdb-reader-border) !important;
  border-radius: 8px;
  background-color: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-text) !important;
  padding: 8px 10px;
  font: 750 14px/1.2 var(--jpdb-reader-font);
}
.jpdb-reader-onboarding-theme {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-onboarding .jpdb-reader-theme-appearance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 48px;
  height: 24px;
  margin: 0;
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch {
  position: relative;
  display: block;
  width: 44px;
  min-width: 44px;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 86%, transparent);
  cursor: pointer;
  transform: translateY(-1px);
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch .check {
  position: absolute;
  top: 1px;
  left: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--jpdb-reader-bg);
  box-shadow: 0 1px 3px var(--jpdb-reader-shadow);
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch[aria-checked="true"] .check {
  transform: translateX(20px);
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch .icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch .sun,
.jpdb-reader-onboarding .jpdb-reader-theme-switch .moon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch .sun::before {
  content: "☀";
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch .moon::before {
  content: "☾";
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch[aria-checked="false"] .sun,
.jpdb-reader-onboarding .jpdb-reader-theme-switch[aria-checked="true"] .moon {
  opacity: 0;
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch[aria-checked="true"] .sun,
.jpdb-reader-onboarding .jpdb-reader-theme-switch[aria-checked="false"] .moon {
  opacity: 1;
}
.jpdb-reader-onboarding .jpdb-reader-theme-switch:hover,
.jpdb-reader-onboarding .jpdb-reader-theme-switch:focus-visible {
  border-color: var(--jpdb-reader-accent);
  outline: 2px solid var(--jpdb-reader-accent-soft);
  outline-offset: 3px;
}
.jpdb-reader-onboarding-accent {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.jpdb-reader-onboarding-accent legend {
  padding: 0 0 8px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 850;
}
.jpdb-reader-onboarding-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jpdb-reader-onboarding-swatch {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border: 2px solid color-mix(in srgb, var(--jpdb-reader-border) 70%, transparent);
  border-radius: 999px;
  background: var(--jpdb-reader-onboarding-swatch);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--jpdb-reader-white) 68%, transparent);
  cursor: pointer;
}
.jpdb-reader-onboarding-swatch:hover,
.jpdb-reader-onboarding-swatch:focus-visible {
  border-color: var(--jpdb-reader-accent);
  box-shadow:
    0 0 0 3px var(--jpdb-reader-accent-soft),
    inset 0 0 0 2px color-mix(in srgb, var(--jpdb-reader-white) 76%, transparent);
  outline: none;
}
.jpdb-reader-onboarding-swatch.selected {
  border-color: var(--jpdb-reader-accent);
  box-shadow:
    0 0 0 3px var(--jpdb-reader-accent-soft),
    inset 0 0 0 2px var(--jpdb-reader-accent-text);
}
.jpdb-reader-onboarding-custom-accent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 750;
}
.jpdb-reader-onboarding-custom-accent input[type="color"] {
  width: 52px;
  min-width: 52px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--jpdb-reader-border) !important;
  border-radius: 8px;
  background-color: var(--jpdb-reader-bg) !important;
  color: var(--jpdb-reader-text) !important;
  cursor: pointer;
}
.jpdb-reader-onboarding-options {
  display: grid;
  gap: 8px;
  margin: 18px 0 10px;
  padding: 0 0 0 0;
  border: 0;
  background: transparent;
}
.jpdb-reader-onboarding-options legend {
  padding: 0 0 6px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 850;
}
.jpdb-reader-onboarding-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 750;
}
.jpdb-reader-onboarding-options input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: grid;
  place-content: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--jpdb-reader-border) !important;
  border-radius: 7px;
  background-color: var(--jpdb-reader-surface-2) !important;
  background-image: none !important;
  accent-color: var(--jpdb-reader-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-black) 6%, transparent);
  flex: 0 0 24px;
}
.jpdb-reader-onboarding-options input[type="checkbox"]:enabled:hover {
  border-color: var(--jpdb-reader-accent) !important;
  background-color: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 82%,
    var(--jpdb-reader-accent) 18%
  ) !important;
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}
.jpdb-reader-onboarding-options input[type="checkbox"]:checked {
  border-color: var(--jpdb-reader-accent) !important;
  background-color: var(--jpdb-reader-accent) !important;
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}
.jpdb-reader-onboarding-options input[type="checkbox"]:checked::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--jpdb-reader-accent-text);
  border-bottom: 2.5px solid var(--jpdb-reader-accent-text);
  transform: rotate(-45deg) translate(1px, -1px);
}
.jpdb-reader-onboarding-options input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--jpdb-reader-accent);
  outline-offset: 3px;
}
.jpdb-reader-onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--jpdb-reader-border);
}
.jpdb-reader-onboarding-actions .jpdb-reader-btn {
  min-width: 150px;
  min-height: 46px;
}
.jpdb-reader-popover .jpdb-reader-icon-btn svg,
.jpdb-reader-settings .jpdb-reader-icon-btn svg,
.jpdb-reader-icon-btn svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes jpdb-reader-audio-loading-a {
  0% {
    left: 0;
  }
  25% {
    left: 0;
  }
  75% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
@keyframes jpdb-reader-audio-loading-b {
  0% {
    right: 100%;
  }
  50% {
    right: 0;
  }
  100% {
    right: 0;
  }
}
.jpdb-reader-popover[data-audio-loading="true"] .jpdb-reader-audio-control {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 62%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-accent-readable);
  cursor: progress;
}
.jpdb-reader-popover[data-audio-loading="true"]
  .jpdb-reader-audio-control::before,
.jpdb-reader-popover[data-audio-loading="true"]
  .jpdb-reader-audio-control::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 3px;
  background: var(--jpdb-reader-accent);
  pointer-events: none;
}
.jpdb-reader-popover[data-audio-loading="true"]
  .jpdb-reader-audio-control::before {
  animation:
    jpdb-reader-audio-loading-a 1.65s infinite ease-in-out,
    jpdb-reader-audio-loading-b 1.65s infinite ease-in-out;
}
.jpdb-reader-popover[data-audio-loading="true"]
  .jpdb-reader-audio-control::after {
  animation:
    jpdb-reader-audio-loading-a 1.65s infinite ease-in-out 0.62s,
    jpdb-reader-audio-loading-b 1.65s infinite ease-in-out 0.62s;
}

.jpdb-reader-spelling {
  color: var(--jpdb-reader-text);
  font-size: 24px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.16;
  text-decoration: none;
  word-break: keep-all;
}
.jpdb-reader-spelling:has(rt.jpdb-reader-furi) {
  line-height: 1.55;
}
.jpdb-reader-spelling ruby {
  position: static;
  display: ruby;
  ruby-align: center;
  ruby-position: over;
  line-height: 1;
  vertical-align: baseline;
  text-decoration-line: inherit !important;
  text-decoration-style: inherit !important;
  text-decoration-color: inherit !important;
  text-decoration-thickness: inherit !important;
  text-underline-offset: inherit !important;
}
.jpdb-reader-spelling rt {
  position: static;
  left: auto;
  bottom: auto;
  display: ruby-text;
  transform: none;
  white-space: nowrap;
  pointer-events: none;
  text-decoration: none !important;
  ruby-align: center;
  line-height: 1;
  text-align: center;
}
.jpdb-reader-spelling rp {
  display: none;
}
.jpdb-reader-spelling .jpdb-reader-ruby-base {
  display: inline;
}
/* Pitch is signaled exactly once on the card. The headword carries a jpdb-pitch-*
   class that (under the pitch-underline display mode) draws a pitch-colored
   underline, while the card tools also render the canonical mora-labelled pitch
   graph — so the accent shows up on both the headword (left) and the graph
   (right) (user feedback: "pitch accent is appearing confusingly on both
   sides"). When the graph is present it is the single source of truth, so the
   redundant headword underline is dropped. */
.jpdb-reader-header:has(.jpdb-reader-pitch) .jpdb-reader-spelling {
  text-decoration: none !important;
}
.jpdb-reader-title-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.jpdb-reader-kanji-inline {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer;
  font: inherit !important;
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font)) !important;
  font-weight: var(--jpdb-reader-popup-font-weight, 400) !important;
  line-height: inherit !important;
  text-align: inherit !important;
  vertical-align: baseline !important;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-kanji-inline:hover,
.jpdb-reader-kanji-inline:focus-visible {
  border-bottom-color: currentColor !important;
  outline: none !important;
}
.jpdb-reader-pill {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex !important;
  align-items: center;
  align-self: center;
  gap: 4px;
  box-sizing: border-box;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  height: auto !important;
  min-height: 24px !important;
  padding: 3px 8px !important;
  margin: 0 !important;
  border: 1px solid var(--chip-border, var(--jpdb-reader-border)) !important;
  border-radius: 999px !important;
  color: var(--chip-text, var(--jpdb-reader-text)) !important;
  background: var(--chip-bg, var(--jpdb-reader-surface-2)) !important;
  box-shadow: 0 1px 1px var(--jpdb-reader-shadow) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}
a.jpdb-reader-action-pill,
button.jpdb-reader-action-pill,
span.jpdb-reader-action-pill {
  --chip-bg: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 92%,
    var(--jpdb-reader-accent) 8%
  );
  --chip-border: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 38%,
    var(--jpdb-reader-border)
  );
  --chip-text: var(--jpdb-reader-text);
  position: relative;
  cursor: pointer;
  font-family: inherit;
  transform: translateY(-0.01rem) !important;
  -webkit-tap-highlight-color: transparent;
}
span.jpdb-reader-action-pill[aria-disabled="true"] {
  cursor: default;
}
.jpdb-reader-action-pill:hover,
.jpdb-reader-action-pill:focus-visible {
  color: var(--chip-text, var(--jpdb-reader-text)) !important;
  background: var(--chip-bg, var(--jpdb-reader-surface-2)) !important;
  border-color: color-mix(
    in srgb,
    var(--chip-border, var(--jpdb-reader-accent)) 86%,
    var(--jpdb-reader-border)
  ) !important;
  z-index: 1;
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 0 0 2px
      color-mix(
        in srgb,
        var(--chip-border, var(--jpdb-reader-accent)) 58%,
        transparent
      ),
    inset 0 0 12px
      color-mix(
        in srgb,
        var(--chip-border, var(--jpdb-reader-accent)) 24%,
        transparent
      ),
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--jpdb-reader-surface) 72%,
        transparent
      ) !important;
  outline: none !important;
}
.jpdb-reader-jpdb-pill {
  --chip-bg: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 15%,
    var(--jpdb-reader-surface)
  );
  --chip-border: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 58%,
    var(--jpdb-reader-border)
  );
  --chip-text: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-action-pill:active {
  transform: scale(0.98) !important;
}
.jpdb-reader-pill svg {
  width: 12px !important;
  height: 12px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-reader-word-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  margin: 3px -4px -6px;
  padding: 3px 4px 6px;
  overflow: visible;
}
.jpdb-reader-word-pills::-webkit-scrollbar {
  display: none;
}

@container (max-width: 340px) {
  .jpdb-reader-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 8px;
  }
  .jpdb-reader-heading {
    display: contents;
  }
  .jpdb-reader-title-row {
    grid-column: 1;
    grid-row: 1;
  }
  .jpdb-reader-card-tools {
    display: contents;
  }
  .jpdb-reader-pitch {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: -3px;
  }
  .jpdb-reader-audio-control {
    grid-column: 2;
    grid-row: 1;
    margin-left: auto;
  }
  .jpdb-reader-word-pills {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    gap: 4px;
    margin-top: 2px;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
  }
  .jpdb-reader-pill {
    min-height: 30px !important;
    padding: 4px 8px !important;
    font-size: 10.5px !important;
  }
  .jpdb-reader-action-pill {
    min-height: 34px !important;
  }
}

.jpdb-reader-reading,
.jpdb-reader-pos,
.jpdb-reader-meta,
.jpdb-reader-help {
  color: var(--jpdb-reader-muted);
}

.jpdb-reader-reading {
  margin-top: 2px;
  font-size: 15px;
}
.jpdb-reader-title-row .jpdb-reader-reading {
  margin-top: 0;
  line-height: 1.2;
}
.jpdb-reader-pos {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.35;
}
.jpdb-reader-status-line {
  min-height: 22px;
}
.jpdb-reader-status-line[data-status-tone] {
  --jpdb-reader-status-light: var(--jpdb-reader-faint);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface-2);
  color: var(--jpdb-reader-text);
  white-space: normal;
  overflow-wrap: anywhere;
}
.jpdb-reader-status-line[data-status-tone]::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.35em;
  border-radius: 50%;
  background: var(--jpdb-reader-status-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jpdb-reader-status-light) 18%, transparent);
}
.jpdb-reader-status-line[data-status-tone="pending"] {
  --jpdb-reader-status-light: var(--jpdb-reader-muted);
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-status-line[data-status-tone="success"] {
  --jpdb-reader-status-light: var(--jpdb-reader-accent);
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 52%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 11%,
    var(--jpdb-reader-surface-2)
  );
  color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-status-line[data-status-tone="error"] {
  --jpdb-reader-status-light: var(--jpdb-reader-danger);
  border-color: color-mix(in srgb, var(--jpdb-reader-danger) 52%, var(--jpdb-reader-border));
  background: color-mix(in srgb, var(--jpdb-reader-danger) 11%, var(--jpdb-reader-surface-2));
  color: var(--jpdb-reader-danger-readable);
}
.jpdb-reader-meanings {
  margin: 9px 0;
  display: grid;
  gap: 5px;
}
.jpdb-reader-meaning {
  color: var(--jpdb-reader-text);
  font-size: 13px;
  line-height: 1.32;
}
.jpdb-reader-jiten-meaning-group {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.jpdb-reader-jiten-meaning {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.jpdb-reader-jiten-meaning > span:last-child {
  min-width: 0;
}
.jpdb-reader-jpdb-extras {
  display: grid;
  gap: 14px;
  margin: 10px 0 0;
}
.jpdb-reader-jpdb-extras .jpdb-reader-jpdb-examples-group,
.jpdb-reader-jpdb-extras .jpdb-reader-jpdb-used-in-group {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}
.jpdb-reader-jpdb-extras
  :is(.jpdb-reader-jpdb-examples-group, .jpdb-reader-jpdb-used-in-group)
  > .jpdb-reader-local-glossary {
  padding: 0 10px 10px;
}
.jpdb-reader-jpdb-extra {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.jpdb-reader-jpdb-extra h6 {
  margin: 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.jpdb-reader-jpdb-compounds,
.jpdb-reader-jpdb-used-in,
.jpdb-reader-jpdb-examples {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jpdb-reader-jpdb-compounds {
  padding: 0 10px;
}
.jpdb-reader-jpdb-example {
  padding: 0;
  color: var(--jpdb-reader-text);
  line-height: 1.3;
}
.jpdb-reader-jpdb-example-row.has-audio {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.jpdb-reader-jpdb-example-text {
  min-width: 0;
}
button.jpdb-reader-jpdb-example-audio.jpdb-reader-icon-mini {
  position: relative;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  margin-top: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 88%, transparent);
  overflow: visible;
}
button.jpdb-reader-jpdb-example-audio.jpdb-reader-icon-mini svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}
button.jpdb-reader-jiten-audio.jpdb-reader-icon-mini {
  border-color: var(--jpdb-reader-border);
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 88%, transparent);
  color: var(--jpdb-reader-text);
  opacity: 1;
}
button.jpdb-reader-jiten-audio.jpdb-reader-icon-mini:hover,
button.jpdb-reader-jiten-audio.jpdb-reader-icon-mini:focus-visible,
button.jpdb-reader-jiten-audio.jpdb-reader-icon-mini:active {
  border-color: var(--jpdb-reader-accent);
  background: color-mix(in srgb, var(--jpdb-reader-accent-soft) 88%, var(--jpdb-reader-surface));
  color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-jiten-example-row.has-audio {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 7px;
}
.jpdb-reader-jiten-example-text {
  display: grid;
  gap: 1px;
}
.jpdb-reader-jiten-example-sentence {
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: normal;
}
.jpdb-reader-jiten-example-target {
  font-weight: 700;
}

@media (pointer: coarse) {
  .jpdb-reader-sheet-close,
  .jpdb-reader-audio-control {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  button.jpdb-reader-jpdb-example-audio.jpdb-reader-icon-mini {
    touch-action: manipulation;
  }

  button.jpdb-reader-jpdb-example-audio.jpdb-reader-icon-mini::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 999px;
  }
}
.jpdb-reader-jpdb-compound-row,
.jpdb-reader-jpdb-used-in-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.jpdb-reader-jpdb-compound-row.has-audio,
.jpdb-reader-jpdb-used-in-row.has-audio {
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
}
.jpdb-reader-jpdb-compound-row:not(.has-audio),
.jpdb-reader-jpdb-used-in-row:not(.has-audio) {
  grid-template-columns: minmax(0, 1fr);
}
.jpdb-reader-jpdb-compound-main,
.jpdb-reader-jpdb-used-in-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-width: 0;
  padding-top: 3px;
}
.jpdb-reader-jpdb-compound-main small,
.jpdb-reader-jpdb-used-in-main small {
  min-width: 0;
}
.jpdb-reader-jpdb-compound,
.jpdb-reader-jpdb-used-in-link {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  color: inherit !important;
  text-decoration: none !important;
}
.jpdb-reader-jpdb-compound:hover,
.jpdb-reader-jpdb-compound:focus-visible,
.jpdb-reader-jpdb-used-in-link:hover,
.jpdb-reader-jpdb-used-in-link:focus-visible {
  color: inherit !important;
  outline: none;
}
.jpdb-reader-local-glossary .jpdb-reader-jiten-related-link.gloss-link {
  display: inline;
  max-width: 100%;
  color: inherit !important;
  text-decoration: none !important;
  text-decoration-color: transparent !important;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.jpdb-reader-jiten-related-main {
  align-items: baseline;
  gap: 3px 8px;
}
.jpdb-reader-jiten-related-main small {
  flex: 1 1 12em;
  overflow-wrap: anywhere;
}
.jpdb-reader-jpdb-compound-head {
  display: inline;
  max-width: 100%;
}
.jpdb-reader-jiten-related-head {
  display: inline;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: auto;
}
.jpdb-reader-jiten-related-head ruby {
  display: ruby;
  line-height: 1.2;
  white-space: normal;
}
.jpdb-reader-jiten-related-head .jpdb-reader-furi {
  color: color-mix(in srgb, var(--jpdb-reader-text) 66%, var(--jpdb-reader-muted));
  font-size: 0.58em;
  font-weight: 650;
  line-height: 1;
}

.jpdb-reader-jpdb-term-with-reading {
  display: inline-grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: end;
  min-width: 0;
  line-height: 1;
  vertical-align: middle;
}
.jpdb-reader-jpdb-term-furi {
  display: block;
  max-width: 100%;
  margin-bottom: -1px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-jpdb-compound-term {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  font-size: 17px;
  line-height: 1.1;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  white-space: nowrap;
}
.jpdb-reader-jpdb-used-in-term {
  font-size: 14.5px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.25;
}

.jpdb-reader-jpdb-compound-reading,
.jpdb-reader-jpdb-compounds small,
.jpdb-reader-jpdb-used-in small,
.jpdb-reader-jpdb-example .jpdb-reader-example-translation {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.25;
}
.jpdb-reader-jpdb-compound-reading {
  white-space: nowrap;
}
.jpdb-reader-theme-light .jpdb-reader-jpdb-used-in-main small {
  color: color-mix(in srgb, var(--jpdb-reader-text) 84%, var(--jpdb-reader-muted));
  font-weight: 500;
}
@media (prefers-color-scheme: light) {
  :root:not(.jpdb-reader-theme-dark) .jpdb-reader-jpdb-used-in-main small {
    color: color-mix(in srgb, var(--jpdb-reader-text) 84%, var(--jpdb-reader-muted));
    font-weight: 500;
  }
}
.jpdb-reader-jpdb-compound:has(.jpdb-reader-word) .jpdb-reader-jpdb-compound-reading {
  display: none;
}
.jpdb-reader-example-summary .jpdb-reader-example-count {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
}
.jpdb-reader-jpdb-example .jpdb-reader-example-sentence,
.jpdb-reader-jpdb-example .jpdb-reader-example-translation {
  justify-self: stretch;
  width: 100%;
  text-align: left;
  text-wrap: pretty;
}
.jpdb-reader-jpdb-example .jpdb-reader-example-sentence {
  line-height: 1.35;
}
.jpdb-reader-jpdb-example .jpdb-reader-example-translation {
  font-size: 10.5px;
  line-height: 1.3;
}
.jpdb-reader-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
}
.jpdb-reader-provider-status {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.jpdb-reader-provider-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font: 760 13px/1 var(--jpdb-reader-font);
  cursor: pointer;
}
.jpdb-reader-provider-toggle:hover,
.jpdb-reader-provider-toggle:focus-visible {
  color: var(--jpdb-reader-accent-readable);
  outline: none;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 14%, transparent);
}
.jpdb-reader-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: var(--jpdb-reader-faint);
  margin-right: 4px;
}
.jpdb-reader-state-dot.jpdb-new,
.jpdb-reader-state-dot.jpdb-in-deck,
.jpdb-reader-state-dot.jiten-new,
.jpdb-reader-state-dot.jiten-in-deck,
.jpdb-reader-state-dot.anki-new {
  background: var(--jpdb-reader-state-new);
}
.jpdb-reader-state-dot.jpdb-learning,
.jpdb-reader-state-dot.jpdb-young,
.jpdb-reader-state-dot.jiten-learning,
.jpdb-reader-state-dot.jiten-young,
.jpdb-reader-state-dot.anki-learning {
  background: var(--jpdb-reader-state-learning);
}
.jpdb-reader-state-dot.jpdb-known,
.jpdb-reader-state-dot.jpdb-mature,
.jpdb-reader-state-dot.jpdb-mastered,
.jpdb-reader-state-dot.jpdb-never-forget,
.jpdb-reader-state-dot.jpdb-redundant,
.jpdb-reader-state-dot.jiten-known,
.jpdb-reader-state-dot.jiten-mature,
.jpdb-reader-state-dot.jiten-mastered,
.jpdb-reader-state-dot.jiten-never-forget,
.jpdb-reader-state-dot.jiten-redundant,
.jpdb-reader-state-dot.anki-known {
  background: var(--jpdb-reader-state-known);
}
.jpdb-reader-state-dot.jpdb-due,
.jpdb-reader-state-dot.jiten-due,
.jpdb-reader-state-dot.anki-due {
  background: var(--jpdb-reader-state-due);
}
.jpdb-reader-state-dot.jpdb-failed,
.jpdb-reader-state-dot.jiten-failed,
.jpdb-reader-state-dot.anki-failed {
  background: var(--jpdb-reader-state-failed);
}
.jpdb-reader-state-dot.jpdb-blacklisted,
.jpdb-reader-state-dot.jpdb-locked,
.jpdb-reader-state-dot.jpdb-suspended,
.jpdb-reader-state-dot.jiten-blacklisted,
.jpdb-reader-state-dot.jiten-locked,
.jpdb-reader-state-dot.jiten-suspended,
.jpdb-reader-state-dot.anki-suspended {
  background: var(--jpdb-reader-state-ignored);
}
.jpdb-reader-state-dot.jpdb-frequent,
.jpdb-reader-state-dot.jiten-frequent {
  background: var(--jpdb-reader-state-frequent);
}
.jpdb-reader-state-dot.jpdb-unparsed,
.jpdb-reader-state-dot.jiten-unparsed {
  background: var(--jpdb-reader-state-unparsed);
}

/* Jiten Reader parity: one-handed reach — optionally park the mobile sheet
   close button on the left edge instead of the right. */
html.jpdb-reader-sheet-close-left .jpdb-reader-sheet-close {
  right: auto;
  left: max(12px, env(safe-area-inset-left));
}


/* Source: src/reader/styles/local-dictionaries.css */
.jpdb-reader-local {
  border-top: 1px solid var(--jpdb-reader-border);
  margin-top: 12px;
  padding-top: 12px;
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.jpdb-reader-definition-stack {
  display: grid;
  gap: 0;
  margin-top: 12px;
}
.jpdb-reader-definition-stack .jpdb-reader-local {
  margin-top: 0;
}
.yomu-jpdb-page-addon {
  display: block;
  color: var(--jpdb-reader-text);
  color-scheme: light dark;
  font: 14px/1.45 var(--jpdb-reader-font);
  margin: 14px 0;
  /* Stay inside the host column; JPDB's own layout is already a readable
     measure, and viewport-based growth can overhang its content columns. */
  width: 100%;
  max-width: 100%;
  padding: 0 0 2px;
}
.yomu-jpdb-page-addon .jpdb-reader-definition-stack {
  margin-top: 0;
}
.yomu-jpdb-page-addon .jpdb-reader-source-card:first-child,
.yomu-jpdb-page-addon .jpdb-reader-study-source:first-child {
  border-top: 1px solid var(--jpdb-reader-border);
}
.yomu-jpdb-page-addon .jpdb-reader-help {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-source-card,
.jpdb-reader-study-source {
  gap: 0;
  padding-top: 0;
  position: relative;
}
.jpdb-reader-source-card .jpdb-reader-meanings {
  margin: 0;
}
.jpdb-reader-source-card > summary.jpdb-reader-local-title,
.jpdb-reader-study-source > summary.jpdb-reader-local-title {
  display: block;
  min-height: 34px;
  padding: 6px 32px 6px 0;
  position: relative;
  cursor: pointer;
  list-style: none;
}
.jpdb-reader-source-card
  > summary.jpdb-reader-local-title::-webkit-details-marker,
.jpdb-reader-study-source
  > summary.jpdb-reader-local-title::-webkit-details-marker {
  display: none;
}
.jpdb-reader-source-card > summary.jpdb-reader-local-title::after,
.jpdb-reader-study-source > summary.jpdb-reader-local-title::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: 0;
  color: var(--jpdb-reader-muted);
  font-size: 15px;
  line-height: 1;
  transform: translateY(-50%);
}
.jpdb-reader-source-card[open] > summary.jpdb-reader-local-title::after,
.jpdb-reader-study-source[open] > summary.jpdb-reader-local-title::after {
  content: "-";
}
.jpdb-reader-source-card[data-immersion-empty="true"]
  > summary.jpdb-reader-local-title {
  cursor: default;
}
.jpdb-reader-source-card[data-immersion-empty="true"]
  > summary.jpdb-reader-local-title::after {
  content: "";
}

@media (pointer: coarse) {
  .jpdb-reader-source-card > summary.jpdb-reader-local-title,
  .jpdb-reader-study-source > summary.jpdb-reader-local-title {
    touch-action: manipulation;
  }

  .jpdb-reader-source-card > summary.jpdb-reader-local-title::before,
  .jpdb-reader-study-source > summary.jpdb-reader-local-title::before {
    content: "";
    position: absolute;
    inset: -5px 0;
    border-radius: 8px;
  }
}

.jpdb-reader-source-card > :not(summary) {
  margin-left: 0;
  margin-right: 0;
}
.jpdb-reader-source-card[open] > :last-child {
  margin-bottom: 7px;
}
.jpdb-reader-dictionary-source-list,
.jpdb-reader-dictionary-group .jpdb-reader-local-terms {
  gap: 0;
  margin-top: 0;
  padding: 0;
}
.jpdb-reader-dictionary-source-list {
  display: grid;
}
.jpdb-reader-dictionary-group > .jpdb-reader-dictionary-source-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.jpdb-reader-dictionary-group
  > .jpdb-reader-dictionary-source-title
  .jpdb-reader-source-status {
  margin-left: auto;
  padding-left: 8px;
}
.jpdb-reader-dictionary-group .jpdb-reader-local-term {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 7px 0 8px;
}
.jpdb-reader-dictionary-group
  .jpdb-reader-local-term
  + .jpdb-reader-local-term,
.jpdb-reader-dictionary-group
  > .jpdb-reader-dictionary-source-title
  + .jpdb-reader-local-terms {
  border-top: 1px solid var(--jpdb-reader-border);
}
.jpdb-reader-study-source > .jpdb-reader-study-panel {
  margin-top: 4px;
  margin-bottom: 12px;
}
.jpdb-reader-local-title {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.jpdb-reader-source-status {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--jpdb-reader-faint);
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
}
.jpdb-reader-local-entry {
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: var(--jpdb-reader-surface);
  padding: 6px;
}
.jpdb-reader-source-card > .jpdb-reader-local-entry {
  display: grid;
  gap: 10px;
  padding: 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.jpdb-reader-kanji > .jpdb-reader-local-entry + .jpdb-reader-local-entry {
  margin-top: 6px;
}
.jpdb-reader-local-terms {
  display: grid;
  gap: 5px;
}
.jpdb-reader-local-term {
  padding: 7px 8px;
  padding-right: 32px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 88%,
    var(--jpdb-reader-surface-2)
  );
}
.jpdb-reader-source-card .jpdb-reader-local-term {
  padding: 7px 0 8px;
  padding-right: 0;
  border-top: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 52%, transparent);
  border-radius: 0;
  background: transparent;
}
.jpdb-reader-source-card .jpdb-reader-local-term:first-child {
  border-top: 0;
}
.jpdb-reader-local-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-weight: 700;
}
.jpdb-reader-local-expression {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 16px;
  line-height: 1.25;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
}
.jpdb-reader-local-reading,
.jpdb-reader-local-dict {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 650;
}
.jpdb-reader-local-reading {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
}
.jpdb-reader-local-dict {
  margin-left: auto;
}
.jpdb-reader-local-frequency {
  margin-left: auto;
  color: var(--jpdb-reader-accent-readable);
  font-size: 11px;
  font-weight: 800;
}
.jpdb-reader-local-senses {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}
.jpdb-reader-local-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 4px;
}
.jpdb-reader-local-head + .jpdb-reader-local-tags {
  margin-top: 5px;
}
.jpdb-reader-local-tags:empty {
  display: none;
}
.jpdb-reader-dict-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.35em;
  padding: 0 0.38em;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-accent) 55%, var(--jpdb-reader-border));
  border-radius: 4px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 24%,
    var(--jpdb-reader-surface-2)
  );
  color: var(--jpdb-reader-accent-readable);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}
.jpdb-reader-source-tag {
  border-color: var(--jpdb-reader-border);
  background: var(--jpdb-reader-surface-2);
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-local-sense,
.jpdb-reader-local-glossary-entry {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.jpdb-reader-local-sense {
  color: var(--jpdb-reader-text);
  font-size: 13px;
  line-height: 1.3;
}
.jpdb-reader-local-sense > span:last-child,
.jpdb-reader-local-glossary-entry > div {
  min-width: 0;
  flex: 1 1 auto;
}
.jpdb-reader-local-sense-index {
  flex: 0 0 16px;
  color: var(--jpdb-reader-faint);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}
.jpdb-reader-local-glossary {
  margin-top: 3px;
  color: var(--jpdb-reader-text);
  font-size: 13px;
  line-height: 1.45;
  white-space: normal;
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  --font-size-no-units: 13;
  --line-height: 1.45;
  --list-padding1: 1.1em;
  --list-padding2: 1.45em;
  --compact-list-separator: " / ";
}
.jpdb-reader-local-glossary-entry.no-index {
  display: block;
}
.jpdb-reader-local-glossary-entry.no-index > div {
  min-width: 0;
}
.jpdb-reader-local-glossary-entry.no-index
  > div
  > div:first-child
  > :first-child {
  margin-top: 0 !important;
}
.jpdb-reader-local-glossary-entry.no-index
  > div
  > div:last-child
  > :last-child {
  margin-bottom: 0 !important;
}
.jpdb-reader-local-glossary-entry.no-index .gloss-sc-div,
.jpdb-reader-local-glossary-entry.no-index .gloss-sc-ul,
.jpdb-reader-local-glossary-entry.no-index .gloss-sc-ol {
  margin-top: 0.12em !important;
  margin-bottom: 0.12em !important;
}
.jpdb-reader-local-glossary ul,
.jpdb-reader-local-glossary ol {
  padding: 0;
}
.jpdb-reader-local-glossary li {
  margin: 1px 0;
}
.jpdb-reader-local-glossary table {
  border-collapse: collapse;
  width: 100%;
  white-space: normal;
  margin: 4px 0;
}
.jpdb-reader-local-glossary td,
.jpdb-reader-local-glossary th {
  border: 1px solid var(--jpdb-reader-border);
  padding: 8px 6px 6px;
  line-height: 1.45;
}
.jpdb-reader-dictionary-group {
  padding: 0;
  overflow: hidden;
}
.jpdb-reader-dictionary-group > summary.jpdb-reader-local-head,
.jpdb-reader-dictionary-group > summary.jpdb-reader-local-title.jpdb-reader-example-summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  column-gap: 12px;
  list-style: none;
  min-height: 38px;
  padding: 8px 0;
}

.jpdb-reader-dictionary-group
  > summary.jpdb-reader-local-head::-webkit-details-marker,
.jpdb-reader-dictionary-group
  > summary.jpdb-reader-local-title.jpdb-reader-example-summary::-webkit-details-marker {
  display: none;
}

.jpdb-reader-dictionary-group > summary.jpdb-reader-local-head::after,
.jpdb-reader-dictionary-group
  > summary.jpdb-reader-local-title.jpdb-reader-example-summary::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-left: 0;
  color: var(--jpdb-reader-muted);
  font-size: 16px;
  line-height: 1;
}

.jpdb-reader-dictionary-group[open] > summary.jpdb-reader-local-head::after,
.jpdb-reader-dictionary-group[open]
  > summary.jpdb-reader-local-title.jpdb-reader-example-summary::after {
  content: "-";
}
.jpdb-reader-dictionary-group > .jpdb-reader-local-glossary {
  padding: 0 8px 8px;
}
.jpdb-reader-dictionary-group
  > :is(summary.jpdb-reader-local-head, summary.jpdb-reader-local-title.jpdb-reader-example-summary)
  .jpdb-reader-source-status {
  justify-self: end;
  margin-left: 0;
}
.jpdb-reader-local-glossary .structured-content {
  display: inline;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  line-height: var(--line-height);
}
.jpdb-reader-local-glossary ruby {
  display: ruby;
  ruby-align: center;
  ruby-position: over;
  max-width: 100%;
  margin: 0 0.03em;
  color: inherit;
  line-height: 1;
  text-align: center;
  vertical-align: baseline;
  white-space: nowrap;
}
.jpdb-reader-local-glossary rt {
  display: ruby-text;
  color: var(--jpdb-reader-muted);
  font-size: 0.52em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.jpdb-reader-local-glossary rp {
  display: none;
}
.jpdb-reader-local-glossary
  :is(
    .gloss-sc-div,
    .gloss-sc-ul,
    .gloss-sc-ol,
    .gloss-sc-li,
    .gloss-sc-details
  ) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.jpdb-reader-local-glossary [data-sc-class="extra-box"] {
  box-sizing: border-box;
  max-width: 100%;
}
.jpdb-reader-local-glossary .gloss-sc-ul,
.jpdb-reader-local-glossary .gloss-sc-ol {
  margin: 0.25em 0 0.25em var(--list-padding1);
  padding: 0;
}
.jpdb-reader-local-glossary .gloss-sc-ul[data-sc-content="glossary"],
.jpdb-reader-local-glossary .gloss-sc-ol[data-sc-content="glossary"] {
  display: grid;
  gap: 0.25em;
}
.jpdb-reader-local-glossary .gloss-sc-li {
  margin: 0;
  padding-left: 0.1em;
}
.jpdb-reader-local-glossary .gloss-sc-li > .gloss-sc-ul,
.jpdb-reader-local-glossary .gloss-sc-li > .gloss-sc-ol {
  margin-left: var(--list-padding2);
}
.jpdb-reader-local-glossary .gloss-sc-details {
  margin: 0.35em 0;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 72%, transparent);
}
.jpdb-reader-local-glossary .gloss-sc-summary {
  padding: 0.35em 0.55em;
  cursor: pointer;
  font-weight: 700;
}
.jpdb-reader-local-glossary .gloss-sc-details > :not(.gloss-sc-summary) {
  padding: 0 0.55em 0.45em;
}
.jpdb-reader-local-glossary .gloss-sc-table-container {
  display: block;
  max-width: 100%;
  margin: 0.35em 0;
  overflow-x: auto;
  white-space: normal;
}
.jpdb-reader-local-glossary .gloss-sc-table {
  width: auto;
  min-width: min(100%, 24rem);
  border-collapse: collapse;
  table-layout: auto;
}
.jpdb-reader-local-glossary .gloss-sc-th,
.jpdb-reader-local-glossary .gloss-sc-td {
  border: 1px solid var(--jpdb-reader-border);
  padding: 0.35em 0.45em;
  vertical-align: top;
}
.jpdb-reader-local-glossary .gloss-sc-th {
  background: var(--jpdb-reader-surface-2);
  font-weight: 800;
}
.jpdb-reader-local-glossary .gloss-sc-td[data-sc-class="form-valid"] {
  text-align: center;
  vertical-align: middle;
}
.jpdb-reader-local-glossary [data-sc-class="form-valid"] {
  color: var(--jpdb-reader-accent-readable);
  font-weight: 800;
}
.jpdb-reader-local-glossary .gloss-link {
  color: var(--jpdb-reader-accent-readable);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.jpdb-reader-local-glossary .gloss-link-external-icon {
  display: none;
}
.jpdb-reader-local-glossary [data-sc-content="part-of-speech-info"],
.jpdb-reader-local-glossary [data-sc-class="tag"],
.jpdb-reader-local-glossary [data-sc-class="pitch-accent-position"] {
  display: inline-flex;
  align-items: center;
  min-height: 1.4em;
  margin: 0 0.25em 0.15em 0;
  padding: 0.05em 0.35em;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: var(--jpdb-reader-surface-2);
  color: var(--jpdb-reader-muted);
  font-size: 0.88em;
  font-weight: 700;
  white-space: nowrap;
}
.jpdb-reader-local-glossary .gloss-image-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  max-width: 100%;
  margin: 0.15em 0;
  color: var(--jpdb-reader-muted);
  vertical-align: middle;
}
.jpdb-reader-local-glossary .gloss-image {
  display: block;
  max-width: min(100%, 20rem);
  max-height: 16rem;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 6px;
}
.jpdb-reader-local-glossary
  .gloss-image-link[data-image-load-state="error"]
  .gloss-image {
  display: none;
}
.jpdb-reader-local-glossary .gloss-image-fallback {
  display: inline-flex;
  padding: 0.4em;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 6px;
  background: var(--jpdb-reader-surface-2);
  color: var(--jpdb-reader-muted);
  font-size: 0.82em;
  line-height: 1.2;
}
.jpdb-reader-local-glossary
  .gloss-image-link[data-image-load-state="loaded"]
  .gloss-image-fallback {
  display: none;
}
.jpdb-reader-anki-existing {
  overflow: visible;
}
.jpdb-reader-anki-existing > summary {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-anki-existing > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--jpdb-reader-text);
  text-transform: none;
}
.jpdb-reader-anki-existing > summary small {
  color: var(--jpdb-reader-muted);
  font-weight: 700;
  text-align: right;
}
.jpdb-reader-anki-card-preview {
  display: grid;
  gap: 10px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  line-height: 1.35;
}
.jpdb-reader-source-card > .jpdb-reader-anki-card-preview {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 8px 0 0;
}
.jpdb-reader-anki-existing-note {
  border-left: 2px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
  padding-left: 8px;
}
.jpdb-reader-anki-existing-note + .jpdb-reader-anki-existing-note {
  margin-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
  padding-top: 8px;
}
.jpdb-reader-anki-existing-note-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.jpdb-reader-anki-existing-note-title::-webkit-details-marker {
  display: none;
}
.jpdb-reader-anki-existing-note-title > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.jpdb-reader-anki-existing-note-title::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  color: var(--jpdb-reader-muted);
  font-size: 14px;
  line-height: 1;
}
.jpdb-reader-anki-existing-note[open]
  > .jpdb-reader-anki-existing-note-title::after {
  content: "-";
}
.jpdb-reader-anki-existing-note-title strong {
  color: var(--jpdb-reader-text);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-anki-existing-note-title small {
  color: var(--jpdb-reader-muted);
  font-weight: 600;
  max-width: min(38vw, 180px);
  min-width: 0;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-anki-existing-note-body {
  display: grid;
  gap: 10px;
  padding-top: 8px;
}
.jpdb-reader-anki-field,
.jpdb-reader-anki-context {
  display: grid;
  gap: 2px;
}
.jpdb-reader-anki-field {
  grid-template-columns: minmax(72px, 112px) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 8px;
}
.jpdb-reader-anki-field > strong,
.jpdb-reader-anki-context > strong {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
.jpdb-reader-anki-field > span,
.jpdb-reader-anki-context > span,
.jpdb-reader-anki-context > small {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jpdb-reader-anki-rendered-card,
.jpdb-reader-anki-fields {
  display: grid;
  gap: 8px;
}
.jpdb-reader-anki-match-summary {
  display: grid;
  gap: 4px;
  margin: 8px 0;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 70%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-muted) 58%, transparent);
}
.jpdb-reader-anki-match-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 12px;
}
.jpdb-reader-anki-match-summary-row > span,
.jpdb-reader-anki-match-summary-row > small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-anki-match-summary-row > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jpdb-reader-text);
}
.jpdb-reader-anki-match-summary-row > small {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-anki-stored-fields {
  display: grid;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 64%, transparent);
  padding-top: 8px;
}
.jpdb-reader-anki-stored-fields > summary {
  cursor: pointer;
  color: var(--jpdb-reader-muted);
  font-weight: 700;
}
.jpdb-reader-anki-rendered-card + .jpdb-reader-anki-rendered-card {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
}
.jpdb-reader-anki-rendered-card-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--jpdb-reader-muted);
  font: 800 11px/1.25 var(--jpdb-reader-font);
}
.jpdb-reader-anki-rendered-card-title::-webkit-details-marker {
  display: none;
}
.jpdb-reader-anki-rendered-card-title::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  color: var(--jpdb-reader-muted);
  font-size: 14px;
  line-height: 1;
}
.jpdb-reader-anki-rendered-card[open] > .jpdb-reader-anki-rendered-card-title::after {
  content: "-";
}
.jpdb-reader-anki-rendered-side {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.jpdb-reader-anki-rendered-side + .jpdb-reader-anki-rendered-side {
  border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 58%, transparent);
  padding-top: 8px;
}
.jpdb-reader-anki-rendered-side-body {
  max-height: none;
  overflow: visible;
  overscroll-behavior: contain;
  contain: content;
  border-left: 2px solid color-mix(in srgb, var(--jpdb-reader-border) 70%, transparent);
  padding: 2px 0 2px 8px;
  background: transparent;
  color: var(--jpdb-reader-text);
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.jpdb-reader-anki-rendered-side-body :where(*) {
  max-width: 100%;
}
.jpdb-reader-anki-rendered-side-body :where(*) {
  font-size: min(1em, 30px);
}
.jpdb-reader-anki-rendered-side-body :is(h1, h2, h3, h4, h5, h6) {
  font-size: clamp(16px, 1.35em, 30px);
  line-height: 1.2;
}
.jpdb-reader-anki-rendered-side-body img,
.jpdb-reader-anki-rendered-side-body video,
.jpdb-reader-anki-rendered-side-body audio {
  max-width: 100%;
  height: auto;
}
.jpdb-reader-anki-rendered-side-body :is(img, video, canvas, svg) {
  max-height: min(70vh, 420px);
}
.jpdb-reader-anki-rendered-side-body img {
  display: block;
  margin: 3px 0;
  border-radius: 4px;
}
.jpdb-reader-anki-rendered-side-body audio[data-anki-media-name] {
  display: none;
}
/* Mined Yomu notes carry .yomu-* markup whose spacing lives in the Anki
   model CSS; mirror it here so the popover preview doesn't run together. */
.jpdb-reader-anki-rendered-side-body :is(.yomu-section, .yomu-dict-group) {
  margin-top: 12px;
}
.jpdb-reader-anki-rendered-side-body :is(.yomu-dict-entry, .yomu-kanji-entry) {
  margin-top: 8px;
}
.jpdb-reader-anki-rendered-side-body .yomu-dict-label {
  margin: 0;
  font-size: 11px;
  font-weight: 740;
  text-transform: none;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-anki-rendered-side-body .yomu-dict-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.jpdb-reader-anki-rendered-side-body .yomu-glossary > div {
  margin-top: 3px;
}
.jpdb-reader-anki-rendered-side-body :is(.yomu-tags, .yomu-chip) {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
}
.jpdb-reader-anki-rendered-side-body .yomu-chip {
  display: inline-block;
  margin: 2px 4px 0 0;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 70%, transparent);
  border-radius: 999px;
}
.jpdb-reader-anki-sound {
  margin-top: 2px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 78%, var(--jpdb-reader-state-known) 22%);
}
.jpdb-reader-anki-sound svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-reader-anki-sound:disabled {
  cursor: default;
  opacity: 0.65;
}
.jpdb-reader-anki-note-actions {
  display: grid;
  gap: 8px;
}
.jpdb-reader-review-target {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-review-target-panel {
  width: 100%;
  margin: 0;
  justify-items: center;
  overflow: hidden;
}
.jpdb-reader-actions .jpdb-reader-newtab-grade-target-select {
  width: min(360px, 100%);
  max-width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  font: inherit;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  padding: 0 28px 0 10px;
}
.jpdb-reader-anki-note-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.jpdb-reader-anki-audio-merge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.jpdb-reader-anki-audio-merge span {
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 800;
}
.jpdb-reader-anki-audio-merge select {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 6px;
  padding: 5px 8px;
  color: var(--jpdb-reader-text);
  background: var(--jpdb-reader-bg);
  font: inherit;
}


/* Source: src/reader/styles/immersion-study.css */
.jpdb-reader-settings-subsection {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--jpdb-reader-border);
}
.jpdb-reader-immersion {
  container-type: inline-size;
  --jpdb-reader-example-media-max-height: clamp(150px, calc(100vh - 300px), 260px);
}
.jpdb-reader-example-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.jpdb-reader-example-card.has-image {
  grid-template-columns: minmax(0, 1fr);
}
.jpdb-reader-example-image {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: var(--jpdb-reader-example-media-max-height);
  object-fit: contain;
}
.jpdb-reader-example-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.jpdb-reader-example-card.has-image .jpdb-reader-example-media {
  justify-self: center;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
}
.jpdb-reader-example-body {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
}
.jpdb-reader-example-source {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-example-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 8px !important;
  min-height: 38px;
  padding: 8px 0;
  width: 100%;
}
.jpdb-reader-example-summary .jpdb-reader-example-source {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.jpdb-reader-example-summary .jpdb-reader-local-dict {
  display: block;
  max-width: 100%;
  flex: 1 1 auto;
  margin-left: 0;
  min-width: 0;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jpdb-reader-example-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  width: 100%;
  margin: 3px 0 7px;
}
.jpdb-reader-example-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 7px;
  row-gap: 2px;
}
.jpdb-reader-example-meta .jpdb-reader-example-source {
  grid-column: 1 / -1;
  flex: none;
  max-width: 100%;
  color: var(--jpdb-reader-muted);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.15;
  text-transform: uppercase;
}
.jpdb-reader-example-title {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-example-count {
  color: var(--jpdb-reader-faint);
  font-size: 10.5px;
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}
.jpdb-reader-example-sentence {
  justify-self: center;
  min-width: 0;
  width: min(100%, 38em);
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 13px;
  line-height: 1.72;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
}
/* Page addons mount inside host DOM; a host text-transform (uppercase nav,
   stylized article bodies) must not restyle example text or translations. */
.jpdb-reader-example-sentence,
.jpdb-reader-example-translation {
  text-transform: none;
}
.jpdb-reader-example-card.has-image .jpdb-reader-example-sentence {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 5%, 18px);
  z-index: 1;
  justify-self: stretch;
  box-sizing: border-box;
  max-width: calc(100% - clamp(20px, 8%, 36px));
  padding: 2px 6px;
  border-radius: 4px;
  transform: translateX(-50%);
  color: var(--jpdb-reader-white);
  font-size: 13px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: wrap;
  background: var(--jpdb-ocr-background-rgba, var(--jpdb-reader-ocr-bg));
  box-decoration-break: clone;
  box-shadow:
    0 6px 16px var(--jpdb-reader-shadow),
    inset 0 0 0 1px var(--jpdb-reader-ocr-inset);
  text-shadow:
    0 1px 2px var(--jpdb-reader-image-caption-shadow-1),
    0 0 5px var(--jpdb-reader-image-caption-shadow-2),
    0 0 9px var(--jpdb-reader-image-caption-shadow-3);
  pointer-events: auto;
}
.jpdb-reader-example-sentence:has(rt.jpdb-reader-furi) {
  padding-top: 0.25em;
  line-height: 1.95;
}
.jpdb-reader-example-card.has-image .jpdb-reader-example-sentence:has(rt.jpdb-reader-furi) {
  padding-top: 2px;
  line-height: 1.75;
}
.yomu-jpdb-page-addon .jpdb-reader-immersion {
  --jpdb-reader-example-media-max-height: clamp(220px, 48vh, 480px);
  margin: 8px 0 4px;
}
.yomu-jpdb-page-addon .jpdb-reader-immersion .jpdb-reader-example-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
}
.yomu-jpdb-page-addon .jpdb-reader-immersion .jpdb-reader-example-meta {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto;
}
.yomu-jpdb-page-addon .jpdb-reader-immersion .jpdb-reader-example-actions {
  justify-self: end;
  gap: 4px;
}
.yomu-jpdb-page-addon .jpdb-reader-immersion .jpdb-reader-example-body {
  gap: 6px;
}
.yomu-jpdb-page-addon
  .jpdb-reader-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-media {
  width: min(100%, 720px);
  overflow: visible;
}
.yomu-jpdb-page-addon
  .jpdb-reader-immersion
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence {
  left: clamp(8px, 3%, 16px);
  right: clamp(8px, 3%, 16px);
  bottom: clamp(10px, 4%, 16px);
  width: auto;
  max-width: none;
  padding: 0;
  transform: none;
  background: transparent;
  box-shadow: none;
}
.yomu-jpdb-page-addon .jpdb-reader-immersion .jpdb-reader-example-translation {
  margin: 0;
  line-height: 1.35;
}
.jpdb-reader-example-sentence .jpdb-reader-word {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.jpdb-reader-example-sentence .jpdb-reader-word.jpdb-reader-has-furi {
  line-height: 2;
}
.jpdb-reader-example-target {
  padding: 0 0.08em;
  border-radius: 0.22em;
  background: var(
    --jpdb-reader-example-target-bg,
    var(--jpdb-reader-accent-soft)
  );
  box-shadow: inset 0 -0.1em 0
    var(--jpdb-reader-example-target-underline, color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
mark.jpdb-reader-example-target {
  color: inherit;
}
.jpdb-reader-example-sentence .jpdb-reader-word.jpdb-reader-example-target {
  background: var(
    --jpdb-reader-example-target-bg,
    var(--jpdb-reader-accent-soft)
  ) !important;
}
.jpdb-reader-example-card
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target {
  box-shadow: inset 0 -0.1em 0
    var(--jpdb-reader-example-target-underline, color-mix(in srgb, var(--jpdb-reader-accent) 58%, transparent)) !important;
}
.jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target.jpdb-reader-has-furi
  .jpdb-reader-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
}
.jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-example-target {
  --jpdb-reader-word-underline: transparent;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 34%,
    var(--jpdb-reader-video-target-backdrop)
  ) !important;
  box-shadow:
    0 0.08em 0 color-mix(in srgb, var(--jpdb-reader-black) 58%, transparent),
    inset 0 -0.12em 0 color-mix(in srgb, var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 74%, transparent) !important;
  text-decoration-color: transparent !important;
}
.jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target {
  --jpdb-reader-word-underline: transparent;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 34%,
    var(--jpdb-reader-video-target-backdrop)
  ) !important;
  box-shadow:
    0 0.08em 0 color-mix(in srgb, var(--jpdb-reader-black) 58%, transparent),
    inset 0 -0.12em 0 color-mix(in srgb, var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 74%, transparent) !important;
  text-decoration-color: transparent !important;
}
.jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-reader-word.jpdb-reader-example-target.jpdb-reader-has-furi
  .jpdb-reader-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
  text-decoration-color: transparent !important;
}
.jpdb-reader-example-translation {
  justify-self: center;
  width: min(100%, 38em);
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.jpdb-reader-example-translation[data-immersion-translation-blurred="true"],
.jpdb-reader-example-translation[data-yomu-immersion-translation-blurred="true"] {
  filter: blur(4px);
  user-select: none;
  cursor: pointer;
}
.jpdb-reader-example-translation[data-immersion-translation-blurred="true"]:hover,
.jpdb-reader-example-translation[data-yomu-immersion-translation-blurred="true"]:hover,
.jpdb-reader-example-translation[data-immersion-translation-blurred="true"]:focus-visible,
.jpdb-reader-example-translation[data-yomu-immersion-translation-blurred="true"]:focus-visible {
  filter: blur(3px);
  outline: none;
}
.jpdb-reader-example-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  max-width: 100%;
  gap: 3px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.jpdb-reader-example-toolbar .jpdb-reader-example-actions {
  margin-left: auto;
}
.jpdb-reader-immersion > .jpdb-reader-example-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 6px;
}
.jpdb-reader-example-actions .jpdb-reader-icon-mini {
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  border-radius: 5px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  font-size: 13px;
}
.jpdb-reader-example-actions svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@container (min-width: 560px) {
  .jpdb-reader-example-card.has-image {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 520px) {
  .jpdb-reader-example-card.has-image {
    grid-template-columns: minmax(0, 1fr);
  }
  .jpdb-reader-example-media {
    --jpdb-reader-example-media-max-height: clamp(130px, calc(100vh - 300px), 230px);
    max-height: var(--jpdb-reader-example-media-max-height);
  }
  .jpdb-reader-example-image {
    max-height: var(--jpdb-reader-example-media-max-height);
  }
  .jpdb-reader-example-actions {
    justify-self: start;
  }
  .jpdb-reader-example-toolbar {
    flex-wrap: wrap;
  }
  .jpdb-reader-example-meta {
    flex-basis: 100%;
  }
  .jpdb-reader-example-toolbar .jpdb-reader-example-actions {
    margin-left: 0;
  }
  .jpdb-reader-example-source {
    flex-basis: 100%;
  }
}
@media (pointer: coarse) {
  .jpdb-reader-example-actions .jpdb-reader-icon-mini {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .yomu-jpdb-page-addon .jpdb-reader-immersion .jpdb-reader-example-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.jpdb-reader-study-tools {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}
.jpdb-reader-study-panel {
  display: grid;
  gap: 10px;
  background: transparent;
  padding: 0;
  color: var(--jpdb-reader-text);
  font-size: 11px;
  line-height: 1.4;
}
.jpdb-reader-study-translation-panel {
  gap: 12px;
}
.jpdb-reader-study-block {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.jpdb-reader-study-sentence-block {
  gap: 8px;
}
.jpdb-reader-study-block + .jpdb-reader-study-block {
  border-top: 1px solid var(--jpdb-reader-border);
  padding-top: 10px;
}
.jpdb-reader-study-label {
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}
.jpdb-reader-study-label-row,
.jpdb-reader-study-item-head,
.jpdb-reader-grammar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.jpdb-reader-study-label-row .jpdb-reader-icon-mini {
  flex: 0 0 28px;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}
.jpdb-reader-study-sentence-row {
  align-items: flex-start;
}
.jpdb-reader-study-sentence-row .jpdb-reader-study-original {
  flex: 1 1 auto;
}
.jpdb-reader-grammar-example-japanese {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}
.jpdb-reader-grammar-example-japanese > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.jpdb-reader-grammar-example-japanese .jpdb-reader-icon-mini {
  flex: 0 0 24px;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
}
.jpdb-reader-study-original {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 13px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.7;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: normal;
}
.jpdb-reader-study-original .jpdb-reader-word,
.jpdb-reader-study-short .jpdb-reader-word,
.jpdb-reader-study-detail .jpdb-reader-word,
.jpdb-reader-study-match-text .jpdb-reader-word,
.jpdb-reader-grammar-example .jpdb-reader-word,
.jpdb-reader-jpdb-example .jpdb-reader-example-sentence .jpdb-reader-word {
  overflow-wrap: anywhere !important;
  white-space: normal;
  word-break: normal;
}
.jpdb-reader-study-original rt {
  color: var(--jpdb-reader-muted);
  font-size: 0.58em;
  line-height: 1;
}
.jpdb-reader-study-translation {
  color: var(--jpdb-reader-text);
  min-width: 0;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: normal;
}
.jpdb-reader-study-name {
  color: var(--jpdb-reader-text);
  font-weight: 800;
}
.jpdb-reader-study-list {
  border-top: 1px solid var(--jpdb-reader-border);
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 6px 0 0;
}
.jpdb-reader-study-item {
  display: grid;
  /* UT-73: a fixed label column keeps every row's body aligned — per-item
     max-content columns made ではない/じゃない and です/だ indent differently. */
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--jpdb-reader-border);
  margin: 0;
  padding: 8px 0;
}
.jpdb-reader-study-item.known {
  opacity: 0.72;
}
.jpdb-reader-study-item:first-child {
  border-top: 0;
  padding-top: 2px;
}
.jpdb-reader-study-name {
  display: grid;
  gap: 4px;
  font-size: 15px;
  line-height: 1.25;
}
.jpdb-reader-study-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.jpdb-reader-study-kind {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 700;
  min-width: 0;
}
.jpdb-reader-grammar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  white-space: nowrap;
}
.jpdb-reader-grammar-repeat {
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
}
.jpdb-reader-study-short,
.jpdb-reader-study-empty {
  color: var(--jpdb-reader-text);
}
.jpdb-reader-study-short,
.jpdb-reader-study-empty,
.jpdb-reader-study-detail,
.jpdb-reader-study-match-text,
.jpdb-reader-grammar-example {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  word-break: normal;
}
.jpdb-reader-study-short,
.jpdb-reader-study-match-text,
.jpdb-reader-grammar-example > div:first-child {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
}
.jpdb-reader-study-detail,
.jpdb-reader-study-match {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-study-detail {
  font-size: 11px;
  line-height: 1.35;
}
.jpdb-reader-study-match {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
  font-size: 11px;
}
.jpdb-reader-study-match span {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-study-guide {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 3px;
  color: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable) 82%,
    var(--jpdb-reader-text)
  );
  font-size: 11px;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable) 64%,
    transparent
  );
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  width: max-content;
}
.jpdb-reader-study-guide:hover {
  color: var(--jpdb-reader-text);
  text-decoration-color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-study-guide:focus-visible {
  color: var(--jpdb-reader-text);
  outline: 2px solid
    color-mix(in srgb, var(--jpdb-reader-accent-readable) 58%, transparent);
  outline-offset: 2px;
  text-decoration-color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-grammar-summary {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 700;
}
.jpdb-reader-grammar-level {
  justify-self: start;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-accent) 42%, var(--jpdb-reader-border));
  border-radius: 999px;
  padding: 1px 5px;
  color: var(--jpdb-reader-accent-readable);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.2;
}
.jpdb-reader-grammar-known,
.jpdb-reader-grammar-toggle {
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 5px;
  background: color-mix(in srgb, var(--jpdb-reader-white) 2.5%, transparent);
  color: var(--jpdb-reader-muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  min-height: 24px;
  padding: 0 7px;
  white-space: nowrap;
}
.jpdb-reader-grammar-known:hover,
.jpdb-reader-grammar-known:focus-visible,
.jpdb-reader-grammar-toggle:hover,
.jpdb-reader-grammar-toggle:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 52%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-accent-readable);
  outline: none;
}
.jpdb-reader-grammar-known[aria-pressed="true"],
.jpdb-reader-grammar-toggle[aria-pressed="true"] {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 46%,
    var(--jpdb-reader-border)
  );
  color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-grammar-more {
  display: grid;
  gap: 4px;
}
.jpdb-reader-grammar-more[open] {
  row-gap: 6px;
}
.jpdb-reader-grammar-more > summary {
  width: max-content;
  color: var(--jpdb-reader-muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  list-style: none;
}
.jpdb-reader-grammar-more > summary::-webkit-details-marker {
  display: none;
}
.jpdb-reader-grammar-more > summary::after {
  content: "+";
  margin-left: 5px;
}
.jpdb-reader-grammar-more[open] > summary::after {
  content: "-";
}

@media (pointer: coarse) {
  .jpdb-reader-study-label-row .jpdb-reader-icon-mini,
  .jpdb-reader-grammar-example-japanese .jpdb-reader-icon-mini {
    flex-basis: 44px;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }

  .jpdb-reader-grammar-known,
  .jpdb-reader-grammar-toggle,
  .jpdb-reader-grammar-more > summary {
    min-height: 44px;
  }
}

.jpdb-reader-grammar-examples {
  display: grid;
  row-gap: 6px;
  margin-top: 4px;
}
.jpdb-reader-grammar-examples > span {
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}
.jpdb-reader-grammar-example {
  display: grid;
  row-gap: 2px;
}
@media (max-width: 420px) {
  .jpdb-reader-study-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .jpdb-reader-study-name {
    font-size: 14px;
  }
}
.jpdb-reader-template-preview {
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface);
  padding: 10px;
  margin-top: 10px;
}
.jpdb-reader-template-preview-title {
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.jpdb-reader-template-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.jpdb-reader-template-preview-grid > div {
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface-2);
  padding: 10px;
  min-height: 118px;
}
.jpdb-reader-template-preview strong,
.jpdb-reader-template-preview small {
  display: block;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-template-expression {
  color: var(--jpdb-reader-text);
  font-size: 24px;
  font-weight: 850;
  line-height: 1.1;
  margin-top: 8px;
}
.jpdb-reader-template-reading,
.jpdb-reader-template-meaning {
  color: var(--jpdb-reader-muted);
  margin-top: 4px;
}
.jpdb-reader-template-sentence {
  color: var(--jpdb-reader-text);
  font-size: 18px;
  line-height: 1.35;
  margin: 10px 0 8px;
}
.jpdb-reader-template-sentence span {
  color: var(--jpdb-reader-accent-readable);
  font-weight: 850;
}
.jpdb-reader-frequency-pill {
  border: 1px solid var(--chip-border, var(--jpdb-reader-border));
  background: var(--chip-bg, var(--jpdb-reader-surface-2));
  color: var(--chip-text, var(--jpdb-reader-text));
}
.jpdb-reader-kanji-char {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 20px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
}
.jpdb-reader-kanji-readings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--jpdb-reader-muted);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 11px;
  margin-top: 6px;
}


/* Source: src/reader/styles/kanji.css */
.jpdb-reader-modal-nav {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 750;
}
.jpdb-reader-modal-nav span {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-kanji-display {
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 46px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1;
}
.jpdb-reader-kanji-title-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
}
.jpdb-reader-kanji-title-row [data-kanji-keyword-mount] {
  min-width: 0;
}
.jpdb-reader-kanji-title-row .jpdb-reader-word-pills {
  grid-column: 2 / -1;
  justify-self: start;
  align-self: start;
  margin-top: 1px;
}
.jpdb-reader-kanji-title-row .jpdb-reader-action-pill {
  --chip-bg: var(--jpdb-reader-surface);
  --chip-border: var(--jpdb-reader-border);
  --chip-text: var(--jpdb-reader-muted);
}
.jpdb-reader-kanji-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.jpdb-reader-kanji-keyword {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-accent) 34%, var(--jpdb-reader-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 88%, var(--jpdb-reader-accent) 12%);
  color: var(--jpdb-reader-text);
  box-shadow: none;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.08;
  overflow: hidden;
  white-space: nowrap;
}
.jpdb-reader-kanji-keyword small {
  display: inline;
  flex: 0 0 auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.jpdb-reader-kanji-keyword span {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jpdb-reader-kanji-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  overflow: visible;
  padding-bottom: 0;
}
.jpdb-reader-jpdb-kanji .jpdb-reader-kanji-facts {
  gap: 6px;
}
.jpdb-reader-origins .jpdb-reader-kanji-facts {
  gap: 6px;
  margin-top: 10px;
}
.jpdb-reader-kanji-facts > span {
  display: inline-flex;
  align-items: baseline;
  flex: 0 1 auto;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
  min-height: 23px;
  padding: 3px 7px;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 78%, transparent);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 82%,
    var(--jpdb-reader-bg) 18%
  );
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 11px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.15;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: normal;
}
.jpdb-reader-kanji-facts :is(strong, small) {
  display: inline;
  color: var(--jpdb-reader-muted);
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}
.jpdb-reader-kanji-fact-value {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}
.jpdb-reader-kanji-readings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  color: var(--jpdb-reader-muted);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
}
.jpdb-reader-kanji-readings > span,
.jpdb-reader-kanji-readings > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  max-width: 100%;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 86%,
    var(--jpdb-reader-accent) 8%
  );
  color: var(--jpdb-reader-muted);
  font: inherit;
  font-size: 11px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.jpdb-reader-kanji-readings > button {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-kanji-readings > button small {
  color: var(--jpdb-reader-faint);
  font-size: 10px;
  font-weight: 800;
}
.jpdb-reader-kanji-readings > button:hover,
.jpdb-reader-kanji-readings > button:focus-visible {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 64%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-text);
  outline: none;
}
.jpdb-reader-kanji-readings > button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 72%, var(--jpdb-reader-border));
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface-2));
  color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-kanji-readings > button[aria-pressed="true"] small {
  color: currentColor;
  opacity: 0.78;
}
.jpdb-reader-origin-detail {
  display: grid;
  gap: 8px;
}
.jpdb-reader-kanji-facts + .jpdb-reader-origin-detail {
  margin-top: 8px;
}
.jpdb-reader-origin-detail p {
  margin: 0;
  color: var(--jpdb-reader-text);
  font-size: 13px;
  line-height: 1.35;
}
.jpdb-reader-origin-detail p span {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-radical-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 52%, transparent);
  background: transparent;
}
.jpdb-reader-radical-card:first-child {
  border-top: 0;
}
.jpdb-reader-radical-glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 88%, var(--jpdb-reader-accent) 6%);
  color: var(--jpdb-reader-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-text) 7%, transparent);
  font-size: 28px !important;
  line-height: 1;
}
.jpdb-reader-radical-card img {
  box-sizing: border-box;
  width: 52px;
  height: 52px;
  padding: 3px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  background: #f7f8fb;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.78),
    0 1px 2px color-mix(in srgb, var(--jpdb-reader-shadow) 42%, transparent);
  filter: none;
  mix-blend-mode: normal;
}
.jpdb-reader-radical-frames {
  display: flex !important;
  flex-flow: row wrap;
  align-items: center;
  gap: 5px !important;
  margin-top: 5px;
}
.jpdb-reader-radical-card div {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.jpdb-reader-radical-card strong {
  color: var(--jpdb-reader-text);
  font-size: 15px;
}
.jpdb-reader-radical-card span {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.3;
}
.jpdb-reader-origin-graph-wrap {
  --jpdb-reader-origin-graph-node-size: clamp(56px, 13cqi, 64px);
  --jpdb-reader-origin-graph-bg: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 88%,
    var(--jpdb-reader-bg)
  );
  --jpdb-reader-origin-graph-line: color-mix(
    in srgb,
    var(--jpdb-reader-text) 72%,
    transparent
  );
  --jpdb-reader-origin-graph-outbound-line: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 76%,
    var(--jpdb-reader-text)
  );
  --jpdb-reader-origin-graph-subcomponent-line: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 48%,
    var(--jpdb-reader-text)
  );
  --jpdb-reader-origin-graph-frame: color-mix(
    in srgb,
    var(--jpdb-reader-bg) 84%,
    var(--jpdb-reader-text)
  );
  --jpdb-reader-origin-graph-node-fill: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 72%,
    var(--jpdb-reader-surface-2)
  );
  --jpdb-reader-origin-graph-related-fill: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 18%,
    var(--jpdb-reader-surface)
  );
  --jpdb-reader-origin-graph-accent-text: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 12%,
    var(--jpdb-reader-black)
  );
  position: relative;
  height: clamp(210px, 50vw, 260px);
  min-height: 0;
  margin-top: 10px;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 82%, var(--jpdb-reader-text));
  border-radius: 8px;
  background: var(--jpdb-reader-origin-graph-bg);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--jpdb-reader-text) 8%, transparent),
    inset 0 -18px 44px color-mix(in srgb, var(--jpdb-reader-bg) 18%, transparent);
  isolation: isolate;
  overflow: hidden;
}
:root.jpdb-reader-theme-light .jpdb-reader-origin-graph-wrap {
  --jpdb-reader-origin-graph-bg: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 84%,
    var(--jpdb-reader-bg)
  );
  --jpdb-reader-origin-graph-line: color-mix(
    in srgb,
    var(--jpdb-reader-text, var(--jpdb-reader-theme-light-text)) 46%,
    transparent
  );
  --jpdb-reader-origin-graph-outbound-line: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 72%,
    var(--jpdb-reader-text, var(--jpdb-reader-theme-light-text)) 8%
  );
  --jpdb-reader-origin-graph-subcomponent-line: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 44%,
    var(--jpdb-reader-text, var(--jpdb-reader-theme-light-text)) 18%
  );
  --jpdb-reader-origin-graph-frame: color-mix(
    in srgb,
    var(--jpdb-reader-border, var(--jpdb-reader-theme-light-border)) 75%,
    var(--jpdb-reader-bg)
  );
  --jpdb-reader-origin-graph-node-fill: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 24%,
    var(--jpdb-reader-white)
  );
  --jpdb-reader-origin-graph-related-fill: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 12%,
    var(--jpdb-reader-surface)
  );
  --jpdb-reader-origin-graph-accent-text: var(--jpdb-reader-accent-text);
  box-shadow:
    inset 0 1px 0 var(--jpdb-reader-paper-inset-strong),
    inset 0 -18px 44px color-mix(in srgb, var(--jpdb-reader-theme-light-text) 5%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not(.jpdb-reader-theme-dark) .jpdb-reader-origin-graph-wrap {
    --jpdb-reader-origin-graph-bg: color-mix(
      in srgb,
      var(--jpdb-reader-surface) 84%,
      var(--jpdb-reader-bg)
    );
    --jpdb-reader-origin-graph-line: color-mix(
      in srgb,
      var(--jpdb-reader-text, var(--jpdb-reader-theme-light-text)) 46%,
      transparent
    );
    --jpdb-reader-origin-graph-outbound-line: color-mix(
      in srgb,
      var(--jpdb-reader-accent) 72%,
      var(--jpdb-reader-text, var(--jpdb-reader-theme-light-text)) 8%
    );
    --jpdb-reader-origin-graph-subcomponent-line: color-mix(
      in srgb,
      var(--jpdb-reader-accent) 44%,
      var(--jpdb-reader-text, var(--jpdb-reader-theme-light-text)) 18%
    );
    --jpdb-reader-origin-graph-frame: color-mix(
      in srgb,
      var(--jpdb-reader-border, var(--jpdb-reader-theme-light-border)) 75%,
      var(--jpdb-reader-bg)
    );
    --jpdb-reader-origin-graph-node-fill: color-mix(
      in srgb,
      var(--jpdb-reader-accent) 24%,
      var(--jpdb-reader-white)
    );
    --jpdb-reader-origin-graph-related-fill: color-mix(
      in srgb,
      var(--jpdb-reader-accent) 12%,
      var(--jpdb-reader-surface)
    );
    --jpdb-reader-origin-graph-accent-text: var(--jpdb-reader-accent-text);
    box-shadow:
      inset 0 1px 0 var(--jpdb-reader-paper-inset-strong),
      inset 0 -18px 44px color-mix(in srgb, var(--jpdb-reader-theme-light-text) 5%, transparent);
  }
}
.jpdb-reader-origin-graph-wrap[data-origin-has-subcomponents="true"] {
  height: clamp(260px, 58vw, 300px);
  min-height: 0;
}
.jpdb-reader-origin-graph-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  transition: opacity 0.12s ease;
}
.jpdb-reader-origin-graph-wrap[data-graph-ready="true"] .jpdb-reader-origin-graph-lines {
  opacity: 1;
}
.jpdb-reader-origin-graph-lines .jpdb-reader-origin-edge {
  fill: none;
  stroke: var(--jpdb-reader-origin-graph-line);
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.jpdb-reader-origin-graph-lines .jpdb-reader-origin-edge-arrow {
  fill: var(--jpdb-reader-origin-graph-line);
}
.jpdb-reader-origin-graph-lines
  .jpdb-reader-origin-edge-arrow-outbound
  .jpdb-reader-origin-edge-arrow {
  fill: var(--jpdb-reader-origin-graph-outbound-line);
}
.jpdb-reader-origin-graph-lines
  .jpdb-reader-origin-edge-arrow-subcomponent
  .jpdb-reader-origin-edge-arrow {
  fill: var(--jpdb-reader-origin-graph-subcomponent-line);
}
.jpdb-reader-origin-graph-lines .jpdb-reader-origin-edge-group.outbound .jpdb-reader-origin-edge {
  stroke: var(--jpdb-reader-origin-graph-outbound-line);
  stroke-dasharray: 2.6 3.2;
}
.jpdb-reader-origin-graph-lines .jpdb-reader-origin-edge-group.subcomponent .jpdb-reader-origin-edge {
  stroke: var(--jpdb-reader-origin-graph-subcomponent-line);
  stroke-width: 1.15;
  stroke-dasharray: 1.6 4;
}
.jpdb-reader-origin-graph-wrap:has([data-origin-outbound-toggle]:not(:checked))
  [data-origin-outbound="true"] {
  display: none;
}
.jpdb-reader-origin-graph-wrap:has([data-origin-subcomponent-toggle]:not(:checked))
  [data-origin-subcomponent="true"] {
  display: none;
}
.jpdb-reader-origin-graph-toggles {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: calc(100% - 20px);
}
.jpdb-reader-origin-graph-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--jpdb-reader-bg) 24%, transparent);
}
.jpdb-reader-origin-graph-toggle input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--jpdb-reader-accent);
}
.jpdb-reader-origin-graph-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: var(--jpdb-reader-origin-graph-node-size);
  min-width: var(--jpdb-reader-origin-graph-node-size);
  height: var(--jpdb-reader-origin-graph-node-size);
  padding: 0;
  border: 4px solid var(--jpdb-reader-origin-graph-frame);
  border-radius: 999px;
  background: var(--jpdb-reader-origin-graph-node-fill);
  color: var(--jpdb-reader-text);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 33px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1;
  box-shadow: 0 9px 26px color-mix(in srgb, var(--jpdb-reader-bg) 34%, transparent);
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 2;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease;
}
.jpdb-reader-origin-graph-node.current {
  border-color: var(--jpdb-reader-origin-graph-frame);
  background: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-origin-graph-accent-text);
  font-size: 35px;
  box-shadow: 0 12px 32px
    color-mix(in srgb, var(--jpdb-reader-bg) 40%, transparent);
}
.jpdb-reader-origin-graph-node.component {
  border-color: var(--jpdb-reader-origin-graph-frame);
}
.jpdb-reader-origin-graph-node.related {
  background: var(--jpdb-reader-origin-graph-related-fill);
  color: var(--jpdb-reader-text);
  font-size: 29px;
}
.jpdb-reader-origin-graph-node[data-label-length="2"] {
  font-size: 27px;
}
.jpdb-reader-origin-graph-node[data-label-length="many"] {
  font-size: 22px;
}
.jpdb-reader-origin-graph-node:hover,
.jpdb-reader-origin-graph-node:focus-visible {
  border-color: var(--jpdb-reader-origin-graph-frame);
  box-shadow:
    0 14px 34px color-mix(in srgb, var(--jpdb-reader-bg) 44%, transparent),
    0 0 0 3px color-mix(in srgb, var(--jpdb-reader-accent) 24%, transparent);
  outline: none;
  transform: translate(-50%, -50%) scale(1.04);
}
.jpdb-reader-origin-graph-node.dragging {
  cursor: grabbing;
  z-index: 3;
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--jpdb-reader-bg) 50%, transparent),
    0 0 0 4px color-mix(in srgb, var(--jpdb-reader-accent) 28%, transparent);
}
.jpdb-reader-rtk-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--jpdb-reader-text);
}
.jpdb-reader-rtk-head span {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
}
.jpdb-reader-rtk details,
.jpdb-reader-jpdb-kanji details {
  margin-top: 8px;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-rtk summary:not(.jpdb-reader-local-title),
.jpdb-reader-jpdb-kanji summary:not(.jpdb-reader-local-title) {
  cursor: pointer;
  color: var(--jpdb-reader-text);
  font-weight: 750;
}
.jpdb-reader-rtk p,
.jpdb-reader-jpdb-kanji p {
  margin: 6px 0 0;
  color: var(--jpdb-reader-muted);
  line-height: 1.45;
}
.jpdb-reader-rtk-elements {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}
.jpdb-reader-rtk-elements > span,
.jpdb-reader-rtk-elements > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--jpdb-reader-surface-2);
  color: var(--jpdb-reader-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}
.jpdb-reader-rtk-elements > span strong,
.jpdb-reader-rtk-elements > button strong {
  color: var(--jpdb-reader-text);
  font-size: 14px;
  line-height: 1;
}
.jpdb-reader-rtk-elements > span span,
.jpdb-reader-rtk-elements > button span {
  all: unset;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-rtk-elements > button {
  cursor: pointer;
}
.jpdb-reader-rtk-elements > button:hover,
.jpdb-reader-rtk-elements > button:focus-visible {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-text);
  outline: none;
}
.jpdb-reader-component-grid,
.jpdb-reader-similar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.jpdb-reader-similar-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 146px), 1fr));
  gap: 10px;
}
.jpdb-reader-jiten-kanji-vocabulary {
  grid-template-columns: 1fr;
  gap: 6px;
}
.jpdb-reader-jiten-kanji-more {
  grid-column: 1 / -1;
  min-width: 0;
}
.jpdb-reader-jiten-kanji-more > summary.jpdb-reader-local-title {
  cursor: pointer;
}
.jpdb-reader-component-card,
.jpdb-reader-component-button,
.jpdb-reader-similar-word {
  min-width: 0;
  border: 1px solid
    color-mix(in srgb, var(--jpdb-reader-border) 82%, transparent);
  border-radius: 7px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 88%,
    var(--jpdb-reader-bg) 12%
  );
  color: var(--jpdb-reader-text);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--jpdb-reader-shadow) 54%, transparent);
  padding: 7px;
}
.jpdb-reader-component-card,
.jpdb-reader-component-button {
  display: grid;
  gap: 2px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.jpdb-reader-component-card strong,
.jpdb-reader-component-button strong {
  font-size: 18px;
}
.jpdb-reader-component-card span,
.jpdb-reader-component-card small,
.jpdb-reader-component-button span,
.jpdb-reader-component-button small,
.jpdb-reader-similar-word small,
.jpdb-reader-similar-word em {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-style: normal;
}
.jpdb-reader-similar-word {
  display: grid;
  gap: 4px;
  align-content: start;
  min-height: 104px;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.jpdb-reader-jiten-kanji-word {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 38%);
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 9px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 80%, var(--jpdb-reader-bg) 20%);
}
.jpdb-reader-similar-word-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.jpdb-reader-jiten-kanji-word .jpdb-reader-similar-word-head {
  justify-content: flex-start;
}
.jpdb-reader-jiten-kanji-word-main {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.jpdb-reader-similar-word-head > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-jiten-kanji-word-term {
  color: var(--jpdb-reader-text);
  font-size: 15px;
  line-height: 1.1;
}
.jpdb-reader-jiten-kanji-word-term ruby {
  ruby-position: over;
}
.jpdb-reader-jiten-kanji-word-term rt,
.jpdb-reader-jiten-kanji-word-term .jpdb-reader-furi {
  color: var(--jpdb-reader-muted);
  font-size: 9px;
  line-height: 1;
}
.jpdb-reader-jiten-kanji-word-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.jpdb-reader-jiten-kanji-word-status,
.jpdb-reader-jiten-kanji-word-pitch,
.jpdb-reader-jiten-kanji-word-meta em {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}
.jpdb-reader-jiten-kanji-word-pitch {
  color: var(--jpdb-reader-pitch-unknown-readable);
}
.jpdb-reader-similar-reading,
.jpdb-reader-similar-meaning {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.jpdb-reader-similar-reading {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.jpdb-reader-similar-meaning {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.jpdb-reader-jiten-kanji-word .jpdb-reader-similar-meaning {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  text-align: right;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
@container (max-width: 360px) {
  .jpdb-reader-jiten-kanji-word {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 5px;
  }
  .jpdb-reader-jiten-kanji-word-main {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .jpdb-reader-jiten-kanji-word .jpdb-reader-similar-meaning {
    text-align: left;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}
.jpdb-reader-similar-word:hover,
.jpdb-reader-similar-word:focus-visible,
.jpdb-reader-component-card:hover,
.jpdb-reader-component-card:focus-visible,
.jpdb-reader-component-button:hover,
.jpdb-reader-component-button:focus-visible {
  border-color: var(--jpdb-reader-accent);
  outline: none;
}
.jpdb-reader-doodle-stage {
  position: relative;
  width: min(100%, 240px);
  aspect-ratio: 1 / 1;
  justify-self: center;
  margin: 8px auto 0;
  --jpdb-reader-doodle-ink: var(--jpdb-reader-doodle-ink-default);
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, var(--jpdb-reader-doodle-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--jpdb-reader-doodle-grid) 1px, transparent 1px), var(--jpdb-reader-doodle-paper);
  background-size: 27.25px 27.25px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-kanjivg > .jpdb-reader-doodle-stage {
  margin-inline: auto;
}
.jpdb-reader-doodle-ghost,
.jpdb-reader-doodle-canvas {
  position: absolute;
  inset: 0;
}
.jpdb-reader-doodle-ghost {
  display: grid;
  place-items: center;
  opacity: 0.3;
  pointer-events: none;
}
.jpdb-reader-doodle-stage.trace-hidden .jpdb-reader-doodle-ghost,
.jpdb-reader-doodle-ghost[hidden] {
  display: none !important;
}
.jpdb-reader-doodle-canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-doodle-tools,
.jpdb-reader-doodle-tools *,
.jpdb-reader-btn.jpdb-reader-doodle-control {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.jpdb-reader-doodle-active,
html.jpdb-reader-doodle-active body,
html.jpdb-reader-doodle-active * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.jpdb-reader-kanjivg-svg {
  width: 90%;
  max-height: 90%;
}
.jpdb-reader-kanjivg-strokes path {
  fill: none;
  stroke: var(--jpdb-reader-doodle-ink-default);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-reader-kanjivg-numbers {
  fill: var(--jpdb-reader-doodle-number);
  font-size: 8px;
  font-family: var(--jpdb-reader-font);
}
.jpdb-reader-kanjivg .jpdb-reader-help {
  color: var(--jpdb-reader-doodle-help);
}
.jpdb-reader-doodle-text-ghost {
  color: var(--jpdb-reader-doodle-ink-default);
  font-family:
    "Hiragino Sans", "Yu Gothic", Meiryo,
    sans-serif;
  font-size: 180px;
  font-weight: 500;
  line-height: 1;
}
.jpdb-reader-doodle-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 7px;
}
.jpdb-reader-kanjivg > .jpdb-reader-doodle-tools {
  margin-bottom: 12px;
}
.jpdb-reader-kanjivg > .jpdb-reader-newtab-doodle-result {
  margin: 0 auto 12px;
}
.jpdb-reader-kanjivg.jpdb-reader-doodle-pass .jpdb-reader-newtab-doodle-result {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-state-known) 54%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-state-known) 16%,
    var(--jpdb-reader-surface)
  );
}
.jpdb-reader-kanjivg.jpdb-reader-doodle-fail .jpdb-reader-newtab-doodle-result {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-state-failed) 54%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-state-failed) 16%,
    var(--jpdb-reader-surface)
  );
}
.jpdb-reader-btn.jpdb-reader-doodle-control {
  min-height: 28px;
  max-height: 30px;
  padding: 4px 9px;
  border-radius: 7px;
  font: 800 12px/1 var(--jpdb-reader-font);
}

.jpdb-reader-popover:has(.jpdb-reader-popover-body),
.jpdb-reader-popover[data-jpdb-reader-body-stabilizers="true"] {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 0;
  scrollbar-gutter: auto;
}
.jpdb-reader-popover-body {
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 14px;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  touch-action: pan-y;
}
.jpdb-reader-popover-body > * {
  min-width: 0;
  max-width: 100%;
}
.jpdb-reader-actions {
  position: relative;
  z-index: 4;
  container-type: inline-size;
  overflow: visible;
  border-top: 1px solid var(--jpdb-reader-border);
  margin: 0;
  padding: 6px 14px 15px;
  display: grid;
  gap: 6px;
  --jpdb-reader-actions-bg: color-mix(in srgb, var(--jpdb-reader-bg) 90%, var(--jpdb-reader-black) 10%);
  background: var(--jpdb-reader-actions-bg);
  box-shadow: 0 -1px 0 var(--jpdb-reader-actions-bg);
}
.jpdb-reader-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
}
.jpdb-reader-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 10px;
}
.jpdb-reader-mining-details {
  position: relative;
  display: grid;
  gap: 0;
  min-width: 0;
}
.jpdb-reader-mining-panel {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.jpdb-reader-mining-title {
  position: static;
  justify-content: center;
  padding-inline: 10px;
}
.jpdb-reader-mining-title:hover,
.jpdb-reader-mining-title:focus-visible {
  color: var(--jpdb-reader-state-new-bright);
}
.jpdb-reader-actions-has-mining {
  position: relative;
  padding-top: 31px;
}
.jpdb-reader-actions-gutter {
  position: absolute;
  top: 1px;
  right: 10px;
  left: 10px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
  z-index: 1;
}
.jpdb-reader-review-target-gutter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
  gap: 8px;
  cursor: grab;
}
.jpdb-reader-review-target-gutter > .jpdb-reader-provider-toggle {
  grid-column: 1;
  justify-self: end;
}
.jpdb-reader-review-target-current {
  min-width: 0;
  max-width: min(180px, 34cqi);
  color: var(--jpdb-reader-muted);
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-review-target-gutter .jpdb-reader-mining-collapse {
  grid-column: 3;
}
.jpdb-reader-review-target-toggle {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  font: 760 15px/1 var(--jpdb-reader-font);
  cursor: pointer;
  pointer-events: auto;
}
.jpdb-reader-review-target-toggle:hover,
.jpdb-reader-review-target-toggle:focus-visible {
  color: var(--jpdb-reader-accent-readable);
  outline: none;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 12%, transparent);
}
.jpdb-reader-actions-gutter[hidden] {
  display: none !important;
}
.jpdb-reader-actions-gutter:active,
.jpdb-reader-mining-drawer-dragging .jpdb-reader-actions-gutter {
  cursor: grabbing;
}
.jpdb-reader-actions .jpdb-reader-mining-collapse,
.jpdb-reader-mining-collapse {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 30px;
  min-width: 72px;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  cursor: pointer;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex: none;
}
.jpdb-reader-actions .jpdb-reader-mining-collapse::before,
.jpdb-reader-mining-collapse::before {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: var(--jpdb-reader-faint);
}
.jpdb-reader-actions .jpdb-reader-mining-collapse:hover,
.jpdb-reader-actions .jpdb-reader-mining-collapse:focus-visible,
.jpdb-reader-mining-collapse:hover,
.jpdb-reader-mining-collapse:focus-visible {
  outline: none;
}
.jpdb-reader-actions .jpdb-reader-mining-collapse:hover::before,
.jpdb-reader-actions .jpdb-reader-mining-collapse:focus-visible::before,
.jpdb-reader-mining-collapse:hover::before,
.jpdb-reader-mining-collapse:focus-visible::before {
  background: var(--jpdb-reader-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--jpdb-reader-accent) 12%, transparent);
}
.jpdb-reader-actions:not(.jpdb-reader-actions-mining-collapsed) .jpdb-reader-mining-collapse::before {
  width: 48px;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 74%, var(--jpdb-reader-faint));
}
.jpdb-reader-actions-mining-collapsed .jpdb-reader-mining-panel,
.jpdb-reader-actions-mining-collapsed .jpdb-reader-mining-details {
  display: none;
}
.jpdb-reader-mining-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  padding: 0;
}
.jpdb-reader-kanji-mining-row {
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.jpdb-reader-add-deck-select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.jpdb-reader-add-deck-select-open {
  position: static;
  width: 100%;
  min-width: 0;
  height: 34px;
  margin-top: 6px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  opacity: 1;
  pointer-events: auto;
  font: 750 12px/1 var(--jpdb-reader-font);
}
.jpdb-reader-grades {
  grid-template-columns: repeat(5, minmax(24px, 1fr));
}
.jpdb-reader-mining-action-row .jpdb-reader-btn {
  min-width: 0;
  min-height: 48px;
  padding-inline: clamp(6px, 1.8cqi, 10px);
  font-size: clamp(10.5px, 3cqi, 13px);
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: normal;
}
.jpdb-reader-grades .jpdb-reader-btn {
  min-width: 0;
  min-height: 48px;
  padding-inline: clamp(2px, 1cqi, 6px);
  font-size: clamp(9.3px, 2.55cqi, 11px);
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
  overflow-wrap: normal;
}
.jpdb-reader-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 10px;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 90%,
    currentColor 7%
  );
  color: var(--jpdb-reader-text);
  cursor: pointer;
  font: 750 13px/1 var(--jpdb-reader-font);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--jpdb-reader-surface-inset-soft);
  transform: none;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-btn:focus-visible:not(:disabled) {
  border-color: color-mix(
    in srgb,
    var(--button-accent, var(--jpdb-reader-accent)) 70%,
    var(--jpdb-reader-border)
  );
  outline: 2px solid
    color-mix(in srgb, var(--button-accent, var(--jpdb-reader-accent)) 44%, transparent);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .jpdb-reader-btn:hover:not(:disabled) {
    background: color-mix(
      in srgb,
      var(--jpdb-reader-surface) 84%,
      var(--button-accent, currentColor) 16%
    );
    box-shadow:
      inset 0 1px 0 var(--jpdb-reader-ocr-active-inset),
      0 6px 14px var(--jpdb-reader-shadow-subtle);
    transform: translateY(-0.12rem);
  }
}
.jpdb-reader-btn:active:not(:disabled) {
  transform: scale(0.98);
}
.jpdb-reader-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.jpdb-reader-btn.primary {
  color: var(--jpdb-reader-accent-readable);
  border-color: var(--jpdb-reader-accent);
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 86%,
    var(--jpdb-reader-accent) 14%
  );
}
.jpdb-reader-btn.add {
  --button-accent: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-accent-readable) !important;
}
.jpdb-reader-btn.nf {
  --button-accent: var(--jpdb-reader-state-known);
}
.jpdb-reader-btn.nf.danger {
  --button-accent: var(--jpdb-reader-state-failed);
}
.jpdb-reader-btn.blacklist {
  --button-accent: var(--jpdb-reader-state-ignored);
}
.jpdb-reader-btn.anki {
  --button-accent: var(--jpdb-reader-state-new-bright);
}
.jpdb-reader-btn.nothing,
.jpdb-reader-btn.fail {
  --button-accent: var(--jpdb-reader-state-failed);
}
.jpdb-reader-btn.something {
  --button-accent: var(--jpdb-reader-state-failed);
}
.jpdb-reader-btn.hard {
  --button-accent: var(--jpdb-reader-state-hard);
}
.jpdb-reader-btn.okay,
.jpdb-reader-btn.pass {
  --button-accent: var(--jpdb-reader-state-known);
}
.jpdb-reader-btn.easy {
  --button-accent: var(--jpdb-reader-state-new-bright);
}
.jpdb-reader-btn:is(
  .add,
  .nf,
  .blacklist,
  .anki,
  .nothing,
  .something,
  .hard,
  .okay,
  .easy,
  .fail,
  .pass
) {
  color: var(--jpdb-reader-text);
  border-color: color-mix(
    in srgb,
    var(--button-accent, var(--jpdb-reader-border)) 54%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 94%,
    var(--button-accent, var(--jpdb-reader-border)) 6%
  );
}

@container (max-width: 430px) {
  .jpdb-reader-mining-action-row {
    gap: 6px;
  }
  .jpdb-reader-mining-action-row .jpdb-reader-btn,
  .jpdb-reader-grades .jpdb-reader-btn {
    min-height: 44px;
  }
  .jpdb-reader-mining-action-row .jpdb-reader-btn {
    font-size: clamp(10px, 2.85cqi, 11.5px);
  }
  .jpdb-reader-grades .jpdb-reader-btn {
    padding-inline: clamp(1px, 0.75cqi, 4px);
    font-size: clamp(8.8px, 2.4cqi, 10.4px);
  }
}

@container (max-width: 340px) {
  .jpdb-reader-actions {
    padding: 6px 10px 15px;
    gap: 6px;
  }
  .jpdb-reader-actions-has-mining {
    padding-top: 29px;
  }
  .jpdb-reader-actions-gutter {
    top: 1px;
    right: 8px;
    left: 8px;
    height: 28px;
  }
  .jpdb-reader-review-target-gutter {
    gap: 6px;
  }
  .jpdb-reader-review-target-current {
    max-width: min(150px, 38vw);
    font-size: 10px;
  }
  .jpdb-reader-actions .jpdb-reader-mining-collapse,
  .jpdb-reader-mining-collapse {
    width: 64px;
    height: 28px;
    min-width: 64px;
    min-height: 28px;
  }
  .jpdb-reader-actions .jpdb-reader-mining-collapse::before,
  .jpdb-reader-mining-collapse::before {
    width: 38px;
  }
  .jpdb-reader-actions:not(.jpdb-reader-actions-mining-collapsed) .jpdb-reader-mining-collapse::before {
    width: 44px;
  }
  .jpdb-reader-row,
  .jpdb-reader-mining-action-row {
    gap: 3px;
  }
  .jpdb-reader-mining-action-row .jpdb-reader-btn {
    min-height: 44px;
    padding-inline: 3px;
    border-radius: 8px;
    font-size: 9.5px;
  }
  .jpdb-reader-grades .jpdb-reader-btn {
    min-height: 44px;
    padding-inline: 1px;
    border-radius: 8px;
    font-size: 8.8px;
  }
}

@media (pointer: coarse) {
  .jpdb-reader-rtk-elements > button,
  .jpdb-reader-btn.jpdb-reader-doodle-control,
  .jpdb-reader-mining-action-row .jpdb-reader-btn,
  .jpdb-reader-grades .jpdb-reader-btn {
    min-height: 44px !important;
  }

  .jpdb-reader-actions .jpdb-reader-mining-collapse::after,
  .jpdb-reader-mining-collapse::after {
    content: "";
    position: absolute;
    inset: -16px 0 0;
    border-radius: 999px;
  }

  .jpdb-reader-rtk-elements > button {
    padding-block: 6px;
  }
}

@container (max-width: 300px) {
  .jpdb-reader-actions {
    padding-inline: 8px;
  }
  .jpdb-reader-row,
  .jpdb-reader-mining-action-row {
    gap: 2px;
  }
  .jpdb-reader-grades {
    grid-template-columns: repeat(3, minmax(24px, 1fr));
  }
  .jpdb-reader-mining-action-row .jpdb-reader-btn {
    font-size: 8.8px;
  }
  .jpdb-reader-grades .jpdb-reader-btn {
    padding-inline: 0;
    font-size: 8.2px;
  }
}

.jpdb-reader-pitch svg {
  display: block;
  height: 42px;
  max-width: 128px;
}
.jpdb-reader-pitch text {
  fill: var(--jpdb-reader-text);
  font-size: 11px;
}
.jpdb-reader-pitch polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.jpdb-reader-pitch circle {
  fill: currentColor;
}
.jpdb-reader-pitch .heiban {
  color: var(--jpdb-reader-pitch-heiban-readable);
}
.jpdb-reader-pitch .atamadaka {
  color: var(--jpdb-reader-pitch-atamadaka-readable);
}
.jpdb-reader-pitch .nakadaka {
  color: var(--jpdb-reader-pitch-nakadaka-readable);
}
.jpdb-reader-pitch .odaka {
  color: var(--jpdb-reader-pitch-odaka-readable);
}
.jpdb-reader-pitch .kifuku {
  color: var(--jpdb-reader-pitch-kifuku-readable);
}
/* Expression cards: one labelled mini graph per component, never a single
   component's accent presented as the whole expression. */
.jpdb-reader-pitch.jpdb-reader-pitch-components {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px 10px;
}
.jpdb-reader-pitch-component {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.jpdb-reader-pitch-component-label {
  max-width: 128px;
  overflow: hidden;
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yomu-jpdb-uchisen-source[open] > :last-child {
  display: grid;
  gap: 10px;
}
.yomu-jpdb-uchisen-body {
  display: grid;
  gap: 10px;
  justify-items: stretch;
  text-align: center;
}
.yomu-jpdb-source-meta,
.yomu-jpdb-counter {
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  font-weight: 750;
}
.yomu-jpdb-uchisen-summary-main,
.yomu-jpdb-uchisen-summary-controls,
.yomu-jpdb-uchisen-summary-link {
  display: inline-flex;
  align-items: center;
}
.yomu-jpdb-uchisen-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px 12px;
  width: 100%;
  min-width: 0;
}
.yomu-jpdb-uchisen-toolbar > .yomu-jpdb-source-meta {
  grid-column: 1;
  justify-self: start;
}
.yomu-jpdb-uchisen-summary-main {
  gap: 8px;
  min-width: 0;
}
.yomu-jpdb-uchisen-summary-controls {
  gap: 7px;
  grid-column: 3;
  justify-self: end;
}
.yomu-jpdb-uchisen-summary-controls .jpdb-reader-icon-mini {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}
@media (pointer: coarse) {
  .yomu-jpdb-uchisen-summary-controls .jpdb-reader-icon-mini {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
  }
}
.yomu-jpdb-uchisen-summary-link {
  gap: 4px;
  min-height: 28px;
  padding-inline: 2px;
  border: 0;
  background: transparent;
  color: var(--jpdb-reader-accent-readable);
  font-size: 11px;
  font-weight: 750;
  font-family: inherit;
  line-height: 1.2;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  appearance: none;
}
.yomu-jpdb-uchisen-link-row {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  justify-self: center;
  min-width: 0;
}
.yomu-jpdb-uchisen-generate-link::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.55;
}
.yomu-jpdb-uchisen-summary-link svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.yomu-jpdb-uchisen-summary-link:hover,
.yomu-jpdb-uchisen-summary-link:focus-visible {
  color: var(--jpdb-reader-accent-readable);
  outline: none;
}
.yomu-jpdb-uchisen-generator {
  display: grid;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 64%, transparent);
  text-align: left;
}
.yomu-jpdb-uchisen-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}
.yomu-jpdb-uchisen-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  resize: vertical;
  padding: 8px 9px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: var(--jpdb-reader-bg);
  color: var(--jpdb-reader-text);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-transform: none;
}
.yomu-jpdb-uchisen-field textarea:focus {
  border-color: var(--jpdb-reader-accent);
  outline: none;
}
.yomu-jpdb-uchisen-generator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.yomu-jpdb-uchisen-generate-status {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.25;
}
.yomu-jpdb-uchisen-generate-status[data-tone="success"] {
  color: var(--jpdb-reader-accent-readable);
}
.yomu-jpdb-uchisen-generate-status[data-tone="error"] {
  color: var(--jpdb-reader-danger-readable);
}

.yomu-jpdb-component-breakdown {
  display: grid;
  gap: 8px;
  width: 100%;
  text-align: left;
}

.yomu-jpdb-component-group {
  display: grid;
  gap: 5px;
}

.yomu-jpdb-component-group-label {
  color: var(--jpdb-reader-muted);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-transform: uppercase;
}

.yomu-jpdb-component-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.yomu-jpdb-component-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 72%, transparent);
  color: var(--jpdb-reader-text);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-decoration: none;
}

.yomu-jpdb-component-chip strong {
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 16px;
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1;
}

.yomu-jpdb-component-chip span {
  color: var(--jpdb-reader-muted);
}

.yomu-jpdb-component-chip:hover,
.yomu-jpdb-component-chip:focus-visible {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-text);
  outline: none;
}

.yomu-jpdb-image-shell {
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 540px);
  min-height: 120px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-bg) 72%, transparent);
  overflow: hidden;
}
.yomu-jpdb-image-shell img {
  display: block;
  max-width: 100%;
  max-height: min(260px, 50vh);
  object-fit: contain;
}
.yomu-jpdb-story {
  color: var(--jpdb-reader-text);
  font-size: 13px;
  line-height: 1.5;
}


/* Source: src/reader/styles/settings.css */
/* Toasts live in a fixed stack so simultaneous messages pile up readably
   instead of overlapping at the same spot (Jiten v1.2.x toast redesign). */
.jpdb-reader-toast-stack {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.jpdb-reader-toast {
  max-width: min(520px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  border: 1px solid var(--jpdb-reader-border);
  box-shadow: 0 10px 28px var(--jpdb-reader-shadow);
  font: 13px/1.35 var(--jpdb-reader-font);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.jpdb-reader-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .jpdb-reader-toast {
    transform: none;
    transition: opacity 0.15s ease;
  }
}

/* Adapter lifecycle chip (P1 adapter state machine): a compact state badge
   ahead of the Anki status sentence. */
.jpdb-reader-adapter-state-chip {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 8px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--jpdb-reader-muted);
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
}
.jpdb-reader-adapter-state-chip[data-adapter-state="connected"],
.jpdb-reader-adapter-state-chip[data-adapter-state="suggested"],
.jpdb-reader-adapter-state-chip[data-adapter-state="ready"] {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-accent-readable);
}
.jpdb-reader-adapter-state-chip[data-adapter-state="unreachable"] {
  border-color: color-mix(in srgb, #d33 60%, var(--jpdb-reader-border));
  color: color-mix(in srgb, #d33 70%, var(--jpdb-reader-text));
}

.jpdb-reader-settings {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 20px));
  max-height: min(820px, calc(100dvh - 20px));
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.jpdb-reader-settings button,
.jpdb-reader-settings input,
.jpdb-reader-settings select,
.jpdb-reader-settings textarea,
.jpdb-reader-settings fieldset,
.jpdb-reader-settings legend {
  margin: 0;
  letter-spacing: 0;
}
.jpdb-reader-settings input,
.jpdb-reader-settings select,
.jpdb-reader-settings textarea {
  box-shadow: none !important;
  transform: none !important;
}
.jpdb-reader-settings input:hover,
.jpdb-reader-settings input:focus,
.jpdb-reader-settings input:active {
  transform: none;
}
.jpdb-reader-settings input[type="checkbox"]::before,
.jpdb-reader-settings input[type="radio"]::before {
  content: none !important;
}
.jpdb-reader-settings .jpdb-reader-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.jpdb-reader-settings-head {
  flex: 0 0 auto;
  padding: 18px 18px 0;
}
.jpdb-reader-settings-drag-handle {
  display: none;
  width: min(160px, 44vw);
  height: 34px;
  border-radius: 999px;
  margin: -6px auto 2px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-reader-settings-drag-handle::before {
  content: "";
  display: block;
  width: 48px;
  height: 5px;
  border-radius: 999px;
  margin: 14px auto 0;
  background: var(--jpdb-reader-faint);
}
.jpdb-reader-settings-drag-handle:active {
  cursor: grabbing;
}
.jpdb-reader-settings-drag-handle:hover::before,
.jpdb-reader-settings-drag-handle:focus-visible::before {
  background: var(--jpdb-reader-accent);
}
.jpdb-reader-settings-tabs {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
  padding: 0 18px 8px;
}
.jpdb-reader-settings-tab {
  min-height: 34px !important;
  padding: 0 11px !important;
  border: 1px solid var(--jpdb-reader-border) !important;
  border-radius: 999px !important;
  background: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-muted) !important;
  font: 800 12px/1 var(--jpdb-reader-font) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transform: translateY(-0.01rem) !important;
}
.jpdb-reader-settings-tab[aria-selected="true"] {
  border-color: var(--jpdb-reader-accent) !important;
  color: var(--jpdb-reader-accent-readable) !important;
  background: var(--jpdb-reader-accent-soft) !important;
}
.jpdb-reader-settings-tab:focus-visible {
  border-color: var(--jpdb-reader-accent) !important;
  outline: 2px solid var(--jpdb-reader-accent-soft) !important;
  outline-offset: 2px !important;
}
@media (hover: hover) and (pointer: fine) {
  .jpdb-reader-settings-tab:hover {
    border-color: var(--jpdb-reader-accent) !important;
    box-shadow: 0 8px 18px
      color-mix(in srgb, var(--jpdb-reader-accent) 22%, transparent) !important;
    color: var(--jpdb-reader-accent-readable) !important;
    transform: translateY(-0.16rem) !important;
  }
}
@media (hover: none), (pointer: coarse) {
  .jpdb-reader-settings-tab:not([aria-selected="true"]):hover {
    border-color: var(--jpdb-reader-border) !important;
    background: var(--jpdb-reader-surface) !important;
    color: var(--jpdb-reader-muted) !important;
    box-shadow: none !important;
    transform: none !important;
  }
}
.jpdb-reader-settings-tab:active {
  transform: scale(0.98) !important;
}
.jpdb-reader-settings-search {
  flex: 0 0 auto;
  padding: 0 18px 10px;
}
.jpdb-reader-settings-search label {
  display: grid;
  min-width: 0;
}
.jpdb-reader-settings-search input {
  width: 100%;
}
.jpdb-reader-settings-search-empty {
  margin: 0 18px 10px;
  padding: 10px 12px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  color: var(--jpdb-reader-muted);
  background: var(--jpdb-reader-surface);
  font: 700 12px/1.4 var(--jpdb-reader-font);
}
.jpdb-reader-settings-scroll {
  /* Grow to fill the dialog/drawer so the footer stays pinned to the bottom.
     Without flex-grow, WebKit (iPad Safari) leaves the scroll at its pre-resize
     height after a rotation that grows the viewport, detaching the footer. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 18px 96px;
  overscroll-behavior: contain;
  scroll-padding-block: 16px calc(112px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.jpdb-reader-settings h2 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--jpdb-reader-text) !important;
}
.jpdb-reader-settings fieldset {
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: transparent;
  margin: 12px 0;
  padding: 12px;
}
.jpdb-reader-settings legend {
  color: var(--jpdb-reader-muted);
  padding: 0 6px;
}
.jpdb-reader-settings label {
  display: grid;
  gap: 5px;
  margin: 10px 0;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--jpdb-reader-muted) !important;
  font-size: 11px;
  line-height: 1.35;
}
.jpdb-reader-settings-label-text {
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}
.jpdb-reader-settings .jpdb-reader-word {
  --jpdb-reader-word-underline: var(
    --jpdb-reader-source-pitch-decoration,
    color-mix(in srgb, var(--jpdb-reader-accent) 45%, transparent)
  );
  --jpdb-reader-word-underline-offset: 0.18em;
  --jpdb-reader-word-underline-thickness: 1px;
  display: inline !important;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal !important;
  color: inherit !important;
  background-color: transparent !important;
  background-image: none !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.18em !important;
}
.jpdb-reader-settings .jpdb-reader-word:hover,
.jpdb-reader-settings .jpdb-reader-word:focus-visible {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-hover), var(--jpdb-reader-hover)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
}
.jpdb-reader-settings .jpdb-reader-word.jpdb-reader-has-furi {
  line-height: inherit;
}
.jpdb-reader-settings :is(ruby, rt, .jpdb-reader-furi) {
  line-height: 1;
}
.jpdb-reader-settings select + .jpdb-reader-control-text-mirror {
  display: block;
  max-width: 100%;
  margin-inline-start: 0;
  color: var(--jpdb-reader-muted);
  font: 800 11px/1.35 var(--jpdb-reader-font);
  overflow-wrap: anywhere;
}

.jpdb-reader-settings select + .jpdb-reader-control-text-mirror .jpdb-reader-word {
  color: inherit !important;
}
.jpdb-reader-font-family-control {
  display: grid;
  gap: 8px;
  margin: 10px 0;
  min-width: 0;
}
.jpdb-reader-font-family-control > label {
  margin: 0;
}
.jpdb-reader-settings input,
.jpdb-reader-settings select,
.jpdb-reader-settings textarea,
.jpdb-reader-field-display {
  width: 100%;
  box-sizing: border-box;
  min-height: 38px;
  border-radius: 7px;
  border: 1px solid var(--jpdb-reader-border) !important;
  background-color: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-text) !important;
  font: 700 12px/1.2 var(--jpdb-reader-font) !important;
  height: 38px;
  min-width: 0;
  padding: 8px;
}
.jpdb-reader-settings input::placeholder,
.jpdb-reader-settings textarea::placeholder {
  color: var(--jpdb-reader-faint) !important;
  opacity: 1;
}
.jpdb-reader-settings select {
  appearance: none !important;
  -webkit-appearance: none !important;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
@media (hover: none), (pointer: coarse) {
  .jpdb-reader-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  .jpdb-reader-settings select,
  .jpdb-reader-settings textarea {
    font-size: max(16px, 1em) !important;
  }
}
.jpdb-reader-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid var(--jpdb-reader-border) !important;
  border-radius: 8px !important;
  background: var(--jpdb-reader-surface) !important;
  color: var(--jpdb-reader-text) !important;
  font: 800 12px/1 var(--jpdb-reader-font) !important;
  cursor: pointer !important;
  text-align: center !important;
  text-decoration: none !important;
}
.jpdb-reader-btn:where(:link, :visited) {
  color: var(--jpdb-reader-text) !important;
}
.jpdb-reader-btn:hover,
.jpdb-reader-btn:focus-visible {
  border-color: var(--button-accent, var(--jpdb-reader-accent)) !important;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 82%,
    var(--button-accent, var(--jpdb-reader-accent)) 18%
  ) !important;
  outline: none !important;
}
.jpdb-reader-btn:active {
  transform: scale(0.98) !important;
}
.jpdb-reader-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.62 !important;
}
.jpdb-reader-btn[data-save-blocked] {
  cursor: wait !important;
  color: var(--jpdb-reader-accent-readable) !important;
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 55%, var(--jpdb-reader-border)) !important;
  background: var(--jpdb-reader-accent-soft) !important;
}
.jpdb-reader-btn[data-import-state] {
  gap: 7px !important;
  cursor: progress !important;
  opacity: 1 !important;
}
.jpdb-reader-btn[data-import-state]::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
}
.jpdb-reader-btn[data-import-state="installing"]::before {
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: jpdb-reader-spin 0.8s linear infinite;
}
.jpdb-reader-btn[data-import-state="queued"]::before {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
}
.jpdb-reader-btn.add {
  color: var(--jpdb-reader-accent-readable) !important;
  border-color: var(--jpdb-reader-accent) !important;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 82%,
    var(--jpdb-reader-accent) 18%
  ) !important;
}
.jpdb-reader-btn.add:hover,
.jpdb-reader-btn.add:focus-visible {
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 74%,
    var(--jpdb-reader-accent) 26%
  ) !important;
  box-shadow: 0 4px 12px
    color-mix(in srgb, var(--jpdb-reader-accent) 20%, transparent);
}
@keyframes jpdb-reader-spin {
  to {
    transform: rotate(1turn);
  }
}
@media (prefers-reduced-motion: reduce) {
  .jpdb-reader-btn[data-import-state="installing"]::before {
    animation-duration: 1.8s;
  }
}
.jpdb-reader-field-display {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
.jpdb-reader-settings input.jpdb-reader-masked-input {
  -webkit-text-security: asterisk;
  text-security: asterisk;
}
.jpdb-reader-autofill-trap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.jpdb-reader-autofill-trap input {
  width: 1px;
  height: 1px;
}
.jpdb-reader-settings input[type="color"] {
  padding: 3px;
  cursor: pointer;
}
.jpdb-reader-settings input[type="checkbox"],
.jpdb-reader-settings input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-content: center;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--jpdb-reader-border) !important;
  background-color: var(--jpdb-reader-surface-2) !important;
  background-image: none !important;
  accent-color: var(--jpdb-reader-accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--jpdb-reader-black) 6%, transparent);
}
.jpdb-reader-settings input[type="checkbox"] {
  border-radius: 7px;
}
.jpdb-reader-settings input[type="radio"] {
  border-radius: 999px;
}
.jpdb-reader-settings input[type="checkbox"]:enabled:hover,
.jpdb-reader-settings input[type="radio"]:enabled:hover {
  border-color: var(--jpdb-reader-accent) !important;
  background-color: color-mix(
    in srgb,
    var(--jpdb-reader-surface-2) 82%,
    var(--jpdb-reader-accent) 18%
  ) !important;
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}
.jpdb-reader-settings input[type="checkbox"]:checked,
.jpdb-reader-settings input[type="radio"]:checked {
  border-color: var(--jpdb-reader-accent) !important;
  background-color: var(--jpdb-reader-accent) !important;
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}
.jpdb-reader-settings input[type="checkbox"]:checked:enabled:hover,
.jpdb-reader-settings input[type="radio"]:checked:enabled:hover {
  background-color: var(--jpdb-reader-accent) !important;
}
.jpdb-reader-settings input[type="checkbox"]:checked::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--jpdb-reader-accent-text);
  border-bottom: 2.5px solid var(--jpdb-reader-accent-text);
  transform: rotate(-45deg) translate(1px, -1px);
}
.jpdb-reader-settings input[type="radio"]:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--jpdb-reader-accent-text);
}
.jpdb-reader-settings input[type="checkbox"]:focus-visible,
.jpdb-reader-settings input[type="radio"]:focus-visible {
  outline: 2px solid var(--jpdb-reader-accent);
  outline-offset: 3px;
}
.jpdb-reader-settings label:has(input:disabled),
.jpdb-reader-settings label:has(select:disabled),
.jpdb-reader-settings label:has(textarea:disabled) {
  opacity: 0.55;
}
.jpdb-reader-settings input:disabled,
.jpdb-reader-settings select:disabled,
.jpdb-reader-settings textarea:disabled {
  cursor: not-allowed;
}
.jpdb-reader-settings input[type="file"][data-file] {
  display: none !important;
}
.jpdb-reader-settings [hidden] {
  display: none !important;
}
.jpdb-reader-settings .inline {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin: 0;
  line-height: 1.35;
}
.jpdb-reader-settings .inline > input[type="checkbox"],
.jpdb-reader-settings .inline > input[type="radio"] {
  flex: 0 0 auto;
}
.jpdb-reader-settings .grid {
  display: grid;
  /* Responsive by construction: as many equal columns as fit at >=220px,
     collapsing 4 -> 3 -> 2 -> 1 as the dialog narrows. No manual breakpoints. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: stretch;
  gap: 14px 16px;
}
.jpdb-reader-settings .grid > * {
  min-width: 0;
}
.jpdb-reader-settings .jpdb-reader-settings-tgrid,
.jpdb-reader-settings .jpdb-reader-settings-cgrid {
  align-items: start;
}
.jpdb-reader-settings .jpdb-reader-settings-tgrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr));
  gap: 8px 14px;
}
.jpdb-reader-settings .jpdb-reader-settings-cgrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 225px), 1fr));
  gap: 12px 14px;
}
.jpdb-reader-settings .jpdb-reader-settings-tgrid + .jpdb-reader-settings-cgrid,
.jpdb-reader-settings .jpdb-reader-settings-cgrid + .jpdb-reader-settings-tgrid,
.jpdb-reader-settings .jpdb-reader-settings-cgrid + .jpdb-reader-settings-cgrid {
  margin-top: 12px;
}
/* Every label-above field (select, text, number, color) shares one structure:
   the label sits at the top and the control is pinned to the bottom of the
   cell, so every control on a row lines up regardless of how many lines the
   label above it wraps to. */
.jpdb-reader-settings .grid > label:not(.inline) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
}
.jpdb-reader-settings .grid > label:not(.inline) > .jpdb-reader-settings-label-text {
  min-height: 2.75em;
  display: flex;
  align-items: flex-end;
}
.jpdb-reader-settings .grid > label:not(.inline) > .jpdb-reader-settings-label-text:has(.jpdb-reader-has-furi) {
  min-height: 0;
  display: block;
}
.jpdb-reader-settings .jpdb-reader-settings-cgrid > label:not(.inline) > .jpdb-reader-settings-label-text,
.jpdb-reader-settings .jpdb-reader-settings-cgrid > * > label:not(.inline) > .jpdb-reader-settings-label-text {
  min-height: 0;
  display: block;
}
.jpdb-reader-settings label.inline > .jpdb-reader-settings-label-text,
.jpdb-reader-settings .jpdb-reader-radio-group .jpdb-reader-settings-label-text {
  display: inline;
  min-height: 0;
}
.jpdb-reader-settings .grid > label:not(.inline) > input,
.jpdb-reader-settings .grid > label:not(.inline) > select,
.jpdb-reader-settings .grid > label:not(.inline) > textarea,
.jpdb-reader-settings .grid > label:not(.inline) > .jpdb-reader-field-display,
.jpdb-reader-settings .grid > * > label > input,
.jpdb-reader-settings .grid > * > label > select,
.jpdb-reader-settings .grid > * > label > textarea,
.jpdb-reader-settings .grid > * > label > .jpdb-reader-field-display {
  margin-top: auto;
}
.jpdb-reader-settings .jpdb-reader-settings-cgrid > label:not(.inline) > input,
.jpdb-reader-settings .jpdb-reader-settings-cgrid > label:not(.inline) > select,
.jpdb-reader-settings .jpdb-reader-settings-cgrid > label:not(.inline) > textarea,
.jpdb-reader-settings .jpdb-reader-settings-cgrid > * > label:not(.inline) > input,
.jpdb-reader-settings .jpdb-reader-settings-cgrid > * > label:not(.inline) > select,
.jpdb-reader-settings .jpdb-reader-settings-cgrid > * > label:not(.inline) > textarea {
  margin-top: 0;
}

/* Remove margins from wrapper elements when they are direct children of a grid row */
.jpdb-reader-settings .grid > .jpdb-reader-font-family-control,
.jpdb-reader-settings .grid > [data-sticky-bottom-sheet-field],
.jpdb-reader-settings .grid > [data-nadeshiko-api-key-field],
.jpdb-reader-settings .grid > [data-local-ocr],
.jpdb-reader-settings .grid > details[data-local-ocr],
.jpdb-reader-settings .grid > .jpdb-reader-theme-field {
  margin: 0;
}

.jpdb-reader-settings .grid > [data-sticky-bottom-sheet-field] {
  display: flex;
  align-items: flex-start;
  padding-top: 36px;
}

/* Ensure nested labels inside wrappers in the grid layout align correctly */
.jpdb-reader-settings .grid > .jpdb-reader-font-family-control > label,
.jpdb-reader-settings .grid > [data-nadeshiko-api-key-field] > label,
.jpdb-reader-settings .grid > [data-local-ocr] > label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  margin: 0;
}

.jpdb-reader-settings .grid > [data-sticky-bottom-sheet-field] > label.inline {
  align-self: flex-start;
  margin: 0;
}

.jpdb-reader-settings .jpdb-reader-color-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
/* Number and color fields are just label-above fields: they fill the cell
   width like every other control. The color swatch keeps a taller body. */
.jpdb-reader-settings .grid > .jpdb-reader-settings-field-color > input[type="color"] {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 4px;
}
/* A checkbox/toggle keeps its box-beside-text row, but that row drops to the
   bottom of the cell inside a control-height band, so the box and its label
   sit on the same line as the dropdowns and inputs beside them. */
.jpdb-reader-settings .grid > label.inline {
  align-self: end;
  margin: 0;
}
.jpdb-reader-settings .grid:has(> label:not(.inline)) > label.inline {
  align-self: start;
  margin-top: 28px;
}
.jpdb-reader-settings .jpdb-reader-settings-tgrid > label.inline {
  align-self: start;
  align-items: center;
  min-height: 38px;
  margin-top: 0;
}
.jpdb-reader-settings .jpdb-reader-settings-cgrid > label.inline {
  align-self: start;
  align-items: center;
  min-height: 38px;
  margin-top: 28px;
}
.jpdb-reader-settings .jpdb-reader-radio-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 10px 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.jpdb-reader-settings .jpdb-reader-radio-group legend {
  grid-column: 1 / -1;
  padding: 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.35;
}
.jpdb-reader-settings .jpdb-reader-radio-group label {
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 38px;
}
.jpdb-reader-settings .jpdb-reader-settings-cgrid > .jpdb-reader-radio-group {
  grid-column: auto;
  margin: 0;
}
.jpdb-reader-settings-subsection {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
}
.jpdb-reader-settings .jpdb-reader-help {
  font-size: 12px;
  line-height: 1.45;
  margin-top: 8px;
}
.jpdb-reader-settings .jpdb-reader-status-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  margin-bottom: 12px;
}
.jpdb-reader-settings .jpdb-reader-status-main {
  min-width: 0;
}
.jpdb-reader-settings .jpdb-reader-status-checklist {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jpdb-reader-settings .jpdb-reader-status-checklist li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-accent) 34%, var(--jpdb-reader-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 10%, var(--jpdb-reader-surface));
  color: var(--jpdb-reader-text);
}
.jpdb-reader-settings .jpdb-reader-status-checklist a {
  color: var(--jpdb-reader-accent-readable);
  font-weight: 650;
  text-decoration: none;
}
.jpdb-reader-settings .jpdb-reader-status-checklist a:hover,
.jpdb-reader-settings .jpdb-reader-status-checklist a:focus-visible {
  text-decoration: underline;
}
.jpdb-reader-settings-wide {
  grid-column: 1 / -1;
}
.jpdb-reader-newtab-anki-decks {
  display: grid;
  grid-column: 1 / -1;
  gap: 10px;
  margin: 2px 0 4px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 54%, transparent);
}
.jpdb-reader-newtab-anki-decks[hidden] {
  display: none;
}
.jpdb-reader-newtab-anki-decks-head {
  display: grid;
  gap: 2px;
}
.jpdb-reader-newtab-anki-decks-title {
  color: var(--jpdb-reader-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}
.jpdb-reader-newtab-anki-decks-head .jpdb-reader-help {
  margin: 0;
}
.jpdb-reader-newtab-anki-deck-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.jpdb-reader-newtab-anki-deck-toggle {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: min(100%, 180px);
  max-width: 100%;
  min-height: 34px;
  margin: 0 !important;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 88%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 76%, transparent);
  color: var(--jpdb-reader-muted) !important;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}
.jpdb-reader-newtab-anki-deck-toggle[data-active="true"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-success) 54%, var(--jpdb-reader-border));
  background: color-mix(in srgb, var(--jpdb-reader-success) 12%, var(--jpdb-reader-surface));
  color: var(--jpdb-reader-text) !important;
}
.jpdb-reader-newtab-anki-deck-toggle input[type="checkbox"] {
  width: 16px;
  min-width: 16px;
  height: 16px;
}
.jpdb-reader-newtab-anki-deck-toggle span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.jpdb-reader-anki-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.9fr);
  align-items: start;
  gap: 18px 22px;
  margin-top: 4px;
}
.jpdb-reader-anki-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.jpdb-reader-settings .jpdb-reader-anki-connection-grid,
.jpdb-reader-settings .jpdb-reader-anki-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jpdb-reader-anki-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 10px 0 0;
}
.jpdb-reader-anki-actions .jpdb-reader-btn {
  min-height: 40px;
  padding-inline: 10px;
  white-space: normal;
  line-height: 1.15;
}
.jpdb-reader-anki-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.jpdb-reader-anki-library-choice .jpdb-reader-help,
.jpdb-reader-anki-template-settings .jpdb-reader-help {
  margin-bottom: 10px;
}
.jpdb-reader-anki-card-grid > label:last-child {
  grid-column: 1 / -1;
}
.jpdb-reader-anki-field-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.jpdb-reader-anki-confidence {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 78%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  color: var(--jpdb-reader-muted);
  background: color-mix(in srgb, var(--jpdb-reader-surface-2) 90%, transparent);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.jpdb-reader-anki-confidence[data-confidence="high"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-success) 58%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-success);
}
.jpdb-reader-anki-confidence[data-confidence="medium"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-warning) 58%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-warning);
}
.jpdb-reader-anki-confidence[data-confidence="low"] {
  border-color: color-mix(in srgb, var(--jpdb-reader-danger) 54%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-danger);
}
.jpdb-reader-anki-adapter {
  margin: 0;
  padding: 0 0 0 18px;
  border-top: 0;
  border-left: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
}
.jpdb-reader-settings .jpdb-reader-anki-adapter .grid {
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  gap: 10px 12px;
}
.jpdb-reader-proxy-guide {
  margin: 12px 0 4px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 84%, transparent);
}
.jpdb-reader-proxy-guide > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 0 12px;
  color: var(--jpdb-reader-accent-readable);
  font: 800 12px/1.2 var(--jpdb-reader-font);
  cursor: pointer;
  list-style: none;
}
.jpdb-reader-proxy-guide > summary::-webkit-details-marker {
  display: none;
}
.jpdb-reader-proxy-guide-toggle {
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  font-weight: 800;
}
.jpdb-reader-proxy-guide[open] [data-proxy-guide-show],
.jpdb-reader-proxy-guide:not([open]) [data-proxy-guide-hide] {
  display: none;
}
.jpdb-reader-proxy-guide[open] > summary {
  border-bottom: 1px solid var(--jpdb-reader-border);
}
.jpdb-reader-proxy-guide-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  color: var(--jpdb-reader-muted);
  font-size: 12px;
  line-height: 1.5;
}
.jpdb-reader-proxy-guide-body p,
.jpdb-reader-proxy-guide-body ol {
  margin: 0;
}
.jpdb-reader-proxy-guide-body ol {
  display: grid;
  gap: 7px;
  padding-left: 20px;
}
.jpdb-reader-proxy-guide-body code {
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.jpdb-reader-theme-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 38px;
  gap: 10px;
  margin: 10px 0;
  color: var(--jpdb-reader-muted) !important;
  font-size: 11px;
}
.jpdb-reader-theme-title {
  min-width: 0;
  font: 750 12px/1.2 var(--jpdb-reader-font);
}
.jpdb-reader-settings .jpdb-reader-theme-appearance {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 48px;
  height: 24px;
  margin: 0;
}
.jpdb-reader-settings .jpdb-reader-theme-switch {
  position: relative;
  display: block;
  width: 44px;
  min-width: 44px;
  height: 24px !important;
  min-height: 24px !important;
  padding: 0;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 86%, transparent);
  cursor: pointer;
  transform: translateY(-1px);
}
.jpdb-reader-settings .jpdb-reader-theme-switch .check {
  position: absolute;
  top: 1px;
  left: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--jpdb-reader-bg);
  box-shadow: 0 1px 3px var(--jpdb-reader-shadow);
}
.jpdb-reader-settings .jpdb-reader-theme-switch[aria-checked="true"] .check {
  transform: translateX(20px);
}
.jpdb-reader-settings .jpdb-reader-theme-switch .icon {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-settings .jpdb-reader-theme-switch .sun,
.jpdb-reader-settings .jpdb-reader-theme-switch .moon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1;
}
.jpdb-reader-settings .jpdb-reader-theme-switch .sun::before {
  content: "☀";
}
.jpdb-reader-settings .jpdb-reader-theme-switch .moon::before {
  content: "☾";
}
.jpdb-reader-settings .jpdb-reader-theme-switch[aria-checked="false"] .sun,
.jpdb-reader-settings .jpdb-reader-theme-switch[aria-checked="true"] .moon {
  opacity: 0;
}
.jpdb-reader-settings .jpdb-reader-theme-switch[aria-checked="true"] .sun,
.jpdb-reader-settings .jpdb-reader-theme-switch[aria-checked="false"] .moon {
  opacity: 1;
}
.jpdb-reader-settings .jpdb-reader-theme-switch:hover,
.jpdb-reader-settings .jpdb-reader-theme-switch:focus-visible {
  border-color: var(--jpdb-reader-accent);
  outline: 2px solid var(--jpdb-reader-accent-soft);
  outline-offset: 3px;
}
.jpdb-reader-shortcut-group {
  display: contents;
}
.jpdb-reader-settings .footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  background: var(--jpdb-reader-bg);
  border-top: 1px solid var(--jpdb-reader-border);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 24px var(--jpdb-reader-shadow);
}
.jpdb-reader-settings-save-status {
  flex: 1 1 100%;
  color: var(--jpdb-reader-accent-readable);
  font: 760 11px/1.35 var(--jpdb-reader-font);
  text-align: right;
}
.jpdb-reader-settings .footer .jpdb-reader-btn {
  min-width: 92px;
  padding-inline: 18px;
  font-size: 13px;
}
.jpdb-reader-settings .footer .jpdb-reader-btn[data-action="cancel"] {
  color: var(--jpdb-reader-text);
  border-color: var(--jpdb-reader-border);
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 92%,
    var(--jpdb-reader-text) 5%
  );
}
.jpdb-reader-settings a:not(.jpdb-reader-btn) {
  color: var(--jpdb-reader-accent-readable) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.jpdb-reader-settings a:not(.jpdb-reader-btn) svg {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-left: 0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.12em;
}
.jpdb-reader-settings-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.jpdb-reader-settings-actions-single {
  display: flex;
  justify-content: center;
}
.jpdb-reader-settings-actions .jpdb-reader-btn {
  display: inline-flex;
  min-width: 0;
}
.jpdb-reader-settings .jpdb-reader-anki-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.jpdb-reader-settings-actions .jpdb-reader-btn[data-newtab-url-link] {
  border-color: color-mix(
    in srgb,
    var(--jpdb-reader-accent) 45%,
    var(--jpdb-reader-border)
  );
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 86%,
    var(--jpdb-reader-accent) 14%
  );
  color: var(--jpdb-reader-text) !important;
}
.jpdb-reader-settings-actions .jpdb-reader-btn[data-newtab-url-link]:hover,
.jpdb-reader-settings-actions .jpdb-reader-btn[data-newtab-url-link]:focus-visible {
  border-color: var(--jpdb-reader-accent);
  background: color-mix(
    in srgb,
    var(--jpdb-reader-surface) 78%,
    var(--jpdb-reader-accent) 22%
  );
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
}
.jpdb-reader-settings .jpdb-reader-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin-top: 12px;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-btn {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding-inline: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-btn span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-btn svg {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-help-donate {
  border-color: var(--jpdb-reader-accent) !important;
  background: var(--jpdb-reader-accent) !important;
  color: var(--jpdb-reader-accent-text) !important;
  box-shadow: 0 6px 16px
    color-mix(in srgb, var(--jpdb-reader-accent) 22%, transparent) !important;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-help-donate:hover,
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-help-donate:focus-visible {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 86%, var(--jpdb-reader-white)) !important;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 90%, var(--jpdb-reader-white)) !important;
  color: var(--jpdb-reader-accent-text) !important;
  box-shadow: 0 8px 20px
    color-mix(in srgb, var(--jpdb-reader-accent) 28%, transparent) !important;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-help-reset {
  border-color: color-mix(in srgb, var(--jpdb-reader-danger-readable) 64%, var(--jpdb-reader-border));
  color: var(--jpdb-reader-danger-readable) !important;
}
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-help-reset:hover,
.jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-help-reset:focus-visible {
  background: color-mix(in srgb, var(--jpdb-reader-danger-readable) 14%, var(--jpdb-reader-surface));
  border-color: var(--jpdb-reader-danger-readable);
  color: var(--jpdb-reader-danger-readable) !important;
}

.jpdb-reader-settings .jpdb-reader-tag-editor {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
}

.jpdb-reader-settings .jpdb-reader-tag-chip-list,
.jpdb-reader-settings .jpdb-reader-tag-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.jpdb-reader-settings .jpdb-reader-tag-add-row {
  align-items: stretch;
}

.jpdb-reader-settings .jpdb-reader-tag-chip {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-accent) 54%, var(--jpdb-reader-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 15%, var(--jpdb-reader-surface-2));
  color: var(--jpdb-reader-accent-readable);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 6px 10px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.jpdb-reader-settings .jpdb-reader-tag-chip:hover,
.jpdb-reader-settings .jpdb-reader-tag-chip:focus-visible {
  border-color: var(--jpdb-reader-accent);
  background: color-mix(in srgb, var(--jpdb-reader-accent) 24%, var(--jpdb-reader-surface-2));
  color: var(--jpdb-reader-accent-readable);
  outline: none;
  box-shadow: 0 0 0 3px var(--jpdb-reader-accent-soft);
}

.jpdb-reader-settings .jpdb-reader-tag-chip span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jpdb-reader-settings .jpdb-reader-tag-add-row input {
  flex: 1 1 180px;
  min-width: 0;
}

.jpdb-reader-settings .jpdb-reader-tag-add-row .jpdb-reader-btn {
  flex: 0 0 auto;
  min-width: 86px;
  padding-inline: 14px;
}

.jpdb-reader-help-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 42px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  color: var(--jpdb-reader-text);
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, var(--jpdb-reader-accent) 12%);
  font: 800 12px/1.2 var(--jpdb-reader-font);
  text-align: center;
  overflow-wrap: anywhere;
}
.jpdb-reader-dictionary-status {
  margin: 10px 0;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
}
.jpdb-reader-dictionary-priorities,
.jpdb-reader-kanji-priorities,
.jpdb-reader-audio-sources,
.jpdb-reader-lookup-links {
  display: grid;
  gap: 9px;
  margin: 12px 0;
}
.jpdb-reader-recommended-dictionaries {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.jpdb-reader-recommended-title {
  color: var(--jpdb-reader-text);
  font-weight: 800;
  font-size: 13px;
}
.jpdb-reader-recommended-note {
  margin: -4px 0 2px;
}
.jpdb-reader-recommended-group {
  display: grid;
  gap: 7px;
}
.jpdb-reader-recommended-group-title {
  color: var(--jpdb-reader-faint);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.jpdb-reader-recommended-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface);
  padding: 10px;
}
.jpdb-reader-recommended-item .jpdb-reader-btn {
  width: 100%;
  min-height: 42px;
  padding-inline: 10px;
}
.jpdb-reader-recommended-name {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  color: var(--jpdb-reader-text);
  font-weight: 800;
  font-size: 13px;
}
.jpdb-reader-recommended-name a {
  font-size: 11px;
  font-weight: 700;
}
.jpdb-reader-recommended-status {
  margin-top: 7px;
  color: var(--jpdb-reader-accent-readable);
  font: 760 11px/1.35 var(--jpdb-reader-font);
  overflow-wrap: anywhere;
}
.jpdb-reader-recommended-status[data-import-state="queued"] {
  color: var(--jpdb-reader-muted);
}
.jpdb-reader-order-head,
.jpdb-reader-order-row {
  display: grid;
  gap: 10px;
  align-items: center;
  box-sizing: border-box;
  min-width: 0;
}
.jpdb-reader-dictionary-head,
.jpdb-reader-dictionary-row,
.jpdb-reader-audio-source-head,
.jpdb-reader-audio-source-row,
.jpdb-reader-lookup-link-head,
.jpdb-reader-lookup-link-row {
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.9fr) max-content 42px;
}
.jpdb-reader-lookup-link-head,
.jpdb-reader-lookup-link-row {
  grid-template-columns: 56px minmax(110px, 0.8fr) minmax(220px, 1.2fr) 73px 42px;
}
.jpdb-reader-dictionary-head.no-remove,
.jpdb-reader-dictionary-row.no-remove {
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.9fr) max-content;
}
.jpdb-reader-dictionary-head.compact,
.jpdb-reader-dictionary-row.compact {
  grid-template-columns: 56px minmax(0, 1fr) max-content 42px;
}
.jpdb-reader-dictionary-head.compact.no-remove,
.jpdb-reader-dictionary-row.compact.no-remove {
  grid-template-columns: 56px minmax(0, 1fr) max-content;
}
.jpdb-reader-order-head {
  padding: 0 10px;
  color: var(--jpdb-reader-faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.jpdb-reader-order-head > span:first-child {
  text-align: center;
}
.jpdb-reader-order-row {
  position: relative;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: var(--jpdb-reader-surface);
  padding: 10px;
  min-height: 56px;
  width: 100%;
}
.jpdb-reader-dictionary-row-help {
  grid-column: 2 / -1;
  color: var(--jpdb-reader-muted);
  font-size: 11px;
  line-height: 1.35;
}
.jpdb-reader-settings .jpdb-reader-dictionary-toggle {
  margin: 0;
  justify-content: center;
  color: var(--jpdb-reader-text);
}
.jpdb-reader-settings .jpdb-reader-order-toggle {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 6px;
}
.jpdb-reader-audio-source-choice select,
.jpdb-reader-audio-source-fields input,
.jpdb-reader-audio-source-fields select {
  min-width: 0;
  width: 100%;
}
.jpdb-reader-lookup-link-row input {
  min-width: 0;
}
.jpdb-reader-lookup-link-row > .jpdb-reader-order-toggle {
  grid-column: 1;
}
.jpdb-reader-lookup-link-row > input[name$=".label"] {
  grid-column: 2;
}
.jpdb-reader-lookup-link-row > input[name$=".urlTemplate"],
.jpdb-reader-lookup-link-row > .jpdb-reader-lookup-link-note {
  grid-column: 3;
}
.jpdb-reader-lookup-link-row > .jpdb-reader-row-order-tools {
  grid-column: 4;
}
.jpdb-reader-lookup-link-row > .jpdb-reader-row-remove-tools {
  grid-column: 5;
}
.jpdb-reader-lookup-link-note {
  color: var(--jpdb-reader-muted);
  min-height: 38px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  overflow-wrap: anywhere;
}
.jpdb-reader-lookup-link-fixed {
  width: 34px;
  height: 34px;
}
.jpdb-reader-lookup-link-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 3px;
}
.jpdb-reader-lookup-link-actions .jpdb-reader-btn {
  width: auto !important;
  min-width: 86px !important;
  padding-inline: 16px !important;
}
.jpdb-reader-settings .jpdb-reader-audio-index {
  margin: 0;
  min-height: 38px;
  justify-content: center;
  color: var(--jpdb-reader-text);
}
.jpdb-reader-audio-source-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 6px;
  align-items: center;
  align-self: start;
  min-width: 0;
}
.jpdb-reader-audio-source-choice select {
  grid-column: 1;
  grid-row: 1;
}
.jpdb-reader-audio-source-choice .jpdb-reader-icon-mini {
  grid-column: 2;
  grid-row: 1;
}
.jpdb-reader-audio-source-choice > .jpdb-reader-control-text-mirror {
  grid-column: 1 / -1;
}
.jpdb-reader-audio-source-fields {
  display: grid;
  gap: 6px;
  align-self: start;
}
.jpdb-reader-row-tools {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  flex-wrap: nowrap;
  min-width: max-content;
}
.jpdb-reader-drag-handle {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.jpdb-reader-drag-handle:active,
.jpdb-reader-order-row-dragging .jpdb-reader-drag-handle {
  cursor: grabbing;
}
.jpdb-reader-order-row-drag-pending,
.jpdb-reader-order-row-dragging {
  user-select: none;
  -webkit-user-select: none;
}
.jpdb-reader-order-row-dragging {
  border-color: var(--jpdb-reader-accent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--jpdb-reader-accent) 18%, transparent);
  z-index: 2;
}
.jpdb-reader-icon-mini {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 !important;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: transparent;
  color: var(--jpdb-reader-text);
  cursor: pointer;
  font: 800 13px/1 var(--jpdb-reader-font);
  transform: translateY(-0.01rem);
}
.jpdb-reader-icon-mini svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-reader-icon-mini:hover,
.jpdb-reader-icon-mini:focus-visible {
  border-color: var(--jpdb-reader-accent);
  box-shadow: 0 8px 18px
    color-mix(in srgb, var(--jpdb-reader-accent) 22%, transparent);
  color: var(--jpdb-reader-accent-readable);
  transform: translateY(-0.25rem);
  outline: none;
}
.jpdb-reader-icon-mini:active {
  transform: scale(0.98);
}
.jpdb-reader-icon-mini:disabled,
.jpdb-reader-icon-mini[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}
.jpdb-reader-icon-mini:disabled:hover,
.jpdb-reader-icon-mini[aria-disabled="true"]:hover {
  border-color: var(--jpdb-reader-border);
  box-shadow: none;
  color: var(--jpdb-reader-text);
  transform: none;
}

@media (min-width: 700px) and (max-width: 1180px) and (hover: hover) and (pointer: fine) {
  .jpdb-reader-settings {
    width: min(860px, calc(100vw - 44px));
    max-height: min(820px, calc(100vh - 44px));
    max-height: min(820px, calc(100dvh - 44px));
  }

  .jpdb-reader-settings-head {
    padding: 20px 22px 0;
  }

  .jpdb-reader-settings-tabs {
    padding-inline: 22px;
  }

  .jpdb-reader-settings-scroll {
    padding: 0 22px 104px;
  }

  .jpdb-reader-dictionary-head,
  .jpdb-reader-dictionary-row,
  .jpdb-reader-audio-source-head,
  .jpdb-reader-audio-source-row,
  .jpdb-reader-lookup-link-head,
  .jpdb-reader-lookup-link-row {
    grid-template-columns: 52px minmax(0, 0.95fr) minmax(0, 1.1fr) max-content 42px;
  }

  .jpdb-reader-lookup-link-head,
  .jpdb-reader-lookup-link-row {
    grid-template-columns: 52px minmax(110px, 0.8fr) minmax(220px, 1.2fr) 73px 42px;
  }

  .jpdb-reader-dictionary-head.no-remove,
  .jpdb-reader-dictionary-row.no-remove {
    grid-template-columns: 52px minmax(0, 0.95fr) minmax(0, 1.1fr) max-content;
  }

  .jpdb-reader-dictionary-head.compact,
  .jpdb-reader-dictionary-row.compact {
    grid-template-columns: 52px minmax(0, 1fr) max-content 42px;
  }

  .jpdb-reader-dictionary-head.compact.no-remove,
  .jpdb-reader-dictionary-row.compact.no-remove {
    grid-template-columns: 52px minmax(0, 1fr) max-content;
  }

  .jpdb-reader-recommended-item {
    grid-template-columns: minmax(0, 1fr) minmax(112px, 140px);
  }
}

@media (max-width: 699px), (hover: none), (pointer: coarse) {
  .jpdb-reader-order-head {
    display: none;
  }

  .jpdb-reader-dictionary-row,
  .jpdb-reader-dictionary-row.compact,
  .jpdb-reader-audio-source-row,
  .jpdb-reader-lookup-link-row {
    grid-template-columns: 44px minmax(0, 1fr) 73px;
    align-items: start;
    gap: 6px;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-order-toggle,
  .jpdb-reader-audio-source-row > .jpdb-reader-order-toggle,
  .jpdb-reader-lookup-link-row > .jpdb-reader-order-toggle {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-field-display,
  .jpdb-reader-dictionary-row > input[name$=".name"],
  .jpdb-reader-audio-source-row .jpdb-reader-audio-source-choice,
  .jpdb-reader-lookup-link-row > input[name$=".label"] {
    grid-column: 2;
    grid-row: 1;
  }

  .jpdb-reader-dictionary-row > input[name$=".alias"],
  .jpdb-reader-dictionary-row > .jpdb-reader-field-display[aria-label="Display name"],
  .jpdb-reader-audio-source-row .jpdb-reader-audio-source-fields,
  .jpdb-reader-lookup-link-row > input[name$=".urlTemplate"],
  .jpdb-reader-lookup-link-row > .jpdb-reader-lookup-link-note {
    grid-column: 2;
    grid-row: 2;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-row-order-tools,
  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-row-order-tools,
  .jpdb-reader-audio-source-row .jpdb-reader-row-order-tools,
  .jpdb-reader-lookup-link-row .jpdb-reader-row-order-tools {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    align-content: flex-start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-row-remove-tools,
  .jpdb-reader-audio-source-row .jpdb-reader-row-remove-tools,
  .jpdb-reader-lookup-link-row .jpdb-reader-row-remove-tools {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools {
    display: grid;
    grid-template-columns: 34px 34px;
    grid-template-rows: 34px 34px;
    gap: 5px;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools [data-action$="-up"] {
    grid-column: 1;
    grid-row: 1;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools [data-action$="-down"] {
    grid-column: 1;
    grid-row: 2;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools [data-source-drag-handle] {
    grid-column: 2;
    grid-row: 2;
  }

  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-field-display,
  .jpdb-reader-dictionary-row[data-dictionary-source-row] > .jpdb-reader-dictionary-row-help {
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  .jpdb-reader-dictionary-row-help {
    grid-column: 1 / -1;
  }
}

@media (pointer: coarse) and (min-width: 700px) {
  .jpdb-reader-settings {
    inset: auto 0 0 0;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--jpdb-reader-settings-drawer-bottom, 0px);
    transform: none;
    width: 100%;
    height: var(--jpdb-reader-settings-drawer-height, 88svh);
    min-height: var(--jpdb-reader-settings-drawer-min-height, 280px);
    max-height: var(--jpdb-reader-settings-drawer-viewport-height, 100svh);
    border-radius: 18px 18px 0 0;
  }

  .jpdb-reader-settings.jpdb-reader-settings-drawer-resizing {
    user-select: none;
  }

  .jpdb-reader-settings.jpdb-reader-settings-drawer-expanded {
    border-radius: 0;
  }

  .jpdb-reader-settings-drag-handle {
    display: block;
  }

  .jpdb-reader-settings-head {
    padding: 8px 24px 0;
  }

  .jpdb-reader-settings-tabs {
    padding: 0 24px 10px;
  }

  .jpdb-reader-settings-scroll {
    padding: 0 24px 108px;
  }

}

@media (pointer: coarse) and (min-width: 700px) and (max-width: 900px) {
  .jpdb-reader-settings .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .jpdb-reader-settings-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

@media (max-width: 900px) {
  .jpdb-reader-anki-layout,
  .jpdb-reader-anki-choice-grid,
  .jpdb-reader-settings .jpdb-reader-anki-connection-grid,
  .jpdb-reader-settings .jpdb-reader-anki-card-grid,
  .jpdb-reader-settings .jpdb-reader-anki-actions,
  .jpdb-reader-anki-actions {
    grid-template-columns: 1fr;
  }

  .jpdb-reader-anki-adapter {
    padding: 12px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
    border-left: 0;
  }

  .jpdb-reader-settings .jpdb-reader-anki-adapter .grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 699px) {
  .jpdb-reader-settings-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .jpdb-reader-settings input[type="number"] {
    max-width: none;
  }

  .jpdb-reader-dictionary-row[data-dictionary-source-row] > .jpdb-reader-field-display {
    height: auto;
    min-height: 38px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.25;
  }

  .jpdb-reader-settings {
    inset: auto 0 0 0;
    left: 0;
    right: 0;
    top: auto;
    bottom: var(--jpdb-reader-settings-drawer-bottom, 0px);
    transform: none;
    width: 100%;
    height: var(--jpdb-reader-settings-drawer-height, 88svh);
    min-height: var(--jpdb-reader-settings-drawer-min-height, 280px);
    max-height: var(--jpdb-reader-settings-drawer-viewport-height, 100svh);
    border-radius: 16px 16px 0 0;
  }

  .jpdb-reader-settings.jpdb-reader-settings-drawer-resizing {
    user-select: none;
  }

  .jpdb-reader-settings.jpdb-reader-settings-drawer-expanded {
    border-radius: 0;
  }

  .jpdb-reader-settings-drag-handle {
    display: block;
  }

  .jpdb-reader-settings-head {
    padding: 8px 14px 0;
  }

  .jpdb-reader-settings-tabs {
    padding: 0 14px 8px;
  }

  .jpdb-reader-settings-scroll {
    padding: 0 14px 100px;
  }

  .jpdb-reader-settings fieldset {
    margin: 10px 0;
    padding: 11px;
  }

  /* .grid is intentionally omitted: its auto-fit track sizing already
     collapses to a single column on narrow dialogs, based on the real
     dialog width rather than the viewport. */
  .jpdb-reader-settings-actions,
  .jpdb-reader-anki-layout,
  .jpdb-reader-anki-choice-grid,
  .jpdb-reader-template-preview-grid,
  .jpdb-reader-recommended-item {
    grid-template-columns: 1fr;
  }

  .jpdb-reader-anki-adapter {
    padding: 12px 0 0;
    border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
    border-left: 0;
  }

  .jpdb-reader-settings .jpdb-reader-anki-adapter .grid {
    grid-template-columns: 1fr;
  }

  .jpdb-reader-settings .jpdb-reader-help-actions {
    gap: 6px;
  }

  .jpdb-reader-settings .jpdb-reader-help-actions .jpdb-reader-btn {
    min-height: 40px;
    padding-inline: 6px;
    font-size: 11px;
  }

  .jpdb-reader-settings .jpdb-reader-tag-add-row input,
  .jpdb-reader-settings .jpdb-reader-tag-add-row .jpdb-reader-btn {
    flex-basis: 100%;
  }

  .jpdb-reader-order-head {
    display: none;
  }

  .jpdb-reader-dictionary-row,
  .jpdb-reader-dictionary-row.compact,
  .jpdb-reader-audio-source-row,
  .jpdb-reader-lookup-link-row {
    grid-template-columns: 44px minmax(0, 1fr) 73px;
    align-items: center;
    gap: 6px;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-order-toggle,
  .jpdb-reader-audio-source-row > .jpdb-reader-order-toggle,
  .jpdb-reader-lookup-link-row > .jpdb-reader-order-toggle {
    grid-column: 1;
    grid-row: 1;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-field-display,
  .jpdb-reader-audio-source-choice,
  .jpdb-reader-lookup-link-row > input[name$=".label"] {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .jpdb-reader-dictionary-row > input[name$=".alias"],
  .jpdb-reader-dictionary-row > .jpdb-reader-field-display[aria-label="Display name"],
  .jpdb-reader-audio-source-fields,
  .jpdb-reader-lookup-link-row > input[name$=".urlTemplate"],
  .jpdb-reader-lookup-link-note {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .jpdb-reader-row-order-tools {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
    min-width: 0;
  }

  .jpdb-reader-dictionary-row {
    grid-template-columns: 44px minmax(0, 1fr) 73px;
    align-items: start;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-order-toggle {
    align-self: start;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-field-display,
  .jpdb-reader-dictionary-row > input[name$=".name"] {
    grid-column: 2;
    grid-row: 1;
  }

  .jpdb-reader-dictionary-row > input[name$=".alias"],
  .jpdb-reader-dictionary-row > .jpdb-reader-field-display[aria-label="Display name"] {
    grid-column: 2;
    grid-row: 2;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-row-order-tools {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    align-content: flex-start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-row-remove-tools {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] {
    grid-template-columns: 44px minmax(0, 1fr) 73px;
  }

  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-field-display,
  .jpdb-reader-dictionary-row[data-dictionary-source-row] > .jpdb-reader-dictionary-row-help {
    grid-column: 2;
    overflow-wrap: anywhere;
  }

  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-row-order-tools {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    align-content: flex-start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-row-remove-tools {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-row-tools {
    grid-column: auto;
    justify-content: flex-start;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .jpdb-reader-audio-source-row,
  .jpdb-reader-lookup-link-row {
    grid-template-columns: 44px minmax(0, 1fr) 73px;
    align-items: start;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-order-toggle,
  .jpdb-reader-lookup-link-row .jpdb-reader-order-toggle {
    align-self: start;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-audio-source-choice,
  .jpdb-reader-lookup-link-row > input[name$=".label"] {
    grid-column: 2;
    grid-row: 1;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-audio-source-fields,
  .jpdb-reader-lookup-link-row > input[name$=".urlTemplate"],
  .jpdb-reader-lookup-link-row > .jpdb-reader-lookup-link-note {
    grid-column: 2;
    grid-row: 2;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-row-order-tools,
  .jpdb-reader-lookup-link-row .jpdb-reader-row-order-tools {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: start;
    align-content: flex-start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-row-remove-tools,
  .jpdb-reader-lookup-link-row .jpdb-reader-row-remove-tools {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-content: flex-end;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
  }

  .jpdb-reader-audio-source-row .jpdb-reader-icon-mini {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }

  .jpdb-reader-lookup-link-row .jpdb-reader-row-tools {
    justify-content: flex-end;
  }

  .jpdb-reader-dictionary-row-help {
    grid-column: 1 / -1;
  }

  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-dictionary-row-help {
    grid-column: 2;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-row-order-tools,
  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-row-order-tools,
  .jpdb-reader-audio-source-row .jpdb-reader-row-order-tools,
  .jpdb-reader-lookup-link-row .jpdb-reader-row-order-tools {
    grid-column: 3;
    grid-row: 1 / span 2;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
    justify-content: flex-end;
    align-self: start;
    align-content: flex-start;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools {
    display: grid;
    grid-template-columns: 34px 34px;
    grid-template-rows: 34px 34px;
    gap: 5px;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools [data-action$="-up"] {
    grid-column: 1;
    grid-row: 1;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools [data-action$="-down"] {
    grid-column: 1;
    grid-row: 2;
  }

  .jpdb-reader-order-row .jpdb-reader-row-order-tools [data-source-drag-handle] {
    grid-column: 2;
    grid-row: 2;
  }

  .jpdb-reader-dictionary-row > .jpdb-reader-row-remove-tools,
  .jpdb-reader-audio-source-row .jpdb-reader-row-remove-tools,
  .jpdb-reader-lookup-link-row .jpdb-reader-row-remove-tools {
    grid-column: 3;
    grid-row: 1;
    width: 73px;
    min-width: 73px;
    max-width: 73px;
    justify-content: flex-end;
  }

  .jpdb-reader-audio-source-choice,
  .jpdb-reader-audio-source-fields,
  .jpdb-reader-lookup-link-row > input[name$=".label"],
  .jpdb-reader-lookup-link-row > input[name$=".urlTemplate"],
  .jpdb-reader-lookup-link-row > .jpdb-reader-lookup-link-note,
  .jpdb-reader-dictionary-row > .jpdb-reader-field-display,
  .jpdb-reader-dictionary-row > input[name$=".alias"] {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .jpdb-reader-audio-source-fields select,
  .jpdb-reader-audio-source-fields input,
  .jpdb-reader-lookup-link-row input,
  .jpdb-reader-dictionary-row > .jpdb-reader-field-display {
    min-height: 40px;
  }

  .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-dictionary-row-help,
  .jpdb-reader-lookup-link-note {
    line-height: 1.3;
  }

  @media (max-width: 380px) {
    .jpdb-reader-order-row {
      grid-template-columns: 44px minmax(0, 1fr) 73px;
      gap: 5px;
      padding: 8px;
    }

    .jpdb-reader-order-row .jpdb-reader-icon-mini {
      width: 34px !important;
      min-width: 34px !important;
      max-width: 34px !important;
      height: 34px !important;
      min-height: 34px !important;
      max-height: 34px !important;
    }

    .jpdb-reader-order-row .jpdb-reader-row-tools {
      gap: 5px;
      width: 73px;
      min-width: 73px;
      max-width: 73px;
    }

    .jpdb-reader-dictionary-row > .jpdb-reader-row-order-tools,
    .jpdb-reader-dictionary-row.compact[data-dictionary-source-row] > .jpdb-reader-row-order-tools,
    .jpdb-reader-audio-source-row .jpdb-reader-row-order-tools,
    .jpdb-reader-lookup-link-row .jpdb-reader-row-order-tools,
    .jpdb-reader-dictionary-row > .jpdb-reader-row-remove-tools,
    .jpdb-reader-audio-source-row .jpdb-reader-row-remove-tools,
    .jpdb-reader-lookup-link-row .jpdb-reader-row-remove-tools {
      width: 73px;
      min-width: 73px;
      max-width: 73px;
    }

    .jpdb-reader-order-row .jpdb-reader-row-order-tools {
      grid-column: 3;
      grid-row: 1 / span 2;
      align-self: start;
      align-content: flex-start;
      justify-content: flex-end;
    }

    .jpdb-reader-order-row .jpdb-reader-row-remove-tools {
      grid-column: 3;
      grid-row: 1;
      align-self: start;
      justify-content: flex-end;
    }

    .jpdb-reader-dictionary-row.compact[data-dictionary-source-row],
    .jpdb-reader-audio-source-row,
    .jpdb-reader-lookup-link-row {
      grid-template-columns: 44px minmax(0, 1fr) 73px;
    }
  }

  .jpdb-reader-settings .footer {
    justify-content: stretch;
    gap: 12px;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  }

  .jpdb-reader-settings .footer .jpdb-reader-btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (pointer: coarse) and (max-height: 560px) {
  .jpdb-reader-settings-head {
    padding-top: 4px;
  }

  .jpdb-reader-settings h2 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .jpdb-reader-settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .jpdb-reader-settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .jpdb-reader-settings-tab {
    min-height: 38px;
  }
}

@media (pointer: coarse) {
  .jpdb-reader-settings.jpdb-reader-settings-keyboard-open .jpdb-reader-settings-head {
    padding-top: 4px;
  }

  .jpdb-reader-settings.jpdb-reader-settings-keyboard-open h2 {
    margin-bottom: 8px;
    font-size: 18px;
  }

  .jpdb-reader-settings.jpdb-reader-settings-keyboard-open .jpdb-reader-settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .jpdb-reader-settings.jpdb-reader-settings-keyboard-open .jpdb-reader-settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .jpdb-reader-settings.jpdb-reader-settings-keyboard-open .jpdb-reader-settings-tab {
    min-height: 38px;
  }
}
.jpdb-reader-icon-mini[data-immersion-action="previous"],
.jpdb-reader-icon-mini[data-immersion-action="next"],
.jpdb-reader-icon-mini[data-yomu-immersion-action="previous"],
.jpdb-reader-icon-mini[data-yomu-immersion-action="next"],
.jpdb-reader-icon-mini[data-uchisen-action="previous"],
.jpdb-reader-icon-mini[data-uchisen-action="next"],
.jpdb-reader-icon-mini[data-action="kanji-prev"],
.jpdb-reader-icon-mini[data-action="kanji-next"] {
  font-size: 19px;
  line-height: 0;
  padding-bottom: 2px !important;
}


/* UT-47: appearance preview — a sample annotated sentence that restyles
   live with the furigana/colour options (classes cascade from the root). */
.jpdb-reader-settings-appearance-preview {
  min-height: 170px;
  margin: 10px 0 2px;
  padding: 28px 18px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--jpdb-reader-accent) 9%, transparent) 25%,
      transparent 25% 50%,
      color-mix(in srgb, var(--jpdb-reader-accent) 9%, transparent) 50% 75%,
      transparent 75%
    ) 0 0 / 30px 30px,
    color-mix(in srgb, var(--jpdb-reader-surface-2) 74%, var(--jpdb-reader-bg));
  color: var(--jpdb-reader-text) !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  text-align: center;
  font-size: 28px;
  line-height: 1.48;
  user-select: none;
}
.jpdb-reader-settings-appearance-preview-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: min(100%, 36em);
  min-width: 0;
}
.jpdb-reader-settings-appearance-preview-line .jpdb-reader-word {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  vertical-align: baseline;
}
.jpdb-reader-settings-appearance-preview .jpdb-reader-word {
  --jpdb-reader-word-underline: var(
    --jpdb-reader-word-accessible-underline,
    var(--jpdb-reader-word-decoration-source, transparent)
  );
  --jpdb-reader-word-underline-offset: .14em;
  --jpdb-reader-word-underline-thickness: .09em;
  color: var(
    --jpdb-reader-word-accessible-color,
    var(--jpdb-reader-word-color-source, currentColor)
  ) !important;
  --jpdb-reader-word-highlight-paint: var(
    --jpdb-reader-word-accessible-highlight,
    var(--jpdb-reader-word-highlight-source, transparent)
  );
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  box-shadow: var(--jpdb-reader-word-highlight-shadow-source, none);
  text-decoration-color: transparent !important;
  text-decoration-thickness: .09em !important;
  text-underline-offset: .14em !important;
}
.jpdb-reader-settings-appearance-preview .jpdb-reader-word.jpdb-reader-has-furi {
  line-height: 1.28;
}
.jpdb-reader-settings-appearance-preview .jpdb-reader-furi {
  color: var(--jpdb-reader-furi-accessible-color, var(--jpdb-reader-muted)) !important;
  font-size: .43em;
}

.jpdb-reader-shortcut-reference {
  display: grid;
  gap: 0.4rem;
}

.jpdb-reader-shortcut-reference-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.jpdb-reader-shortcut-reference-row kbd {
  flex: 0 0 7.5rem;
  font: inherit;
  font-size: 0.85em;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--jpdb-reader-border, rgba(125, 125, 125, 0.35));
  background: var(--jpdb-reader-surface-2, rgba(125, 125, 125, 0.12));
  text-align: center;
  white-space: nowrap;
}


/* Source: src/reader/styles/subtitles-youtube.css */
.jpdb-subtitle-player {
  position: fixed;
  display: block;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483644;
  pointer-events: none;
  --subtitle-font-size-target: 28px;
  --subtitle-font-size: var(--subtitle-font-size-target);
  --subtitle-bottom: 16%;
  --subtitle-drag-offset-y: 0px;
  --subtitle-color: var(--jpdb-reader-video-text);
  --subtitle-outline: var(--jpdb-reader-video-outline);
  --subtitle-background-rgba: transparent;
  --subtitle-family: var(--jpdb-reader-font);
  --subtitle-weight: 760;
}
.jpdb-subtitle-text {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: var(--subtitle-bottom);
  color: var(--subtitle-color);
  text-align: center;
  font: var(--subtitle-weight) var(--subtitle-font-size)/1.36 var(--subtitle-family);
  text-shadow:
    0 1px 2px var(--subtitle-outline),
    0 0 3px var(--subtitle-outline),
    0 0 8px var(--jpdb-reader-video-shadow-strong),
    0 3px 12px var(--jpdb-reader-video-shadow);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
  max-height: min(45%, calc(100% - 24px));
  overflow: visible;
  pointer-events: none;
  transform: translateY(var(--subtitle-drag-offset-y));
  -webkit-tap-highlight-color: transparent;
}
.jpdb-subtitle-lines {
  min-height: 1.36em;
  max-height: inherit;
  overflow: visible;
  pointer-events: none;
}
.jpdb-subtitle-primary,
.jpdb-subtitle-secondary,
.jpdb-subtitle-primary .jpdb-reader-word,
.jpdb-subtitle-secondary .jpdb-reader-word {
  pointer-events: auto;
}
.jpdb-subtitle-drag-handle {
  position: absolute;
  left: 50%;
  top: -28px;
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--jpdb-reader-muted);
  box-shadow: none;
  cursor: grab;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%);
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease, background 120ms ease;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-subtitle-drag-handle span {
  width: 15px;
  height: 9px;
  background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 4px);
}
.jpdb-subtitle-player.jpdb-subtitle-has-lines:not(.jpdb-subtitle-hidden):not(.jpdb-subtitle-controls-idle) .jpdb-subtitle-drag-handle,
.jpdb-subtitle-player.jpdb-subtitle-has-lines:not(.jpdb-subtitle-hidden) .jpdb-subtitle-text:hover .jpdb-subtitle-drag-handle,
.jpdb-subtitle-player.jpdb-subtitle-has-lines:not(.jpdb-subtitle-hidden) .jpdb-subtitle-drag-handle:focus-visible,
.jpdb-subtitle-player.jpdb-subtitle-has-lines:not(.jpdb-subtitle-hidden).jpdb-subtitle-dragging .jpdb-subtitle-drag-handle {
  opacity: .7;
  pointer-events: auto;
}
.jpdb-subtitle-player.jpdb-subtitle-has-lines:not(.jpdb-subtitle-hidden) .jpdb-subtitle-drag-handle:is(:hover, :focus-visible, .jpdb-subtitle-dragging) {
  border-color: var(--jpdb-reader-accent);
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  box-shadow: 0 8px 20px var(--jpdb-reader-video-shadow);
  opacity: 1;
}
.jpdb-subtitle-drag-handle.jpdb-subtitle-dragging {
  cursor: grabbing;
}
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable {
  --jpdb-subtitle-asb-drag-offset-y: 0px;
  transform: translateY(var(--jpdb-subtitle-asb-drag-offset-y)) var(--jpdb-subtitle-asb-base-transform, translateZ(0));
}
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable > .jpdb-subtitle-asb-drag-handle {
  top: -32px;
  z-index: 2147483645;
  pointer-events: auto;
}
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable.jpdb-subtitle-controls-hidden > .jpdb-subtitle-asb-drag-handle {
  display: none !important;
}
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable.jpdb-subtitle-has-lines:not(.jpdb-subtitle-controls-idle) > .jpdb-subtitle-asb-drag-handle,
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable:hover > .jpdb-subtitle-asb-drag-handle,
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable:focus-within > .jpdb-subtitle-asb-drag-handle,
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable.jpdb-subtitle-dragging > .jpdb-subtitle-asb-drag-handle {
  opacity: .7;
  pointer-events: auto;
}
.asbplayer-subtitles-container-bottom.jpdb-subtitle-asb-movable > .jpdb-subtitle-asb-drag-handle:is(:hover, :focus-visible, .jpdb-subtitle-dragging) {
  border-color: var(--jpdb-reader-accent);
  background: var(--jpdb-reader-surface);
  color: var(--jpdb-reader-text);
  opacity: 1;
}
.jpdb-subtitle-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.jpdb-subtitle-player:not(.jpdb-subtitle-has-video-frame) .jpdb-subtitle-rail,
.jpdb-subtitle-video-out-of-view .jpdb-subtitle-text,
.jpdb-subtitle-video-out-of-view .jpdb-subtitle-drag-handle,
.jpdb-subtitle-video-out-of-view .jpdb-subtitle-rail {
  display: none !important;
  pointer-events: none !important;
}
.jpdb-subtitle-primary {
  display: inline;
  padding: 0 .06em;
  border-radius: 3px;
  background: var(--subtitle-background-rgba);
  box-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  line-height: 1.58;
  overflow-wrap: normal;
  word-break: keep-all;
  -webkit-text-stroke: .02em color-mix(in srgb, var(--subtitle-outline) 78%, transparent);
  paint-order: stroke fill;
}
.jpdb-subtitle-primary:empty {
  display: none;
}
.jpdb-subtitle-secondary {
  --jpdb-subtitle-secondary-color: var(--jpdb-reader-video-text-muted);
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  color: var(--jpdb-subtitle-secondary-color);
  font: var(--subtitle-weight) .62em/1.25 var(--subtitle-family);
  min-height: 24px;
  text-shadow: 0 2px 2px var(--jpdb-reader-black), 0 0 7px var(--jpdb-reader-video-shadow-heavy);
  cursor: pointer;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jpdb-subtitle-secondary-blurred {
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px var(--jpdb-subtitle-secondary-color), 0 0 9px var(--jpdb-reader-video-shadow-heavy);
  opacity: .82;
}
.jpdb-subtitle-secondary-blurred:hover,
.jpdb-subtitle-secondary-blurred:focus-visible {
  color: var(--jpdb-subtitle-secondary-color) !important;
  -webkit-text-fill-color: var(--jpdb-subtitle-secondary-color);
  text-shadow: 0 2px 2px var(--jpdb-reader-black), 0 0 7px var(--jpdb-reader-video-shadow-heavy);
  opacity: 1;
}
.jpdb-subtitle-karaoke-word {
  display: inline;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.jpdb-subtitle-word-pending {
  opacity: .42;
}
.jpdb-subtitle-word-spoken,
.jpdb-subtitle-word-current {
  opacity: 1;
  color: var(--subtitle-color);
}
.jpdb-subtitle-word-spoken {
  color: color-mix(in srgb, var(--jpdb-reader-accent) 58%, var(--subtitle-color));
  --jpdb-reader-word-underline: var(--jpdb-reader-accent);
  text-decoration-line: underline;
  text-decoration-color: var(--jpdb-reader-accent);
  text-decoration-thickness: .09em;
  text-underline-offset: .16em;
}
.jpdb-subtitle-word-current {
  --jpdb-reader-word-underline: var(--subtitle-color);
  text-decoration-line: underline;
  text-decoration-color: var(--subtitle-color);
  text-decoration-thickness: .1em;
  text-underline-offset: .16em;
}
.jpdb-reader-word:is(.jpdb-subtitle-word-spoken, .jpdb-subtitle-word-current) {
  text-decoration-color: transparent;
}
.jpdb-subtitle-primary .jpdb-reader-word {
  --jpdb-reader-subtitle-fallback: var(--subtitle-color);
  --jpdb-reader-subtitle-highlight-default: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 24%,
    transparent
  );
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--subtitle-color) !important;
  -webkit-text-fill-color: var(--subtitle-color);
  --jpdb-reader-word-underline: transparent;
  --jpdb-reader-word-underline-offset: .15em;
  --jpdb-reader-word-underline-thickness: .08em;
  text-decoration-line: none !important;
  text-decoration-style: solid !important;
  text-decoration-color: transparent !important;
  text-decoration-thickness: .08em !important;
  text-underline-offset: .15em !important;
  white-space: nowrap;
  text-shadow:
    0 1px 2px var(--subtitle-outline),
    0 0 3px var(--subtitle-outline),
    0 0 8px var(--jpdb-reader-video-shadow-strong),
    0 3px 12px var(--jpdb-reader-video-shadow);
  -webkit-text-stroke: .02em color-mix(in srgb, var(--subtitle-outline) 78%, transparent);
  paint-order: stroke fill;
}
.jpdb-subtitle-primary .jpdb-reader-word::after {
  text-shadow: none !important;
}

/* Touch/pen tap targets for subtitle words. any-pointer:coarse (not the primary
   pointer) so an iPad with an Apple Pencil — which reports pointer:fine +
   hover:hover yet still has a coarse touchscreen — gets them too. The expander
   grows the target vertically into the line-height gap but is clamped so two
   stacked words on a 2-line cue do NOT overlap (the old -0.5em insets overlapped
   by ~1em, causing wrong-row mis-taps); horizontal slop is tiny because
   contiguous Japanese has ~no inter-word gap, so growing it overlaps the
   neighbour and mis-resolves the tap. Precise single-kana taps come from the
   pointerup-geometry recovery in the tap handler, not from oversized hitboxes. */
@media (any-pointer: coarse) {
  .jpdb-subtitle-primary .jpdb-reader-word::before,
  .jpdb-subtitle-row-text .jpdb-reader-word::before {
    content: "";
    position: absolute;
    inset: -0.28em -0.06em;
    z-index: 0;
    pointer-events: auto;
  }
}
.jpdb-subtitle-primary .jpdb-reader-word:hover,
.jpdb-subtitle-primary .jpdb-reader-word:focus-visible {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-video-control-hover), var(--jpdb-reader-video-control-hover)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
}
.jpdb-subtitle-primary .jpdb-reader-word.jpdb-reader-has-furi {
  line-height: 1.48;
}
:is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word {
  --jpdb-reader-subtitle-status-color: var(--jpdb-reader-status-color, transparent);
  --jpdb-reader-subtitle-status-text: var(--jpdb-reader-status-readable, var(--jpdb-reader-status-color, var(--jpdb-reader-subtitle-fallback, currentColor)));
  --jpdb-reader-subtitle-status-decoration: var(--jpdb-reader-status-readable, var(--jpdb-reader-status-color, transparent));
  --jpdb-reader-subtitle-jpdb-color: var(--jpdb-reader-jpdb-color, transparent);
  --jpdb-reader-subtitle-jpdb-text: var(--jpdb-reader-jpdb-readable, var(--jpdb-reader-jpdb-color, var(--jpdb-reader-subtitle-fallback, currentColor)));
  --jpdb-reader-subtitle-jpdb-decoration: var(--jpdb-reader-jpdb-readable, var(--jpdb-reader-jpdb-color, transparent));
  --jpdb-reader-subtitle-anki-color: var(--jpdb-reader-anki-color, transparent);
  --jpdb-reader-subtitle-anki-text: var(--jpdb-reader-anki-readable, var(--jpdb-reader-anki-color, var(--jpdb-reader-subtitle-fallback, currentColor)));
  --jpdb-reader-subtitle-anki-decoration: var(--jpdb-reader-anki-readable, var(--jpdb-reader-anki-color, transparent));
  --jpdb-reader-subtitle-pitch-color: var(--jpdb-reader-pitch-color, var(--jpdb-reader-pitch-unknown));
  --jpdb-reader-subtitle-pitch-text: var(--jpdb-reader-pitch-readable, var(--jpdb-reader-subtitle-pitch-color));
  --jpdb-reader-subtitle-pitch-decoration: var(--jpdb-reader-subtitle-pitch-text);
  --jpdb-reader-subtitle-source-status-soft: color-mix(in srgb, var(--jpdb-reader-subtitle-status-decoration) 28%, transparent);
  --jpdb-reader-subtitle-source-jpdb-soft: color-mix(in srgb, var(--jpdb-reader-subtitle-jpdb-decoration) 28%, transparent);
  --jpdb-reader-subtitle-source-anki-soft: color-mix(in srgb, var(--jpdb-reader-subtitle-anki-decoration) 28%, transparent);
  --jpdb-reader-subtitle-source-pitch-soft: color-mix(in srgb, var(--jpdb-reader-subtitle-pitch-text) 30%, transparent);
  --jpdb-reader-subtitle-highlight-default: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 24%,
    transparent
  );
  --jpdb-reader-word-underline: transparent;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
  color: var(--jpdb-reader-subtitle-fallback, currentColor) !important;
  -webkit-text-fill-color: var(--jpdb-reader-subtitle-fallback, currentColor);
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
}
:is(.jpdb-subtitle-primary, .asbplayer-subtitles-container-bottom) .jpdb-reader-word {
  --jpdb-reader-subtitle-status-text: var(--jpdb-reader-status-color, var(--jpdb-reader-status-readable, var(--jpdb-reader-subtitle-fallback, currentColor)));
  --jpdb-reader-subtitle-status-decoration: var(--jpdb-reader-status-color, var(--jpdb-reader-status-readable, transparent));
  --jpdb-reader-subtitle-jpdb-text: var(--jpdb-reader-jpdb-color, var(--jpdb-reader-jpdb-readable, var(--jpdb-reader-subtitle-fallback, currentColor)));
  --jpdb-reader-subtitle-jpdb-decoration: var(--jpdb-reader-jpdb-color, var(--jpdb-reader-jpdb-readable, transparent));
  --jpdb-reader-subtitle-anki-text: var(--jpdb-reader-anki-color, var(--jpdb-reader-anki-readable, var(--jpdb-reader-subtitle-fallback, currentColor)));
  --jpdb-reader-subtitle-anki-decoration: var(--jpdb-reader-anki-color, var(--jpdb-reader-anki-readable, transparent));
  --jpdb-reader-subtitle-pitch-text: var(--jpdb-reader-subtitle-pitch-color);
  --jpdb-reader-subtitle-pitch-decoration: var(--jpdb-reader-subtitle-pitch-text);
}
.jpdb-reader-subtitle-highlight-status :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-highlight: var(--jpdb-reader-subtitle-source-status-soft, var(--jpdb-reader-source-status-soft, var(--jpdb-reader-subtitle-highlight-default))); }
.jpdb-reader-subtitle-highlight-jpdb :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-highlight: var(--jpdb-reader-subtitle-source-jpdb-soft, var(--jpdb-reader-source-jpdb-soft, var(--jpdb-reader-subtitle-highlight-default))); }
.jpdb-reader-subtitle-highlight-anki :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-highlight: var(--jpdb-reader-subtitle-source-anki-soft, var(--jpdb-reader-source-anki-soft, var(--jpdb-reader-subtitle-highlight-default))); }
.jpdb-reader-subtitle-highlight-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) { --jpdb-reader-subtitle-highlight: var(--jpdb-reader-subtitle-source-pitch-soft, var(--jpdb-reader-source-pitch-soft, var(--jpdb-reader-subtitle-highlight-default))); }
.jpdb-reader-subtitle-underline-status :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface) .jpdb-reader-word { --jpdb-reader-word-underline: var(--jpdb-reader-subtitle-status-decoration); }
.jpdb-reader-subtitle-underline-jpdb :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface) .jpdb-reader-word { --jpdb-reader-word-underline: var(--jpdb-reader-subtitle-jpdb-decoration); }
.jpdb-reader-subtitle-underline-anki :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface) .jpdb-reader-word { --jpdb-reader-word-underline: var(--jpdb-reader-subtitle-anki-decoration); }
.jpdb-reader-subtitle-underline-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface) .jpdb-reader-word:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) { --jpdb-reader-word-underline: var(--jpdb-reader-subtitle-pitch-decoration); }
.jpdb-reader-subtitle-text-status :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-text: var(--jpdb-reader-subtitle-status-text); }
.jpdb-reader-subtitle-text-jpdb :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-text: var(--jpdb-reader-subtitle-jpdb-text); }
.jpdb-reader-subtitle-text-anki :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-text: var(--jpdb-reader-subtitle-anki-text); }
.jpdb-reader-subtitle-text-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word { --jpdb-reader-subtitle-text: var(--jpdb-reader-subtitle-pitch-text); }
:is(.jpdb-reader-subtitle-highlight-status, .jpdb-reader-subtitle-highlight-jpdb, .jpdb-reader-subtitle-highlight-anki, .jpdb-reader-subtitle-highlight-pitch) :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word {
  --jpdb-reader-word-highlight-paint: var(--jpdb-reader-subtitle-highlight, transparent);
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
}
:is(.jpdb-reader-subtitle-highlight-status, .jpdb-reader-subtitle-highlight-jpdb, .jpdb-reader-subtitle-highlight-anki, .jpdb-reader-subtitle-highlight-pitch) :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word.jpdb-reader-has-furi {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
}
:is(.jpdb-reader-subtitle-highlight-status, .jpdb-reader-subtitle-highlight-jpdb, .jpdb-reader-subtitle-highlight-anki, .jpdb-reader-subtitle-highlight-pitch) :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word.jpdb-reader-has-furi .jpdb-reader-ruby-base {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.jpdb-reader-subtitle-highlight-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) {
  --jpdb-reader-word-highlight-paint: color-mix(
    in srgb,
    var(--jpdb-reader-subtitle-pitch-text) 30%,
    var(--jpdb-reader-highlight-backdrop)
  );
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  box-shadow: var(--jpdb-reader-highlight-shadow);
}
.jpdb-reader-subtitle-highlight-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word.jpdb-reader-has-furi:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  box-shadow: var(--jpdb-reader-highlight-shadow);
}
.jpdb-reader-subtitle-highlight-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word.jpdb-reader-has-furi:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) .jpdb-reader-ruby-base {
  background-color: transparent !important;
  background-image: linear-gradient(var(--jpdb-reader-word-highlight-paint), var(--jpdb-reader-word-highlight-paint)) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: var(--jpdb-reader-word-highlight-size) 100% !important;
  box-shadow: var(--jpdb-reader-highlight-shadow);
}
:is(.jpdb-reader-subtitle-underline-status, .jpdb-reader-subtitle-underline-jpdb, .jpdb-reader-subtitle-underline-anki, .jpdb-reader-subtitle-underline-pitch) :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface) .jpdb-reader-word {
  text-decoration-line: none !important;
}
.jpdb-reader-subtitle-underline-pitch :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface) .jpdb-reader-word {
  --jpdb-reader-word-underline-offset: .12em;
  --jpdb-reader-word-underline-thickness: .12em;
  text-decoration-thickness: .12em !important;
  text-underline-offset: .12em !important;
  /* No pitch class yet means no semantic color yet — stay invisible instead
     of flashing a currentColor underline while enrichment runs. */
  text-decoration-color: transparent;
}
:is(.jpdb-reader-subtitle-text-status, .jpdb-reader-subtitle-text-jpdb, .jpdb-reader-subtitle-text-anki, .jpdb-reader-subtitle-text-pitch) :is(.jpdb-subtitle-primary, .jpdb-subtitle-row-text, .jpdb-reader-subtitle-surface, .asbplayer-subtitles-container-bottom) .jpdb-reader-word {
  color: var(--jpdb-reader-subtitle-text, var(--jpdb-reader-subtitle-fallback, currentColor)) !important;
  -webkit-text-fill-color: var(--jpdb-reader-subtitle-text, var(--jpdb-reader-subtitle-fallback, currentColor));
}
:is(.jpdb-reader-word-text-status, .jpdb-reader-word-text-jpdb, .jpdb-reader-word-text-anki, .jpdb-reader-word-text-pitch)
  :is(.jpdb-reader-newtab-immersion, [data-immersion-kit])
  .jpdb-reader-example-sentence.jpdb-reader-subtitle-surface
  .jpdb-reader-word {
  color: var(
    --jpdb-reader-word-accessible-color,
    var(--jpdb-reader-word-color-source, var(--jpdb-reader-subtitle-fallback, currentColor))
  ) !important;
  -webkit-text-fill-color: var(
    --jpdb-reader-word-accessible-color,
    var(--jpdb-reader-word-color-source, var(--jpdb-reader-subtitle-fallback, currentColor))
  );
}
.jpdb-subtitle-primary .jpdb-reader-word.jpdb-subtitle-word-pending { opacity: .42; }
.jpdb-subtitle-primary .jpdb-reader-word.jpdb-subtitle-word-spoken {
  opacity: 1;
}
.jpdb-subtitle-primary .jpdb-reader-word.jpdb-subtitle-word-current {
  opacity: 1;
}
.jpdb-subtitle-primary .jpdb-reader-word.jpdb-reader-example-target {
  --jpdb-reader-word-underline: transparent;
  background: color-mix(
    in srgb,
    var(--jpdb-reader-accent-readable, var(--jpdb-reader-accent)) 34%,
    var(--jpdb-reader-video-target-backdrop)
  ) !important;
  text-decoration-color: transparent !important;
}
.jpdb-subtitle-primary
  .jpdb-reader-word.jpdb-reader-example-target.jpdb-reader-has-furi
  .jpdb-reader-ruby-base {
  background: transparent !important;
  box-shadow: none !important;
}
.jpdb-subtitle-primary .jpdb-reader-word.jpdb-subtitle-word-pending {
  filter: saturate(.72);
}
/* Second selector matches the same element in light mode at higher specificity
   than the on-page furigana reset (`:is(.theme-light) .jpdb-reader-word rt` in
   reader-words-ocr.css), which would otherwise strip the outline. That reset
   avoids a muddy glow on light pages; player subtitles sit on dark footage and
   want the outline in both themes. Listed together so the shadow is declared once. */
.jpdb-subtitle-primary .jpdb-reader-furi,
:is(.jpdb-reader-theme-light, .yomu-page-theme-light) .jpdb-subtitle-primary .jpdb-reader-furi {
  color: currentColor;
  opacity: .82;
  text-shadow:
    0 1px 1px var(--subtitle-outline),
    0 0 3px var(--subtitle-outline),
    0 0 7px var(--jpdb-reader-video-shadow-heavy);
}
:is(.jpdb-reader-popover, .yomu-jpdb-page-addon)
  [data-immersion-kit]
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-media {
  --subtitle-font-size: clamp(13px, 3.5cqw, min(var(--subtitle-font-size-target, 18px), 18px));
}
:is(.jpdb-reader-popover, .yomu-jpdb-page-addon)
  [data-immersion-kit]
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence {
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:is(.jpdb-reader-popover, .yomu-jpdb-page-addon)
  [data-immersion-kit]
  .jpdb-reader-example-card.has-image
  .jpdb-reader-example-sentence
  .jpdb-subtitle-primary {
  color: var(--subtitle-color);
  font: var(--subtitle-weight) var(--subtitle-font-size)/1.36 var(--subtitle-family);
  padding: 0.08em 0.34em;
  border-radius: 4px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-wrap: wrap;
  background: var(--subtitle-background-rgba);
  box-decoration-break: clone;
  box-shadow: none;
  text-shadow:
    0 1px 2px var(--subtitle-outline),
    0 0 3px var(--subtitle-outline),
    0 0 8px var(--jpdb-reader-video-shadow-strong),
    0 3px 12px var(--jpdb-reader-video-shadow);
  -webkit-text-stroke: .02em color-mix(in srgb, var(--subtitle-outline) 78%, transparent);
  paint-order: stroke fill;
}
.jpdb-subtitle-primary-loading {
  opacity: .78;
  color: currentColor;
}
.jpdb-reader-subtitle-preview {
  min-height: 94px;
  margin-top: 8px;
  padding: 18px 10px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 10px;
  background:
    linear-gradient(135deg, var(--jpdb-reader-video-grid-line) 25%, transparent 25% 50%, var(--jpdb-reader-video-grid-line) 50% 75%, transparent 75%) 0 0 / 28px 28px,
    var(--jpdb-reader-video-panel);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--subtitle-color);
  font: var(--subtitle-weight) var(--subtitle-font-size)/1.36 var(--subtitle-family);
  text-shadow:
    0 1px 2px var(--subtitle-outline),
    0 0 3px var(--subtitle-outline),
    0 0 8px var(--jpdb-reader-video-shadow-heavy);
}

:is(.jpdb-reader-theme-light, .yomu-page-theme-light) .jpdb-reader-subtitle-preview {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--jpdb-reader-accent) 10%, transparent) 25%,
      transparent 25% 50%,
      color-mix(in srgb, var(--jpdb-reader-accent) 10%, transparent) 50% 75%,
      transparent 75%
    ) 0 0 / 28px 28px,
    color-mix(in srgb, var(--jpdb-reader-surface-2) 62%, var(--jpdb-reader-bg));
  color: color-mix(in srgb, var(--jpdb-reader-text) 84%, var(--subtitle-color));
}
.jpdb-reader-subtitle-preview .jpdb-subtitle-primary {
  display: inline;
}
.jpdb-reader-subtitle-preview .jpdb-reader-word {
  --jpdb-reader-source-status-color: var(--jpdb-reader-status-readable, var(--jpdb-reader-status-color, var(--jpdb-reader-state-new)));
  --jpdb-reader-source-status-decoration: var(--jpdb-reader-source-status-color);
  --jpdb-reader-source-jpdb-color: var(--jpdb-reader-jpdb-readable, var(--jpdb-reader-jpdb-color, var(--jpdb-reader-state-new)));
  --jpdb-reader-source-jpdb-decoration: var(--jpdb-reader-source-jpdb-color);
  --jpdb-reader-source-pitch-color: var(--jpdb-reader-pitch-readable, var(--jpdb-reader-pitch-color, var(--jpdb-reader-pitch-unknown)));
  --jpdb-reader-source-pitch-decoration: transparent;
}
.jpdb-reader-subtitle-preview .jpdb-reader-word:is(.jpdb-new, .jpdb-in-deck) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-new);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-new-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-new);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-new-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word:is(.jpdb-suspended, .jpdb-blacklisted, .jpdb-locked) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-ignored-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-ignored);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-ignored-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word:is(.jpdb-learning, .jpdb-young) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-learning-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-learning);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-learning-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word:is(.jpdb-known, .jpdb-mature, .jpdb-mastered, .jpdb-never-forget, .jpdb-redundant) {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-known);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-known-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-known);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-known-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-due {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-due);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-due-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-due);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-due-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-frequent {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-frequent);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-frequent-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-frequent);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-frequent-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-unparsed {
  --jpdb-reader-jpdb-color: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-jpdb-readable: var(--jpdb-reader-state-unparsed-readable);
  --jpdb-reader-status-color: var(--jpdb-reader-state-unparsed);
  --jpdb-reader-status-readable: var(--jpdb-reader-state-unparsed-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-pitch-heiban {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-heiban);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-heiban-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-pitch-atamadaka {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-atamadaka);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-atamadaka-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-pitch-nakadaka {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-nakadaka);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-nakadaka-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word.jpdb-pitch-odaka {
  --jpdb-reader-pitch-color: var(--jpdb-reader-pitch-odaka);
  --jpdb-reader-pitch-readable: var(--jpdb-reader-pitch-odaka-readable);
}
.jpdb-reader-subtitle-preview .jpdb-reader-word:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) {
  --jpdb-reader-source-pitch-decoration: var(--jpdb-reader-source-pitch-color, transparent);
}
.jpdb-reader-subtitle-preview.jpdb-reader-subtitle-text-status .jpdb-subtitle-primary .jpdb-reader-word {
  color: var(--jpdb-reader-source-status-color, var(--subtitle-color)) !important;
}
.jpdb-reader-subtitle-preview.jpdb-reader-subtitle-text-jpdb .jpdb-subtitle-primary .jpdb-reader-word {
  color: var(--jpdb-reader-source-jpdb-color, var(--subtitle-color)) !important;
}
.jpdb-reader-subtitle-preview.jpdb-reader-subtitle-text-pitch .jpdb-subtitle-primary .jpdb-reader-word {
  color: var(--jpdb-reader-source-pitch-color, var(--subtitle-color)) !important;
}
.jpdb-reader-subtitle-preview.jpdb-reader-subtitle-underline-status .jpdb-subtitle-primary .jpdb-reader-word {
  --jpdb-reader-word-underline: var(--jpdb-reader-source-status-decoration, transparent);
  text-decoration-line: underline !important;
  text-decoration-color: transparent !important;
}
.jpdb-reader-subtitle-preview.jpdb-reader-subtitle-underline-jpdb .jpdb-subtitle-primary .jpdb-reader-word {
  --jpdb-reader-word-underline: var(--jpdb-reader-source-jpdb-decoration, transparent);
  text-decoration-line: underline !important;
  text-decoration-color: transparent !important;
}
.jpdb-reader-subtitle-preview.jpdb-reader-subtitle-underline-pitch .jpdb-subtitle-primary .jpdb-reader-word:is(.jpdb-pitch-heiban, .jpdb-pitch-atamadaka, .jpdb-pitch-nakadaka, .jpdb-pitch-odaka, .jpdb-pitch-kifuku) {
  --jpdb-reader-word-underline: var(--jpdb-reader-source-pitch-decoration, transparent);
  text-decoration-line: underline !important;
  text-decoration-color: transparent !important;
}
.jpdb-subtitle-rail {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  top: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 20px);
  padding: 4px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 82%, transparent);
  box-shadow: 0 12px 30px var(--jpdb-reader-shadow);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  opacity: .78;
  transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease;
}
.jpdb-subtitle-controls-hidden .jpdb-subtitle-rail {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.jpdb-subtitle-controls-auto .jpdb-subtitle-rail:not(:hover):not(:focus-within) { opacity: .72; }
.jpdb-subtitle-controls-auto.jpdb-subtitle-controls-idle:not(.jpdb-subtitle-panel-open) .jpdb-subtitle-rail:not(:hover):not(:focus-within) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}
.jpdb-subtitle-controls-always .jpdb-subtitle-rail {
  opacity: 1;
}
.jpdb-subtitle-rail:hover,
.jpdb-subtitle-panel-open .jpdb-subtitle-rail {
  opacity: 1;
}
.jpdb-subtitle-rail button,
.jpdb-subtitle-list button {
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 86%, transparent);
  color: var(--jpdb-reader-text);
  box-shadow: none;
  font: 700 12px/1 var(--jpdb-reader-font);
  pointer-events: auto;
}
.jpdb-subtitle-rail button {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  width: 34px;
  max-width: 34px;
  min-height: 34px;
  height: 34px;
  max-height: 34px;
  padding: 0;
  flex: 0 0 auto;
  overflow: visible;
  white-space: nowrap;
}
.jpdb-subtitle-rail button[data-action="previous"],
.jpdb-subtitle-rail button[data-action="next"] {
  font-size: 19px;
  line-height: 0;
  padding-bottom: 2px;
}
.jpdb-subtitle-panel-toggle {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 50%, var(--jpdb-reader-border)) !important;
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface)) !important;
}
.jpdb-subtitle-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-subtitle-panel-toggle[aria-pressed="false"] {
  color: var(--jpdb-reader-muted);
  border-color: var(--jpdb-reader-border) !important;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 86%, transparent) !important;
}
.jpdb-subtitle-rail button[hidden] {
  display: none !important;
}
.jpdb-subtitle-rail button:disabled {
  opacity: .45;
}
.jpdb-subtitle-compact-video .jpdb-subtitle-rail {
  top: 8px;
  right: 8px;
  gap: 3px;
  padding: 3px;
}
.jpdb-subtitle-compact-video .jpdb-subtitle-rail button {
  min-width: 32px;
  width: 32px;
  max-width: 32px;
  min-height: 32px;
  height: 32px;
  max-height: 32px;
}
/* Touch screens keep :hover and :focus pinned on the last-tapped button, so
   the desktop "stay visible while hovered/focused" exceptions would hold the
   rail open forever during playback. On hoverless devices the idle state
   always hides the rail; the chrome-lockstep tick re-reveals it whenever the
   player's own controls fade back in. */
@media (hover: none) {
  .jpdb-subtitle-controls-auto.jpdb-subtitle-controls-idle:not(.jpdb-subtitle-panel-open) .jpdb-subtitle-rail {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
  }
}
.jpdb-subtitle-list[hidden] { display: none; }
.jpdb-subtitle-track-row button[aria-pressed="true"] {
  border-color: var(--jpdb-reader-accent);
  color: var(--jpdb-reader-text);
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface));
}
.jpdb-subtitle-list {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: 72px;
  width: min(460px, calc(100vw - 24px));
  height: min(78vh, 860px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  container-type: inline-size;
  border: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 88%, var(--jpdb-reader-video-grid-line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--jpdb-reader-bg) 94%, color-mix(in srgb, var(--jpdb-reader-white) 6%, transparent));
  color: var(--jpdb-reader-text);
  box-shadow: 0 24px 56px var(--jpdb-reader-shadow);
  pointer-events: auto;
  contain: layout paint style;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: translateZ(0);
  opacity: 1;
  transition: opacity .16s ease, transform .16s ease;
}
.jpdb-subtitle-list.jpdb-subtitle-panel-entering,
.jpdb-subtitle-list.jpdb-subtitle-panel-closing {
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.jpdb-subtitle-list.jpdb-subtitle-panel-opened {
  will-change: auto;
}
.jpdb-subtitle-list.jpdb-subtitle-resizing {
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.jpdb-subtitle-list.jpdb-subtitle-transcript-right.jpdb-subtitle-panel-entering,
.jpdb-subtitle-list.jpdb-subtitle-transcript-right.jpdb-subtitle-panel-closing {
  transform: translate3d(10px, 0, 0);
}
.jpdb-subtitle-list.jpdb-subtitle-transcript-left.jpdb-subtitle-panel-entering,
.jpdb-subtitle-list.jpdb-subtitle-transcript-left.jpdb-subtitle-panel-closing {
  transform: translate3d(-10px, 0, 0);
}
.jpdb-subtitle-list.jpdb-subtitle-transcript-bottom.jpdb-subtitle-panel-entering,
.jpdb-subtitle-list.jpdb-subtitle-transcript-bottom.jpdb-subtitle-panel-closing {
  transform: translate3d(0, 10px, 0);
}
@media (prefers-reduced-motion: reduce) {
  .jpdb-subtitle-rail,
  .jpdb-subtitle-list {
    transition: none;
  }
  .jpdb-subtitle-list.jpdb-subtitle-panel-entering,
  .jpdb-subtitle-list.jpdb-subtitle-panel-closing,
  .jpdb-subtitle-controls-hidden .jpdb-subtitle-rail,
  .jpdb-subtitle-controls-auto.jpdb-subtitle-controls-idle:not(.jpdb-subtitle-panel-open) .jpdb-subtitle-rail:not(:hover):not(:focus-within) {
    transform: none;
  }
}
html.jpdb-subtitle-yomu-captions-active .ytp-caption-window-container,
html.jpdb-subtitle-yomu-captions-active .caption-window,
html.jpdb-subtitle-yomu-captions-active .ytp-caption-segment {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.jpdb-subtitle-yomu-captions-active .ytp-caption-window-container *,
html.jpdb-subtitle-yomu-captions-active .caption-window *,
html.jpdb-subtitle-yomu-captions-active .ytp-caption-segment *,
html.jpdb-subtitle-yomu-captions-active .caption-visual-line,
html.jpdb-subtitle-yomu-captions-active .captions-text,
html.jpdb-subtitle-yomu-captions-active .captions-text * {
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  opacity: 0 !important;
  text-shadow: none !important;
  visibility: hidden !important;
}
html.jpdb-subtitle-native-captions-suppressed media-captions,
html.jpdb-subtitle-native-captions-suppressed .vds-captions,
html.jpdb-subtitle-native-captions-suppressed .plyr__captions,
html.jpdb-subtitle-native-captions-suppressed .jw-captions,
html.jpdb-subtitle-native-captions-suppressed .vjs-text-track-display,
html.jpdb-subtitle-native-captions-suppressed .mejs__captions-layer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.jpdb-subtitle-native-captions-suppressed video::cue {
  visibility: hidden;
  opacity: 0;
}
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #secondary,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #secondary,
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #secondary-inner,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #secondary-inner {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #primary,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #primary,
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #primary-inner,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #primary-inner {
  width: var(--ytd-watch-flexy-player-width, auto) !important;
  max-width: var(--ytd-watch-flexy-player-width, none) !important;
  min-width: 0 !important;
}
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #player,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #player,
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #player-container-outer,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #player-container-outer,
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #player-container-inner,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #player-container-inner,
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #movie_player,
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #movie_player {
  width: var(--ytd-watch-flexy-player-width, auto) !important;
  max-width: var(--ytd-watch-flexy-player-width, none) !important;
  min-width: 0 !important;
}
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #columns {
  justify-content: flex-start !important;
}
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #columns {
  justify-content: flex-start !important;
}
html.jpdb-subtitle-video-inset-right ytd-watch-flexy #primary {
  margin-left: 0 !important;
}
html.jpdb-subtitle-video-inset-left ytd-watch-flexy #primary {
  margin-right: 0 !important;
}
html.jpdb-subtitle-fullscreen .jpdb-reader-fab {
  display: none !important;
}
.jpdb-subtitle-resize {
  position: absolute;
  z-index: 2;
  min-width: 24px;
  min-height: 24px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.jpdb-subtitle-resize::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: color-mix(in srgb, var(--jpdb-reader-white) 22%, transparent);
  opacity: .46;
}
.jpdb-subtitle-resize:hover::after,
.jpdb-subtitle-resize:focus-visible::after {
  background: var(--jpdb-reader-accent);
  opacity: .88;
}
.jpdb-subtitle-resize:active {
  cursor: grabbing;
}
.jpdb-subtitle-transcript-right .jpdb-subtitle-resize {
  left: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  cursor: ew-resize;
  transform: translateX(-50%);
}
.jpdb-subtitle-transcript-left .jpdb-subtitle-resize {
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  cursor: ew-resize;
  transform: translateX(50%);
}
.jpdb-subtitle-transcript-right .jpdb-subtitle-resize::after,
.jpdb-subtitle-transcript-left .jpdb-subtitle-resize::after {
  top: 16px;
  bottom: 16px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
}
.jpdb-subtitle-transcript-bottom .jpdb-subtitle-resize {
  left: 50%;
  right: auto;
  top: 2px;
  width: min(160px, 44vw);
  height: 34px;
  min-height: 34px;
  transform: translateX(-50%);
  border-radius: 999px !important;
  cursor: grab;
  z-index: 3;
}
.jpdb-subtitle-transcript-bottom .jpdb-subtitle-resize::after {
  display: none;
}
.jpdb-subtitle-transcript-bottom .jpdb-subtitle-resize::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 48px;
  height: 5px;
  margin: 0 auto;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--jpdb-reader-faint);
  opacity: 1;
}
.jpdb-subtitle-transcript-bottom .jpdb-subtitle-resize:hover::before,
.jpdb-subtitle-transcript-bottom .jpdb-subtitle-resize:focus-visible::before {
  background: var(--jpdb-reader-accent);
}
.jpdb-subtitle-drawer-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--jpdb-reader-border);
  background: color-mix(in srgb, var(--jpdb-reader-surface) 76%, transparent);
}
.jpdb-subtitle-transcript-bottom .jpdb-subtitle-drawer-head {
  padding-top: 40px;
}
.jpdb-subtitle-drawer-brand {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.jpdb-subtitle-drawer-title {
  min-width: 0;
  color: var(--jpdb-reader-text);
  font: 800 15px/1.2 var(--jpdb-reader-font);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jpdb-subtitle-drawer-meta {
  min-width: 0;
  color: var(--jpdb-reader-muted);
  font: 700 11px/1.35 var(--jpdb-reader-font);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jpdb-subtitle-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
@container (max-width: 600px) {
  .jpdb-subtitle-drawer-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .jpdb-subtitle-drawer-actions {
    justify-content: flex-start;
  }
}
.jpdb-subtitle-drawer-auto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  height: 34px;
  min-height: 34px;
  padding: 0 10px !important;
  border-radius: 12px !important;
  font-size: 11px;
  font-weight: 800;
}
.jpdb-subtitle-drawer-auto[aria-pressed="true"] {
  border-color: var(--jpdb-reader-accent);
  background: var(--jpdb-reader-accent-soft);
  color: var(--jpdb-reader-accent-readable, var(--jpdb-reader-text));
}
.jpdb-subtitle-drawer-auto svg {
  display: inline-grid;
  place-items: center;
}
.jpdb-subtitle-drawer-auto svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-subtitle-panel-mode,
.jpdb-subtitle-panel-nav,
.jpdb-subtitle-panel-placement {
  justify-self: start;
  width: max-content;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 82%, transparent);
}
.jpdb-subtitle-panel-mode button {
  min-height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: center;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}
.jpdb-subtitle-panel-mode button[aria-pressed="true"] {
  color: var(--jpdb-reader-text);
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface));
}
.jpdb-subtitle-panel-mode button:disabled {
  opacity: .42;
}
.jpdb-subtitle-panel-nav button,
.jpdb-subtitle-panel-placement button {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  width: 32px;
  min-height: 32px;
  height: 32px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-align: center;
  box-shadow: none;
  font-size: 19px;
  line-height: 0;
}
.jpdb-subtitle-panel-placement button[aria-pressed="true"] {
  color: var(--jpdb-reader-text);
  background: color-mix(in srgb, var(--jpdb-reader-accent) 18%, var(--jpdb-reader-surface));
}
/* Compact viewports force the bottom drawer layout, so side placements are
   inert there — hide their buttons instead of showing dead controls. Keep in
   sync with shouldUseCompactSubtitleDrawer (700px). */
@media (max-width: 699px) {
  .jpdb-subtitle-panel-placement button[data-placement="left"],
  .jpdb-subtitle-panel-placement button[data-placement="right"] {
    display: none;
  }
}
.jpdb-subtitle-panel-placement svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.jpdb-subtitle-panel-nav button:disabled {
  opacity: .38;
}
.jpdb-subtitle-list-scroll {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 4px;
  padding: 8px 10px 12px;
  overscroll-behavior: contain;
}
.jpdb-subtitle-list-spacer {
  min-height: 0;
  pointer-events: none;
}
.jpdb-subtitle-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 10px;
  min-height: 76px;
  padding: 16px 18px;
  border: 0;
  border-bottom: 1px solid var(--jpdb-reader-border);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
  will-change: background-color, box-shadow;
}
.jpdb-subtitle-row-body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  width: 100%;
  min-height: 42px;
  padding: 0;
  text-align: left;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.jpdb-subtitle-row-tools {
  align-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--jpdb-reader-muted);
}
.jpdb-subtitle-row-copy,
.jpdb-subtitle-row-peek {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--jpdb-reader-muted) !important;
}
/* UT-68a: subtle copied confirmation */
.jpdb-subtitle-copy-flash {
  position: relative;
  color: var(--jpdb-reader-accent) !important;
}
.jpdb-subtitle-copy-flash svg { opacity: 0; }
.jpdb-subtitle-copy-flash::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
}

/* UT-68c: peeked translation under the Japanese line */
.jpdb-subtitle-row-secondary {
  color: var(--jpdb-reader-muted);
  font-size: 0.85em;
  line-height: 1.45;
}

.jpdb-subtitle-list-row.active {
  border-color: var(--jpdb-reader-border);
  background: color-mix(in srgb, var(--jpdb-reader-accent) 14%, transparent);
  box-shadow: inset 2px 0 0 var(--jpdb-reader-accent);
}
.jpdb-subtitle-row-time {
  color: var(--jpdb-reader-muted);
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
  white-space: nowrap;
}
.jpdb-subtitle-row-text {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  grid-column: 1;
  color: var(--jpdb-reader-text);
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  font-family: var(--jpdb-reader-popup-font, var(--jpdb-reader-font));
  font-weight: var(--jpdb-reader-popup-font-weight, 400);
  line-height: 1.45;
  font-size: 16px;
  letter-spacing: 0;
  text-shadow: none;
}
.jpdb-subtitle-row-text .jpdb-reader-word {
  --jpdb-reader-subtitle-fallback: var(--jpdb-reader-text);
  --jpdb-reader-word-underline-offset: .16em;
  --jpdb-reader-word-underline-thickness: .08em;
  display: inline !important;
  color: inherit;
  background-color: transparent;
  background-image: none;
  text-decoration-color: transparent;
  box-shadow: none;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  border-radius: 4px;
  padding: 0 1px;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-weight: inherit;
}
.jpdb-subtitle-row-text .jpdb-reader-word::after {
  content: none;
}
.jpdb-subtitle-row-text :is(ruby, rt, .jpdb-reader-furi, .jpdb-reader-ruby-base) {
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.jpdb-subtitle-row-text ruby,
.jpdb-subtitle-row-text rt,
.jpdb-subtitle-row-text .jpdb-reader-furi {
  white-space: normal !important;
}
.jpdb-subtitle-row-text .jpdb-reader-word:hover,
.jpdb-subtitle-row-text .jpdb-reader-word:focus-visible {
  background-color: transparent;
  background-image: linear-gradient(var(--jpdb-reader-hover, var(--jpdb-reader-video-control-hover)), var(--jpdb-reader-hover, var(--jpdb-reader-video-control-hover)));
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--jpdb-reader-word-highlight-size) 100%;
  outline: 1px solid var(--jpdb-reader-border);
}
.jpdb-subtitle-row-translation {
  grid-column: 1;
  min-width: 0;
  margin-top: 3px;
  color: var(--jpdb-reader-muted);
  overflow-wrap: anywhere;
  font-style: normal;
  font-weight: 650;
  line-height: 1.4;
}
.jpdb-subtitle-tracks-panel .jpdb-subtitle-list-scroll {
  align-content: start;
}
.jpdb-subtitle-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 8px;
  padding: 7px 8px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  background: transparent;
}
.jpdb-subtitle-track-row.active {
  border-color: color-mix(in srgb, var(--jpdb-reader-accent) 68%, var(--jpdb-reader-border));
  background: color-mix(in srgb, var(--jpdb-reader-accent) 14%, transparent);
}
.jpdb-subtitle-track-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 11px;
  line-height: 1.2;
}
.jpdb-subtitle-track-title {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.jpdb-subtitle-track-title span {
  padding: 1px 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--jpdb-reader-surface) 86%, transparent);
  color: var(--jpdb-reader-muted);
  font-size: 8px;
  text-transform: uppercase;
}
.jpdb-subtitle-track-row span {
  grid-column: 1;
  color: var(--jpdb-reader-faint);
  font-size: 9px;
  font-weight: 700;
}
.jpdb-subtitle-track-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  display: flex;
  gap: 5px;
}
.jpdb-subtitle-track-offset {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(58px, auto) repeat(5, minmax(0, auto));
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--jpdb-reader-border) 72%, transparent);
}
.jpdb-subtitle-track-offset-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid var(--jpdb-reader-border);
  border-radius: 8px;
  color: var(--jpdb-reader-text);
  background: color-mix(in srgb, var(--jpdb-reader-surface) 88%, transparent);
  font: 800 10px/1 var(--jpdb-reader-font);
  white-space: nowrap;
}
.jpdb-subtitle-track-row button {
  min-height: 26px;
  padding-inline: 9px;
  text-align: center;
  box-shadow: none;
  font-size: 10px;
}
.jpdb-subtitle-track-offset button {
  min-width: 0;
  padding-inline: 7px;
  white-space: nowrap;
}
.jpdb-subtitle-track-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(142px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.jpdb-subtitle-track-tools button,
.jpdb-subtitle-track-tools a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  text-align: center;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  box-shadow: none;
  text-decoration: none;
}
.jpdb-subtitle-track-summary {
  margin: 0 0 3px;
  padding: 5px 7px;
  border: 1px dashed var(--jpdb-reader-border);
  border-radius: 8px;
  color: var(--jpdb-reader-muted);
  background: transparent;
  font: 750 11px/1.3 var(--jpdb-reader-font);
}
.jpdb-subtitle-track-hint {
  margin: -1px 0 4px;
  padding: 0 2px;
  color: var(--jpdb-reader-faint);
  font: 700 10px/1.35 var(--jpdb-reader-font);
}
.jpdb-subtitle-list-empty {
  padding: 12px;
  color: var(--jpdb-reader-muted);
  font: 700 12px/1.35 var(--jpdb-reader-font);
}
.jpdb-subtitle-hidden .jpdb-subtitle-text,
.jpdb-subtitle-hidden .jpdb-subtitle-drag-handle { display: none; }

/* any-pointer:coarse so an iPad-with-Pencil (pointer:fine, width > 768px) still
   gets the 44px touch targets, drag handle, rail hit-slop and font clamp. A pure
   desktop mouse (any-pointer:fine only, width > 768px) is unaffected. */
@media (max-width: 768px), (any-pointer: coarse) {
  .jpdb-reader-btn { min-height: 44px; font-size: 13px; }
  .jpdb-subtitle-track-offset {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .jpdb-subtitle-track-offset-value {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .jpdb-reader-onboarding {
    inset: auto 0 0 0;
    transform: none;
    width: 100%;
    max-height: 88vh;
    max-height: 88svh;
    border-radius: 16px 16px 0 0;
    padding: 54px 20px calc(24px + env(safe-area-inset-bottom));
  }
  .jpdb-reader-onboarding h2 { font-size: 40px; }
  .jpdb-reader-onboarding-close {
    top: 12px;
    right: 16px;
  }
  .jpdb-reader-onboarding-basics { grid-template-columns: 1fr; }
  .jpdb-reader-onboarding-features { grid-template-columns: 1fr; }
  .jpdb-reader-onboarding-actions { display: grid; grid-template-columns: 1fr; }
  .jpdb-ocr-line { min-width: 0; min-height: 0; border-radius: 8px; }
  /* Cap relative to viewport width so a long line cannot overflow a phone, but
     at 12vw (was 8vw, which capped ~31px on a 390px phone and undercut a large
     user font setting). The JS frame-scale already keeps the default readable;
     this only bounds extreme settings. */
  .jpdb-subtitle-text { left: 8px; right: 8px; font-size: min(var(--subtitle-font-size), 12vw); }
  .jpdb-subtitle-drag-handle {
    top: -32px;
    width: 42px;
    height: 28px;
  }
  .jpdb-subtitle-rail {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    bottom: auto;
    gap: 3px;
  }
  .jpdb-subtitle-rail button {
    padding: 0;
    font-size: 11px;
    touch-action: manipulation;
  }
  .jpdb-subtitle-rail button::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 9px;
  }
  .jpdb-subtitle-drawer-auto,
  .jpdb-subtitle-track-row button,
  .jpdb-subtitle-track-tools button,
  .jpdb-subtitle-track-tools a {
    min-height: 44px;
  }
  .jpdb-subtitle-panel-nav button,
  .jpdb-subtitle-panel-placement button,
  .jpdb-subtitle-row-copy {
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
  }
  .jpdb-subtitle-panel-mode button {
    min-height: 44px;
  }
  .jpdb-subtitle-transcript-bottom .jpdb-subtitle-list,
  .jpdb-subtitle-list.jpdb-subtitle-transcript-bottom {
    left: 0 !important;
    right: auto !important;
    /* 100% resolves to the ICB content box (scrollbar excluded), matching the
       JS-computed layout width; 100vw includes the classic-scrollbar gutter and
       spilled the drawer ~15px past the right edge on narrow viewports. */
    width: 100% !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }
  .jpdb-subtitle-transcript-bottom .jpdb-subtitle-list-scroll {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 519px) {
  .jpdb-subtitle-list {
    left: 0 !important;
    right: auto !important;
    width: 100% !important;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 20px 20px 0 0;
  }
}


/* Source: src/reader/styles/youtube-filter.css */
.jpdb-youtube-filter-pending[data-yomu-youtube-pending-hidden="true"],
.jpdb-youtube-filtered {
    pointer-events: none !important;
    opacity: 0 !important;
}

/* Filtered cards first become invisible spacers, then collapse after the
   scroll/virtualized grid has settled. Collapsing immediately made YouTube
   reuse rich-grid slots mid-scroll, leaving black rows until the next layout. */
.jpdb-youtube-filtered {
    visibility: hidden !important;
    overflow: hidden !important;
    transition: none !important;
}

/* UT-26: lazily-rendered shelf slots that YouTube has not hydrated yet are
   blank boxes — keep them off-flow with the same technique until they
   hydrate. */
.jpdb-youtube-unrendered-slot,
.jpdb-youtube-filter-collapsing,
.jpdb-youtube-filter-collapsed {
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: none !important;
}

html.jpdb-youtube-filter-active ytd-rich-grid-row,
html.jpdb-youtube-filter-active ytd-rich-grid-row > #contents {
    display: contents !important;
}

/* The scan strips stale is-in-first-column flags from visible items and
   re-marks each visual row's first item with this class. On the 2026 lockup
   feed the row gutter lives on the #contents container (margin-left on the
   container itself) and [is-in-first-column] no longer changes item margins,
   so the marker must pin the DEFAULT item margin: adding the gutter here
   (the pre-lockup compensation) overflowed every marked row and wrapped its
   last card into a gap. */
html.jpdb-youtube-filter-active ytd-rich-item-renderer.jpdb-youtube-first-in-row {
    margin-left: calc(var(--ytd-rich-grid-item-margin) / 2);
}

/* The grid continuation (spinner + ghost skeleton cards) ships flex:1 with a
   near-zero flex-basis, so it squeezes into whatever partial row filtering
   leaves behind and its 3-up ghost grid renders at the wrong card size.
   Forcing a full-width basis wraps it onto its own row, where the ghost
   cards take the same width as real feed cards. */
html.jpdb-youtube-filter-active ytd-rich-grid-renderer ytd-continuation-item-renderer {
    flex-basis: 100% !important;
}

.jpdb-youtube-filter-bar {
    position: fixed;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 2147483645;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(560px, calc(100vw - 24px));
    padding: 8px 10px 8px 12px;
    border: 1px solid var(--jpdb-reader-border);
    border-radius: 999px;
    background: var(--jpdb-reader-bg);
    color: var(--jpdb-reader-muted);
    box-shadow: 0 12px 34px var(--jpdb-reader-shadow);
    font: 750 12px/1.3 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    transform: translateX(-50%);
}

.jpdb-youtube-filter-bar span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpdb-youtube-filter-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.jpdb-youtube-filter-bar button {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--jpdb-reader-accent);
    border-radius: 999px;
    background: transparent;
    color: var(--jpdb-reader-accent-readable);
    font: inherit;
    cursor: pointer;
}

.jpdb-youtube-filter-bar [data-action="hide-notice"] {
    border-color: var(--jpdb-reader-border);
    color: var(--jpdb-reader-muted);
}

.jpdb-youtube-channel-shelf {
    /* The shelf sits inline in the YouTube feed, so it must follow the PAGE
       theme (html[dark]) — not the extension theme — or light-extension +
       dark-YouTube becomes unreadable. The --yt-spec-* vars are preferred
       when present; these are the page-theme fallbacks. */
    --yomu-shelf-text: #0f0f0f;
    --yomu-shelf-muted: #606060;
    --yomu-shelf-inverse: #fff;
    --yomu-shelf-chip: rgba(0, 0, 0, 0.05);
    --yomu-shelf-chip-hover: rgba(0, 0, 0, 0.1);
    --yomu-shelf-border: rgba(0, 0, 0, 0.1);
    display: block;
    grid-column: 1 / -1;
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 20px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--yt-spec-10-percent-layer, var(--yomu-shelf-border));
    border-bottom: 1px solid var(--yt-spec-10-percent-layer, var(--yomu-shelf-border));
    color: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    font: 400 14px/1.35 Roboto, Arial, sans-serif;
}

/* Desktop sets html[dark]; m.youtube.com does not, so the controller also
   mirrors the detected page theme onto the shelf as .is-dark. */
html[dark] .jpdb-youtube-channel-shelf,
.jpdb-youtube-channel-shelf.is-dark {
    --yomu-shelf-text: #f1f1f1;
    --yomu-shelf-muted: #aaa;
    --yomu-shelf-inverse: #0f0f0f;
    --yomu-shelf-chip: rgba(255, 255, 255, 0.1);
    --yomu-shelf-chip-hover: rgba(255, 255, 255, 0.2);
    --yomu-shelf-border: rgba(255, 255, 255, 0.12);
}

.jpdb-youtube-channel-shelf-head,
.jpdb-youtube-channel-shelf-foot {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 10px;
}

.jpdb-youtube-channel-shelf-copy {
    min-width: 0;
}

.jpdb-youtube-channel-shelf-eyebrow {
    margin-bottom: 3px;
    color: var(--yt-spec-text-secondary, var(--yomu-shelf-muted));
    font-size: 12px;
}

.jpdb-youtube-channel-shelf h2 {
    margin: 0;
    color: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    font: 500 20px/1.25 Roboto, Arial, sans-serif;
    letter-spacing: 0;
}

.jpdb-youtube-channel-shelf p,
.jpdb-youtube-channel-description,
.jpdb-youtube-channel-meta,
.jpdb-youtube-channel-shelf-status {
    color: var(--yt-spec-text-secondary, var(--yomu-shelf-muted));
}

.jpdb-youtube-channel-shelf p {
    margin: 4px 0 0;
    font-size: 13px;
}

.jpdb-youtube-channel-shelf-actions,
.jpdb-youtube-channel-shelf-filters {
    display: flex;
    align-items: center;
    gap: 8px;
}

.jpdb-youtube-channel-shelf-actions {
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.jpdb-youtube-channel-shelf button {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 18px;
    background: var(--yt-spec-badge-chip-background, var(--yomu-shelf-chip));
    color: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    font: 500 14px/1 Roboto, Arial, sans-serif;
    cursor: pointer;
}

.jpdb-youtube-channel-shelf button:hover,
.jpdb-youtube-channel-shelf button:focus-visible {
    background: var(--yt-spec-button-chip-background-hover, var(--yomu-shelf-chip-hover));
}

.jpdb-youtube-channel-shelf button:focus-visible {
    outline: 2px solid var(--yt-spec-call-to-action, var(--jpdb-reader-accent));
    outline-offset: 2px;
}

.jpdb-youtube-channel-shelf button:disabled {
    cursor: progress;
    opacity: 0.62;
}

.jpdb-youtube-channel-shelf [data-yomu-youtube-channel-action="subscribe-visible"],
.jpdb-youtube-channel-shelf [data-yomu-youtube-channel-action="subscribe-all"],
.jpdb-youtube-channel-shelf [data-yomu-youtube-channel-action="subscribe-one"] {
    background: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    color: var(--yt-spec-text-primary-inverse, var(--yomu-shelf-inverse));
}

.jpdb-youtube-channel-shelf [data-yomu-youtube-channel-action="never"] {
    color: var(--yt-spec-text-secondary, var(--yomu-shelf-muted));
}

.jpdb-youtube-channel-shelf-filters {
    padding: 0 4px 10px;
    overflow-x: auto;
}

.jpdb-youtube-channel-shelf-filters[hidden] {
    display: none;
}

.jpdb-youtube-channel-shelf-filters button[aria-pressed="true"] {
    background: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    color: var(--yt-spec-text-primary-inverse, var(--yomu-shelf-inverse));
}

.jpdb-youtube-channel-shelf-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 0 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.jpdb-youtube-channel-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 4px;
    border-top: 1px solid var(--yt-spec-10-percent-layer, var(--yomu-shelf-border));
}

.jpdb-youtube-channel-row.is-subscribed {
    opacity: 0.72;
    transition: opacity 240ms ease;
}

.jpdb-youtube-channel-row.is-subscribed [data-yomu-youtube-channel-action="subscribe-one"] {
    cursor: default;
    background: var(--yt-spec-badge-chip-background, var(--yomu-shelf-chip));
    color: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    opacity: 1;
}

.jpdb-youtube-channel-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--yt-spec-badge-chip-background, var(--yomu-shelf-chip));
    color: var(--yt-spec-text-secondary, var(--yomu-shelf-muted));
    font: 500 15px/1 Roboto, Arial, sans-serif;
    text-decoration: none;
}

.jpdb-youtube-channel-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.jpdb-youtube-channel-body {
    min-width: 0;
}

.jpdb-youtube-channel-name {
    display: block;
    overflow: hidden;
    color: var(--yt-spec-text-primary, var(--yomu-shelf-text));
    font: 500 14px/1.25 Roboto, Arial, sans-serif;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpdb-youtube-channel-meta,
.jpdb-youtube-channel-description {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Parsing the description turns its newlines into <br> elements, which
   escape a nowrap-ellipsis clamp and flash the full multi-line bio into the
   row (user-reported). A line-clamp box stays one line regardless. */
.jpdb-youtube-channel-description {
    display: -webkit-box;
    margin-top: 2px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    white-space: normal;
}

.jpdb-youtube-channel-description br {
    display: none;
}

.jpdb-youtube-channel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.jpdb-youtube-channel-tags span {
    max-width: 120px;
    overflow: hidden;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--yt-spec-badge-chip-background, var(--yomu-shelf-chip));
    color: var(--yt-spec-text-secondary, var(--yomu-shelf-muted));
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jpdb-youtube-channel-shelf-foot {
    align-items: center;
    padding-top: 10px;
}

.jpdb-youtube-channel-shelf-status {
    min-width: 0;
    font-size: 12px;
}

@media (max-width: 768px), (pointer: coarse) {
    .jpdb-youtube-filter-bar {
        bottom: max(76px, calc(60px + env(safe-area-inset-bottom)));
        border-radius: 12px;
    }

    .jpdb-youtube-channel-shelf {
        margin-bottom: 16px;
        padding-top: 12px;
    }

    .jpdb-youtube-channel-shelf-head,
    .jpdb-youtube-channel-shelf-foot {
        flex-direction: column;
    }

    .jpdb-youtube-channel-shelf-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .jpdb-youtube-channel-shelf button {
        min-height: 40px;
    }

    .jpdb-youtube-channel-row {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .jpdb-youtube-channel-row [data-yomu-youtube-channel-action="subscribe-one"] {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }
}