/*
 * Self-hosted typefaces licensed under the SIL Open Font License 1.1.
 * License notices are stored beside each font in assets/fonts.
 * The @font-face rules live in fonts.css, generated by tools/optimize-assets.mjs.
 */

/* Theme tokens: all sections consume these variables so the three palettes stay consistent. */
:root {
    color-scheme: light;
    --bg:#f7f3e8; --surface:#fffdf7; --surface-2:#e9e3d5; --ink:#1f2933; --muted:#59636a;
    --accent:#00658f; --accent-dark:#004a6a; --accent-soft:#d9eef5; --green:#176b65;
    --border:#c8bead; --line:#a49b8c; --success-ink:#004c6d; --success-bg:#d9f0fa; --success-border:#0072b2; --error-ink:#6b3500; --error-bg:#fff0d5; --error-border:#c66a00; --shadow:0 20px 55px rgba(36,54,64,.12); --practice-paper:rgba(255,253,245,.52); --practice-grid:rgba(109,88,63,.13); --practice-ink:rgba(47,55,53,.12);
}
[data-theme="sakura"] { --bg:#fff2f5; --surface:#fffbfc; --surface-2:#f0e1e7; --ink:#332a2f; --muted:#6b5960; --accent:#963b68; --accent-dark:#702344; --accent-soft:#f3dce6; --green:#176b65; --border:#d5bfc8; --line:#ae929d; }
[data-theme="night"] { color-scheme:dark; --bg:#172023; --surface:#222d30; --surface-2:#2e3a3c; --ink:#f5efe3; --muted:#b8bfbb; --accent:#f08b6f; --accent-dark:#ffc0a7; --accent-soft:#4b3431; --green:#a8b681; --border:#3d494a; --line:#65706c; --success-ink:#b9e8fa; --success-bg:#173a4a; --success-border:#56b4e9; --error-ink:#ffe0a6; --error-bg:#493315; --error-border:#e69f00; --shadow:0 20px 55px rgba(0,0,0,.3); --practice-paper:rgba(223,215,193,.045); --practice-grid:rgba(233,219,190,.09); --practice-ink:rgba(244,225,190,.09); }
/* Global reset and page foundation. */
* { box-sizing: border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background-color:var(--bg); background-image:radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 28rem); font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; transition:background .25s,color .25s; }
body{display:flex;min-height:100vh;min-height:100dvh;flex-direction:column}
button,input { font:inherit; } button { color:inherit; }
[hidden] { display:none !important; }
/* A genko-yoshi practice sheet drifts behind the app like paper caught in a soft breeze. */
.wind-practice-paper{position:fixed;z-index:0;left:-7vw;top:-10vh;width:114vw;height:120vh;overflow:hidden;pointer-events:none;background-color:var(--practice-paper);background-image:linear-gradient(var(--practice-grid) 1px,transparent 1px),linear-gradient(90deg,var(--practice-grid) 1px,transparent 1px),repeating-linear-gradient(0deg,transparent 0 47px,var(--practice-grid) 48px 49px,transparent 50px 95px),repeating-linear-gradient(90deg,transparent 0 47px,var(--practice-grid) 48px 49px,transparent 50px 95px);background-size:96px 96px;transform:rotate(-1.15deg);transform-origin:50% 50%}
.wind-practice-paper~main,.wind-practice-paper~footer{position:relative;z-index:1}
.paper-phrase{position:absolute;z-index:2;color:var(--practice-ink);font:500 clamp(38px,5vw,72px)/1 "Noto Serif JP",serif;letter-spacing:.08em;white-space:nowrap;transform:rotate(var(--phrase-angle,-5deg))}.phrase-progress{left:7%;top:16%;--phrase-angle:-6deg}.phrase-success{right:8%;top:43%;--phrase-angle:4deg}.phrase-best{left:18%;bottom:12%;--phrase-angle:-3deg}.phrase-rise{right:13%;top:12%;--phrase-angle:3deg}.phrase-growth{left:5%;top:52%;--phrase-angle:-4deg}.phrase-resolve{right:6%;bottom:9%;--phrase-angle:5deg}.phrase-rise,.phrase-growth,.phrase-resolve{font-size:clamp(28px,4vw,57px)}
@media(max-width:600px){.wind-practice-paper{left:-10vw;width:120vw}.phrase-progress{left:3%}.phrase-success{right:2%}.phrase-best{left:8%}.phrase-rise{right:3%}.phrase-growth{left:1%}.phrase-resolve{right:1%}}
/* Persistent navigation and learner controls. */
.site-header { position:sticky; top:0; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; width:100%; padding:15px max(24px,calc((100vw - 1180px)/2)); background:color-mix(in srgb,var(--bg) 86%,transparent); border-bottom:1px solid var(--border); backdrop-filter:blur(14px); }
.brand { display:flex; align-items:center; gap:10px; width:max-content; padding:0; background:transparent; border:0; cursor:pointer; text-align:left; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; color:white; background:var(--accent); border-radius:12px; font:25px "Noto Serif JP",serif; box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 30%,transparent); }
.brand strong,.brand small { display:block; }.brand strong{font-size:16px}.brand small{margin-top:2px;color:var(--muted);font-size:10px;font-weight:500}
.main-nav { display:flex; gap:5px; padding:5px; background:var(--surface-2); border-radius:14px; }
.nav-button { padding:9px 18px; background:transparent; border:0; border-radius:10px; color:var(--muted); cursor:pointer; font-weight:700; }
.nav-button.active { color:var(--ink); background:var(--surface); box-shadow:0 3px 12px rgba(40,30,20,.08); }.nav-button span{margin-right:5px;color:var(--accent)}
.theme-picker { position:relative;display:flex;align-items:center;gap:7px;justify-self:end; }.icon-button { display:grid;place-items:center;width:40px;height:40px;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;font-size:20px; }
.theme-menu { position:absolute; top:48px; right:0; width:150px; padding:7px; background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow); }.theme-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px;background:none;border:0;border-radius:8px;cursor:pointer}.theme-menu button:hover{background:var(--surface-2)}
.swatch{width:16px;height:16px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px var(--border)}.swatch.paper{background:#00658f}.swatch.sakura{background:#963b68}.swatch.night{background:#172023}
/* Explore landing area and shared view container. */
main { flex:1 0 auto;width:min(1120px,calc(100% - 40px)); margin:0 auto; }.app-view{animation:fade-in .25s ease}.hero { display:grid; grid-template-columns:1fr 270px; align-items:center; min-height:390px; padding:45px 35px 20px 50px; }
.hero-copy{max-width:730px}.eyebrow,.step-label{margin:0;color:var(--accent-dark);font-size:12px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.hero h1,.quiz-hero h1{margin:12px 0 18px;font:500 clamp(43px,6vw,76px)/.98 "Noto Serif JP",serif;letter-spacing:-.05em}.hero h1 em{color:var(--accent);font-weight:500}.hero-copy>p:last-child,.quiz-hero p{max-width:650px;margin:0;color:var(--muted);font-size:18px;line-height:1.65}.hero-mascot{align-self:end;width:100%;max-height:310px;object-fit:contain;filter:drop-shadow(0 15px 15px rgba(57,40,20,.14))}
.search-panel { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:15px; padding:22px; background:var(--surface); border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow); }.search-form{min-width:0}.search-form label{display:block;margin:0 0 9px;font-weight:800}.search-box{position:relative;min-width:0}.search-box>span{position:absolute;top:50%;left:16px;transform:translateY(-55%);font-size:25px;color:var(--muted)}.search-box input{width:100%;min-width:0;padding:15px 48px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:14px;outline:0;font-size:16px}.search-box input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}.search-form>p{margin:7px 0 0;color:var(--muted);font-size:11px}.clear-search{position:absolute;right:10px;top:8px;width:34px;height:34px;background:none;border:0;cursor:pointer;font-size:22px}.radical-toggle{display:flex;align-items:center;gap:11px;min-width:0;padding:12px;background:var(--surface-2);border:0;border-radius:15px;cursor:pointer;text-align:left}.radical-toggle>:last-child{margin-left:auto}.radical-toggle strong,.radical-toggle small{display:block}.radical-toggle small{margin-top:3px;color:var(--muted)}.radical-icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;background:var(--surface);border-radius:11px;font:23px "Noto Serif JP",serif}
.radical-panel,.browser-section,.quiz-card { margin-top:24px; padding:clamp(22px,4vw,40px); background:var(--surface); border:1px solid var(--border); border-radius:26px; box-shadow:0 10px 35px rgba(55,44,30,.06); }.panel-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.panel-heading h2{margin:6px 0 0;font:500 32px "Noto Serif JP",serif}.text-button{padding:7px 0;color:var(--accent-dark);background:none;border:0;cursor:pointer;font-weight:750}.selected-radicals{display:flex;flex-wrap:wrap;gap:8px;min-height:40px;margin-bottom:16px}.selected-radicals p{margin:8px 0;color:var(--muted);font-size:13px}.selected-radicals button{padding:7px 11px;background:var(--accent-soft);border:0;border-radius:999px;cursor:pointer;font:22px "Noto Serif JP",serif}.selected-radicals span{font:12px "Inter",sans-serif;color:var(--muted)}.radical-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;max-height:370px;overflow:auto;padding:3px}.radical-button{position:relative;display:flex;align-items:center;gap:7px;min-height:54px;padding:8px;background:var(--bg);border:1px solid var(--border);border-radius:11px;cursor:pointer;text-align:left}.radical-button:hover,.radical-button.selected{border-color:var(--accent);background:var(--accent-soft)}.radical-button strong{font:25px "Noto Serif JP",serif}.radical-button span{overflow:hidden;color:var(--muted);font-size:10px;text-overflow:ellipsis}.radical-button small{position:absolute;right:5px;top:4px;color:var(--muted);font-size:8px}
.browser-section{margin-bottom:70px}.result-count{margin:0;color:var(--muted)}.level-filters{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-bottom:26px}.level-chip{padding:12px 8px;background:var(--bg);border:1px solid var(--border);border-radius:12px;cursor:pointer;font-weight:850}.level-chip small{display:block;margin-top:4px;color:var(--muted);font-size:10px;font-weight:500}.level-chip.active{color:white;background:var(--accent);border-color:var(--accent)}.level-chip.active small{color:rgba(255,255,255,.8)}.kanji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:10px}.kanji-tile{position:relative;width:100%;min-height:116px;padding:14px 8px;background:var(--bg);border:1px solid var(--border);border-radius:15px;cursor:pointer;touch-action:manipulation;transition:.15s}.kanji-tile:hover,.kanji-tile:focus-visible{border-color:var(--accent);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 14%,transparent);outline:0;transform:translateY(-2px)}.kanji-tile strong{display:block;font:43px "Noto Serif JP",serif}.kanji-tile span{display:block;overflow:hidden;color:var(--muted);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.kanji-tile small{position:absolute;top:7px;right:8px;color:var(--accent-dark);font-size:9px;font-weight:800}.load-more,.primary-button,.secondary-button{display:block;margin:25px auto 0;padding:13px 22px;border-radius:12px;cursor:pointer;font-weight:800}.load-more,.secondary-button{color:var(--accent-dark);background:var(--surface);border:1px solid var(--accent)}.empty-state{grid-column:1/-1;padding:50px;text-align:center}.empty-state span{font:60px "Noto Serif JP",serif;color:var(--line)}.empty-state h3{margin:10px 0 5px}.empty-state p{margin:0;color:var(--muted)}
.kanji-dialog{width:min(880px,calc(100% - 30px));max-height:90vh;padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.kanji-dialog::backdrop{background:rgba(20,20,20,.5);backdrop-filter:blur(4px)}.dialog-close{position:absolute;z-index:2;right:15px;top:15px;width:38px;height:38px;background:var(--surface-2);border:0;border-radius:50%;cursor:pointer;font-size:25px}.detail-layout{display:grid;grid-template-columns:1.05fr .95fr}.detail-main{padding:45px;text-align:center}.level-badge{display:inline-block;padding:6px 10px;color:var(--accent-dark);background:var(--accent-soft);border-radius:999px;font-size:11px;font-weight:800}.detail-kanji{margin:8px 0 0;font:130px/1 "Noto Serif JP",serif}.detail-main h2{margin:3px 0 28px;font:500 25px "Noto Serif JP",serif}.reading-cards{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--border)}.reading-cards>div{padding:17px 8px}.reading-cards>div+div{border-left:1px solid var(--border)}.reading-cards span,.reading-cards strong{display:block}.reading-cards span{color:var(--muted);font-size:10px;text-transform:uppercase}.reading-cards strong{margin-top:7px;font-size:15px}.help-dot{width:18px;height:18px;padding:0;color:var(--accent-dark);background:var(--accent-soft);border:0;border-radius:50%;cursor:help;font-size:10px}.fact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}.fact-row span{padding:5px 8px;background:var(--bg);border-radius:6px;color:var(--muted);font-size:10px}.connections-card{padding:50px 35px;background:var(--bg)}.connections-card h3{margin:0 0 6px;font-size:14px}.connections-card>p{margin:0 0 15px;color:var(--muted);font-size:12px;line-height:1.5}.connections-card h3:nth-of-type(2){margin-top:26px}.detail-radicals,.related-list{display:flex;flex-wrap:wrap;gap:8px}.detail-radicals button,.related-list button{min-width:62px;padding:9px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer}.detail-radicals button:hover,.related-list button:hover{border-color:var(--accent)}.detail-radicals strong,.related-list strong{display:block;font:27px "Noto Serif JP",serif}.detail-radicals span,.related-list span{display:block;max-width:75px;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
/* Quiz setup, question states, feedback, and results. */
.quiz-hero{display:grid;grid-template-columns:1fr 210px;align-items:center;min-height:310px;padding:45px 70px 10px}.quiz-hero h1{font-size:clamp(40px,5vw,64px)}.quiz-hero img{width:100%;max-height:240px;object-fit:contain}.quiz-card{max-width:900px;margin:10px auto 80px;padding:clamp(25px,5vw,52px)}.quiz-curricula{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.quiz-curriculum{padding:16px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:13px;cursor:pointer}.quiz-curriculum strong,.quiz-curriculum span{display:block}.quiz-curriculum span{margin-top:4px;color:var(--muted);font-size:11px}.quiz-curriculum.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.quiz-levels{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0 35px}.quiz-grade-levels{grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}.quiz-level,.quiz-mode{padding:16px 10px;background:var(--bg);border:1px solid var(--border);border-radius:13px;cursor:pointer}.quiz-level strong,.quiz-level span,.quiz-mode strong,.quiz-mode small{display:block}.quiz-level strong{font-size:20px}.quiz-level span,.quiz-mode small{margin-top:4px;color:var(--muted);font-size:10px}.quiz-level.active,.quiz-mode.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.quiz-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 30px}.quiz-mode>span{display:block;margin-bottom:8px;color:var(--accent-dark);font:30px "Noto Serif JP",serif}.primary-button{color:white;background:var(--accent);border:0}.primary-button span{margin-left:15px}.question-card{max-width:720px;text-align:center}.quiz-progress{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;color:var(--muted);font-size:12px}.quiz-progress>div{height:7px;overflow:hidden;background:var(--surface-2);border-radius:99px}.quiz-progress i{display:block;width:0;height:100%;background:var(--accent);border-radius:99px;transition:width .3s}.quiz-prompt{margin:45px 0 5px;color:var(--muted)}.question-kanji{margin:0 0 35px;font:130px/1.1 "Noto Serif JP",serif}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.answer-grid button{min-height:58px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:12px;cursor:pointer;font-weight:700}.answer-grid button:hover:not(:disabled){border-color:var(--accent)}.answer-grid button.correct{color:#335c31;background:#e1f0db;border-color:#6b9860}.answer-grid button.incorrect{color:#8a332b;background:#f7ddd8;border-color:#cc7469}.feedback{margin-top:18px;padding:15px;border-radius:12px;font-size:13px}.feedback.good{background:#e1f0db;color:#335c31}.feedback.try-again{background:var(--accent-soft);color:var(--accent-dark)}.results-card{text-align:center}.results-card img{width:170px;height:170px;object-fit:contain}.results-card h2{margin:4px;font:500 45px "Noto Serif JP",serif}.results-card p{color:var(--muted)}.results-card>div{display:flex;justify-content:center;gap:10px}.results-card .primary-button,.results-card .secondary-button{margin:18px 0 0}
.advanced-quiz-levels{grid-template-columns:repeat(5,1fr)}.quiz-level:disabled{cursor:not-allowed;opacity:.55}.knockout-level{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 28%,transparent)}.knockout-level span{color:rgba(255,255,255,.82)}
.question-kanji.word-question{display:flex;flex-wrap:wrap;justify-content:center;font-size:clamp(52px,10vw,100px)}.question-kanji .question-target{color:var(--accent-dark);background:var(--accent-soft);box-shadow:inset 0 -4px 0 var(--accent);border-radius:8px}
.site-credits{padding:52px max(24px,calc((100% - 1120px)/2));color:var(--muted);background:var(--surface-2);border-top:1px solid var(--border)}.credits-inner{display:grid;gap:25px;width:100%;max-width:1120px;margin:auto}.credits-heading{display:grid;grid-template-columns:auto minmax(260px,.8fr) minmax(300px,1fr);align-items:center;gap:20px;text-align:left}.credits-heading>span{display:grid;place-items:center;width:76px;height:76px;color:white;background:var(--accent);border-radius:22px;font:700 16px "Noto Serif JP",serif;box-shadow:0 10px 25px color-mix(in srgb,var(--accent) 22%,transparent);transform:rotate(-3deg)}.credits-heading .eyebrow{margin:0 0 5px}.credits-heading h2{margin:0;color:var(--ink);font:500 30px/1.08 "Noto Serif JP",serif}.credits-heading>p{margin:0;font-size:12px;line-height:1.7}.credits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:left}.credits-grid article{display:flex;flex-direction:column;min-width:0;padding:17px;background:var(--surface);border:1px solid var(--border);border-radius:14px}.credits-grid strong{color:var(--ink);font-size:12px}.credits-grid p{flex:1;margin:7px 0 13px;font-size:10px;line-height:1.6}.credits-grid a,.credits-legal a{width:max-content;max-width:100%;color:var(--accent-dark);font-size:10px;font-weight:800;text-underline-offset:3px}.credits-legal{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;border-top:1px solid var(--border);text-align:left}.credits-legal p{max-width:520px;margin:0;font-size:9px;line-height:1.55}.credits-legal nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 15px}.toast{position:fixed;z-index:50;right:24px;bottom:24px;max-width:340px;padding:15px 18px;color:white;background:#283033;border-radius:13px;box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(15px);transition:.2s}.toast.visible{opacity:1;transform:none}@keyframes fade-in{from{opacity:0;transform:translateY(5px)}}
@media(max-width:900px){.credits-heading{grid-template-columns:auto 1fr}.credits-heading>p{grid-column:1/-1}.credits-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.site-credits{padding:38px 18px}.credits-heading{grid-template-columns:1fr}.credits-heading>span{width:68px;height:68px}.credits-heading h2{font-size:26px}.credits-grid{grid-template-columns:1fr}.credits-legal{align-items:flex-start;flex-direction:column}.credits-legal nav{justify-content:flex-start}}
@media(max-width:760px){.site-header{grid-template-columns:1fr auto;padding-bottom:10px}.main-nav{grid-column:1/-1;grid-row:2;justify-content:center;width:100%}.nav-button{flex:1}.theme-picker{grid-column:2;grid-row:1}.hero{grid-template-columns:minmax(0,1fr);padding:42px 5px 15px;text-align:center}.hero-copy{min-width:0}.hero h1 br{display:none}.hero-mascot{width:190px;margin:10px auto 0}.search-panel{grid-template-columns:minmax(0,1fr);overflow:hidden}.radical-toggle{width:100%}.level-filters{display:flex;overflow:auto}.level-chip{min-width:105px}.kanji-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}.detail-layout{grid-template-columns:1fr}.detail-main{padding:40px 24px 25px}.connections-card{padding:25px}.quiz-hero{grid-template-columns:1fr;padding:45px 10px 10px;text-align:center}.quiz-hero img{display:none}.quiz-levels{display:flex;overflow:auto}.quiz-level{min-width:105px}.quiz-modes{grid-template-columns:1fr}.answer-grid{grid-template-columns:1fr}.question-kanji{font-size:100px}}
@media(max-width:600px){main{width:min(calc(100% - 24px),1120px)}.site-header{padding-inline:12px}.brand small{display:none}.hero{min-width:0;padding-inline:0}.hero-copy{min-width:0;max-width:100%}.hero h1{max-width:100%;font-size:34px;line-height:1.05;overflow-wrap:anywhere}.hero h1 em{display:block;max-width:100%;margin-top:4px;white-space:normal}.hero-copy>p:last-child{font-size:15px}.search-panel{width:100%;min-width:0;padding-inline:14px}.browser-section,.radical-panel,.quiz-card{padding:20px 14px;border-radius:20px}.browser-heading{align-items:start;flex-direction:column}.kanji-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.kanji-tile{min-width:0;min-height:104px}.kanji-tile strong{font-size:37px}.reading-cards{grid-template-columns:1fr}.reading-cards>div+div{border-top:1px solid var(--border);border-left:0}.results-card>div{align-items:center;flex-direction:column}}

/* Stroke counts and Kenta's drawing studio */
.kanji-tile em{display:block;margin-top:6px;color:var(--accent-dark);font-size:9px;font-style:normal;font-weight:750}.radical-button small{color:var(--accent-dark);font-weight:800}.detail-radicals em,.related-list em{display:block;margin-top:4px;color:var(--accent-dark);font-size:8px;font-style:normal;font-weight:800}.detail-radicals span,.related-list span{max-width:90px}.empty-state{display:flex;align-items:center;justify-content:center;gap:25px;padding:35px;text-align:left}.empty-state img{width:150px;height:150px;object-fit:contain}.empty-state h3{max-width:390px;font:500 25px "Noto Serif JP",serif}
.draw-hero{display:grid;grid-template-columns:1fr 250px;align-items:center;min-height:340px;padding:45px 55px 15px}.draw-hero h1{margin:12px 0 18px;font:500 clamp(42px,5vw,66px)/1 "Noto Serif JP",serif;letter-spacing:-.045em}.draw-hero h1 em{color:var(--accent);font-weight:500}.draw-hero p:last-child{max-width:610px;color:var(--muted);font-size:17px;line-height:1.6}.draw-hero img{width:100%;max-height:270px;object-fit:contain}.drawing-workspace{display:grid;grid-template-columns:270px 1fr;gap:20px;margin:10px 0 75px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow)}.drawing-sidebar{min-width:0;padding:18px;background:var(--bg);border-radius:19px}.drawing-sidebar>label{display:block;margin-bottom:8px;font-size:12px;font-weight:800}.drawing-sidebar>input{width:100%;padding:11px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px;outline:0}.drawing-sidebar>input:focus{border-color:var(--accent)}.draw-level-row{display:flex;gap:4px;margin:12px 0}.draw-level-row button{flex:1;padding:7px 2px;background:var(--surface);border:1px solid var(--border);border-radius:7px;cursor:pointer;font-size:10px;font-weight:800}.draw-level-row button.active{color:white;background:var(--accent);border-color:var(--accent)}.draw-kanji-list{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;max-height:510px;overflow:auto;padding-right:3px}.draw-kanji-list button{position:relative;aspect-ratio:1;padding:3px;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer}.draw-kanji-list button:hover,.draw-kanji-list button.active{border-color:var(--accent);background:var(--accent-soft)}.draw-kanji-list strong{font:24px "Noto Serif JP",serif}.draw-kanji-list span{position:absolute;right:3px;bottom:2px;color:var(--muted);font-size:7px}.practice-area{min-width:0;padding:16px clamp(5px,3vw,35px) 22px}.practice-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.practice-heading h2{display:inline-block;margin:4px 12px 0 0;font:55px "Noto Serif JP",serif}.practice-heading p{display:inline;color:var(--muted)}.stroke-goal{text-align:right}.stroke-goal strong,.stroke-goal span{display:block}.stroke-goal strong{color:var(--accent);font:42px "Noto Serif JP",serif}.stroke-goal span{color:var(--muted);font-size:10px;text-transform:uppercase}.canvas-wrap{position:relative;width:min(100%,560px);aspect-ratio:1;margin:15px auto;overflow:hidden;touch-action:none;background:var(--surface);border:2px solid var(--border);border-radius:16px}.grid-lines{position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));opacity:.7}.grid-lines::after{position:absolute;inset:8%;border:1px dashed var(--line);content:""}.trace-character{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--ink) 12%,transparent);font:clamp(220px,35vw,390px)/1 "Noto Serif JP",serif;user-select:none}.canvas-wrap canvas{position:absolute;z-index:2;inset:0;cursor:crosshair;touch-action:none}.stroke-progress{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;max-width:560px;margin:0 auto;color:var(--muted);font-size:11px}.stroke-progress>div{height:7px;overflow:hidden;background:var(--surface-2);border-radius:99px}.stroke-progress i{display:block;width:0;height:100%;background:var(--accent);border-radius:99px;transition:width .2s}.drawing-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}.drawing-controls .primary-button,.drawing-controls .secondary-button{margin:0;padding:10px 14px}.drawing-feedback{max-width:560px;margin:15px auto 0;padding:14px;border-radius:11px;font-size:13px}.drawing-feedback.good{color:#335c31;background:#e1f0db}.drawing-feedback.try-again{color:var(--accent-dark);background:var(--accent-soft)}.drawing-note{max-width:560px;margin:12px auto 0;color:var(--muted);font-size:10px;line-height:1.5;text-align:center}
@media(max-width:760px){.nav-button{padding-inline:8px}.draw-hero{grid-template-columns:1fr;padding:45px 10px 15px;text-align:center}.draw-hero img{width:190px;margin:auto}.drawing-workspace{grid-template-columns:1fr}.drawing-sidebar{padding:13px}.draw-kanji-list{display:flex;max-height:none;overflow:auto}.draw-kanji-list button{flex:0 0 52px}.practice-area{padding-inline:5px}.empty-state{flex-direction:column;text-align:center}}

/* Expanded learning details and stroke-order reference */
.level-filters{grid-template-columns:repeat(6,1fr)}.detail-explanation{margin:-14px 0 22px;color:var(--muted);font-size:12px;line-height:1.65;text-align:left}.reading-cards small{display:block;margin-top:4px;color:var(--accent-dark);font-size:10px;font-weight:750}.word-examples{display:grid;gap:7px}.word-examples>div{display:grid;grid-template-columns:auto 1fr;gap:1px 9px;padding:9px;background:var(--surface);border:1px solid var(--border);border-radius:9px}.word-examples strong{grid-row:1/3;font:25px "Noto Serif JP",serif}.word-examples span{font-size:11px}.word-examples em{color:var(--accent-dark);font-size:10px;font-style:normal;font-weight:750}.word-examples small{grid-column:1/-1;margin-top:3px;color:var(--muted);font-size:9px}.word-examples p{margin:0;color:var(--muted);font-size:11px}
.reading-label{margin-bottom:10px}.reading-list{display:grid;gap:6px}.reading-pair{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:7px;text-align:left}.reading-pair strong{font-size:15px}.reading-pair small{margin:0;color:var(--accent-dark);font-size:11px}.reading-list>p{margin:0;color:var(--muted);font-size:11px}.radical-button.selected:focus{outline:3px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:2px}
.stroke-reference-card{display:grid;grid-template-columns:1fr 170px auto;align-items:center;gap:16px;max-width:560px;margin:10px auto 16px;padding:12px 15px;background:var(--bg);border:1px solid var(--border);border-radius:14px}.stroke-reference-card>div:first-child strong,.stroke-reference-card>div:first-child span{display:block}.stroke-reference-card>div:first-child span{margin-top:4px;color:var(--muted);font-size:10px}.stroke-reference{display:grid;place-items:center;width:170px;height:130px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.stroke-reference svg{width:120px;height:120px}.stroke-path{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.22;transition:stroke .2s,opacity .2s}.stroke-path.revealed{stroke:var(--ink);opacity:1}.stroke-path.current{stroke:var(--accent);stroke-width:4}.stroke-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px}.stroke-controls button{padding:7px;background:var(--surface);border:1px solid var(--border);border-radius:7px;cursor:pointer;font-size:11px}.stroke-controls button:nth-child(2){grid-column:1/-1;grid-row:1}.stroke-controls button:hover{border-color:var(--accent)}.guide-loading{padding:10px;color:var(--muted);font-size:10px;text-align:center}
.drawing-guide-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;max-width:560px;margin:12px auto 4px}.drawing-guide-bar .secondary-button{margin:0}.drawing-guide-bar span{color:var(--muted);font-size:10px}.drawing-board-guide{position:absolute;z-index:1;inset:0;pointer-events:none}.drawing-board-guide svg{display:block;width:100%;height:100%}.board-stroke-path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.62}.board-stroke-number{fill:var(--accent-dark);font:700 7px "Inter",sans-serif;paint-order:stroke;stroke:var(--surface);stroke-width:2px}.drawing-board-guide marker path{fill:var(--accent)}
.drawing-answer{display:flex;align-items:center;gap:14px}.drawing-answer-character{flex:0 0 auto;font:52px/1 "Noto Serif JP",serif}
.quiz-modes{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}
.quiz-lengths{display:flex;gap:10px;margin:14px 0 25px}.quiz-length{min-width:72px;padding:12px 18px;border:1px solid var(--border);border-radius:12px;background:var(--bg);font-weight:800;cursor:pointer}.quiz-length.active{color:var(--accent-dark);border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.quiz-actions{display:grid;gap:18px}.mistake-review{display:flex;align-items:center;gap:12px;padding:15px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.mistake-review>span{display:grid;margin-right:auto}.mistake-review small{margin-top:3px;color:var(--muted)}.mistake-review button{white-space:nowrap}.text-button{border:0;background:transparent;color:var(--muted);cursor:pointer}.text-button:disabled{opacity:.45;cursor:not-allowed}.question-card{position:relative}.quit-quiz{display:block;margin:0 0 20px auto;padding:8px 13px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:10px;cursor:pointer}.quit-quiz:hover{color:var(--accent-dark);border-color:var(--accent)}
@media(max-width:760px){.quiz-curricula{grid-template-columns:1fr}.quiz-lengths{display:grid;grid-template-columns:repeat(4,1fr)}.quiz-length{min-width:0;padding-inline:8px}.mistake-review{align-items:stretch;flex-wrap:wrap}.mistake-review>span{width:100%}}
/* Kanji Tree branching visualization and connected vocabulary. */
.tree-hero{display:grid;grid-template-columns:minmax(0,1fr) 250px;align-items:center;max-width:1180px;min-height:330px;margin:auto;padding:55px 35px 20px}.tree-hero h1{margin:8px 0 15px;font:500 clamp(42px,6vw,72px)/.98 "Noto Serif JP",serif}.tree-hero h1 em{color:var(--accent);font-weight:500}.tree-hero p:not(.eyebrow){max-width:650px;color:var(--muted);line-height:1.7}.tree-hero img{width:100%;max-height:250px;object-fit:contain}.tree-workspace{max-width:1100px;margin:0 auto 80px;padding:0 25px}.tree-search-card,.tree-words-card{padding:25px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.tree-search-card>label{display:block;margin-bottom:9px;font-weight:800}.tree-search-row{display:grid;grid-template-columns:1fr auto;gap:10px}.tree-search-row input{min-width:0;padding:14px 16px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:12px}.tree-starters{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:13px;color:var(--muted);font-size:12px}.tree-starters button{width:36px;height:36px;background:var(--bg);border:1px solid var(--border);border-radius:9px;cursor:pointer;font:21px "Noto Serif JP",serif}.tree-note{margin:16px 0 0;padding-top:14px;color:var(--muted);border-top:1px solid var(--border);font-size:12px;line-height:1.55}.tree-path{display:flex;align-items:center;gap:8px;overflow:auto;padding:25px 3px 15px}.tree-path button{display:flex;align-items:center;gap:7px;padding:8px 11px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer}.tree-path button strong{font:24px "Noto Serif JP",serif}.tree-path button span{color:var(--muted);font-size:10px}.tree-path i{color:var(--accent);font-style:normal}.tree-stage{padding:30px;background:color-mix(in srgb,var(--surface) 76%,transparent);border:1px solid var(--border);border-radius:24px}.tree-root-card{max-width:350px;margin:auto;padding:25px;text-align:center;background:var(--surface);border:2px solid var(--accent);border-radius:20px;box-shadow:var(--shadow)}.tree-root-card>strong{display:block;margin:9px 0 2px;font:76px/1 "Noto Serif JP",serif}.tree-root-card h2{margin:0;font:500 20px "Noto Serif JP",serif}.tree-root-card p{color:var(--muted);font-size:12px}.tree-connector{height:45px}.tree-connector span{display:block;width:2px;height:100%;margin:auto;background:var(--accent)}.tree-branches{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}.tree-branches:before{content:"";position:absolute;left:8%;right:8%;top:-1px;height:2px;background:var(--accent)}.tree-branch-card{position:relative;padding:20px 13px 16px;text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;cursor:pointer;transition:transform .2s,border-color .2s}.tree-branch-card:before{content:"";position:absolute;left:50%;top:-13px;width:2px;height:13px;background:var(--accent)}.tree-branch-card:hover{transform:translateY(-3px);border-color:var(--accent)}.tree-branch-card>span{display:inline-block;padding:4px 7px;color:var(--accent-dark);background:var(--accent-soft);border-radius:99px;font-size:9px;font-weight:800}.tree-branch-card>strong{display:block;margin:8px;font:52px/1 "Noto Serif JP",serif}.tree-branch-card h3{min-height:34px;margin:0;font:500 14px/1.25 "Noto Serif JP",serif}.tree-branch-card small,.tree-branch-card em{display:block;margin-top:7px;color:var(--muted);font-size:9px;font-style:normal}.tree-branch-card em{color:var(--accent-dark);font-weight:800}.tree-leaf{grid-column:1/-1;padding:28px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:15px}.tree-leaf p{max-width:600px;margin:8px auto 0;color:var(--muted);line-height:1.6}.tree-words-card{display:grid;grid-template-columns:1fr 1.6fr;gap:25px;margin-top:22px}.tree-words-card h2{margin:5px 0;font:500 27px "Noto Serif JP",serif}.tree-words-card>div>p:not(.eyebrow){color:var(--muted);font-size:12px;line-height:1.6}.tree-word-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tree-word-list article{display:grid;padding:13px;background:var(--bg);border-radius:12px}.tree-word-list strong{font:24px "Noto Serif JP",serif}.tree-word-list span{font-size:12px}.tree-word-list em{color:var(--accent-dark);font-size:10px;font-style:normal}.tree-word-list small{margin-top:6px;color:var(--muted);line-height:1.3}
@media(max-width:760px){.site-header{gap:10px}.main-nav{overflow:auto;justify-content:flex-start}.nav-button{min-width:max-content;padding-inline:12px}.tree-hero{grid-template-columns:1fr;padding:40px 25px 15px;text-align:center}.tree-hero img{display:none}.tree-search-row{grid-template-columns:1fr}.tree-stage{padding:22px 12px}.tree-branches{grid-template-columns:repeat(2,1fr)}.tree-words-card{grid-template-columns:1fr}.tree-word-list{grid-template-columns:1fr}.tree-branch-card h3{min-height:0}}
.detail-actions{display:grid;gap:8px;margin-top:20px}.detail-actions button{width:100%;margin:0;padding:11px 13px}.detail-actions button:disabled{opacity:.7;cursor:default}.saved-practice{background:color-mix(in srgb,var(--accent-soft) 42%,var(--surface-2))}
/* Kenta's Corner: frequency cards, kana charts, and expandable script history. */
.corner-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;min-height:360px;padding:55px 35px 20px}.corner-hero h1{margin:8px 0 15px;font:500 clamp(40px,5.7vw,68px)/1 "Noto Serif JP",serif}.corner-hero h1 em{color:var(--accent);font-weight:500}.corner-hero p:not(.eyebrow){max-width:680px;color:var(--muted);line-height:1.7}.corner-hero img{width:100%;max-height:260px;object-fit:contain}.corner-section{margin:0 0 25px;padding:clamp(22px,4vw,40px);background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:0 10px 35px rgba(55,44,30,.06)}.corner-section:last-child{margin-bottom:80px}.corner-intro{margin:-8px 0 22px;color:var(--muted);font-size:13px;line-height:1.65}.frequency-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:9px}.frequency-card{display:grid;grid-template-columns:42px 52px 1fr;align-items:center;gap:7px;min-height:76px;padding:10px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:13px;cursor:pointer}.frequency-card:hover{border-color:var(--accent);transform:translateY(-1px)}.frequency-card>span{align-self:start;color:var(--accent-dark);font-size:9px;font-weight:800}.frequency-card>strong{font:38px "Noto Serif JP",serif}.frequency-card div{display:grid;min-width:0}.frequency-card b{overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.frequency-card small{margin-top:5px;color:var(--muted);font-size:9px}.kana-key{display:grid;grid-template-columns:1fr 1fr 1.3fr;max-width:330px;margin:0 0 7px;padding:0 11px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.kana-chart{display:grid;grid-template-columns:repeat(5,minmax(100px,1fr));gap:7px}.kana-cell{display:grid;grid-template-columns:1fr 1fr 1.3fr;align-items:center;min-height:57px;padding:8px 11px;background:var(--bg);border:1px solid var(--border);border-radius:11px}.kana-cell strong{font:25px "Noto Serif JP",serif}.kana-cell span{color:var(--accent-dark);font-size:11px;font-weight:800}.kana-more{margin-top:15px;border:1px solid var(--border);border-radius:14px;overflow:hidden}.kana-more summary{padding:15px 18px;background:var(--surface-2);cursor:pointer;font-weight:800}.kana-more .kana-chart{padding:15px}.history-timeline{display:grid;gap:0}.history-timeline article{display:grid;grid-template-columns:48px 1fr;gap:17px;position:relative;padding-bottom:28px}.history-timeline article:not(:last-child):before{content:"";position:absolute;left:23px;top:43px;bottom:0;width:2px;background:var(--border)}.history-timeline article>span{display:grid;place-items:center;width:46px;height:46px;color:white;background:var(--accent);border-radius:50%;font-weight:900}.history-timeline h3{margin:3px 0 7px;font:500 23px "Noto Serif JP",serif}.history-timeline p{max-width:820px;margin:0;color:var(--muted);font-size:13px;line-height:1.75}
@media(max-width:900px){.kana-chart{grid-template-columns:repeat(3,minmax(100px,1fr))}}
@media(max-width:760px){.corner-hero{grid-template-columns:1fr;padding:40px 20px 18px;text-align:center}.corner-hero img{display:none}.kana-chart{grid-template-columns:repeat(2,minmax(0,1fr))}.kana-more .kana-chart{padding:9px}.kana-cell{padding-inline:8px}.history-timeline article{grid-template-columns:38px 1fr;gap:12px}.history-timeline article>span{width:38px;height:38px}.history-timeline article:not(:last-child):before{left:18px;top:37px}.history-timeline h3{font-size:19px}}
.sorting-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sorting-guide article{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:15px;background:var(--bg);border:1px solid var(--border);border-radius:13px}.sorting-guide article>span{display:grid;place-items:center;width:32px;height:32px;color:white;background:var(--green);border-radius:50%;font-size:11px;font-weight:900}.sorting-guide h3{margin:3px 0 6px;font-size:13px}.sorting-guide p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.sorting-example{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:16px;padding:16px;background:var(--surface-2);border-radius:13px}.sorting-example>strong{width:100%;font-size:12px}.sorting-example>span{display:grid;padding:8px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.sorting-example b{font:22px "Noto Serif JP",serif}.sorting-example small{color:var(--muted);font-size:9px}.sorting-example>i{color:var(--accent);font-style:normal;font-weight:900}.sorting-note{margin:14px 0 0;color:var(--muted);font-size:10px;line-height:1.55}@media(max-width:760px){.sorting-guide{grid-template-columns:1fr}}
.corner-accordion{padding:0;overflow:hidden}.corner-accordion>summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px clamp(22px,4vw,40px);cursor:pointer;list-style:none}.corner-accordion>summary::-webkit-details-marker{display:none}.corner-accordion>summary span{display:grid;gap:5px}.corner-accordion>summary small{color:var(--accent-dark);font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.corner-accordion>summary strong{font:500 27px "Noto Serif JP",serif}.corner-accordion>summary>i{padding:7px 11px;color:var(--green);background:color-mix(in srgb,var(--green) 11%,var(--surface));border-radius:999px;font-size:10px;font-style:normal;font-weight:850}.corner-accordion>summary>i:before{content:"＋ "}.corner-accordion[open]>summary{background:var(--surface-2);border-bottom:1px solid var(--border)}.corner-accordion[open]>summary>i:before{content:"− "}.corner-accordion[open]>summary>i{font-size:0}.corner-accordion[open]>summary>i:after{content:"Close";font-size:10px}.corner-accordion-body{padding:28px clamp(22px,4vw,40px) clamp(22px,4vw,40px)}.gojuon-order{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:18px;padding:16px;background:var(--surface-2);border-radius:14px}.gojuon-order>strong{grid-column:1/-1;margin-bottom:2px;font-size:12px}.gojuon-order p{margin:0;padding:8px;text-align:center;background:var(--surface);border-radius:8px;font:16px "Noto Serif JP",serif;word-spacing:5px}.sorting-rules{margin-top:18px}.sorting-rules h3{margin:0 0 9px;font-size:14px}.sorting-rules dl{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0}.sorting-rules dl>div{padding:13px;background:var(--bg);border:1px solid var(--border);border-radius:11px}.sorting-rules dt{font-size:11px;font-weight:850}.sorting-rules dd{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.5}@media(max-width:760px){.corner-accordion>summary strong{font-size:21px}.gojuon-order{grid-template-columns:repeat(2,1fr)}.sorting-rules dl{grid-template-columns:1fr}}
.corner-history-toggle{margin:0 0 24px}.corner-history-toggle>summary{width:max-content;padding:9px 14px;color:var(--accent-dark);background:var(--surface);border:1px solid var(--accent);border-radius:999px;cursor:pointer;font-size:12px;font-weight:850;list-style-position:inside}.corner-history-toggle>summary:hover{background:var(--accent-soft)}.corner-history-toggle[open]>summary{margin-bottom:12px}.corner-history-toggle .history-section{margin-bottom:0}.history-sources{display:grid;gap:8px;margin:5px 0 0 63px;padding:18px;background:var(--accent-soft);border-radius:14px}.history-sources strong{font-size:13px}.history-sources a{width:max-content;max-width:100%;color:var(--accent-dark);font-size:12px;font-weight:750;text-underline-offset:3px}@media(max-width:760px){.history-sources{margin-left:0}}
.kana-sorter{margin:18px 0 24px;padding:18px;background:var(--surface-2);border:1px solid var(--border);border-radius:15px}.kana-sorter h3{margin:0 0 5px}.kana-sorter>div>p{margin:0 0 14px;color:var(--muted);font-size:12px}.kana-sorter label{display:block;margin-bottom:6px;font-size:11px;font-weight:800}.kana-sort-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.kana-sort-row input{min-width:0;padding:12px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px}.kana-sort-row input:focus{border-color:var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 16%,transparent)}.kana-sort-row .primary-button{margin:0}.kana-sort-result{min-height:22px;margin:12px 0 0;color:var(--accent-dark);font-size:15px;font-weight:750;line-height:1.5}.kana-sort-result.error{color:var(--error-ink)}@media(max-width:600px){.kana-sort-row{grid-template-columns:1fr}.kana-sort-row .primary-button{width:100%}}
/* Local account dialog, belt journey, and rank-aware Kenta artwork. */
.account-button{display:flex;align-items:center;gap:7px;max-width:145px;padding:8px 10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;font-size:11px;font-weight:800}.account-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scarf-mark{display:block;width:25px;height:8px;background:var(--belt-color,#f4f0e6);border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12)}.belt-dojo{margin-bottom:32px;padding:22px;background:linear-gradient(135deg,var(--surface-2),var(--accent-soft));border:1px solid var(--border);border-radius:18px}.belt-dojo h2{margin:5px 0;font:500 29px "Noto Serif JP",serif}.belt-dojo>div>p:not(.eyebrow){margin:5px 0 15px;color:var(--muted);font-size:12px}.belt-track{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.belt-track div{display:grid;justify-items:center;gap:3px;padding:9px 4px;opacity:.42;background:var(--surface);border:1px solid var(--border);border-radius:10px}.belt-track div.earned{opacity:1;border-color:var(--accent)}.belt-track i{width:48px;height:10px;background:var(--track-belt);border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:2px}.belt-track strong{font-size:10px}.belt-track small{color:var(--muted);font-size:8px}.belt-dojo>.primary-button{margin:18px 0 7px}.belt-dojo>small{display:block;color:var(--muted);font-size:10px;line-height:1.5}.account-dialog{width:min(820px,calc(100% - 28px));padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.account-dialog::backdrop{background:rgba(20,20,20,.55);backdrop-filter:blur(4px)}.account-layout{display:grid;grid-template-columns:270px 1fr;gap:25px;padding:45px 38px 35px}.account-layout h2{margin:5px 0;font:500 34px "Noto Serif JP",serif}.account-note{color:var(--muted);font-size:12px;line-height:1.6}.account-kenta{position:relative;align-self:center}.account-kenta img{display:block;width:100%;max-height:320px;object-fit:contain}.account-scarf{position:absolute;z-index:2;left:27%;right:20%;top:47%;height:18px;background:var(--belt-color,#f4f0e6);border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);border-radius:50%;transform:rotate(-5deg);box-shadow:0 3px 5px rgba(0,0,0,.16)}.account-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.account-stats>div{padding:14px;background:var(--bg);border-radius:12px}.account-stats strong,.account-stats span{display:block}.account-stats strong{font-size:18px}.account-stats span{margin-top:3px;color:var(--muted);font-size:9px}.mastery-progress>span{display:block;margin-bottom:6px;color:var(--muted);font-size:10px}.mastery-progress>div{height:8px;overflow:hidden;background:var(--surface-2);border-radius:99px}.mastery-progress i{display:block;width:0;height:100%;background:var(--belt-color);border-radius:99px;transition:width .25s}.account-layout h3{margin:23px 0 8px;font-size:12px}.account-list{display:grid;gap:7px;max-height:145px;overflow:auto}.account-list button{display:flex;align-items:center;gap:10px;padding:9px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer}.account-list button.active{border-color:var(--accent);background:var(--accent-soft)}.account-list button>i{width:32px;height:9px;background:var(--profile-belt);border:1px solid var(--border);border-radius:2px}.account-list span,.account-list strong,.account-list small{display:block}.account-list small{margin-top:2px;color:var(--muted);font-size:9px}.account-create{margin-top:14px}.account-create label{display:block;margin-bottom:6px;font-size:10px;font-weight:800}.account-create>div{display:grid;grid-template-columns:1fr auto;gap:7px}.account-create input{min-width:0;padding:10px 12px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:10px}.account-create .primary-button{margin:0;padding:10px 14px}
@media(max-width:760px){.account-button span{display:none}.account-button{padding:11px 8px}.account-layout{grid-template-columns:1fr;padding:38px 20px 25px}.account-kenta{display:none}.belt-track{grid-template-columns:repeat(3,1fr)}}
.account-scarf{display:none!important}
.account-auth-forms{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.account-auth-form{display:grid;gap:7px;padding:15px;background:var(--bg);border:1px solid var(--border);border-radius:13px}.account-auth-form h3{margin:0 0 4px}.account-auth-form label{font-size:10px;font-weight:800}.account-auth-form input{min-width:0;padding:10px 11px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:9px}.account-auth-form input:focus{border-color:var(--accent);outline:3px solid color-mix(in srgb,var(--accent) 16%,transparent)}.account-auth-form .primary-button{margin-top:6px}.account-message{min-height:18px;margin:8px 0 0;color:#a13d32;font-size:11px;font-weight:750}.account-logout{margin-top:16px}.account-auth-forms[hidden],#account-profile[hidden]{display:none}@media(max-width:760px){.account-auth-forms{grid-template-columns:1fr}}
.account-auth-form .account-attestation{display:flex;align-items:flex-start;gap:9px;margin-top:6px;font-size:10px;font-weight:650;line-height:1.45;cursor:pointer}.account-auth-form .account-attestation input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;padding:0;accent-color:var(--accent)}
.quiz-preference-actions{margin-top:14px;padding:13px;background:var(--bg);border:1px solid var(--border);border-radius:13px}.quiz-preference-actions>span{display:block;margin-bottom:9px;color:var(--muted);font-size:10px;font-weight:650}.quiz-preference-actions>div{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.quiz-preference-actions button{margin:0;padding:8px 10px;font-size:10px}.quiz-preference-actions button.active{color:#fff;background:var(--accent);border-color:var(--accent)}
.private-study-hero{display:grid;grid-template-columns:minmax(0,1fr) 240px;align-items:center;gap:35px;min-height:330px;padding:50px 45px 25px}.private-study-hero h1{margin:8px 0 14px;font:500 clamp(44px,6vw,70px)/1 "Noto Serif JP",serif}.private-study-hero p:not(.eyebrow){max-width:670px;color:var(--muted);font-size:16px;line-height:1.65}.private-study-hero img{width:100%;max-height:250px;object-fit:contain}.private-study-start{display:flex;align-items:center;flex-wrap:wrap;gap:13px;margin-top:20px}.private-study-start .primary-button{margin:0}.private-study-start span{color:var(--muted);font-size:11px}.private-study-library{margin:0 0 75px;padding:clamp(22px,4vw,38px);background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}.private-study-filters{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.private-study-filters button{padding:8px 12px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:10px;font-weight:800}.private-study-filters button.active{color:#fff;background:var(--accent);border-color:var(--accent)}.private-study-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}.private-study-card{overflow:hidden;background:var(--bg);border:1px solid var(--border);border-radius:15px}.private-study-card.preference-more{border-color:var(--accent)}.private-study-card.preference-hidden{opacity:.68}.private-study-card-open{display:grid;grid-template-columns:auto 1fr;gap:2px 11px;width:100%;padding:14px;text-align:left;background:transparent;border:0;cursor:pointer}.private-study-card-open strong{grid-row:1/3;font:38px/1 "Noto Serif JP",serif}.private-study-card-open span{align-self:end;overflow:hidden;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.private-study-card-open small{color:var(--accent-dark);font-size:9px;font-weight:800}.private-study-card-choices{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:4px;padding:8px;border-top:1px solid var(--border)}.private-study-card-choices button{padding:6px 4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:8px;font-weight:750}.private-study-card-choices button.active{color:#fff;background:var(--accent);border-color:var(--accent)}.private-study-card-choices .private-study-remove{color:#a13d32;background:transparent;border-color:transparent}.private-study-empty{grid-column:1/-1;margin:0;padding:35px;color:var(--muted);text-align:center;background:var(--bg);border-radius:14px}
.private-study-preferences{margin:0 0 20px;padding:clamp(22px,4vw,38px);background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}.private-study-preference-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.private-study-preference-columns>article{padding:16px;background:var(--bg);border:1px solid var(--border);border-radius:15px}.private-study-preference-columns header{display:flex;align-items:center;gap:10px;margin-bottom:13px}.private-study-preference-columns header>span{display:grid;place-items:center;width:34px;height:34px;color:var(--accent-dark);background:var(--accent-soft);border-radius:50%;font-weight:900}.private-study-preference-columns h3,.private-study-preference-columns p{margin:0}.private-study-preference-columns h3{font-size:14px}.private-study-preference-columns header p{margin-top:2px;color:var(--muted);font-size:9px}.private-study-preference-list{display:flex;flex-wrap:wrap;gap:7px;min-height:43px}.private-study-preference-list>p{align-self:center;color:var(--muted);font-size:10px;line-height:1.45}.private-study-preference-list button{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--surface);border:1px solid var(--border);border-radius:9px;cursor:pointer}.private-study-preference-list button:hover{border-color:var(--accent)}.private-study-preference-list strong{font:22px "Noto Serif JP",serif}.private-study-preference-list span{color:var(--muted);font-size:9px}
.private-study-library{margin-bottom:20px}.private-study-preferences{margin-bottom:75px}
.private-study-preference-entry{display:flex;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:9px}.private-study-preference-list .private-study-preference-open{border:0;border-radius:0}.private-study-preference-list .private-study-preference-remove{display:grid;place-items:center;align-self:center;width:20px;height:20px;margin-right:4px;padding:0;color:#a13d32;background:transparent;border:0;border-radius:50%;font-size:12px;font-weight:800}.private-study-preference-list .private-study-preference-remove:hover,.private-study-preference-list .private-study-preference-remove:focus-visible{color:#fff;background:#a13d32}
@media(max-width:760px){.private-study-hero{grid-template-columns:1fr;padding:40px 10px 20px;text-align:center}.private-study-hero img{display:none}.private-study-start{justify-content:center}.private-study-library,.private-study-preferences{margin-inline:-6px}.private-study-preference-columns{grid-template-columns:1fr}.private-study-card-choices{grid-template-columns:repeat(3,1fr)}.private-study-card-choices .private-study-remove{grid-column:1/-1}}
@media(max-width:760px){.level-filters{display:flex}.stroke-reference-card{grid-template-columns:1fr 130px}.stroke-reference{width:130px;height:120px}.stroke-reference svg{width:110px;height:110px}.stroke-controls{grid-column:1/-1;display:flex;justify-content:center}.stroke-controls button{min-width:60px}}
.collection-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}.collection-chip{padding:18px 14px;text-align:left;background:var(--bg);border:1px solid var(--border);border-radius:15px;cursor:pointer}.collection-chip strong,.collection-chip small{display:block}.collection-chip strong{font-size:17px}.collection-chip small{margin-top:5px;color:var(--muted);font-size:10px}.collection-chip.active{color:white;background:var(--accent);border-color:var(--accent)}.collection-chip.active small{color:rgba(255,255,255,.82)}.collection-summary{margin:0 0 22px;padding:14px 16px;color:var(--muted);background:var(--surface-2);border-radius:12px;font-size:12px;line-height:1.6}.school-level-filters{grid-template-columns:repeat(4,1fr)}.quiz-curricula{grid-template-columns:repeat(4,1fr)}.kanken-levels{grid-template-columns:repeat(4,1fr)}.kanken-note{margin:13px 0 0;padding:13px 15px;color:var(--muted);background:var(--surface-2);border-left:3px solid var(--accent);border-radius:0 10px 10px 0;font-size:10px;line-height:1.6}.kanken-note strong{color:var(--ink)}
.compound-search-section{margin-top:24px;padding:clamp(22px,4vw,40px);background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:0 10px 35px rgba(55,44,30,.06)}.compound-heading{align-items:center}.compound-search-section .search-form{max-width:720px}.compound-lengths{display:flex;gap:8px;margin:16px 0 20px}.compound-lengths button{padding:9px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;font-size:12px;font-weight:800}.compound-lengths button.active{color:white;background:var(--accent);border-color:var(--accent)}.compound-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px}.compound-card{display:flex;flex-direction:column;gap:11px;padding:14px;background:var(--bg);border:1px solid var(--border);border-radius:14px}.compound-card.single-kanji-card{cursor:pointer;touch-action:manipulation}.compound-card.single-kanji-card:hover,.compound-card.single-kanji-card:focus-visible{border-color:var(--accent);box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 12%,transparent);outline:0}.compound-characters{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px}.compound-characters>span{display:block;color:var(--ink);font:38px/1 "Noto Serif JP",serif}.compound-definition{min-width:0;padding-top:9px;border-top:1px solid var(--border)}.combined-reading-label{display:block;margin-bottom:6px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.compound-card strong,.compound-card em{display:block}.compound-card strong{font-size:13px}.compound-card em{margin-top:2px;color:var(--accent-dark);font-size:10px;font-style:normal;font-weight:750}.compound-card p{margin:9px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.compound-empty{grid-column:1/-1;display:grid;gap:5px;padding:35px;text-align:center;color:var(--muted)}
@media(max-width:760px){.collection-filters{grid-template-columns:1fr}.quiz-curricula{grid-template-columns:1fr}.school-level-filters{display:flex}.compound-heading{align-items:start;flex-direction:column}.compound-grid{grid-template-columns:1fr}}
.compound-search-note{margin:-8px 0 16px;color:var(--muted);font-size:12px;line-height:1.6}.compound-lengths{flex-wrap:wrap}
.compound-readings{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.compound-readings>span:not(.reading-count){display:flex;align-items:baseline;gap:4px;padding:5px 8px;background:var(--surface);border:1px solid var(--border);border-radius:8px}.compound-readings strong,.compound-readings em{display:inline}.compound-readings strong{font-size:13px}.compound-readings em{margin:0;color:var(--accent-dark);font-size:10px}.reading-count{padding:5px 8px;color:var(--accent-dark);background:var(--accent-soft);border-radius:999px;font-size:10px;font-weight:800}
.compound-word-card{cursor:pointer;touch-action:manipulation}.compound-word-card:hover,.compound-word-card:focus-visible{border-color:var(--accent);box-shadow:0 7px 16px color-mix(in srgb,var(--accent) 12%,transparent);outline:0}.compound-dialog{width:min(720px,calc(100% - 28px));max-height:90vh;padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.compound-dialog::backdrop{background:rgba(20,20,20,.55);backdrop-filter:blur(4px)}.compound-detail-layout{padding:42px}.compound-detail-kanji{margin:22px 0 12px;color:var(--ink);overflow-wrap:anywhere;font:clamp(54px,11vw,88px)/1.1 "Noto Serif JP",serif}.compound-detail-kanji ruby,.compound-detail-kanji>span{display:inline}.compound-detail-kanji ruby{ruby-align:center;ruby-position:over}.compound-detail-kanji rt{color:var(--accent-dark);font:600 .2em/1.2 "Inter",sans-serif;letter-spacing:.02em;text-align:center}.compound-detail-layout h2{margin:8px 0 28px;font:500 27px "Noto Serif JP",serif}.compound-detail-layout section+section{margin-top:25px}.compound-detail-layout h3{margin:0 0 10px;font-size:13px}.compound-detail-readings,.compound-detail-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:8px}.compound-detail-readings>div{padding:11px;background:var(--bg);border-radius:10px}.compound-detail-readings strong,.compound-detail-readings span,.compound-detail-readings small{display:block}.compound-detail-readings span{margin-top:3px;color:var(--accent-dark);font-size:11px}.compound-detail-readings small{margin-top:6px;color:var(--muted);font-size:9px}.compound-detail-layout ul{display:grid;gap:6px;margin:0;padding-left:20px;color:var(--muted);font-size:13px}.compound-detail-parts article{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:12px;text-align:left;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:11px}.compound-detail-parts strong{grid-row:1/3;font:35px "Noto Serif JP",serif}.compound-detail-parts span{font-size:11px;font-weight:750}.compound-detail-parts small{color:var(--muted);font-size:9px}@media(max-width:600px){.compound-detail-layout{padding:40px 20px 24px}}
.search-panel{grid-template-columns:minmax(0,1fr)}.search-panel>.radical-toggle{width:100%}.search-panel>.radical-panel{width:100%;margin:0;box-shadow:none}
.radical-stroke-filter{margin:0 0 18px;padding:0;border:0}.radical-stroke-filter legend{margin-bottom:8px;color:var(--muted);font-size:11px;font-weight:800}.radical-stroke-filter>div{display:flex;flex-wrap:wrap;gap:7px}.radical-stroke-filter label{position:relative;cursor:pointer}.radical-stroke-filter input{position:absolute;opacity:0;pointer-events:none}.radical-stroke-filter span{display:block;padding:7px 10px;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:750}.radical-stroke-filter input:checked+span{color:white;background:var(--green);border-color:var(--green)}.radical-stroke-filter input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:2px}
.saved-kanji-review{margin-top:22px;padding:22px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px}.saved-kanji-review .panel-heading{margin-bottom:5px}.saved-kanji-review h2{font-size:25px}.saved-review-note{margin:0 0 15px;color:var(--muted);font-size:12px}.saved-review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:9px}.saved-review-card{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:2px 10px;min-height:78px;padding:11px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer}.saved-review-card:hover,.saved-review-card:focus-visible{border-color:var(--accent);outline:0}.saved-review-card strong{grid-row:1/3;font:36px "Noto Serif JP",serif}.saved-review-card span{font-size:11px;font-weight:750}.saved-review-card small{color:var(--accent-dark);font-size:9px}
.quiz-length-all{min-width:105px}.quiz-leaderboard{margin-top:28px;padding:22px;background:var(--surface-2);border:1px solid var(--border);border-radius:16px}.quiz-leaderboard .panel-heading{margin-bottom:4px}.quiz-leaderboard h2{font-size:27px}.quiz-leaderboard>p{margin:0 0 14px;color:var(--muted);font-size:12px}.quiz-leaderboard ol{display:grid;gap:6px;margin:0;padding:0;list-style:none}.quiz-leaderboard li{display:grid;grid-template-columns:30px minmax(100px,1fr) auto minmax(72px,auto);align-items:center;gap:9px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:10px}.quiz-leaderboard li>b{display:grid;place-items:center;width:25px;height:25px;color:white;background:var(--green);border-radius:50%;font-size:10px}.quiz-leaderboard li>span,.quiz-leaderboard li>small{color:var(--muted);font-size:11px}.quiz-leaderboard li>small{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.grammar-hero{grid-template-columns:1fr 230px}.grammar-symbol{color:var(--accent);font:700 88px/1 "Noto Serif JP",serif;text-align:center}.grammar-symbol span{color:var(--muted);font-size:25px}.grammar-levels{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));margin-bottom:30px}.grammar-test-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px;background:var(--surface-2);border:1px solid var(--border);border-radius:18px}.grammar-test-card h2{margin:8px 0;font:500 30px "Noto Serif JP",serif}.grammar-test-card p,.grammar-note,.grammar-translation{color:var(--muted)}.grammar-test-card p{margin:0;line-height:1.6}.grammar-level{display:inline-block;padding:5px 9px;color:var(--accent-dark);background:var(--accent-soft);border-radius:999px;font-size:11px;font-weight:850;letter-spacing:.08em}.grammar-note{margin:18px 2px 0;font-size:12px;line-height:1.6}.grammar-sentence{margin:36px 0 8px;font:500 clamp(27px,5vw,43px)/1.45 "Noto Serif JP",serif}.grammar-translation{margin:0 0 30px;font-size:14px}.grammar-answers button{font:700 23px "Noto Serif JP",serif}.grammar-game #next-grammar-question{margin-top:18px}
.grammar-modes,.grammar-lengths{margin-bottom:30px}
.grammar-practice-note{margin:0 2px 28px;font-size:15px;line-height:1.9}.grammar-practice-note strong{display:block;margin-bottom:7px;color:var(--ink);font-size:16px}
.grammar-game .feedback{text-align:left;line-height:1.55}.grammar-game .feedback>strong,.grammar-feedback-explanation,.grammar-feedback-sentence,.grammar-feedback-explanation>b,.grammar-feedback-sentence>b{display:block}.grammar-game .feedback>strong{margin-bottom:9px;font-size:15px}.grammar-feedback-explanation{margin-bottom:10px}.grammar-feedback-explanation>b,.grammar-feedback-sentence>b{margin-bottom:2px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.grammar-feedback-sentence>span{font:700 18px/1.5 "Noto Serif JP",serif}
@media(max-width:760px){.grammar-hero{grid-template-columns:1fr}.grammar-symbol{display:none}.grammar-test-card{align-items:stretch;flex-direction:column}.grammar-test-card .primary-button{width:100%}}
.write-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 35px}.write-selectors label{display:grid;gap:7px;color:var(--muted);font-size:11px;font-weight:800}.write-selectors select{width:100%;padding:13px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:12px;font:inherit}.write-answer-form{max-width:570px;margin:0 auto}.write-answer-form>label{display:block;margin-bottom:8px;text-align:left;font-size:12px;font-weight:800}.write-answer-form>div{display:grid;grid-template-columns:1fr auto;gap:9px}.write-answer-form input{min-width:0;padding:14px 16px;color:var(--ink);background:var(--bg);border:2px solid var(--border);border-radius:12px;font:700 17px inherit;outline:0}.write-answer-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.write-answer-form input.correct{border-color:var(--success-border);background:var(--success-bg)}.write-answer-form input.incorrect{border-color:var(--error-border);background:var(--error-bg)}.write-answer-form .primary-button{margin:0}.write-answer-form>p{margin:8px 0 0;color:var(--muted);font-size:10px;text-align:left}
.write-language-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0 35px}.write-language{padding:16px;text-align:left;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:13px;cursor:pointer}.write-language strong,.write-language span{display:block}.write-language span{margin-top:4px;color:var(--muted);font-size:11px}.write-language.active{border-color:var(--accent);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}
.write-levels{grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}
.question-kanji.text-question{margin-block:20px 35px;font:500 clamp(30px,5vw,48px)/1.25 "Noto Serif JP",serif}
@media(max-width:600px){.write-selectors{grid-template-columns:1fr}.write-answer-form>div{grid-template-columns:1fr}.write-answer-form .primary-button{width:100%}}
.tree-load-more{position:relative;z-index:1;margin-bottom:0}.tree-connector{position:relative;display:grid;justify-items:center;height:72px}.tree-connector span{height:100%}.tree-connector p{position:absolute;top:18px;z-index:1;margin:0;padding:7px 12px;color:var(--green);background:var(--surface);border:1px solid color-mix(in srgb,var(--green) 35%,var(--border));border-radius:999px;font-size:11px;font-weight:800}.tree-path i{padding:4px 7px;color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent);border-radius:999px;font-size:9px;font-weight:800}.tree-branch-card>span{color:var(--green);background:color-mix(in srgb,var(--green) 13%,var(--surface))}
.tree-branches{grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:28px 18px;padding-top:14px}.tree-branches:before{top:0;height:3px;background:var(--green);border-radius:99px}.tree-branch-card{display:flex;align-items:center;justify-content:center;flex-direction:column;width:150px;max-width:100%;aspect-ratio:1;margin:0 auto;padding:17px;border:2px solid color-mix(in srgb,var(--green) 45%,var(--border));border-radius:50%;box-shadow:0 8px 18px color-mix(in srgb,var(--green) 12%,transparent)}.tree-branch-card:before{top:-29px;height:29px;background:var(--green)}.tree-branch-card:after{position:absolute;left:50%;top:-32px;width:8px;height:8px;background:var(--green);border-radius:50%;transform:translateX(-50%);content:""}.tree-branch-card>span{padding:3px 7px;font-size:8px}.tree-branch-card>strong{margin:5px;font-size:43px}.tree-branch-card h3{min-height:0;max-width:112px;font-size:12px}.tree-branch-card small{margin-top:4px;font-size:8px}.tree-branch-card em{margin-top:5px;font-size:8px}.tree-branch-card:hover{border-color:var(--green);box-shadow:0 12px 24px color-mix(in srgb,var(--green) 20%,transparent);transform:translateY(3px)}
.tree-branches{grid-template-columns:repeat(auto-fit,minmax(175px,1fr))}.tree-branch-card{width:180px;padding:18px}.tree-equation{display:flex;align-items:center;justify-content:center;gap:3px;min-height:28px;color:var(--green)}.tree-equation>b{font:22px "Noto Serif JP",serif}.tree-equation>i{font-size:12px;font-style:normal;font-weight:900}.tree-equation>small{max-width:42px;margin:0;color:var(--muted);font-size:7px;line-height:1.05}.tree-branch-card>strong{margin:3px;font-size:42px}.tree-branch-card h3{max-width:135px}.tree-branch-card>small{max-width:145px;line-height:1.25}
@media(max-width:760px){.tree-branches{gap:26px 10px}.tree-branch-card{width:138px;padding:14px}.tree-branch-card>strong{font-size:39px}.tree-connector p{max-width:85%;text-align:center}}
.tree-stage{position:relative;min-height:760px;overflow:hidden}.tree-root-card{position:absolute;z-index:4;left:50%;top:50%;width:230px;transform:translate(-50%,-50%)}.tree-connector{position:absolute;z-index:5;left:50%;top:18px;width:max-content;max-width:90%;height:auto;transform:translateX(-50%)}.tree-connector span{display:none}.tree-connector p{position:static}.tree-branches{position:absolute;inset:70px 35px 75px;display:block;padding:0}.tree-branches:before{left:50%;top:50%;width:55%;aspect-ratio:1;height:auto;border:2px solid color-mix(in srgb,var(--green) 42%,var(--border));border-radius:50%;background:transparent;transform:translate(-50%,-50%)}.tree-branch-card{position:absolute;left:var(--branch-x);top:var(--branch-y);z-index:2;width:132px;max-width:none;padding:13px;transform:translate(-50%,-50%)}.tree-branch-card:before{left:50%;top:50%;z-index:-2;width:2px;height:255px;background:color-mix(in srgb,var(--green) 55%,var(--border));transform:rotate(var(--branch-angle,0deg));transform-origin:top center}.tree-branch-card:after{display:none}.tree-equation{min-height:22px}.tree-equation>b{font-size:17px}.tree-equation>small{display:none}.tree-branch-card>strong{font-size:34px}.tree-branch-card h3{font-size:10px}.tree-branch-card>small{font-size:7px}.tree-branch-card em{font-size:7px}.tree-branch-card:hover{transform:translate(-50%,-50%) scale(1.05)}.tree-leaf{position:absolute;left:50%;top:72%;width:min(600px,90%);transform:translateX(-50%)}.tree-load-more{position:absolute;left:50%;bottom:20px;transform:translateX(-50%)}
@media(max-width:760px){.tree-stage{min-height:650px;overflow:auto}.tree-root-card{width:180px}.tree-root-card>strong{font-size:58px}.tree-branches{inset:70px 5px 75px}.tree-branch-card{width:104px;padding:9px}.tree-branch-card>strong{font-size:29px}.tree-branch-card h3{font-size:9px}.tree-branch-card>small,.tree-branch-card em{display:none}.tree-equation>b{font-size:14px}.tree-branches:before{width:68%}}
.basics-kana-reference{margin-bottom:14px;overflow:hidden;background:linear-gradient(135deg,var(--accent-soft),var(--surface));border:1px solid var(--border);border-radius:18px}.basics-kana-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(18px,3vw,28px);cursor:pointer;list-style:none}.basics-kana-heading::-webkit-details-marker{display:none}.basics-kana-heading h2{margin:0;font:500 27px "Noto Serif JP",serif}.basics-kana-heading>span{padding:7px 11px;color:var(--green);background:color-mix(in srgb,var(--green) 11%,var(--surface));border-radius:999px;font-size:10px;font-weight:850}.basics-kana-heading>span:before{content:"＋ "}.basics-kana-reference[open]>.basics-kana-heading{background:var(--surface-2);border-bottom:1px solid var(--border)}.basics-kana-reference[open]>.basics-kana-heading>span{font-size:0}.basics-kana-reference[open]>.basics-kana-heading>span:before{content:"− Close";font-size:10px}.basics-kana-body{padding:clamp(18px,3vw,28px)}.basics-kana-body>p,.basics-kana-panel>p{color:var(--muted);font-size:12px;line-height:1.6}.basics-kana-body>p{max-width:750px;margin:0 0 19px}.basics-kana-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.basics-kana-panel{min-width:0;padding:17px;background:var(--surface);border:1px solid var(--border);border-radius:14px}.basics-kana-panel h3{margin:0;font-size:16px}.basics-kana-panel h3 span{margin-left:5px;color:var(--accent-dark);font:500 20px "Noto Serif JP",serif}.basics-kana-panel>p{min-height:39px;margin:5px 0 13px}.kana-script-chart{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.kana-script-cell{display:grid;justify-items:center;min-width:0;padding:8px 3px;background:var(--bg);border:1px solid var(--border);border-radius:9px}.kana-script-cell strong{font:25px "Noto Serif JP",serif}.kana-script-cell span{margin-top:2px;color:var(--accent-dark);font-size:9px;font-weight:800}.kana-test-section{margin-bottom:22px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);border-radius:15px}.kana-test-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px;cursor:pointer;list-style:none}.kana-test-heading::-webkit-details-marker{display:none}.kana-test-heading h2{margin:0 0 5px;font:500 23px "Noto Serif JP",serif}.kana-test-heading p,.kana-test-results p{margin:0;color:var(--muted);font-size:12px}.kana-test-heading>span{padding:7px 11px;color:var(--green);background:color-mix(in srgb,var(--green) 11%,var(--surface));border-radius:999px;font-size:10px;font-weight:850}.kana-test-heading>span:before{content:"＋ "}.kana-test-section[open]>.kana-test-heading{border-bottom:1px solid var(--border)}.kana-test-section[open]>.kana-test-heading>span{font-size:0}.kana-test-section[open]>.kana-test-heading>span:before{content:"− Close";font-size:10px}.kana-test-body{padding:20px}.kana-test-setup{margin:0}.kana-test-script-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 22px}.kana-test-script-options .quiz-mode{min-width:0}.kana-test-lengths{margin:10px 0 0}.kana-test-setup>.primary-button{margin:20px 0 0}.kana-test-game{max-width:620px;margin:0 auto;text-align:center}.kana-test-progress{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.kana-test-prompt{margin:24px 0 5px;color:var(--muted);font-size:12px}.kana-test-character{margin:0;font:clamp(40px,8vw,72px) "Noto Serif JP",serif}.kana-test-meaning{margin:3px 0 22px;color:var(--muted);font-size:13px;font-weight:700}.kana-test-answers{max-width:560px;margin:0 auto}.kana-test-game>.feedback{max-width:560px;margin:12px auto 0}.kana-test-game>.primary-button{margin-top:14px}.kana-test-results{padding:22px 0 5px;text-align:center}.kana-test-results h3{margin:0 0 6px;font:500 30px "Noto Serif JP",serif}.basics-explanation{margin-bottom:22px;padding:18px 20px;background:var(--surface-2);border:1px solid var(--border);border-radius:15px}.basics-explanation h2{margin:0 0 8px;font:500 23px "Noto Serif JP",serif}.basics-explanation p{margin:5px 0;color:var(--muted);font-size:13px;line-height:1.65}.basics-standard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:17px 0}.basics-standard-grid section{padding:15px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px}.basics-standard-grid h3{margin:0 0 5px;font-size:14px}.basics-standard-grid p{margin:0}.basics-standard-grid .inline-view-link{margin-top:10px;font-size:11px}.radical-search-section{margin-top:18px;padding:18px;background:color-mix(in srgb,var(--green) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--green) 28%,var(--border));border-radius:15px}.radical-explanation h2{margin:0 0 6px;font:500 21px "Noto Serif JP",serif}.radical-explanation p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}.basics-search-tools{display:grid;grid-template-columns:minmax(0,1fr);gap:15px}.basics-search-tools .radical-toggle{width:100%}.inline-view-link{display:inline;padding:0;border:0;background:transparent;font-size:inherit;vertical-align:baseline}.radical-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.radical-panel-actions label{color:var(--muted);font-size:11px;font-weight:750}.radical-panel-actions select{padding:8px 28px 8px 10px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:9px;font:inherit;font-size:11px}.collection-filters{grid-template-columns:repeat(2,1fr)}.kanji-grid.five-row-preview{max-height:620px;overflow:hidden}
@media(max-width:900px){.basics-standard-grid{grid-template-columns:repeat(2,1fr)}.basics-standard-grid section:last-child{grid-column:1/-1}}
@media(max-width:700px){.basics-kana-grid{grid-template-columns:1fr}.basics-kana-panel>p{min-height:0}}
@media(max-width:600px){.basics-standard-grid,.basics-search-tools{grid-template-columns:1fr}.basics-standard-grid section:last-child{grid-column:auto}.basics-kana-heading,.basics-kana-body{padding-inline:12px}.basics-kana-heading h2{font-size:22px}.basics-kana-panel{padding:12px}.kana-script-chart{gap:4px}.kana-script-cell{padding-inline:1px}.kana-script-cell strong{font-size:22px}.radical-panel .panel-heading{align-items:flex-start;flex-direction:column}.radical-panel-actions{justify-content:flex-start}.kanji-grid.five-row-preview{max-height:560px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.01ms!important}}

/* Expanded kana references and clickable component kanji in dictionary details. */
.kana-more>h3{margin:0;padding:15px 18px;background:var(--surface-2);font-size:14px}.kana-more>.kana-chart{padding:15px}
.compound-detail-parts button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;padding:12px;text-align:left;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:11px;cursor:pointer}.compound-detail-parts button:hover,.compound-detail-parts button:focus-visible{border-color:var(--accent);outline:none}
.compound-detail-parts .contextual-sound{color:var(--accent-dark);font-size:11px;font-weight:750}.compound-detail-parts .contextual-sound b{font-size:14px}.compound-detail-parts .contextual-sound.uncertain{color:var(--muted);font-size:10px;font-weight:600}
.compound-characters{flex-wrap:wrap;overflow-wrap:anywhere}.no-kanji-parts{margin:0;color:var(--muted);font-size:12px}
.compound-return-kanji{display:block;margin:0 0 14px}.compound-return-kanji[hidden]{display:none}

/* Welcome landing page, live rank scarves, and constrained radical choices. */
.welcome-hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;align-items:center;min-height:540px;padding:70px 35px 35px}.welcome-copy h1{margin:12px 0 20px;font:500 clamp(48px,6.5vw,82px)/.96 "Noto Serif JP",serif;letter-spacing:-.05em}.welcome-copy h1 em{color:var(--accent);font-weight:500}.welcome-intro{max-width:670px;color:var(--muted);font-size:18px;line-height:1.7}.welcome-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.welcome-actions button{margin:0}.learning-disclaimer{margin:0 0 30px;padding:clamp(24px,4vw,36px);background:linear-gradient(135deg,var(--accent-soft),var(--surface));border:1px solid var(--border);border-radius:24px;box-shadow:0 10px 35px rgba(55,44,30,.06)}.learning-disclaimer h2{margin:0 0 12px;font:500 clamp(27px,4vw,36px)/1.15 "Noto Serif JP",serif}.learning-disclaimer p{max-width:850px;margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.75}.welcome-history{margin:0 0 80px}.welcome-history .corner-section{margin-bottom:0}
.rank-kenta{position:relative;display:grid;place-items:center;isolation:isolate}.rank-kenta>img{position:relative;z-index:1}.rank-kenta::after{position:absolute;z-index:2;left:31%;top:48%;width:40%;height:8%;min-height:12px;background:var(--belt-color,#f4f0e6);border:2px solid color-mix(in srgb,var(--ink) 25%,transparent);border-radius:50% 50% 38% 38%;box-shadow:0 3px 5px rgba(0,0,0,.18);transform:rotate(-4deg);content:"";pointer-events:none}.rank-kenta-welcome img{width:100%;max-height:430px;object-fit:contain}.rank-kenta-welcome::after{left:32%;top:40%;width:35%;height:7%}.rank-kenta-explore{align-self:end}.rank-kenta-explore .hero-mascot{align-self:auto}.quiz-hero>.rank-kenta,.draw-hero>.rank-kenta,.tree-hero>.rank-kenta,.corner-hero>.rank-kenta{width:100%;align-self:center}.quiz-hero>.rank-kenta img,.draw-hero>.rank-kenta img,.tree-hero>.rank-kenta img,.corner-hero>.rank-kenta img{width:100%;object-fit:contain}.results-card>.rank-kenta,.empty-state>.rank-kenta{display:inline-grid}.results-card>.rank-kenta::after,.empty-state>.rank-kenta::after{top:47%}
.radical-button:disabled{opacity:.28;cursor:not-allowed;filter:grayscale(.8)}.radical-button:disabled:hover{border-color:var(--border);background:var(--bg)}.answer-grid button.answer-locked{border-color:var(--accent);background:var(--accent-soft)}
@media(max-width:760px){.welcome-hero{grid-template-columns:1fr;min-height:0;padding:48px 10px 25px;text-align:center}.welcome-copy h1{font-size:43px}.welcome-intro{font-size:16px}.welcome-actions{justify-content:center}.rank-kenta-welcome{width:230px;margin:25px auto 0}.learning-disclaimer{text-align:center}.quiz-hero>.rank-kenta,.tree-hero>.rank-kenta,.corner-hero>.rank-kenta{display:none}}
.rank-kenta-welcome::after{top:48%}

/* Section mascots now use the finished learner-dialog belt artwork, not a painted overlay. */
.rank-kenta::after,.rank-scarf{display:none!important}

/* Pose-matched scarf artwork preserves fabric folds and leaf details while rank filters change hue. */
.rank-kenta>.rank-scarf-overlay{position:absolute;z-index:3;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;pointer-events:none;filter:none}.rank-kenta>img:not(.rank-scarf-overlay){z-index:1}html[data-belt="yellow"] .rank-scarf-overlay{filter:sepia(1) saturate(4.2) hue-rotate(2deg) brightness(.96)}html[data-belt="orange"] .rank-scarf-overlay{filter:sepia(1) saturate(5.2) hue-rotate(337deg) brightness(.9)}html[data-belt="green"] .rank-scarf-overlay{filter:sepia(1) saturate(2.3) hue-rotate(55deg) brightness(.72)}html[data-belt="blue"] .rank-scarf-overlay{filter:sepia(1) saturate(4.5) hue-rotate(165deg) brightness(.72)}html[data-belt="black"] .rank-scarf-overlay{filter:grayscale(1) brightness(.27) contrast(1.25)}

/* Legacy scarf geometry retained only for backward-compatible cached markup; it stays hidden above. */
.rank-kenta::after{display:none}.rank-scarf{position:absolute;z-index:2;left:28%;top:47%;width:44%;height:9%;min-height:15px;background:linear-gradient(180deg,color-mix(in srgb,var(--belt-color) 62%,white) 0%,var(--belt-color) 42%,color-mix(in srgb,var(--belt-color) 72%,black) 100%);border:1px solid color-mix(in srgb,var(--belt-color) 58%,black);border-radius:48% 48% 36% 40%;box-shadow:inset 0 2px 2px rgba(255,255,255,.32),inset 0 -3px 3px rgba(0,0,0,.16),0 3px 5px rgba(0,0,0,.2);transform:rotate(-4deg);pointer-events:none}.rank-scarf::before{position:absolute;right:8%;top:48%;width:22%;aspect-ratio:1;background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--belt-color) 68%,white),var(--belt-color) 58%,color-mix(in srgb,var(--belt-color) 68%,black));border:1px solid color-mix(in srgb,var(--belt-color) 55%,black);border-radius:42%;box-shadow:0 2px 3px rgba(0,0,0,.2);content:""}.rank-scarf::after{position:absolute;right:-6%;top:72%;width:28%;height:105%;background:linear-gradient(145deg,color-mix(in srgb,var(--belt-color) 70%,white),var(--belt-color) 48%,color-mix(in srgb,var(--belt-color) 72%,black));border:1px solid color-mix(in srgb,var(--belt-color) 55%,black);border-radius:5px 45% 12px 55%;box-shadow:inset -2px -2px 3px rgba(0,0,0,.14),0 2px 3px rgba(0,0,0,.16);transform:rotate(18deg);content:""}.rank-kenta-welcome .rank-scarf{left:31%;top:47%;width:39%}.results-card .rank-scarf,.empty-state .rank-scarf{top:46%}

/* Keep the center of the mobile Kanji Tree compact so nearby words stay visible. */
@media(max-width:760px){.tree-root-card{width:140px;padding:14px 10px;border-radius:16px}.tree-root-card>strong{margin:4px 0 1px;font-size:42px}.tree-root-card h2{font-size:15px}.tree-root-card p{margin:5px 0;font-size:9px;line-height:1.25}}

/* Keep every radial tree bubble inside narrow app screens. */
@media(max-width:760px){.tree-workspace{padding-inline:8px}.tree-stage{overflow:hidden}.tree-branches{inset-inline:4px}.tree-branch-card{width:96px;padding:8px}.tree-equation>b{font-size:13px}.tree-branch-card>strong{font-size:28px}}

/* The selected center kanji opens its complete definition. */
.tree-root-card[role="button"]{cursor:pointer;transition:border-color .2s,box-shadow .2s}.tree-root-card[role="button"]:hover{border-color:var(--accent-dark);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 22%,transparent)}.tree-root-card[role="button"]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:4px}.tree-root-card>.text-button{display:inline-block}

/* Position filters expose every dictionary word connected to a single kanji. */
.kanji-dialog{overflow:auto}.kanji-word-filters{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0 5px}.kanji-word-filters button{padding:7px 4px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:9px;font-weight:800}.kanji-word-filters button:hover,.kanji-word-filters button.active{color:var(--accent-dark);background:var(--accent-soft);border-color:var(--accent)}.connections-card>.kanji-word-count{margin:0 0 8px;font-size:10px}.word-examples{max-height:360px;overflow:auto;padding-right:3px}.word-examples>.kanji-word-result{display:grid;grid-template-columns:auto 1fr;width:100%;gap:1px 9px;padding:9px;color:var(--ink);text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:9px;cursor:pointer}.word-examples>.kanji-word-result:hover,.word-examples>.kanji-word-result:focus-visible{border-color:var(--accent);outline:0}.word-examples>.kanji-word-result strong{grid-row:1/3;font:25px "Noto Serif JP",serif}.word-examples>.kanji-word-result span{font-size:11px}.word-examples>.kanji-word-result em{color:var(--accent-dark);font-size:10px;font-style:normal;font-weight:750}.word-examples>.kanji-word-result small{grid-column:1/-1;margin-top:3px;color:var(--muted);font-size:9px}
.flashcard-navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 36px 18px;padding:10px 0 14px;border-bottom:1px solid var(--border)}.flashcard-navigation[hidden]{display:none}.flashcard-navigation>span{color:var(--muted);font-size:12px;font-weight:800;text-align:center}.flashcard-navigation>div{display:flex;justify-content:flex-end;gap:7px}.flashcard-navigation .secondary-button{margin:0;padding:8px 11px;font-size:10px}.flashcard-navigation>.text-button{justify-self:start}
@media(max-width:760px){.flashcard-navigation{grid-template-columns:1fr auto;margin-inline:8px}.flashcard-navigation>span{grid-column:1/-1;grid-row:1}.flashcard-navigation>.text-button{grid-row:2}.flashcard-navigation>div{grid-row:2}}
.knockout-dialog{width:min(560px,calc(100% - 28px));padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.knockout-dialog::backdrop{background:rgba(20,20,20,.58);backdrop-filter:blur(4px)}.knockout-dialog-content{padding:38px;text-align:center}.knockout-dialog h2{margin:8px 0 14px;font:500 34px "Noto Serif JP",serif}.knockout-dialog p:not(.eyebrow){margin:0;color:var(--muted);line-height:1.65}.knockout-lives{display:flex;justify-content:center;gap:12px;margin:22px 0;color:#c84b4b;font-size:30px}.knockout-dialog-actions{display:flex;justify-content:center;gap:10px}.quiz-progress strong.knockout-score{color:#c84b4b;font-size:14px}

/* Every scrollbar inherits the active Paper, Sakura, or Night theme. */
*{scrollbar-color:var(--accent) var(--surface-2);scrollbar-width:thin}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:var(--surface-2);border-radius:999px}*::-webkit-scrollbar-thumb{background:var(--accent);border:2px solid var(--surface-2);border-radius:999px}*::-webkit-scrollbar-thumb:hover{background:var(--accent-dark)}*::-webkit-scrollbar-corner{background:var(--surface-2)}

/* Color-blind-safe feedback pairs blue with amber and reinforces color with symbols and border styles. */
.answer-grid button.correct{color:var(--success-ink);background:var(--success-bg);border:2px solid var(--success-border);box-shadow:inset 5px 0 0 var(--success-border)}.answer-grid button.correct::after{content:"  ✓"}.answer-grid button.incorrect{color:var(--error-ink);background:var(--error-bg);border:2px dashed var(--error-border);box-shadow:inset 5px 0 0 var(--error-border)}.answer-grid button.incorrect::after{content:"  ✕"}.feedback.good,.drawing-feedback.good{color:var(--success-ink);background:var(--success-bg);border-left:5px solid var(--success-border)}.feedback.try-again,.drawing-feedback.try-again{color:var(--error-ink);background:var(--error-bg);border-left:5px dashed var(--error-border)}.account-message{color:var(--error-ink)}

.add-kanji-to-search{width:100%;padding:9px 11px;color:white;background:var(--accent);border:0;border-radius:9px;cursor:pointer;font-size:11px;font-weight:850}.add-kanji-to-search:hover,.add-kanji-to-search:focus-visible{background:var(--accent-dark);outline:2px solid var(--accent-soft);outline-offset:2px}

/* Basics and Dictionary share one search layout and one app-owned clear button. */
.search-box input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}.search-box input[type="search"]::-ms-clear{display:none;width:0;height:0}

.account-auth-forms{grid-template-columns:1fr}.account-register-prompt{margin:1px 0 0;color:var(--muted);font-size:11px;text-align:center}.account-register-prompt button{padding:0;color:var(--accent-dark);background:none;border:0;cursor:pointer;font:inherit;font-weight:850;text-decoration:underline;text-underline-offset:2px}.registration-dialog{width:min(500px,calc(100% - 28px))}.registration-layout{padding:42px 38px 34px}.registration-layout h2{margin:5px 0;font:500 34px "Noto Serif JP",serif}.registration-layout .account-auth-form{margin-top:16px}.registration-sign-in{display:block;margin:14px auto 0}
.account-privacy-note{margin:12px 0;color:var(--muted);font-size:10px;line-height:1.55;text-align:center}.account-privacy-note a{color:var(--accent-dark);font-weight:800;text-underline-offset:2px}

.question-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.question-actions .primary-button,.question-actions .secondary-button{margin:25px 0 0}
.results-card>div{flex-wrap:wrap}

/* Keyboard accessibility: bypass navigation and keep focus visible in every theme. */
.skip-link{position:fixed;z-index:1000;left:16px;top:12px;padding:11px 16px;color:var(--surface);background:var(--ink);border:3px solid var(--accent);border-radius:10px;font-weight:850;text-decoration:none;transform:translateY(-160%);transition:transform .15s}.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid var(--accent-dark)!important;outline-offset:3px!important;box-shadow:0 0 0 6px var(--surface)!important}
[data-theme="night"] :where(a,button,input,select,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline-color:#ffc0a7!important;box-shadow:0 0 0 6px #172023!important}
.app-view>h1[tabindex="-1"],.app-view h1[tabindex="-1"]{outline:none}
.keyboard-help-dialog{width:min(680px,calc(100% - 28px));max-height:90vh;padding:0;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:0 30px 100px rgba(0,0,0,.35)}.keyboard-help-dialog::backdrop{background:rgba(20,20,20,.58);backdrop-filter:blur(4px)}.keyboard-help-content{padding:42px}.keyboard-help-content h2{margin:6px 0 22px;font:500 34px "Noto Serif JP",serif}.keyboard-help-content dl{display:grid;gap:9px;margin:0}.keyboard-help-content dl>div{display:grid;grid-template-columns:minmax(175px,.7fr) 1fr;gap:16px;padding:12px;background:var(--bg);border:1px solid var(--border);border-radius:10px}.keyboard-help-content dt{font-weight:800}.keyboard-help-content dd{margin:0;color:var(--muted);line-height:1.5}.keyboard-help-content>p:last-of-type{color:var(--muted);font-size:12px;line-height:1.6}.keyboard-help-content>a{color:var(--accent-dark);font-weight:800}kbd{display:inline-block;min-width:25px;padding:2px 6px;color:var(--ink);background:var(--surface-2);border:1px solid var(--border);border-bottom-width:3px;border-radius:5px;font:700 12px "Inter",sans-serif;text-align:center}
@media(max-width:600px){.keyboard-help-content{padding:38px 20px 24px}.keyboard-help-content dl>div{grid-template-columns:1fr;gap:5px}}
.drawing-keyboard-help{max-width:560px;margin:10px auto;color:var(--muted);font-size:11px;line-height:1.55;text-align:center}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Mobile navigation sits within easy thumb reach while keeping the page visible beneath it. */
@media(max-width:760px){
    body{padding-top:64px;padding-bottom:calc(66px + env(safe-area-inset-bottom))}
    .site-header{
        position:fixed;
        top:0;
        right:0;
        bottom:auto;
        left:0;
        grid-template-columns:1fr auto;
        gap:10px;
        padding:10px 12px;
        background:color-mix(in srgb,var(--bg) 68%,transparent);
        border-top:0;
        border-bottom:1px solid color-mix(in srgb,var(--border) 72%,transparent);
        box-shadow:0 10px 30px rgba(31,41,51,.08);
        /* Android WebView treats a blurred ancestor as the containing block for
           fixed descendants. Keep the header unfiltered so .main-nav anchors
           to the viewport instead of appearing inside this top bar. */
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    }
    .main-nav{
        position:fixed;
        z-index:21;
        right:0;
        bottom:0;
        left:0;
        grid-column:auto;
        grid-row:auto;
        width:auto;
        padding:6px 8px calc(6px + env(safe-area-inset-bottom));
        background:color-mix(in srgb,var(--surface-2) 92%,transparent);
        border-radius:0;
        border:1px solid color-mix(in srgb,var(--border) 55%,transparent);
        border-width:1px 0 0;
        box-shadow:0 -10px 30px rgba(31,41,51,.1);
        backdrop-filter:blur(18px) saturate(135%);
        -webkit-backdrop-filter:blur(18px) saturate(135%);
    }
    .nav-button.active{background:color-mix(in srgb,var(--surface) 82%,transparent)}
    .brand strong{font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;font-weight:700;letter-spacing:-.01em}
    .nav-button{font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;font-weight:650;letter-spacing:-.01em}
    .account-button,.icon-button,.theme-menu button{font-family:"Inter",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    .brand-mark,.nav-button span{font-family:"Noto Serif JP",serif}
    .theme-picker{grid-column:2;grid-row:1}
    .theme-menu{top:48px;bottom:auto}
    .toast{bottom:calc(78px + env(safe-area-inset-bottom))}
    /* The Android wrapper can draw the WebView behind the system navigation
       area. Keep every navigation choice above the gesture bar / buttons even
       when WebView reports a zero CSS safe-area inset. */
    .android-app body{padding-bottom:86px;padding-bottom:calc(66px + max(20px,env(safe-area-inset-bottom)))}
    .android-app .main-nav{padding-bottom:26px;padding-bottom:calc(6px + max(20px,env(safe-area-inset-bottom)))}
    .android-app .toast{bottom:98px;bottom:calc(78px + max(20px,env(safe-area-inset-bottom)))}
    .mobile-swipe-forward{animation:mobile-swipe-forward .32s cubic-bezier(.22,.8,.35,1) both}
    .mobile-swipe-back{animation:mobile-swipe-back .32s cubic-bezier(.22,.8,.35,1) both}
}

.kana-test-section>.kana-test-heading{cursor:default}
.kana-quiz-hero .grammar-symbol{line-height:.78}
.kana-quiz-hero .grammar-symbol span{font-size:.65em}

@keyframes mobile-swipe-forward{from{opacity:.2;transform:translateX(42px)}to{opacity:1;transform:translateX(0)}}
@keyframes mobile-swipe-back{from{opacity:.2;transform:translateX(-42px)}to{opacity:1;transform:translateX(0)}}

/* Night theme uses dark text on its light coral and green action colors for readable contrast. */
[data-theme="night"] :where(.brand-mark,.primary-button,.level-chip.active,.knockout-level,.credits-heading>span,.draw-level-row button.active,.history-timeline article>span,.collection-chip.active,.compound-lengths button.active,.add-kanji-to-search){color:#172023}
[data-theme="night"] :where(.level-chip.active small,.knockout-level span,.collection-chip.active small){color:#263033}
[data-theme="night"] :where(.sorting-guide article>span,.radical-stroke-filter input:checked+span,.quiz-leaderboard li>b){color:#172023}

/* Member-only learning sections remain visible in navigation so guests can discover them. */
.nav-button.member-locked{opacity:.68}
.nav-button.member-locked::after{content:"🔒";margin-left:4px;font-size:.72em;filter:grayscale(1)}
.account-resend-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.account-resend-form p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.turnstile-slot{min-height:65px;margin:4px 0;overflow:hidden}
.account-manage-passkeys,.account-manage-sessions,.account-logout-all{display:block;margin-top:7px;padding:5px 0;font-size:11px}.account-delete-link{display:block;margin-top:8px;padding:3px 0;color:#a13d32;font-size:10px;font-weight:700}.danger-button{background:#a13d32!important;border-color:#812f27!important;color:#fff!important}.session-list{display:grid;gap:10px;margin-top:16px}.session-card{padding:13px;background:var(--bg);border:1px solid var(--border);border-radius:12px}.session-card header{display:flex;align-items:start;justify-content:space-between;gap:12px}.session-card strong{font-size:12px}.session-card p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.session-card button{flex:none;padding:5px 8px;color:#a13d32;background:transparent;border:1px solid currentColor;border-radius:7px;cursor:pointer;font-size:9px;font-weight:800}.session-current{color:var(--green);font-size:9px;font-weight:850;text-transform:uppercase}.passkey-add-form{margin-top:14px}.passkey-login-button{margin:5px 0 0;width:100%}