@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Shippori+Mincho:wght@400;600;700;800&display=swap');
/* Noto Serif first: Cyrillic + combining acute render correctly.
   Japanese glyphs absent in Noto Serif fall through to Noto Sans JP. */
:root {
  --bg: #f7f3ec; --bg-warm: #f0ebe1; --card: #ffffff;
  --accent-red: #b83230; --accent-blue: #1a6fa0; --accent-green: #2a7d4f;
  --accent-purple: #6b4c9a; --accent-orange: #c97b2a;
  --text: #2a2a2a; --text-light: #5a5a5a; --muted: #8a8a8a;
  --border: #ddd; --nav-bg: #2a2a2a; --nav-text: #e8e0d4;
  --radius: 10px; --shadow: 0 2px 16px rgba(0,0,0,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Noto Serif','Noto Sans JP',sans-serif; background:var(--bg); color:var(--text); line-height:2; font-size:16px; min-height:100vh; }
.site-nav { background:var(--nav-bg); position:sticky; top:0; z-index:100; box-shadow:0 2px 12px rgba(0,0,0,0.2); }
.nav-inner { max-width:960px; margin:0 auto; display:flex; align-items:center; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.nav-inner::-webkit-scrollbar { height:0; }
.nav-brand { padding:14px 20px; color:var(--nav-text); text-decoration:none; font-family:'Shippori Mincho',serif; font-weight:700; font-size:0.95rem; white-space:nowrap; border-right:1px solid rgba(255,255,255,0.1); flex-shrink:0; }
.nav-link { padding:14px 16px; color:rgba(255,255,255,0.6); text-decoration:none; font-size:0.85rem; white-space:nowrap; transition:color 0.2s,background 0.2s; flex-shrink:0; }
.nav-link:hover { color:#fff; background:rgba(255,255,255,0.06); }
.nav-link.active { color:#fff; background:rgba(255,255,255,0.1); border-bottom:2px solid var(--accent-red); }
.container { max-width:820px; margin:0 auto; padding:40px 24px 80px; }
.page-header { text-align:center; margin-bottom:48px; padding-bottom:28px; border-bottom:2px solid var(--border); }
.page-header h1 { font-family:'Shippori Mincho',serif; font-size:2rem; font-weight:800; line-height:1.4; margin-bottom:8px; }
.page-header .subtitle { font-size:0.95rem; color:var(--muted); font-weight:300; }
.page-header .big-letters { font-size:3.5rem; font-weight:900; letter-spacing:0.1em; margin-bottom:4px; font-family:'Noto Serif',Georgia,serif; }
.section { margin-bottom:44px; animation:fadeUp 0.5s ease both; }
.section:nth-child(2){animation-delay:0.05s}.section:nth-child(3){animation-delay:0.1s}.section:nth-child(4){animation-delay:0.15s}.section:nth-child(5){animation-delay:0.2s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.section h2 { font-family:'Shippori Mincho',serif; font-size:1.35rem; font-weight:700; margin-bottom:18px; padding-left:16px; border-left:4px solid var(--accent-red); line-height:1.6; }
.section h2.blue{border-left-color:var(--accent-blue)}.section h2.green{border-left-color:var(--accent-green)}.section h2.purple{border-left-color:var(--accent-purple)}.section h2.orange{border-left-color:var(--accent-orange)}
.section h3 { font-size:1.05rem; font-weight:700; margin:24px 0 10px; color:var(--accent-red); }
.section h3.blue{color:var(--accent-blue)}.section h3.green{color:var(--accent-green)}.section h3.purple{color:var(--accent-purple)}.section h3.orange{color:var(--accent-orange)}
p { margin-bottom:12px; }
.card { background:var(--card); border-radius:var(--radius); padding:24px 28px; margin-bottom:20px; box-shadow:var(--shadow); }
.problem-box { background:#fdf2f2; border:2px solid #d44; border-radius:var(--radius); padding:22px 26px; margin-bottom:20px; }
.problem-box h3 { color:#d44; margin-top:0; }
.tip-box { background:#edf8f1; border:2px solid var(--accent-green); border-radius:var(--radius); padding:22px 26px; margin-bottom:20px; }
.tip-box h3 { color:var(--accent-green); margin-top:0; }
.info-box { background:#eef5fb; border:2px solid var(--accent-blue); border-radius:var(--radius); padding:22px 26px; margin-bottom:20px; }
.info-box h3 { color:var(--accent-blue); margin-top:0; }
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:20px 0; }
@media(max-width:600px){.compare-grid{grid-template-columns:1fr}}
.compare-card { background:var(--card); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); text-align:center; }
.compare-card.red{border-top:5px solid var(--accent-red)}.compare-card.blue{border-top:5px solid var(--accent-blue)}.compare-card.green{border-top:5px solid var(--accent-green)}.compare-card.purple{border-top:5px solid var(--accent-purple)}.compare-card.orange{border-top:5px solid var(--accent-orange)}
.compare-card .letter { font-size:2.8rem; font-weight:900; line-height:1.2; font-family:'Noto Serif',Georgia,serif; }
.compare-card.red .letter{color:var(--accent-red)}.compare-card.blue .letter{color:var(--accent-blue)}.compare-card.green .letter{color:var(--accent-green)}.compare-card.purple .letter{color:var(--accent-purple)}.compare-card.orange .letter{color:var(--accent-orange)}
.compare-card .ipa { font-size:1.1rem; color:var(--muted); margin-bottom:12px; }
.compare-card table { text-align:left; width:100%; font-size:0.92rem; }
.compare-card table td { padding:3px 0; }
.diagram-row { display:flex; justify-content:center; gap:28px; flex-wrap:wrap; margin:24px 0; }
.diagram-box { text-align:center; }
.diagram-label { font-weight:700; font-size:1rem; margin-top:6px; }
.diagram-label.red{color:var(--accent-red)}.diagram-label.blue{color:var(--accent-blue)}.diagram-label.green{color:var(--accent-green)}.diagram-label.purple{color:var(--accent-purple)}.diagram-label.orange{color:var(--accent-orange)}
.step-list { list-style:none; counter-reset:steps; padding:0; }
.step-list li { counter-increment:steps; padding:14px 16px 14px 58px; position:relative; background:var(--card); border-radius:var(--radius); margin-bottom:10px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.step-list li::before { content:counter(steps); position:absolute; left:14px; top:14px; width:30px; height:30px; border-radius:50%; background:var(--accent-red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; }
.step-list.blue li::before{background:var(--accent-blue)}.step-list.green li::before{background:var(--accent-green)}.step-list.purple li::before{background:var(--accent-purple)}.step-list.orange li::before{background:var(--accent-orange)}
.word-table { width:100%; border-collapse:collapse; margin:14px 0 20px; }
.word-table th { background:var(--bg-warm); padding:10px 14px; text-align:left; font-weight:700; font-size:0.9rem; border-bottom:2px solid var(--border); }
.word-table td { padding:10px 14px; border-bottom:1px solid #eee; font-size:0.95rem; }
.word-table .russian { font-size:1.15rem; font-weight:700; font-family:'Noto Serif',Georgia,serif; }
.hl-red{color:var(--accent-red);font-weight:900}.hl-blue{color:var(--accent-blue);font-weight:900}.hl-green{color:var(--accent-green);font-weight:900}.hl-purple{color:var(--accent-purple);font-weight:900}.hl-orange{color:var(--accent-orange);font-weight:900}
.wrong{color:#d44;font-weight:700}.right{color:var(--accent-green);font-weight:700}
.pair-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0; }
.pair-item { background:var(--card); border-radius:8px; padding:14px; text-align:center; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.pair-item .word { font-size:1.3rem; font-weight:700; margin-bottom:2px; font-family:'Noto Serif',Georgia,serif; }
.pair-item .meaning { font-size:0.82rem; color:var(--muted); }
.sound-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; margin:24px 0; }
.sound-card { background:var(--card); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform 0.2s,box-shadow 0.2s; display:block; }
.sound-card:hover { transform:translateY(-3px); box-shadow:0 6px 24px rgba(0,0,0,0.1); }
.sound-card .card-letter { font-size:2.2rem; font-weight:900; line-height:1.2; font-family:'Noto Serif',Georgia,serif; }
.sound-card .card-ipa { font-size:0.95rem; color:var(--muted); margin-bottom:8px; }
.sound-card .card-desc { font-size:0.88rem; color:var(--text-light); line-height:1.7; }
.site-footer { text-align:center; color:var(--muted); font-size:0.82rem; margin-top:48px; padding-top:24px; border-top:1px solid var(--border); }
/* ===== Grammar Section ===== */

/* Grammar nav */
.grammar-nav { display:flex; align-items:center; gap:0; overflow-x:auto; }
.grammar-nav .nav-link { font-size:0.82rem; padding:14px 12px; }
.nav-sep { color:rgba(255,255,255,0.2); padding:0 4px; flex-shrink:0; font-size:0.8rem; }

/* Progress badge — month indicator */
.progress-badge { display:inline-block; font-size:0.75rem; font-weight:700; padding:3px 10px; border-radius:20px; color:#fff; margin-bottom:8px; }
.progress-badge.m1 { background:var(--accent-red); }
.progress-badge.m2 { background:var(--accent-blue); }
.progress-badge.m3 { background:var(--accent-green); }
.progress-badge.m4 { background:var(--accent-purple); }

/* Particle comparison box */
.particle-box { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:center; background:var(--card); border-radius:var(--radius); padding:20px 24px; margin-bottom:16px; box-shadow:var(--shadow); }
.particle-box .jp-side { text-align:right; padding-right:16px; }
.particle-box .arrow { font-size:1.4rem; color:var(--muted); text-align:center; padding:0 8px; }
.particle-box .ru-side { text-align:left; padding-left:16px; }
.particle-box .particle { font-size:1.5rem; font-weight:900; }
.particle-box .case-end { font-size:1.5rem; font-weight:900; font-family:'Noto Serif',Georgia,serif; }
.particle-box .label { font-size:0.82rem; color:var(--muted); }
.particle-box .example { font-size:0.88rem; color:var(--text-light); margin-top:4px; }
.particle-box.red .case-end{color:var(--accent-red)}.particle-box.blue .case-end{color:var(--accent-blue)}.particle-box.green .case-end{color:var(--accent-green)}.particle-box.purple .case-end{color:var(--accent-purple)}.particle-box.orange .case-end{color:var(--accent-orange)}

/* Case / conjugation tables */
.case-table, .conjugation-table { width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:0.92rem; }
.case-table th, .conjugation-table th { background:var(--nav-bg); color:var(--nav-text); padding:10px 14px; text-align:center; font-weight:700; font-size:0.85rem; }
.case-table td, .conjugation-table td { padding:10px 14px; border-bottom:1px solid #eee; text-align:center; }
.case-table td:first-child, .conjugation-table td:first-child { text-align:left; font-weight:700; background:var(--bg-warm); }
.case-table .russian, .conjugation-table .russian { font-family:'Noto Serif',Georgia,serif; font-weight:700; font-size:1rem; }
.case-table .ending { font-weight:900; }
.case-table .ending.red{color:var(--accent-red)}.case-table .ending.blue{color:var(--accent-blue)}.case-table .ending.green{color:var(--accent-green)}.case-table .ending.purple{color:var(--accent-purple)}.case-table .ending.orange{color:var(--accent-orange)}

/* Exercise box */
.exercise-box { background:#fdf8ee; border:2px solid var(--accent-orange); border-radius:var(--radius); padding:22px 26px; margin-bottom:20px; }
.exercise-box h3 { color:var(--accent-orange); margin-top:0; }

/* Answer reveal (CSS-only, no JS) */
.answer-reveal { margin:10px 0; }
.answer-reveal summary { cursor:pointer; color:var(--accent-blue); font-weight:700; font-size:0.92rem; padding:8px 0; list-style:none; }
.answer-reveal summary::before { content:'▶ '; font-size:0.8rem; }
.answer-reveal[open] summary::before { content:'▼ '; }
.answer-reveal .answer { background:var(--card); border-radius:8px; padding:14px 18px; margin-top:6px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }

/* Lesson navigation (prev/next) */
.lesson-nav { display:flex; justify-content:space-between; align-items:center; margin-top:48px; padding-top:24px; border-top:2px solid var(--border); gap:12px; }
.lesson-nav a { text-decoration:none; color:var(--text); font-size:0.92rem; font-weight:500; padding:12px 20px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform 0.2s,box-shadow 0.2s; }
.lesson-nav a:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.lesson-nav .prev::before { content:'← '; }
.lesson-nav .next::after { content:' →'; }
.lesson-nav .spacer { flex:1; }

/* Grammar landing cards */
.grammar-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin:16px 0 32px; }
.grammar-card { background:var(--card); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow); text-decoration:none; color:var(--text); transition:transform 0.2s,box-shadow 0.2s; display:block; border-left:4px solid var(--border); }
.grammar-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.grammar-card .card-num { font-size:0.78rem; font-weight:700; color:var(--muted); }
.grammar-card .card-title { font-size:1rem; font-weight:700; margin:2px 0 4px; }
.grammar-card .card-desc { font-size:0.82rem; color:var(--text-light); line-height:1.6; }
.grammar-card.m1{border-left-color:var(--accent-red)}.grammar-card.m2{border-left-color:var(--accent-blue)}.grammar-card.m3{border-left-color:var(--accent-green)}.grammar-card.m4{border-left-color:var(--accent-purple)}

/* Example sentence block */
.example-pair { background:var(--card); border-radius:var(--radius); padding:16px 20px; margin-bottom:12px; box-shadow:0 1px 6px rgba(0,0,0,0.04); }
.example-pair .ru { font-size:1.1rem; font-weight:700; font-family:'Noto Serif',Georgia,serif; margin-bottom:4px; }
.example-pair .ja { font-size:0.92rem; color:var(--text-light); }
.example-pair .note { font-size:0.82rem; color:var(--muted); margin-top:4px; font-style:italic; }

@media(max-width:600px){.page-header h1{font-size:1.5rem}.page-header .big-letters{font-size:2.5rem}.container{padding:24px 16px 60px}.nav-brand{padding:12px 14px;font-size:0.85rem}.nav-link{padding:12px 10px;font-size:0.8rem}.pair-grid{grid-template-columns:1fr}.particle-box{grid-template-columns:1fr;text-align:center;gap:8px}.particle-box .jp-side{text-align:center;padding:0}.particle-box .ru-side{text-align:center;padding:0}.particle-box .arrow{transform:rotate(90deg)}.grammar-grid{grid-template-columns:1fr}.grammar-nav .nav-link{padding:12px 8px;font-size:0.75rem}}