:root{--motion-ease:cubic-bezier(.2,.8,.2,1);--motion-quick:150ms;--motion-panel:240ms}
.surface{animation:none!important}.page-content{position:relative;min-width:0}.page-ghost{position:absolute;inset:0 auto auto 0;pointer-events:none;max-height:100dvh;overflow:hidden;z-index:1}.app-header{position:relative;z-index:2}
.boot{min-height:100svh;display:grid;place-content:center;padding:24px;font-family:'Roboto Condensed','Arial Narrow',Impact,sans-serif;font-size:clamp(1.5rem,9vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1.15;text-align:center;max-width:100%;overflow:hidden}.boot-wordmark{display:block;white-space:nowrap;max-width:100%;font-size:inherit}.boot-dot{display:inline-block;animation:bootDot 1.1s var(--motion-ease) infinite alternate}@keyframes bootDot{from{opacity:.45}to{opacity:1}}
.nav{width:min(380px,calc(100vw - 24px));display:grid;grid-template-columns:2fr repeat(4,1fr);gap:4px;padding:8px;isolation:isolate;border-radius:32px}.nav-indicator{position:absolute;left:0;top:8px;width:100px;pointer-events:none;z-index:-1;opacity:0}.nav-indicator:before{content:'';display:block;width:100%;height:100%;border-radius:24px;background:var(--lav);transform-origin:left;transform:scaleX(var(--indicator-scale,1))}.nav[data-ready=true] .nav-indicator{transition:transform 320ms var(--motion-ease),opacity 180ms var(--motion-ease)}.nav[data-ready=true] .nav-indicator:before{transition:transform 320ms var(--motion-ease)}.nav button,.nav button.active{min-width:0;height:48px;padding:0 4px;gap:7px;border-radius:24px;flex-direction:row;background:transparent;color:#a5a5af;transition:color 180ms var(--motion-ease),scale var(--motion-quick) var(--motion-ease);transform:none;overflow:visible}.nav button:hover{transform:none;color:#fff}.nav button.active,.nav button.active:hover{color:#141119;background:transparent}.nav button span{display:none;line-height:1.2;font-weight:700;white-space:nowrap}.nav button.active span{display:inline;font-size:12px;animation:navLabel 200ms var(--motion-ease) both}.nav button svg{width:21px;height:21px;flex-shrink:0}.nav button:active{scale:.96}.nav button:focus-visible{outline-offset:2px}
.button,.icon-btn,.round-arrow,.text-btn,.quiz-dots button,.order-buttons button{transition:scale var(--motion-quick) var(--motion-ease),background-color var(--motion-quick) var(--motion-ease),color var(--motion-quick) var(--motion-ease)}.button:hover,.icon-btn:hover,.round-arrow:hover{transform:none}.button:active:not(:disabled),.icon-btn:active:not(:disabled),.round-arrow:active:not(:disabled),.quiz-dots button:active,.order-buttons button:active:not(:disabled){scale:.96}
.card,.course-tile,.onboarding-step,.classification-card{transition:background-color 180ms var(--motion-ease),border-color 180ms var(--motion-ease),box-shadow 180ms var(--motion-ease)}.card.selectable:hover{transform:none}.learning-nav>button,.filter{transition:background-color 180ms var(--motion-ease),color 180ms var(--motion-ease),scale var(--motion-quick) var(--motion-ease)}.learning-nav>button:active,.filter:active{scale:.96}.avatar-choice img{transition:border-color 180ms var(--motion-ease),box-shadow 180ms var(--motion-ease),scale var(--motion-quick) var(--motion-ease)}.avatar-choice label:active img{scale:.96}.field input,.field textarea,.field select,.homework-field textarea,.classification-card select{transition:border-color 180ms var(--motion-ease),box-shadow 180ms var(--motion-ease),background-color 180ms var(--motion-ease)}
.modal-backdrop{animation:overlayEnter 160ms var(--motion-ease) both}.modal,.workspace-dialog[open]{animation:dialogEnter 240ms var(--motion-ease) both}.workspace-dialog::backdrop{animation:overlayEnter 160ms var(--motion-ease) both}.toast{animation:toastEnter 200ms var(--motion-ease) both}.toast.is-leaving{opacity:0;transform:translateY(-6px);transition:opacity 140ms var(--motion-ease),transform 140ms var(--motion-ease)}
@keyframes overlayEnter{from{opacity:0}to{opacity:1}}@keyframes dialogEnter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastEnter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.slide-image-area img{transition:opacity 160ms var(--motion-ease)}.slide-image-area.is-changing img{opacity:.35}.slide-image-area.is-changing:after{content:'';position:absolute;inset:0;border:1px solid #ded5e8;border-radius:inherit;pointer-events:none}.slide-explanation{transition:background-color 180ms var(--motion-ease)}
.progress-track span,.course-progress-track>div{transform-origin:left;transition:none}.big-stat,.pill,.metric strong,.order-position{font-variant-numeric:tabular-nums}
@media(hover:hover){.course-tile:hover,.onboarding-step:hover{background-color:#efebf7}.classification-card:hover{border-color:#a899bf}.text-btn:hover{color:#6b52c7}.button:hover{box-shadow:0 2px 8px #30204518}}
@media(max-width:700px){.nav{width:min(350px,calc(100vw - 24px));padding:6px;gap:0;border-radius:27px}.nav-indicator{top:6px}.nav-indicator:before{border-radius:21px}.nav button.active span{font-size:11px}.boot{font-size:clamp(1.5rem,9vw,3rem)}.access{margin:24px 8px;padding:26px;max-width:calc(100vw - 16px)}.access h1{font-size:clamp(2.7rem,11vw,4rem)}}
.boot{min-height:100vh;min-height:100svh}
@keyframes navLabel{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.boot-dot,.modal,.modal-backdrop,.workspace-dialog[open],.workspace-dialog::backdrop,.toast,.nav button.active span{animation:none!important}.nav[data-ready=true] .nav-indicator,.nav[data-ready=true] .nav-indicator:before,.button,.icon-btn,.round-arrow,.text-btn,.quiz-dots button,.order-buttons button,.learning-nav>button,.filter,.avatar-choice img,.slide-image-area img{transition-duration:0s!important}.button:active,.icon-btn:active,.round-arrow:active,.nav button:active,.learning-nav>button:active,.filter:active,.avatar-choice label:active img{scale:1}}