:root{--brand:#1D4ED8;--ink:#14202B;--muted:#47566B;--bg:#EEF3FF;--card:#fff;--line:#CBD7F0;--accent:#172554;--amber:#B45309;--red:#C0262D;--ok:#1E7B3A;--hl:#DBE7FF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;line-height:1.7;font-size:16px;font-variant-numeric:tabular-nums}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
a{color:var(--brand)}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;background:#fff;padding:8px;z-index:99}
header.top{background:#fff;border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:0 8px;min-height:52px;flex-wrap:wrap}
.logo{font-weight:700;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;min-height:44px}
.logo .dot{width:26px;height:26px;border-radius:8px;background:var(--brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
nav.main{display:flex;gap:2px;flex-wrap:wrap}
nav.main a{color:var(--muted);text-decoration:none;padding:10px 7px;min-height:44px;display:inline-flex;align-items:center;font-size:14px}
nav.main a[aria-current]{color:var(--brand);font-weight:700}
h1{font-size:26px;line-height:1.3;margin:14px 0 6px}
.answer{margin:0 0 10px;color:var(--muted);font-size:15px;line-height:1.6}
.crumb{font-size:14px;color:var(--muted);margin-top:8px}.crumb a{display:inline-flex;align-items:center;min-height:40px;min-width:40px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;margin:0 0 20px}
button,input,select{font-family:inherit;color:var(--ink)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.row button,.tbtn{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);font-size:15px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.row button:disabled{opacity:.5;cursor:default}
.row button.nav{width:44px;padding:0;font-size:24px}
.fld{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:2px;flex:1;min-width:0}
.fld select{height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:16px;padding:0 8px;min-width:0;width:100%}
.chk{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:12px;font-size:15px}
.chk input{width:20px;height:20px;accent-color:var(--brand)}
.muted{color:var(--muted)}
.note{font-size:14px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.kbnote{font-size:13px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.content h2,.faq h2,.related h2,.prose h2{font-size:20px;margin:26px 0 8px;line-height:1.4}
.content ol,.content ul{padding-left:22px;margin:8px 0}
.qa h3{font-size:17px;margin:16px 0 4px}.qa p{margin:0}
.cards{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--ink)}
.cn{display:block;font-weight:700;color:var(--brand)}.cd{display:block;color:var(--muted);font-size:14px}
footer{margin-top:36px;border-top:1px solid var(--line);background:#fff;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;padding-top:8px;padding-bottom:16px}
footer a{color:var(--muted);display:inline-flex;align-items:center;min-height:40px;min-width:40px}
[hidden]{display:none!important}
@media (min-width:700px){h1{font-size:32px}.tool{padding:18px}nav.main a{padding:10px 10px;font-size:15px}.cards{grid-template-columns:1fr 1fr}}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.seg button{min-height:44px;min-width:56px;padding:0 12px;border:0;border-radius:0;border-right:1px solid var(--line);background:#fff;font-size:15px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button[aria-pressed=true]{background:var(--brand);color:#fff}
.seg button:disabled{opacity:.5;cursor:default}
.stats,.hud{display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;font-size:14px;color:var(--muted);margin:6px 0}
.stats b,.hud b{font-size:20px;color:var(--ink);font-weight:700}
.hud b{font-size:18px}
.start{min-width:180px;height:52px;border-radius:26px;border:0;background:var(--brand);color:#fff;font-size:18px;font-weight:700;cursor:pointer}

.play{position:relative;margin:8px 0;border:1px solid var(--line);border-radius:12px;background:#fff;scroll-margin-bottom:12px}
.play:focus-within{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.play input{position:absolute;inset:0;width:100%;height:100%;opacity:0;z-index:2;font-size:16px;border:0;padding:0;cursor:text;caret-color:transparent}
.ttext{--fs:22px;--lh:2.1;position:relative;overflow:hidden;padding:0 12px;font-size:var(--fs);line-height:var(--lh);height:calc(var(--fs)*var(--lh)*3);word-break:normal;overflow-wrap:anywhere;user-select:none}
.ttext.zh{--fs:24px}
.ttext.en{letter-spacing:.3px}
.ttext.py{--fs:26px;--lh:2.8}
.u{border-radius:3px}
.u.c{color:var(--ok)}
.u.e{color:var(--red);background:#FDE8E8}
.u.cur{background:var(--hl);box-shadow:0 2px 0 var(--brand)}
ruby{ruby-position:over}
rt{font-size:.55em;line-height:1.2;color:var(--muted)}
.r{border-radius:4px;margin:0 1px}
.r.ok .h,.r.c .h{color:var(--ok)}
.r.bad .h,.r.e .h{color:var(--red)}
.r.e{background:#FDE8E8}
.r.now{background:var(--hl)}
.l.c{color:var(--ok);font-weight:700}
.l.e{color:var(--red);font-weight:700;background:#FDE8E8}
.l.cur{background:#fff;box-shadow:0 2px 0 var(--brand)}
.p.c{color:var(--ok)}.p.e{color:var(--red);background:#FDE8E8}.p.now{background:var(--hl)}
.nopy rt{visibility:hidden}

.result{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:#fff}
.rtitle{font-size:20px;font-weight:700;margin:0}
.res{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0}
.res dt{color:var(--muted)}.res dd{margin:0;font-weight:700;text-align:right}
.cue{font-weight:700;margin:6px 0;min-height:1.6em}

.stage{position:relative;height:clamp(200px,calc(var(--vvh,100vh) - 230px),340px);overflow:hidden;border-radius:12px;background:linear-gradient(#DBEAFE,#EFF6FF)}
.stage.shake{animation:shake .25s}
.field,.ground,.banner{pointer-events:none}
.field{position:absolute;inset:0}
.ground{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--brand)}
.item{position:absolute;left:0;top:0;height:40px;border-radius:20px;color:#fff;font-weight:700;font-size:20px;letter-spacing:1px;display:flex;align-items:center;justify-content:center;will-change:transform;box-shadow:0 2px 0 rgba(0,0,0,.18);background:#1D4ED8}
.item.c0{background:#1D4ED8}.item.c1{background:#B91C1C}.item.c2{background:#0F766E}.item.c3{background:#7E22CE}.item.c4{background:#B45309}.item.c5{background:#BE185D}
.item .d{opacity:.45}
.item.gone{opacity:0;transition:opacity .18s}
.banner{position:absolute;left:0;right:0;top:36%;text-align:center;font-size:34px;font-weight:700;color:var(--accent);z-index:1}
.overlay{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;background:rgba(238,243,255,.93);overflow:auto;padding:8px}
.ov{text-align:center}.ovt{font-size:28px;font-weight:700;margin:0 0 10px;color:var(--accent)}
.overlay .result{margin:auto;width:100%;max-width:420px}

.kb{margin:8px 0;display:flex;flex-direction:column;gap:2px;user-select:none}
.krow{display:flex;gap:2px}
.key{flex:1 1 0;min-width:0;height:30px;border-radius:4px;border:1px solid rgba(0,0,0,.15);font-size:10px;display:flex;align-items:center;justify-content:center;color:var(--ink);background:#fff}
.f0,.f9{background:#FBCFE8}.f1,.f8{background:#FDE68A}.f2,.f7{background:#BBF7D0}.f3,.f6{background:#BAE6FD}.f4,.f5{background:#E9D5FF}
.key.on{box-shadow:0 0 0 3px var(--brand);font-weight:700;transform:scale(1.12);position:relative;z-index:1}
.hands{display:flex;justify-content:center;gap:24px;margin:8px 0;align-items:flex-end}
.hand{text-align:center}.hlabel{font-size:13px;color:var(--muted)}
.fingers{display:flex;gap:4px;align-items:flex-end;height:64px}
.fg{width:44px;border-radius:12px 12px 4px 4px;font-size:11px;display:flex;align-items:flex-start;justify-content:center;padding-top:4px;border:1px solid rgba(0,0,0,.15)}
.fg.f0,.fg.f9{height:36px}.fg.f1,.fg.f8{height:46px}.fg.f2,.fg.f7{height:56px}.fg.f3,.fg.f6{height:46px}.fg.f4,.fg.f5{height:30px}
.fg.on{box-shadow:0 0 0 3px var(--brand);font-weight:700}

.flash{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center}
.flash[data-show]{opacity:1}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media (max-width:420px){.hands{gap:8px}.fg{width:30px}.fingers{gap:3px}.ttext{padding:0 8px}.ttext.zh{--fs:22px}.ttext.py{--fs:24px}}
@media (prefers-reduced-motion:reduce){.stage.shake{animation:none}.item.gone{transition:none}.flash{transition:none}}