:root {
  --paper:#f5f4ef; --surface:#fffefa; --ink:#263b35; --muted:#65746d;
  --green:#345c49; --sage:#e8eee7; --line:#dcdfd5; --gold:#947342;
  --serif:Georgia,'Times New Roman','Yu Mincho','Hiragino Mincho ProN',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Helvetica Neue','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:14px/1.7 var(--sans); padding-bottom:94px; }
button,input { font:inherit; }
button { cursor:pointer; border:0; color:inherit; background:none; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:2px solid var(--green); outline-offset:4px; }
button:disabled { cursor:default; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
[hidden] { display:none!important; }
.site-header { max-width:1320px; margin:auto; min-height:88px; padding:20px 40px; display:flex; gap:32px; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); font-family:var(--serif); font-size:29px; font-weight:500; letter-spacing:-1px; line-height:1; }
.logo { display:grid; place-items:center; height:38px; width:38px; border:1px solid #b9c5b5; color:var(--green); font-style:italic; font-size:29px; padding-bottom:5px; letter-spacing:-3px; padding-right:4px; border-radius:3px; }
.brand-note { font-size:12px; color:var(--muted); letter-spacing:.1em; }
.level-label { margin-left:auto; color:var(--green); font-size:12px; letter-spacing:.07em; border:1px solid #c1cdbe; padding:5px 12px; border-radius:3px; white-space:nowrap; }
main { max-width:1280px; margin:auto; padding:0 40px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.mode-tabs { display:flex; gap:24px; }
.mode-tabs button { padding:16px 2px 14px; color:var(--muted); font-size:13px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.mode-tabs button.active { border-color:var(--green); color:var(--ink); font-weight:600; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 262px; gap:28px; align-items:start; }
#study { min-width:0; scroll-margin-top:24px; }
.card { border:1px solid var(--line); border-radius:8px; padding:27px 30px 16px; background:var(--surface); box-shadow:0 4px 18px #253b3503; }
.card-top { display:flex; align-items:center; gap:14px; justify-content:space-between; }
.badge { color:var(--muted); font-size:10px; letter-spacing:.06em; line-height:1.6; }
.card-position { font-family:var(--serif); font-size:17px; color:var(--ink); flex-shrink:0; }
.card-position>span { color:#7d877e; font-size:13px; }
.card-lead { display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,35%); gap:25px; align-items:center; padding:23px 0 28px; }
.word-copy { min-width:0; }
.entry-label { display:flex; align-items:center; gap:12px; color:var(--gold); font-size:11px; }
.entry-label>span { padding-left:12px; border-left:1px solid #d1d5c7; color:var(--muted); font-size:9px; letter-spacing:.12em; }
.word-heading { display:flex; align-items:center; gap:12px; margin-top:8px; }
.word-heading h2 { font:400 clamp(32px,3.7vw,51px)/1.15 var(--serif); letter-spacing:-.035em; margin:0; min-width:0; overflow-wrap:break-word; }
.meaning { font-size:17px; line-height:1.65; margin:14px 0 12px; letter-spacing:.02em; }
.definition { margin:0; font-size:14px; line-height:1.8; color:var(--muted); max-width:420px; }
.sound { border:1px solid #c8d0c2; color:var(--green); border-radius:50%; width:34px; height:34px; font-size:12px; flex-shrink:0; padding-left:8px; }
.visual { margin:0; overflow:hidden; background:#f1eee3; border-radius:5px; position:relative; }
.vocabulary-art { width:100%; aspect-ratio:1; background-image:url('vocabulary-atlas.png'); background-size:200% 300%; background-position:calc(var(--col)*100%) calc(var(--row)*50%); }
.visual>img,.visual>svg { width:100%; height:auto; display:block; }
.context-block { border-top:1px solid var(--line); padding:23px 0 20px; }
.block-label { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; }
.block-label h3 { font-size:9px; letter-spacing:.16em; color:var(--gold); font-weight:600; margin:0; }
.example-sound { color:var(--green); display:flex; align-items:center; gap:6px; font-size:10px; }
.example { font:400 19px/1.8 var(--serif); margin:0; color:var(--ink); }
mark { color:var(--green); background:linear-gradient(transparent 75%,#dfe8d4 75%); padding-bottom:1px; }
.translation { font:12px/1.9 var(--sans); color:var(--muted); margin:10px 0 0; }
.usage-block { border-top:1px solid var(--line); padding:20px 0 24px; }
.usage-block h3 { font-size:12px; font-weight:600; margin:0 0 9px; }
.usage-block p { color:#57665f; font-size:12px; line-height:1.95; margin:0 0 13px; }
.collocations { display:flex; flex-wrap:wrap; gap:7px; }
.collocations span { padding:3px 9px; border-radius:3px; background:#f0f1e8; color:#54634e; font-size:11px; line-height:1.8; }
.card-actions { padding:19px 0 0; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.primary,.secondary,.review-button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:42px; border-radius:4px; font-size:12px; padding:10px 14px; line-height:1.4; }
.primary { background:var(--green); color:#fff; border:1px solid var(--green); }
.primary:hover { background:#294c3c; }
.primary svg { width:17px; height:17px; }
.secondary { border:1px solid #d6dacd; color:#58665e; }
.secondary:hover:not(:disabled) { background:#f0f2e9; }
.secondary:disabled { opacity:.35; }
.secondary svg { width:17px; height:17px; }
.review-button { color:var(--muted); padding-left:6px; padding-right:6px; }
.review-button svg { width:16px; height:16px; }
.review-button[aria-pressed='true'] { color:var(--gold); }
.review-button[aria-pressed='true'] svg { fill:#ede3cb; }
.status { font-size:11px; color:var(--muted); margin-top:9px; }
.status:empty { min-height:5px; margin-top:0; }
.word-catalog { min-width:0; padding:7px 0 0; }
.side-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; font-size:12px; font-weight:500; }
.side-top>span:last-child { color:var(--muted); font:14px var(--serif); }
.search { display:flex; align-items:center; gap:9px; padding:0 10px; border:1px solid var(--line); border-radius:4px; margin-bottom:13px; background:#fafaf6; }
.search svg { width:15px; height:15px; color:#788277; }
.search input { width:100%; min-width:0; padding:10px 0; font-size:11px; color:var(--ink); background:none; border:0; }
.search:focus-within { outline:2px solid #8da383; outline-offset:2px; }
.search input:focus-visible { outline:none; }
#wordList { display:flex; flex-direction:column; gap:2px; }
.word-row { display:flex; align-items:center; gap:10px; text-align:left; width:100%; min-height:70px; padding:12px 9px; border-radius:4px; border:1px solid transparent; }
.word-row:hover { background:#edeFE7; }
.word-row.selected { background:#e8eee3; border-color:#d4decd; }
.word-index { color:#7a8777; font:12px var(--serif); width:18px; flex-shrink:0; }
.word-summary { display:flex; flex-direction:column; min-width:0; gap:4px; }
.word-summary strong { font:400 17px/1.25 var(--serif); letter-spacing:-.015em; overflow-wrap:break-word; }
.word-meaning { font-size:10px; line-height:1.7; color:var(--muted); }
.dot { display:flex; align-items:center; margin-left:auto; flex-shrink:0; color:#6c8963; }
.dot svg { height:13px; width:13px; }
.dot.flagged { color:var(--gold); }
.catalog-note { border-top:1px solid var(--line); margin-top:19px; padding-top:16px; color:var(--muted); font-size:10px; line-height:1.9; }
.list-empty { color:var(--muted); font-size:12px; }
.page-footer { display:flex; justify-content:space-between; gap:12px; padding:34px 0 16px; color:#71806f; font-size:9px; letter-spacing:.05em; }
.bottom-nav { position:fixed; bottom:0; left:0; width:100%; padding:10px 24px calc(10px + env(safe-area-inset-bottom)); background:#f5f4eff5; border-top:1px solid var(--line); display:flex; justify-content:center; gap:8px; backdrop-filter:blur(12px); z-index:10; }
.bottom-nav button { display:flex; gap:9px; align-items:center; justify-content:center; padding:10px 28px; min-width:160px; border-radius:5px; color:var(--muted); font-size:12px; }
.bottom-nav button.active { color:var(--green); background:#e6ece0; }
.bottom-nav svg { width:17px; height:17px; }
.review-count { display:inline-flex; justify-content:center; align-items:center; min-width:21px; height:21px; border-radius:50%; background:#e3e8dc; font-size:10px; color:var(--green); }
.quiz-card { padding-top:27px; }
.quiz-progress { display:flex; gap:4px; margin:19px 0 26px; }
.quiz-progress span { flex:1; height:3px; background:#e5e8df; }
.quiz-progress span.completed { background:#5b7a58; }
.quiz-progress span.current { background:#a5b79a; }
.quiz-title { font-size:20px; font-weight:500; margin:0 0 8px; line-height:1.7; }
.quiz-sub { font-size:12px; color:var(--muted); margin:0; }
.quiz-example { padding:23px; background:#f1f2e9; border-left:2px solid #acb89a; border-radius:0 4px 4px 0; font:21px/1.95 var(--serif); margin:25px 0 20px; }
.blank { display:inline-block; border-bottom:1px solid #8a9c7c; line-height:1; min-width:90px; margin:0 4px; vertical-align:baseline; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice { display:flex; gap:13px; align-items:center; text-align:left; padding:15px; border:1px solid #d9dfd0; border-radius:4px; background:#fffefa; min-width:0; font-size:15px; }
.choice:hover:not(:disabled) { border-color:#819775; background:#f2f5ec; }
.choice-key { display:grid; place-items:center; width:23px; height:23px; font-size:10px; border:1px solid #d9dfd0; color:#6d7d65; border-radius:3px; flex-shrink:0; }
.choice.correct { border-color:#75936c; background:#eaf1e3; }
.choice.wrong { border-color:#c49981; background:#f6ede6; }
.choice:disabled { opacity:1; color:var(--ink); }
.quiz-feedback { margin-top:22px; padding:19px 20px; border:1px solid #d6dfcd; border-radius:4px; background:#f5f7f0; }
.feedback-title { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--green); }
.feedback-title strong { font:22px var(--serif); margin-left:6px; }
.quiz-feedback>p { font-size:12px; line-height:1.95; margin:12px 0; }
.answer-sentence { border-top:1px solid #d9dfd0; padding-top:11px; }
.answer-sentence summary { font-size:11px; color:#5e7359; cursor:pointer; }
.answer-sentence p { font-size:14px; line-height:1.9; margin-bottom:0; }
.answer-sentence .translation { font-size:12px; }
.quiz-actions { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:21px 0 0; }
.quiz-instruction { color:var(--muted); font-size:10px; display:flex; align-items:center; gap:7px; }
.quiz-instruction svg { width:13px; height:13px; }
.complete-card { text-align:center; min-height:430px; padding:42px 30px; }
.complete-card>.entry-label { justify-content:center; letter-spacing:.13em; font-size:10px; }
.complete-mark { display:grid; place-items:center; width:60px; height:60px; margin:25px auto; border:1px solid #aebfa2; border-radius:50%; background:#edf1e7; color:var(--green); }
.complete-mark svg { width:28px; height:28px; }
.complete-card h2 { font-size:23px; font-weight:500; line-height:1.7; }
.complete-card p { font-size:12px; color:var(--muted); line-height:1.9; margin-bottom:28px; }
.result-score { display:block; font:46px var(--serif); font-weight:400; color:var(--green); margin-bottom:5px; }
.result-score>span { font-size:28px; color:#87937e; }
.empty { padding:46px 30px; }
.empty h2 { font-size:22px; font-weight:500; margin:15px 0; }
.empty p { font-size:12px; color:var(--muted); }
@media(min-width:1450px) { main { max-width:1360px; } .card-lead { grid-template-columns:minmax(0,1fr) 280px; } }
@media(max-width:1100px) {
  .site-header { padding:20px 28px; }
  main { padding:0 28px; }
  .workspace { grid-template-columns:minmax(0,1fr) 222px; gap:22px; }
  .card { padding:23px 24px 15px; }
  .card-lead { grid-template-columns:minmax(0,1fr) 190px; gap:20px; }
  .word-heading h2 { font-size:38px; }
  .word-summary strong { font-size:16px; }
  .meaning { font-size:15px; }
  .card-actions { gap:6px; }
  .primary,.secondary,.review-button { font-size:11px; padding:10px; }
}
@media(max-width:850px) {
  .workspace { grid-template-columns:minmax(0,1fr); }
  .word-catalog { padding-top:12px; }
  .card-lead { grid-template-columns:minmax(0,1fr) 240px; gap:24px; }
  #wordList { display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
  .word-row { min-height:72px; }
  .word-summary strong { font-size:18px; }
  .catalog-note br { display:none; }
  .brand-note { font-size:11px; }
}
@media(max-width:600px) {
  body { padding-bottom:78px; }
  .site-header { min-height:72px; padding:18px 20px; gap:12px; }
  .brand { font-size:26px; gap:9px; }
  .logo { height:33px; width:33px; font-size:26px; }
  .brand-note { display:none; }
  .level-label { font-size:10px; padding:4px 8px; }
  main { padding:0 18px; }
  .toolbar { margin-bottom:17px; gap:8px; }
  .mode-tabs { gap:23px; flex-shrink:0; }
  .mode-tabs button { font-size:12px; padding:13px 0; }
  .card { padding:20px 19px 13px; border-radius:6px; }
  .card-lead { display:flex; flex-direction:column; align-items:stretch; gap:20px; padding:22px 0 24px; }
  .word-heading h2 { font-size:42px; }
  .meaning { font-size:16px; margin-top:13px; }
  .definition { font-size:14px; }
  .visual { width:min(100%,280px); align-self:center; }
  .context-block { padding:19px 0; }
  .example { font-size:19px; }
  .translation { font-size:12px; }
  .usage-block { padding:18px 0 21px; }
  .usage-block p { font-size:12px; }
  .collocations span { font-size:10px; }
  .card-actions { gap:8px; flex-wrap:wrap; }
  .previous { order:1; }
  .primary { order:2; margin-left:auto; }
  .review-button { order:3; width:100%; border-top:1px solid #e5e7de; margin-top:4px; padding-top:14px; }
  .primary,.secondary,.review-button { font-size:12px; min-height:43px; }
  .word-catalog { padding-top:8px; }
  #wordList { grid-template-columns:1fr; gap:2px; }
  .word-row { min-height:74px; }
  .word-summary strong { font-size:20px; }
  .word-meaning { font-size:11px; }
  .search input { font-size:12px; min-height:42px; }
  .search { margin-bottom:10px; }
  .catalog-note { font-size:11px; }
  .page-footer { flex-direction:column; gap:7px; padding-top:26px; font-size:8px; }
  .bottom-nav { padding:8px 18px calc(8px + env(safe-area-inset-bottom)); }
  .bottom-nav button { flex:1; min-width:0; font-size:12px; padding:10px; }
  .quiz-title { font-size:18px; }
  .quiz-sub { font-size:11px; }
  .quiz-example { font-size:19px; line-height:1.95; padding:18px; margin-top:21px; }
  .choices { grid-template-columns:1fr; gap:9px; }
  .choice { padding:13px; min-height:53px; }
  .quiz-progress { margin-bottom:23px; }
  .quiz-actions { flex-wrap:wrap; }
  .quiz-instruction { font-size:9px; width:100%; }
  .quiz-feedback { padding:15px; }
  .complete-card { padding:35px 18px; min-height:400px; }
  .complete-card h2 { font-size:20px; }
  .complete-card .primary { margin:auto; }
  .empty { padding:36px 22px; }
  .empty h2 { font-size:19px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }


.notebook-summary { display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:24px 0; text-align:left; }
.notebook-summary .eyebrow { color:var(--muted); font-size:10px; letter-spacing:.14em; font-weight:600; white-space:nowrap; }
.word-count { display:flex; align-items:baseline; gap:9px; flex-shrink:0; }
.word-count strong { font:400 40px/1 var(--serif); color:var(--green); }
.word-count span { color:var(--muted); font-size:9px; letter-spacing:.08em; white-space:nowrap; }
@media(max-width:600px) {
  .notebook-summary { padding:20px 0; }
  .notebook-summary .eyebrow { font-size:9px; letter-spacing:.07em; }
  .word-count { gap:6px; }
  .word-count strong { font-size:30px; }
  .word-count span { font-size:8px; letter-spacing:.02em; }
}

.pronunciation { display:flex; align-items:baseline; flex-wrap:wrap; gap:9px; margin-top:12px; }
.pronunciation-accent { color:var(--green); font-size:9px; font-weight:600; letter-spacing:.08em; text-decoration:none; border-bottom:1px solid #b7c5ad; }
.pronunciation-accent:hover { border-color:var(--green); }
.ipa { font-family:'Charis SIL','Doulos SIL','Lucida Sans Unicode','Segoe UI',Arial,sans-serif; color:#53655b; font-size:16px; line-height:1.6; overflow-wrap:anywhere; }
.pronunciation-note { color:var(--muted); font-size:10px; line-height:1.7; margin:5px 0 0; }