:root{--ink:#20283f;--green:#5342d5;--line:#e5e7f1;--muted:#646c84;--bg:#f5f6fc;--surface:#fff;--soft:#eeebff;--shadow:0 8px 24px #20234808;color-scheme:light}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font:16px/1.6 ui-rounded,'Trebuchet MS',system-ui,sans-serif}a{color:var(--green)}header{display:flex;align-items:center;gap:20px;padding:18px max(24px,calc((100% - 1160px)/2));background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:3}.brand{font-size:28px;font-weight:900;letter-spacing:-1px;text-decoration:none;white-space:nowrap}.brand:before{content:'✦';display:inline-grid;place-items:center;width:38px;height:38px;background:var(--green);color:white;border-radius:13px;margin-right:9px}.brand span{font-weight:600;color:var(--ink)}.tag{font-size:12px;color:var(--muted);flex:1}.sample{background:var(--soft);color:var(--green);text-align:center;font-size:11px;padding:8px 16px;font-weight:700;letter-spacing:.01em}.class-nav{display:flex;gap:8px;flex-wrap:wrap;max-width:1160px;margin:24px auto 0;padding:0 24px}.class-nav a{border-radius:50px;padding:10px 20px;text-decoration:none;color:var(--muted);font-weight:800;font-size:14px;background:var(--surface);border:1px solid var(--line)}.class-nav a.current{background:var(--ink);color:var(--surface);border-color:var(--ink)}main{max-width:1160px;margin:auto;padding:30px 24px 70px;min-height:70vh}h1{font-size:clamp(34px,5vw,62px);line-height:1.08;letter-spacing:-.045em;margin:12px 0 20px;max-width:850px;font-weight:900}h2{font-size:24px;line-height:1.22;letter-spacing:-.03em}h3{font-size:20px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--green);text-transform:uppercase}.intro{max-width:560px;font-size:17px;color:var(--muted);line-height:1.7}.hero{background:#eae6ff;border-radius:32px;padding:38px 42px;display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;position:relative;min-height:360px;color:#222142}.hero .eyebrow{color:#5442bd}.hero .intro,.hero .muted{color:#625c82}.hero h1{font-size:clamp(38px,5vw,62px)}.hero-tags{display:flex;gap:10px;flex-wrap:wrap}.hero-tags span{font-size:12px;font-weight:800;background:#ffffffa8;border:1px solid #fff;padding:7px 12px;border-radius:40px}.math-art{position:relative;min-height:260px;display:grid;place-items:center}.orb{height:200px;width:200px;background:#ffcc69;border-radius:42% 58% 56% 44%;box-shadow:inset -14px -15px #f2ad4780,0 20px 30px #b3a5de55;display:grid;place-items:center;font-size:92px;font-weight:900;color:#644012;transform:rotate(-12deg)}.float{position:absolute;background:#fff;border-radius:16px;padding:12px 18px;font-weight:900;box-shadow:0 8px 0 #4a3b8c0c;transform:rotate(8deg)}.formula-one{top:12px;right:0;color:#5542bc;font-size:22px}.formula-two{bottom:6px;left:0;color:#14927d;font-size:36px;display:flex;align-items:center;gap:10px;transform:rotate(-7deg)}.formula-two b{font-size:12px;max-width:70px;line-height:1.2}.spark{position:absolute;right:4px;bottom:25px;font-size:50px;color:#8d71e4}.dashboard-strip{display:flex;align-items:center;gap:28px;margin:22px 0 36px;padding:20px 24px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}.dashboard-strip div{display:flex;flex-direction:column}.dashboard-strip b{font-size:15px}.dashboard-strip span{font-size:11px;color:var(--muted)}.dashboard-strip .progress-track{display:block;height:8px;background:var(--soft);border-radius:20px;flex:1;overflow:hidden;min-width:80px}.progress-track span{display:block;background:#8a74ed;height:100%;min-width:0}.term-section{margin-top:34px}.term-section>h2{display:flex;align-items:center;gap:12px}.term-section>h2:before{content:'';height:24px;width:6px;background:#8a74ed;border-radius:5px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 32px}.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:var(--shadow)}.card{display:flex;flex-direction:column;gap:12px;position:relative;transition:transform .18s,box-shadow .18s}.card:hover{transform:translateY(-4px);box-shadow:0 14px 26px #5a4bb017}.card h2{font-size:21px;margin:0}.card p{font-size:14px;margin:0;color:var(--muted)}.card button{margin-top:auto;width:100%}.topic-icon{width:55px;height:55px;display:grid;place-items:center;background:#eee8ff;color:#7152cf;font-size:26px;font-weight:900;border-radius:18px}.card:nth-child(3n+2) .topic-icon{background:#dff6ec;color:#178a69}.card:nth-child(3n) .topic-icon{background:#fff0d6;color:#b97817}.number{font-size:10px;font-weight:900;letter-spacing:.08em;color:#178369}.coming .number{color:var(--muted)}.coming{box-shadow:none}.coming .topic-icon{opacity:.65}.pill{font-size:11px;color:var(--muted);padding:2px 0}.ready .pill{color:#178369;font-weight:700}button,.btn{cursor:pointer;border:1px solid transparent;border-radius:14px;padding:13px 20px;min-height:48px;background:var(--green);color:white;font:800 14px/1.35 inherit;font-family:inherit;box-shadow:0 3px 0 #302589;transition:transform .15s,filter .15s;text-decoration:none;display:inline-block;max-width:100%}button:hover{filter:brightness(1.08);transform:translateY(-1px)}button:active{transform:translateY(2px);box-shadow:none}button.secondary,.coming button{background:var(--soft);color:var(--green);box-shadow:none;border-color:transparent}button:disabled{opacity:.6;cursor:wait}.theme-toggle{background:var(--soft);color:var(--green);padding:8px 12px;box-shadow:none;font-size:22px;width:46px}.muted{font-size:12px;color:var(--muted);line-height:1.7}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:20px;margin-top:24px}.steps{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0;font-size:11px;color:var(--muted)}.steps span{padding:6px 10px;background:var(--surface);border-radius:30px}.steps .active{background:var(--soft);color:var(--green);font-weight:900}video{width:100%;max-height:620px;border-radius:18px;background:#0f1425;display:block;object-fit:contain;box-shadow:0 12px 30px #151a3020;margin:18px 0}video:fullscreen{width:100vw;height:100vh;max-height:none;border-radius:0;background:black;object-fit:contain}.formula{font-size:20px;padding:18px;background:var(--soft);border-radius:15px;overflow-wrap:anywhere}.actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.options{display:grid;gap:12px;margin:20px 0}.options button{background:var(--surface);color:var(--ink);border:2px solid var(--line);box-shadow:none;text-align:left}.options button.selected{background:var(--soft);border-color:var(--green)}.feedback{background:#dcf4e7;color:#195d43;padding:20px;border-radius:16px}.notice{padding:14px 16px;background:#fff3db;color:#795a24;border:1px solid #f4e5c5;border-radius:16px;font-size:12px;line-height:1.7}.path-choice{min-height:210px}.map{columns:2}.error{color:#c53c49}details{margin:30px 0}summary{cursor:pointer;min-height:44px;padding:12px 0;font-weight:800}li{margin:8px 0}footer{display:flex;gap:24px;flex-wrap:wrap;max-width:1120px;margin:auto;padding:24px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}dialog{background:var(--surface);color:var(--ink);max-width:520px;width:calc(100% - 24px);border:1px solid var(--line);border-radius:28px;padding:28px;max-height:90vh}dialog::backdrop{background:#17173299;backdrop-filter:blur(6px)}label{display:block;font-size:13px;font-weight:800;margin:18px 0}input,select,textarea{display:block;width:100%;background:var(--surface);color:var(--ink);padding:13px;font:15px/1.4 inherit;font-family:inherit;border:1px solid var(--line);border-radius:12px;margin-top:8px;min-height:46px}textarea{resize:vertical;line-height:1.6}.close{float:right;box-shadow:none;background:var(--soft);color:var(--ink);font-size:22px;padding:8px 15px}.lesson-chat{margin-top:24px;max-width:850px;border-top:4px solid #9a83f2}.lesson-chat h2{font-size:32px}.lesson-chat>p{font-size:14px;color:var(--muted)}.chat-heading{display:flex;gap:12px;align-items:center}.chat-heading p{margin:0}.crew-state{font-size:11px;color:#16856c}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#e9e2ff;color:#7055c7;font-size:13px;font-weight:900;flex:none}.tutor-avatar{width:48px;height:48px;background:#6d52dc;color:#fff;font-size:28px;border-radius:17px}.lesson-chat input[type=checkbox]{display:inline-block;width:18px;min-height:18px;height:18px;margin:0 7px 0 0;vertical-align:middle;accent-color:var(--green)}#chatMessages{display:flex;flex-direction:column;gap:12px;margin:20px 0}.chat-turn{white-space:pre-wrap;overflow-wrap:anywhere;border-radius:20px 20px 20px 4px;background:var(--soft);padding:16px;max-width:90%;font-size:14px;position:relative;margin:0;animation:arrive .25s ease-out}.chat-turn .avatar{margin-bottom:8px}.chat-turn strong{display:block;font-size:11px;margin-bottom:6px;white-space:normal}.chat-turn.is-user{align-self:flex-end;background:var(--green);color:white;border-radius:20px 20px 4px 20px}.is-user .avatar{background:#ffffff2b;color:#fff}#chatForm{background:var(--bg);border-radius:20px;padding:4px 18px 12px}#chatStatus{font-size:12px;color:var(--muted);min-height:20px}.typing:after{content:'•••';display:inline-block;padding-left:8px;letter-spacing:3px;animation:pulse 1s infinite}.typing{color:var(--green)!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bd8bff;outline-offset:3px}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes pulse{50%{opacity:.3}}[data-theme=dark]{--ink:#f0effb;--green:#b49aff;--line:#34364c;--muted:#a9adc4;--bg:#151725;--surface:#1f2234;--soft:#302b48;--shadow:0 8px 24px #0002;color-scheme:dark}[data-theme=dark] button:not(.secondary):not(.theme-toggle):not(.close){background:#8b6dec;color:white;box-shadow:0 3px 0 #6443ba}[data-theme=dark] .notice{background:#352e28;color:#e8c993;border-color:#514331}[data-theme=dark] .feedback{background:#224337;color:#bcebd6}[data-theme=dark] .hero{background:#30294f;color:#f2eaff}[data-theme=dark] .hero .intro,[data-theme=dark] .hero .muted{color:#c1b4dc}[data-theme=dark] .hero .eyebrow{color:#c6aeff}[data-theme=dark] .hero-tags span{background:#4f4367;color:#eee4ff;border-color:#66567c}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:28px;grid-template-columns:1.4fr 1fr}.orb{width:140px;height:140px;font-size:66px}.formula-one{font-size:16px}.float{padding:10px}.math-art{min-height:220px}.layout{grid-template-columns:1fr}}@media(max-width:540px){header{gap:8px;padding:13px 16px;flex-wrap:wrap}.brand{font-size:24px}.brand:before{width:31px;height:31px;border-radius:10px}.tag{order:5;flex-basis:100%;font-size:11px}header #profile{margin-left:auto;font-size:12px;padding:10px 14px;min-height:44px}.theme-toggle{margin-left:auto;width:42px;min-height:42px}.sample{text-align:left;font-size:10px}.class-nav{gap:7px;padding:0 16px;margin-top:17px}.class-nav a{font-size:12px;padding:9px 14px;min-height:44px}main{padding:22px 16px 50px}.hero{padding:26px 23px;display:block;border-radius:26px}.hero h1{font-size:42px}.hero .intro{font-size:14px}.hero .muted{font-size:11px}.math-art{height:130px;min-height:130px;margin-top:12px}.orb{width:116px;height:116px;font-size:62px}.formula-one{right:4px;top:0}.formula-two{left:3px;bottom:0;font-size:29px}.spark{bottom:0;right:10px;font-size:38px}.hero-tags span{font-size:10px;padding:6px 9px}.dashboard-strip{padding:16px;gap:16px;flex-wrap:wrap;margin-bottom:28px}.dashboard-strip b{font-size:13px}.dashboard-strip span{font-size:10px}.dashboard-strip .progress-track{flex-basis:100%;height:6px}.grid{gap:12px;margin:16px 0 26px}.card{border-radius:20px;padding:16px;gap:10px}.card h2{font-size:17px;line-height:1.25;overflow-wrap:break-word}.card p{font-size:12px;line-height:1.5}.card .number{font-size:8px;letter-spacing:.035em}.card button{font-size:11px;padding:11px 8px;min-height:44px;border-radius:11px}.card .pill{font-size:10px}.topic-icon{width:42px;height:42px;border-radius:13px;font-size:22px}.panel{padding:20px;border-radius:22px}.term-section>h2{font-size:21px}h1{font-size:34px}.map{columns:1}.lesson-chat h2{font-size:29px}.chat-turn{max-width:94%;padding:14px;font-size:13px}.lesson-chat>p{font-size:13px}.actions{gap:9px}#chatForm{padding:2px 12px 10px}.steps{gap:5px}.steps span{font-size:9px;padding:5px 8px}.path-choice{min-height:190px}.path-choice .card h2{font-size:18px}footer{gap:18px;padding:20px 16px}}@media(max-width:350px){.grid{grid-template-columns:1fr}.card{display:grid;grid-template-columns:46px 1fr;column-gap:12px}.card .topic-icon{grid-row:1/3}.card h2,.card p,.card .pill,.card button{grid-column:2}.card h2{font-size:19px}.card button{font-size:13px}.hero h1{font-size:38px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.chat-turn.is-ai{color:var(--ink)}.chat-turn.is-user{color:white}[data-theme=dark] .chat-turn.is-user{background:#7356ce;color:#fff}button,.btn{font-size:14px;font-weight:800;line-height:1.35}input,select,textarea{font-size:15px;line-height:1.5}
.pace-control{background:var(--soft);border-radius:15px;padding:4px 14px;margin:14px 0}.pace-control label{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0}.pace-control select{width:145px;margin:0;font-size:14px;font-weight:800;min-height:44px}.pace-control .muted{font-size:10px;margin:4px 0 10px}
.crew-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.crew-tabs button{flex:1;white-space:nowrap}.group-entry{margin-top:10px}.card button.group-entry{background:#def5ee;color:#126c53;box-shadow:none;font-size:12px}.lesson-chat{scroll-margin-top:18px}.lesson-chat #groupIntro{font-size:13px;font-weight:600}.chat-turn:has(.avatar){min-width:130px}
.homework-panel{margin:30px 0}.homework-panel h2{font-size:30px}.homework-panel input[type=checkbox]{display:inline-block;width:18px;height:18px;min-height:18px;vertical-align:middle;margin:0 8px 0 0}.photo-pick{background:var(--soft);border:2px dashed #aa95e8;padding:18px;border-radius:18px}.homework-panel img{max-width:100%;max-height:320px;object-fit:contain;border-radius:16px;margin:16px 0}.homework-panel canvas{width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}#photoStatus,#boardStatus{font-size:12px;color:var(--muted)}#boardDownload{padding:12px;min-height:44px;font-weight:800}[hidden]{display:none!important}
.onboarding{max-width:560px;margin:25px auto;text-align:left;padding:36px}.grade-picker{display:grid;gap:12px;margin:28px 0}.grade-picker button{text-align:left;font-size:18px}.next-lesson{margin:22px 0;background:var(--surface);border:2px solid #bda8ff}.next-lesson h2{font-size:30px}.next-lesson p{color:var(--muted)}.next-lesson button{margin-right:10px;margin-top:10px}.hero{display:block;min-height:0;padding:28px 32px}.hero h1{font-size:38px;margin-bottom:12px}.hero .intro{font-size:15px;margin-bottom:14px}.hero #jumpHomework{font-size:12px;margin-bottom:0}.homework-panel{margin-top:24px}.voice-plan{font-size:12px;font-weight:800;background:var(--soft);padding:12px;border-radius:12px}.voice-plan span{display:block;font-size:11px;font-weight:400}.lesson-chat>p:not(.notice){font-size:12px}#backTopics{margin-bottom:12px}.steps{display:none}@media(max-width:540px){.hero{padding:24px}.hero h1{font-size:32px}.onboarding{padding:26px}.next-lesson h2{font-size:26px}.next-lesson button{width:100%;margin-right:0}}
.welcome-screen{max-width:520px;margin:45px auto;text-align:center}.welcome-symbol{width:90px;height:90px;border-radius:28px;background:var(--green);color:white;font-size:58px;margin:0 auto 28px}.welcome-screen h1{font-size:48px}.welcome-screen>p{color:var(--muted)}.welcome-screen #getStarted{width:100%;max-width:320px;margin:22px 0;font-size:18px}.learner-dashboard{max-width:650px;margin:12px auto}.learner-dashboard h1{font-size:40px}.continue-card{background:var(--soft);border:0;margin:26px 0 18px}.continue-card h2{font-size:27px}.continue-card>button{width:100%}.dashboard-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.dashboard-actions button{padding:14px 8px;font-size:13px}.text-button{display:block;background:none;color:var(--green);box-shadow:none;margin:18px auto 0}.learner-dashboard>.muted{text-align:center;font-size:10px}.onboarding{margin:15px auto}.sample{display:none}header .tag{display:none}main{padding-top:20px}.term-section{max-width:900px;margin-left:auto;margin-right:auto}@media(max-width:540px){.welcome-screen{margin-top:45px}.welcome-screen h1{font-size:42px}.learner-dashboard h1{font-size:36px}.learner-dashboard{margin-top:15px}.continue-card{padding:24px}.dashboard-actions button{font-size:12px}header #profile{font-size:11px;padding:10px 12px}.theme-toggle{margin-left:auto}}
.account-panel{max-width:650px;margin:30px auto}.account-panel pre{white-space:pre-wrap;font:13px/1.6 system-ui;overflow-wrap:anywhere;background:var(--soft);padding:16px;border-radius:16px}.account-panel input[type=checkbox]{width:18px;min-height:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:7px}.account-panel>p,.account-panel form>p{font-size:12px;color:var(--muted)}.account-panel button{margin:6px 6px 6px 0}
.welcome-art{display:block;width:min(100%,420px);height:auto;max-height:230px;object-fit:contain;margin:0 auto 18px;border-radius:24px}.welcome-screen{padding-top:30px}.welcome-screen h1{font-size:clamp(36px,7vw,64px);margin-top:12px}.dashboard-art{display:block;width:100%;height:145px;object-fit:cover;object-position:center 44%;border-radius:22px;margin:0 0 20px}@media(min-width:750px){.dashboard-art{height:180px}.welcome-art{max-height:290px}}@media(max-width:360px){.welcome-art{max-height:180px}.dashboard-art{height:120px}}
/* YFC coherent UI tokens. 21st.dev welcome/onboarding + bento patterns, independently implemented. */
:root{--green:#17674e;--green-dark:#0e4c38;--ink:#19382d;--muted:#728178;--soft:#e8eee6;--line:#dfe6dd;--bg:#f7f8f2;--surface:#fff;--radius:24px}body{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}header{background:var(--bg);border-bottom:0;max-width:1060px;margin:auto;padding:18px 24px}.brand{color:var(--ink);font-size:22px;letter-spacing:-1px}.brand:before{background:var(--green);border-radius:13px;box-shadow:none}.brand span{color:var(--ink)}button{background:var(--green);border-radius:16px;box-shadow:none;border:1px solid transparent;font-weight:650;transition:background .15s,transform .15s}button:hover{background:var(--green-dark);transform:translateY(-1px)}button:focus-visible,a:focus-visible{outline:3px solid #8cba9d;outline-offset:4px}.secondary{color:var(--ink);background:#e8eee6;border:0}.secondary:hover{background:#dbe6dc;color:var(--ink)}.theme-toggle{background:#e8eee6;color:var(--ink);border-radius:50%;width:44px;height:44px}header #profile{color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:30px;font-size:12px}.panel{background:var(--surface);border-color:var(--line);box-shadow:none}#app{max-width:1060px;padding:16px 24px;margin:auto}.welcome-screen{max-width:540px;margin:0 auto;padding:4px 0 30px;text-align:center}.welcome-art{width:100%;max-width:460px;height:auto;max-height:280px;object-fit:contain;margin:0 auto 10px;border-radius:0}.welcome-kicker,.eyebrow{font-size:10px;font-weight:650;letter-spacing:1.8px;color:var(--muted)}.welcome-screen h1{font-size:clamp(37px,6vw,58px);line-height:1.08;letter-spacing:-1.9px;margin:13px 0 18px;font-weight:650}.welcome-screen h1 span,.learner-dashboard h1 span{color:var(--green)}.welcome-screen>p:not(.welcome-kicker){font-size:15px;line-height:1.6}.welcome-screen #getStarted{width:100%;max-width:330px;height:56px;margin-top:16px;display:inline-flex;align-items:center;justify-content:space-between;padding:0 24px}.welcome-screen .evaluation-note{font-size:10px!important;margin:22px 0 0}.onboarding{max-width:460px;margin:38px auto;padding:0;background:transparent;border:0}.onboard-step{display:flex;gap:6px;margin-bottom:38px}.onboard-step span{width:30px;height:4px;border-radius:4px;background:var(--green)}.onboard-step .pending{background:var(--line)}.onboarding h1{font-size:43px;line-height:1.12;letter-spacing:-1.6px;margin:15px 0}.onboarding>p:not(.eyebrow){font-size:14px;color:var(--muted)}.grade-picker{display:grid;grid-template-columns:1fr;gap:10px;margin:26px 0}.grade-picker button{height:60px;padding:0 20px;display:flex;justify-content:space-between;align-items:center;background:white;border:1px solid var(--line);color:var(--ink);font-size:16px;text-align:left}.grade-picker button:hover{border-color:var(--green);background:#eef4ed}.learner-dashboard{max-width:650px;margin:16px auto}.dashboard-art{display:block;width:100%;height:clamp(128px,32vw,180px);object-fit:contain;object-position:center;margin:0 auto 14px;border-radius:0}.learner-dashboard>.eyebrow{margin:10px 0 17px}.learner-dashboard h1{font-size:42px;line-height:1.12;letter-spacing:-1.7px;margin:0 0 29px;font-weight:650}.continue-card{position:relative;padding:25px;background:#e7eee2;border:0;border-radius:25px;overflow:hidden}.continue-card:after{content:'ƒ';position:absolute;font:italic 145px Georgia;right:15px;top:10px;color:#17674e09;pointer-events:none}.continue-card .eyebrow{display:flex;align-items:center;gap:8px;color:#4c6c58;font-size:9px;margin:0 0 17px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block}.continue-card h2{font-size:27px;line-height:1.2;max-width:80%;letter-spacing:-.8px;margin:0 0 10px}.continue-card>p:not(.eyebrow){font-size:13px;color:#607362;margin-bottom:25px}.continue-card>button{width:100%;height:52px;text-align:left;padding:0 20px}.dashboard-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-top:14px}.dashboard-actions button{height:76px;background:white;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;color:var(--ink);font-size:12px}.text-button{color:var(--green);font-size:13px;background:transparent;border:0;padding:16px 0}.learner-dashboard>.muted{font-size:10px;margin-top:18px;color:var(--muted)}footer{border-color:var(--line);font-size:10px;color:var(--muted);background:var(--bg)}.card{border-color:var(--line);box-shadow:none}.account-panel{border-color:var(--line)}@media(min-width:750px){.welcome-screen{padding-top:0}.welcome-art{max-height:310px}.learner-dashboard{margin:40px auto}.dashboard-actions button{height:90px}.onboarding{margin-top:50px}}@media(max-width:540px){header{padding:15px 20px}#app{padding:8px 24px}.welcome-screen{margin-top:0;padding-top:0}.welcome-art{max-height:248px}.welcome-screen h1{font-size:38px}.learner-dashboard{margin-top:24px}.learner-dashboard h1{font-size:37px}.onboarding{margin-top:32px}.onboarding h1{font-size:39px}}@media(max-width:360px){#app{padding-left:20px;padding-right:20px}.welcome-art{max-height:205px}.welcome-screen h1{font-size:32px}.onboarding h1{font-size:35px}.learner-dashboard h1{font-size:34px}.continue-card h2{font-size:24px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}html[data-theme=dark]{--bg:#13231d;--surface:#1c3027;--ink:#eef4ed;--muted:#a5b7aa;--line:#344b3d;--soft:#253d30}html[data-theme=dark] .continue-card{background:#284333}html[data-theme=dark] .continue-card h2,html[data-theme=dark] .continue-card p{color:#e6efe5}html[data-theme=dark] .grade-picker button,html[data-theme=dark] .dashboard-actions button{background:var(--surface);color:var(--ink)}
:root{--muted:#5f7065}.continue-card>p:not(.eyebrow){color:#506353}.welcome-screen .evaluation-note,.learner-dashboard>.muted{color:#5f7065}footer{color:#5f7065}
.learning-loop{display:flex;gap:8px;align-items:center;margin:14px 0 20px;font-size:11px;color:var(--muted)}.learning-loop span:before{content:'›';margin-right:8px;color:#9ba99e}.learning-loop b{font-weight:600;color:var(--green);background:#e8eee6;padding:7px 12px;border-radius:20px}.steps{display:none}body:has(#lessonVideo) #app>h1{font-size:clamp(27px,4vw,38px);line-height:1.14;margin:16px 0 20px;letter-spacing:-1px}body:has(#lessonVideo) .layout{grid-template-columns:minmax(0,1fr) 300px}#lessonVideo{margin-top:14px}.lesson-chat #returnLesson{margin:8px 0 16px;width:100%;min-height:48px}body:has(#lessonVideo) .panel{padding:22px}body:has(#lessonVideo) .layout>.panel>h2{font-size:19px}body:has(#lessonVideo) .layout>.panel>.pill{font-size:10px}.learning-loop+ p{margin-top:0}@media(max-width:750px){body:has(#lessonVideo) .layout{display:block}body:has(#lessonVideo) .layout>aside{margin-top:20px}body:has(#lessonVideo) .panel{padding:18px}body:has(#lessonVideo) #app>h1{font-size:29px}}

/* Lesson ink: compact, readable controls inspired by floating drawing toolbars. */
.drawing-stage{position:relative;width:100%;isolation:isolate}.drawing-stage video{display:block;width:100%;margin:0}.lesson-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;border-radius:inherit}.inking .lesson-ink{pointer-events:auto;touch-action:none;cursor:crosshair}.drawing-tools{margin:12px 0 18px}.ink-options{margin-top:10px;padding:12px;background:var(--bg,#f7f8f2);border:1px solid #dce5d9;border-radius:18px}.ink-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.ink-row button{font-size:13px;padding:10px 12px;min-height:44px}.ink-row button[aria-pressed="false"]{background:#e8eee4;color:#19382d}.ink-row label{display:flex;align-items:center;gap:6px;font-size:13px;margin:0}.ink-row input[type="color"]{width:42px;height:42px;padding:3px;margin:0}.ink-row select{width:auto;max-width:110px;padding:9px;margin:0}.ink-status{font-size:12px;line-height:1.5;margin-bottom:0}.drawing-stage:fullscreen{background:#13291f;display:flex;align-items:center;justify-content:center}.drawing-stage:fullscreen video{max-height:100vh;object-fit:contain}.drawing-stage:fullscreen .lesson-ink{border-radius:0}

.drawing-workspace:fullscreen{background:#f7f8f2;overflow:auto;padding:12px;box-sizing:border-box}.drawing-workspace:fullscreen .drawing-stage{max-width:75vh;margin:auto}.drawing-workspace:fullscreen .drawing-tools{max-width:700px;margin:12px auto}

/* Family mode keeps the same maths features with parent controls. */
.child-learning .learner-dashboard>.muted{font-size:0}.child-learning .learner-dashboard>.muted:after{content:"Parent-linked learning pilot. AI can make mistakes. Check with your teacher.";font-size:14px}

.walkthrough{text-align:left;margin:16px auto;max-width:330px}.walkthrough summary{color:var(--green);font-size:14px}.walkthrough video{max-height:62vh;width:100%;margin:12px auto;object-fit:contain;background:#f7f8f2}.walkthrough p{font-size:12px;color:var(--muted)}
/* Persistent study controls. Keep account actions outside the settings form. */
.study-nav{position:sticky;top:0;z-index:30;display:flex;gap:8px;align-items:center;padding:8px 20px;background:var(--paper,#f7f8f2);border-bottom:1px solid #dce5da}.study-nav button{padding:10px 15px;min-height:44px;font-size:14px;border-radius:14px;white-space:nowrap}.study-nav #navLogin,.study-nav #navLogout{margin-left:auto}.study-nav button:disabled{opacity:.45;cursor:default}.study-nav [hidden]{display:none!important}.account-top-close{position:sticky;top:0;z-index:4;display:block;margin:0 0 12px auto;min-height:44px;padding:10px 18px}.account-panel>details{margin-block:18px}.account-panel #loginLearner{display:grid;gap:12px}#account:has(#loginLearner:focus-within){scroll-behavior:auto}@media(max-width:400px){.study-nav{padding:8px 16px;gap:6px}.study-nav button{padding:10px 13px}header .tag{display:none}}

/* Explicit ink/video layers preserve visible whiteboard under transparent canvas. */
.drawing-stage{isolation:auto}.drawing-stage video{position:relative;z-index:1}.drawing-stage .lesson-ink{z-index:2;transform:translateZ(0)}

.maths-practice-item{padding:16px 0;line-height:1.6}.maths-practice-item summary{cursor:pointer;font-weight:600;overflow-wrap:anywhere}.maths-practice-item p{overflow-wrap:anywhere}

/* === YFC readability + dark-mode fix (audit 2026-11-10) === */
/* Fix 1: Thabiso's 16px minimum readable-text rule. All interactive and body text to 16px. */
button,.btn,input,select,textarea,label,summary,
.card p,.card button,.card .pill,.card .number,
.muted,.eyebrow,.pill,.number,.tag,.notice,
.chat-turn,.chat-turn strong,#chatStatus,.crew-state,#groupIntro,
.hero-tags span,.hero .intro,.hero .muted,.hero #jumpHomework,
.dashboard-strip b,.dashboard-strip span,
header #profile,.walkthrough summary,.walkthrough p,
.lesson-chat>p,.group-entry,.voice-plan,.voice-plan span,
.learning-loop,.class-nav a,.study-nav button,.text-button,
.dashboard-actions button,.ink-row button,.ink-row label,.ink-status,
#photoStatus,#boardStatus,#boardDownload,
.pace-control select,.pace-control .muted,
.welcome-screen>p,.welcome-kicker,.evaluation-note,.sample,
.continue-card>p,.continue-card .eyebrow,
.account-panel>p,.account-panel form>p,.account-panel pre,
footer,footer a,.steps span,.learner-dashboard>.muted,
.grade-picker button,.onboarding>p
{font-size:16px !important}
.learning-loop{flex-wrap:wrap}
.chat-turn strong{font-weight:800}
/* keep eyebrows as eyebrows: bold + spaced, now at readable size */
.eyebrow,.welcome-kicker{font-weight:800;letter-spacing:.12em}
/* Fix 2: dark-mode secondary/nav buttons were dark-green on dark-green (Back/Home/Log out unreadable) */
html[data-theme=dark] button.secondary,
html[data-theme=dark] .secondary,
html[data-theme=dark] .study-nav button,
html[data-theme=dark] .text-button,
html[data-theme=dark] .coming button{color:#eef4ed;background:#253d30}
html[data-theme=dark] button.secondary:hover{background:#2e4a3a}
html[data-theme=dark] .card button.group-entry{background:#1f3d33;color:#7fd8b8}

/* Specificity fix: original rule had !important at .welcome-screen .evaluation-note (10px) */
.welcome-screen .evaluation-note{font-size:16px !important}