/* Theme tokens: all sections consume these variables so the three palettes stay consistent. */
:root {
    --bg: #f5f0e6; --surface: #fffdf8; --surface-2: #eee7da; --ink: #20242c; --muted: #6c706f;
    --accent: #d75d45; --accent-dark: #a63f2d; --accent-soft: #f7dfd5; --green: #64734a;
    --border: #dcd3c3; --line: #c8bdab; --shadow: 0 20px 55px rgba(62, 48, 32, .12);
}
[data-theme="sakura"] { --bg:#f9eef0; --surface:#fffafb; --surface-2:#f1dfe3; --ink:#382a30; --muted:#78646b; --accent:#c94e73; --accent-dark:#92324f; --accent-soft:#f5d6df; --green:#6c7551; --border:#e2cbd1; --line:#ceb8bd; }
[data-theme="night"] { --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; --shadow:0 20px 55px rgba(0,0,0,.3); }
/* Global reset and page foundation. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width:320px; margin:0; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 12% 4%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 28rem),linear-gradient(color-mix(in srgb,var(--ink) 3%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 3%,transparent) 1px,transparent 1px),var(--bg); background-size:auto,32px 32px,32px 32px,auto; 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; }
/* 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 "Yu Mincho",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:#d75d45}.swatch.sakura{background:#c94e73}.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 Georgia,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 "Yu Mincho",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 Georgia,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 "Yu Mincho",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 "Yu Mincho",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 "Yu Mincho",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 "Yu Mincho",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 "Yu Mincho",serif}.detail-main h2{margin:3px 0 28px;font:500 25px Georgia,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 "Yu Mincho",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 "Yu Mincho",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 "Yu Mincho",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 Georgia,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}.boss-level:not(:disabled){color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 28%,transparent)}.boss-level:not(:disabled) 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 Georgia,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 Georgia,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 Georgia,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 Georgia,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 "Yu Mincho",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 "Yu Mincho",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 Georgia,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 "Yu Mincho",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 "Yu Mincho",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}
.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 Georgia,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 "Yu Mincho",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 "Yu Mincho",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 "Yu Mincho",serif}.tree-root-card h2{margin:0;font:500 20px Georgia,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 "Yu Mincho",serif}.tree-branch-card h3{min-height:34px;margin:0;font:500 14px/1.25 Georgia,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 Georgia,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 "Yu Mincho",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 Georgia,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 "Yu Mincho",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 "Yu Mincho",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 Georgia,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 "Yu Mincho",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 Georgia,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 "Yu Mincho",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}}
/* 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 Georgia,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 Georgia,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}}
@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 "Yu Mincho",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{display:flex;gap:8px;margin:12px 0}.compound-detail-kanji>span{display:grid;place-items:center;width:66px;height:60px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:10px;font:40px "Yu Mincho",serif}.compound-detail-layout h2{margin:8px 0 28px;font:500 27px Georgia,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 "Yu Mincho",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 "Yu Mincho",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 58px;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}
.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 "Yu Mincho",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-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 Georgia,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 Georgia,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:600px){.basics-standard-grid,.basics-search-tools{grid-template-columns:1fr}.basics-standard-grid section:last-child{grid-column:auto}.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-kanji>button{display:grid;place-items:center;width:66px;height:60px;color:var(--ink);background:var(--bg);border:1px solid var(--border);border-radius:10px;cursor:pointer;font:40px "Yu Mincho",serif}.compound-detail-kanji>button:hover,.compound-detail-kanji>button:focus-visible{color:var(--accent);border-color:var(--accent);outline:none}.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-detail-kanji{flex-wrap:wrap}.compound-detail-kanji>span{display:grid;place-items:center;min-width:42px;height:60px;color:var(--ink);font:32px "Yu Mincho",serif}.compound-characters{flex-wrap:wrap;overflow-wrap:anywhere}.no-kanji-parts{margin:0;color:var(--muted);font-size:12px}

/* 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 Georgia,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}.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}.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%}