:root{--bg:#15171c;--panel:#1c1f26;--raised:#262a33;--line:#333845;--text:#e8e6e3;--dim:#8b93a5;--accent:#7cc4ff;--ok:#7ddc9a;--bad:#ff6b6b;--ghost:#3d4352;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:15px/1.45 system-ui,Noto Sans CJK JP,Noto Sans JP,sans-serif}#app{grid-template-columns:300px 1fr;min-height:100vh;display:grid}button,select{font:inherit;color:var(--text);background:var(--raised);border:1px solid var(--line);cursor:pointer;border-radius:8px;padding:7px 13px}button:hover:not(:disabled){border-color:var(--dim)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);border-color:var(--accent);color:#0b1620;font-weight:600}button.on{border-color:var(--accent);color:var(--accent)}#sidebar{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;gap:12px;height:100vh;padding:14px;display:flex;position:sticky;top:0;overflow-y:auto}#script-tabs{grid-template-columns:1fr 1fr;gap:6px;display:grid}#grid{grid-template-columns:repeat(5,1fr);gap:5px;display:grid}#grid .sep{grid-column:1/-1;height:6px}.cell{flex-direction:column;align-items:center;gap:1px;padding:5px 0 6px;line-height:1.15;display:flex}.cell .ch{font-size:21px}.cell .ro{color:var(--dim);font-size:10.5px}.cell .bar{gap:2px;margin-top:3px;display:flex}.cell .bar i{background:var(--line);border-radius:2px;width:7px;height:3px}.cell .bar i.done{background:var(--ok)}.cell.current{border-color:var(--accent);background:#24354a}#settings{gap:6px;display:flex}#settings select{flex:1;min-width:0}#sidebar footer{color:var(--dim);font-size:11px}a{color:var(--accent)}main{flex-direction:column;align-items:center;gap:12px;padding:22px 28px;display:flex}header{justify-content:space-between;align-items:center;gap:16px;width:100%;max-width:720px;display:flex}#title{align-items:baseline;gap:12px;display:flex}#title .ch{font-size:44px;line-height:1}#title .ch.hidden{color:var(--dim)}#title .ro{color:var(--accent);font-size:22px}#title .meta{color:var(--dim);font-size:13px}#stages{gap:6px;display:flex}#stages button .tick{color:var(--ok);margin-left:5px}#instruction{color:var(--dim);min-height:1.45em;margin:0}#board-wrap{justify-content:center;align-items:center;height:430px;display:flex}#board{background:var(--panel);touch-action:none;-webkit-user-select:none;user-select:none;cursor:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"9\" height=\"9\"><circle cx=\"4.5\" cy=\"4.5\" r=\"2.2\" fill=\"%237cc4ff\" stroke=\"%23000\" stroke-opacity=\"0.65\"/></svg>") 4 4,crosshair;border-radius:12px;overflow:visible}#board path{fill:none;stroke-linecap:round;stroke-linejoin:round}#l-grid rect{fill:none;stroke:var(--line);stroke-width:.6px}#l-grid line{stroke:var(--line);stroke-width:.4px;stroke-dasharray:2 2}#board path.ghost{stroke:var(--ghost);stroke-width:3.2px}#board path.ghost.next{stroke:#5d6680}#board path.solid{stroke:#747d92;stroke-width:3.4px}#board path.ink{stroke:var(--text);stroke-width:3.4px}#board path.reveal{stroke:var(--accent);stroke-width:1.1px}#board path.debug{stroke:#ff5cf4;stroke-width:.7px;stroke-dasharray:1.5 1.5}#board #l-user path,#board #l-live{fill:var(--text);stroke:none}#board #l-user.faded path{opacity:.75}#board text{fill:var(--accent);pointer-events:none;font-size:7px;font-weight:600}#board circle.startdot{fill:var(--accent)}#board path.rejected{fill:var(--bad);stroke:none;animation:.7s ease-out forwards fade}#board path.wrong{stroke:var(--bad);stroke-width:4px;animation:.6s ease-out forwards fade}#board path.hint{stroke:var(--accent);stroke-width:3.2px;animation:1.4s ease-in forwards fade}@keyframes fade{to{opacity:0}}#strip{min-height:36px;color:var(--dim);align-items:center;gap:6px;font-size:13px;display:flex}.chip{width:34px;height:34px;color:var(--dim);border-radius:50%;padding:0}.chip.filled{border-color:var(--ok);color:var(--text);background:#2c4a38}.chip.next{border-color:var(--accent);color:var(--accent)}.chip.clearable:hover{border-color:var(--bad);background:#4a2c2c}#controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:flex}#controls .gap{width:14px}#status{min-height:1.45em;margin:0;font-weight:500}#status.ok{color:var(--ok)}#status.bad{color:var(--bad)}#status .dbg{color:var(--dim);margin-left:10px;font:12px monospace}#keys{text-align:center;max-width:720px;color:var(--dim);margin:6px 0 0;font-size:12px;line-height:1.9}kbd{background:var(--raised);border:1px solid var(--line);border-radius:4px;margin:0 1px;padding:1px 5px;font:11px monospace}#report{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:flex-start;gap:10px;width:100%;max-width:640px;padding:12px 16px 14px;display:flex}#report table{border-collapse:collapse;width:100%;font-size:13.5px}#report th{text-align:left;color:var(--dim);white-space:nowrap;padding:3px 10px 3px 0;font-weight:500}#report tr:first-child th,#report tr:first-child .score{color:var(--text);font-weight:600}#report td{padding:3px 0}#report td.bar{width:90px;padding-right:8px}#report td.bar:before{content:"";background:var(--raised);border-radius:3px;height:6px;margin-bottom:-6px;display:block}#report td.bar i{border-radius:3px;height:6px;display:block;position:relative}#report i.good{background:var(--ok)}#report i.fair{background:#e6c35c}#report i.poor{background:var(--bad)}#report td.score{font-variant-numeric:tabular-nums;width:34px}#report td.fine,#report .muted,#report .source{color:var(--dim)}#report p{margin:0}#report .error{color:var(--bad)}#report .advice{border-top:1px solid var(--line);flex-direction:column;gap:8px;width:100%;padding-top:10px;display:flex}#report ul{flex-direction:column;gap:5px;margin:0;padding-left:18px;display:flex}#report .fix{color:var(--accent)}#report .source{font-size:11.5px}#controls .break{flex-basis:100%;height:0}#controls .label{color:var(--dim);font-size:13px}#report[hidden]{display:none}#account{border-top:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:12px;font-size:13px;display:flex}#history{flex-direction:column;gap:10px;width:100%;max-width:640px;display:flex}#history[hidden]{display:none}#history h2{margin:6px 0 0;font-size:14px;font-weight:600}#history h2 span{color:var(--dim);margin-left:8px;font-weight:400}#history .cards{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px;display:grid}#history .card{flex-direction:column;align-items:center;gap:1px;padding:6px 4px 5px;line-height:1.25;display:flex}#history svg{width:62px;height:62px;overflow:visible}#history svg .ink{fill:var(--text)}#history svg .ref{fill:none;stroke:var(--accent);stroke-opacity:.55;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}#history .score{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600}#history .score.good{color:var(--ok)}#history .score.fair{color:#e6c35c}#history .score.poor{color:var(--bad)}#history .meta{color:var(--dim);font-size:10.5px}#history .detail{background:var(--panel);border:1px solid var(--line);border-radius:12px;gap:16px;padding:14px 16px;display:flex}#history .big{color:var(--dim);text-align:center;flex-direction:column;align-items:center;gap:6px;font-size:11.5px;display:flex}#history .big svg{background:var(--bg);border-radius:8px;width:150px;height:150px}#history .body{flex-direction:column;flex:1;gap:10px;min-width:0;font-size:13.5px;display:flex}#history .body table{border-collapse:collapse;width:100%}#history .body th{text-align:left;color:var(--dim);white-space:nowrap;padding:3px 10px 3px 0;font-weight:500}#history .body td{padding:3px 0}#history .body td.bar{width:70px;padding-right:8px}#history .body td.bar i{border-radius:3px;height:6px;display:block}#history .body i.good{background:var(--ok)}#history .body i.fair{background:#e6c35c}#history .body i.poor{background:var(--bad)}#history .body td.fine,#history .muted,#history .source{color:var(--dim)}#history p{margin:0}#history .advice{border-top:1px solid var(--line);flex-direction:column;gap:8px;padding-top:10px;display:flex}#history ul{flex-direction:column;gap:5px;margin:0;padding-left:18px;display:flex}#history .fix{color:var(--accent)}#history .source{font-size:11.5px}#history .body td.score{font-variant-numeric:tabular-nums;width:34px}body.booting #app{visibility:hidden}#auth{z-index:10;background:var(--bg);justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0;overflow-y:auto}#auth[hidden]{display:none}.auth-card{background:var(--panel);border:1px solid var(--line);text-align:center;border-radius:16px;flex-direction:column;align-items:stretch;gap:10px;width:100%;max-width:380px;padding:30px 30px 26px;display:flex}.auth-card .logo{color:var(--accent);font-size:46px;line-height:1}.auth-card h1{margin:0;font-size:22px}.auth-card .tagline{margin:4px 0 0;font-size:17px;font-weight:600}.auth-card .pitch,.auth-card .note{color:var(--dim);margin:0;font-size:13px}.auth-card form{flex-direction:column;gap:8px;margin-top:10px;display:flex}.auth-card input{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px 12px}.auth-card input:focus{border-color:var(--accent);outline:none}.auth-card button{padding:10px 13px}.auth-card .row{gap:8px;display:flex}.auth-card .row button{flex:1}.auth-card .error{min-height:1.3em;color:var(--bad);margin:0;font-size:13px}.auth-card .or{color:var(--dim);align-items:center;gap:10px;font-size:12px;display:flex}.auth-card .or:before,.auth-card .or:after{content:"";background:var(--line);flex:1;height:1px}#account span{color:var(--dim)}#account button.primary{width:100%}.auth-card .row button[value=register]{order:-1}.legibility,.read{margin:0;font-size:14px}.legibility b:first-child{border-radius:999px;margin-right:8px;padding:2px 11px;font-weight:600;display:inline-block}.legibility.pass b:first-child{color:var(--ok);background:#2c4a38}.legibility.fail b:first-child{color:var(--bad);background:#4a2c2c}.read{font-size:13.5px}.read.pass b:last-of-type{color:var(--ok)}.read.fail b:last-of-type{color:var(--bad)}#report caption,#history caption{text-align:left;color:var(--dim);padding-bottom:4px;font-size:12px}#history .mark{font-size:11px;font-weight:600}#history .mark.pass{color:var(--ok)}#history .mark.fail{color:var(--bad)}#history .score{font-size:11.5px;font-weight:500}#mode-tabs{border-bottom:1px solid var(--line);grid-template-columns:1fr 1fr;gap:6px;padding-bottom:12px;display:grid}#mode-tabs button{font-weight:600}#practice{display:contents}#practice[hidden],#quiz[hidden],#settings[hidden],#script-tabs[hidden],#grid[hidden]{display:none}#quiz{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:640px;display:flex}.quiz-options{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:6px;width:100%;padding:12px 14px;display:flex}.quiz-options div{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.quiz-options span{width:58px;color:var(--dim);font-size:13px}.quiz-options button{padding:5px 11px;font-size:13.5px}.quiz-ask{color:var(--dim);margin:10px 0 0}.quiz-prompt{background:var(--panel);border-radius:16px;justify-content:center;align-items:center;min-width:220px;height:170px;padding:0 30px;display:flex}.quiz-prompt .kana{font-size:104px;line-height:1}.quiz-prompt .romaji{color:var(--accent);font-size:64px}.quiz-choices{grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:440px;display:grid}.quiz-choices button{flex-direction:column;justify-content:center;align-items:center;height:76px;line-height:1.1;display:flex;position:relative}.quiz-choices button:disabled{opacity:1}.quiz-choices kbd{position:absolute;top:6px;left:7px}.quiz-choices .kana{font-size:34px}.quiz-choices .romaji{font-size:22px}.quiz-choices small{color:var(--dim);margin-top:3px;font-size:13px}.quiz-choices .right{border-color:var(--ok);background:#2c4a38}.quiz-choices .wrong{border-color:var(--bad);background:#4a2c2c}.quiz-choices .dim{opacity:.45}.quiz-result{min-height:1.45em;margin:0;font-weight:500}.quiz-result.ok{color:var(--ok)}.quiz-result.bad{color:var(--bad)}.quiz-next{gap:8px;display:flex}.quiz-score,.quiz-empty{color:var(--dim);text-align:center;margin:0;font-size:13px}.quiz-score button{margin-left:8px;padding:2px 9px;font-size:12px}#picker-toggle{display:none}@media (width<=760px){body{overscroll-behavior-y:none}#app{display:block}#sidebar{z-index:5;border-right:none;border-bottom:1px solid var(--line);height:auto;max-height:100dvh;padding:8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));padding-top:max(8px, env(safe-area-inset-top));grid-template-columns:auto 1fr;align-items:center;gap:8px;display:grid;position:sticky;top:0}#mode-tabs{border-bottom:none;padding-bottom:0}#mode-tabs button{padding:7px 14px}#picker-toggle:not([hidden]){min-width:0;color:var(--dim);justify-content:space-between;align-items:center;gap:8px;font-size:13px;display:flex}#picker-toggle b{color:var(--text);font-size:18px;font-weight:500}#sidebar>:not(#mode-tabs):not(#picker-toggle){grid-column:1/-1}#sidebar:not(.open)>:not(#mode-tabs):not(#picker-toggle){display:none}#grid .cell{padding:8px 0}#account{margin-top:0}main{padding:14px 12px calc(20px + env(safe-area-inset-bottom));gap:10px}header{flex-direction:column;align-items:stretch;gap:10px}#title{justify-content:center}#title .ch{font-size:36px}#stages{grid-template-columns:repeat(4,1fr);display:grid}#stages button{padding:8px 2px;font-size:13.5px}#instruction{text-align:center;font-size:14px}#board-wrap{height:auto;min-height:150px}#board{max-width:calc(100vw - 24px);max-height:calc(100vw - 24px)}#controls button,#controls select{padding:9px 12px}#keys{display:none}#report{padding:10px 12px 12px}#report td.bar{width:54px}#history .detail{flex-direction:column;align-items:center}#history .body{width:100%}.quiz-prompt{height:140px}.quiz-prompt .kana{font-size:84px}.auth-card{padding:22px 18px}}@media (hover:none){#keys{display:none}}@media (display-mode:standalone){#auth{padding-top:max(20px, env(safe-area-inset-top))}}#quiz-body{display:contents}#daily{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex-direction:column;gap:8px;width:100%;padding:10px 14px;font-size:13.5px;display:flex}.daily-top{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.daily-dots{gap:5px;display:flex}.daily-dots i{border:2px solid var(--line);border-radius:50%;width:13px;height:13px}.daily-dots i.done{background:var(--ok);border-color:var(--ok)}.daily-streak{color:var(--accent);margin-right:auto}#daily button,#daily select,#daily input{font:inherit;padding:4px 10px;font-size:13px}#daily input{color:var(--text);background:var(--raised);border:1px solid var(--line);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;border-radius:8px}.daily-session{align-items:center;gap:10px;display:flex}.daily-bar{background:var(--raised);border-radius:3px;flex:1;height:6px;overflow:hidden}.daily-bar i{background:var(--accent);width:0;height:100%;transition:width .4s linear;display:block}.daily-time{color:var(--dim);font-variant-numeric:tabular-nums}.daily-message{color:var(--ok);margin:0}.daily-settings{border-top:1px solid var(--line);flex-direction:column;gap:8px;padding-top:10px;display:flex}.daily-settings .row{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.daily-settings .row>span{width:72px;color:var(--dim)}#daily p{margin:0}#daily .muted{color:var(--dim);font-size:12.5px}#daily .error{color:var(--bad)}.cell .rec{background:0 0;border-radius:2px;width:34px;height:3px;margin-top:2px;overflow:hidden}.cell .rec:has(i){background:var(--line)}.cell .rec i{background:#e6c35c;border-radius:2px;height:100%;display:block}.cell .rec i.known{background:var(--accent)}.quiz-progress{width:100%;color:var(--dim);text-align:center;margin:0;font-size:13px}.quiz-progress b{color:var(--accent)}.quiz-progress button{margin-left:10px;padding:2px 9px;font-size:12px}.quiz-weakest{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;width:100%;display:grid}.quiz-weakest>span{background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:8px;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;font-size:11.5px;display:flex}.quiz-weakest b{color:var(--text);font-size:22px;font-weight:400;line-height:1.1}.quiz-weakest span>i{background:var(--line);border-radius:2px;width:40px;height:3px;overflow:hidden}.quiz-weakest span>i>i{background:#e6c35c;height:100%;display:block}