/* Nihonomi — basic study UI. Sudah ada: language toggle, lesson player, quiz, progress, kana chart. */
:root{
  --bg:#FBF8F3; --surface:#FFFFFF; --ink:#1E2433; --muted:#5B6275;
  --accent:#B83A4B; --accent-ink:#FFFFFF; --ok:#1F7A4D; --ok-bg:#E6F4EC;
  --bad:#A4262C; --bad-bg:#FBE9EA; --line:#E4DED3; --radius:14px;
  --space:16px; --touch:48px;
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans JP","Hiragino Sans",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141821; --surface:#1D2330; --ink:#EEF1F7; --muted:#A3ABBE; --accent:#F0788A; --accent-ink:#141821; --ok:#6FD39A; --ok-bg:#16301F; --bad:#FF8C94; --bad-bg:#3A1C20; --line:#2F3747; }
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6}
body{min-height:100vh}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:760px;margin:0 auto;padding:0 var(--space)}
header.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.brand{font-weight:800;text-decoration:none;color:var(--ink);font-size:18px;letter-spacing:.2px}
.brand span{color:var(--accent)}
nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-size:14px;padding:8px 0;display:inline-block}
nav a[aria-current="page"]{color:var(--ink);font-weight:600}
button,.btn{min-height:var(--touch);min-width:var(--touch);padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
button.primary,.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:not-allowed}
button.choice{width:100%;justify-content:flex-start;text-align:left;border-radius:var(--radius);padding:14px 16px;font-weight:500}
button.choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
button.choice.correct{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
button.choice.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
main{padding:24px 0 48px}
h1{font-size:28px;line-height:1.25;margin:8px 0 12px}
h2{font-size:20px;margin:24px 0 8px}
.lead{color:var(--muted);font-size:16px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space);margin:12px 0}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;border:1px solid currentColor;margin-left:6px}
.badge.free{color:var(--ok)} .badge.soon{color:var(--muted)}
.grid{display:grid;gap:12px;grid-template-columns:1fr}
@media (min-width:640px){.grid.two{grid-template-columns:1fr 1fr}}
.jp{font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;font-size:28px;line-height:1.5}
.jp ruby rt{font-size:11px;color:var(--muted)}
.kana-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.kana-grid button{min-height:64px;flex-direction:column;font-size:20px;font-family:"Noto Sans JP",sans-serif}
.kana-grid button small{font-size:11px;color:var(--muted);font-weight:400}
.kana-grid .blank{visibility:hidden}
.progressbar{height:10px;background:var(--line);border-radius:999px;overflow:hidden;margin:12px 0}
.progressbar>div{height:100%;background:var(--accent);width:0;transition:width .3s}
@media (prefers-reduced-motion: reduce){.progressbar>div{transition:none}}
.feedback{margin-top:12px;padding:12px 14px;border-radius:var(--radius)}
.feedback.ok{background:var(--ok-bg);color:var(--ok)}
.feedback.bad{background:var(--bad-bg);color:var(--bad)}
.note{font-size:13px;color:var(--muted);border-top:1px solid var(--line);margin-top:32px;padding-top:16px}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13px;padding:20px 0 32px}
footer a{color:var(--muted)}
@media (max-width:420px){ h1{font-size:24px} .kana-grid{grid-template-columns:repeat(5,1fr)} nav a{margin-left:10px;font-size:13px} }