.matching-container{flex-direction:column;align-items:center;gap:24px;width:min(560px,92vw);display:flex}.matching-grid{grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}.matching-column{flex-direction:column;gap:10px;display:flex}.column-title{display:none}.match-item{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:1.5px solid var(--line);background:var(--surface);border-radius:13px;place-items:center;height:60px;font-weight:600;transition:all .14s;display:grid}@media (hover:hover){.match-item:hover:not(:disabled){border-color:var(--accent)}}.match-item:focus{outline:none}.match-character{font-family:var(--font-serif);color:var(--text);font-size:clamp(28px,8vw,42px);line-height:1}.match-romaji{font-family:var(--font-ui);color:var(--text);font-size:clamp(14px,4vw,20px);line-height:1}.match-item.selected{border-color:var(--navy-soft);background:color-mix(in oklab,var(--navy-soft),transparent 84%)}.match-item.matched{opacity:.45;pointer-events:none;border-color:var(--correct,#4caf50);background:color-mix(in oklab,var(--correct,#4caf50),transparent 84%)}.match-item.incorrect{border-color:var(--accent);animation:.35s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.matching-progress{font-family:var(--font-pixel);letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:center;font-size:9px}
.review-container{flex-direction:column;align-items:center;width:100%;display:flex}.review-title{display:none}.review-section{flex-direction:column;align-items:center;width:100%;margin-bottom:32px;display:flex}.section-title{font-family:var(--font-pixel);letter-spacing:.05em;text-transform:uppercase;color:var(--kicker);text-align:center;margin:24px 0 12px;font-size:9px}.review-grid{justify-content:center;gap:8px;display:grid}.basic-grid,.diacritical-grid{grid-template-columns:repeat(5,minmax(60px,88px))}.contracted-grid{grid-template-columns:repeat(3,minmax(60px,88px))}.review-card{aspect-ratio:1;border:1.5px solid var(--line);background:var(--surface);cursor:default;border-radius:11px;flex-direction:column;justify-content:center;align-items:center;gap:3px;transition:all .14s;display:flex;position:relative}.review-card:hover{border-color:var(--accent);transform:translateY(-2px)}.review-card.empty-card{pointer-events:none;opacity:0;background:0 0;border:none}.review-character{font-family:var(--font-serif);color:var(--text);font-size:clamp(20px,5vw,30px);font-weight:700;line-height:1}.review-romaji{color:var(--muted);letter-spacing:.02em;font-size:10px}.review-audio-icon{color:var(--muted);opacity:0;line-height:0;transition:opacity .15s;position:absolute;bottom:5px;right:6px}.review-card:hover .review-audio-icon{opacity:1}.back-to-top-btn,.section-count{display:none}
.character-selector-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#1a151099;justify-content:center;align-items:center;padding:20px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.character-selector-modal{background:var(--bg);border:1px solid var(--line);width:100%;max-width:560px;max-height:90vh;box-shadow:var(--shadow);border-radius:16px;flex-direction:column;animation:.3s ease-out slideUp;display:flex}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.character-selector-header{border-bottom:1px solid var(--line);background:var(--surface);z-index:10;border-radius:16px 16px 0 0;flex-shrink:0;justify-content:space-between;align-items:center;padding:20px 24px;display:flex;position:sticky;top:0}.character-selector-header h2{font-family:var(--font-heading);color:var(--text);margin:0;font-size:1.5rem;font-weight:700}.character-selector-close{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:4px;transition:all .2s;display:flex}.character-selector-close:hover{background:var(--surface2);color:var(--text)}.character-selector-controls{border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:16px 24px;display:flex}.character-selector-count{font-family:var(--font-ui);color:var(--muted);font-size:.9rem;font-weight:500}.character-selector-buttons{gap:8px;display:flex}.selector-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--font-ui);cursor:pointer;border-radius:6px;padding:6px 16px;font-size:.85rem;font-weight:500;transition:all .2s;box-shadow:0 2px 8px #0000002e}.selector-btn:hover{background:var(--surface2);border-color:var(--accent)}.selector-btn.primary{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px #0000002e}.selector-btn.primary:hover{background:var(--navy-soft);border-color:var(--navy-soft)}.selector-btn.cancel{border-color:var(--line);color:var(--muted);background:0 0}.selector-btn.cancel:hover{background:var(--surface2);color:var(--text)}.character-selector-section-buttons{border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;flex-shrink:0;justify-content:center;gap:12px;padding:16px 24px;display:flex}.selector-section-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--font-ui);cursor:pointer;border-radius:6px;padding:8px 16px;font-size:.85rem;font-weight:500;transition:all .2s;box-shadow:0 2px 8px #0000002e}.selector-section-btn:hover{background:var(--surface2);border-color:var(--accent)}.selector-section-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px #0000002e}.selector-section-btn.active:hover{background:var(--navy-soft);border-color:var(--navy-soft)}.character-selector-content{flex:1;min-height:0;max-height:calc(100vh - 300px);padding:20px 24px;overflow-y:auto}.character-selector-section{margin-bottom:32px}.character-selector-section:last-child{margin-bottom:0}.selector-section-title{font-family:var(--font-ui);color:var(--text);text-align:center;margin-bottom:20px;font-size:1.125rem;font-weight:600}.row-column-controls{background:var(--surface);border:1px solid var(--line);border-radius:10px;flex-direction:column;gap:12px;margin-bottom:16px;padding:12px;display:flex}.row-controls,.column-controls{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.control-label{font-family:var(--font-ui);color:var(--muted);margin-right:4px;font-size:.85rem;font-weight:600}.row-column-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);font-family:var(--font-ui);cursor:pointer;border-radius:6px;min-width:32px;padding:4px 10px;font-size:.75rem;font-weight:600;transition:all .2s}.row-column-btn:hover{background:var(--surface2);border-color:var(--accent)}.row-column-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 2px 8px #0000002e}.row-column-btn.active:hover{background:var(--navy-soft);border-color:var(--navy-soft)}.character-selector-grid{gap:16px;display:grid}.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.character-selector-grid-with-headers{gap:8px;display:grid}.character-selector-grid-with-headers.basic-grid-with-headers,.character-selector-grid-with-headers.diacritical-grid-with-headers{grid-template-columns:32px repeat(5,1fr)}.character-selector-grid-with-headers.contracted-grid-with-headers{grid-template-columns:32px repeat(3,1fr);max-width:700px;margin-left:auto;margin-right:auto}.grid-column-header-btn{border:1px solid var(--line);background:var(--surface);width:100%;height:32px;color:var(--muted);font-family:var(--font-ui);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:.75rem;font-weight:500;transition:all .2s;display:flex}.grid-column-header-btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--text)}.grid-row-header-btn{border:1px solid var(--line);background:var(--surface);width:32px;height:100%;min-height:70px;color:var(--muted);font-family:var(--font-ui);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:.75rem;font-weight:500;transition:all .2s;display:flex}.grid-row-header-btn:hover{background:var(--surface2);border-color:var(--accent);color:var(--text)}.row-arrow{display:inline-block;transform:rotate(-90deg)}.column-arrow,.row-arrow{font-size:1.2rem;font-weight:700;line-height:1;font-family:var(--font-ui)}.character-selector-card{background:var(--surface);border:1px solid var(--line);text-align:center;cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:4px;padding:14px;transition:all .2s;display:flex;position:relative;box-shadow:0 2px 8px #0000002e}.character-selector-card.empty-card{box-shadow:none;cursor:default;pointer-events:none;background:0 0;border:none;padding:0}.character-selector-card:hover{background:var(--surface2);border-color:var(--accent);box-shadow:var(--shadow)}.character-selector-card.selected{background:color-mix(in oklab,var(--navy-soft),transparent 84%);border-color:var(--navy);box-shadow:0 0 0 2px color-mix(in oklab,var(--navy-soft),transparent 84%)}.selector-character{font-family:var(--font-jp);color:var(--text);margin-bottom:4px;font-size:2.5rem;font-weight:400}.selector-romaji{font-family:var(--font-ui);color:var(--muted);font-size:1rem;font-weight:500}.selector-checkmark{background:var(--navy);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;position:absolute;top:4px;right:4px;box-shadow:0 2px 8px #0000002e}.character-selector-footer{padding:16px 24px;padding-bottom:calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface);z-index:10;border-radius:0 0 16px 16px;justify-content:flex-end;gap:12px;display:flex;position:sticky;bottom:0}@media (max-width:768px){.character-selector-modal{border-radius:0;flex-direction:column;max-width:100%;height:100vh;max-height:100vh;display:flex}.character-selector-header,.character-selector-footer{border-radius:0}.character-selector-overlay{align-items:stretch;padding:0}.character-selector-content{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom));flex:1;min-height:0;overflow-y:auto}.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr)}.character-selector-grid{gap:8px}.character-selector-card{padding:12px}.selector-character{font-size:2rem}.selector-romaji{font-size:1.1rem}.character-selector-header{padding:16px;padding-top:calc(16px + env(safe-area-inset-top))}.character-selector-header h2{font-size:1.25rem}.character-selector-controls{gap:8px;padding:12px 16px}.character-selector-buttons{flex:1;gap:8px}.selector-btn{white-space:nowrap;flex:1;min-width:0;padding:6px 12px;font-size:.8rem}.character-selector-section-buttons{gap:8px;padding:12px 16px}.selector-section-btn{white-space:nowrap;flex:1;min-width:0;padding:8px 12px;font-size:.8rem}.character-selector-footer{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.selector-section-title{margin-bottom:16px;font-size:1rem}.character-selector-section{margin-bottom:24px}}@media (max-width:480px){.character-selector-grid.basic-grid,.character-selector-grid.diacritical-grid{grid-template-columns:repeat(5,1fr)}.character-selector-grid.contracted-grid{grid-template-columns:repeat(3,1fr)}.character-selector-grid{gap:6px}.character-selector-card{padding:10px}.selector-character{font-size:1.75rem}.selector-romaji{font-size:.95rem}.selector-section-title{margin-bottom:12px;font-size:.95rem}.character-selector-section{margin-bottom:20px}}