:root{
    --paper:#F4F3EE; --card:#FFFFFF;
    --ink:#23252E; --ink-soft:#666873; --ink-faint:#9A9CA6;
    --line:rgba(35,37,46,.10); --line-2:rgba(35,37,46,.18);
    --root:#9C2E3C; --root-t:rgba(156,46,60,.11);
    --accent:#2E5A8E; --accent-t:rgba(46,90,142,.10);
    --gold:#B0892B; --good:#2B7A66; --good-t:rgba(43,122,102,.13); --bad:#B23A3A; --bad-t:rgba(156,46,60,.11);
    --serif:'Palatino Linotype','Book Antiqua',Palatino,'Iowan Old Style',Georgia,serif;
    --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',Meiryo,system-ui,sans-serif;
    --mono:'SF Mono','Cascadia Mono','JetBrains Mono',Consolas,monospace;
  }
  @media (prefers-color-scheme: dark){
    :root{
      --paper:#191A1F; --card:#23252E;
      --ink:#ECEAE3; --ink-soft:#A4A6B0; --ink-faint:#74767F;
      --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
      --root:#E58A95; --root-t:rgba(229,138,149,.16);
      --accent:#82A9D8; --accent-t:rgba(130,169,216,.15);
      --gold:#D7B659; --good:#73C6AD; --good-t:rgba(115,198,173,.16); --bad:#E58A95; --bad-t:rgba(229,138,149,.16);
    }
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;
    -webkit-font-smoothing:antialiased;min-height:100vh;padding:0 18px 64px;}
  .wrap{max-width:680px;margin:0 auto;}

  .masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
    padding:24px 2px 16px;border-bottom:1px solid var(--line);margin-bottom:16px;}
  .brand h1{font-family:var(--serif);font-weight:600;font-size:30px;margin:0;line-height:1;}
  .brand h1 .dot{color:var(--root);}
  .brand .tag{font-size:11.5px;color:var(--ink-soft);letter-spacing:.03em;margin-top:3px;}
  .datasrc{font-family:var(--mono);font-size:10px;margin-top:4px;}
  .datasrc.ok{color:var(--good);}
  .datasrc.warn{color:var(--bad);}
  .meter{text-align:right;min-width:140px;}
  .meter .count{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
  .meter .count b{color:var(--ink);font-weight:600;}
  .bar{height:5px;border-radius:99px;background:var(--line);margin-top:7px;overflow:hidden;}
  .bar i{display:block;height:100%;width:0;border-radius:99px;
    background:linear-gradient(90deg,var(--gold),var(--root));transition:width .4s;}

  .controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;}
  .seg{display:inline-flex;background:var(--line);border-radius:99px;padding:3px;}
  .seg button{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--ink-soft);
    border:0;background:transparent;padding:7px 16px;border-radius:99px;cursor:pointer;transition:.15s;}
  .seg button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
  select,.searchbox{font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--card);
    border:1px solid var(--line-2);border-radius:9px;padding:8px 12px;}
  select{cursor:pointer;max-width:230px;}
  .searchbox{flex:1;min-width:120px;}
  .searchbox::placeholder{color:var(--ink-faint);}

  .stage{min-height:340px;}

  /* List mode */
  .fam{margin-bottom:22px;}
  .fam-h{display:flex;align-items:baseline;gap:10px;padding-bottom:7px;margin-bottom:10px;
    border-bottom:1px solid var(--line);}
  .fam-h .r{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--root);}
  .fam-h .m{font-size:13px;color:var(--ink-soft);}
  .fam-h .c{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-faint);}
  .words{display:flex;flex-wrap:wrap;gap:7px 9px;}
  .w{font-size:14px;border:1px solid var(--line);border-radius:8px;padding:6px 11px;cursor:pointer;
    background:var(--card);transition:.12s;display:inline-flex;align-items:baseline;gap:7px;}
  .w:hover{border-color:var(--line-2);}
  .w.known{background:var(--good-t);border-color:transparent;}
  .w .en{font-family:var(--serif);font-size:16px;color:var(--ink);}
  .w .jp{font-size:12px;color:var(--ink-soft);}
  .w.known .check{color:var(--good);font-weight:700;}
  .w .check{color:transparent;font-size:11px;}
  .hl{color:var(--root);font-weight:700;border-radius:3px;background:var(--root-t);padding:0 1px;}
  .hint-row{font-size:11.5px;color:var(--ink-faint);margin:-6px 0 16px;}

  /* Card mode */
  .card{perspective:1600px;cursor:pointer;}
  .card-inner{display:grid;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.1,.2,1);}
  .face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--card);
    border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px -28px rgba(0,0,0,.4);
    padding:36px 28px;min-height:280px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;text-align:center;}
  .back{transform:rotateY(180deg);}
  .card.flipped .card-inner{transform:rotateY(180deg);}
  @media (prefers-reduced-motion: reduce){.card-inner{transition:none;}}
  .c-term{font-family:var(--serif);font-weight:600;font-size:clamp(40px,11vw,60px);line-height:1.05;}
  .c-root{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--root);
    background:var(--root-t);padding:4px 11px;border-radius:99px;margin-bottom:18px;}
  .fliphint{margin-top:20px;font-size:11.5px;color:var(--ink-faint);}
  .c-mean{font-size:26px;font-weight:600;margin:4px 0;}
  .c-from{font-size:13.5px;color:var(--ink-soft);margin-top:8px;}
  .c-from b{color:var(--root);font-family:var(--serif);font-size:16px;}
  /* ---- card morpheme breakdown + siblings ---- */
  .bd{display:flex;align-items:flex-end;justify-content:center;gap:5px;margin:16px 0 2px;flex-wrap:wrap;}
  .bd .seg{display:flex;flex-direction:column;align-items:center;gap:4px;}
  .bd .pt{font-family:var(--serif);font-size:21px;line-height:1;padding:5px 10px;border-radius:8px;}
  .bd .pt.pre,.bd .pt.suf{color:var(--ink-soft);background:var(--line);}
  .bd .pt.rt{color:var(--root);background:var(--root-t);font-weight:700;}
  .bd .lb{font-size:9px;letter-spacing:.05em;color:var(--ink-faint);}
  .bd .plus{font-size:15px;color:var(--ink-faint);padding-bottom:15px;}
  .rootnote{font-size:12px;line-height:1.7;color:var(--ink-soft);background:var(--accent-t);border-left:3px solid var(--accent);border-radius:6px;padding:8px 11px;margin-bottom:12px;text-align:left;}
  .siblings{margin-top:18px;width:100%;}
  .siblings .sh{font-size:11px;color:var(--ink-faint);text-align:center;margin-bottom:9px;}
  .siblings .sl{display:flex;flex-wrap:wrap;gap:6px 7px;justify-content:center;}
  .siblings .si{border:1px solid var(--line);border-radius:7px;padding:4px 9px;background:var(--paper);display:inline-flex;align-items:baseline;gap:5px;}
  .siblings .si .e{font-family:var(--serif);font-size:14px;color:var(--ink);}
  .siblings .si .j{font-size:11px;color:var(--ink-soft);}
  .actions{display:flex;gap:12px;margin-top:18px;}
  .actions button{flex:1;font-family:var(--sans);font-size:15px;font-weight:600;padding:14px;
    border-radius:12px;cursor:pointer;border:1px solid transparent;transition:.15s;}
  .btn-again{background:transparent;border-color:var(--line-2);color:var(--ink-soft);}
  .btn-again:hover{border-color:var(--ink-soft);color:var(--ink);}
  .btn-known{background:var(--good);color:#fff;}
  .stepline{text-align:center;margin-top:14px;font-family:var(--mono);font-size:11.5px;color:var(--ink-faint);}

  /* Quiz */
  .q-root{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-faint);text-align:center;margin-bottom:12px;}
  .q-term{font-family:var(--serif);font-weight:600;text-align:center;font-size:clamp(36px,9vw,54px);
    line-height:1.1;margin-bottom:6px;color:var(--ink);}
  .q-ask{text-align:center;color:var(--ink-soft);font-size:14px;margin-bottom:22px;}
  .choices{display:flex;flex-direction:column;gap:10px;}
  .choices button{font-family:var(--sans);font-size:15.5px;font-weight:500;text-align:left;padding:15px 18px;
    border-radius:12px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);cursor:pointer;
    transition:.12s;display:flex;align-items:center;gap:12px;}
  .choices button:hover:not(:disabled){border-color:var(--ink-soft);}
  .choices button:disabled{cursor:default;}
  .choices button .k{font-family:var(--mono);font-size:12px;color:var(--ink-faint);border:1px solid var(--line-2);
    border-radius:5px;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;flex:none;}
  .choices button.correct{border-color:var(--good);background:var(--good-t);color:var(--good);}
  .choices button.wrong{border-color:var(--bad);background:var(--bad-t);color:var(--bad);}
  .qfoot{display:flex;align-items:center;justify-content:space-between;margin-top:20px;min-height:48px;gap:12px;}
  .qfoot .fb{font-size:14px;font-weight:600;}
  .qfoot .fb.ok{color:var(--good);} .qfoot .fb.ng{color:var(--bad);}
  .qfoot .score{font-family:var(--mono);font-size:12px;color:var(--ink-soft);white-space:nowrap;}
  .btn-next{font-family:var(--sans);font-weight:600;font-size:14px;background:var(--ink);color:var(--paper);
    border:0;padding:11px 22px;border-radius:12px;cursor:pointer;visibility:hidden;white-space:nowrap;}

  .done{text-align:center;padding:48px 20px;background:var(--card);border:1px solid var(--line);border-radius:18px;}
  .done .em{font-family:var(--serif);font-size:30px;color:var(--gold);margin-bottom:8px;}
  .done p{color:var(--ink-soft);font-size:14px;margin:0;}

  .footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;
    padding-top:16px;border-top:1px solid var(--line);}
  .footer .keys{font-size:11.5px;color:var(--ink-faint);}
  .footer .keys kbd{font-family:var(--mono);font-size:10.5px;background:var(--line);border-radius:4px;
    padding:1px 6px;color:var(--ink-soft);}
  .btn-reset{font-size:12.5px;color:var(--ink-soft);background:transparent;border:1px solid var(--line-2);
    border-radius:99px;padding:6px 14px;cursor:pointer;white-space:nowrap;}
  .btn-reset:hover{border-color:var(--bad);color:var(--bad);}
  button:focus-visible,select:focus-visible,input:focus-visible,.card:focus-visible,.w:focus-visible{
    outline:2px solid var(--gold);outline-offset:2px;}

  /* ---- card timer + audio ---- */
  .cardbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .timer{font-family:var(--mono);font-size:13px;color:var(--root);background:var(--root-t);padding:6px 12px;border-radius:99px;font-weight:600;}
  .dur{display:inline-flex;background:var(--line);border-radius:99px;padding:2px;}
  .dur button{font-family:var(--sans);font-size:12px;color:var(--ink-soft);border:0;background:transparent;padding:5px 11px;border-radius:99px;cursor:pointer;}
  .dur button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .audio-toggle{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--ink-soft);background:transparent;border:1px solid var(--line-2);border-radius:99px;padding:6px 13px;cursor:pointer;}
  .audio-toggle.on{color:var(--accent);border-color:var(--accent);background:var(--accent-t);}
  .audio-toggle.small{font-size:11.5px;padding:5px 11px;}
  .se-btns{display:flex;gap:12px;justify-content:center;margin-top:18px;}
  .se-btns button{flex:0 0 auto;padding:11px 22px;border-radius:12px;font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent;}
  /* ---- quiz extras ---- */
  .q-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
  .q-tools{display:flex;gap:8px;align-items:center;}
  .mini{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-t);border:1px solid var(--accent);border-radius:99px;padding:5px 14px;cursor:pointer;}
  .mastery{display:flex;gap:5px;justify-content:center;margin:0 0 12px;}
  .mastery .dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);}
  .mastery .dot.f{background:var(--root);}
  /* ---- graph ---- */
  .gran-seg{display:inline-flex;background:var(--line);border-radius:99px;padding:3px;margin-bottom:16px;}
  .gran-seg button{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-soft);border:0;background:transparent;padding:7px 16px;border-radius:99px;cursor:pointer;}
  .gran-seg button[aria-selected="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08);}
  .gstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px;}
  .gtile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 10px;text-align:center;}
  .gtile .v{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--root);line-height:1;}
  .gtile .l{font-size:11px;color:var(--ink-soft);margin-top:6px;}
  .chart-wrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 10px 6px;overflow-x:auto;}
  .legend{display:flex;gap:18px;justify-content:center;margin-top:12px;font-size:12px;color:var(--ink-soft);}
  .legend i{display:inline-block;width:13px;height:13px;border-radius:3px;vertical-align:middle;margin-right:5px;}
  .legend i.ln{height:2px;background:var(--root);}
  .legend i.br{background:var(--root-t);}
  .g-empty{background:var(--card);border:1px dashed var(--line-2);border-radius:14px;padding:42px 22px;text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.85;}
  @media(max-width:520px){.gstats{grid-template-columns:repeat(2,1fr);}}