/* KEYBAKI learning workspace. Shared foundations for the existing activity components.
   Local system fonts keep the interface available on first load and offline. */
:root{--brand-primary:#1d4ed8;--brand-primary-hover:#173ea8;--brand-ink:#0f172a;--brand-navy:#0a1430;--ink:#0f172a;--muted:#475569;--bg:#f6f7fb;--line:#dce2ed;--radius:16px;--sidebar-width:264px;--ui-font:Inter,"Segoe UI",Arial,sans-serif}
body{font-family:var(--ui-font);font-size:15px;line-height:1.55;background:var(--bg);color:var(--ink)}
h1,h2,h3{font-family:var(--ui-font);text-wrap:balance}h1{font-size:clamp(26px,2.5vw,36px);line-height:1.18;letter-spacing:-1.1px;font-weight:750}h2{font-size:21px;line-height:1.35}h3{font-size:17px;line-height:1.4}
button,input,select,textarea{font:inherit}button{transition:background-color .15s,border-color .15s,box-shadow .15s}button:disabled{opacity:.55;cursor:not-allowed}
:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #1d4ed8;outline-offset:4px;box-shadow:0 0 0 6px #fff}
.skip-link{position:fixed;top:12px;left:16px;z-index:200;background:#0a1430;color:#fff;padding:12px 20px;border-radius:8px;transform:translateY(-160%)}.skip-link:focus{transform:none}
.primary,.secondary{min-height:44px;border-radius:10px;padding:11px 17px;font-size:14px;font-weight:650;line-height:1.4}.primary{background:var(--brand-primary);color:#fff;border:1px solid transparent}.primary:hover{background:var(--brand-primary-hover);box-shadow:0 3px 8px #1d4ed81a}.secondary{background:#fff;color:#263954;border:1px solid #bac7da}.secondary:hover{background:#edf3ff;border-color:#8aa7de}
.primary.remove-learner{background:#b91c1c}.profile-text-button,.link-button{font-size:13px;min-height:40px;color:#1d4ed8}input,select,textarea{border-radius:9px;max-width:100%}
/* One explicit shell width: no implicit hover expansion or overlapping rail. */

.lab-subnav{margin:0 0 4px 21px}

main{max-width:1400px;padding:32px clamp(20px,3vw,48px) 48px}.page-head{gap:20px;margin-bottom:26px}.page-head p{font-size:14px;line-height:1.6;margin-top:8px}.panel,.card,.profile-pathway,.profile-side-panel{border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 2px 3px #0a143003}.panel{padding:24px}.card:hover,.profile-pathway:hover{border-color:#a8bce0}.muted{color:var(--muted)}footer{font-size:12px;color:#526072;border-color:var(--line)}
/* A clear next action, followed by the learner's six areas. */
.profile-heading{margin-bottom:26px}.profile-person h1{font-size:32px}.profile-person .muted,.profile-section-intro{font-size:14px}.profile-kicker{font-size:11px;font-weight:700;letter-spacing:1.5px}.profile-dashboard{max-width:none}.profile-dashboard .profile-start-grid{margin-bottom:32px}.profile-dashboard .profile-start-grid article{padding:30px;border-radius:20px;background:#0a1430;position:relative}.profile-dashboard .profile-start-grid h2{font-size:28px;max-width:28ch;letter-spacing:-.7px}.profile-dashboard .profile-start-grid p{font-size:14px;max-width:65ch;color:#cbd5e1}.profile-start-grid .primary{background:#fff;color:#163ea9}.profile-start-grid .primary:hover{background:#e8efff}.profile-start-grid .secondary{background:transparent;color:#fff;border-color:#8191af}.welcome-offer{background:#142349;border-color:#40567c;color:#fff}.welcome-offer b{color:#fff}.welcome-offer .profile-text-button{color:#dbeafe}.profile-dashboard-grid{grid-template-columns:minmax(0,1fr) 240px;gap:24px}.profile-pathway-grid{gap:18px}.profile-pathway{padding:23px}.profile-pathway h3{font-size:17px}.profile-area-icon{padding:11px;border-radius:13px;background:#edf2ff}.profile-skill-statement{font-size:14px;line-height:1.6;min-height:44px}.profile-device,.profile-status{font-size:12px}.profile-status{background:#eef1f6;color:#475569}.profile-card-actions{gap:10px}.profile-card-actions .primary,.profile-card-actions .secondary{font-size:13px;min-height:44px}.profile-pathway .profile-assess{text-align:left;min-height:36px}.profile-side-panel{padding:20px}.profile-side-panel h2{font-size:16px}.profile-side-panel>.muted,.profile-mini-row b{font-size:13px}.profile-side-column{gap:18px}.profile-evidence-note{font-size:12px}.profile-summary-strip{border-radius:16px}
/* Foundation practice receives most of the available space. Explanations remain readable. */
.foundation-explainer{background:#edf2f9;border-color:#dbe3ef}.foundation-icon{margin-bottom:12px}.foundation-explainer h2{font-size:18px}.foundation-explainer .mini-demo{background:#fff;padding:16px;min-height:100px;margin-bottom:0}.foundation-task{display:flex;flex-direction:column}.foundation-task h2{font-size:21px}.foundation-task>p{margin:8px 0 14px}.foundation-task #foundation-practice{order:1}.foundation-task #foundation-guide{order:2;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.foundation-task #foundation-feedback{order:3}.foundation-task #foundation-next{order:4;align-self:flex-start}.foundation-task .sim-steps{font-size:13px;margin:0 0 12px}.parts-task-heading{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;gap:12px;background:#eaf0ff;border:1px solid #c8d7fa;border-radius:10px;padding:10px 14px;margin:10px 0}.parts-task-heading .parts-prompt{font-size:16px;color:#163ea9;margin:0;font-weight:700}.parts-count{font-size:12px;color:#3c537b;white-space:nowrap}.parts-round{font-size:12px}.parts-scene{background:#f9fbfe;border-color:#dce4f1;border-radius:14px;max-width:680px}.parts-note:empty{display:none}.parts-note:not(:empty){padding:10px 12px;border-radius:8px;background:#f0f5ff;color:#263954;font-size:14px}.part-spot:focus-visible{outline-offset:0;box-shadow:inset 0 0 0 4px #fff}.real-check{margin-top:24px;background:#fff}.real-check h2{font-size:19px}.real-items{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}.real-item{padding:12px;background:#f7f9fc;border-radius:8px;line-height:1.5}.real-item input{width:18px;height:18px;flex:none;accent-color:#1d4ed8}.real-helper{max-width:360px}.real-helper input{min-height:44px}
/* Captions are a dependable instruction channel, including missing or rejected audio. */
body.amani-on main{padding-bottom:48px}
.foundation-overview,.area-overview{background:#edf2ff;border-color:#c6d6f5}.foundation-cards{gap:20px}.foundation-card .card-body{padding:22px}.foundation-card .game-art{height:124px}.foundation-stage{margin:18px 0 0}.foundation-stage h2{font-size:23px}.foundation-stage p{font-size:14px}.game-art .number{font-size:11px}.learner-card{border-radius:18px;border-color:var(--line)}.learner-card.current{border:2px solid #1d4ed8}.learner-pick b{font-size:20px}.learner-pick small,.learners-note{font-size:14px}.learner-add input{min-height:46px}.learner-card-actions{padding:8px 16px;border-top:1px solid var(--line)}

@media(max-width:1199px){:root{--sidebar-width:236px}.profile-dashboard-grid{grid-template-columns:1fr}.profile-side-column{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){main{padding:24px}.foundation-explainer{padding:18px}.foundation-explainer .foundation-icon,.foundation-explainer .mini-demo{display:none}.foundation-explainer p{margin-bottom:0}.real-items{grid-template-columns:1fr}.profile-pathway-grid{grid-template-columns:1fr}}
@media(max-width:760px){:root{--sidebar-width:0px}main{padding:24px 18px 40px}.page-head{align-items:flex-start;gap:14px}.page-head h1,.profile-person h1{font-size:27px}.page-head p{font-size:13px}.profile-dashboard .profile-start-grid article{padding:24px}.profile-dashboard .profile-start-grid h2{font-size:25px}.profile-start-grid .primary,.profile-start-grid .secondary{width:100%;margin-top:8px}.profile-side-column,.profile-pathway-grid{grid-template-columns:1fr}.profile-pathway{padding:22px}.profile-skill-statement{min-height:0}.profile-heading{gap:18px}.profile-header-actions{width:100%;justify-content:flex-start}.panel{padding:20px}.parts-task-heading{padding:10px}.parts-task-heading .parts-prompt{font-size:15px}.foundation-task #foundation-guide{margin-top:12px}.real-items{grid-template-columns:1fr}footer{padding:20px;flex-wrap:wrap}.profile-summary-strip{grid-template-columns:1fr 1fr}.profile-summary-strip>div{border:0}.learner-grid{grid-template-columns:1fr}.test-layout{min-width:0}}
.high-contrast{--line:#64748b;--muted:#334155;--bg:#fff}.high-contrast .primary{background:#102a71;color:#fff}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.activity-result{width:100%;display:flex;text-align:left;justify-content:space-between;align-items:center;gap:12px;padding:13px 10px;border-bottom:1px solid #e2e8f0;border-radius:7px}.activity-result:hover{background:#edf2ff}.activity-result b{display:block;font-size:14px}.activity-result small{display:block;font-size:12px;color:#526072;margin-top:3px}dialog::backdrop{background:#0a143080}dialog{border:1px solid #ccd7e7;border-radius:18px;box-shadow:0 24px 80px #0a14303d;padding:26px}
/* Final responsive QA: preserve contrast inside the navy welcome card and room for captions. */
.profile-start-grid .welcome-offer span{color:#f1f5ff}.profile-start-grid .welcome-offer .link-button{color:#dbeafe}.parts-scene{max-width:560px;margin-left:auto;margin-right:auto}
@media(max-width:760px){.foundation-task{grid-row:1}.foundation-explainer{grid-row:2}}
@media(min-width:761px) and (max-height:860px){.parts-scene{max-width:460px}}

/* Custom VectorCraft artwork: consistent optical scale and a restrained KEYBAKI palette. */
.game-cards .game-art,.foundation-card .game-art,.game-setup>.game-art{background:#eef4fc;color:#17345b}
.game-art .game-decoration{display:none}
.game-symbol .game-icon{width:88px;height:88px;display:block}
.foundation-card .foundation-svg{width:76px;height:76px;display:block}
.game-art .number{color:#405777;letter-spacing:.08em}
@media(forced-colors:active){.game-icon path,.game-icon rect,.game-icon circle,.foundation-svg path,.foundation-svg rect,.foundation-svg circle{stroke:CanvasText;fill:Canvas}}
/* Keep simulated applications inside their flex column on narrow devices. */.sim-workspace,.browser-chrome,.site-view,.chat-app{min-width:0;max-width:100%;box-sizing:border-box}
.search-box input,.browser-bar .address-bar{min-width:0}
.browser-bar .address-bar{overflow-wrap:anywhere}
.connect-ports{flex-wrap:wrap;justify-content:center}
.connect-port{flex:1 1 84px}
@media(max-width:480px){
 .browser-bar{gap:6px;padding:8px}
 .search-box{padding:12px;flex-wrap:wrap}
 .search-box input{width:100%;flex:1 1 140px}
 .chat-head{gap:8px;flex-wrap:wrap}
 .chat-bar{flex-wrap:wrap}
 .chat-bar input{flex:1 1 140px}
}
/* Intrinsic sizes must also reflow with the app's 130% text setting. */
.area-overview>div,.stat,.stat>div,.cards>*{min-width:0}
.area-overview>div{flex-basis:180px}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.cards.milestone-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.level-path{max-width:100%;overflow-x:auto}
.sim-steps{flex-wrap:wrap}
.sim-steps li{min-width:0;max-width:100%;box-sizing:border-box;flex:1 1 180px}
.volume{flex-wrap:wrap;max-width:100%}
.volume input{max-width:100%}

@media(max-width:900px){.text-size-2 .milestone-cards{grid-template-columns:1fr}}

.test-layout>*{min-width:0}
.test-records{overflow-x:auto}
.device-activity-note{overflow-wrap:anywhere;min-width:0}
/* Milestone artwork stays legible before it is earned; status is also explicit text and shape. */
.milestone{--milestone-ink:#52637a;--milestone-accent:#e2e8f0;--milestone-paper:#f8fafc}
.milestone.earned{--milestone-ink:#17345b;--milestone-accent:#93c5fd;--milestone-paper:#eff6ff;background:#eef5ff;border-color:#7ba7e5}
.milestone>span{display:inline-grid;place-items:center;width:64px;height:64px;font-size:initial;line-height:1}
.milestone-icon{width:60px;height:60px}
.milestone h3{margin-top:12px}
.milestone .milestone-state{display:flex;align-items:center;gap:6px;font-size:12px;color:#40526a}
.milestone.earned .milestone-state{color:#17345b}
.milestone-state>span{font-size:17px;line-height:1}
@media(forced-colors:active){.milestone-icon path,.milestone-icon rect,.milestone-icon circle{stroke:CanvasText;fill:Canvas}}
.icon-heading{display:flex;align-items:center;gap:12px}.progress-icon{width:34px;height:34px;flex:0 0 34px;color:#1d4ed8}.icon-heading .progress-icon{vertical-align:middle}
#progress-skills,#progress-milestones,#progress-typing{scroll-margin-top:100px}.milestone-purpose{color:#40526a;font-weight:600;margin-top:4px}
.progress-milestones .milestone-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
/* One learner workspace, three distinct views. */
.my-skills-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:6px;background:#eaf0f8;border:1px solid #d6e0ed;border-radius:16px;margin:20px 0 28px}
.my-skills-nav a{display:flex;flex-direction:column;gap:5px;padding:14px 18px;border:1px solid transparent;border-radius:11px;text-decoration:none;color:#40526a;min-height:64px}
.my-skills-nav a strong{font-size:16px;color:#17345b}.my-skills-nav a span{font-size:12px;line-height:1.4}
.my-skills-nav a:hover{background:#f8fbff}.my-skills-nav a[aria-current]{background:white;border-color:#9eb9e4;box-shadow:0 2px 6px #17345b0d}.my-skills-nav a[aria-current] strong{color:#1d4ed8}
.my-skills-nav a:focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}
.skills-detail-disclosure{margin:24px 0;border:1px solid #d6e0ed;border-radius:14px;background:#fff;padding:18px}.skills-detail-disclosure>summary{font-weight:700;cursor:pointer;min-height:28px}.skills-detail-disclosure[open]>summary{margin-bottom:20px}
.skills-timeline{list-style:none;margin:0;padding:0}.skills-timeline li{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-top:1px solid #e2e8f0}.skills-timeline h3{margin:0;font-size:16px}.skills-timeline p{margin:6px 0 0;color:#40526a}.skills-timeline time{color:#52637a;white-space:nowrap;font-size:13px}.skills-empty{padding:24px 0}.skills-history{margin-bottom:28px}
@media(max-width:640px){.my-skills-nav{gap:3px;padding:4px}.my-skills-nav a{padding:12px 7px;min-height:44px;align-items:center;justify-content:center}.my-skills-nav a strong{font-size:14px}.my-skills-nav a span{display:none}.skills-timeline li{flex-direction:column;gap:6px}}
@media(forced-colors:active){.my-skills-nav a[aria-current]{border:2px solid Highlight}}
.profile-heading{align-items:flex-start;gap:24px}.profile-header-actions{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;max-width:460px;gap:8px}.profile-header-actions .profile-text-button{flex-basis:100%}
@media(max-width:760px){.profile-header-actions{justify-content:flex-start;max-width:none}.profile-heading{gap:16px}.profile-header-actions .profile-text-button{text-align:left}}
.skills-history-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:12px 0 20px}.skills-history-tools label{display:flex;align-items:center;gap:8px;margin:0}.skills-history-tools select{width:auto;min-width:160px;min-height:44px}.skills-history .profile-section-heading>.secondary{flex-shrink:0}
@media(max-width:640px){.skills-history .profile-section-heading{align-items:flex-start;flex-direction:column}.skills-history-tools,.skills-history-tools label{max-width:100%}.skills-history-tools label{flex-wrap:wrap}.skills-history-tools select{min-width:0;max-width:100%}}
.keyboard.with-hand-coach{position:relative;padding-bottom:var(--hand-space,155px)}
.typing-hand-overlay{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:2}
.coach-digit{fill:#c7d9ef;fill-opacity:.38;stroke:#52749d;stroke-width:1.5;stroke-opacity:.8}.coach-digit.is-target{fill:#93c5fd;fill-opacity:.6;stroke:#1d4ed8;stroke-width:2.5}.coach-tip{fill:#526d8e}.coach-tip.is-target{fill:#1d4ed8;stroke:white;stroke-width:1}.coach-palm{opacity:.96}.typing-hand-overlay text{font-size:11px;fill:#334155;font-weight:600}
.finger-coach{display:block;background:#edf3fb;border:1px solid #d6e0ed}.home-placement{display:flex;gap:12px 24px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#40526a}.home-placement span:last-child{flex-basis:100%}.home-placement kbd{display:inline-block;padding:3px 6px;border:1px solid #b8c8dc;border-radius:4px;background:#fff}.high-contrast .coach-digit{stroke:#0f172a}.high-contrast .coach-digit.is-target{stroke:#1d4ed8;stroke-width:3}
@media(forced-colors:active){.coach-digit,.coach-palm path{stroke:CanvasText;fill:Canvas}.coach-digit.is-target,.coach-tip.is-target{stroke:Highlight;fill:Highlight}.typing-hand-overlay text{fill:CanvasText}}
.typing-hand-overlay{width:100%;max-width:100%;height:auto}
/* A continuous translucent hand silhouette keeps the keyboard readable. */
.typing-hand-overlay .coach-hand-shape{opacity:.5}
.typing-hand-overlay .coach-digit{fill:#c5aaa2;fill-opacity:1;stroke:#a38b84;stroke-width:1;stroke-opacity:.45}
.typing-hand-overlay .coach-digit.is-target{fill:#39c1dd;fill-opacity:1;stroke:#0891b2;stroke-width:1.5}
.typing-hand-overlay .coach-palm{opacity:1}
.typing-hand-overlay .coach-tip{fill:#8b716b;opacity:.5}
.typing-hand-overlay .coach-tip.is-target{fill:#067c99;opacity:1}
.account-entry{max-width:1080px;margin:36px auto 72px;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.account-intro{padding:20px 0}.account-intro>img{width:220px;height:auto;max-width:100%;margin-bottom:40px}.account-intro h1{font-size:clamp(34px,4vw,52px);line-height:1.08;letter-spacing:-.045em;margin:12px 0 24px;color:#14295b}.account-lead{font-size:18px;line-height:1.65;color:#465672}.account-promise{display:flex;align-items:flex-start;gap:16px;margin:34px 0;padding-top:28px;border-top:1px solid #dce3ef}.account-promise svg{flex-shrink:0;width:32px;height:32px;color:#244bd9}.account-promise h2{font-size:18px;margin:0 0 10px}.account-promise p,.account-caption{font-size:14px;line-height:1.65;color:#526078}.account-card{background:#fff;border:1px solid #dbe2ef;box-shadow:0 14px 45px #22356c08;border-radius:24px;padding:32px}.account-badge{font-size:11px;font-weight:750;letter-spacing:.12em;color:#3154bc}.account-card h2{font-size:26px;line-height:1.25;margin:16px 0 24px;letter-spacing:-.025em}.account-link{display:flex;align-items:center;justify-content:space-between;gap:14px;text-decoration:none;padding:16px 18px;border-radius:12px;font-weight:700;background:#2448df;color:white;margin:12px 0 20px}.account-register,.account-local p,.account-status p,.account-help p{font-size:14px;line-height:1.65;color:#536079}.account-status{padding:16px;background:#f1f5ff;border:1px solid #d9e3fd;border-radius:12px;margin-top:24px}.account-status b{display:block;font-size:15px;color:#233d76}.account-status p{margin:8px 0 0}.account-check{background:transparent;color:#2446b7;text-decoration:underline;min-height:44px;padding:8px 0;border:0}.account-local{border-top:1px solid #e3e7ef;margin-top:16px;padding-top:22px}.account-local h3{font-size:17px;margin:0}.account-local button{width:100%;margin:8px 0 20px}.account-help{font-size:14px}.account-help summary{min-height:32px;cursor:pointer}.account-entry :focus-visible,.account-header:focus-visible{outline:3px solid #234fe7;outline-offset:4px}.high-contrast .account-card,.high-contrast .account-status{border:2px solid currentColor}.high-contrast .account-entry p{color:#111}
@media(max-width:1023px){.account-entry{gap:32px;margin:16px auto 40px}.account-card{padding:24px}}@media(max-width:760px){.account-entry{grid-template-columns:1fr;gap:20px}.account-intro{padding:0}.account-intro>img{width:175px;margin-bottom:20px}.account-intro h1{font-size:36px}.account-promise,.account-caption{display:none}.account-card{padding:24px 20px;border-radius:18px}.account-lead{font-size:16px}}

.account-card form .account-link{width:100%;justify-content:center;border:0}.account-card form>.secondary{width:100%;min-height:46px}.account-card>.secondary{margin:12px 8px 12px 0}.account-lock{max-width:600px;margin:80px auto;padding:32px}.account-lock p{line-height:1.6}.account-lock a{display:block;margin:20px 0}

/* Keep the staged script bootstrap from exposing intermediate learner screens. */
#lab-startup{display:none}.lab-loading>.shell,.lab-loading>aside{visibility:hidden}.lab-loading #lab-startup{display:block;position:fixed;z-index:200;inset:0;background:var(--bg,#f6f8fc);padding:15vh max(24px,calc((100vw - 600px)/2));color:var(--text,#182d44)}.lab-loading #lab-startup h1{font-size:clamp(26px,4vw,40px);margin-top:24px}

.account-verifying .shell{visibility:hidden}.account-verifying::after{content:"Checking your account…";position:fixed;inset:0;z-index:250;background:#f6f8fc;display:grid;place-items:center;color:#142943;font-size:22px}
/* One-time import: each device learner on this computer is one large choice (account-import.js). */
.import-learners{display:grid;gap:8px;margin:14px 0}
.import-learner{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;text-align:left}
.import-learner .avatar{display:inline-grid;flex:0 0 36px;width:36px;height:36px}
.import-learner b,.import-learner small{display:block}
.import-learner small{color:#475569;font-weight:400;margin-top:2px}

/* Learning areas page: activity search above the six area cards; results stay in page flow. */
.lab-areas-search{margin:0 0 28px;padding:22px 24px}.lab-areas-search h2,.lab-areas-list h2{font-size:19px;margin:0 0 12px;color:#18335a}.lab-areas-search label{display:block;font-size:14px;margin-bottom:8px}.lab-areas-search input{box-sizing:border-box;width:100%;max-width:640px;min-height:48px;padding:12px 14px;border:1px solid #aabbd3;border-radius:10px;background:#fff;color:#0f172a;font:inherit}.lab-areas-search #activity-count{font-size:13px;color:#475569;margin:12px 0 4px}
#activity-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px}#activity-results:empty{display:none}a.activity-result{box-sizing:border-box;min-height:52px;color:#18335a;text-decoration:none}a.activity-result:hover b{text-decoration:underline}
.lab-areas-list .standalone-area-grid{margin-top:4px}.lab-areas-list .standalone-area{min-height:100%;box-sizing:border-box}
/* Working offline page. */
.lab-offline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:12px 0 30px}.lab-offline-grid article{padding:22px 24px;border:1px solid #d3ddea;border-radius:18px;background:#fff}.lab-offline-grid h2{font-size:20px;margin:0 0 8px}.lab-offline ul{margin:0;padding-left:22px;line-height:1.7;color:#334c6b}.lab-offline li+li{margin-top:6px}.lab-offline #offline-status{margin-top:8px}.lab-offline .standalone-actions{margin:20px 0 32px}
@media(max-width:760px){.lab-offline-grid{grid-template-columns:1fr}.lab-areas-search{padding:18px}}
/* App footer links (Help, Terms, Privacy, Working offline). */
.lab-footer-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-left:auto}.lab-footer-links a,.lab-footer-links .lab-footer-share{display:inline-flex;align-items:center;min-height:44px;color:#334c6b;font-weight:600;text-decoration:none}.lab-footer-links a:hover,.lab-footer-links a[aria-current],.lab-footer-links .lab-footer-share:hover,.lab-footer-links .lab-footer-share[aria-current]{text-decoration:underline;text-underline-offset:4px}.account-offline-link{margin:10px 0 0}
@media(max-width:760px){.lab-footer-links{margin-left:0}}
/* Compact workspace header: identity first, preferences in its menu. */

#modal:has(.settings-groups){width:560px;max-width:calc((100vw - 24px)/var(--settings-zoom,1));max-height:calc((100dvh - 32px)/var(--settings-zoom,1));padding:20px}
.text-size-1 #modal:has(.settings-groups){--settings-zoom:1.15}.text-size-2 #modal:has(.settings-groups){--settings-zoom:1.3}
.settings-groups{display:grid;gap:20px;margin:20px 0}.settings-groups fieldset{min-width:0;margin:0;padding:12px;border:1px solid var(--line);border-radius:10px}.settings-groups legend{font-weight:700;padding:0 6px;color:#18335a}.settings-groups label{min-height:44px;display:flex;align-items:center;gap:10px;line-height:1.5;flex-wrap:wrap}.settings-groups label:has(input){flex-wrap:nowrap;align-items:flex-start}.settings-groups input[type=checkbox]{flex:none;margin-top:4px;width:20px;height:20px}.settings-groups select{max-width:100%;min-height:44px}.settings-actions{display:flex;gap:10px;flex-wrap:wrap}.settings-actions button{min-height:44px}

/* The quiz moves focus to each new question for screen readers; that is not a control, so it gets no focus ring. */
.starting-quiz .quiz-question:focus-visible{outline:none;box-shadow:none}
.starting-signs .real-item{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer}

/* The two ways into the lab for a new learner stand out in warm colours. */
.highlight-tour,.highlight-start{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer;transition:background .15s,box-shadow .15s,transform .15s}
.highlight-tour{background:#c2410c;border:1.5px solid #c2410c;color:#fff;box-shadow:0 6px 16px rgba(194,65,12,.28)}
.highlight-tour:hover{background:#9a3412;border-color:#9a3412;transform:translateY(-1px)}
.highlight-start{background:#fef3c7;border:1.5px solid #f59e0b;color:#92400e;box-shadow:0 4px 12px rgba(245,158,11,.22)}
.highlight-start:hover{background:#fde68a;transform:translateY(-1px)}
.highlight-tour .line-icon,.highlight-start .line-icon{width:18px;height:18px;flex:none}
@media (prefers-reduced-motion:reduce){.highlight-tour,.highlight-start{transition:none}.highlight-tour:hover,.highlight-start:hover{transform:none}}

/* Copy and consistency pass. Selects look like the inputs beside them: white, with the same border. */
select{background-color:#fff;color:var(--ink,#0f172a);border:1px solid #cbd5e1;border-radius:8px;padding:8px 10px;min-height:40px}
.high-contrast select{border-color:#334155}
/* The in-app footer: one line, brand and signoff, separated. */
footer .footer-brand{display:inline!important;margin:0}
/* My Skills: Overview, Milestones and History share one header and one width. */
.profile-summary-strip .profile-text-button{display:block;margin-top:6px;padding:0;min-height:0;font-size:12px;text-align:left}
.profile-skill-list{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:14px}
.profile-skill-list li{display:grid;gap:6px}.profile-skill-list li+li{border-top:1px solid #e2e8f0;padding-top:14px}
.profile-skill-list .profile-skill-statement{min-height:0;margin:0}.profile-skill-list .competency-track{margin:4px 0 0}
.profile-skill-level{font-size:12px;color:#475569}.profile-skill-list .profile-device{margin:0}
.profile-skill-list .profile-assess{justify-self:start}

/* Milestones: nine cards in three even rows, one column on small screens. */
.progress-milestones .milestone-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.progress-milestones .milestone-cards{grid-template-columns:1fr}}
.milestone .milestone-state>.milestone-count{font-size:12px;font-weight:600;color:#40526a}
/* Typing lessons: the daily goal sits under the page title; locked lessons share one quiet colour. */
.page-head .goal-pill{display:inline-flex;margin-top:12px;width:auto;max-width:240px}
.cards .lesson-card.locked .card-art{background:#f1f5f9}
/* Badges wrap inside their card instead of running past its edge. */
.lesson-badge{max-width:calc(100% - 24px);white-space:normal;text-align:right}
/* Starting point: Exit sits apart from the answer controls. */
.starting-actions .starting-exit{margin-left:auto}
.starting-card .starting-typing-level{display:block;margin-top:8px;padding:0;text-align:left}
/* Signed in, the account page is a short card. */
.account-signed-in{display:block;max-width:560px;margin:0 auto}
.account-signed-in h1{font-size:28px;margin:4px 0 8px}
.account-signed-in .account-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 8px}
.account-signed-in .account-actions button{width:auto;margin:0}
.account-signed-in .account-status button{margin-top:10px}
.stats-source{font-size:12px;margin:-14px 0 22px}
/* Practice activities: one feedback line styled as feedback, a neutral practice frame, finished practice switched off. */
.foundation-task #foundation-feedback{font-size:14px;line-height:1.55;color:#334155;margin:12px 0 0}
.foundation-task #foundation-feedback:empty{display:none}
#foundation-feedback.foundation-retry{background:#fef2f2;border:1px solid #fecaca;border-left:4px solid #b91c1c;color:#7f1d1d;border-radius:10px;padding:10px 12px}
#foundation-feedback.foundation-hint-note{background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid #1d4ed8;color:#1e3a8a;border-radius:10px;padding:10px 12px}
.practice-account{background:#f8fafc;border:1px solid #cbd5e1;border-radius:12px;padding:16px}
.practice-account>b{margin-left:8px}
.account-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;border-radius:10px;width:fit-content;max-width:100%}
.practice-finished{opacity:.7}
.foundation-task #foundation-next{margin-top:12px}
#foundation-practice :disabled,.foundation-hint:disabled{cursor:not-allowed;opacity:.6}
/* The steps diagram: one step per line, each arrow belongs to the step below it, with room before the buttons. */
.demo-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:0}
.demo-steps li{display:flex;flex-direction:column;align-items:center;max-width:100%}
.demo-steps li+li::before{content:'';width:8px;height:8px;border-right:2px solid #94a3b8;border-bottom:2px solid #94a3b8;transform:rotate(45deg);margin:4px 0 10px}
.demo-steps span{display:inline-block;max-width:100%;text-align:center;overflow-wrap:anywhere}
.foundation-explainer .mini-demo{margin-bottom:14px}
/* While Tcha's narrator bar is showing, its controls are the audio controls; Read aloud returns when Tcha is closed. */body.amani-on .foundation-explainer .read-aloud-button{display:none}

/* Back to the area: a drawn arrow, since the ← character renders as a speck in some fonts. */
.page-back{display:inline-flex;align-items:center;gap:6px}.page-back .line-icon{width:18px;height:18px;flex:none}
/* Settings: what each sound option does, in one short line. */
.setting-help{display:block;font-size:12px;line-height:1.45;color:#526072;font-weight:400;margin-top:2px}
/* Show me / Guide me / Let me try on the cards are buttons, so they look like buttons, not tags. */
.mode-pill{border:1px solid #94a3b8;border-radius:8px;background:#fff;color:#1d4ed8;font-size:13px;font-weight:600;padding:6px 12px;box-shadow:0 1px 0 #cbd5e1;cursor:pointer}
.mode-pill:hover{background:#eff6ff;border-color:#1d4ed8}
.mode-pill.done{border-color:#86efac;background:#f0fdf4;color:#166534}
/* The end of an area page: its skill check and the next area. */
.area-end{margin-top:24px}.area-end h2{margin:0 0 6px}.area-end-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
/* One main button per My Skills card, with the skill check as a small text link. */
.profile-card-actions{display:flex;flex-direction:column;align-items:stretch}.profile-card-actions .primary{width:100%;white-space:normal;text-align:center}.profile-card-actions .profile-assess{align-self:flex-start;min-height:32px;padding:4px 0}

/* My Skills summary on phones: number and ring on one line, then the label, then the link or bar, so nothing is pushed off the card. */
@media(max-width:760px){.profile-summary-strip>div{flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:4px 8px}.profile-summary-strip>div>span:not(.goal-bar):not(.summary-ring),.profile-summary-strip .goal-bar,.profile-summary-strip .profile-text-button{flex:1 1 100%}}
.profile-summary-strip .profile-text-button{min-height:32px;display:inline-flex;align-items:center}
@media(max-width:900px){.profile-summary-strip>div:nth-child(n+3){border-top:1px solid #e2e8f0}}
/* Text-style buttons keep a tap target of at least 32px. */
.card-foot>button:not(.primary):not(.secondary),.skip-placement{min-height:32px}
/* Opening the lab: Tcha draws in, blinks and glances while keys spelling KEYBAKI LABS press in turn. Still for reduced motion. */
.lab-loading #lab-startup{display:grid;place-items:center;padding:24px;text-align:center}
.startup-card{display:flex;flex-direction:column;align-items:center;max-width:460px;animation:startup-rise .5s ease-out both}
.lab-loading #lab-startup h1{margin:20px 0 0;font-size:clamp(26px,4vw,36px);letter-spacing:-.5px}
#lab-startup p{margin:10px 0 0;color:#475569;font-size:16px;line-height:1.5}
.startup-tcha{display:block;width:112px;height:112px;overflow:visible;animation:startup-float 3.2s ease-in-out .9s infinite}
.startup-head{stroke-dasharray:1;stroke-dashoffset:1;animation:startup-draw .9s ease-out forwards}
.startup-glasses,.startup-mouth{opacity:0;animation:startup-fade .4s ease-out .55s forwards}
.startup-eyes{opacity:0;animation:startup-fade .3s ease-out .7s forwards}
.startup-eye{transform-box:fill-box;transform-origin:center;animation:startup-blink 3.6s ease-in-out 1.4s infinite}
.startup-pupil{animation:startup-glance 3.6s ease-in-out 1.4s infinite}
.startup-keys{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:28px}.startup-key-row{display:flex;gap:6px}
.startup-keys span{display:grid;place-items:center;width:min(38px,calc((100vw - 110px)/7));aspect-ratio:1;border:1px solid #c7d2fe;border-bottom-width:4px;border-radius:9px;background:#fff;color:#1e40ff;font:700 16px/1 var(--ui-font,system-ui,sans-serif);animation:startup-key 2.8s ease-in-out calc(var(--i,0)*.14s) infinite}
@keyframes startup-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes startup-draw{to{stroke-dashoffset:0}}
@keyframes startup-fade{to{opacity:1}}
@keyframes startup-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes startup-blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.1)}}
@keyframes startup-glance{0%,60%,100%{transform:translateX(0)}70%,82%{transform:translateX(2px)}88%{transform:translateX(-1px)}}
@keyframes startup-key{0%,16%,100%{transform:translateY(0);border-bottom-width:4px;background:#fff;color:#1e40ff}6%{transform:translateY(3px);border-bottom-width:1px;background:#1e40ff;color:#fff}}
@media(prefers-reduced-motion:reduce){.startup-card,.startup-tcha,.startup-head,.startup-glasses,.startup-mouth,.startup-eyes,.startup-eye,.startup-pupil,.startup-keys span{animation:none;opacity:1;stroke-dashoffset:0}}
@media(forced-colors:active){.startup-tcha{stroke:CanvasText}.startup-pupil{fill:CanvasText}.startup-keys span{border-color:CanvasText;color:CanvasText;background:Canvas}}
/* Tcha's card: the guide panel above an activity (and the tour bar variant), its words, face and round controls. In cascade order; each rule keeps its breakpoint. */

/* Tcha, the instructor: a panel above the activity, a floating pointer and keycap, and a spotlight on the next control */
.instructor{position:sticky;top:72px;z-index:15;display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 16px;box-shadow:0 6px 20px #0f172a14}.instructor[hidden]{display:none}.instructor-body>b{font-size:12px;color:var(--brand-primary,#1d4ed8);letter-spacing:.3px}#instructor-line{margin:2px 0 8px;font-size:15px;line-height:1.45;color:#0f172a;min-height:1.45em}.instructor-controls{display:flex;gap:6px;flex-wrap:wrap}.instructor-controls button{font-size:12px;padding:4px 10px;min-height:32px}
@media(prefers-reduced-motion:reduce){.instructor *{animation:none!important}}
body.reduced-motion .instructor *{animation:none!important}
@media(max-width:760px){body.amani-on .instructor{position:fixed;top:auto;left:8px;right:8px;bottom:8px;margin:0;z-index:60;padding:8px 10px;gap:10px;box-shadow:0 8px 28px #0f172a40}body.amani-on .instructor-body>b{display:none}}

/* KEYBAKI Digital Labs brand: the lockup in the sidebar; Tcha alone when the sidebar is folded. Royal blue #1e40ff. */
.instructor-face{color:#1e40ff}.instructor-face img{width:100%;height:100%}
/* Tcha's Continue button: a red play icon (text style, so the colour applies where ▶ would show as an emoji); Pause gets an amber icon. */
.instructor-controls .pause-icon{color:#d97706}
@media (min-width:761px) and (max-height:860px){/* Short laptop screens (1366×768 leaves about 650px of page): in a typing lesson, activity, basic or skill check the task comes
   first, so the header, heading, Tcha and spacing tighten and the keyboard guide and the goal steps stay in view. */
.instructor{top:64px;padding:6px 12px;gap:10px;margin-bottom:10px}.instructor-face{width:34px;height:34px}.instructor-body{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}.instructor-body>b{display:none}#instructor-line{flex:1 1 360px;margin:0}.instructor-controls button{min-height:30px;padding:3px 9px}}
.instructor-controls .line-icon{width:16px;height:16px;vertical-align:-.25em}.instructor-controls .play-icon{color:#dc2626}
/* Tcha stays small: the face and four round icon buttons. Tcha's words show only when the voice is off. On phones Tcha floats
   at the bottom right as a pill, clear of the task. */
.instructor{width:fit-content;max-width:100%;padding:5px 8px 5px 6px;gap:8px;border-radius:999px}.instructor-body{display:flex;align-items:center;gap:8px 12px;min-width:0}.instructor:has(.instructor-words) .instructor-body{flex-wrap:wrap}.instructor-body>b{display:none}.instructor .ctl-label{display:none}.instructor-controls,body.amani-on .instructor-controls{flex-wrap:nowrap;gap:4px}.instructor-controls button,body.amani-on .instructor-controls button{min-width:36px;min-height:36px;width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:50%}.instructor-controls .i-redo{margin:0}
@media (max-width:760px){body.amani-on .instructor:has(.instructor-words){left:12px;padding:8px 10px}}

/* Captions are a dependable instruction channel, including missing or rejected audio. */
.instructor,body.amani-on .instructor{position:relative;inset:auto;top:auto;width:100%;max-width:none;max-height:none;border:1px solid #c5d4ef;background:#fff;padding:12px 16px;margin:0 0 20px;border-radius:14px;box-shadow:none;z-index:10;overflow:visible}.instructor-body{flex:1;flex-wrap:nowrap;gap:16px}.instructor-words,body.amani-on #instructor-line{font-size:14px;line-height:1.55;margin:0;flex:1}.instructor-face,body.amani-on .instructor-face{width:40px;height:40px}.instructor-controls button,body.amani-on .instructor-controls button{width:40px;height:40px;min-width:40px;min-height:40px}
@media(max-width:1199px){.instructor-body{flex-wrap:wrap;gap:8px}}
@media(max-width:760px){.instructor,body.amani-on .instructor{padding:12px;left:auto;right:auto;bottom:auto;max-width:100%}.instructor-controls button,body.amani-on .instructor-controls button{width:44px;height:44px;min-width:44px;min-height:44px}.instructor:has(.instructor-words) .instructor-body{display:flex;flex-direction:column;align-items:stretch;gap:10px}.instructor-words,body.amani-on #instructor-line{flex:0 0 auto;width:100%}.instructor-controls{align-self:flex-start}.instructor,body.amani-on .instructor{margin-bottom:18px}}
@media(min-width:761px) and (max-height:860px){.instructor,body.amani-on .instructor{margin-bottom:16px;padding:10px 14px}}
.instructor .instructor-controls,body.amani-on .instructor .instructor-controls{flex-wrap:wrap;flex-shrink:1;min-width:0;max-width:100%}
@media(max-width:900px){.text-size-2 .instructor{flex-wrap:wrap}}
.instructor-words,body.amani-on #instructor-line{min-width:0;overflow-wrap:anywhere}
/* Tcha's name under the face, so "Watch Tcha" has someone to watch. */
.instructor-who{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;align-self:center}.instructor-name{font-size:12px;font-weight:700;color:#1d4ed8;line-height:1.15;text-align:center}.instructor-name small{display:block;font-size:10px;font-weight:500;color:#526072;white-space:nowrap}
@media(max-width:760px){.instructor-name small{display:none}}

/* Tcha's tour card sits just above the page, so it takes the page's column: same width and side margins as the content below. */
.shell>#instructor{--page-x:clamp(20px,3vw,48px);left:auto;width:calc(100% - 2*var(--page-x));max-width:calc(1400px - 2*var(--page-x));margin:24px auto 0}.shell>#instructor+main{padding-top:20px}
@media(max-width:900px){.shell>#instructor{--page-x:24px}}
@media(max-width:760px){.shell>#instructor{--page-x:18px;margin-top:16px}}
/* Activity layouts: the Foundations and simulation page layouts, the simulation brief and the Show me / Guide me / Let me try steps. In cascade order; each rule keeps its breakpoint. */
.foundation-layout{display:grid;grid-template-columns:1fr 1fr;gap:22px}.foundation-layout input{width:100%;margin:12px 0;font-size:20px;padding:15px}
@media(max-width:760px){.foundation-layout{grid-template-columns:1fr}.foundation-layout .panel{padding:22px}}
.simulation-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:20px;align-items:start}.simulation-brief p{font-size:12px;line-height:1.8}.simulation-brief select{width:100%;margin-top:8px}.independent-foundation{grid-template-columns:1fr}.independent-foundation>section:first-child{display:none}.mode-stepper{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 18px;padding:0}.mode-step{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid #e2e8f0;background:#fff;border-radius:12px;padding:12px 14px;cursor:pointer;color:inherit}.mode-step:hover{border-color:#93c5fd}.mode-step b{display:block;font-size:14px}.mode-step small{display:block;font-size:12px;color:var(--muted)}.mode-step-icon{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:#eff6ff;color:var(--brand-primary,#1d4ed8);font-weight:800}.mode-step.done .mode-step-icon{background:#dcfce7;color:#166534}
@media(max-width:900px){.mode-stepper{grid-template-columns:1fr}}

/* Simulations: stepper, live steps, richer desktop, files and writer. */
.simulation-layout{grid-template-columns:300px minmax(0,1fr)}.mode-stepper.compact{grid-template-columns:1fr;gap:6px;margin:14px 0}.mode-stepper.compact .mode-step{padding:8px 10px;gap:10px}.mode-stepper.compact .mode-step-icon{width:28px;height:28px}.mode-stepper.compact .mode-step b{font-size:13px}.simulation-brief p{font-size:13px}
@media(max-width:900px){.simulation-layout{grid-template-columns:1fr}}
@media(max-width:760px){/* Phones: a one-line header showing where you are; the menu handles the rest of the way. */
.mode-stepper,.mode-stepper.compact{grid-template-columns:repeat(3,1fr);gap:6px}.mode-step{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:8px 4px;min-height:44px}}
.foundation-layout{align-items:start}
/* Flow refinements: Tcha as a compact bar on phones, one demonstration at a time, stage-complete screens */
.foundation-layout.amani-showing .mini-demo{display:none}
@media (min-width:761px) and (max-height:860px){main:has(.typing-session,.simulation-layout,.foundation-layout,.competency-workspace){padding-top:16px}main:has(.typing-session,.simulation-layout,.foundation-layout,.competency-workspace) .page-head{margin-bottom:10px;align-items:center}main:has(.typing-session,.simulation-layout,.foundation-layout,.competency-workspace) .page-head h1{font-size:24px;margin:0}main:has(.typing-session,.simulation-layout,.foundation-layout,.competency-workspace) .page-head p{margin:2px 0 0;font-size:13px}.simulation-brief{padding:14px 16px}.simulation-brief>label select{margin-top:4px;min-height:36px;padding-top:4px;padding-bottom:4px}.simulation-brief .mode-stepper.compact{grid-template-columns:repeat(3,1fr);gap:6px;margin:8px 0}.simulation-brief .mode-stepper.compact .mode-step{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:6px 4px}.simulation-brief .mode-stepper.compact .mode-step-icon{width:24px;height:24px}.simulation-brief>h3{margin:8px 0 4px}.simulation-brief>p{margin:0 0 6px;line-height:1.5}.simulation-brief .sim-steps{margin:6px 0 10px}.simulation-brief .sim-steps li{padding:4px 8px;line-height:1.45}}
@media (max-width:760px){/* Phones: the goal and steps come first, then the task, then Check my result and Start again below the task they check.
   Tcha's panel never covers more than about a third of the screen. */
.simulation-layout{display:flex;flex-direction:column}.simulation-brief{display:contents}.simulation-brief>.primary,.simulation-brief>.reset-simulation{order:2}.simulation-brief>.primary,.simulation-brief>.reset-simulation{width:100%}}

/* Check my result and Start again stand apart. */
.simulation-brief>.reset-simulation{margin-left:8px}.simulation-brief>h2.sim-goal-title{margin:8px 0 4px}
/* Foundation practice receives most of the available space. Explanations remain readable. */
main:has(.foundation-layout) .page-head{margin-bottom:22px}main:has(.foundation-layout) .page-head h1{font-size:30px}.mode-stepper{gap:10px;margin:0 0 20px}.mode-step{border:1px solid #cbd5e1;border-radius:13px;padding:14px 16px;min-height:72px;background:#fff}.mode-step small{font-size:12px;color:#526072}.mode-step.current{background:#eaf0ff;border:2px solid #1d4ed8;box-shadow:none}.mode-step.current b{color:#173ea8}.foundation-layout{grid-template-columns:minmax(220px,.8fr) minmax(0,1.6fr);gap:22px}.foundation-layout>section{min-width:0}.foundation-layout p{font-size:14px;line-height:1.7}.independent-foundation{grid-template-columns:minmax(0,1fr)}
@media(max-width:1199px){.foundation-layout{grid-template-columns:minmax(190px,.7fr) minmax(0,1.4fr)}}
@media(max-width:900px){.foundation-layout{grid-template-columns:1fr}}
@media(max-width:760px){main:has(.foundation-layout) .page-head h1{font-size:27px}.mode-stepper{gap:6px}.mode-step{padding:10px 8px;min-height:72px;gap:6px;flex-direction:column;align-items:flex-start}.mode-step b{font-size:12px}.mode-step small{display:none}.mode-step-icon{width:24px;height:24px}.simulation-layout{min-width:0}}
.high-contrast :is(.profile-status,.profile-device,.mode-step small,.nav-group-label){color:#25364d}
@media(min-width:761px) and (max-height:860px){main:has(.foundation-layout){padding-top:22px}.mode-step{min-height:62px;padding:10px 12px}}
.simulation-layout>*{min-width:0;max-width:100%;box-sizing:border-box}body.amani-on .simulation-brief .read-aloud-button{display:none}
/* Header and menu: the app header, the top bar on desktop, the side menu and the phone/tablet drawer, the account menu
 and Sign out. One place, in cascade order (the old style.css rules first, then experience.css); each keeps its breakpoint. */
aside{position:fixed;width:244px;inset:0 auto 0 0;background:#fff;border-right:1px solid var(--line);padding:34px 23px;display:flex;flex-direction:column}.brand{font:800 22px Manrope,sans-serif;letter-spacing:-1px;color:var(--brand-ink);text-decoration:none;display:flex;align-items:center;gap:7px}.brand .app{font-size:12px;letter-spacing:0;margin-left:-7px}.module{font-size:11px;letter-spacing:2.4px;color:#64748b;margin:23px 0 33px 10px}.side-tip{margin-top:auto;padding:22px 18px;background:#f6f7ee;border-radius:13px}.side-tip>span{font-size:27px;color:#718348;display:block;margin-bottom:14px}.side-tip strong{font-size:15px;line-height:1.6}.side-tip p{font-size:12px;color:var(--muted);line-height:1.7}.side-bottom{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:23px;margin-top:25px;font-size:11px}.side-bottom small{display:block;color:var(--muted);font-size:11px;margin-top:5px}header{height:84px;background:#fff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 43px;font-size:12px;color:var(--muted)}header b{color:#384c43;font-weight:500}header span{margin:0 12px}.header-right{display:flex;align-items:center;gap:10px}
@media(max-width:760px){.brand{font-size:19px}}

/* Digital Labs navigation */
.lab-sidebar nav{flex:1}.lab-sidebar .side-tip{display:none}.lab-sidebar nav button{width:100%;text-align:left;display:flex;align-items:center;gap:10px;line-height:1.35;min-height:42px}.lab-sidebar nav button span:last-child{flex:1}.lab-sidebar nav .active-area{background:#eff6ff;color:#1e40af;font-weight:700}.lab-breadcrumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;line-height:1.5}.lab-breadcrumbs button{border:0;background:transparent;color:var(--brand-primary);padding:3px 0;font:inherit;cursor:pointer}.shell>header>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}.lab-menu-toggle,.lab-sidebar nav .lab-mobile-close,.lab-nav-backdrop{display:none}.lab-sidebar button:focus-visible,.lab-breadcrumbs button:focus-visible{outline:2px solid var(--brand-primary);outline-offset:2px}
@media(max-width:760px){aside.lab-sidebar{position:fixed;inset:0 auto 0 0;width:min(310px,86vw);height:100dvh;z-index:101;background:#fff;transform:translateX(-105%);transition:transform .18s ease;padding:22px;box-sizing:border-box}.lab-menu-open{overflow:hidden}.lab-menu-toggle{border:1px solid #cbd5e1;border-radius:8px;padding:8px 12px;background:#fff;font-size:20px}.lab-nav-backdrop{position:fixed;inset:0;border:0;background:#0f172a90;z-index:100}.lab-menu-open .lab-nav-backdrop{display:block}.lab-sidebar nav .lab-mobile-close{margin-bottom:10px}}
@media(min-width:761px){/* Desktop: the menu button collapses the sidebar to an icon rail, which expands over the page on hover or keyboard focus. */
.lab-menu-toggle{display:block;border:1px solid #cbd5e1;border-radius:8px;padding:6px 11px;background:#fff;font-size:18px;flex:0 0 auto}.lab-sidebar-collapsed aside.lab-sidebar{width:72px;padding-left:12px;padding-right:12px;overflow-x:hidden;z-index:30}.lab-sidebar-collapsed aside.lab-sidebar:is(:hover,:focus-within){width:260px;box-shadow:0 12px 32px #0f172a2e;transition-delay:.12s}.lab-sidebar-collapsed aside.lab-sidebar :is(.brand,nav button span:last-child,.nav-group-label,.module,.side-bottom>div){white-space:nowrap}.lab-sidebar-collapsed aside.lab-sidebar:not(:hover,:focus-within) :is(nav button span:last-child,.nav-group-label,.module,.side-bottom>div,.brand .app){opacity:0}.lab-sidebar-collapsed aside.lab-sidebar:not(:hover,:focus-within) .brand{color:transparent}.lab-sidebar-collapsed aside.lab-sidebar:not(:hover,:focus-within) .lab-subnav{display:none}.lab-sidebar-collapsed aside.lab-sidebar:not(:hover,:focus-within){scrollbar-width:none}/* The menu button takes header space: the save status shortens (full text in its title) before the breadcrumbs wrap. */
.shell>header .header-right{flex:0 1 auto;min-width:0}.shell>header .save-status{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){aside.lab-sidebar,.shell{transition:none}}
.save-status,header b{color:#475569}
/* Fixed-size vectors keep sidebar symbols readable on every device. */
.lab-sidebar nav .lab-nav-icon{display:block;width:24px;height:24px;flex:0 0 24px;color:currentColor}.lab-sidebar nav button span:last-child{min-width:0}.lab-sidebar .lab-subnav .lab-nav-icon{width:20px;height:20px;flex-basis:20px}
/* Header: the avatar and settings never shrink; the save status gives way first. */
.shell>header .header-right>:not(.save-status){flex-shrink:0}
@media(min-width:761px) and (max-width:1199px){/* Tablets and small laptops show the save status as its dot; the full text is in the title and read by screen readers. */
.shell>header .save-status{width:1.1em;text-overflow:clip}}
@media(max-width:760px){/* Phones: a one-line header showing where you are; the menu handles the rest of the way. */
.shell>header .lab-breadcrumbs{flex-wrap:nowrap;min-width:0}.shell>header .lab-breadcrumbs>:not(:last-child){display:none}.shell>header .lab-breadcrumbs>:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink)}}
@media(max-width:900px),(pointer:coarse){/* Touch screens reserve room for the settings and avatar buttons beside the breadcrumbs. */
.shell>header>div:first-child{max-width:calc(100% - 190px)}}
@media(min-width:761px) and (max-height:940px){/* Short laptop screens: a tighter sidebar so the whole menu fits without its own scrollbar. */
aside.lab-sidebar{padding-top:20px;padding-bottom:16px}.lab-sidebar .module{margin:12px 0 14px 10px}.lab-sidebar nav button{min-height:40px;padding-top:6px;padding-bottom:6px}.lab-sidebar .nav-group-label{margin-top:10px;padding-top:6px}.lab-sidebar .side-bottom{padding-top:12px;margin-top:12px}}
@media(min-width:761px){/* Wide enough for the longest menu label ("Digital Safety & Responsible AI") on one line */
.lab-sidebar-collapsed aside.lab-sidebar:is(:hover,:focus-within){width:300px}}

/* Read aloud switch in the header: speaker icon, filled blue when on, waves hidden when off */
.read-aloud-toggle{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:#475569;cursor:pointer}.read-aloud-toggle.on{background:var(--brand-primary,#1d4ed8);border-color:var(--brand-primary,#1d4ed8);color:#fff}.read-aloud-toggle:not(.on) .read-aloud-waves{opacity:.35}.read-aloud-toggle:focus-visible{outline:2px solid var(--brand-primary,#1d4ed8);outline-offset:2px}
/* A brand-new learner sees one clear way to start, without a row of zeros */
.profile-dashboard.brand-new .profile-summary-strip{display:none}
/* KEYBAKI Digital Labs brand: the lockup in the sidebar; Tcha alone when the sidebar is folded. Royal blue #1e40ff. */
.lab-sidebar .module{display:none}.lab-sidebar-collapsed aside.lab-sidebar:not(:hover,:focus-within) .brand-lockup{display:none}.lab-sidebar-collapsed aside.lab-sidebar:not(:hover,:focus-within) .brand-mark{display:block}
@media (min-width:761px) and (max-height:860px){/* Short laptop screens (1366×768 leaves about 650px of page): in a typing lesson, activity, basic or skill check the task comes
   first, so the header, heading, Tcha and spacing tighten and the keyboard guide and the goal steps stay in view. */
.shell>header{min-height:60px;padding-top:6px;padding-bottom:6px}}
#settings svg{width:20px;height:20px}
/* Who is learning: the pupil's name in the header, with a menu (Switch learner, name, Settings, backup). The sidebar no longer
   has a learner footer. */
.pupil-menu{position:relative}.pupil-toggle{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 10px 3px 3px;min-height:40px;font-weight:600;color:var(--brand-ink,#0f172a);cursor:pointer}.pupil-toggle:hover{background:#f8fafc}.shell>header .pupil-toggle .avatar{display:inline-grid;width:32px;height:32px;background:#eff6ff;color:var(--brand-primary,#1d4ed8)}.pupil-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.pupil-caret{font-size:11px;color:var(--muted)}.pupil-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px #0f172a26;padding:6px;display:grid;gap:2px}.pupil-menu-list[hidden]{display:none}.pupil-menu-list button{text-align:left;background:none;border:0;border-radius:8px;padding:10px 12px;min-height:44px;font-size:14px;color:var(--brand-ink,#0f172a);cursor:pointer}.pupil-menu-list button:hover,.pupil-menu-list button:focus-visible{background:#eff6ff}#lab-menu-toggle .line-icon{width:20px;height:20px}
/* The header's right side (save status, settings, the pupil menu) always fits: the breadcrumb takes the room that is left. */
.shell>header .header-right{flex:0 0 auto}
/* One explicit shell width: no implicit hover expansion or overlapping rail. */
aside.lab-sidebar{width:var(--sidebar-width);padding:22px 16px 16px;background:#fff;border-right:1px solid var(--line);z-index:35;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.shell{margin-left:var(--sidebar-width);min-width:0}.lab-sidebar .brand{width:100%;min-height:72px;padding:0 12px 18px;margin-bottom:12px;border-bottom:1px solid var(--line)}.brand-lockup{width:204px;max-width:100%;height:auto}.brand-mark{display:none}.lab-sidebar nav{display:flex;flex-direction:column;gap:4px}.lab-sidebar .nav-group-label{font-size:10px;line-height:1.4;font-weight:750;letter-spacing:1.5px;color:#64748b;margin:18px 0 5px;padding:0 12px}.lab-sidebar nav button{padding:11px 12px;min-height:46px;gap:12px;border-radius:10px;color:#465772}.lab-sidebar nav button span{font-size:13px;font-weight:550;line-height:1.4}.lab-sidebar nav button:hover{background:#f0f4fb;color:#1d4ed8}.lab-sidebar nav [aria-current=page],.lab-sidebar nav .active-area{background:#eaf0ff;color:#173ea8;box-shadow:inset 3px 0 #1d4ed8}.lab-sidebar nav .lab-nav-icon{width:21px;height:21px;flex-basis:21px}.lab-sidebar .side-bottom{display:none}.shell>header{position:sticky;top:0;z-index:30;background:#fffffffa;min-height:80px;height:auto;gap:20px;padding:16px 28px;border-bottom:1px solid var(--line)}.shell>header>div:first-child{flex:1;max-width:none;min-width:0}.lab-breadcrumbs>span{margin:0}.lab-breadcrumbs [aria-current]{font-weight:650;color:#334155}.header-right .save-status{font-size:11px;max-width:150px;line-height:1.4}.lab-menu-toggle,#settings,#read-aloud-toggle{height:42px;min-width:42px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;color:#475569;display:inline-grid;place-items:center}.pupil-toggle{min-height:44px;border-radius:12px;border-color:var(--line);padding:5px 10px;gap:8px}.pupil-menu-list{border-radius:14px;padding:6px;box-shadow:0 16px 40px #0a143026}
@media(min-width:761px){.lab-sidebar-collapsed aside.lab-sidebar,.lab-sidebar-collapsed aside.lab-sidebar:is(:hover,:focus-within){width:80px;padding:20px 10px;box-shadow:none}.lab-sidebar-collapsed .shell{margin-left:80px}.lab-sidebar-collapsed aside.lab-sidebar .brand{padding:0 8px 18px;min-height:72px}.lab-sidebar-collapsed aside.lab-sidebar .brand-lockup{display:none}.lab-sidebar-collapsed aside.lab-sidebar .brand-mark{display:block;width:36px;height:36px}.lab-sidebar-collapsed aside.lab-sidebar :is(nav button span:last-child,.nav-group-label,.module,.lab-subnav){display:none}.lab-sidebar-collapsed aside.lab-sidebar nav{gap:10px}.lab-sidebar-collapsed aside.lab-sidebar nav button{justify-content:center;padding:12px}}
@media(max-width:1199px){.brand-lockup{width:190px}.lab-breadcrumbs .platform-link,.lab-breadcrumbs .platform-link+span{display:none}}
@media(max-width:900px){.lab-breadcrumbs{font-size:11px}}
@media(max-width:760px){aside.lab-sidebar{width:min(310px,86vw);padding:18px;z-index:101;transform:translateX(-105%)}.lab-menu-open aside.lab-sidebar{transform:translateX(0)}.lab-sidebar nav .lab-mobile-close{display:flex;background:#edf2ff;min-height:44px}.lab-sidebar .brand{margin-bottom:8px}.lab-sidebar .nav-group-label{margin-top:12px}.lab-sidebar nav button{min-height:44px}.lab-sidebar .brand-lockup{display:block;width:200px}}
.lab-sidebar nav .nav-search{background:#f5f7fc;border:1px solid #dce2ed;margin:0 0 6px;color:#334155}
@media(max-width:760px){.header-right{gap:6px}}
.account-header{font-weight:650!important;padding-inline:12px!important}
@media(max-width:760px){.account-header{font-size:12px!important;padding-inline:8px!important}}

/* Grouped desktop header; existing sidebar/drawer remains below 1024px or on coarse input. */
.lab-header-nav,#lab-header-context{display:none}body.lab-header-mode:not(.lab-public-page){--sidebar-width:0px}.lab-header-mode:not(.lab-public-page)>aside{display:none}.lab-header-mode:not(.lab-public-page) .shell{margin-left:0}.lab-header-mode .shell>header{min-height:72px;padding:8px 24px;gap:16px;z-index:45}.lab-header-mode .shell>header>div:first-child>.lab-menu-toggle,.lab-header-mode .shell>header>div:first-child>.lab-breadcrumbs,.lab-header-mode .header-right>.account-header{display:none}.lab-header-mode .lab-header-nav{display:flex;align-items:center;gap:6px;min-width:0}.lab-header-mode .lab-header-brand{display:flex;align-items:center;flex:none;margin-right:14px}.lab-header-brand img{width:150px;height:auto;display:block}.lab-header-nav>a,.lab-header-group>button{display:inline-flex;align-items:center;box-sizing:border-box;text-decoration:none;font:600 13px/1.3 var(--ui-font);white-space:nowrap;padding:12px 10px;min-height:44px;border:0;border-radius:9px;background:transparent;color:#334155;cursor:pointer}.lab-header-nav>a:hover,.lab-header-group>button:hover,.lab-header-more[aria-expanded="true"]{background:#eef3ff;color:#173ea8}.lab-header-group>button{display:flex;gap:8px}.lab-header-group>button:after{content:'⌄';font-size:15px}.lab-header-group{position:relative}.lab-header-nav [aria-current]{background:#eaf0ff;color:#173ea8;box-shadow:inset 0 -3px #1d4ed8}.lab-header-popover{position:absolute;top:calc(100% + 8px);left:0;width:330px;max-width:calc(100vw - 48px);max-height:calc(100dvh - 110px);overflow:auto;padding:8px;background:white;border:1px solid #cbd5e1;border-radius:14px;box-shadow:0 12px 40px #0f172a24;z-index:60}.lab-header-popover a,.lab-header-popover .lab-header-share{display:flex;text-decoration:none;box-sizing:border-box;align-items:center;gap:12px;text-align:left;width:100%;min-height:48px;padding:12px;border:0;border-radius:8px;background:white;color:#334155;font:550 14px/1.4 var(--ui-font);white-space:normal}.lab-header-popover a:hover,.lab-header-popover .lab-header-share:hover{background:#f0f4fb}.lab-header-support{width:240px;left:auto;right:0}.lab-header-mode .header-right{gap:8px}.lab-header-mode .pupil-toggle{max-width:200px}.lab-header-mode .pupil-name{max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lab-header-mode #lab-header-context{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;min-height:52px;padding:6px 24px;background:#fff;border-bottom:1px solid var(--line)}.lab-header-location{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;flex-wrap:wrap;font-size:12px;color:#475569}.lab-header-location button{padding:5px 0;font-size:12px;min-height:32px;background:transparent;color:inherit}.lab-header-location [aria-current]{font-weight:650}.lab-header-location>.platform-link{display:none}.lab-header-location>.platform-link+span{display:none}.lab-header-tabs{display:flex;gap:4px;flex-wrap:wrap}.lab-header-tabs a{text-decoration:none;display:inline-flex;align-items:center;box-sizing:border-box;padding:8px 10px;min-height:40px;font-size:13px;background:transparent;border-radius:8px;color:#475569}.lab-header-tabs [aria-current]{background:#edf2ff;color:#173ea8;box-shadow:inset 0 -2px #1d4ed8}.lab-header-save{font-size:11px;color:#526078;max-width:180px}.lab-header-save:empty{display:none}.lab-public-page #lab-header-context{display:none!important}.lab-header-nav :focus-visible,#lab-header-context :focus-visible{outline:3px solid #1d4ed8;outline-offset:3px}.high-contrast .lab-header-popover,.high-contrast #lab-header-context{border-color:#334155}.high-contrast .lab-header-nav a,.high-contrast .lab-header-nav button{color:#0f172a}
@media(min-width:1024px) and (max-width:1199px){.lab-header-mode .shell>header{padding:8px 16px;gap:8px}.lab-header-brand img{width:124px}.lab-header-mode .lab-header-brand{margin-right:4px}.lab-header-nav>a,.lab-header-group>button{padding-inline:8px}.lab-header-mode .pupil-name{max-width:100px}.lab-header-save{flex-basis:100%;max-width:none}}
@media(max-height:650px){.lab-header-mode .shell>header{min-height:64px}.lab-header-mode #lab-header-context{position:static}.lab-header-popover{max-height:calc(100dvh - 88px)}}
@media(min-width:1024px){.text-size-2.lab-header-mode .lab-header-nav{flex-wrap:wrap}.text-size-2.lab-header-mode .shell>header{align-items:center}.text-size-2.lab-header-mode .lab-header-nav>a,.text-size-2.lab-header-mode .lab-header-group>button{font-size:15px}.text-size-2.lab-header-mode .lab-header-brand{flex-basis:100%}.text-size-2.lab-header-mode .lab-header-brand img{width:124px}}
@media(max-height:650px){/* Do not let an expanded accessibility header consume a short viewport. */
.text-size-2.lab-header-mode .shell>header{position:static}}
@media(max-height:500px){.lab-header-mode .shell>header{position:static}}
.lab-header-popover{max-height:min(420px,60dvh)}.lab-header-mode .pupil-toggle span,.lab-header-nav span{margin:0}.lab-header-mode .pupil-toggle .avatar{flex:0 0 32px}
/* Match the main content's 1400px container and inner gutter on wide screens. */
.lab-header-mode .shell>header,.lab-header-mode #lab-header-context{padding-inline:max(clamp(20px,3vw,48px),calc((100% - 1400px)/2 + clamp(20px,3vw,48px)))}.lab-header-nav .lab-header-discover{display:flex;align-items:center;gap:8px}.lab-header-nav>.lab-header-search{justify-content:center;width:44px;padding:0;margin-left:-6px}
/* App footer links (Help, Terms, Privacy, Working offline). */
.shell>footer{align-items:center}
@media(max-width:760px){.shell>footer{align-items:flex-start;flex-direction:column;gap:6px}}

/* Compact workspace header: identity first, preferences in its menu. */
.lab-compact-brand{display:none}.pupil-menu-identity{padding:12px;border-bottom:1px solid var(--line);margin-bottom:6px}.pupil-menu-identity strong,.pupil-menu-identity small{display:block;overflow-wrap:anywhere}.pupil-menu-identity small{margin-top:5px;color:#526072;font-size:12px}.pupil-menu-list{max-height:calc(100dvh - 80px);overflow:auto;max-width:calc(100vw - 24px)}body:not(.lab-header-mode) .shell>header{height:64px;min-height:64px;padding:10px 12px;gap:10px}body:not(.lab-header-mode) .shell>header>div:first-child{display:flex;align-items:center;flex:0 1 auto;gap:8px}body:not(.lab-header-mode) .lab-compact-brand{display:flex;align-items:center;min-height:44px;flex:none}.lab-compact-brand img{display:block;width:104px;height:auto}body:not(.lab-header-mode) .shell>header .lab-breadcrumbs,body:not(.lab-header-mode) .header-right>.account-header,body:not(.lab-header-mode) .header-right>#settings,body:not(.lab-header-mode) .header-right>#read-aloud-toggle{display:none}body:not(.lab-header-mode) .header-right>.save-status{display:block;flex:0 1 auto;width:auto;margin:0;min-width:0;max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}body:not(.lab-header-mode) .header-right{min-width:0;flex:1;justify-content:flex-end;margin:0}body:not(.lab-header-mode) .pupil-menu{min-width:0;max-width:100%}body:not(.lab-header-mode) .pupil-toggle{min-height:44px;max-width:100%;padding:5px 8px;gap:6px}body:not(.lab-header-mode) .pupil-toggle span{margin:0}body:not(.lab-header-mode) .pupil-toggle .avatar{flex:0 0 26px;width:26px;height:26px}body:not(.lab-header-mode) .header-right .pupil-name{position:static;width:auto;height:auto;clip:auto;min-width:0;max-width:none;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body:not(.lab-header-mode) .pupil-caret{display:none}
@media(max-width:360px){.lab-compact-brand img{width:82px}}
@media(max-height:500px){body:not(.lab-header-mode) .shell>header{position:static}}
@media(max-width:760px){body:not(.lab-header-mode) .pupil-toggle{height:44px;flex-wrap:nowrap}}

/* Settings lives in the account menu; the old header gear stays in the page (scripts attach to it) but is not shown. */
#settings[hidden]{display:none!important}
/* Save status beside the learner menu when the bar under the header would hold nothing else. */
.lab-header-mode #lab-header-context.save-only{display:none}.lab-header-mode .header-right>.save-status{display:block;font-size:11px;color:#526078;white-space:nowrap}
/* Sign out beside the account menu: always one click away on a shared computer; just the icon on phones. */
.header-sign-out{display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:8px 12px;border:1px solid #fecaca;border-radius:10px;background:#fff;color:#b91c1c;font:600 13px/1.2 var(--ui-font);white-space:nowrap;cursor:pointer}.header-sign-out[hidden]{display:none}.header-sign-out:hover{background:#fef2f2;border-color:#f87171}.header-sign-out .line-icon{width:18px;height:18px;flex:none}
@media(max-width:760px){.header-sign-out{padding:8px;min-width:42px;justify-content:center}.header-sign-out span{display:none}}
body:not(.lab-header-mode) .header-right>.pupil-menu{flex-shrink:1}
@media(max-width:760px){/* Phones: the account chip is just the avatar initial; the full name is in the menu and the button's label. */
body:not(.lab-header-mode) .header-right .pupil-name{display:none}body:not(.lab-header-mode) .pupil-toggle{padding:5px}}

/* "Saved" and "Saving…" stay out of the header; problems still show. */
.save-status[data-quiet]{display:none!important}
@media(min-width:761px) and (max-width:1023px){/* Tablets (761–1023px) get the phone's slide-in menu, so pages keep their full width instead of losing a 236px column. */
body:not(.lab-header-mode) .shell,body.lab-sidebar-collapsed:not(.lab-header-mode) .shell{margin-left:0}body:not(.lab-header-mode) aside.lab-sidebar{position:fixed;inset:0 auto 0 0;width:min(310px,86vw);height:100dvh;padding:18px;box-sizing:border-box;z-index:101;background:#fff;transform:translateX(-105%);transition:transform .18s ease;overflow-y:auto}body.lab-menu-open:not(.lab-header-mode) aside.lab-sidebar{transform:translateX(0);box-shadow:0 12px 40px #0f172a40}body.lab-menu-open:not(.lab-header-mode){overflow:hidden}body.lab-menu-open:not(.lab-header-mode) .lab-nav-backdrop{display:block;position:fixed;inset:0;border:0;background:#0f172a90;z-index:100}body:not(.lab-header-mode) .lab-sidebar nav .lab-mobile-close{display:flex;background:#edf2ff;min-height:44px;margin-bottom:10px}body:not(.lab-header-mode) .lab-sidebar nav button{min-height:44px}body:not(.lab-header-mode) .lab-sidebar .brand-lockup{display:block;width:200px}}
@media(prefers-reduced-motion:reduce){aside.lab-sidebar{transition:none!important}}