:root{--bg:#f7f7fa;--surface:#fff;--soft:#f0f0f5;--ink:#19191f;--muted:#666674;--line:#e4e4ec;--accent:#202027;--on:#fff;--gold:#e47940;--purple:#8060e9;--blue:#4189dc;--pink:#e66e93}
html[data-theme=dark]{color-scheme:dark;--bg:#121215;--surface:#1d1d23;--soft:#292931;--ink:#f4f4f8;--muted:#b2b2c2;--line:#383840;--accent:#f5f5fa;--on:#17171d;--gold:#ffa976;--purple:#b19aff;--blue:#73b6ff;--pink:#ff9cbb}
body{font-family:Inter,ui-sans-serif,system-ui,sans-serif;background:var(--bg);color:var(--ink)}header{background:var(--surface);padding:20px max(5%,calc((100vw - 1160px)/2));gap:20px}.logo{letter-spacing:-1.2px;color:var(--ink)}.logo span{color:var(--muted)}header small{letter-spacing:1.6px;font-size:10px}main{margin:38px auto}.eyebrow{color:var(--muted);font-size:11px}h1{font:800 clamp(32px,4.4vw,54px)/1.12 ui-sans-serif,system-ui;letter-spacing:-2px;max-width:730px}.panel h2{font:750 27px/1.25 ui-sans-serif,system-ui;letter-spacing:-.7px}.question{font:650 28px/1.4 ui-sans-serif,system-ui;color:var(--ink)}.hero{position:relative;background:var(--surface);border:1px solid var(--line);padding:34px 38px;border-radius:28px;overflow:hidden}.hero>p{max-width:640px}.hero .eyebrow{position:relative;z-index:1}.hero-art{position:absolute;right:20px;top:24px;width:170px;height:170px;opacity:.95;pointer-events:none}.hero h1,.hero p{position:relative;z-index:1;margin-right:130px}.hero p{margin-bottom:0}.hero-art .float{animation:bob 6s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-7px)}}.study-note{display:flex;align-items:center;gap:12px;margin-top:20px!important;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.stats{gap:16px;margin:22px 0}.stat{position:relative;padding:22px 25px;border-radius:20px;box-shadow:0 4px 14px #12121f03}.stat strong{font-size:32px;letter-spacing:-1px}.stat:after{position:absolute;right:22px;top:22px;font-size:24px;content:'📚'}.stat:nth-child(2):after{content:'✨'}.stat:nth-child(3):after{content:'🎯'}.stat:nth-child(1){border-top:3px solid var(--purple)}.stat:nth-child(2){border-top:3px solid var(--blue)}.stat:nth-child(3){border-top:3px solid var(--gold)}.nav{gap:6px;background:var(--surface);border:1px solid var(--line);padding:7px;border-radius:18px}.nav button{padding:12px 15px;background:transparent;border-radius:12px;color:var(--muted);font-size:13px}.nav button.active{background:var(--accent);color:var(--on);box-shadow:0 3px 9px #16161f15}.panel,.card{border-radius:24px;box-shadow:0 5px 24px #11112203}.panel{padding:30px}.sidebar{background:var(--surface);border:1px solid var(--line)}button{transition:transform .15s,background .15s}button:hover{filter:none;transform:translateY(-1px)}button:disabled:hover{transform:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--purple);outline-offset:4px}.topic{background:transparent}.topic.active{background:var(--accent)}.badge,.pill{background:var(--soft);color:var(--purple);font-weight:650}.orange{background:#fff0de;color:#825019}html[data-theme=dark] .orange{background:#49331f;color:#ffcd91}.meter,.progress{background:var(--soft)}.meter div,.progress div{background:var(--purple)}.area-card{border-left:4px solid var(--purple)}.area-card:nth-child(4n+1){border-left-color:var(--blue)}.area-card:nth-child(4n+2){border-left-color:var(--gold)}.area-card:nth-child(4n+3){border-left-color:var(--pink)}.listline:nth-child(4n+1) .meter div{background:var(--blue)}.listline:nth-child(4n+2) .meter div{background:var(--gold)}.listline:nth-child(4n+3) .meter div{background:var(--pink)}.refreshbox{background:var(--soft);border:1px solid var(--line);padding:20px}.viz .primary{stroke:var(--blue)}.viz .gold{stroke:var(--gold)}.steps span:nth-child(1){border-top:3px solid var(--purple)}.steps span:nth-child(2){border-top:3px solid var(--blue)}.steps span:nth-child(3){border-top:3px solid var(--gold)}.options button{border:1px solid var(--line);background:var(--surface);color:var(--ink)}.options button:hover:not(:disabled){border-color:var(--purple);background:var(--soft)}.right{color:var(--blue)}.wrong{color:var(--gold)}.checkrow input{accent-color:var(--purple)}.checkrow small{color:var(--muted)}.panel a{color:var(--blue)}.panel h2:before{content:'✦';color:var(--purple);font-size:20px;margin-right:10px}input[type=range]{accent-color:var(--purple)}.feedback{border-left:3px solid var(--blue)}footer{line-height:1.8}.answer{color:var(--ink)}.themecontrol label{color:var(--muted)}.themecontrol select{border-radius:20px}.motion{background:var(--surface)}
@media(max-width:730px){.hero{padding:25px 23px}.hero h1,.hero p{margin-right:0}.hero h1{max-width:85%;letter-spacing:-1.3px}.hero-art{width:90px;height:90px;right:0;top:5px;opacity:.5}.hero>p{font-size:14px}.hero .study-note{font-size:12px}.stat{padding:16px 12px}.stat:after{position:static;display:block;font-size:19px;margin-top:8px}.stat span{font-size:11px}.stat strong{font-size:26px}.nav{flex-wrap:nowrap;overflow-x:auto}.nav button{flex-shrink:0;font-size:12px}.panel{padding:22px}.panel h2{font-size:24px}.question{font-size:23px}.themecontrol label{display:none}header{padding:17px 20px}main{margin-top:22px}.grid2{gap:12px}}@media(prefers-reduced-motion:reduce){.hero-art .float{animation:none}button{transition:none}}
:root{--honey:#fbc83e}.brand-bee{width:40px;height:40px;vertical-align:middle;margin-right:8px}.logo{display:flex;align-items:center;font-size:25px}.hero-art img{width:100%;height:100%}.hero .eyebrow{color:var(--muted)}.study-note:before{content:'';width:5px;align-self:stretch;border-radius:4px;background:var(--honey);flex-shrink:0}.bee-message{border-left:3px solid var(--honey);padding:12px 16px;background:var(--soft);border-radius:8px}.nav button.active{box-shadow:inset 0 -3px var(--honey)}header small{text-transform:none;font-size:12px;letter-spacing:.2px}.hero-art{width:180px;height:180px;top:32px}.hero h1{max-width:680px}@media(max-width:730px){.hero-art{width:83px;height:83px;top:14px;opacity:.9}.brand-bee{width:32px;height:32px}.hero h1{max-width:80%}}
/* Small emoji-like mascot: no backdrop or decorative illustration. */
.hero-art{width:96px;height:96px;right:38px;top:62px}.hero-art .float{animation:none}.brand-bee{width:30px;height:30px}@media(max-width:730px){.hero-art{width:54px;height:54px;right:18px;top:32px}.brand-bee{width:26px;height:26px}}
/* Dedicated chart palette: opaque surfaces, contrasting labels, no inherited text stroke. */
html[data-theme=light] .viz{background:#fff;color:#19191f}html[data-theme=light] .viz text{fill:#19191f!important;stroke:#fff;stroke-width:3px;paint-order:stroke fill;stroke-linejoin:round}html[data-theme=dark] .viz{background:#1d1d23;color:#f4f4f8}html[data-theme=dark] .viz text{fill:#f4f4f8!important;stroke:#1d1d23;stroke-width:3px;paint-order:stroke fill;stroke-linejoin:round}.viz{display:block;min-width:520px;width:100%;max-height:none}.refreshbox>div:has(>.viz){overflow-x:auto}.viz text{font-weight:550}.video-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;margin:12px 0}.video-card h3{font-size:18px;margin:10px 0 16px}.video-cover{height:100px;background:var(--soft);border-radius:12px;display:flex;justify-content:center;align-items:center;font-size:30px;color:var(--purple);margin-bottom:15px}.video-cover.loaded{height:auto;aspect-ratio:16/9}.video-cover iframe{width:100%;height:100%;border:0;border-radius:12px}.video-card .videolink{font-size:14px;color:var(--blue)}#flash-video{margin-top:22px}.visualslider output{color:var(--ink);font-weight:700}.panel strong,.refreshbox strong{color:var(--ink)}@media(max-width:730px){.refreshbox{padding:14px}.video-card{padding:15px}}
.viz path.axis{fill:none!important}.viz path.primary,.viz path.gold{fill:none!important}
/* Keep curriculum actions separate even when topic buttons wrap. */
.area-card > .row{margin-top:14px;gap:12px;align-items:flex-start}.area-card > button{margin-top:2px}.area-card > .row > button{margin:0}