*{box-sizing:border-box}html{scroll-behavior:smooth}html[data-theme=pixel]{--bg:#fff8fb;--surface:#fff;--surface2:#fff0f7;--ink:#20234d;--muted:#686b89;--primary:#e94d9b;--secondary:#7b67e8;--accent:#5aaaf7;--line:#ead8e9;--shadow:0 16px 36px rgba(83,55,121,.12);--hero-filter:saturate(1.05)}html[data-theme=garden]{--bg:#f7f2df;--surface:#fffaf0;--surface2:#edf0d7;--ink:#294534;--muted:#587060;--primary:#5c914e;--secondary:#ae8137;--accent:#7ba668;--line:#d5c8a4;--shadow:0 16px 36px rgba(67,76,43,.12);--hero-filter:hue-rotate(58deg) saturate(.65) brightness(1.07)}html[data-theme=night]{--bg:#071126;--surface:#111c36;--surface2:#182543;--ink:#f7f4ff;--muted:#bdc8e5;--primary:#ff65ba;--secondary:#8976ff;--accent:#69c8ff;--line:#34466c;--shadow:0 18px 44px rgba(0,0,0,.36);--hero-filter:saturate(1.05) brightness(.7)}body{margin:0;background:radial-gradient(circle at 8% -4%,color-mix(in srgb,var(--primary) 15%,transparent),transparent 35%),var(--bg);color:var(--ink);font-family:Inter,ui-rounded,"Segoe UI",system-ui,sans-serif;min-height:100vh}.skip-link{position:fixed;top:-100px;left:12px;z-index:9999;background:var(--ink);color:var(--surface);padding:10px;border-radius:10px}.skip-link:focus{top:10px}.topbar{height:64px;position:fixed;inset:0 0 auto;z-index:1000;display:flex;align-items:center;gap:14px;padding:8px 16px;background:color-mix(in srgb,var(--surface) 92%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-width:max-content}.brand img{width:44px;height:44px;object-fit:contain}.brand b{display:block;font-size:1rem}.brand small{display:block;color:var(--primary);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.desktop-nav{display:flex;align-items:center;gap:3px;overflow:auto;scrollbar-width:none}.desktop-nav a{display:flex;align-items:center;gap:5px;text-decoration:none;color:var(--ink);padding:8px 9px;border-radius:11px;font-size:.78rem;font-weight:800;white-space:nowrap}.desktop-nav a:hover,.desktop-nav a.active{background:var(--surface2);color:var(--primary)}.top-actions{margin-left:auto;display:flex;gap:7px}.icon-button,.language-switch{width:40px;height:40px;border:1px solid var(--line);background:var(--surface);border-radius:12px;color:var(--ink);display:grid;place-items:center;text-decoration:none;font-weight:900;cursor:pointer}.menu-button{display:none}.app-layout{padding-top:64px;min-height:100vh}.sidebar{position:fixed;left:0;top:64px;bottom:0;width:232px;z-index:800;padding:14px 10px 24px;background:color-mix(in srgb,var(--surface) 96%,transparent);border-right:1px solid var(--line);overflow:auto}.sidebar-head{display:none}.nav-label{padding:12px 12px 6px;font-size:.67rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}.side-link{display:flex;align-items:center;gap:10px;padding:10px 11px;margin:2px 0;border-radius:13px;text-decoration:none;color:var(--ink);font-size:.83rem;font-weight:800}.side-link:hover,.side-link.active{background:var(--surface2);color:var(--primary)}.nav-icon{width:25px;text-align:center;font-size:1.05rem}.study-tip{margin:16px 5px 0;padding:13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),var(--surface));font-size:.75rem;color:var(--muted)}.study-tip p{margin:5px 0 0;line-height:1.45}.main-content{margin-left:232px;padding:22px;min-width:0}.hero{max-width:1260px;margin:0 auto 20px;position:relative;min-height:410px;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface)}.hero-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--hero-filter)}.hero-overlay{position:absolute;inset:0;display:flex;align-items:center;padding:38px;background:linear-gradient(90deg,rgba(255,248,252,.97) 0%,rgba(255,248,252,.83) 42%,transparent 72%)}html[data-theme=night] .hero-overlay{background:linear-gradient(90deg,rgba(7,17,38,.97),rgba(7,17,38,.82) 44%,transparent 75%)}.hero-copy{position:relative;z-index:2;max-width:540px}.eyebrow,.section-kicker{display:block;color:var(--primary);font-size:.72rem;font-weight:950;letter-spacing:.11em}.hero h1{font-size:clamp(3rem,7vw,5.8rem);line-height:.82;letter-spacing:-.07em;margin:12px 0 18px;text-shadow:0 3px white}.hero h1 strong{color:var(--primary)}html[data-theme=night] .hero h1{text-shadow:0 3px #081126}.hero p{font-size:1.05rem;line-height:1.55;color:var(--muted);max-width:500px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 17px;border-radius:13px;text-decoration:none;font-weight:900}.primary-button{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 10px 20px color-mix(in srgb,var(--primary) 25%,transparent)}.secondary-button{background:var(--surface);border:1px solid var(--line);color:var(--ink)}.hero-character{position:absolute;right:7%;bottom:-3%;width:min(26vw,280px);filter:drop-shadow(0 18px 20px rgba(32,20,60,.22))}.dashboard-grid{max-width:1260px;margin:auto;display:grid;grid-template-columns:1fr 2fr 1fr;gap:16px}.dashboard-grid article,.all-tools,.page-header,.workspace{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}.quest-card,.quick-card,.progress-card{padding:20px}.quest-card{display:flex;flex-direction:column;justify-content:space-between}.dashboard-grid h2{font-size:1.15rem;margin:10px 0}.dashboard-grid p{color:var(--muted);line-height:1.5;font-size:.88rem}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}.quick-grid a{padding:13px 9px;text-align:center;border:1px solid var(--line);background:var(--surface2);border-radius:15px;text-decoration:none;color:var(--ink)}.quick-grid span{display:block;font-size:1.65rem}.quick-grid b{display:block;font-size:.75rem;margin-top:6px}.quick-grid small{display:none}.path-list{display:grid;gap:13px;margin-top:15px}.path-list>div{display:flex;gap:10px}.path-list>div>b{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.path-list span{display:flex;flex-direction:column}.path-list small{color:var(--muted);line-height:1.4}.all-tools{max-width:1260px;margin:18px auto 0;padding:22px}.section-heading h2{margin:7px 0 18px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tool-card{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--line);background:var(--surface2);border-radius:16px;text-decoration:none;color:var(--ink);transition:.16s}.tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.tool-icon{width:46px;height:46px;border-radius:14px;background:var(--surface);display:grid;place-items:center;font-size:1.45rem}.tool-card b{display:block}.tool-card p{margin:4px 0 0;color:var(--muted);font-size:.78rem;line-height:1.35}.arrow{margin-left:auto;color:var(--primary);font-size:1.2rem}footer{max-width:1260px;margin:18px auto 0;text-align:center;padding:18px;color:var(--muted)}.page-header{max-width:1280px;margin:0 auto 16px;padding:22px;display:grid;grid-template-columns:1fr minmax(260px,420px);gap:20px;align-items:center;background:linear-gradient(135deg,var(--surface),var(--surface2))}.page-header h1{font-size:clamp(1.8rem,4vw,3rem);margin:7px 0}.page-header p{margin:0;color:var(--muted)}.page-help{border-left:1px solid var(--line);padding-left:20px}.page-help p{font-size:.83rem;margin-top:5px;line-height:1.45}.workspace{max-width:1280px;margin:auto;overflow:hidden}.workspace-bar{height:47px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;border-bottom:1px solid var(--line);background:var(--surface2);font-size:.75rem;font-weight:800;color:var(--muted)}.workspace-bar>div{display:flex;align-items:center;gap:7px}.workspace-bar button{width:31px;height:31px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer}.status-dot{width:8px;height:8px;background:#40b86a;border-radius:50%;box-shadow:0 0 0 4px color-mix(in srgb,#40b86a 15%,transparent)}#tool-frame{display:block;width:100%;height:calc(100vh - 190px);min-height:660px;border:0;background:#fff}.theme-panel{display:none;position:fixed;z-index:1300;right:14px;top:72px;width:285px;padding:12px;border:1px solid var(--line);border-radius:19px;background:var(--surface);box-shadow:var(--shadow)}.theme-panel.open{display:grid;gap:8px}.theme-title{display:flex;justify-content:space-between;align-items:center;padding:4px}.theme-title button{border:0;background:none;font-size:1.4rem;color:var(--ink)}.theme-panel>button{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--line);border-radius:13px;background:var(--surface2);color:var(--ink);text-align:left;cursor:pointer}.theme-panel>button span{display:flex;flex-direction:column;flex:1}.theme-panel small{color:var(--muted)}.theme-panel em{opacity:0;font-style:normal;color:var(--primary)}.theme-panel>button.active em{opacity:1}.swatch{width:34px;height:34px;border-radius:10px}.swatch.pixel{background:linear-gradient(135deg,#ff87c4,#8b7aff)}.swatch.garden{background:linear-gradient(135deg,#7ba668,#f0d89b)}.swatch.night{background:linear-gradient(135deg,#071126,#ff65ba)}.mobile-tabs,.drawer-scrim{display:none}.not-found{text-align:center;max-width:600px;margin:80px auto;padding:40px}.not-found>span{font-size:5rem}.not-found h1{font-size:2.5rem}.not-found p{color:var(--muted)}@media(max-width:1180px){.desktop-nav a:nth-child(n+6){display:none}.dashboard-grid{grid-template-columns:1fr 2fr}.progress-card{grid-column:1/-1}.tool-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){body{padding-bottom:76px}.topbar{height:58px;padding:6px 9px}.brand img{width:40px;height:40px}.brand span,.desktop-nav,.language-switch{display:none}.menu-button{display:grid}.app-layout{padding-top:58px}.main-content{margin-left:0;padding:10px}.sidebar{top:0;z-index:1200;width:min(88vw,330px);transform:translateX(-105%);transition:.22s;padding-top:10px;box-shadow:22px 0 45px rgba(0,0,0,.25)}.sidebar.open{transform:none}.sidebar-head{display:flex;align-items:center;gap:10px;padding:8px 7px 15px;border-bottom:1px solid var(--line)}.sidebar-head img{width:50px;height:50px;object-fit:contain}.sidebar-head div{display:flex;flex-direction:column}.sidebar-head small{color:var(--muted);font-size:.7rem}.close-button{margin-left:auto}.drawer-scrim{display:block;position:fixed;inset:0;z-index:1100;background:rgba(5,10,25,.48);opacity:0;pointer-events:none;transition:.2s}.drawer-scrim.open{opacity:1;pointer-events:auto}.mobile-tabs{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);z-index:1050;left:7px;right:7px;bottom:max(7px,env(safe-area-inset-bottom));height:61px;padding:4px;border-radius:18px;background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);box-shadow:0 15px 35px rgba(20,15,55,.24);backdrop-filter:blur(15px)}.mobile-tabs a,.mobile-tabs button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--muted);font-weight:900}.mobile-tabs span{font-size:1.15rem}.mobile-tabs small{font-size:.58rem;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mobile-tabs .active{color:var(--primary)}.hero{min-height:520px;border-radius:20px}.hero-overlay{align-items:flex-start;padding:25px 20px;background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,transparent) 0%,color-mix(in srgb,var(--surface) 80%,transparent) 48%,transparent 74%)}.hero h1{font-size:3.8rem}.hero-character{width:190px;right:5%;bottom:0}.dashboard-grid{grid-template-columns:1fr}.progress-card{grid-column:auto}.quick-grid{grid-template-columns:repeat(2,1fr)}.tool-grid{grid-template-columns:1fr}.page-header{grid-template-columns:1fr;padding:17px}.page-help{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}.workspace{border-radius:17px}#tool-frame{height:calc(100vh - 255px);min-height:570px}.theme-panel{left:9px;right:9px;top:65px;width:auto}}@media(max-width:450px){.hero{min-height:500px}.hero-actions{display:grid}.hero h1{font-size:3.25rem}.all-tools{padding:15px}.tool-card{padding:12px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* =============================================================================
V2.9 Learning Workbench Enhancements
=============================================================================
Shared report controls, responsive dashboard tiles, and application-grade
interaction details. Theme values continue to inherit from the core tokens.
============================================================================= */
.report-button,.workspace-download{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:38px;padding:.45rem .7rem;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);text-decoration:none;font-weight:800;box-shadow:var(--shadow-sm);transition:transform .18s ease,border-color .18s ease}.report-button:hover,.workspace-download:hover{transform:translateY(-1px);border-color:var(--accent)}
.dashboard-tile{position:relative;overflow:hidden;transition:min-height .2s ease,opacity .2s ease,transform .2s ease}.tile-toolbar{position:absolute;z-index:4;top:10px;right:10px;display:flex;gap:5px;opacity:.28;transition:opacity .18s ease}.dashboard-tile:hover .tile-toolbar,.dashboard-tile:focus-within .tile-toolbar{opacity:1}.tile-toolbar button{width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--text);cursor:pointer;font-weight:900}.dashboard-tile.is-dragging{opacity:.55;transform:scale(.985)}.dashboard-tile.is-minimized{min-height:64px!important;height:64px!important}.dashboard-tile.is-minimized>*:not(.tile-toolbar):not(.section-kicker){display:none!important}.dashboard-tile.is-minimized .section-kicker{display:block;margin:8px 70px 0 0}.workspace-download{width:34px;height:32px;min-height:0;padding:0}
@media(max-width:900px){.report-button span{display:none}.report-button{width:40px;padding:0}.tile-toolbar{opacity:1}.dashboard-grid{grid-template-columns:1fr!important}.dashboard-tile{grid-column:auto!important}.workspace{border-radius:16px}}
@media(max-width:600px){.page-header{gap:12px}.page-help{display:none}.workspace-bar{padding:9px 11px}.workspace-bar>div:first-child{font-size:.78rem}.report-button{display:none}}
/* =============================================================================
V2.10 Home Dashboard — Prototype-aligned application shell
=============================================================================
Purpose: Align the public landing workbench with the approved 2026 prototype.
Scope: Shared shell refinements and home-only dashboard composition.
============================================================================= */
.brand-mark{width:42px;height:42px;display:grid;place-items:center;font-size:2rem;filter:drop-shadow(0 4px 6px rgba(0,0,0,.08))}.brand b{line-height:.88;font-size:1.2rem}.brand small{text-transform:uppercase;letter-spacing:.06em;font-size:.6rem;margin-top:6px}.sidebar-collapse{position:absolute;right:-14px;top:14px;width:29px;height:29px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font-size:1.25rem;z-index:2}.hero-stage{max-width:1390px;margin:0 auto 18px;display:grid;grid-template-columns:minmax(0,1fr) 105px;align-items:center;gap:8px}.hero-v210{min-height:390px;border-radius:28px}.hero-v210 .hero-scene{filter:var(--hero-filter);object-position:center}.hero-centered{justify-content:center;text-align:center;padding:34px;background:linear-gradient(90deg,rgba(255,250,245,.12),rgba(255,250,245,.55) 44%,rgba(255,250,245,.08))}.hero-centered .hero-copy{max-width:760px;margin:auto}.hero-v210 h1{font-size:clamp(3.4rem,6vw,6rem);line-height:.95;margin:10px 0 5px;text-shadow:0 2px 0 rgba(255,255,255,.6)}.hero-v210 h1 strong{color:var(--primary)}.jp-tagline{font-weight:900;font-size:clamp(1rem,1.7vw,1.5rem);letter-spacing:.18em}.hero-v210 p{max-width:650px;margin:12px auto 20px;font-size:1rem}.hero-v210 .hero-actions{justify-content:center}.mascot-stand{align-self:end;display:flex;align-items:flex-end;justify-content:center;padding-bottom:24px}.mascot-stand img{width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(33,45,35,.18))}.dashboard-grid-v210{max-width:1390px;grid-template-columns:1.05fr 1.45fr 1.05fr .9fr;gap:14px}.dashboard-grid-v210 article{min-height:280px;padding:18px;border-radius:22px}.tile-head{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding-bottom:12px}.tile-head h2{margin:0;font-size:1.05rem}.tiny-pill{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:.68rem;font-weight:800}.streak-row{display:flex;align-items:center;gap:16px;margin:10px 0 18px}.streak-flower{width:72px;height:72px;display:grid;place-items:center;font-size:1.65rem;font-weight:950;background:#ffbad8;clip-path:polygon(50% 0%,61% 29%,88% 12%,71% 39%,100% 50%,71% 61%,88% 88%,61% 71%,50% 100%,39% 71%,12% 88%,29% 61%,0 50%,29% 39%,12% 12%,39% 29%)}.streak-row div{display:flex;flex-direction:column}.streak-row small{margin-top:5px}.full-button{width:100%;justify-content:space-between}.quick-grid-v210{grid-template-columns:repeat(4,1fr);margin:14px 0}.quick-grid-v210 a{min-height:132px;display:flex;flex-direction:column;justify-content:center}.quick-grid-v210 span{font-size:2.2rem}.quick-grid-v210 b{font-size:.72rem}.stats-strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);padding-top:12px}.stats-strip>div{display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:0 9px;border-right:1px solid var(--line)}.stats-strip>div:last-child{border:0}.stats-strip span{grid-row:1/3;font-size:1.15rem}.stats-strip small{color:var(--muted);font-size:.58rem}.stats-strip b{font-size:.9rem}.path-list-v210{gap:8px}.path-list-v210>div{align-items:center;padding:10px;border-radius:13px;background:var(--surface2);position:relative}.path-list-v210>div>b{flex:none}.path-list-v210 em{margin-left:auto;font-style:normal;color:var(--primary);font-weight:950}.activity-list{display:grid}.activity-list>div{display:flex;gap:9px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}.activity-list>div>span{width:35px;height:35px;border-radius:11px;background:var(--surface2);display:grid;place-items:center}.activity-list p{margin:0;display:flex;flex:1;flex-direction:column;line-height:1.25}.activity-list p b{font-size:.74rem}.activity-list p small{font-size:.66rem;color:var(--muted)}.activity-list time{font-size:.65rem;color:var(--muted)}.history-link{display:block;margin-top:13px;text-align:center;color:var(--ink);font-size:.68rem;font-weight:850;text-decoration:none}
@media(max-width:1250px){.hero-stage{grid-template-columns:1fr}.mascot-stand{display:none}.dashboard-grid-v210{grid-template-columns:1fr 1.4fr 1fr}.activity-card{grid-column:1/-1;min-height:auto!important}.activity-list{grid-template-columns:repeat(3,1fr);gap:12px}.activity-list>div{border:1px solid var(--line);padding:10px;border-radius:12px}.history-link{text-align:right}}
@media(max-width:930px){.hero-v210{min-height:420px}.hero-centered{align-items:center}.hero-v210 h1{font-size:clamp(3rem,11vw,5rem)}.dashboard-grid-v210{grid-template-columns:1fr!important}.activity-card{grid-column:auto}.activity-list{grid-template-columns:1fr}.sidebar-collapse{display:none}}
@media(max-width:600px){.hero-stage{margin-bottom:12px}.hero-v210{min-height:500px;border-radius:20px}.hero-centered{padding:26px 17px;background:linear-gradient(180deg,rgba(255,250,245,.9),rgba(255,250,245,.35) 70%,transparent)}.hero-v210 h1{font-size:3.25rem}.jp-tagline{letter-spacing:.08em}.hero-v210 .hero-actions{display:grid}.dashboard-grid-v210 article{min-height:auto}.quick-grid-v210{grid-template-columns:repeat(2,1fr)}.stats-strip{grid-template-columns:1fr;gap:8px}.stats-strip>div{border-right:0;border-bottom:1px solid var(--line);padding:7px 0}.stats-strip>div:last-child{border-bottom:0}}
/* =============================================================================
V2.11 Approved Home Workbench Baseline
=============================================================================
Purpose:
Locks the public dashboard to the approved prototype composition, uses
the dedicated brand artwork, and keeps the mascot outside the hero art.
============================================================================= */
.brand{width:300px;max-width:23vw;height:52px}.brand-wordmark{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:left center}.hero-stage{grid-template-columns:minmax(0,1fr) 112px;gap:14px}.hero-v210{margin:0;max-width:none;min-height:385px}.mascot-stand{position:relative;overflow:visible;padding:0 0 20px}.mascot-stand img{width:118px;max-width:none;transform:translateX(-2px);filter:drop-shadow(0 12px 10px rgba(31,45,37,.22))}.hero-centered{background:linear-gradient(90deg,rgba(255,250,245,.08),rgba(255,250,245,.48) 48%,rgba(255,250,245,.06))}.hero-v210 h1{color:#173f30}.hero-v210 h1 strong{color:#4f9550}.dashboard-grid-v210{align-items:stretch}.dashboard-grid-v210 article{box-shadow:0 9px 26px color-mix(in srgb,var(--ink) 8%,transparent)}
html[data-theme=night] .hero-v210 h1{color:#f7f4ff}html[data-theme=night] .hero-v210 h1 strong{color:#72d590}html[data-theme=night] .hero-centered{background:linear-gradient(90deg,rgba(7,17,38,.08),rgba(7,17,38,.44) 48%,rgba(7,17,38,.08))}
@media(max-width:1380px){.brand{width:250px}.desktop-nav a{padding-inline:7px}.hero-stage{grid-template-columns:minmax(0,1fr) 96px}.mascot-stand img{width:102px}}
@media(max-width:1120px){.brand{width:220px}.hero-stage{grid-template-columns:1fr}.mascot-stand{display:none}}
@media(max-width:800px){.brand{width:175px;max-width:55vw;height:44px}.brand-wordmark{object-position:left center}.hero-v210{min-height:480px}}
/* ========================================================================
V2.12 — STATIC PUBLIC HOME GUIDANCE
------------------------------------------------------------------------
Removes account-style scoring from the public home page, strengthens hero
copy contrast, and restores practical guidance cards and resource links.
======================================================================== */
.hero-subtitle{color:#294534!important;font-weight:650;text-shadow:0 1px 1px rgba(255,255,255,.85),0 0 12px rgba(255,255,255,.55)}
html[data-theme=pixel] .hero-subtitle{color:#343354!important}
html[data-theme=garden] .hero-subtitle{color:#294534!important}
html[data-theme=night] .hero-subtitle{color:#eef3ff!important;text-shadow:0 2px 10px rgba(0,0,0,.65)}
.dashboard-grid-static{max-width:1390px;margin:0 auto 18px;display:grid;grid-template-columns:1.05fr 2fr 1.05fr;gap:16px;align-items:stretch}
.guidance-card{min-height:292px;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 9px 26px color-mix(in srgb,var(--ink) 8%,transparent)}
.guidance-card h2{margin:10px 0 12px;font-size:1.2rem;line-height:1.25}
.guidance-card>p{color:var(--muted);line-height:1.55;margin:0 0 20px}
.quest-guide{display:flex;flex-direction:column}.quest-guide .full-button{margin-top:auto}
.quick-grid-static{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:17px}
.quick-grid-static a{min-height:112px;padding:13px 8px;border:1px solid var(--line);border-radius:16px;background:var(--surface2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;text-decoration:none;color:var(--ink);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.quick-grid-static a:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 8px 18px color-mix(in srgb,var(--primary) 14%,transparent)}
.quick-grid-static span{font-size:2rem}.quick-grid-static b{font-size:.72rem;line-height:1.2}
.static-path-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.static-path-list li{display:flex;align-items:flex-start;gap:11px;padding:12px;border-radius:15px;background:var(--surface2)}
.static-path-list li>b{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.static-path-list span{display:flex;flex-direction:column;gap:3px}.static-path-list strong{font-size:.86rem}.static-path-list small{color:var(--muted);line-height:1.35}
.resource-catalog{max-width:1390px;margin:0 auto;padding:24px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 9px 26px color-mix(in srgb,var(--ink) 8%,transparent)}
.resource-heading{display:flex;justify-content:space-between;gap:20px;margin:8px 0 18px}.resource-heading h2{margin:0 0 5px;font-size:1.35rem}.resource-heading p{margin:0;color:var(--muted)}
.resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.resource-link{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:86px;padding:13px;border:1px solid var(--line);border-radius:16px;background:var(--surface2);text-decoration:none;color:var(--ink);transition:transform .16s ease,border-color .16s ease}
.resource-link:hover{transform:translateY(-2px);border-color:var(--primary)}.resource-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:var(--surface);font-size:1.4rem}.resource-link>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}.resource-link b{font-size:.85rem}.resource-link small{color:var(--muted);font-size:.69rem;line-height:1.35}.resource-link em{font-style:normal;color:var(--primary);font-weight:900}
@media(max-width:1180px){.dashboard-grid-static{grid-template-columns:1fr 1.5fr}.path-guide{grid-column:1/-1;min-height:auto}.static-path-list{grid-template-columns:repeat(3,1fr)}.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.dashboard-grid-static{grid-template-columns:1fr}.path-guide{grid-column:auto}.static-path-list{grid-template-columns:1fr}.resource-grid{grid-template-columns:1fr}.quick-grid-static{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.guidance-card,.resource-catalog{padding:17px}.quick-grid-static{grid-template-columns:repeat(2,minmax(0,1fr))}.resource-link{grid-template-columns:40px minmax(0,1fr) auto}}
/* =============================================================================
V2.13 Kana Dojo workbench
============================================================================= */
.kana-heading,.modes-card,.kana-guide-grid,.kana-workspace{max-width:1390px;margin-left:auto;margin-right:auto}
.kana-heading{padding:28px 30px 12px}.kana-heading h1{margin:7px 0 8px;font-size:clamp(2.2rem,4vw,3.7rem)}.kana-heading p{max-width:820px;margin:0;color:var(--muted);font-size:1.02rem;line-height:1.6}
.modes-card{display:grid;grid-template-columns:1.05fr 1fr 1.15fr;gap:14px;margin-top:10px;padding:20px;border:1px solid var(--line);border-radius:24px;background:var(--surface);box-shadow:0 12px 32px color-mix(in srgb,var(--ink) 9%,transparent)}
.modes-card__intro{padding:7px 10px}.modes-card__intro h2{margin:8px 0 9px;font-size:1.45rem}.modes-card__intro p,.mode-option p{margin:0;color:var(--muted);line-height:1.55}
.mode-option{display:flex;gap:14px;padding:18px;border:1px solid var(--line);border-radius:19px;background:var(--surface2)}.mode-option--download{background:linear-gradient(145deg,var(--surface2),color-mix(in srgb,var(--primary) 10%,var(--surface)))}.mode-option__icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;background:var(--surface);font-size:1.5rem}.mode-option h3{margin:2px 0 7px;font-size:1rem}.offline-download{display:inline-flex;margin-top:14px;text-decoration:none;align-items:center;justify-content:center}
.kana-guide-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:16px}.kana-instructions,.kana-tips{padding:23px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:0 10px 26px color-mix(in srgb,var(--ink) 7%,transparent)}.kana-instructions h2,.kana-tips h2{margin:8px 0 14px;font-size:1.3rem}.kana-instructions ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}.kana-instructions li{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:15px;background:var(--surface2);color:var(--muted);line-height:1.5}.kana-instructions li b{width:31px;height:31px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}.kana-tip-list{display:grid;gap:10px}.kana-tip{display:flex;gap:12px;padding:12px;border-radius:15px;background:var(--surface2)}.kana-tip>span{font-size:1.45rem}.kana-tip h3{margin:0 0 4px;font-size:.94rem}.kana-tip p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.45}
.kana-workspace{margin-top:16px;margin-bottom:34px}.kana-workspace__bar>div:first-child{display:flex;align-items:center;gap:10px}.kana-workspace__bar small{display:block;color:var(--muted);font-weight:500;margin-top:2px}.kana-frame{height:980px;background:#fff}.workspace.kana-workspace{border-radius:22px;overflow:hidden}
@media(max-width:1100px){.modes-card{grid-template-columns:1fr 1fr}.modes-card__intro{grid-column:1/-1}.kana-guide-grid{grid-template-columns:1fr}}
@media(max-width:720px){.kana-heading{padding:21px 17px 8px}.modes-card{grid-template-columns:1fr;margin:8px 12px 0;padding:13px}.modes-card__intro{grid-column:auto}.kana-guide-grid,.kana-workspace{margin-left:12px;margin-right:12px}.kana-instructions,.kana-tips{padding:17px}.kana-workspace__bar small{display:none}.kana-frame{height:1150px}}
/* =============================================================================
Kana Dojo native Flask workbench — V2.14
============================================================================= */
.kana-native{margin-top:22px;border:1px solid var(--border);border-radius:26px;background:var(--panel);box-shadow:var(--shadow);overflow:hidden}.kana-native__header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}.kana-native__header>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.kana-native__header small{grid-column:2;color:var(--muted)}.kana-practice-grid{display:grid;grid-template-columns:minmax(230px,280px) minmax(520px,1fr) minmax(220px,270px);gap:18px;padding:20px}.kana-control-card,.kana-board-card,.kana-session-card{border:1px solid var(--border);border-radius:22px;background:var(--surface);padding:18px}.kana-current-word{text-align:center;font-size:clamp(2.6rem,5vw,4.6rem);font-weight:900;line-height:1;margin:18px 0;color:var(--ink)}.kana-script-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:14px;padding:4px;background:var(--panel)}.kana-script-switch button{border:0;border-radius:10px;padding:10px;background:transparent;color:var(--ink);font-weight:800}.kana-script-switch button.active{background:var(--accent);color:white}.kana-answer{min-height:58px;margin:16px 0 8px;border:2px dashed var(--border);border-radius:14px;display:grid;place-items:center;font-size:2rem;font-weight:900}.kana-feedback{min-height:44px;color:var(--muted);font-weight:700}.kana-feedback.is-good{color:#2d8b57}.kana-feedback.is-bad{color:#c84662}.kana-control-stack{display:grid;gap:10px}.kana-control-stack label{display:grid;gap:6px;font-weight:800}.kana-control-stack select{width:100%;padding:10px;border:1px solid var(--border);border-radius:12px;background:var(--panel);color:var(--ink)}.kana-board-card{overflow:auto}.kana-board{display:grid;gap:10px;min-width:620px}.kana-row{display:grid;grid-template-columns:110px repeat(5,minmax(82px,1fr));gap:8px}.kana-row-label{border-radius:14px;display:grid;place-items:center;padding:8px;color:white;background:linear-gradient(135deg,var(--accent),var(--accent-2));text-align:center}.kana-row-label small{opacity:.8}.kana-tile{min-height:112px;border:1px solid var(--border);border-radius:15px;background:color-mix(in srgb,var(--accent) 10%,var(--panel));color:var(--ink);display:grid;place-items:center;align-content:center;gap:3px;padding:8px;cursor:pointer;transition:.16s ease}.kana-tile:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.08)}.kana-tile.selected{outline:3px solid var(--accent)}.kana-symbol{font-size:2rem;font-weight:900}.kana-picture{font-size:1.5rem}.kana-tile small{font-weight:800;color:var(--muted)}.kana-session-card h2{margin:.35rem 0 1rem}.kana-session-card ul{padding-left:1.2rem;color:var(--muted);line-height:1.55}.kana-result-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.kana-result-summary div{border:1px solid var(--border);border-radius:15px;padding:12px;text-align:center;background:var(--panel)}.kana-result-summary span{display:block;font-size:1.7rem;font-weight:900}.kana-result-summary small{color:var(--muted)}.kana-history h3{margin:0 0 10px}.kana-history-item{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding:9px 0}.kana-history-item span{display:grid}.kana-history-item small{color:var(--muted)}.kana-history-item strong{font-size:1.3rem;color:var(--accent)}
@media(max-width:1250px){.kana-practice-grid{grid-template-columns:260px 1fr}.kana-session-card{grid-column:1/-1}.kana-session-card{display:grid;grid-template-columns:1fr 1fr;gap:18px}.kana-session-card .section-kicker,.kana-session-card h2{grid-column:1/-1}}
@media(max-width:850px){.kana-practice-grid{grid-template-columns:1fr;padding:12px}.kana-session-card{grid-column:auto;display:block}.kana-native__header{align-items:flex-start;flex-direction:column}.kana-board-card{padding:10px}}
/* =============================================================================
Kana Dojo V2.15 controls, scoring, and review components
============================================================================= */
button{font:inherit}.workbench-button,.mini-button{appearance:none;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 94%,white),var(--surface2));color:var(--ink);border-radius:13px;padding:10px 13px;font-weight:900;cursor:pointer;box-shadow:0 4px 10px color-mix(in srgb,var(--ink) 8%,transparent);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}.workbench-button:hover,.mini-button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 45%,var(--line));box-shadow:0 8px 17px color-mix(in srgb,var(--ink) 11%,transparent)}.workbench-button:active,.mini-button:active{transform:translateY(1px)}.workbench-button--primary{background:linear-gradient(135deg,var(--primary),var(--secondary));border-color:transparent;color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--primary) 28%,transparent)}.workbench-button--accent{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 92%,white),color-mix(in srgb,var(--secondary) 72%,var(--accent)));border-color:transparent;color:#fff}.workbench-button--quiet{background:var(--surface)}.workbench-button.is-on{background:color-mix(in srgb,var(--primary) 15%,var(--surface));border-color:color-mix(in srgb,var(--primary) 55%,var(--line));color:var(--primary)}.mini-button{padding:7px 10px;border-radius:10px;font-size:.72rem}.kana-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.kana-score-grid>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:13px;background:var(--surface2)}.kana-score-grid>div.wide{grid-column:1/-1}.kana-score-grid small{color:var(--muted);font-weight:800}.kana-score-grid strong{font-size:1rem}.kana-review-box{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.kana-review-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.kana-review-heading h3{margin:0}.kana-missed-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}.missed-chip{appearance:none;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);padding:8px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;cursor:pointer;text-align:left}.missed-chip span{font-size:1.4rem}.missed-chip small{color:var(--primary);font-weight:900}.empty-state{color:var(--muted);font-size:.78rem;margin:8px 0}.kana-history{margin-top:16px}.kana-history-item strong.ok{color:#2d9b58}.kana-history-item strong.no{color:#d34d67}.kana-tile.right{outline:3px solid #41b96d;background:color-mix(in srgb,#41b96d 14%,var(--panel))}.kana-tile.wrong{outline:3px solid #df5472;background:color-mix(in srgb,#df5472 12%,var(--panel))}.kana-control-stack .workbench-button{width:100%}
@media(max-width:1250px){.kana-score-grid{grid-template-columns:repeat(5,1fr)}.kana-score-grid>div.wide{grid-column:auto}.kana-missed-list{grid-template-columns:repeat(6,1fr)}}
@media(max-width:850px){.kana-score-grid{grid-template-columns:1fr 1fr}.kana-score-grid>div.wide{grid-column:1/-1}.kana-missed-list{grid-template-columns:repeat(3,1fr)}}
/* =============================================================================
Kana Dojo V2.16 — complete bilingual game-history panel
============================================================================= */
.kana-history .kana-review-heading{align-items:flex-start}.kana-history .kana-review-heading p{margin:.25rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.4}.kana-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:9px;margin-top:12px;max-height:420px;overflow:auto;padding-right:3px}.kana-history-item{border:1px solid var(--line);border-radius:14px;padding:10px 11px;background:var(--surface2);display:flex;justify-content:space-between;align-items:center;gap:10px}.kana-history-item:first-child{border-top:1px solid var(--line)}.kana-history-copy{min-width:0}.kana-history-main{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px}.kana-history-main b{font-size:.92rem}.kana-history-kana{font-size:1.28rem;font-weight:900}.kana-history-translation{display:block;margin-top:3px;color:var(--muted);font-style:italic;line-height:1.25}.kana-history-result{display:grid;justify-items:center;gap:2px;flex:0 0 auto}.kana-history-result strong{font-size:1.35rem}.kana-history-result small{color:var(--muted);font-size:.64rem}@media(max-width:1250px){.kana-history-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));max-height:none}}@media(max-width:600px){.kana-history-grid{grid-template-columns:1fr}.kana-history .kana-review-heading{align-items:flex-start;flex-direction:column}.kana-history .mini-button{width:100%}}
/* =============================================================================
Kana Dojo V2.17 — row-help column and adaptive tile workspace
=============================================================================
Purpose:
Keeps the complete kana board visible without nested horizontal scrollbars,
restores the color-coded row-help column, and provides a user-selectable
compact density that works across every shared application theme.
============================================================================= */
.kana-board-card{overflow:visible;min-width:0}
.kana-board{width:100%;min-width:0;gap:8px}
.kana-row{grid-template-columns:clamp(72px,8vw,104px) repeat(5,minmax(0,1fr));gap:7px;min-width:0}
.kana-row:not(:has(.kana-row-label)){grid-template-columns:repeat(5,minmax(0,1fr))}
.kana-row-label{min-width:0;min-height:clamp(82px,7vw,108px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 5px 12px color-mix(in srgb,var(--ink) 9%,transparent)}
.kana-row-label strong{font-size:clamp(.68rem,.78vw,.9rem);line-height:1.15}.kana-row-label small{text-transform:uppercase;font-weight:900}
.kana-row-label--v{background:#4ea6a6}.kana-row-label--k,.kana-row-label--g{background:#6aa66a}.kana-row-label--s,.kana-row-label--z{background:#d8a24a}.kana-row-label--t,.kana-row-label--d{background:#c56b62}.kana-row-label--n{background:#9b7acb}.kana-row-label--h,.kana-row-label--b,.kana-row-label--p{background:#56a9bd}.kana-row-label--m{background:#d0b45f}.kana-row-label--y{background:#c9789c}.kana-row-label--r{background:#a87855}.kana-row-label--w,.kana-row-label--mix{background:#87909a}
.kana-tile{width:100%;min-width:0;min-height:clamp(82px,7vw,108px);padding:clamp(4px,.55vw,8px);overflow:hidden}
.kana-symbol{font-size:clamp(1.45rem,2.1vw,2rem);line-height:1}.kana-picture{font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1}.kana-tile small{max-width:100%;font-size:clamp(.55rem,.65vw,.72rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kana-tile--empty{cursor:default;opacity:.36;border-style:dashed;background:color-mix(in srgb,var(--surface2) 70%,transparent);box-shadow:none}.kana-tile--empty:hover{transform:none;box-shadow:none}
.kana-board.is-compact{gap:5px}.kana-board.is-compact .kana-row{grid-template-columns:clamp(58px,6.5vw,82px) repeat(5,minmax(0,1fr));gap:5px}.kana-board.is-compact .kana-row:not(:has(.kana-row-label)){grid-template-columns:repeat(5,minmax(0,1fr))}.kana-board.is-compact .kana-row-label,.kana-board.is-compact .kana-tile{min-height:72px}.kana-board.is-compact .kana-symbol{font-size:1.4rem}.kana-board.is-compact .kana-picture{font-size:1.05rem}.kana-board.is-compact .kana-tile small{font-size:.56rem}
body.theme-night .kana-row-label{color:#081018;filter:saturate(.9) brightness(1.12)}
body.theme-garden .kana-row-label{color:#173d2c;filter:saturate(.78) brightness(1.08)}
body.theme-pixel .kana-row-label{color:#251747;filter:saturate(.9) brightness(1.08)}
@media(max-width:1250px){.kana-board{gap:6px}.kana-row{grid-template-columns:76px repeat(5,minmax(0,1fr));gap:5px}.kana-row-label,.kana-tile{min-height:82px}.kana-symbol{font-size:1.55rem}.kana-picture{font-size:1.15rem}.kana-tile small{font-size:.58rem}}
@media(max-width:850px){.kana-board-card{padding:10px}.kana-row{grid-template-columns:70px repeat(5,minmax(0,1fr));gap:5px}.kana-row-label,.kana-tile{min-height:78px}}
@media(max-width:560px){.kana-practice-grid{padding:8px}.kana-board-card{padding:7px}.kana-board{gap:4px}.kana-row{grid-template-columns:52px repeat(5,minmax(0,1fr));gap:3px}.kana-row-label,.kana-tile{min-height:64px;border-radius:10px}.kana-row-label{padding:3px}.kana-row-label strong{font-size:.56rem}.kana-row-label small{font-size:.5rem}.kana-tile{padding:3px}.kana-symbol{font-size:1.18rem}.kana-picture{font-size:.9rem}.kana-tile small{font-size:.46rem}.kana-board.is-compact .kana-row{grid-template-columns:44px repeat(5,minmax(0,1fr));gap:2px}.kana-board.is-compact .kana-row-label,.kana-board.is-compact .kana-tile{min-height:56px}}
/* =============================================================================
Kana Dojo V2.18 — draggable and resizable workbench tiles
=============================================================================
Purpose:
Gives the native Kana Dojo the same flexible workbench behavior used by the
ALM Hub: users can drag the major workspace tiles into a preferred order,
resize them within safe limits, and restore the default canvas at any time.
============================================================================= */
.kana-native__actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kana-native{overflow:visible}
.kana-practice-grid{display:flex!important;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:16px;min-width:0;overflow:visible;padding-bottom:28px}
.kana-workbench-tile{position:relative;box-sizing:border-box;min-width:240px;max-width:100%;height:auto!important;min-height:0;resize:none;overflow:visible;transition:box-shadow .16s ease,border-color .16s ease,opacity .16s ease;flex:0 0 auto}
.kana-control-card{flex-basis:285px;width:285px}
.kana-board-card{flex-basis:620px;width:620px;min-width:min(520px,100%)}
.kana-session-card{flex-basis:305px;width:305px}
.kana-workbench-tile.is-dragging{opacity:.55;border-style:dashed;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 28%,transparent)}
.kana-workbench-tile.is-drop-target{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent),var(--shadow)}
.kana-tile-toolbar{display:flex;align-items:center;gap:8px;min-height:34px;margin:-4px -4px 10px;padding:6px 8px;border-bottom:1px solid var(--line);color:var(--muted);font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;user-select:none}
.kana-drag-handle{display:grid;place-items:center;width:26px;height:24px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--primary);font-size:1rem;cursor:grab;touch-action:none}
.kana-drag-handle:active{cursor:grabbing}.kana-resize-hint{margin-left:auto;display:grid;place-items:center;width:28px;height:26px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--primary);opacity:1;cursor:ew-resize;touch-action:none}.kana-workbench-tile.is-resizing{user-select:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 24%,transparent),var(--shadow)}
.kana-workbench-tile::after{content:"";position:absolute;right:5px;bottom:5px;width:12px;height:12px;border-right:3px solid color-mix(in srgb,var(--primary) 72%,transparent);border-bottom:3px solid color-mix(in srgb,var(--primary) 72%,transparent);border-radius:0 0 3px 0;pointer-events:none}
.kana-board-card .kana-board{min-width:0}.kana-session-card .kana-history-grid{max-height:none;overflow:visible}
body.theme-pixel .kana-tile-toolbar{background:color-mix(in srgb,#fff 75%,var(--surface2));color:#5d4779}
body.theme-garden .kana-tile-toolbar{background:color-mix(in srgb,#fffaf0 82%,var(--surface2));color:#526b59}
body.theme-night .kana-tile-toolbar{background:color-mix(in srgb,#101a34 82%,var(--surface2));color:#b8c6ea}
@media(max-width:1250px){.kana-control-card{width:270px;flex-basis:270px}.kana-board-card{width:calc(100% - 300px);flex-basis:calc(100% - 300px)}.kana-session-card{width:100%;flex-basis:100%}}
@media(max-width:850px){.kana-practice-grid{display:grid!important;grid-template-columns:1fr}.kana-workbench-tile,.kana-control-card,.kana-board-card,.kana-session-card{width:100%!important;min-width:0;max-width:100%;flex-basis:auto}.kana-resize-hint{display:none}.kana-tile-toolbar{position:sticky;top:0;z-index:3}.kana-native__actions{width:100%}.kana-native__actions .workbench-button{flex:1 1 180px}}
@media(pointer:coarse){.kana-drag-handle{width:34px;height:30px}}
/* =============================================================================
90-Day Tracker V2.19 — native flexible workbench
============================================================================= */
.tracker-heading{padding-bottom:8px}.tracker-modes{margin-top:8px}.tracker-guide{margin:16px 0;padding:23px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}.tracker-guide h2{margin:8px 0 14px}.tracker-guide ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.tracker-guide li{display:flex;gap:10px;padding:13px;border-radius:15px;background:var(--surface2);color:var(--muted);line-height:1.45}.tracker-guide li b{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.tracker-native{margin:16px 0 36px;border:1px solid var(--line);border-radius:24px;background:var(--surface2);overflow:hidden}.tracker-native__header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--surface)}.tracker-native__header>div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.tracker-native__header small{display:block;width:100%;margin-left:18px;color:var(--muted)}.tracker-native__actions{display:flex;gap:8px;flex-wrap:wrap}.tracker-canvas{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:16px;padding:16px;min-width:0}.tracker-tile{position:relative;box-sizing:border-box;min-width:250px;max-width:100%;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);flex:0 0 auto}.tracker-summary-tile{width:390px;flex-basis:390px;min-height:390px}.tracker-calendar-tile{width:min(760px,100%);flex-basis:min(760px,100%);min-width:320px;min-height:720px}.tracker-notes-tile{width:340px;flex-basis:340px;min-height:500px}.tracker-tile-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;min-height:40px;padding:7px 9px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,var(--primary));color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.055em;user-select:none}.tracker-drag-handle{display:grid;place-items:center;width:28px;height:26px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--primary);cursor:grab}.tracker-resize-hint{margin-left:auto;display:grid;place-items:center;width:28px;height:26px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--primary);cursor:ew-resize;touch-action:none}.tracker-tile.is-resizing{user-select:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 24%,transparent),var(--shadow)}.tracker-minimize{border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);font-weight:900;cursor:pointer}.tracker-tile-body{padding:16px}.tracker-tile.is-minimized{height:42px!important;min-height:42px!important;overflow:hidden}.tracker-tile.is-minimized .tracker-tile-body{display:none}.tracker-tile.is-dragging{opacity:.5}.tracker-tile.is-drop-target{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 24%,transparent),var(--shadow)}
.tracker-setup{display:grid;gap:9px}.tracker-setup label,.tracker-notes-label{display:grid;gap:6px;color:var(--muted);font-weight:800}.tracker-setup input{width:100%;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);font:inherit}.tracker-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.tracker-metrics>div{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}.tracker-metrics small{display:block;color:var(--muted)}.tracker-metrics strong{font-size:1.25rem}.tracker-progress{height:13px;margin:15px 0;border-radius:99px;background:var(--surface2);overflow:hidden}.tracker-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .25s}.tracker-legend{display:flex;gap:8px;flex-wrap:wrap}.tracker-legend span{display:flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid var(--line);border-radius:99px;color:var(--muted);font-size:.72rem}.tracker-legend i{width:10px;height:10px;border-radius:50%}.tracker-legend .today{background:#ffd76b}.tracker-legend .complete{background:#7bcf8d}.tracker-legend .deferred{background:#b98ae6}
.tracker-calendar{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}.tracker-month{grid-column:1/-1;margin:10px 0 0;padding:8px 2px;border-bottom:1px solid var(--line);text-transform:capitalize}.tracker-day{padding:14px;border:1px solid var(--line);border-radius:17px;background:var(--surface2)}.tracker-day.is-complete{background:color-mix(in srgb,#7bcf8d 20%,var(--surface))}.tracker-day.is-deferred{box-shadow:inset 4px 0 #a875d7}.tracker-day.is-today{outline:3px solid color-mix(in srgb,#ffd76b 72%,transparent)}.tracker-day-head{display:flex;justify-content:space-between;gap:9px}.tracker-day-head strong{font-size:1.05rem}.tracker-day-head small{display:block;color:var(--primary);font-weight:800}.tracker-day-head time{text-align:right;color:var(--muted);font-size:.75rem}.tracker-day-focus{margin:10px 0 3px;font-weight:900}.tracker-day-time,.tracker-day-status{color:var(--muted)}.tracker-day ul{padding-left:19px;line-height:1.45}.tracker-day-actions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}.tracker-day-actions .workbench-button{flex:1 1 110px;padding:8px}.tracker-native.is-compact .tracker-day ul,.tracker-native.is-compact .tracker-day-time{display:none}.tracker-native.is-compact .tracker-calendar{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}.tracker-native.is-compact .tracker-day{padding:10px}
.tracker-notes-label textarea{min-height:220px;resize:vertical;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);color:var(--ink);font:inherit;line-height:1.5}.tracker-guidance{margin-top:16px;padding:14px;border-radius:15px;background:var(--surface2)}.tracker-guidance h3{margin-top:0}.tracker-guidance li{margin:8px 0;color:var(--muted)}
body.theme-night .tracker-tile-toolbar{background:#111c38;color:#c5d0ef}body.theme-night .tracker-day.is-complete{background:color-mix(in srgb,#57c882 22%,#101a34)}body.theme-garden .tracker-tile-toolbar{background:#f5f4df;color:#53675a}body.theme-pixel .tracker-tile-toolbar{background:#fff0fa;color:#6a4f80}
@media(max-width:1100px){.tracker-guide ol{grid-template-columns:1fr 1fr}.tracker-summary-tile{width:320px}.tracker-calendar-tile{width:min(100%,760px)}.tracker-notes-tile{width:340px}}
@media(max-width:760px){.tracker-guide ol{grid-template-columns:1fr}.tracker-native__header{align-items:flex-start;flex-direction:column}.tracker-native__actions{width:100%}.tracker-native__actions button{flex:1}.tracker-canvas{display:grid;grid-template-columns:1fr;padding:10px}.tracker-tile,.tracker-summary-tile,.tracker-calendar-tile,.tracker-notes-tile{width:100%!important;min-width:0;flex-basis:auto!important}.tracker-resize-hint{display:none}.tracker-calendar{grid-template-columns:1fr}.tracker-metrics{grid-template-columns:1fr 1fr}}
@media print{.tij-appbar,.tij-sidebar,.tracker-heading,.tracker-modes,.tracker-guide,.tracker-native__header,.tracker-tile-toolbar,.tracker-summary-tile,.tracker-notes-tile,.tracker-day-actions{display:none!important}.tij-content{margin:0!important}.tracker-native,.tracker-calendar-tile,.tracker-tile{border:0;box-shadow:none;width:100%!important;height:auto!important;overflow:visible!important}.tracker-calendar{grid-template-columns:repeat(3,1fr)}.tracker-day{break-inside:avoid;font-size:9pt}}
/* =============================================================================
Phrase decks V2.20 — native flexible workbench
============================================================================= */
.phrase-heading{padding-bottom:8px}.phrase-modes{margin-top:8px}.phrase-guide{margin:16px 0;padding:22px;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow)}.phrase-guide ol{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.phrase-guide li{display:flex;gap:10px;padding:13px;border-radius:15px;background:var(--surface2);color:var(--muted);line-height:1.45}.phrase-guide li b{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff}
.phrase-native{margin:16px 0 36px;border:1px solid var(--line);border-radius:24px;background:var(--surface2);overflow:hidden}.phrase-native__header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);background:var(--surface)}.phrase-native__header>div:first-child{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.phrase-native__header small{display:block;width:100%;margin-left:18px;color:var(--muted)}.phrase-native__actions{display:flex;gap:8px;flex-wrap:wrap}
.phrase-canvas{display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:16px;padding:16px;min-width:0}.phrase-workbench-tile{position:relative;box-sizing:border-box;min-width:250px;max-width:100%;resize:none;overflow:visible;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);flex:0 0 auto}.phrase-controls-tile{width:330px;flex-basis:330px;min-height:430px}.phrase-deck-tile{width:min(760px,100%);flex-basis:min(760px,100%);min-height:620px}.phrase-notes-tile{width:340px;flex-basis:340px;min-height:460px}.phrase-tile-toolbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;min-height:42px;padding:7px 9px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,var(--primary));color:var(--muted);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.055em;user-select:none;border-radius:19px 19px 0 0}.phrase-drag-handle{display:grid;place-items:center;width:29px;height:27px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--primary);cursor:grab}.phrase-minimize{border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--ink);font-weight:900;cursor:pointer}.phrase-resize-hint{margin-left:auto;display:grid;place-items:center;width:29px;height:27px;border:1px solid var(--line);border-radius:8px;background:var(--surface2);color:var(--primary);cursor:ew-resize;touch-action:none}.phrase-workbench-tile.is-resizing{user-select:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 22%,transparent),var(--shadow)}.phrase-tile-body{padding:16px;min-width:0}.phrase-workbench-tile.is-minimized{height:43px!important;min-height:43px!important;resize:none;overflow:hidden}.phrase-workbench-tile.is-minimized .phrase-tile-body{display:none}.phrase-workbench-tile.is-dragging{opacity:.5}.phrase-workbench-tile.is-drop-target{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 24%,transparent),var(--shadow)}
.phrase-tile-body label{display:grid;gap:6px;margin-bottom:12px;color:var(--muted);font-weight:800}.phrase-tile-body input,.phrase-tile-body select,.phrase-notes-label textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);color:var(--ink);font:inherit}.phrase-control-stack{display:grid;gap:8px}.phrase-control-stack .workbench-button{width:100%}.workbench-button.is-active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border-color:transparent}.phrase-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.phrase-metrics>div{padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}.phrase-metrics small{display:block;color:var(--muted)}.phrase-metrics strong{font-size:1.35rem}.phrase-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.phrase-card-native{border:1px solid var(--line);border-radius:17px;background:var(--surface2);overflow:hidden;transition:transform .15s ease,border-color .15s ease}.phrase-card-native:hover{transform:translateY(-2px);border-color:var(--primary)}.phrase-card-native.is-memorized{box-shadow:inset 4px 0 #55b878}.phrase-card-native header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line)}.phrase-number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:900}.phrase-japanese{font-size:1.25rem;font-weight:900;line-height:1.35}.phrase-memory-toggle,.phrase-speak{border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer;padding:7px 9px}.phrase-card-fields{display:grid;gap:9px;padding:12px}.phrase-card-fields>div{display:grid;gap:3px}.phrase-card-fields small{color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;font-size:.67rem}.phrase-card-fields strong{font-size:.9rem;line-height:1.4}.phrase-card-native footer{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}.phrase-card-native footer span{padding:5px 8px;border-radius:99px;background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary);font-size:.72rem;font-weight:900}.phrase-empty{padding:30px;text-align:center;color:var(--muted)}.phrase-guidance{padding:14px;border-radius:15px;background:var(--surface2)}.phrase-guidance h3{margin-top:0}.phrase-guidance p,.phrase-guidance li{color:var(--muted);line-height:1.5}.phrase-notes-label{margin-top:15px}.phrase-notes-label textarea{min-height:180px;resize:vertical;line-height:1.5}
body.theme-night .phrase-tile-toolbar{background:#111c38;color:#c5d0ef}body.theme-garden .phrase-tile-toolbar{background:#f5f4df;color:#53675a}body.theme-pixel .phrase-tile-toolbar{background:#fff0fa;color:#6a4f80}
@media(max-width:1050px){.phrase-guide ol{grid-template-columns:1fr 1fr}.phrase-workbench-tile{min-width:240px}}
@media(max-width:760px){.phrase-guide ol{grid-template-columns:1fr}.phrase-native__header{align-items:flex-start;flex-direction:column}.phrase-native__actions{width:100%}.phrase-native__actions button{flex:1}.phrase-canvas{display:grid;grid-template-columns:1fr;padding:10px}.phrase-workbench-tile,.phrase-controls-tile,.phrase-deck-tile,.phrase-notes-tile{width:100%!important;min-width:0;resize:none;flex-basis:auto!important}.phrase-list{grid-template-columns:1fr}}
/*=============================================================================
V2.21 native Reading Aid, Frequency Deck, and Study Plan workbenches
=============================================================================*/
.study-native{margin:24px 0 40px;border:1px solid var(--line);border-radius:24px;background:var(--panel);overflow:hidden}.study-native__header{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}.study-native__header>div{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.study-native__header small{grid-column:2;color:var(--muted)}.study-canvas{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;padding:20px;min-width:0}.study-workbench-tile{position:relative;flex:1 1 340px;min-width:260px;max-width:100%;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.study-deck-tile{flex-basis:620px}.study-tile-toolbar{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.study-drag-handle{cursor:grab;padding:6px 9px;border:1px solid var(--line);border-radius:10px}.study-drag-handle:active{cursor:grabbing}.study-minimize{margin-left:auto;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);width:30px;height:30px}.study-resize-hint{cursor:ew-resize;color:var(--accent);padding:7px}.study-tile-body{padding:20px}.study-tile-body label{display:grid;gap:8px;margin-bottom:16px;font-weight:800}.study-tile-body input,.study-tile-body select,.study-tile-body textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--soft);color:var(--ink);font:inherit}.study-tile-body textarea{min-height:180px;resize:vertical}.study-workbench-tile.is-minimized{flex:0 1 280px}.study-workbench-tile.is-minimized .study-tile-body{display:none}.study-workbench-tile.is-dragging{opacity:.55}.study-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}.native-study-card{border:1px solid var(--line);border-radius:18px;background:var(--soft);overflow:hidden}.native-study-card header{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--line)}.native-study-card header b{font-size:2.2rem}.native-study-card header span{color:var(--accent);font-weight:800}.native-study-card header button{margin-left:auto;width:38px;height:38px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}.native-study-card section{display:grid;gap:10px;padding:14px}.native-study-card section div{display:grid;gap:2px}.native-study-card small{color:var(--muted);font-weight:800;text-transform:uppercase}.native-study-card span{overflow-wrap:anywhere}.plan-list{display:grid;gap:12px;margin:0;padding-left:22px}.theme-night .study-workbench-tile,.theme-night .native-study-card{box-shadow:0 14px 34px rgba(0,0,0,.28)}@media(max-width:760px){.study-native__header{align-items:flex-start;flex-direction:column}.study-canvas{padding:12px}.study-workbench-tile{flex-basis:100%!important;min-width:0}.study-resize-hint{display:none}.study-list{grid-template-columns:1fr}}
/*=============================================================================
Native remaining-tool workbench tiles — V2.22
=============================================================================*/
.native-tool{margin-top:1.25rem}.native-canvas{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;padding:1rem}.native-workbench-tile{flex:1 1 310px;min-width:260px;max-width:100%;background:var(--panel);border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}.native-main-tile{flex-basis:650px}.native-tile-toolbar{display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;background:var(--panel-soft);border-bottom:1px solid var(--border);font-weight:900;text-transform:uppercase;letter-spacing:.06em}.native-drag-handle,.native-resize-handle{cursor:grab;user-select:none;border:1px solid var(--border);border-radius:10px;padding:.3rem .5rem}.native-resize-handle{margin-left:auto;cursor:ew-resize}.native-minimize{border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--ink);font-weight:900}.native-tile-body{padding:1rem;min-width:0}.native-workbench-tile.is-minimized .native-tile-body{display:none}.native-workbench-tile.is-dragging{opacity:.55}.native-tile-body label{display:grid;gap:.4rem;margin-bottom:.8rem;font-weight:800}.native-tile-body input,.native-tile-body select,.native-tile-body textarea{width:100%;padding:.8rem;border:1px solid var(--border);border-radius:14px;background:var(--field);color:var(--ink)}.native-card-grid,.game-card-grid,.audio-unit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.8rem}.native-record-card,.game-card,.audio-unit-grid article{background:var(--panel-soft);border:1px solid var(--border);border-radius:18px;padding:1rem;min-width:0}.native-record-card header{display:flex;align-items:center;justify-content:space-between}.native-symbol{font-size:3rem}.native-record-card blockquote{margin:.75rem 0;padding:.75rem;border-left:4px solid var(--accent);background:var(--field)}.native-record-card blockquote small{display:block}.example-chips{display:flex;flex-wrap:wrap;gap:.4rem}.example-chips span{padding:.35rem .55rem;border-radius:999px;background:var(--field)}.native-flashcard{width:100%;min-height:320px;border:1px solid var(--border);border-radius:24px;background:var(--panel-soft);color:var(--ink);display:grid;place-items:center;gap:1rem;padding:2rem}.native-flashcard b{font-size:clamp(3rem,8vw,7rem)}.sentence-prompt,.sentence-dropzone,.sentence-wordbank{padding:1rem;border:1px solid var(--border);border-radius:18px;margin-bottom:1rem}.sentence-dropzone{min-height:90px;background:var(--field);display:flex;flex-wrap:wrap;gap:.5rem}.sentence-wordbank{display:flex;flex-wrap:wrap;gap:.5rem}.sentence-wordbank button,.sentence-dropzone button{padding:.7rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--panel-soft);color:var(--ink);font-weight:800}.sentence-result{padding:1rem;border-radius:14px;font-weight:900}.sentence-result.ok{background:rgba(70,180,100,.18)}.sentence-result.bad{background:rgba(220,80,100,.18)}.game-card p{font-size:1.15rem}.games-count{font-weight:900;margin-bottom:1rem}.speak-button{float:right}.theme-night .native-workbench-tile,.theme-night .native-record-card,.theme-night .game-card,.theme-night .audio-unit-grid article{box-shadow:0 14px 36px rgba(0,0,0,.32)}
@media(max-width:760px){.native-canvas{display:block;padding:.5rem}.native-workbench-tile{width:100%;min-width:0;margin-bottom:.8rem;flex-basis:auto!important}.native-resize-handle{opacity:.45;cursor:default}.native-card-grid,.game-card-grid,.audio-unit-grid{grid-template-columns:1fr}}
/* =============================================================================
V2.23 — Kanji Radicals visual parity
-----------------------------------------------------------------------------
Recreates the compact card grid, red radical treatment, position diagram,
and example composition used by the original standalone HTML trainer while
retaining the native Flask workbench shell and all three shared themes.
============================================================================= */
.radical-result-count{margin:0 0 14px;font-weight:950;color:var(--ink)}
.radical-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:14px;align-items:stretch}
.radical-card{--radical-red:#d71920;display:flex;flex-direction:column;min-width:0;padding:15px;border:2px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:0 8px 20px color-mix(in srgb,var(--ink) 8%,transparent)}
.radical-symbol{color:var(--radical-red);font-size:58px;font-weight:950;line-height:1;text-align:center;padding:4px 0 2px}
.radical-card h3{margin:7px 0 2px;font-size:1.02rem;color:var(--ink)}
.radical-card p{margin:6px 0;color:var(--ink);font-size:.86rem;line-height:1.45}
.radical-card p b{font-weight:950}
.radical-position-grid{display:grid;grid-template-columns:repeat(3,18px);grid-template-rows:repeat(3,18px);gap:2px;justify-content:center;margin:8px auto 10px}
.radical-position-grid i{display:block;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 72%,var(--bg))}
.radical-position-grid i.is-active{background:var(--radical-red);border-color:color-mix(in srgb,var(--radical-red) 78%,var(--line))}
.radical-examples{margin-top:auto;padding-top:8px;font-size:.86rem}
.radical-examples>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.radical-example{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:4px 9px;border:1px solid var(--line);border-radius:10px;background:var(--bg);font-size:27px;line-height:1}
.radical-example em{color:var(--radical-red);font-style:normal;font-weight:950}
.radical-example strong{font-size:1rem;color:var(--muted)}
html[data-theme=pixel] .radical-card{--radical-red:#d71920;background:#fffdfd;border-color:#cdbce9}
html[data-theme=pixel] .radical-example{background:#fff8fb}
html[data-theme=garden] .radical-card{--radical-red:#d71920;background:#fffaf0;border-color:#c7b98e}
html[data-theme=garden] .radical-example{background:#fbf4df}
html[data-theme=night] .radical-card{--radical-red:#ff6b78;background:#12192d;border-color:#5668a8;box-shadow:0 10px 24px rgba(0,0,0,.3)}
html[data-theme=night] .radical-example{background:#090e2a}
@media(max-width:760px){.radical-card-grid{grid-template-columns:1fr}.radical-symbol{font-size:52px}}
/*=============================================================================
Sentence Builder native workbench parity
=============================================================================*/
.sentence-reference-tile{flex-basis:430px}
.sentence-patterns-tile{flex-basis:920px}
.sentence-control-grid,.sentence-flash-controls,.sentence-pattern-toolbar{display:flex;flex-wrap:wrap;gap:.65rem;align-items:end}
.sentence-control-grid{margin-bottom:1rem}
.sentence-mini-reference{padding:.85rem;border:1px solid var(--border);border-radius:16px;background:var(--field)}
.sentence-mini-reference h3{margin:.1rem 0 .5rem}
.sentence-color-key,.sentence-tags{display:flex;flex-wrap:wrap;gap:.45rem}
.grammar-token{display:inline-flex;align-items:center;justify-content:center;padding:.45rem .62rem;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);border-radius:9px;font-weight:900;color:#17364a;box-shadow:0 2px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
.grammar-topic{background:#f49ab7}.grammar-particle{background:#ff7d7d}.grammar-object{background:#72d9c6}.grammar-verb{background:#67b7ef}.grammar-adjective{background:#f6d34b}.grammar-noun{background:#80df8b}.grammar-time{background:#b596ee}.grammar-place{background:#f5ad49}.grammar-pattern{background:#a9df62}
.sentence-syllabus-grid,.sentence-cheat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1rem}
.sentence-syllabus-grid article{padding:1rem;border-left:4px solid var(--accent);background:var(--field);border-radius:0 14px 14px 0}
.sentence-syllabus-grid h3,.sentence-cheat-grid h3{margin:.1rem 0 .5rem}
.sentence-pattern-toolbar{justify-content:space-between;margin-bottom:1rem}
.sentence-pattern-toolbar label{min-width:220px;margin:0}
.sentence-pattern-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.sentence-pattern-card{display:flex;flex-direction:column;gap:.7rem;padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);min-width:0}
.sentence-pattern-card h3{margin:0;color:var(--ink)}
.sentence-pattern-card code{display:block;padding:.75rem;border-radius:12px;background:var(--field);font-weight:900;white-space:normal;color:var(--ink)}
.sentence-pattern-card>p{margin-top:auto;color:var(--muted)}
.sentence-tags span{font-size:.76rem;padding:.22rem .5rem;border-radius:999px;border:1px solid var(--border);background:var(--field);font-weight:800}
.sentence-colored-example{display:flex;flex-wrap:wrap;gap:.25rem;align-items:center;font-size:1.05rem;line-height:1.8}
.sentence-colored-example .grammar-token{padding:.18rem .35rem;border-radius:7px}
.sentence-flashcard{width:100%;min-height:230px;padding:1.5rem;border:2px dashed var(--border);border-radius:20px;background:var(--field);color:var(--ink);font:inherit;font-size:1.15rem;font-weight:900;line-height:1.65;cursor:pointer}
.sentence-flash-controls{margin-top:1rem}
.sentence-cheat-grid article{padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--field)}
.sentence-wordbank button,.sentence-dropzone button{cursor:grab}
.sentence-wordbank button.is-dragging{opacity:.45}
.sentence-result.warn{background:rgba(240,190,55,.2)}
html[data-theme=night] .grammar-token{color:#091021;border-color:rgba(255,255,255,.18)}
html[data-theme=night] .sentence-pattern-card,html[data-theme=night] .sentence-cheat-grid article,html[data-theme=night] .sentence-syllabus-grid article{box-shadow:0 10px 24px rgba(0,0,0,.2)}
@media(max-width:760px){.sentence-pattern-grid,.sentence-syllabus-grid,.sentence-cheat-grid{grid-template-columns:1fr}.sentence-reference-tile,.sentence-patterns-tile{flex-basis:100%!important}.sentence-pattern-toolbar{align-items:stretch;flex-direction:column}.sentence-pattern-toolbar label{min-width:0;width:100%}}
/*=============================================================================
V2.25 Michel Thomas Companion and Furigana Games visual parity
=============================================================================*/
.mt-progress-tile{flex-basis:360px}.mt-calendar-tile{flex-basis:880px}.mt-syllabus-tile{flex-basis:880px}.mt-reference-tile{flex-basis:1000px}.mt-writing-tile{flex-basis:760px}.mt-flashcard-tile{flex-basis:420px}.mt-routine-tile{flex-basis:520px}.games-summary-tile{flex-basis:420px}.games-table-tile{flex-basis:980px}
.mt-companion-callout{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}.mt-companion-callout span{padding:.35rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--field);font-size:.78rem;font-weight:900}.mt-progress-head,.games-summary-head{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.mt-progress-head>div,.games-summary-head>div{display:grid;gap:.2rem;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--field)}.mt-progress-head strong,.games-summary-head strong{font-size:1.8rem}.mt-progress-head span,.games-summary-head span{color:var(--muted);font-size:.78rem;font-weight:800}.mt-progress-track{height:14px;margin:1rem 0;border-radius:999px;background:var(--field);overflow:hidden}.mt-progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--secondary))}
.mt-calendar-controls,.mt-reference-tools,.mt-flash-controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:end;margin-bottom:1rem}.mt-calendar-controls label{min-width:210px;margin:0}.mt-table-scroll,.games-table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:16px}.mt-calendar-table,.games-report-table{width:100%;min-width:760px;border-collapse:collapse}.mt-calendar-table th,.games-report-table th{padding:.8rem;text-align:left;background:var(--panel-soft)}.mt-calendar-table td,.games-report-table td{padding:.8rem;border-top:1px solid var(--border);vertical-align:top}.mt-calendar-table td small{display:block;color:var(--muted);margin-top:.25rem}.mt-calendar-table label{display:inline-flex;align-items:center;gap:.4rem;margin:0}
.mt-unit-grid,.mt-practice-grid,.mt-writing-grid,.mt-routine-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}.mt-unit,.mt-practice-card,.mt-writing-grid article,.mt-routine-grid article{padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--field)}.mt-unit.is-done{box-shadow:inset 5px 0 #5ab978}.mt-unit>div{display:flex;flex-wrap:wrap;gap:.4rem}.mt-unit>div span{padding:.25rem .5rem;border-radius:999px;background:var(--panel-soft);font-size:.74rem;font-weight:900}.mt-unit h3,.mt-practice-card h3,.mt-routine-grid h3{margin:.65rem 0 .35rem}.mt-practice-card{position:relative;display:grid;gap:.55rem}.mt-practice-card small{font-weight:900;color:var(--accent);text-transform:uppercase}.mt-practice-card .jp{font-size:1.2rem;font-weight:900}.mt-practice-card .mt-romaji{color:var(--muted);font-style:italic}.hide-mt-romaji .mt-romaji{display:none}.mt-practice-card .speak-button{position:absolute;right:.65rem;bottom:.65rem}.mt-hero-note{padding:1rem;margin-bottom:1rem;border-left:5px solid var(--accent);border-radius:0 16px 16px 0;background:var(--field)}
.mt-course-details,.mt-track-details{border:1px solid var(--border);border-radius:14px;background:var(--field);margin-bottom:.65rem;overflow:hidden}.mt-course-details>summary,.mt-track-details>summary{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;cursor:pointer;font-weight:900}.mt-track-details{margin:.55rem}.mt-track-details>summary{background:var(--panel-soft)}.mt-track-details p{padding:0 1rem 1rem;margin:0;line-height:1.55;color:var(--muted)}.mt-writing-grid article strong{font-size:1.2rem}.mt-writing-lines{height:90px;margin-top:.8rem;border-radius:10px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 27px,color-mix(in srgb,var(--ink) 18%,transparent) 28px)}.mt-flashcard{width:100%;min-height:250px;display:grid;place-items:center;gap:1rem;padding:1.5rem;border:2px dashed var(--border);border-radius:22px;background:var(--field);color:var(--ink);font:inherit;text-align:center;cursor:pointer}.mt-flashcard b{font-size:1.25rem;line-height:1.6}.mt-flashcard span{color:var(--muted);font-size:.8rem}.mt-routine-grid article{position:relative;padding-left:3.5rem}.mt-routine-grid article>span{position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-weight:900}
.games-summary-head{grid-template-columns:repeat(3,minmax(0,1fr))}.games-system-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0}.games-system-chips button{padding:.45rem .65rem;border:1px solid var(--border);border-radius:999px;background:var(--field);color:var(--ink);font-weight:800;cursor:pointer}.games-system-chips button.active{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border-color:transparent}.games-system-chips small{opacity:.75}.games-intro{padding:1rem;border-radius:16px;background:var(--field)}.games-system-section{margin-bottom:1rem;padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface)}.games-system-section h2{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:.1rem 0 1rem}.games-system-section h2 small{font-size:.8rem;color:var(--muted)}.games-report-table .jp{font-family:"Noto Sans JP","Yu Gothic",sans-serif;font-size:1.03rem}.games-report-table .product-id{font-family:ui-monospace,Consolas,monospace;white-space:nowrap}.unverified{color:var(--muted);font-style:italic}.native-empty{padding:2rem;text-align:center;color:var(--muted)}
html[data-theme=pixel] .mt-unit,html[data-theme=pixel] .mt-practice-card,html[data-theme=pixel] .games-system-section{background:#fffafd}html[data-theme=garden] .mt-unit,html[data-theme=garden] .mt-practice-card,html[data-theme=garden] .games-system-section{background:#fffaf0}html[data-theme=night] .mt-unit,html[data-theme=night] .mt-practice-card,html[data-theme=night] .games-system-section{background:#12192d;box-shadow:0 10px 24px rgba(0,0,0,.22)}
@media(max-width:760px){.mt-progress-head,.games-summary-head{grid-template-columns:1fr}.mt-calendar-controls,.mt-reference-tools,.mt-flash-controls{align-items:stretch;flex-direction:column}.mt-calendar-controls label{min-width:0;width:100%}.mt-unit-grid,.mt-practice-grid,.mt-writing-grid,.mt-routine-grid{grid-template-columns:1fr}.mt-table-scroll,.games-table-scroll{overflow:visible;border:0}.mt-calendar-table,.games-report-table{min-width:0;display:block}.mt-calendar-table thead,.games-report-table thead{display:none}.mt-calendar-table tbody,.mt-calendar-table tr,.mt-calendar-table td,.games-report-table tbody,.games-report-table tr,.games-report-table td{display:block;width:100%}.mt-calendar-table tr,.games-report-table tr{margin-bottom:.8rem;padding:.75rem;border:1px solid var(--border);border-radius:14px;background:var(--field)}.mt-calendar-table td,.games-report-table td{padding:.35rem;border:0}.games-report-table td::before{content:attr(data-label);display:block;color:var(--accent);font-size:.68rem;font-weight:900;text-transform:uppercase}.mt-progress-tile,.mt-calendar-tile,.mt-syllabus-tile,.mt-reference-tile,.mt-writing-tile,.mt-flashcard-tile,.mt-routine-tile,.games-summary-tile,.games-table-tile{flex-basis:100%!important}}
/* ============================================================================
V2.26 — HOME HERO TITLE LEGIBILITY
----------------------------------------------------------------------------
The scenic source artwork includes decorative lettering. This glass-backed
title card masks that lettering so the live page title remains visually
clean and readable in every application theme.
============================================================================ */
.hero-v210 .hero-copy{
max-width:min(610px,92%);
padding:clamp(22px,3vw,36px);
border:1px solid color-mix(in srgb,var(--line) 78%,transparent);
border-radius:24px;
background:color-mix(in srgb,var(--surface) 91%,transparent);
box-shadow:0 18px 44px color-mix(in srgb,var(--ink) 16%,transparent);
-webkit-backdrop-filter:blur(13px) saturate(1.05);
backdrop-filter:blur(13px) saturate(1.05);
}
html[data-theme=pixel] .hero-v210 .hero-copy{
background:rgba(255,248,252,.92);
}
html[data-theme=garden] .hero-v210 .hero-copy{
background:rgba(255,250,240,.93);
}
html[data-theme=night] .hero-v210 .hero-copy{
background:rgba(10,18,43,.91);
border-color:rgba(130,150,205,.35);
box-shadow:0 20px 48px rgba(0,0,0,.42);
}
.hero-v210 .hero-copy h1,
.hero-v210 .hero-copy .jp-tagline,
.hero-v210 .hero-copy .hero-subtitle{
position:relative;
z-index:1;
}
@media(max-width:600px){
.hero-v210 .hero-copy{
max-width:100%;
padding:20px 16px;
border-radius:19px;
}
}
/* ============================================================================
V2.26 — SHARED AI COMPANION SAFETY LAYER
----------------------------------------------------------------------------
Keeps the hosted companion above the workbench without interfering with the
fixed navigation or mobile tab bar. The external widget owns its own visual
presentation; these rules only provide safe page-level positioning.
============================================================================ */
iframe[src*="aminos.ai"],
[id*="aminos-chat"],
[class*="aminos-chat"]{
z-index:1400!important;
}
@media(max-width:720px){
iframe[src*="aminos.ai"],
[id*="aminos-chat"],
[class*="aminos-chat"]{
margin-bottom:68px!important;
}
}