.reference-page { padding: 0 24px 32px; }
.reference-header,.reference-topnav,.reference-page main,.reference-footer { max-width: 1120px; margin-inline: auto; }
.reference-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:24px; }
.reference-brand { display:flex; align-items:center; gap:10px; font-weight:650; font-size:1.25rem; text-decoration:none; color:var(--ink); }
.reference-header .header-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:12px; }
.reference-header button,.reference-header select { min-height:44px; max-width:100%; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); padding:8px 12px; }
.reference-header #reference-theme { width:44px; font-size:0; }
.reference-header #reference-theme::after { content:'◐'; font-size:24px; }
.reference-topnav { display:flex; gap:24px; padding-block:14px; border-block:1px solid var(--line); flex-wrap:wrap; }
.reference-topnav a { color:var(--muted); padding-block:6px; text-decoration:none; }
.reference-topnav a[aria-current] { color:var(--accent); font-weight:650; }
.reference-crumbs { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; font-size:.9rem; color:var(--muted); }
.reference-crumbs a { color:inherit; }
.reference-intro { display:grid; grid-template-columns:1fr auto; align-items:center; gap:32px; margin-block:36px 24px; }
.reference-intro h1 { font-size:clamp(2.3rem,5.3vw,4.5rem); line-height:1.07; letter-spacing:-.045em; margin-block:12px 24px; text-wrap:balance; }
.reference-intro p { max-width:60ch; line-height:1.65; color:var(--muted); }
.reference-intro .reference-eyebrow { color:var(--accent); font-size:.9rem; font-weight:600; }
.reference-stamp { width:170px; aspect-ratio:1; display:grid; place-content:center; background:var(--warm); color:var(--ink); border-radius:36% 50% 40% 45%; font-size:2.5rem; font-weight:650; line-height:1.05; transform:rotate(7deg); }
.reference-language-note { background:var(--subtle); padding:16px 20px; border-radius:14px; font-size:.88rem; line-height:1.6; color:var(--muted); }
.reference-category { margin-block:44px; }
.reference-category-heading { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.reference-category-heading>span { color:var(--accent); font-size:.85rem; }
.reference-category h2 { margin:0; font-size:1.4rem; font-weight:550; }
.reference-topics { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.reference-topic { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px; background:var(--word); color:var(--ink); text-decoration:none; border-radius:18px; transition:transform .15s; }
.reference-category:nth-of-type(even) .reference-topic { background:var(--lesson); }
.reference-topic strong { display:block; font-size:1.25rem; font-weight:550; margin-bottom:6px; }
.reference-topic span span { color:var(--muted); font-size:.9rem; }
.reference-topic:hover { transform:translateY(-2px); }
.reference-search { display:grid; gap:8px; margin-block:28px; font-weight:550; }
.reference-search input { width:100%; font:inherit; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); color:var(--ink); }
.reference-entry { min-width:0; border-bottom:1px solid var(--line); padding-block:12px; }
.reference-entry[hidden] { display:none; }
.word-entry summary { cursor:pointer; display:list-item; padding:14px 8px; font-size:1.2rem; font-weight:550; }
.word-meaning { display:block; color:var(--muted); font-size:1rem; font-weight:400; padding-top:6px; }
.word-entry[open] { background:var(--surface); border-radius:16px; padding-inline:20px; margin-block:10px; }
.word-content { padding-bottom:20px; }
.word-forms { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.word-forms>div { background:var(--word); padding:16px; border-radius:12px; }
.word-forms dt { color:var(--muted); font-size:.85rem; margin-bottom:8px; }
.word-forms dd { margin:0; font-size:1.2rem; overflow-wrap:anywhere; }
.reference-entry p { max-width:68ch; line-height:1.75; overflow-wrap:anywhere; }
.reference-entry blockquote { border-inline-start:3px solid var(--coral); margin:20px 0; padding:10px 20px; font-size:1.2rem; line-height:1.7; }
.reference-group { margin-block:20px; }
.reference-group .reference-group { padding-inline-start:16px; border-inline-start:2px solid var(--line); }
.reference-entry small { color:var(--muted); }
.reference-table { overflow-x:auto; max-width:100%; padding:4px; }
.reference-table table { border-collapse:collapse; width:100%; }
.reference-table th,.reference-table td { padding:12px; border-bottom:1px solid var(--line); text-align:start; line-height:1.5; }
.reference-table th { background:var(--word); }
.reference-speak,.reference-audio button { min-width:44px; min-height:44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; font:inherit; cursor:pointer; padding:8px; margin-inline:4px; }
.reference-speak { font-size:1.3rem; }
.reference-audio:not([hidden]) { display:inline-flex; align-items:center; flex-wrap:wrap; max-width:100%; gap:8px; font-size:1rem; }
.reference-next { background:var(--lesson); border-radius:24px; padding:28px; margin-block:40px; }
.reference-next h2 { margin-top:0; }
.reference-next a { display:inline-block; color:var(--accent); margin-inline-end:24px; padding-block:10px; }
.reference-footer { border-top:1px solid var(--line); padding-block:24px; color:var(--muted); line-height:1.6; }
.reference-footer a,.reference-exercise-link { color:var(--accent); }
.reference-page :focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.reference-page [hidden] { display:none!important; }
@media(max-width:767px) {
  .reference-page { padding-inline:16px; }
  .reference-header { flex-wrap:wrap; gap:16px; }
  .reference-header .header-actions { width:100%; justify-content:space-between; }
  .reference-topnav { gap:18px; font-size:.9rem; }
  .reference-intro { grid-template-columns:1fr; margin-block:16px; }
  .reference-intro h1 { font-size:2rem; margin-block:10px 16px; }
  .reference-crumbs { margin-top:16px; }
  .reference-stamp { display:none; }
  .reference-topics,.word-forms { grid-template-columns:1fr; }
  .reference-topic { padding:20px; }
  .word-entry[open] { padding-inline:12px; }
  .reference-group .reference-group { padding-inline-start:8px; }
}
@media(prefers-reduced-motion:reduce) { .reference-topic { transition:none; } .reference-topic:hover { transform:none; } }
.reference-english { display:block; margin-top:8px; color:var(--muted); font-size:.9rem; font-weight:400; }
.reference-missing { color:var(--muted); font-size:.9rem; font-weight:400; }
.reference-english-toggle { min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); cursor:pointer; }

.reference-controls{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap;margin:.5rem 0 1rem}
#reference-load-more{min-height:44px;padding:.55rem .95rem;border:1px solid var(--line,#d8d0c4);border-radius:999px;background:var(--paper,#fff);color:inherit;font:inherit;cursor:pointer}
#reference-load-more:hover{background:var(--wash,#f6f1e8)}
#reference-shown,.reference-progress{margin:0;color:var(--ink-soft,#666);font-size:.95rem}