:root {
  --ink:#203d35; --muted:#63766d; --accent:#ddf3a0; --paper:#fff;
  --bg:#f1f4f1; --line:#dce5de; --green:#306d50; --soft:#eef4ec;
  --warning:#fff8e9; --warning-ink:#775b24; --rail:#19352d; --radius:12px;
  font-family:"Segoe UI","Microsoft YaHei","Yu Gothic","Meiryo",sans-serif;
  color:var(--ink); background:var(--bg); font-size:15px;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; }
button { border:0; background:none; color:inherit; cursor:pointer; }
button,a,select { touch-action:manipulation; }
button:disabled { cursor:default; opacity:.45; }
a { color:var(--green); }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #5c9bea; outline-offset:2px; }
[hidden] { display:none!important; }
.shell { display:grid; grid-template-columns:184px minmax(0,1fr); height:100vh; height:100dvh; overflow:hidden; }
.rail { background:var(--rail); color:#d7e5da; padding:22px 12px 16px; display:flex; flex-direction:column; min-height:0; overflow:auto; }
.brand { text-decoration:none; display:flex; gap:10px; align-items:center; color:#fff; font-size:20px; font-weight:650; }
.brand small { display:block; font-size:9px; letter-spacing:1px; color:#a7c2b1; margin-top:5px; }
.brand-icon { width:34px; height:38px; display:grid; place-items:center; background:var(--accent); color:#19352d; font:25px serif; border-radius:9px; flex:none; }
.rail-section { font-size:12px; color:#a7c2b1; margin:26px 10px 12px; }
.nav-item { width:100%; display:flex; gap:8px; align-items:center; text-align:left; padding:12px 10px; border-radius:8px; color:#c7dbcd; font-size:14px; margin-bottom:5px; }
.nav-item:hover { background:#294a3a; }
.nav-item.active { background:var(--accent); color:#19352d; font-weight:650; }
.nav-icon { font-size:20px; width:22px; text-align:center; flex:none; }
.nav-dot { width:5px; height:5px; background:#19352d; border-radius:50%; margin-left:auto; }
.count { font-size:11px; margin-left:auto; border-radius:4px; padding:2px 5px; background:#ffffff18; }
.rail-bottom { margin-top:auto; padding-top:24px; }
.study-note { border:1px solid #476c53; border-radius:9px; padding:13px 10px; }
.mini-label { font-size:11px; display:block; color:#a7c2b1; margin-bottom:10px; }
.study-note strong { font-size:13px; color:var(--accent); }
.study-note p { font-size:12px; color:#b1c9ba; line-height:1.7; margin-bottom:0; }
.rail-settings { color:#c7dbcd; font-size:13px; padding:18px 0 12px; }
.local-label { font-size:10px; display:block; color:#a7c2b1; }
main { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.topbar { height:48px; flex:none; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 22px; background:var(--paper); }
.breadcrumb { font-size:12px; color:var(--muted); }
.breadcrumb span { padding:0 10px; }
.breadcrumb strong { color:var(--ink); font-weight:500; }
.top-actions { display:flex; gap:12px; align-items:center; }
.quiet-button { font-size:12px; color:var(--muted); padding:6px; }
.icon-button { border:1px solid var(--line); border-radius:50%; width:28px; height:28px; display:grid; place-items:center; font-size:14px; }
.avatar { display:none; }
.view { flex:1; min-height:0; overflow:auto; padding:20px 22px; scrollbar-gutter:stable; }
#browse-view { display:flex; flex-direction:column; overflow:hidden; gap:10px; scrollbar-gutter:auto; padding:14px 18px 12px; }
#browse-view:has(#extra-filters:not([hidden])) { overflow-y:auto; }
#browse-view:has(#extra-filters:not([hidden])) .workspace { min-height:220px; }
.page-intro { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:20px; }
.eyebrow { font-size:11px; letter-spacing:1.5px; color:var(--green); font-weight:650; }
h1 { font-size:28px; font-weight:650; margin:7px 0; }
.page-intro p { color:var(--muted); font-size:14px; margin:0; line-height:1.7; }
#browse-view .page-intro { margin:0 0 2px; flex:none; }
#browse-view h1 { font-size:22px; margin:0 0 3px; }
#browse-view .page-intro p { font-size:12px; }
.intro-count { text-align:right; display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.intro-count strong { font-size:27px; font-weight:600; }
.intro-count span { font-size:12px; color:var(--muted); }
.search-row { display:flex; gap:8px; flex:none; }
.search-box { display:flex; align-items:center; gap:9px; background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:0 12px; height:40px; flex:1; min-width:0; }
.search-box>span { font-size:23px; color:var(--muted); }
.search-box input { border:0; outline:none; background:none; width:0; min-width:0; flex:1; font-size:14px; color:var(--ink); }
.search-box:focus-within { outline:2px solid #5c9bea; outline-offset:1px; }
kbd { font-size:12px; border:1px solid var(--line); padding:1px 5px; border-radius:4px; color:var(--muted); }
.outline-button { border:1px solid var(--line); background:var(--paper); border-radius:7px; font-size:13px; padding:7px 11px; white-space:nowrap; }
.outline-button:hover { border-color:#73977c; background:var(--soft); }
.primary-button { background:var(--ink); color:var(--paper); border-radius:8px; padding:11px 18px; font-size:14px; font-weight:600; }
.primary-button:hover { filter:brightness(1.14); }
.text-button { font-size:13px; color:var(--green); padding:4px 0; }
.filter-row { display:flex; gap:10px; align-items:center; justify-content:space-between; flex:none; }
.segmented { display:flex; gap:3px; }
.segmented button { font-size:13px; padding:6px 13px; border-radius:6px; color:var(--muted); }
.segmented button.selected { background:var(--ink); color:var(--paper); }
#filter-toggle { padding:5px 10px; font-size:12px; }
#filter-toggle[aria-expanded=true] { background:var(--soft); border-color:#8faa88; }
.extra-filters { display:flex; gap:12px; padding:8px 10px; background:var(--soft); border-radius:8px; flex:none; }
.extra-filters label { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:7px; flex:1; min-width:0; }
.extra-filters select,.control-select { font-size:13px; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:7px; min-width:0; max-width:240px; }
.extra-filters select { width:100%; }
.workspace-toolbar { display:flex; justify-content:space-between; gap:10px; align-items:center; flex:none; font-size:13px; }
.directory-tools { display:flex; align-items:center; gap:8px; min-width:0; }
.directory-tools strong { font-weight:500; white-space:nowrap; }
#focus-workspace { padding:5px 9px; }
#result-count { color:var(--muted); white-space:nowrap; font-size:12px; }
#directory-toggle { padding:5px 9px; }
#directory-toggle[aria-expanded=true] { background:var(--soft); }
.layout-control { display:flex; align-items:center; gap:4px; }
.layout-control button { min-width:38px; height:30px; font-size:13px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:var(--paper); }
.layout-control button.selected { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.layout-control button span { font-size:11px; margin-left:2px; }
.workspace { display:grid; grid-template-columns:230px minmax(0,1fr); gap:12px; flex:1; min-height:0; position:relative; }
.directory-hidden .workspace { grid-template-columns:minmax(0,1fr); }
.directory-hidden .results { display:none; }
.workspace.compare-many { grid-template-columns:minmax(0,1fr); }
.workspace.compare-many .results { position:absolute; top:0; bottom:0; left:0; width:min(300px,100%); z-index:5; box-shadow:0 5px 25px #122a2330; }
.results { display:flex; flex-direction:column; min-height:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.list-caption { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; font-size:12px; color:var(--muted); border-bottom:1px solid var(--line); flex:none; }
.list-caption button { font-size:11px; }
#grammar-list { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.grammar-row { position:relative; display:block; width:100%; padding:13px 12px; text-align:left; border-bottom:1px solid var(--line); border-left:3px solid transparent; }
.grammar-row:hover { background:var(--soft); }
.grammar-row.active { background:var(--soft); border-left-color:#70985a; }
.row-top { display:flex; align-items:center; gap:7px; font-family:"Yu Gothic","Meiryo",sans-serif; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.level-badge { font-family:"Segoe UI",sans-serif; font-size:11px; font-weight:650; border-radius:4px; padding:3px 5px; background:#e3ece8; color:#41674e; white-space:nowrap; flex:none; }
.new-badge { font-size:10px; white-space:nowrap; color:var(--green); border:1px solid var(--line); border-radius:4px; padding:2px 4px; flex:none; font-weight:500; }
.level-N1 { background:#e9edcc; color:#5e6931; }
.level-N2 { background:#dfe9f4; color:#48638a; }
.level-N3 { background:#eee3f6; color:#7b558e; }
.level-N4 { background:#f7e9d3; color:#8a6634; }
.row-status { margin-left:auto; flex:none; width:7px; height:7px; border:1px solid #a9b8ac; border-radius:50%; }
.row-status.learning { background:#c6982d; border-color:#c6982d; }
.row-status.mastered { background:#508158; border-color:#508158; }
.row-meaning { margin:6px 0 0; font-size:13px; line-height:1.7; color:var(--muted); font-weight:400; overflow-wrap:anywhere; }
.list-footer { padding:8px; text-align:center; border-top:1px solid var(--line); font-size:11px; color:var(--muted); flex:none; }
.panes { display:grid; gap:10px; min-width:0; min-height:0; height:100%; grid-template-rows:minmax(0,1fr); }
.layout-1 { grid-template-columns:minmax(0,1fr); }
.layout-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.layout-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.layout-4 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.grammar-pane { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); min-width:0; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
.grammar-pane.active-pane { border-color:#769a7d; box-shadow:inset 0 0 0 1px #769a7d; }
.pane-top { display:flex; justify-content:space-between; gap:4px; align-items:center; padding:6px 10px; border-bottom:1px solid var(--line); font-size:12px; color:var(--muted); background:var(--soft); flex:none; }
.pane-top>button { font-size:12px; text-align:left; padding:4px 0; white-space:nowrap; }
.active-pane .pane-top>button { color:var(--green); font-weight:650; }
.pane-actions { display:flex; gap:3px; align-items:center; }
.pane-actions button { font-size:12px; padding:4px; min-width:24px; border-radius:4px; }
.pane-actions button:hover { background:var(--paper); }
.pane-actions button[data-back],.pane-actions button[data-forward] { font-size:20px; line-height:18px; }
.pane-actions button[aria-pressed=true] { color:var(--green); background:var(--paper); }
.pane-body { padding:18px 20px 26px; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.pane-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pane-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.bookmark-button { font-size:24px; color:var(--muted); width:30px; flex:none; }
.bookmark-button.saved { color:#9e7829; }
.grammar-title { font-family:"Yu Mincho","Noto Serif JP",serif; font-weight:600; font-size:30px; line-height:1.5; margin:10px 0 5px; overflow-wrap:anywhere; }
.grammar-meaning { font-size:17px; color:var(--green); margin:0 0 13px; line-height:1.7; }
.grammar-explanation { font-size:15px; line-height:1.9; color:var(--muted); margin:0 0 18px; }
.detail-nav { display:flex; gap:6px; flex-wrap:wrap; padding:8px 0; margin:0 0 12px; position:sticky; top:-18px; z-index:1; background:var(--paper); border-bottom:1px solid var(--line); }
.detail-nav button { font-size:12px; color:var(--green); padding:4px 9px; border:1px solid var(--line); border-radius:5px; }
.detail-nav button:hover { background:var(--soft); }
.formation-box { background:var(--soft); border-radius:8px; padding:12px 14px; line-height:1.8; margin-bottom:20px; font-size:15px; overflow-wrap:anywhere; scroll-margin-top:52px; }
.section-label { font-size:11px; color:var(--muted); display:block; margin-bottom:5px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; scroll-margin-top:52px; }
.section-heading h3 { font-size:15px; font-weight:650; margin:0; }
.example { padding:12px 14px; background:var(--soft); border-left:3px solid #acc793; margin-bottom:10px; border-radius:0 6px 6px 0; }
.example-top { display:flex; gap:7px; }
.example-top .ja { flex:1; min-width:0; }
.ja { font-family:"Yu Gothic","Meiryo",sans-serif; font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.zh { font-size:14px; color:var(--muted); line-height:1.8; margin-top:5px; }
.speak { font-size:18px; color:var(--green); flex:none; align-self:start; padding:3px; }
.pitfall { display:flex; gap:10px; background:var(--warning); border:1px solid #e8dcbc; border-radius:8px; padding:12px 14px; margin:18px 0; color:var(--warning-ink); font-size:14px; line-height:1.8; }
.pitfall>span { font-weight:bold; }
.relations { border-top:1px solid var(--line); padding-top:16px; margin-top:16px; scroll-margin-top:52px; }
.relation-title { font-size:13px; color:var(--muted); display:block; margin-bottom:8px; }
.relation-group { margin-bottom:16px; }
.relation-chips { display:flex; gap:7px; flex-wrap:wrap; }
.relation-chip { display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:6px; padding:7px 9px; font-size:14px; text-align:left; overflow-wrap:anywhere; }
.relation-chip:hover { background:var(--soft); border-color:#8eb379; }
.relation-chip small { font-size:11px; color:var(--muted); }
.relation-note { font-size:12px; color:var(--muted); line-height:1.8; }
.pane-study { border-top:1px solid var(--line); margin-top:18px; padding-top:16px; display:flex; gap:7px; flex-wrap:wrap; }
.pane-study button { font-size:12px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; }
.pane-study button.chosen { background:var(--soft); border-color:#82a365; color:var(--green); }
.note-label { font-size:13px; color:var(--muted); display:block; margin:18px 0 8px; scroll-margin-top:52px; }
.grammar-note { border:1px solid var(--line); border-radius:7px; resize:vertical; width:100%; min-height:84px; line-height:1.8; padding:10px; font-size:14px; color:var(--ink); background:var(--paper); }
.layout-1 .pane-body { padding-left:clamp(20px,4vw,55px); padding-right:clamp(20px,4vw,55px); }
.layout-3 .pane-body { padding:15px 13px 22px; }
.layout-3 .grammar-title { font-size:25px; }
.layout-3 .pane-top { padding:6px; }
.layout-3 .pane-actions { gap:0; }
.layout-4 .grammar-title { font-size:26px; }
.empty-pane { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:18px; text-align:center; gap:8px; color:var(--muted); }
.empty-pane strong { color:var(--ink); font-size:16px; }
.empty-pane p { font-size:13px; line-height:1.8; margin:5px 0; }
.empty-results { padding:24px 16px; font-size:14px; color:var(--muted); line-height:1.9; }
.pane-tabs { display:none; }
.workspace-focus .shell { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.workspace-focus .rail,.workspace-focus .topbar,.workspace-focus .site-footer { display:none; }
.workspace-focus #browse-view>.page-intro,.workspace-focus .search-row,.workspace-focus .filter-row,.workspace-focus .extra-filters { display:none; }
.workspace-focus #browse-view { padding:10px; }
.site-footer { padding:6px 18px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--muted); flex:none; }
.site-footer .text-button { font-size:11px; }
.section-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:25px; }
.cards-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:22px 0; }
.stat-card { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:19px; }
.stat-card strong { font-size:30px; font-weight:550; display:block; margin:9px 0; }
.stat-card span { font-size:13px; color:var(--muted); }
.learning-options { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:20px 0; }
.review-card { max-width:820px; margin:24px auto; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:32px; }
.review-card .grammar-title { font-size:36px; }
.answer-hidden { text-align:center; margin:50px 0 24px; color:var(--muted); font-size:16px; line-height:1.8; }
.review-controls { display:flex; gap:10px; margin-top:25px; justify-content:center; flex-wrap:wrap; }
.review-controls button { min-width:100px; }
.review-controls small { font-size:12px; }
.quiz-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:25px 0; }
.quiz-option { border:1px solid var(--line); border-radius:9px; padding:17px; text-align:left; background:var(--soft); font-family:"Yu Gothic","Meiryo",sans-serif; font-size:17px; }
.quiz-option:hover { border-color:#82a365; }
.quiz-option:disabled { opacity:1; }
.quiz-option.correct { background:#e6f4df; border-color:#6d9b51; color:#345e26; }
.quiz-option.wrong { background:#f9e6e6; border-color:#bb7479; color:#8d3036; }
.quiz-feedback { padding:17px; border-radius:8px; background:var(--soft); font-size:14px; line-height:1.8; }
.progress-track { height:6px; background:var(--line); border-radius:5px; overflow:hidden; }
.progress-fill { height:100%; background:#86aa61; border-radius:5px; }
.study-path { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:20px 0; }
.path-card { border:1px solid var(--line); background:var(--paper); border-radius:9px; padding:18px 14px; text-align:left; }
.path-card strong { font-size:24px; display:block; margin-bottom:10px; }
.path-card p { font-size:13px; line-height:1.8; color:var(--muted); }
.path-card.active { border-color:#7c9f5c; background:var(--soft); }
.two-columns { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.tag-progress { display:grid; grid-template-columns:100px 1fr 55px; gap:10px; align-items:center; font-size:13px; margin:17px 0; }
.tag-progress small { text-align:right; color:var(--muted); }
.setup-fields { display:grid; gap:16px; margin:20px 0; }
.setup-fields label { display:flex; align-items:center; gap:10px; justify-content:space-between; font-size:14px; }
.setup-fields input,.setup-fields select { border:1px solid var(--line); border-radius:6px; padding:9px; max-width:185px; background:var(--paper); color:var(--ink); min-width:0; }
.small-copy { font-size:14px; color:var(--muted); line-height:1.9; }
.panel-title { font-size:18px; font-weight:600; margin-top:0; }
.backup-actions { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0; }
.help-list,.source-list { line-height:2; font-size:14px; color:var(--muted); padding-left:24px; }
.source-list a { overflow-wrap:anywhere; }
dialog { border:1px solid var(--line); border-radius:13px; padding:25px; width:min(640px,94vw); max-height:90vh; color:var(--ink); background:var(--paper); }
dialog::backdrop { background:#142d2a80; }
.modal-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
.modal-head h2 { font-size:22px; margin:0; }
.modal-head button { font-size:25px; padding:4px 8px; }
.picker-search { width:100%; border:1px solid var(--line); border-radius:7px; padding:11px; background:var(--paper); color:var(--ink); }
.picker-results { max-height:50vh; overflow:auto; margin-top:12px; }
.picker-result { width:100%; text-align:left; display:flex; align-items:center; gap:10px; padding:13px 8px; border-bottom:1px solid var(--line); font-size:14px; }
.picker-result:hover { background:var(--soft); }
.picker-result small { color:var(--muted); font-size:12px; margin-left:auto; max-width:50%; }
#toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(15px); background:var(--ink); color:var(--paper); border-radius:8px; padding:12px 18px; font-size:14px; opacity:0; transition:.15s; pointer-events:none; z-index:50; max-width:90vw; }
#toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.activity-days { height:100px; display:flex; gap:12px; align-items:end; margin-top:25px; }
.activity-days>div { flex:1; text-align:center; display:flex; flex-direction:column; justify-content:end; height:100%; }
.activity-days small { font-size:11px; color:var(--muted); margin-top:8px; }
.blank { color:var(--green); }
body.dark { --paper:#22382e; --bg:#17281f; --ink:#e8f1e4; --muted:#b2c5b7; --line:#40594a; --green:#b5d79d; --soft:#2e4433; --warning:#3c3923; --warning-ink:#e4d28f; --rail:#10241a; }
body.dark .primary-button,body.dark .segmented button.selected,body.dark .layout-control button.selected { background:#d5ed9d; color:#19352d; }
body.dark .quiz-option.correct { background:#304f26; color:#d4efc8; }
body.dark .quiz-option.wrong { background:#593238; color:#f5d0d3; }
body.dark .pitfall { border-color:#73673b; }
body.dark .grammar-pane.active-pane { border-color:#b2ce99; }
@media (max-width:1180px) {
  .shell { grid-template-columns:160px minmax(0,1fr); }
  .rail { padding:18px 9px; }
  .brand { font-size:17px; gap:7px; }
  .brand small { font-size:8px; }
  .workspace { grid-template-columns:205px minmax(0,1fr); }
  .study-note { display:none; }
  .layout-3 .pane-top { flex-wrap:wrap; }
  .layout-3 .pane-actions { width:100%; justify-content:flex-end; }
}
@media (max-width:1000px) {
  .shell { grid-template-columns:1fr; grid-template-rows:48px minmax(0,1fr); }
  .rail { padding:7px 14px; flex-direction:row; gap:18px; align-items:center; overflow:hidden; }
  .brand { font-size:16px; flex:none; }
  .brand small,.rail-section,.rail-bottom,.rail>button[data-scope] { display:none; }
  .brand-icon { width:29px; height:32px; font-size:22px; }
  .rail nav { display:flex; gap:4px; align-items:center; margin-left:auto; }
  .nav-item { width:auto; margin:0; padding:7px 10px; gap:5px; font-size:13px; }
  .nav-icon { font-size:16px; width:auto; }
  .nav-dot,.nav-item .count { display:none; }
  #browse-view { padding:12px; gap:8px; }
  .workspace { grid-template-columns:200px minmax(0,1fr); gap:9px; }
  .two-columns { grid-template-columns:1fr; }
  .study-path { grid-template-columns:repeat(3,1fr); }
  .cards-grid { grid-template-columns:repeat(2,1fr); }
  .site-footer>span { display:none; }
}
@media (max-width:820px) {
  .rail { gap:8px; padding:6px 10px; }
  .brand>span:last-child { display:none; }
  .rail nav { margin:0; flex:1; justify-content:space-between; }
  .nav-item { padding:8px 9px; }
  .nav-icon { display:none; }
  .topbar { height:38px; padding:0 12px; }
  .top-actions { gap:9px; }
  .view { padding:16px 12px; }
  #browse-view { gap:7px; }
  #browse-view h1 { font-size:19px; }
  #browse-view .page-intro p { display:none; }
  .intro-count { gap:5px; }
  .intro-count strong { font-size:20px; }
  .intro-count span { font-size:11px; }
  .workspace,.directory-hidden .workspace { grid-template-columns:minmax(0,1fr); }
  .results { position:absolute; inset:0; z-index:5; box-shadow:0 5px 25px #122a2330; }
  .workspace.compare-many .results { width:100%; }
  .list-caption { padding:10px 13px; }
  .list-caption button { font-size:13px; }
  .panes { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
  .grammar-pane:not(.active-pane) { display:none; }
  .pane-tabs { display:flex; gap:5px; flex:none; overflow:auto; scrollbar-width:thin; }
  .pane-tabs button { flex:1; min-width:0; text-align:left; border:1px solid var(--line); border-radius:6px; background:var(--paper); padding:6px 8px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pane-tabs button[aria-pressed=true] { border-color:#769a7d; background:var(--soft); color:var(--green); font-weight:650; }
  .pane-tabs button:focus-visible { outline-offset:-3px; }
  .pane-tabs button small { color:var(--muted); font-size:10px; margin-right:3px; }
  .pane-tabs.single { display:none; }
  .pane-top,.layout-3 .pane-top { padding:6px 12px; flex-wrap:nowrap; }
  .layout-3 .pane-actions { width:auto; }
  .pane-body,.layout-1 .pane-body,.layout-3 .pane-body { padding:16px 18px 24px; }
  .detail-nav { top:-16px; }
  .grammar-title,.layout-3 .grammar-title,.layout-4 .grammar-title { font-size:28px; }
  .directory-tools strong { display:none; }
  .site-footer { padding:3px 12px 5px; }
  .site-footer .text-button { padding:2px; }
  .extra-filters { flex-wrap:wrap; gap:7px; }
  .extra-filters label { flex:1 1 140px; }
  .search-row .outline-button { font-size:12px; padding:6px 9px; }
  .segmented { flex:1; justify-content:space-between; }
  .segmented button { padding:6px 10px; }
  .review-card { padding:24px 18px; margin:18px auto; }
  .quiz-options { grid-template-columns:1fr; }
  .study-path { grid-template-columns:repeat(2,1fr); }
  .page-intro h1 { font-size:25px; }
}
@media (max-height:650px) {
  #browse-view .page-intro { display:none; }
  .rail-section { margin-top:15px; }
  .rail-bottom .study-note { display:none; }
  .site-footer { display:none; }
}
@media (max-width:440px) {
  .rail { padding:6px; gap:4px; }
  .brand-icon { width:26px; height:30px; }
  .nav-item { padding:8px 5px; font-size:12px; }
  .breadcrumb { font-size:0; }
  .breadcrumb span { display:none; }
  .breadcrumb strong { font-size:12px; }
  .search-box { padding:0 9px; gap:5px; }
  .search-box input { font-size:13px; }
  .search-box kbd { display:none; }
  .segmented { gap:1px; }
  .segmented button { padding:6px; font-size:12px; }
  #filter-toggle { padding:6px; font-size:11px; }
  #clear-scope { font-size:11px; }
  #result-count { display:none; }
  .workspace-toolbar { flex-wrap:wrap; }
  #focus-workspace { font-size:11px; padding:5px 6px; }
  .layout-control { gap:3px; }
  .layout-control button { min-width:30px; height:29px; }
  .layout-control button span { display:none; }
  .pane-tabs button { padding:6px 5px; }
  .pane-tabs button small { display:block; }
  .extra-filters label { flex-basis:100%; }
  .section-card { padding:18px; }
  .stat-card { padding:14px; }
  .setup-fields label { flex-wrap:wrap; }
  .setup-fields input,.setup-fields select { max-width:100%; }
  dialog { padding:18px; }
  .modal-head h2 { font-size:19px; }
}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
#synonyms-view { overflow-anchor:none; }
.synonym-intro { align-items:flex-start; }
.synonym-intro h1 { font-size:28px; margin:5px 0 9px; }
.synonym-intro .intro-count { padding-top:18px; }
.synonym-controls { position:sticky; top:-20px; z-index:3; background:var(--bg); padding:12px 0 8px; }
.synonym-search-row { display:flex; gap:12px; align-items:center; }
.synonym-category-label { display:flex; align-items:center; gap:9px; font-size:13px; white-space:nowrap; color:var(--muted); }
.synonym-category-label select { background:var(--paper); border:1px solid var(--line); border-radius:8px; color:var(--ink); height:40px; padding:0 10px; max-width:190px; }
.synonym-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:10px; }
#synonym-result-count { color:var(--green); font-size:13px; min-width:72px; font-variant-numeric:tabular-nums; }
.synonym-toolbar .outline-button,.synonym-toolbar .text-button { font-size:12px; padding:7px 10px; }
#synonym-self-check[aria-pressed=true] { background:var(--accent); color:#19352d; border-color:#afca7a; }
.synonym-toolbar-spacer { flex:1; }
.synonym-hint { color:var(--muted); font-size:12px; line-height:1.6; margin:8px 0 0; }
.synonym-table-wrap { background:var(--paper); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.synonym-table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:14px; line-height:1.8; }
.synonym-table th { background:var(--soft); color:var(--muted); font-size:12px; text-align:left; padding:13px 18px; font-weight:600; border-bottom:1px solid var(--line); }
.synonym-table th:nth-child(1) { width:24%; }
.synonym-table th:nth-child(2) { width:28%; }
.synonym-table th:nth-child(3) { width:48%; }
.synonym-table td { padding:20px 18px; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.synonym-row:last-child td { border-bottom:0; }
.synonym-row.selected-synonym { background:var(--soft); }
.synonym-row:focus-visible { outline:2px solid var(--green); outline-offset:-3px; }
.synonym-row-meta { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; margin-bottom:12px; }
.synonym-category { padding:1px 7px; border-radius:4px; background:var(--soft); border:1px solid var(--line); }
.synonym-words { display:grid; gap:16px; }
.synonym-word { display:grid; grid-template-columns:20px minmax(0,1fr); align-items:baseline; column-gap:4px; }
.synonym-word strong { font-family:"Yu Mincho","Noto Serif JP",serif; font-size:24px; line-height:1.4; font-weight:600; }
.synonym-letter { color:var(--green); font-size:11px; font-weight:650; font-family:"Segoe UI",sans-serif; }
.synonym-reading,.synonym-meaning { grid-column:2; }
.synonym-reading { color:var(--muted); font-size:12px; }
.synonym-meaning { font-size:12px; color:var(--muted); margin-top:3px; }
.synonym-row-actions { display:flex; gap:12px; margin-top:14px; }
.synonym-row-actions .text-button { font-size:11px; padding:0; }
.synonym-difference { margin:0; color:var(--ink); }
.synonym-covered { display:flex; flex-direction:column; align-items:flex-start; gap:12px; color:var(--muted); font-size:13px; }
.synonym-covered .outline-button { font-size:12px; }
.synonym-example+.synonym-example { margin-top:15px; padding-top:15px; border-top:1px dashed var(--line); }
.synonym-example-top { display:grid; grid-template-columns:20px minmax(0,1fr); gap:4px; align-items:baseline; }
.synonym-example-top p { margin:0; font-size:15px; line-height:1.9; }
.synonym-example mark { background:var(--soft); color:var(--green); font-weight:650; padding:1px 3px; border-radius:3px; }
.synonym-translation { margin:5px 0 0 24px; font-size:12px; color:var(--muted); line-height:1.8; }
.synonym-footnote { font-size:12px; line-height:1.8; color:var(--muted); margin:18px 0 0; }
.synonym-footnote .text-button { font-size:12px; }
.synonym-empty { text-align:center; color:var(--muted); padding:40px 20px; font-size:14px; }
@media (max-width:1000px) {
  .rail nav { min-width:0; }
  .rail .nav-item { white-space:nowrap; }
}
@media (max-width:820px) {
  .synonym-intro { gap:8px; margin-bottom:10px; }
  .synonym-intro h1 { font-size:23px; }
  .synonym-intro p { font-size:12px; }
  .synonym-intro .intro-count { padding-top:7px; flex-direction:column; align-items:flex-end; gap:0; }
  .synonym-search-row { flex-wrap:wrap; gap:8px; }
  .synonym-search-row .search-box { flex-basis:100%; }
  .synonym-category-label { width:100%; }
  .synonym-category-label select { flex:1; max-width:none; height:34px; }
  .synonym-controls { top:-16px; }
  .synonym-toolbar-spacer { display:none; }
  .synonym-table { display:block; }
  .synonym-table thead { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
  .synonym-table tbody { display:block; }
  .synonym-row { display:block; padding:18px 16px; border-bottom:1px solid var(--line); }
  .synonym-row:last-child { border-bottom:0; }
  .synonym-table td { display:block; border:0; padding:0; }
  .synonym-table td+td { margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
  .synonym-table td+td::before { content:attr(data-label); display:block; font-size:11px; color:var(--green); font-weight:650; margin-bottom:7px; }
  .synonym-words { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .synonym-word strong { font-size:25px; }
  .synonym-row-actions { margin-top:10px; }
}
@media (max-width:360px) { .rail .nav-item { padding:8px 4px; font-size:11px; } .synonym-toolbar .outline-button,.synonym-toolbar .text-button { padding:6px; font-size:11px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }
@media print {
  .shell,main { display:block; height:auto; overflow:visible; }
  .rail,.topbar,#browse-view>.page-intro,.search-row,.filter-row,.extra-filters,.workspace-toolbar,.results,.site-footer,.pane-actions,.bookmark-button,.speak,.pane-study,.grammar-note,.note-label,.pane-tabs,.detail-nav { display:none!important; }
  .view { overflow:visible; padding:0; }
  #browse-view,.workspace,.panes { display:block; height:auto; overflow:visible; }
  .grammar-pane { display:block!important; border:0; break-after:page; height:auto; }
  .pane-body { overflow:visible; }
  .pane-top { display:none; }
  .grammar-title { font-size:26px; }
  .cards-grid { grid-template-columns:repeat(4,1fr); }
  .synonym-controls,.synonym-row-actions,.synonym-footnote button { display:none!important; }
  .synonym-intro .eyebrow { display:none; }
  .synonym-table-wrap { overflow:visible; border:0; }
  .synonym-table { display:table; font-size:11px; }
  .synonym-table thead { position:static; display:table-header-group; width:auto; height:auto; margin:0; clip:auto; }
  .synonym-table tbody { display:table-row-group; }
  .synonym-row { display:table-row; break-inside:avoid; border:0; padding:0; }
  .synonym-table td { display:table-cell; padding:10px; border-bottom:1px solid #ccc; }
  .synonym-table td+td { margin:0; padding:10px; border-top:0; }
  .synonym-table td::before { display:none!important; }
  .synonym-words { display:grid; grid-template-columns:1fr; }
  .synonym-word strong { font-size:19px; }
  .synonym-difference[hidden],.synonym-translation[hidden] { display:block!important; }
  .synonym-covered { display:none; }
}

/* Account controls use the existing visual language. */
.auth-form{display:grid;gap:15px;margin:20px 0}.auth-form label{display:grid;gap:7px;font-size:14px}.auth-form input{box-sizing:border-box;width:100%;padding:12px;border:1px solid #a5b5a9;border-radius:8px;background:transparent;color:inherit;font:inherit}.auth-links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.auth-error{color:#ad4436;min-height:1.2em;margin:0}.sync-status{font-size:11px;color:var(--muted,#637069);max-width:240px;line-height:1.4;overflow-wrap:anywhere}.top-actions{flex-wrap:wrap}.grammar-note[readonly]{cursor:pointer;opacity:.75}#recovery-code{width:100%;box-sizing:border-box;font-family:monospace;overflow-wrap:anywhere}.dark .auth-error{color:#ffa89b}@media(max-width:820px){.sync-status{max-width:145px;font-size:10px}#account-button{padding:7px 9px;font-size:12px}.topbar{height:auto;min-height:64px}.top-actions{justify-content:flex-end}}@media print{#account-button,#sync-status{display:none}}