:root{--bg: #F5F6F7;--card: #FFFFFF;--line: #E1E4E8;--soft: #ECEEF1;--soft2: #F1F2F4;--ink: #262A30;--muted: #5C626B;--gold: #8C6210;--gold-dark: #6E4C0C;--gold-soft: #F4ECDB;--ok: #3D6B58;--ok-soft: #E3EEE8;--ok-ink: #2E5646;--weak: #6E4C0C;--weak-soft: #F4ECDB;--dark: #262A30;--on-dark: #FFFFFF;--on-dark-muted: #D5D8DD;--on-accent: #FFFFFF;--danger: #B3261E;--han: "Noto Serif SC", "Songti SC", "SimSun", serif;--ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;color-scheme:light}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg: #16181D;--card: #1F2228;--line: #31353D;--soft: #262A31;--soft2: #23262C;--ink: #E8EAED;--muted: #A9AFB8;--gold: #D4A64A;--gold-dark: #E6C07A;--gold-soft: #3A3120;--ok: #7FB89C;--ok-soft: #1F3029;--ok-ink: #9FD1B7;--weak: #E6C07A;--weak-soft: #3A3120;--dark: #2B2F37;--on-dark: #FFFFFF;--on-dark-muted: #C4C9D0;--on-accent: #16181D;--danger: #F2B8B5;color-scheme:dark}}:root[data-theme=dark]{--bg: #16181D;--card: #1F2228;--line: #31353D;--soft: #262A31;--soft2: #23262C;--ink: #E8EAED;--muted: #A9AFB8;--gold: #D4A64A;--gold-dark: #E6C07A;--gold-soft: #3A3120;--ok: #7FB89C;--ok-soft: #1F3029;--ok-ink: #9FD1B7;--weak: #E6C07A;--weak-soft: #3A3120;--dark: #2B2F37;--on-dark: #FFFFFF;--on-dark-muted: #C4C9D0;--on-accent: #16181D;--danger: #F2B8B5;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:16px;-webkit-text-size-adjust:100%}body{padding-bottom:env(safe-area-inset-bottom)}button,input,select{font:inherit;color:inherit}a{color:var(--gold)}.han{font-family:var(--han)}.app{max-width:560px;margin:0 auto;min-height:100vh;padding:calc(16px + env(safe-area-inset-top)) 16px 96px;display:flex;flex-direction:column;gap:14px}.row{display:flex;align-items:center;gap:10px}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.col{display:flex;flex-direction:column;gap:6px}.wrap{flex-wrap:wrap}.grow{flex:1 1 auto;min-width:0}h1{margin:0;font-size:22px;font-weight:700}h2{margin:0;font-size:16px;font-weight:700}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:12px}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}.card.dark{background:var(--dark);color:var(--on-dark);border-color:transparent}.card.dark .muted{color:var(--on-dark-muted)}.tip{background:var(--gold-soft);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:4px}.btn{min-height:44px;padding:0 16px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink)}.btn.primary{background:var(--gold);border-color:var(--gold);color:var(--on-accent)}.btn.ok{background:var(--ok);border-color:var(--ok);color:var(--on-accent)}.btn.outline{border-color:var(--ink)}.btn.block{width:100%}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.opt:focus-visible,.chip:focus-visible,.tab:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.chip{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);display:inline-flex;align-items:center;font-size:13px;cursor:pointer;text-decoration:none;color:var(--ink)}.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:600}.chip.dashed{border-style:dashed;color:var(--muted);cursor:default}.badge{border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600}.badge.ok{background:var(--ok-soft);color:var(--ok-ink)}.badge.weak{background:var(--weak-soft);color:var(--weak)}.badge.new{background:var(--soft);color:var(--muted)}.bar{height:6px;background:var(--soft);border-radius:3px;overflow:hidden}.bar>div{height:100%;background:var(--ok)}.list{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}.list>*{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--soft);text-decoration:none;color:inherit;min-height:52px}.list>*:last-child{border-bottom:none}.big-han{font-family:var(--han);font-size:72px;font-weight:700;line-height:1.05}.play{width:52px;height:52px;border-radius:50%;border:none;background:var(--gold);color:var(--on-accent);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.opts.pics{grid-template-columns:repeat(3,minmax(0,1fr))}.opt{text-align:left;border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:12px;cursor:pointer;display:flex;gap:10px;align-items:center;min-height:52px}.opts.pics .opt{flex-direction:column;justify-content:center;font-size:40px}.opt .k{font-weight:700;color:var(--muted);font-size:14px}.opt.chosen{border-color:var(--ink);border-width:2.5px}.opt.right{border-color:var(--ok);background:var(--ok-soft)}.opt.wrong{border-color:var(--weak);background:var(--weak-soft)}.steps{display:grid;gap:3px}.steps>div{height:5px;border-radius:3px;background:var(--soft)}.steps>.r{background:var(--ok)}.steps>.w{background:var(--weak)}.steps>.cur{background:var(--ink)}.input{min-height:48px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);padding:0 12px;width:100%;font-size:20px}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;text-align:center}.stat{font-size:22px;font-weight:700}.pre{white-space:pre-line}.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);z-index:5}.tabs nav{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:64px}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);text-decoration:none;font-size:11px}.tab.on{color:var(--gold);font-weight:600}.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--soft);border-radius:12px;padding:4px;gap:4px}.seg button{min-height:40px;border:none;border-radius:9px;background:transparent;cursor:pointer;color:var(--muted)}.seg button.on{background:var(--card);color:var(--ink);font-weight:700}.toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:12px;font-size:14px;z-index:10}.han-text{line-height:2.1}.han-text ruby{ruby-position:over;margin:0 1px}.han-text rt{font-family:var(--ui);font-size:.62em;font-weight:500;letter-spacing:0}.han-text.tap ruby{cursor:pointer;border-bottom:1px dotted var(--muted)}.check{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:0;border:2px solid var(--muted);border-radius:6px;background:var(--card);display:inline-grid;place-content:center;cursor:pointer}.check:after{content:"";width:6px;height:11px;border:solid var(--on-accent);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}.check:checked{background:var(--ok);border-color:var(--ok)}.check:checked:after{opacity:1}.check:disabled{cursor:default}.check:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}