/* HSK-BASE-003/006/010: the homepage visual language, focused on vocabulary. */
body[data-page="vocabulary"].vocabulary-modern {
  --vocab-ink: #242021;
  --vocab-muted: #68615f;
  --vocab-line: #ded7d2;
  --vocab-red: #b92e2e;
  --vocab-blue: var(--vocab-red);
  --vocab-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
  --vocab-page-ink: var(--vocab-ink);
  --vocab-page-muted: var(--vocab-muted);
  --vocab-page-line: var(--vocab-line);
  --vocab-page-accent: var(--vocab-blue);
  --vocab-page-green: var(--vocab-blue);
  --vocab-edu-ink: var(--vocab-ink);
  --vocab-edu-muted: var(--vocab-muted);
  --vocab-edu-cream: #f7f5f2;
  --vocab-edu-paper: #fff;
  --vocab-edu-green: var(--vocab-blue);
  --vocab-edu-green-dark: #942323;
  --vocab-edu-mint: #fff;
  --vocab-edu-line: var(--vocab-line);
  --hanyu-ink: var(--vocab-ink);
  --hanyu-muted: var(--vocab-muted);
  --hanyu-primary: var(--vocab-blue);
  --hanyu-line: var(--vocab-line);
  --hanyu-surface: #fff;
  --test-nav-ink: #242021;
  --test-nav-green: var(--vocab-blue);
  --test-nav-green-dark: #942323;
  --test-nav-line: var(--vocab-line);
  --test-nav-soft: #fbede7;
  --test-nav-shadow: 0 8px 28px -14px rgb(40 29 26 / 12%);
  background: #f7f5f2;
  color: var(--vocab-ink);
}
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-header {
  border: 1px solid var(--vocab-line); border-radius: 20px;
  background: rgb(255 253 251 / 94%); box-shadow: var(--test-nav-shadow); backdrop-filter: blur(18px);
}
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-logo { font-weight: 650; letter-spacing: -.04em; }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-logo img { width: 34px; height: 34px; }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-button {
  min-height: 44px; border: 1px solid transparent; border-radius: 999px; padding: 11px 20px;
  background: var(--vocab-blue); color: #fff; box-shadow: none; font-size: 14px;
}
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-button:hover { background: #942323; transform: none; box-shadow: 0 4px 12px rgb(154 39 34 / 12%); }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-menu { width: 48px; height: 48px; border: 1px solid var(--vocab-line); border-radius: 14px; box-shadow: none; }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-more > button { width: 44px; height: 44px; }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-mobile-nav { border-color: var(--vocab-line); border-radius: 0 0 20px 20px; background: #fff; }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-mobile-nav a { min-height: 44px; }
body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-more__menu { border: 1px solid var(--vocab-line); border-radius: 16px; box-shadow: 0 14px 40px rgb(53 32 26 / 10%); }
body[data-page="vocabulary"].vocabulary-modern :focus-visible { outline: 3px solid #b92e2e; outline-offset: 3px; }
body[data-page="vocabulary"].vocabulary-modern #main-content { background: #f7f5f2; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocab-level-dock { position: static; border: 0; background: transparent; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocab-level-dock__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-block: 16px 8px; min-height: 0; overflow: visible; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-edition-browser { border: 1px solid var(--vocab-line); border-radius: 14px; background: #eae5df; padding: 3px; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-edition-browser a { min-height: 44px; border: 0; border-radius: 11px; color: var(--vocab-muted); font-weight: 600; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-edition-browser a[aria-current] { color: #fff7ef; background: #242021; box-shadow: 0 2px 6px rgb(53 32 26 / 7%); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-level-browser { display: flex; width: 100%; min-width: 0; gap: 6px; overflow-x: auto; padding: 4px; scroll-padding-inline: 4px; scrollbar-width: thin; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-level-browser a { flex: 1 0 76px; min-width: 76px; min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 12px; color: var(--vocab-muted); background: transparent; font-weight: 550; white-space: nowrap; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-level-browser a[aria-current] { color: var(--vocab-blue); background: #fbede7; border-color: var(--vocab-red); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-level-browser a:hover { color: var(--vocab-blue); background: #f5e8e1; }

body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-page-hero { padding-top: 16px; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-page-hero__grid { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 0; padding: 12px 0 8px; margin: 0; border: 0; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-session-heading { min-width: 0; padding: 0; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-session-heading h1 { color: #242021; font-family: var(--vocab-serif); font-size: clamp(36px, 4vw, 52px); line-height: 1.12; font-weight: 650; letter-spacing: -.045em; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-session-heading p { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-session-heading p span:first-child { color: var(--vocab-muted); font-weight: 500; }
body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details { width: fit-content; max-width: 100%; margin: 2px 0 18px; padding: 0; border: 0; background: transparent; box-shadow: none; }
body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details > summary { min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 8px 0; color: var(--vocab-muted); font-size: 13px; font-weight: 500; }
body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details[open] { width: 100%; }
body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details[open] > .vocabulary-status-strip { padding: 16px; border: 1px solid var(--vocab-line); border-radius: 16px; background: #fff; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-workspace { margin-top: 0; background: transparent; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-studio { padding-top: 0; background: transparent; }
body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details > summary::before { content: ""; width: 12px; height: 12px; flex: 0 0 12px; background: currentColor; mask: url('/assets/brand/hanyu-arrow-v2.svg') center / contain no-repeat; }
body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details[open] > summary::before { transform: rotate(90deg); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-list { overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar { display: flex; flex-direction: row; align-items: end; flex-wrap: wrap; gap: 12px 20px; min-height: 0; padding: 0 0 20px; border: 0; background: transparent; box-shadow: none; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar label { flex: 1 1 340px; max-width: 640px; width: 100%; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar input { min-height: 50px; border: 1px solid var(--vocab-line); border-radius: 15px; padding: 12px 64px 12px 42px; background: #fff; color: var(--vocab-ink); box-shadow: 0 3px 12px rgb(53 32 26 / 2%); font-size: 15px; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar input:focus { border-color: var(--vocab-blue); box-shadow: 0 0 0 3px rgb(154 39 34 / 10%); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-search-label { color: var(--vocab-muted); font-size: 12px; letter-spacing: 0; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-library-navigation { margin: 0 0 14px auto; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-library-navigation > strong { font-weight: 400; color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; border: 0; background: transparent; }
body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word] {
  min-height: 160px; grid-template-columns: minmax(0, 1fr) auto 22px; grid-template-rows: auto auto 1fr;
  align-content: start; gap: 7px 8px; padding: 22px; border: 1px solid #e5ddd5; border-radius: 20px;
  background: #fff; color: var(--vocab-ink); box-shadow: 0 4px 16px -10px rgb(53 32 26 / 10%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word]:hover { background: #fff; border-color: #cd9b8d; transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgb(154 39 34 / 20%); }
body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word]:focus-visible { outline: 3px solid var(--vocab-blue); outline-offset: 3px; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__forms { grid-column: 1 / 3; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__word { width: auto; max-width: 100%; font-family: var(--vocab-serif); font-size: 30px; font-weight: 550; letter-spacing: 0; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__traditional { width: auto; max-width: 100%; color: var(--vocab-muted); font-size: 12px; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__traditional small { display: none; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__pinyin { grid-column: 1; min-width: 0; overflow-wrap: anywhere; color: #9e3530; font-weight: 400; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__pos { grid-column: 2; grid-row: 2; color: var(--vocab-muted); font-weight: 500; font-size: 11px; letter-spacing: .03em; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__meaning { grid-column: 1 / 3; width: 100%; min-width: 0; color: #655b55; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 400; font-style: normal; line-height: 1.5; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__arrow { grid-column: 3; color: #8f7066; }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-lazy-sentinel { margin-top: 20px; border: 0; background: transparent; color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-lazy-sentinel button { min-height: 44px; border: 1px solid var(--vocab-line); border-radius: 999px; background: #fff; color: var(--vocab-blue); }

/* Details: meaning and sound first, character practice on demand. */
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-studio__heading .micro-label,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-panel__heading small { color: var(--vocab-blue); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-usage > span { color: var(--vocab-muted); font-size: 12px; letter-spacing: 0; }

body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-page-context-title { color: var(--vocab-ink); font-size: 17px; font-weight: 600; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-lesson-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: 20px; padding: 0; border: 0; box-shadow: none; background: transparent; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-context { min-width: 0; min-height: 0; height: auto; padding: 28px; border: 1px solid var(--vocab-line); border-radius: 24px; color: var(--vocab-ink); background: #fff; box-shadow: 0 6px 24px -16px rgb(53 32 26 / 15%); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail__meta { width: 100%; padding: 0 0 14px; margin: 0; border-color: var(--vocab-line); color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail__head { margin: 0; padding: 0; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail__word > h1 { font-family: var(--vocab-serif); font-size: clamp(64px, 7vw, 94px); font-weight: 550; color: var(--vocab-ink); line-height: 1.25; margin: 0; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail__word > h1.is-long-word { font-size: clamp(36px, 5vw, 60px); overflow-wrap: anywhere; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail__reading { margin: 10px 0 0; color: var(--vocab-blue); font-size: 20px; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content [data-vocab-meaning] { margin: 0; min-height: 0; color: var(--vocab-ink); font-size: 24px; line-height: 1.4; order: 3; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-listen { order: 2; min-height: 44px; width: auto; margin: 0; padding: 6px 14px 6px 6px; border: 1px solid #e4c5ba; border-radius: 999px; background: #fbede7; color: var(--vocab-blue); box-shadow: none; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-listen__icon { width: 32px; height: 32px; border-radius: 50%; background: var(--vocab-blue); color: #fff; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-usage { order: 4; width: 100%; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--vocab-line); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-usage select { min-height: 44px; border: 1px solid var(--vocab-line); border-radius: 12px; color: var(--vocab-ink); background: #fff; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-context__heading { color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-example { margin: 26px 0; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-example > strong { font-family: var(--vocab-serif); font-weight: 500; font-size: clamp(25px, 2.5vw, 36px); line-height: 1.7; color: var(--vocab-ink); overflow-wrap: anywhere; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-target-word { color: var(--vocab-blue); background: transparent; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-example small { font-size: 14px; color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-usage-note { margin: 0; padding: 20px 0 0; border-color: var(--vocab-line); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-usage-note > span { display: none; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-usage-note p { color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-actions { margin: 24px 0 0; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure { margin-top: 24px; padding: 0 24px; border: 1px solid var(--vocab-line); border-radius: 20px; background: #fff; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary { min-height: 76px; display: flex; align-items: center; gap: 12px; cursor: pointer; color: var(--vocab-ink); list-style: none; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary::before { content: ""; width: 18px; height: 18px; flex: 0 0 18px; background: var(--vocab-muted); mask: url('/assets/brand/hanyu-arrow-v2.svg') center / contain no-repeat; transition: transform 180ms ease; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure[open] > summary::before { transform: rotate(90deg); }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary::-webkit-details-marker { display: none; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary > span { font-weight: 600; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary small { margin-left: auto; color: var(--vocab-muted); font-size: 12px; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-stroke-preview { padding: 14px; border: 1px solid #e3d6cb; border-radius: 14px; background: #f8f0e9; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-studio { margin-top: 22px; padding: 0 0 24px; border: 0; background: transparent; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-studio__heading { align-items: center; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-studio__heading h2 { font-size: 22px; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-panel { padding: 20px; border: 1px solid var(--vocab-line); border-radius: 18px; background: #fff; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-board { width: min(100%, 260px); height: auto; aspect-ratio: 1; border-color: var(--vocab-line); background-color: #fffcf7; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-board > svg { width: 100%; height: auto; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-control { border: 1px solid var(--vocab-line); border-radius: 12px; min-height: 44px; color: var(--vocab-blue); background: #faf0ea; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-tabs button[aria-pressed="true"] { color: var(--vocab-blue); background: #fbede7; border-color: #cf9a8d; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail-navigation a { min-height: 52px; border: 1px solid var(--vocab-line); border-radius: 16px; background: #fff; color: var(--vocab-blue); box-shadow: none; }

/* HSK-BASE-003/006/010: ink anchors the selected word; red guides actions. */
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__word { color: var(--vocab-ink); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-row__traditional b { color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-search-icon { color: var(--vocab-muted); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar kbd { color: var(--vocab-muted); border-color: var(--vocab-line); background: #f7f2ec; }
body[data-page="vocabulary"].vocabulary-modern .skip-link { color: #fff7ef; background: #242021; }
body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word] { background: linear-gradient(145deg, #fffdfb, #fff); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-context { background: linear-gradient(145deg, #fffdf9, #faf4ed); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-context .micro-label { color: var(--vocab-red); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-usage-note { border-color: var(--vocab-line); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-usage-note h3 { color: var(--vocab-ink); }
body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-action--primary .ph { color: inherit; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card {
  color: #fff7ef; border-color: #3e3434;
  background: radial-gradient(ellipse at 100% 0%, rgb(146 69 55 / 18%), transparent 65%), linear-gradient(135deg, #2d2627, #191718);
  box-shadow: 0 16px 36px -24px rgb(53 32 26 / 38%), inset 0 1px 0 rgb(255 255 255 / 7%);
}
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__word > h1,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card [data-vocab-meaning] { color: #fff7ef; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__meta,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-usage { border-color: #514140; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__meta,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__traditional,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__traditional :is(strong, small, span),
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__reading small,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-usage > span { color: #d5c7be; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__meta strong,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__reading,
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-detail__reading > span { color: #ffb1a4; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-listen { background: #fae6dc; border-color: #fae6dc; color: #942323; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-listen:hover { background: #fff1e8; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card .vocabulary-usage select { background: #fff8f0; border-color: #ddc7ba; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card :focus-visible { outline-color: #ffb1a4; }
body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-stroke-preview__frames > span { background: #fffdf9; border-color: var(--vocab-line); }
body[data-page="vocabulary"].vocabulary-modern .site-footer { background: #eee9e3; border-color: #ded7d2; color: #5d554f; }
body[data-page="vocabulary"].vocabulary-modern .site-footer .brand,
body[data-page="vocabulary"].vocabulary-modern .footer-grid > div:not(.footer-brand) strong { color: var(--vocab-ink); }
body[data-page="vocabulary"].vocabulary-modern .footer-brand p,
body[data-page="vocabulary"].vocabulary-modern .footer-grid > div:not(.footer-brand) a,
body[data-page="vocabulary"].vocabulary-modern .footer-bottom { color: #655b55; border-color: #d8ccc2; }
body[data-page="vocabulary"].vocabulary-modern .footer-grid > div:not(.footer-brand) a:is(:hover, :focus-visible) { color: var(--vocab-red); }
body[data-page="vocabulary"].vocabulary-modern .footer-grid > div:not(.footer-brand) a:focus-visible { outline-color: var(--vocab-red); }
body[data-page="vocabulary"].vocabulary-modern .site-footer .module-footer-group { color: var(--vocab-ink); border-color: #d8ccc2; }
body[data-page="vocabulary"].vocabulary-modern .site-footer .module-footer-group a { color: #655b55; }
body[data-page="vocabulary"].vocabulary-modern .site-footer .module-footer-group a:is(:hover, :focus-visible) { color: var(--vocab-red); }
body[data-page="vocabulary"].vocabulary-modern .site-footer .module-footer-group :focus-visible { outline-color: var(--vocab-red); }

@media (max-width: 900px) {
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar { flex-direction: column; align-items: stretch; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar label { flex: none; max-width: none; }
  body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-lesson-panel { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-header { top: 8px; left: 12px; width: calc(100% - 24px); transform: none; border-radius: 16px; }
  body[data-page="vocabulary"].multipage-site.vocabulary-modern .vocab-header__inner { min-height: 60px; width: calc(100% - 28px); }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocab-level-dock__inner { grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 8px 0; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-edition-browser { width: fit-content; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-level-browser { width: 100%; gap: 4px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-level-browser a { flex: 0 0 76px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-page-hero { padding-top: 12px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-page-hero__grid { padding-block: 10px 4px; gap: 8px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-session-heading h1 { font-size: 34px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-session-heading p { margin-top: 8px; font-size: 12px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .module-vocab-details { margin-bottom: 6px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar { gap: 6px; padding-bottom: 14px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar input { min-height: 48px; padding-right: 16px; font-size: 16px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-toolbar kbd { display: none; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-library-navigation { margin: 2px 0 0; }
  body[data-page="vocabulary"].vocabulary-modern #main-content .vocabulary-library-navigation > strong { font-size: 11px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] { grid-template-columns: 1fr; gap: 12px; }
  body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word] { min-height: 128px; padding: 18px 20px; gap: 5px 8px; }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-word-card,
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-context { padding: 22px; border-radius: 20px; }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-detail__word > h1 { font-size: 64px; }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure { padding: 0 16px; }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary { min-height: 68px; }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary small { display: none; }
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-panel { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word],
  body[data-page="vocabulary"].vocabulary-detail-page #main-content .vocabulary-character-disclosure > summary::before { transition: none; }
  body[data-page="vocabulary"].vocabulary-modern #main-content [data-vocab-list] > [data-vocab-word]:hover { transform: none; }
}