:root{
  color-scheme:light;
  --bg:#f4f6fa;--surface:#fff;--surface2:#eef1f6;--line:#d9dee7;--text:#1b2430;--muted:#5d6878;
  --primary:#2f6fed;--on-primary:#fff;--ok:#1a8f4c;--err:#d6362f;--key:#fff;--star:#f2a900;
  --LP:#e5484d;--LR:#f0862e;--LM:#c9a400;--LI:#3aa24c;--RI:#12a3a3;--RM:#3b82f6;--RR:#8b5cf6;--RP:#d946a8;--TH:#8a94a3;
  --u:clamp(21px,calc((100vw - 20px)/15),54px);
  --kana:"UD デジタル 教科書体 NK-R","UD Digi Kyokasho NK-R","BIZ UDPGothic","Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif;
}
@media(prefers-color-scheme:dark){:root{
  color-scheme:dark;
  --bg:#10151c;--surface:#19212b;--surface2:#222c38;--line:#303c4b;--text:#e8edf3;--muted:#9aa7b6;
  --primary:#6f9dff;--on-primary:#0c1320;--ok:#5fd08a;--err:#ff7a72;--key:#232e3b;--star:#ffc533;
  --LM:#e2c12b;
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.8 "BIZ UDPGothic","Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif}
a{color:var(--primary)}
button{font:inherit;color:inherit;cursor:pointer}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px;height:54px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;text-decoration:none;color:var(--text)}
.logo{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--primary);color:var(--on-primary);font-family:var(--kana)}
.top nav a{margin-left:14px;font-size:.88rem;color:var(--muted);text-decoration:none}
main{max-width:920px;margin:0 auto;padding:20px 12px 8px}
.noscript{padding:24px;text-align:center}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:24px 12px 40px}
.foot a{color:inherit}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;text-decoration:none}
.btn:hover{border-color:var(--primary)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn.small{padding:5px 14px;font-size:.88rem;font-weight:500}
.btn.danger{color:var(--err)}
kbd{display:inline-block;padding:0 7px;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface2);font:inherit;font-size:.85em}

/* home */
.hero{display:grid;gap:14px;padding:22px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.hero h1{margin:0;font-size:clamp(1.35rem,4.2vw,1.9rem);line-height:1.4}
.hero p{margin:0;color:var(--muted)}
.hero .cta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.sum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sum div{padding:10px;border-radius:12px;background:var(--surface2);text-align:center;font-size:.8rem;color:var(--muted);line-height:1.4}
.sum b{display:block;font-size:1.35rem;color:var(--text)}
h2.sec{font-size:1.1rem;margin:28px 4px 10px}
.sec-note{margin:-6px 4px 10px;color:var(--muted);font-size:.88rem}
.lessons{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.card{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);line-height:1.5}
.card:hover{border-color:var(--primary)}
.card.next{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 25%,transparent)}
.card .no{font-size:.75rem;color:var(--muted)}
.card .ttl{font-weight:700}
.card .ks{font-family:var(--kana);font-size:1.15rem;letter-spacing:.12em;min-height:1.6em}
.card .desc{font-size:.85rem;color:var(--muted)}
.stars{color:var(--star);letter-spacing:.1em}.stars i{font-style:normal;color:var(--line)}
.modes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.settings{display:grid;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.set{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.set>span{min-width:9.5em;font-size:.9rem;color:var(--muted)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:transparent;padding:4px 14px;font-size:.88rem}
.seg button.on{background:var(--primary);color:var(--on-primary)}

/* practice */
.pbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pbar .ptitle{font-weight:700;flex:1;min-width:8em}
.pstats{display:flex;gap:14px;font-size:.85rem;color:var(--muted)}
.pstats b{color:var(--text);font-size:1.05rem;font-variant-numeric:tabular-nums}
.progress{height:6px;border-radius:3px;background:var(--surface2);margin:10px 0;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--primary);transition:width .15s}
.stage{position:relative;min-height:210px;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:center;display:flex;flex-direction:column;justify-content:center;gap:4px}
.phase{font-size:.82rem;color:var(--muted)}
.line{font-family:var(--kana);font-size:clamp(2rem,7vw,3.4rem);line-height:1.5;letter-spacing:.06em;word-break:break-all}
.line .u{display:inline-block;border-bottom:4px solid transparent;transition:color .1s}
.line .done{color:color-mix(in srgb,var(--text) 28%,transparent)}
.line .cur{color:var(--primary);border-bottom-color:var(--primary)}
.line .cur.half{background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 22%,transparent) 50%,transparent 50%)}
.line.shake{animation:shake .18s}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.nextline{font-family:var(--kana);color:var(--muted);min-height:1.8em}
.coach{min-height:2.2em;font-size:1rem}
.coach.bad{color:var(--err)}
.chip{display:inline-block;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--f) 22%,var(--surface));border:2px solid var(--f);font-weight:700;font-size:.9rem;white-space:nowrap}
.kn{font-family:var(--kana);font-weight:700;font-size:1.15em}
.ready{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;border-radius:18px;background:var(--surface)}
.ready h2{margin:0;font-size:1.2rem}
.ready p{margin:0;color:var(--muted);max-width:36em;font-size:.93rem}
.ready .newkeys{font-family:var(--kana);font-size:1.9rem;letter-spacing:.2em}

/* keyboard */
.kbwrap{margin:14px auto 0;width:calc(var(--u)*15);max-width:100%}
.kb{display:grid;gap:0;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.row{display:flex}
.key{position:relative;flex:none;height:var(--u);padding:calc(var(--u)*.04)}
.key>div{position:relative;height:100%;border-radius:calc(var(--u)*.14);border:1px solid var(--line);border-bottom:calc(var(--u)*.07) solid var(--f,var(--line));background:color-mix(in srgb,var(--f,var(--key)) 16%,var(--key));display:grid;place-items:center;font-family:var(--kana);font-size:calc(var(--u)*.44);line-height:1}
.key.fn>div{font-family:inherit;font-size:calc(var(--u)*.2);color:var(--muted);background:var(--surface2);border-bottom-color:var(--line)}
.key .cap{position:absolute;left:calc(var(--u)*.08);top:calc(var(--u)*.06);font:calc(var(--u)*.19)/1 system-ui,sans-serif;color:var(--muted)}
.key .sh{position:absolute;right:calc(var(--u)*.08);top:calc(var(--u)*.05);font-size:calc(var(--u)*.26);color:var(--muted)}
.key.bump>div::after{content:"";position:absolute;bottom:calc(var(--u)*.07);width:28%;height:calc(var(--u)*.05);border-radius:2px;background:var(--muted)}
.kb.noascii .cap{display:none}
.kb.blind .key:not(.fn) .k,.kb.blind .sh{visibility:hidden}
.key.new>div{box-shadow:0 0 0 calc(var(--u)*.06) var(--f);background:color-mix(in srgb,var(--f) 45%,var(--key))}
.key.target>div{background:var(--f,var(--primary));color:#fff;box-shadow:0 0 0 calc(var(--u)*.07) color-mix(in srgb,var(--f,var(--primary)) 45%,transparent);animation:pulse 1s infinite}
.key.target .cap,.key.target .sh{color:#fff}
.key.target.fn>div{color:#fff;--f:var(--TH)}
.key.target.fn[data-f="LP"]>div{--f:var(--LP)}.key.target.fn[data-f="RP"]>div{--f:var(--RP)}
.key.bad>div{background:var(--err);color:#fff}
.key.armed>div{background:var(--primary);color:var(--on-primary)}
@keyframes pulse{50%{box-shadow:0 0 0 calc(var(--u)*.14) color-mix(in srgb,var(--f,var(--primary)) 20%,transparent)}}
@media(prefers-reduced-motion:reduce){.key.target>div,.line.shake{animation:none}}
.hands{display:block;width:100%;height:auto;margin-top:4px}
.hands .fg{fill:color-mix(in srgb,var(--f) 18%,var(--surface));stroke:var(--f);stroke-width:2;transition:fill .1s}
.hands .fg.on{fill:var(--f)}
.hands .palm{fill:var(--surface2);stroke:var(--line);stroke-width:2}
.hands text{font-size:11px;fill:var(--muted);text-anchor:middle}
.legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px;font-size:.78rem}
.legend .chip{font-weight:500;font-size:.78rem;border-width:1px}

/* result */
.result{padding:24px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:center}
.result h2{margin:0 0 4px}
.result .big{font-size:2.6rem;line-height:1.3}
.rnums{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:14px 0}
.rnums div{min-width:110px;padding:10px 14px;border-radius:12px;background:var(--surface2);font-size:.82rem;color:var(--muted)}
.rnums b{display:block;font-size:1.5rem;color:var(--text)}
.misses{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 16px}
.misses span{padding:4px 12px;border-radius:12px;background:var(--surface2);font-size:.88rem}
.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.msg{color:var(--muted);margin:6px 0}

/* shower */
.field{position:relative;height:250px;border-radius:18px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--err);opacity:.5}
.drop{position:absolute;top:0;display:grid;place-items:center;width:52px;height:52px;margin-left:-26px;border-radius:50%;border:3px solid var(--f);background:color-mix(in srgb,var(--f) 20%,var(--surface));font-family:var(--kana);font-size:1.6rem;will-change:transform}
.drop.pop{transition:opacity .15s,scale .15s;opacity:0;scale:1.6}
.field .ready{border-radius:0}

/* stats */
.panel{padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);margin-bottom:12px}
.panel h3{margin:0 0 8px;font-size:1rem}
.bars{display:grid;gap:6px}
.bar{display:grid;grid-template-columns:8.5em 1fr 4.5em;gap:8px;align-items:center;font-size:.85rem}
.bar .tr{height:10px;border-radius:5px;background:var(--surface2);overflow:hidden}
.bar .tr i{display:block;height:100%;background:var(--f)}
.weak{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.weak div{padding:8px 12px;border-radius:10px;background:var(--surface2);font-size:.85rem}
.heat .key>div{border-bottom-color:var(--line)}

/* article */
.guide{max-width:820px;margin:28px auto 0;padding:8px 16px}
.guide h2{font-size:1.3rem;line-height:1.5}
.guide h3{margin-top:1.8em;font-size:1.08rem;border-left:4px solid var(--primary);padding-left:10px}
.guide li{margin:.3em 0}
.guide dt{font-weight:700;margin-top:1em}.guide dd{margin:0 0 0 1em;color:var(--muted)}
.tablewrap{overflow-x:auto}
.guide table{border-collapse:collapse;width:100%;font-size:.9rem}
.guide th,.guide td{border:1px solid var(--line);padding:5px 9px;text-align:left;white-space:nowrap}
.guide th{background:var(--surface2)}
.guide .note{font-size:.88rem;color:var(--muted)}
body.playing .guide{display:none}
@media(max-width:560px){.sum{grid-template-columns:repeat(2,1fr)}.stage{min-height:170px}.pstats{gap:10px}}

/* refinements */
.key .k{margin-top:calc(var(--u)*.2);font-size:calc(var(--u)*.4)}
.key .sh{font-size:calc(var(--u)*.24)}
.line .u.sm{position:relative}
.line .u.sm::after{content:"小";position:absolute;right:-.1em;top:.1em;font:700 .22em/1.3 system-ui,sans-serif;padding:0 .3em;border-radius:1em;background:var(--surface2);color:var(--muted);letter-spacing:0}
body.playing .top{display:none}
body.playing main{padding-top:10px}
body.playing .stage{min-height:176px}
.hands{max-height:118px}
.fingers{display:flex;flex-wrap:wrap;gap:8px}
.fingers .chip{padding:4px 14px;font-size:.92rem;cursor:pointer}
.fingers .chip:hover{background:var(--f);color:#fff}
.msg.bad{color:var(--err)}
.pstats{flex-wrap:wrap}