.navigation-controls{justify-content:center;align-items:center;gap:14px;display:flex}.nav-button{cursor:pointer;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--font-ui);border-radius:11px;align-items:center;gap:9px;padding:12px 22px;font-size:14px;font-weight:600;transition:all .14s;display:inline-flex}.nav-button:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.nav-button:disabled{opacity:.35;cursor:not-allowed}.nav-button:focus{outline:none}.nav-button svg{stroke:currentColor;stroke-width:2.2px;fill:none;width:17px;height:17px}
.progress-indicator{flex-direction:column;align-items:center;gap:9px;width:min(420px,86vw);display:flex}.progress-text{font-family:var(--font-pixel);letter-spacing:.05em;color:var(--muted);font-size:10px}.progress-current{color:var(--text)}.progress-separator{color:var(--muted);margin:0 4px}.progress-total{color:var(--text)}.progress-bar{background:var(--surface2);border:1.5px solid var(--line);border-radius:999px;width:100%;height:6px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .25s}
.type-container{flex-direction:column;align-items:center;gap:24px;width:min(480px,90vw);display:flex}.type-character{aspect-ratio:3/2;border:1.5px solid var(--line);background:var(--surface);width:100%;box-shadow:var(--shadow);border-radius:20px;place-items:center;display:grid}.type-character .character{font-family:var(--font-serif);color:var(--text);-webkit-user-select:none;user-select:none;font-size:clamp(96px,20vw,150px);font-weight:700;line-height:1}.type-jp{font-family:var(--font-serif);color:var(--text);-webkit-user-select:none;user-select:none;text-align:center;font-size:clamp(48px,10vw,72px);font-weight:700;line-height:1.6}.type-jp ruby{ruby-align:center}.type-jp rt{font-size:.3em;font-family:var(--font-serif);color:var(--muted);font-weight:400}.type-en{font-family:var(--font-ui);color:var(--text);-webkit-user-select:none;user-select:none;text-align:center;padding:0 16px;font-size:clamp(20px,4vw,28px);font-weight:500;line-height:1.4}.type-kana{font-family:var(--font-serif);color:var(--muted);text-align:center;margin-top:8px;font-size:clamp(16px,3vw,22px)}.type-input-row{gap:10px;width:100%;display:flex}.type-input{font-family:var(--font-ui);color:var(--text);text-align:center;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;outline:none;flex:1;padding:15px;font-size:17px;transition:border-color .15s}.type-input::placeholder{color:var(--muted)}.type-input:focus{border-color:var(--navy-soft);box-shadow:0 0 0 3px color-mix(in oklab,var(--navy-soft),transparent 80%)}.type-input:disabled{opacity:.6;cursor:not-allowed}.type-input.type-input-correct{border-color:var(--green)}.type-input.type-input-incorrect{border-color:var(--accent)}.type-submit{border:1.5px solid var(--navy);background:var(--navy);color:#fff;font-family:var(--font-ui);cursor:pointer;white-space:nowrap;border-radius:12px;padding:15px 22px;font-size:14px;font-weight:600;transition:background .14s}.type-submit:hover:not(:disabled){background:var(--navy-soft)}.type-submit:disabled{background:var(--surface);border-color:var(--line);color:var(--muted);cursor:not-allowed}.type-feedback{opacity:0;min-height:20px;font-size:14px;font-weight:600;transition:opacity .2s}.type-feedback-visible{opacity:1}.type-feedback-correct{color:var(--green)}.type-feedback-incorrect{color:var(--accent)}
.score-display{border:1.5px solid var(--line);background:var(--surface);box-sizing:border-box;cursor:default;border-radius:14px;justify-content:space-between;align-items:center;gap:16px;width:min(480px,90vw);padding:18px 24px;display:flex}.score-display.clickable{cursor:pointer}.score-display.clickable:hover{border-color:var(--accent)}.score-left{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.score-label{font-family:var(--font-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:10px}.score-value{align-items:baseline;gap:3px;display:flex}.score-correct{font-family:var(--font-pixel);color:var(--green);font-size:22px;line-height:1}.score-separator{font-family:var(--font-pixel);color:var(--faint);font-size:16px;line-height:1}.score-total{font-family:var(--font-pixel);color:var(--accent);font-size:22px;line-height:1}.score-right{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.score-percentage{font-family:var(--font-pixel);color:var(--text);font-size:clamp(18px,3.5vw,26px);line-height:1}.score-percentage.score-dim{color:var(--faint)}.score-hint{font-family:var(--font-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);opacity:0;pointer-events:none;font-size:8px}.score-display.clickable .score-hint{opacity:1;pointer-events:auto;color:var(--muted)}.results-overlay{z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04060ebd;justify-content:center;align-items:center;padding:20px;animation:.2s fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.results-modal{background:var(--surface);border:1.5px solid var(--line);width:fit-content;max-width:min(560px,94vw);max-height:90vh;box-shadow:var(--shadow);border-radius:18px;flex-direction:column;animation:.3s cubic-bezier(.2,.7,.2,1) slideUp;display:flex;overflow:hidden}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.results-close{border:1.5px solid var(--line);width:36px;height:36px;color:var(--text);cursor:pointer;background:0 0;border-radius:9px;place-items:center;font-size:18px;line-height:1;transition:border-color .14s;display:grid;position:absolute;top:16px;right:16px}.results-close:hover{border-color:var(--accent)}.results-title{font-family:var(--font-pixel);color:var(--text);padding:24px 28px 16px;font-size:14px;position:relative}.results-content{padding:0 28px 28px;overflow-y:auto}.results-section{margin-bottom:28px}.results-section:last-child{margin-bottom:0}.results-section-title{font-family:var(--font-pixel);letter-spacing:.05em;text-transform:uppercase;color:var(--kicker);border-bottom:1.5px solid var(--line);margin-bottom:12px;padding-bottom:8px;font-size:9px}.correct-title{color:var(--green)}.incorrect-title{color:var(--accent)}.results-grid{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.result-item{background:var(--bg);border:1.5px solid var(--line);text-align:center;border-radius:11px;padding:10px}.correct-item{border-color:var(--green);background:color-mix(in oklab,var(--green),transparent 88%)}.incorrect-item{border-color:var(--accent);background:color-mix(in oklab,var(--accent),transparent 90%)}.result-character{font-family:var(--font-serif);color:var(--text);margin-bottom:4px;font-size:28px;font-weight:700;line-height:1}.result-romaji{font-family:var(--font-ui);color:var(--muted);font-size:11px;font-weight:600}.results-empty{font-family:var(--font-ui);color:var(--faint);text-align:center;padding:4px 0;font-size:14px;font-weight:500}
.study-page{padding:20px var(--pad)0;position:relative}.study-page .grid-wash{-webkit-mask-image:radial-gradient(at 50% 0,#000 18%,#0000 60%);mask-image:radial-gradient(at 50% 0,#000 18%,#0000 60%)}.study-wrap{z-index:1;text-align:center;flex-direction:column;align-items:center;gap:18px;max-width:1000px;margin:0 auto;display:flex;position:relative}.study-back{align-self:flex-start}.mode-tabs,.deck-row{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.deck-row{gap:9px}.pill{cursor:pointer;font-family:var(--font-ui);color:var(--text);border:1.5px solid var(--line);background:var(--surface);border-radius:11px;align-items:center;gap:9px;padding:11px 18px;font-size:14px;font-weight:600;transition:all .15s;display:inline-flex}.pill svg{stroke:currentColor;stroke-width:2px;fill:none;width:16px;height:16px}.pill .glyph{font-family:var(--font-serif);color:var(--accent);font-size:17px;line-height:1}.pill:hover{border-color:var(--accent);transform:translateY(-1px)}.pill.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 8px 22px color-mix(in oklab,var(--navy),transparent 62%)}.pill.on .glyph{color:#fff}.pill.ghost{background:0 0}.pill.ghost.on{background:var(--navy);border-color:var(--navy);color:#fff}.pill.ghost.on .glyph{color:#fff}.instructions{color:var(--faint);letter-spacing:.01em;margin:4px 0 0;font-size:13.5px}.instructions kbd{font-family:var(--font-pixel);background:var(--surface2);border:1px solid var(--line);color:var(--strong);border-radius:4px;padding:2px 5px;font-size:9px}.stage{flex-direction:column;align-items:center;gap:26px;width:100%;margin-top:6px;display:flex}.flip{aspect-ratio:3/2;perspective:1600px;cursor:pointer;-webkit-user-select:none;user-select:none;width:min(480px,90vw,100vh - 340px);position:relative}.flip-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1);position:relative}.flip.flipped .flip-inner{transform:rotateY(180deg)}.flip-face{backface-visibility:hidden;border:1.5px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.flip-face .corner{font-family:var(--font-pixel);color:var(--faint);letter-spacing:.06em;text-transform:uppercase;font-size:8px;position:absolute;top:18px;left:20px}.flip-front .char{font-family:var(--font-serif);color:var(--text);font-size:clamp(140px,30vw,220px);font-weight:700;line-height:1}.flip-back{background:var(--surface2);transform:rotateY(180deg)}.flip-back .romaji{font-family:var(--font-serif);color:var(--accent);font-size:clamp(64px,14vw,104px);font-weight:700;line-height:1}.flip-face .flip-hint{font-family:var(--font-pixel);letter-spacing:.07em;text-transform:uppercase;color:var(--faint);font-size:7px;position:absolute;bottom:20px}.card-audio{z-index:3;cursor:pointer;background:var(--navy);color:#fff;width:50px;height:50px;box-shadow:0 8px 20px color-mix(in oklab,var(--navy),transparent 50%);border:none;border-radius:50%;place-items:center;transition:transform .14s,background .14s;display:grid;position:absolute;bottom:18px;right:18px}.card-audio:hover{background:var(--navy-soft);transform:translateY(-2px)scale(1.05)}.card-audio svg{width:22px;height:22px}.nav-row{justify-content:center;align-items:center;gap:14px;display:flex}.nav-btn{cursor:pointer;border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:11px;align-items:center;gap:9px;padding:12px 22px;font-size:14px;font-weight:600;transition:all .14s;display:inline-flex}.nav-btn:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.nav-btn:disabled{opacity:.35;cursor:not-allowed}.nav-btn svg{stroke:currentColor;stroke-width:2.2px;fill:none;width:17px;height:17px}.progress{flex-direction:column;align-items:center;gap:9px;width:min(420px,86vw);display:flex}.progress .count{font-family:var(--font-pixel);letter-spacing:.05em;color:var(--muted);font-size:10px}.progress .count b{color:var(--text)}.progress .bar{background:var(--surface2);border:1.5px solid var(--line);border-radius:999px;width:100%;height:6px;overflow:hidden}.progress .fill{background:var(--accent);border-radius:999px;height:100%;transition:width .25s}.tool-row{justify-content:center;gap:10px;display:flex}.tool{cursor:pointer;color:var(--text);border:1.5px solid var(--line);background:var(--surface);border-radius:11px;align-items:center;gap:8px;padding:11px 18px;font-size:13.5px;font-weight:600;transition:all .14s;display:inline-flex}.tool:hover{border-color:var(--accent);transform:translateY(-1px)}.tool.on{background:var(--navy);border-color:var(--navy);color:#fff}.tool svg{stroke:currentColor;stroke-width:2px;fill:none;width:15px;height:15px}.quiz{flex-direction:column;align-items:center;gap:24px;width:min(560px,92vw);display:flex}.quiz-char{aspect-ratio:3/2;border:1.5px solid var(--line);background:var(--surface);width:100%;box-shadow:var(--shadow);border-radius:20px;place-items:center;display:grid}.quiz-char span{font-family:var(--font-serif);color:var(--text);font-size:clamp(140px,30vw,220px);font-weight:700;line-height:1}.quiz-opts{grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}.quiz-opt{font-family:var(--font-ui);color:var(--text);cursor:pointer;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;padding:18px;font-size:18px;font-weight:600;transition:all .14s}.quiz-opt:hover{border-color:var(--accent);transform:translateY(-2px)}.quiz-opt.correct{background:var(--green);border-color:var(--green);color:#fff}.quiz-opt.wrong{background:var(--accent);border-color:var(--accent);color:#fff}.quiz-opt:disabled{cursor:default}.score{border:1.5px solid var(--line);background:var(--surface);border-radius:14px;justify-content:center;align-items:center;gap:24px;padding:16px 28px;display:flex}.score .s{text-align:center}.score .s b{font-family:var(--font-serif);font-size:26px;font-weight:700;line-height:1;display:block}.score .s.ok b{color:var(--green)}.score .s.no b{color:var(--accent)}.score .s span{font-family:var(--font-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:8px}.score .sep{background:var(--line);width:1.5px;height:34px}.type-in{gap:10px;width:100%;display:flex}.type-in input{font-family:var(--font-ui);color:var(--text);text-align:center;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;outline:none;flex:1;padding:15px;font-size:17px;transition:border-color .15s}.type-in input:focus{border-color:var(--navy-soft);box-shadow:0 0 0 3px color-mix(in oklab,var(--navy-soft),transparent 80%)}.type-feedback{min-height:20px;font-size:14px;font-weight:600}.type-feedback.ok{color:var(--green)}.type-feedback.no{color:var(--accent)}.match-rounds{justify-content:space-between;align-items:center;gap:16px;width:min(560px,92vw);margin:0;display:flex}.rounds-label{font-family:var(--font-pixel);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11px;line-height:1}.rounds-count{font-family:var(--font-pixel);color:var(--accent);font-size:26px;line-height:1.2}.match{grid-template-columns:repeat(4,1fr);gap:12px;width:min(560px,92vw);display:grid}.match-cell{aspect-ratio:1;cursor:pointer;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;place-items:center;font-weight:600;transition:all .14s;display:grid}.match-cell.kana{font-family:var(--font-serif);color:var(--text);font-size:32px}.match-cell.romaji{font-family:var(--font-ui);color:var(--text);font-size:17px}.match-cell:hover{border-color:var(--accent)}.match-cell.sel{border-color:var(--navy-soft);background:color-mix(in oklab,var(--navy-soft),transparent 84%)}.match-cell.done{opacity:0;pointer-events:none;transform:scale(.85)}.match-cell.miss{border-color:var(--accent);animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.review-wrap{flex-direction:column;align-items:center;width:100%;display:flex}.rev-grid{justify-content:center;gap:8px;margin-top:4px;display:grid}.rev-cell{aspect-ratio:1;border:1.5px solid var(--line);background:var(--surface);border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:3px;transition:all .14s;display:flex}.rev-cell:hover{border-color:var(--accent);transform:translateY(-2px)}.rev-cell .rc{font-family:var(--font-serif);color:var(--text);font-size:clamp(22px,5vw,30px);font-weight:700;line-height:1}.rev-cell .rr{color:var(--muted);font-size:11px}.rev-cell.empty{pointer-events:none;opacity:0;background:0 0;border:none}.review-group-label{text-align:center;font-family:var(--font-pixel);letter-spacing:.05em;text-transform:uppercase;color:var(--kicker);margin:24px 0 6px;font-size:9px}.modal-scrim{z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#04060ebd;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.modal-scrim.open{display:flex}.cs-modal{background:var(--surface);border:1.5px solid var(--line);width:fit-content;max-width:min(560px,94vw);max-height:90vh;box-shadow:var(--shadow);border-radius:18px;flex-direction:column;display:flex;overflow:hidden}.cs-head{border-bottom:1.5px solid var(--line);justify-content:space-between;align-items:center;gap:14px;padding:20px 24px;display:flex}.cs-head h2{font-family:var(--font-serif);color:var(--text);font-size:21px;font-weight:700}.cs-close{border:1.5px solid var(--line);width:36px;height:36px;color:var(--text);cursor:pointer;background:0 0;border-radius:9px;place-items:center;font-size:18px;line-height:1;display:grid}.cs-close:hover{border-color:var(--accent)}.cs-controls{border-bottom:1.5px solid var(--line-soft);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:16px 24px;display:flex}.cs-count{font-family:var(--font-pixel);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-size:9px}.cs-actions{gap:8px;display:flex}.cs-btn2{color:var(--text);cursor:pointer;border:1.5px solid var(--line);background:0 0;border-radius:9px;padding:9px 14px;font-size:12.5px;font-weight:600;transition:all .14s}.cs-btn2:hover{border-color:var(--accent)}.cs-sectbtns{flex-wrap:wrap;gap:8px;padding:14px 24px 0;display:flex}.cs-sectbtn{color:var(--muted);cursor:pointer;border:1.5px solid var(--line);background:0 0;border-radius:999px;padding:9px 15px;font-size:12.5px;font-weight:600;transition:all .14s}.cs-sectbtn:hover{color:var(--text);border-color:var(--accent)}.cs-sectbtn.active{background:var(--navy);border-color:var(--navy);color:#fff}.cs-content{padding:6px 24px 20px;overflow-y:auto}.cs-section{margin-top:20px}.cs-section-title{font-family:var(--font-pixel);letter-spacing:.05em;text-transform:uppercase;color:var(--kicker);margin-bottom:12px;font-size:9px}.cs-grid{justify-content:center;align-items:stretch;gap:6px;display:grid}.cs-colh,.cs-rowh{cursor:pointer;color:var(--faint);border:1.5px solid var(--line-soft);background:0 0;border-radius:7px;place-items:center;font-size:13px;transition:all .14s;display:grid}.cs-rowh{min-width:26px}.cs-colh:hover,.cs-rowh:hover{color:var(--accent);border-color:var(--accent)}.cs-cell{aspect-ratio:1;cursor:pointer;border:1.5px solid var(--line);background:var(--bg);opacity:.42;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:2px;transition:all .12s;display:flex;position:relative}.cs-cell .cc{font-family:var(--font-serif);color:var(--text);font-size:clamp(18px,4.4vw,26px);font-weight:700;line-height:1}.cs-cell .cr{color:var(--muted);font-size:9px}.cs-cell .ck{color:var(--accent);opacity:0;display:grid;position:absolute;top:4px;right:4px}.cs-cell .ck svg{width:13px;height:13px}.cs-cell.on{opacity:1;border-color:var(--accent);background:color-mix(in oklab,var(--accent),transparent 88%)}.cs-cell.on .ck,.cs-cell:hover{opacity:1}.cs-cell.empty{pointer-events:none;opacity:0;background:0 0;border:none}.cs-foot{border-top:1.5px solid var(--line);justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;display:flex}.cs-btn-cancel{color:var(--text);cursor:pointer;border:1.5px solid var(--line);background:0 0;border-radius:11px;padding:12px 20px;font-size:14px;font-weight:600;transition:all .14s}.cs-btn-cancel:hover{border-color:var(--accent)}.cs-btn-primary{color:#fff;cursor:pointer;border:1.5px solid var(--navy);background:var(--navy);border-radius:11px;padding:12px 22px;font-size:14px;font-weight:600;transition:all .14s}.cs-btn-primary:hover{background:var(--navy-soft)}@media (max-width:560px){.match{grid-template-columns:repeat(3,1fr)}.pill{padding:10px 14px;font-size:13px}.cs-cell .cr{display:none}}