:root{
  color-scheme:light;
  --bg:#f4f1ea; --panel:#fffdf8; --line:#ddd6c8; --text:#23262b; --dim:#6d7480;
  --accent:#b8651b; --ok:#1f8f5c; --bad:#c8403d;
  --pinky:#8a5cc2; --ring:#3f7fcb; --middle:#1f9f90; --index:#b8901d; --thumb:#cc5f48;
  --u:44px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
body{min-height:100vh}
header{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.brand{font-size:18px;letter-spacing:.02em}.brand b{color:var(--accent);font-family:ui-monospace,monospace}
.brand .sub{color:var(--dim);font-size:12px;margin-left:8px}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{font-size:12px;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:var(--panel);display:inline-flex;gap:6px;align-items:center;cursor:default}
label.chip{cursor:pointer}.btn{cursor:pointer;color:var(--text);font:inherit;font-size:12px}
.btn:hover{border-color:var(--accent)}
main{max-width:980px;margin:0 auto;padding:22px 16px 40px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 26px;text-align:center}
.progress{height:4px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:12px}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}
.meta{display:flex;justify-content:space-between;color:var(--dim);font-size:12px}
.ja{font-size:28px;font-weight:700;margin:14px 0 6px}
.ex{color:var(--dim);min-height:1.6em;font-size:15px}
.slots{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:44px;letter-spacing:.06em;margin:18px 0 6px;min-height:1.4em;word-break:break-all}
.slots span{display:inline-block;min-width:.62em;border-bottom:3px solid var(--line);margin:0 2px;line-height:1.25}
.slots .done{color:var(--ok);border-color:var(--ok)}
.slots .cur{border-color:var(--accent);animation:blink 1s steps(2) infinite}
.slots .ghost{color:var(--dim);opacity:.55}
.slots .bad{animation:shake .25s;border-color:var(--bad);color:var(--bad)}
.slots.finished span{color:var(--ok);border-color:var(--ok)}
@keyframes blink{50%{border-color:transparent}}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.msg{min-height:1.5em;color:var(--dim);font-size:13px}
.msg b{color:var(--accent)}
kbd{font:12px ui-monospace,monospace;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--bg)}
h2{margin:0 0 14px;font-size:18px}
.results{display:flex;justify-content:center;gap:34px;margin-bottom:14px}
.results div{display:flex;flex-direction:column}.results span{font-size:38px;font-weight:700;color:var(--accent)}
.results small{color:var(--dim)}
.rwords{list-style:none;margin:0 auto;padding:0;max-width:560px;text-align:left;font-size:14px}
.rwords li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line)}
.rwords .w{font-family:ui-monospace,monospace}.rwords .m{color:var(--dim)}.rwords .bad{color:var(--bad)}
.weak,.hintline{color:var(--dim);font-size:13px}

#board-wrap{overflow-x:auto;padding:26px 0 8px;display:flex;justify-content:center}
#board{position:relative;width:calc(var(--u)*15.2);height:calc(var(--u)*5.2);flex:none}
.k{position:absolute;width:calc(var(--u) - 4px);height:calc(var(--u) - 4px);border:1px solid var(--line);border-bottom-width:3px;border-radius:7px;background:var(--panel);
   display:flex;align-items:center;justify-content:center;font:600 14px ui-monospace,monospace;color:var(--dim);text-transform:uppercase;transition:background .12s,box-shadow .12s,transform .05s}
.k.dim{opacity:.45;font-size:10px}
.k.w15{width:calc(var(--u)*1.5 - 4px)}
.k .fd{position:absolute;bottom:2px;left:6px;right:6px;height:3px;border-radius:2px;opacity:.7}
.k.home::after{content:"";position:absolute;top:3px;width:10px;height:2px;background:var(--dim);border-radius:2px}
.k.next{background:color-mix(in srgb,var(--fc) 30%,var(--panel));border-color:var(--fc);color:var(--text);box-shadow:0 0 0 2px var(--fc),0 0 16px color-mix(in srgb,var(--fc) 55%,transparent)}
.k.press{transform:translateY(2px)}
.k.wrong{background:var(--bad);color:#fff;border-color:var(--bad)}
.f-pinky,.k[data-f=pinky]{--fc:var(--pinky)}.f-ring,.k[data-f=ring]{--fc:var(--ring)}
.f-middle,.k[data-f=middle]{--fc:var(--middle)}.f-index,.k[data-f=index]{--fc:var(--index)}
.f-thumb,.k[data-f=thumb]{--fc:var(--thumb)}
.fd{background:var(--fc)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;color:var(--dim);font-size:12px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--fc);margin-right:5px}
.legend .keys{width:100%;text-align:center;margin-top:4px}

dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:14px;padding:20px;width:min(520px,92vw)}
dialog::backdrop{background:#0005}
dialog h3{margin:0 0 6px}dialog p{color:var(--dim);font-size:13px;margin:0 0 10px}
textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;font:14px ui-monospace,monospace}
.row{display:flex;gap:8px;margin-top:12px}.grow{flex:1}
dialog button{font:inherit;font-size:13px;padding:6px 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
dialog .primary{background:var(--accent);color:#1a1207;border-color:var(--accent)}
dialog .danger{color:var(--bad)}
@media (max-width:640px){.slots{font-size:32px}.ja{font-size:22px}}
.credit{margin-top:22px;text-align:center;color:var(--dim);font-size:11px}.credit a{color:inherit}

/* スマホ: 単語カードモード */
.flash-ui{display:none}
body.flash .flash-ui{display:block}
body.flash #board-wrap,body.flash .desk,body.flash .wpm-box,body.flash .hintline{display:none}
body.flash .ex{min-height:3.2em}
body.flash #fl-grade{display:flex;gap:12px}
body.flash #fl-grade[hidden]{display:none}
body.flash .card{padding:18px 16px}
body.flash header{padding:10px 12px}
body.flash .brand .sub{display:none}
.big{font:inherit;font-size:17px;font-weight:600;width:100%;padding:14px;margin-top:10px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);cursor:pointer}
.big.yes{background:var(--ok);border-color:var(--ok);color:#fff}
.big.no{background:var(--panel);color:var(--bad);border-color:var(--bad)}
#fl-show{background:var(--accent);border-color:var(--accent);color:#fff}
body.flash #btn-again{margin:14px auto 0;max-width:420px}
body.flash .slots{font-size:34px}