/* Depth stays decorative: navigation, reading and video controls remain steady. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.motion-control{border:1px solid #cdd3ee;border-radius:20px;background:#fff;color:#515b86;font:600 11px Manrope,sans-serif;min-height:44px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.motion-control:hover{border-color:#263acb;color:#263acb;background:#eff1ff}.site-header{gap:20px}.site-header nav{margin-left:auto}
.spark-hero{background:radial-gradient(ellipse at 85% 34%,#e9ecff8c,transparent 49%)}
.discovery-scene{perspective:1100px;isolation:isolate}
.discovery-scene:before{content:'';position:absolute;width:71%;height:14%;left:18%;bottom:10px;border-radius:50%;background:radial-gradient(ellipse,#2536aa25,transparent 67%);transform:rotate(-6deg);filter:blur(8px);z-index:-1}
.discovery-card{transform:rotateX(3deg) rotateY(-9deg) rotateZ(-2deg);box-shadow:1px 1px 0 #e1e5fa,3px 3px 0 #d3d9f6,6px 6px 0 #c8d0f0,13px 19px 35px #243a7921;will-change:auto;transition:transform .25s ease,box-shadow .25s}
.discovery-card:focus-within{transform:none}.discovery-card[data-depth-active]{transform:rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));box-shadow:2px 4px 0 #cbd4f6,12px 23px 40px #253b8626}
.studio-illustration{background:radial-gradient(circle at 60% 28%,#fff9,transparent 38%),linear-gradient(135deg,#e6eaff,#d3ddff);height:170px}
.idea-mascot{background:radial-gradient(circle at 25% 20%,#fff2b4,#ffdd7c 50%,#e5ab45);box-shadow:inset -8px -8px 14px #bd822a40,inset 5px 5px 9px #fff8c4b0,7px 9px 0 #283689,14px 20px 20px #314b9138;border-color:#293b91;transform:rotate(-7deg) rotateY(-13deg);animation:mascot-arrive .85s cubic-bezier(.2,.8,.2,1) both}
.shape-ring{border:0;background:conic-gradient(from 30deg,#eee6ff,#a393e4,#e8e0ff,#9b8acc,#eee6ff);box-shadow:inset 3px 4px 6px #fff8,6px 10px 13px #4d448a2d;transform:rotateX(23deg) rotateY(-18deg)}
.shape-ring:after{content:'';position:absolute;inset:21px;border-radius:50%;background:#e3e8ff;box-shadow:inset 4px 5px 7px #4b41824a,-2px -2px 4px #fff8}
.shape-grid{border-radius:15px;box-shadow:8px 8px 0 #bdc9ed45;transform:perspective(350px) rotateY(-18deg) rotateZ(16deg)}
.code-sticker{box-shadow:3px 4px 0 #b5c3ed,6px 9px 13px #465ba521;z-index:1}.scene-tag{box-shadow:3px 4px 0 #dbc99e,7px 10px 14px #75613215}
.depth-orb{position:absolute;width:58px;height:58px;right:2px;top:39%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffef8,#e3d7ff 32%,#a08ad8 72%,#6f5d9d);box-shadow:inset -4px -5px 9px #6d5a9c40,8px 14px 20px #453a7424;pointer-events:none;z-index:3}
.depth-cube{position:absolute;width:35px;height:35px;left:9px;bottom:95px;background:linear-gradient(135deg,#8de3ca,#439b85);transform:rotate(-17deg) skewY(12deg);border-radius:7px;box-shadow:5px 6px 0 #277e72,10px 14px 15px #2c776b24;pointer-events:none}
[data-typewriter]{position:relative;display:inline-block}.type-reserve{visibility:hidden}.type-overlay{position:absolute;inset:0;white-space:nowrap}.type-overlay:after{content:'';display:inline-block;width:2px;height:.77em;background:currentColor;margin-left:4px;vertical-align:baseline}.type-overlay.is-finished:after{display:none}
.next-course{isolation:isolate}.course-visual{overflow:hidden}.visual-glyph{text-shadow:1px 2px #ffffff,3px 5px #7782b443;transition:transform .3s}.next-course:hover .visual-glyph,.next-course:focus-visible .visual-glyph{transform:perspective(500px) rotateY(-12deg) rotateZ(-5deg) translateY(-4px)}
.course-decoration{box-shadow:inset 2px 2px 0 #fff8,5px 8px 0 #636ca012}.calendar-board{background:linear-gradient(145deg,#fff,#f9faff);box-shadow:1px 2px 0 #cbd4f3,6px 8px 0 #e0e6fc,12px 20px 35px #273a7010}.calendar-day.is-today{box-shadow:0 4px 0 #14268b,0 8px 16px #293cc329;transform:translateY(-4px)}
.path-art{box-shadow:inset 0 1px 0 #fff,0 15px 20px #273b7710}.spark-closing{position:relative;isolation:isolate}.spark-closing:before{content:'';position:absolute;inset:10% 30%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,#dfe3ff80,transparent 65%)}
.reveal-ready{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}.reveal-ready.is-visible{opacity:1;transform:none}
/* The classroom adopts a quiet content rail, keeping movement outside study controls. */
.rail{box-shadow:5px 0 25px #25357706}.panel,.course-row{box-shadow:0 4px 15px #20346904}.hero{background:radial-gradient(circle at 100% 0%,#526be5,transparent 50%),linear-gradient(120deg,#202f87,#2e41b4);box-shadow:0 12px 24px #253a8918;border:1px solid #465ccc}.hero-art{opacity:.7;filter:drop-shadow(9px 14px 8px #10215b40)}
.classroom{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.lesson-nav{position:sticky;top:24px;max-height:calc(100dvh - 48px);overflow:auto;scrollbar-width:thin;border-radius:18px}.lesson-nav>h3{font-size:18px}.lesson-nav .lesson-row{border-radius:9px;margin-top:5px;padding:13px 10px}.lesson-nav .lesson-row.current{background:#e8edff;box-shadow:inset 3px 0 #263acb}.video-stage{border-radius:18px;border:1px solid #2d3e79;box-shadow:0 13px 30px #17234414;overflow:hidden}.lesson-body{padding-top:26px}.curriculum details{border-radius:14px;overflow:hidden}.curriculum summary{min-height:60px}
.classroom-toggle{display:none}.page-heading h1{font-size:clamp(26px,3vw,38px)}.rail .motion-control{margin:12px 0;width:100%}.code-editor{border-color:#374679;background:#20294e}.code-editor-bar{background:#29365f}.editor-area textarea{color:#e5eaff}.code-output pre{color:#344b91}.studio-prompt pre{background:#eef1ff;color:#33467e}
@keyframes mascot-arrive{from{opacity:0;transform:translateY(25px) rotate(10deg) scale(.85)}to{opacity:1;transform:rotate(-7deg) rotateY(-13deg)}}
@media(max-width:1000px){.site-header .motion-control{display:none}.classroom{grid-template-columns:minmax(0,1fr)}.lesson-nav{position:static;max-height:450px}.classroom-toggle{display:inline-flex;margin-bottom:14px}.lesson-nav.is-collapsed{display:none}}
@media(max-width:600px){.spark-hero{padding-top:38px;gap:8px}.discovery-scene{padding-inline:16px}.discovery-card{transform:rotate(-1deg);box-shadow:3px 5px 0 #cbd4f6,8px 14px 25px #253b8618}.depth-orb{width:40px;height:40px;right:-2px}.depth-cube{width:26px;height:26px;left:1px;bottom:95px}.idea-note{right:8px}.calendar-day.is-today{transform:translateY(-2px)}.hero-actions .button{padding-inline:20px}.page-heading{gap:14px;flex-wrap:wrap}.video-stage{border-radius:12px}.lesson-body h1{font-size:25px}}
html[data-motion='off'] *,html[data-motion='off'] *:before,html[data-motion='off'] *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html[data-motion='off'] .reveal-ready{opacity:1;transform:none}html[data-motion='off'] .discovery-card,html[data-motion='off'] .discovery-card[data-depth-active]{transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-ready{opacity:1;transform:none}.discovery-card,.discovery-card[data-depth-active]{transform:none}.idea-mascot{animation:none}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.site-header nav .motion-control{display:inline-flex;align-items:center;justify-content:center}
@media(max-width:760px){.site-header{height:auto}}
@media(max-width:360px){.site-header{display:grid;grid-template-columns:1fr auto;row-gap:10px;height:auto;min-height:0;max-height:none;align-content:start}.site-header>.button.compact{grid-column:1 / -1;margin:0;position:static}.site-header nav{grid-column:1 / -1;order:3}.spark-copy h1{font-size:43px}.hero-actions{gap:15px}}

/* Keep the two primary mobile controls in one compact, predictable group. */
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.header-actions .compact{white-space:nowrap}
.nav-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.learning-icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}.scene-tag{display:flex;align-items:center;gap:8px}.scene-tag .learning-icon{width:17px;height:17px}
.navigation-progress{position:fixed;inset:0 0 auto;height:3px;background:linear-gradient(90deg,#263acb,#9caef3);z-index:100;opacity:0;transform:scaleX(.1);transform-origin:left;pointer-events:none}
html[data-navigating] .navigation-progress{opacity:1;transform:scaleX(.85);transition:transform 3s ease-out,opacity .1s .15s}
.navigation-error{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 20px;background:#fff1dd;color:#6b4820;font-size:13px;flex-wrap:wrap}.navigation-error button{min-height:44px;padding:8px 12px;border:1px solid #d4b88e;border-radius:8px;background:#fff;color:inherit;cursor:pointer}
body[data-public-site] #content{view-transition-name:public-content}
::view-transition-old(root),::view-transition-new(root){animation:none}
::view-transition-old(public-content){animation:content-out .12s ease both}
::view-transition-new(public-content){animation:content-in .14s ease both}
@keyframes content-out{to{opacity:0}}@keyframes content-in{from{opacity:0}to{opacity:1}}
.content[aria-busy='true']{cursor:progress}.shell{position:relative}.shell:has(.content[aria-busy='true']):before{content:'';position:fixed;top:0;left:0;right:0;height:3px;z-index:50;background:#4257cf;pointer-events:none}
@media(max-width:760px){.site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:14px 18px;gap:10px;height:auto;min-height:76px}.site-header .wordmark{margin:0;min-width:0;font-size:22px;gap:8px}.site-header .wordmark small{font-size:8px;white-space:nowrap}.site-header .brand-logo{width:30px;height:38px}.header-actions{grid-column:2;grid-row:1;gap:7px}.header-actions .button.compact{order:0;margin:0;padding:10px 12px;font-size:11px;min-height:44px}.header-actions .nav-toggle{padding:10px;gap:6px;min-height:44px;font-size:11px}.site-header #public-nav{grid-column:1/-1;grid-row:2;margin:0;padding:10px;flex-wrap:wrap;gap:6px;justify-content:flex-start}.site-header nav .motion-control{display:inline-flex}.site-header #public-nav a{padding:10px 12px;min-height:44px}.site-header nav:not(.is-open){display:none}}
@media(max-width:360px){.site-header{padding-inline:14px;column-gap:8px}.site-header .wordmark{font-size:20px;gap:6px}.site-header .wordmark small{display:none}.header-actions{gap:6px}.header-actions .button.compact{padding-inline:10px}.header-actions .nav-toggle{padding-inline:9px}.site-header nav{order:initial}.hero-actions{gap:15px}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

.large-mark .learning-icon{width:64px;height:64px}

/* Every drawer control stays reachable on short screens and with larger text. */
.rail{height:100dvh;overflow-y:auto;overscroll-behavior:contain}.rail-heading{display:flex;align-items:flex-start;gap:8px;flex-shrink:0}.rail-heading .brand{min-width:0}.rail-close{display:none;flex-shrink:0}.nav{flex-shrink:0}.rail-bottom{flex-shrink:0}.nav-scrim{position:fixed;inset:0;background:#17244366;z-index:19;border:0;cursor:pointer}
@media(max-width:760px){body.navigation-open{overflow:hidden}.rail.open{width:min(320px,calc(100vw - 24px));max-width:none;padding:18px 16px}.rail-heading{align-items:center;margin-bottom:20px}.rail-heading .brand{flex:1;margin:0;font-size:23px}.rail-close{display:inline-flex;width:44px;height:44px;border-color:#d3dcf2}.rail .nav-label{margin-top:0;margin-bottom:9px}.rail .nav{gap:4px}.rail .nav a{min-height:44px;padding:10px 12px}.rail .rail-note{display:none}.rail .rail-bottom{margin-top:auto;padding-top:12px}.rail .account{margin-top:2px}.rail .motion-control{margin:0 0 12px}.nav-scrim{display:block}}
.nav-scrim[hidden]{display:none!important}