/* ===== DESIGN SYSTEM ===== */
:root {
  --bg:#f4f1e9;--bg2:#fffdf8;--bg3:#ebe7dd;--surface:#f8f5ee;
  --ink:#171815;--ink2:#5e6059;--ink3:#6f716a;
  --border:#d8d5cc;--border2:#b9b7ae;
  --hira:#1f725e;--hira-bg:#e3f0ea;--hira-glow:rgba(31,114,94,.16);
  --kata:#b4532b;--kata-bg:#f4e7df;--kata-glow:rgba(180,83,43,.16);
  --accent:#c33b2e;--accent-bg:#f5e4e1;
  --good:#26724d;--good-bg:#e1eee6;--bad:#b93632;--bad-bg:#f4e2e0;--warn:#9b6a19;
  --shadow-s:0 1px 0 rgba(23,24,21,.05);--shadow-m:0 12px 32px rgba(23,24,21,.07);--shadow-l:0 22px 64px rgba(23,24,21,.13);
  --r-s:3px;--r-m:6px;--r-l:10px;--r-xl:14px;--r-full:999px;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --font:'Noto Sans','Noto Sans Thai','Noto Sans JP',sans-serif;--font-jp:'Noto Sans JP','Noto Sans',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.2,.9,.3,1.2);
}
body.dark {
  --bg:#151612;--bg2:#1c1d19;--bg3:#282923;--surface:#20211d;
  --ink:#f2f0e8;--ink2:#b6b5ad;--ink3:#a0a198;--border:#373831;--border2:#53544c;
  --hira:#62b99b;--hira-bg:#1d3930;--hira-glow:rgba(98,185,155,.18);
  --kata:#e58a5d;--kata-bg:#422c22;--kata-glow:rgba(229,138,93,.18);
  --accent:#ef6a5d;--accent-bg:#452825;--good:#65bf8b;--good-bg:#203a2b;
  --bad:#ef7770;--bad-bg:#432625;--warn:#d7a64e;
  --shadow-s:0 1px 0 rgba(0,0,0,.25);--shadow-m:0 14px 36px rgba(0,0,0,.22);--shadow-l:0 24px 70px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--ink);min-height:100vh;line-height:1.5;
  transition:background .2s var(--ease),color .2s var(--ease);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit}
button{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip-link{position:fixed;top:8px;left:8px;z-index:10000;padding:10px 14px;background:var(--ink);color:var(--bg2);
  transform:translateY(-150%);transition:transform .15s var(--ease);text-decoration:none;font-weight:700}
.skip-link:focus{transform:translateY(0)}
.eyebrow{display:block;color:var(--ink3);font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}

/* ===== CONTENT SURFACES ===== */
.card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-m);padding:var(--s5);margin-bottom:var(--s4)}
.card-title{font-size:14px;font-weight:700;letter-spacing:-.01em;margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2)}
.card-title .ico{display:none}
.panel{display:none;animation:panelIn .22s var(--ease)}
.panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.panel-heading{display:grid;grid-template-columns:minmax(280px,1.5fr) minmax(230px,.75fr);align-items:end;gap:var(--s6);
  padding:var(--s4) 0 var(--s5);border-bottom:1px solid var(--ink);margin-bottom:var(--s5)}
.panel-heading h1{font-size:clamp(32px,4.2vw,58px);font-weight:600;letter-spacing:-.055em;line-height:.98;margin-top:var(--s3)}
.panel-heading p{max-width:42ch;color:var(--ink2);font-size:13px;line-height:1.65}

/* ===== COMMON CONTROLS ===== */
.btn,.start-btn,.resume-btn{border:1px solid var(--ink);border-radius:var(--r-s);background:var(--ink);color:var(--bg2);
  min-height:44px;padding:10px 20px;font-weight:700;font-size:13px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
.btn:hover,.start-btn:hover,.resume-btn:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-1px)}
.btn:disabled,.start-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.footer{border-top:1px solid var(--border);color:var(--ink3);font-size:11px;margin-top:var(--s7);padding:var(--s4) 0;font-weight:500}

@media(max-width:760px){
  .panel-heading{grid-template-columns:1fr;gap:var(--s4);padding-top:var(--s3);margin-bottom:var(--s4)}
  .panel-heading h1{font-size:38px}.panel-heading p{font-size:12px}
  .card{padding:var(--s4)}
  .q-char{font-size:60px!important;padding:16px 36px!important}.q-romaji{font-size:28px!important;padding:16px 36px!important}
  .q-grid{max-width:100%!important}.chart-split,.chart-dual{flex-direction:column}.kcell{min-width:0!important}
  .match-area{display:grid!important;grid-template-columns:1fr 1fr;gap:12px!important;width:100%}.match-col{min-width:0!important}
  .char-modal{min-width:0!important;margin:16px}.char-modal-char{font-size:72px!important}
  .write-canvas-bg,.write-canvas-wrap{width:min(280px,calc(100vw - 64px))!important;height:min(280px,calc(100vw - 64px))!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}