@font-face{font-family:'Manrope';src:url('assets/fonts/Manrope.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Golos Text';src:url('assets/fonts/GolosText.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap}
body{font-family:'Golos Text',Arial,sans-serif;-webkit-font-smoothing:antialiased}
.hero-title,h2,h3,.brand,.price{font-family:'Manrope','Golos Text',Arial,sans-serif}
.hero-title{font-weight:800;letter-spacing:-.055em}h2{font-weight:750;letter-spacing:-.045em}h3{font-weight:750;letter-spacing:-.025em}
.brand{letter-spacing:-.055em}.price{font-weight:800;font-variant-numeric:tabular-nums}
.lead{line-height:1.8}.course>p{font-size:21px;line-height:1.8}.course-ages{font-size:19.5px}.course>a{font-size:19.5px}.body-copy{font-size:22.5px}.teacher p{font-size:19.5px}.price-card>p{font-size:21px}.faq summary{font-size:22.5px}.faq details p{font-size:21px}.button{font-size:21px}.price-card{grid-template-rows:32px 70px 80px auto 54px}.hero-notes{font-size:16.5px}
.course,.price-card{transition:scale .28s ease,box-shadow .28s ease,border-color .28s ease}
.button{transition:transform .22s ease,background .22s ease,box-shadow .22s ease}
.button:active{transform:translateY(0) scale(.98)}
.course>a span,.text-link span{display:inline-block;transition:transform .25s ease}
.header nav a{position:relative;padding-bottom:4px}.header nav a:after{content:'';position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}.header nav a:hover:after,.header nav a:focus-visible:after{transform:scaleX(1)}
@media(hover:hover) and (pointer:fine){.course:hover,.price-card:hover{scale:1.025;box-shadow:0 12px 25px #24252b0c}.course>a:hover span{transform:translate(3px,-3px)}.primary:hover{box-shadow:0 7px 18px #f16b3826}.text-link:hover span{transform:translateY(4px)}}
@media(prefers-reduced-motion:no-preference){
 .hero-copy>.eyebrow{animation:arrive .65s both}.hero .hero-title{animation:arrive .75s .08s both}.hero .lead{animation:arrive .75s .16s both}.hero-copy>.actions{animation:arrive .75s .24s both}.hero-notes{animation:arrive .75s .32s both}
 .code-window{animation:window-float 2.4s ease-in-out 2}.floating-tag{animation:tag-float 2.4s ease-in-out 2}.sticker{animation:sticker-wave 2.4s ease-in-out 2;transform-origin:70% 70%}.bot{animation:robot-hop 2.4s ease-in-out 2}.bot-face>span{animation:robot-blink 2.4s 2}.coin{animation:coin-shine 2.4s 2}.coin-two{animation-delay:.15s}.spark-one{animation:spark-turn 2.4s 2}.hero .hero-title svg path{stroke-dasharray:450;stroke-dashoffset:450;animation:underline-draw 1s .5s ease forwards}
 .reveal-ready{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1);transition-delay:var(--reveal-delay,0ms)}.reveal-ready.is-visible{opacity:1;transform:translateY(0)}
 .faq details[open]>p{animation:answer-in .25s ease-out}
}
@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes window-float{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-7px)}}
@keyframes tag-float{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-5px)}}
@keyframes sticker-wave{0%,100%{transform:rotate(9deg)}50%{transform:rotate(5deg)}}
@keyframes robot-hop{0%,20%,65%,100%{transform:rotate(4deg) translateY(0)}38%{transform:rotate(-5deg) translateY(-14px)}48%{transform:rotate(5deg) translateY(0)}54%{transform:rotate(4deg) translateY(-4px)}}
@keyframes robot-blink{0%,68%,76%,100%{transform:scaleY(1)}72%{transform:scaleY(.12)}}
@keyframes coin-shine{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.65}}
@keyframes spark-turn{0%,100%{transform:rotate(0)}50%{transform:rotate(30deg)}}
@keyframes underline-draw{to{stroke-dashoffset:0}}
@keyframes answer-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.course>p{font-size:21px}.course-ages{font-size:18px}.button{font-size:19.5px}.hero .hero-title{font-size:clamp(58.5px,17.7vw,73.5px)}.price-card h3{font-size:31.5px}.teacher p{font-size:18px}.course h3{font-size:36px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready{opacity:1!important;transform:none!important}.course,.price-card{scale:none!important}}
/* Replay the short scene when the hero comes into view. */
.code-content>span:nth-child(even){position:relative;white-space:nowrap;min-width:0}
@media(prefers-reduced-motion:no-preference){
 .hero .bot,.hero .bot-face>span{animation:none}
 .hero.hero-playing .code-content>span:nth-child(even){animation:code-type .85s steps(32,end) both}
 .hero.hero-playing .code-content>span:nth-child(2){animation-delay:.1s}
 .hero.hero-playing .code-content>span:nth-child(4){animation:none}
 .hero.hero-playing .code-content>span:nth-child(6){animation-delay:1.05s}
 .hero.hero-playing .code-content>span:nth-child(8){animation-delay:2s}
 .hero.hero-playing .code-content>span:nth-child(10){animation-delay:2.95s}
 .hero.hero-playing .code-content>span:nth-child(even):not(:nth-child(4))::after{content:'';display:inline-block;border-left:2px solid #edc376;height:1em;vertical-align:middle;margin-left:3px;animation:typing-caret .85s steps(1,end) both}
 .hero.hero-playing .code-content>span:nth-child(2)::after{animation-delay:.1s}
 .hero.hero-playing .code-content>span:nth-child(6)::after{animation-delay:1.05s}
 .hero.hero-playing .code-content>span:nth-child(8)::after{animation-delay:2s}
 .hero.hero-playing .code-content>span:nth-child(10)::after{animation-delay:2.95s}
 .hero.hero-playing .bot{--travel:clamp(64px,10vw,135px);animation:robot-travel 4.8s ease-in-out both}
 .hero.hero-playing .bot-face>span{animation:robot-blink 2.4s 2}
}
@keyframes code-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes typing-caret{0%,40%,80%{opacity:1}20%,60%,100%{opacity:0}}
@keyframes robot-travel{0%,12%,100%{transform:rotate(4deg) translate(0,0)}25%{transform:rotate(-4deg) translate(25px,-28px)}37%,48%{transform:rotate(4deg) translate(var(--travel),-50px)}60%{transform:rotate(1deg) translate(var(--travel),-62px)}72%{transform:rotate(-4deg) translate(35px,-35px)}85%{transform:rotate(4deg) translate(0,0)}}