:root{--bg: #1c1f2a;--bg-alt: #151821;--main: #f2a65a;--sub: #5d6578;--text: #d7dae0;--error: #e5575f;--radius: 8px;--jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;--kana: "Noto Sans JP", "Noto Sans KR", var(--jp);--mono: ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;--word-size: clamp(26px, 5vw, 42px)}:root[data-size=small]{--word-size: clamp(22px, 4vw, 32px)}:root[data-size=large]{--word-size: clamp(32px, 6.5vw, 56px)}:root[data-font=rounded]{--kana: "Zen Maru Gothic", "Gothic A1", var(--jp)}:root[data-font=serif]{--kana: "Noto Serif JP", "Noto Serif KR", var(--jp)}:root[data-font=handwriting]{--kana: "Klee One", "Gaegu", var(--jp)}:root[data-font=pen]{--kana: "Yomogi", "Nanum Pen Script", var(--jp)}:root[data-font=system]{--kana: var(--jp)}*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--jp);min-height:100vh;min-height:100dvh;transition:background-color .25s,color .25s}a{color:var(--main)}h2{color:var(--main);font-weight:500;font-size:18px;margin:32px 0 12px}h3{color:var(--sub);font-weight:500;font-size:14px;margin:16px 0 8px}kbd{background:var(--bg-alt);color:var(--text);padding:2px 7px;border-radius:4px;font-family:var(--mono);font-size:.85em}button{font:inherit;color:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--main);outline-offset:2px}.muted{color:var(--sub)}#app{max-width:1100px;margin:0 auto;padding:0 20px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;transition:opacity .3s}.logo{font-size:26px;font-weight:700;text-decoration:none;color:var(--text);letter-spacing:-.5px}.logo b{color:var(--main)}nav{display:flex;gap:4px;flex-wrap:wrap}nav a{color:var(--sub);text-decoration:none;padding:6px 12px;border-radius:var(--radius)}nav a:hover{color:var(--text)}nav a.on{color:var(--main)}main{flex:1;width:100%;padding-bottom:40px}footer{display:flex;gap:8px 24px;flex-wrap:wrap;justify-content:center;color:var(--sub);font-size:13px;padding:20px 0 28px;transition:opacity .3s}body.typing header,body.typing footer,body.typing .config,body.typing .hint{opacity:0;pointer-events:none}.config{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:8px 0 40px;transition:opacity .3s}.seg{display:flex;background:var(--bg-alt);border-radius:var(--radius);padding:3px;gap:2px}.seg button{background:none;border:0;color:var(--sub);padding:6px 12px;border-radius:6px;font-size:14px}.seg button:hover{color:var(--text)}.seg button.on{color:var(--main);background:color-mix(in srgb,var(--main) 14%,transparent)}.play{position:relative;display:flex;flex-direction:column;gap:22px}.live{display:flex;align-items:baseline;gap:22px;color:var(--main);font-family:var(--mono);min-height:44px}.live .timer{font-size:34px;min-width:2ch}.live .progress{font-size:20px}.words{display:flex;flex-wrap:wrap;gap:8px 1px;font-size:var(--word-size);font-family:var(--kana);line-height:1.25;min-height:3.4em;align-content:flex-start;user-select:none}.u{position:relative;display:inline-block;color:var(--sub);padding:0 1px;min-width:.7em;text-align:center;border-bottom:3px solid transparent}.u.ok{color:var(--text)}.u.wrong{color:var(--error)}.u.cur{color:var(--text);border-bottom-color:var(--main);animation:blink 1.1s steps(1) infinite}.u.cur.bad{color:var(--error);border-bottom-color:var(--error);animation:none}@keyframes blink{50%{border-bottom-color:transparent}}@media(prefers-reduced-motion:reduce){.u.cur{animation:none}*{transition:none!important}}.romaji .u:after{content:attr(data-r);display:block;font:12px var(--mono);color:var(--sub);margin-top:2px}.romaji .u.cur:after{color:var(--main)}.typed{min-height:26px;font:20px var(--mono);color:var(--main)}.meaning{font-family:var(--kana);min-height:24px;color:var(--sub);font-size:15px}.notice{color:var(--error);font-size:14px;min-height:20px}.restart-row{display:flex;justify-content:center}.restart{background:none;border:0;color:var(--sub);font-size:26px;padding:8px 18px;border-radius:var(--radius)}.restart:hover,.restart:focus-visible{color:var(--text);background:var(--bg-alt)}.hint{text-align:center;color:var(--sub);font-size:13px;margin:0;transition:opacity .3s}.results{display:flex;flex-direction:column;gap:28px}.result-top{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:24px;align-items:start}.result-main{display:flex;flex-direction:column;gap:14px}.stat{display:flex;flex-direction:column}.stat span{color:var(--sub);font-size:14px}.stat strong{font-weight:500;font-size:24px;font-family:var(--mono)}.stat.big span{font-size:22px}.stat.big strong{font-size:64px;color:var(--main);line-height:1.05}.badge{align-self:flex-start;background:var(--main);color:var(--bg);padding:4px 10px;border-radius:999px;font-size:13px;font-weight:600}.result-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 32px}.result-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.chart-wrap{background:var(--bg-alt);border-radius:var(--radius);padding:12px}.chart-box{position:relative}.chart{width:100%;height:auto;display:block;touch-action:pan-y}.chart:focus-visible{outline:2px solid var(--main);outline-offset:2px}.chart .cross{stroke:var(--sub);stroke-width:1;stroke-dasharray:3 3}.chart-tip{position:absolute;top:8px;transform:translate(12px);background:var(--bg);color:var(--text);border:1px solid var(--sub);border-radius:var(--radius);padding:8px 10px;font:13px var(--mono);pointer-events:none;white-space:nowrap}.chart-tip.flip{transform:translate(calc(-100% - 12px))}.chart-tip[hidden]{display:none}.tip-title{color:var(--sub);margin-bottom:4px}.tip-row{display:flex;align-items:center;gap:8px}.tip-row i{width:8px;height:8px;border-radius:50%}.tip-row span{flex:1;margin-right:12px}.review{display:flex;flex-direction:column;gap:14px;background:var(--bg-alt);border-radius:var(--radius);padding:16px}.review[hidden]{display:none}.review-text{font-family:var(--kana);font-size:22px;color:var(--sub);line-height:1.5}.review-text .ok{color:var(--text)}.review-text .wrong{color:var(--error)}.review-meaning{color:var(--sub);font-size:14px}.chart .grid{stroke:var(--sub);stroke-opacity:.25}.chart .tick{fill:var(--sub);font:11px var(--mono)}.chart .miss{stroke:var(--error);stroke-width:2;fill:none}.legend{display:flex;gap:16px;font-size:12px;color:var(--sub);padding:4px 8px 0}.legend .k:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;background:currentColor}.legend .main:before{background:var(--main)}.legend .sub:before{background:var(--sub)}.legend .miss{color:var(--error)}.legend .miss:before{display:none}.btn{background:var(--bg-alt);border:0;padding:10px 18px;border-radius:var(--radius);color:var(--text)}.btn:hover{background:color-mix(in srgb,var(--main) 18%,var(--bg-alt))}.btn.primary{background:var(--main);color:var(--bg);font-weight:600}.btn.primary:hover{filter:brightness(1.1)}.btn.danger:hover{background:var(--error);color:var(--bg)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.card{background:var(--bg-alt);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:4px}.card span{color:var(--sub);font-size:13px}.card strong{font:500 26px var(--mono);color:var(--main)}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14px}th{color:var(--sub);font-weight:400;text-align:left}th,td{padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--sub) 25%,transparent);white-space:nowrap}.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.heat{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:12px}.heat-block{display:flex;flex-direction:column;gap:10px}.kgrid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:4px;max-width:420px}.kcell{background:var(--bg-alt);border-radius:6px;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 2px}.kcell.empty{background:none}.kcell .k{font-family:var(--kana);font-size:20px;line-height:1.1}.kcell{color:var(--text)}.kcell .s{font:10px var(--mono);color:var(--text)}.kcell.idle{color:var(--sub)}.empty-state{text-align:center;padding:80px 0;display:flex;flex-direction:column;gap:12px;align-items:center}.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}.theme{height:52px;min-width:0;gap:10px;border:2px solid color-mix(in srgb,var(--sub) 35%,transparent);border-radius:var(--radius);padding:0 14px;display:flex;justify-content:space-between;align-items:center;text-align:left}.theme .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.theme .dots{flex-shrink:0}.theme.on{border-color:var(--main)}.theme .dots{display:flex;gap:4px}.theme .dots i{width:10px;height:10px;border-radius:50%}.field{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;background:var(--bg-alt);border-radius:var(--radius);padding:14px 16px;margin-bottom:8px}.field-text{display:flex;flex-direction:column;gap:2px;max-width:520px}.field-text span{color:var(--sub);font-size:13px}.field .seg{background:var(--bg)}.about p{max-width:70ch;line-height:1.6}.about dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px}.about dd{margin:0;color:var(--sub)}.about .kgrid{max-width:520px}.about .kcell .s{font-size:11px}.overlay{position:fixed;inset:0;background:#0000008c;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh;z-index:10}.palette{width:min(560px,calc(100vw - 32px));background:var(--bg);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px #00000080;border:1px solid color-mix(in srgb,var(--sub) 40%,transparent)}.palette input::placeholder{color:var(--sub);opacity:1}.palette input:focus-visible{outline:0;box-shadow:inset 0 -3px 0 var(--main)}.palette input{width:100%;border:0;background:var(--bg-alt);color:var(--text);font:17px var(--jp);padding:16px 18px}.palette ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow-y:auto}.palette li{padding:9px 12px;border-radius:6px;color:var(--text);cursor:pointer;display:flex;gap:12px}.palette li.active{background:var(--main);color:var(--bg)}.palette .group{color:var(--sub);min-width:7ch;font-size:13px;padding-top:2px}.palette li.active .group{color:inherit}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.capture{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;border:0;padding:0;font-size:16px;pointer-events:none}.boot{text-align:center;color:var(--sub);padding:120px 20px;display:flex;flex-direction:column;gap:16px;align-items:center}.tap-hint,.cmd-btn{display:none}.cmd-btn,.theme-btn{background:none;border:0;color:var(--sub);font-size:13px;padding:0 8px}.theme-btn:hover{color:var(--text)}.version{align-self:center}.links{display:flex;flex-direction:column;gap:8px;max-width:420px}.links a{display:block;padding:12px 14px;background:var(--bg-alt);border-radius:var(--radius);text-decoration:none}@media(hover:none)and (pointer:coarse){.hint,.kb-only{display:none}.tap-hint{display:block;text-align:center;color:var(--sub);font-size:13px;margin:0}.cmd-btn{display:inline-block}}@media(hover:none)and (pointer:coarse),(max-width:640px){.seg button{min-height:44px;min-width:44px}nav a,.logo,.restart,.btn,.cmd-btn,.theme-btn{min-height:44px;display:inline-flex;align-items:center}.theme{height:56px}}@media(max-width:640px){nav{flex-wrap:nowrap;gap:0}nav a{padding:6px 8px}.logo{font-size:22px}.result-top{grid-template-columns:1fr}header{padding:16px 0}}.about h3{margin-top:20px}.font-sample{background:var(--bg-alt);border-radius:var(--radius);padding:12px 16px 14px}.font-sample p{margin:0}.font-sample-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.font-preview{font-family:var(--kana);font-size:var(--word-size);line-height:1.3;color:var(--text);margin-top:8px}.words.furi{align-items:flex-end}.fseg{display:inline-flex;flex-direction:column;align-items:center}.rt{display:flex;min-height:1.1em;font-size:max(.45em,11px);line-height:1.1}.rt .u{min-width:0}.kb{color:var(--sub);padding:0 1px;border-bottom:3px solid transparent}.kb.cur,.kb.ok{color:var(--text)}.kb.wrong{color:var(--error)}.rb{display:flex;flex-wrap:wrap}.rt .kb{padding:0;border-bottom:0}.config-summary,.sheet{display:none}.config-summary{background:var(--bg-alt);border:0;border-radius:var(--radius);color:var(--sub);font:inherit;font-size:14px;min-height:44px;padding:8px 16px;margin:8px auto 28px;max-width:100%;text-align:center;transition:opacity .3s}.sheet:not([hidden]){display:block;position:fixed;inset:0;z-index:20}.sheet-backdrop{position:absolute;inset:0;background:color-mix(in srgb,var(--bg) 70%,transparent)}.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:85dvh;overflow-y:auto;background:var(--bg-alt);border-radius:16px 16px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px}.sheet-row{display:flex;flex-direction:column;gap:6px}.sheet-row>span{color:var(--sub);font-size:13px}.sheet-row .seg{background:var(--bg);flex-wrap:wrap}.sheet-done{align-self:stretch;justify-content:center}body.sheet-open{overflow:hidden}@media(max-width:820px),(hover:none)and (pointer:coarse){.config{display:none}.config-summary{display:block}.tap-hint{display:block;text-align:center;color:var(--sub);font-size:13px;margin:0}.kbd-on .tap-hint{visibility:hidden}.play{min-height:40dvh}body.typing .config-summary{opacity:0;pointer-events:none}}@media(hover:none){body.typing header,body.typing footer,body.typing .config-summary,body.typing .hint{display:none}}