:root{--sheet:#fffef7;--sheet2:#eeeee2;--dots:#d2d1c4;--cos:#b35b3d;--sin:#a78d1f;--faint:#d3d9cc}
.landing .site-nav{height:88px}.studio-hero{grid-template-columns:1fr 1.15fr;gap:5vw;min-height:calc(100svh - 88px);background:radial-gradient(ellipse at 78% 38%,#e5eadb 0,transparent 58%)}.studio-copy h1{font-size:clamp(50px,5.3vw,98px);line-height:1.07;letter-spacing:-.055em}.studio-copy em{text-decoration:none}.studio-copy .small-label{transform:none;border:0;border-left:3px solid var(--accent);padding:0 0 0 12px;font:600 10px system-ui;letter-spacing:1.8px}.studio-copy p{max-width:370px;color:#657060;font-size:17px;line-height:1.75}.hero-proof{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;font-size:11px;color:#6d7868}.hero-create{border-radius:8px;box-shadow:0 4px 12px #2b564715;border-color:var(--primary);padding:17px 23px}.hero-create:hover{transform:translateY(-2px);box-shadow:0 8px 20px #2b564722}.demo-button{border-color:#b8c3af;border-radius:8px}.lesson-art{animation:none;transform:none;max-width:850px;border-radius:12px;box-shadow:0 24px 65px #263d2315;border-color:#c7d0bf}.lesson-art:before{display:none}.lesson-top{border-radius:12px 12px 0 0;background:#e8eddf;color:#485841;letter-spacing:1px;padding:20px}.lesson-art svg{touch-action:none;cursor:grab}.lesson-art svg:active{cursor:grabbing}.lesson-art svg>g[fill="none"]{animation:none}.lesson-foot{border-radius:0 0 12px 12px;flex-wrap:wrap;padding:18px 20px;font-size:9px;gap:9px}.lesson-foot .vals{width:100%;display:flex;justify-content:space-between;gap:10px;margin-top:9px;font:600 13px ui-monospace,monospace;color:#44533d}.lesson-foot .c{color:var(--cos)}.lesson-foot .s{color:#8b7414}.circle-controls{display:flex;align-items:center;gap:14px;padding:10px 20px 20px;font-size:11px}.circle-controls button{border:1px solid #c7d0bf;background:white;border-radius:6px;padding:8px 10px;min-width:90px;color:var(--primary)}.circle-controls input{flex:1;min-width:0;accent-color:var(--primary)}.circle-controls label{white-space:nowrap}.studio-strip{border-top:1px solid #cad3c2;background:#e9ede3;padding-top:36px;padding-bottom:36px}.studio-strip h2{font-size:27px}.studio-strip article>span{color:#6a7c5e}.studio-plan{background:#f9faf4}.plan-offer{transform:none;border-radius:12px;background:#eef2e6;box-shadow:0 14px 40px #2b564710;border-color:#c2cfb7}.plan-offer:before{display:none}.plan-offer .btn{border-radius:7px}.studio-footer{background:#f9faf4}
.lesson-tools{position:absolute;top:16px;left:20px;display:flex;gap:6px;z-index:5;background:var(--panel);border:1px solid var(--line);padding:5px;border-radius:10px;box-shadow:0 5px 20px #17251e0a}.lesson-tools button{border:0;background:none;border-radius:6px;padding:10px;color:#344c3d;font-size:15px;display:flex;gap:7px;align-items:center}.lesson-tools button span{font-size:12px}.lesson-tools button[aria-expanded=true],.lesson-tools button:hover{background:#e5eddf}.lesson-panel{position:absolute;z-index:8;top:78px;left:20px;width:330px;max-width:calc(100% - 40px);max-height:calc(100% - 185px);overflow:auto;background:var(--panel);color:var(--ink);border:1px solid #cbd6c2;border-radius:12px;padding:20px;box-shadow:0 16px 40px #15241c22;overscroll-behavior:contain}.lesson-panel[hidden]{display:none}.lesson-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.lesson-panel-head h2{font:25px Georgia,serif;margin:0}.lesson-panel-head button{border:0;background:#e9eee4;border-radius:50%;font-size:23px;width:32px;height:32px}.lesson-panel label{display:block;font-size:12px;margin:16px 0 8px}.lesson-panel input:not([type=checkbox]),.lesson-panel select,.modal textarea{width:100%;padding:12px;border:1px solid #bccbb3;border-radius:7px;background:white;color:#253628;font:14px system-ui}.lesson-panel .btn{width:100%;margin-top:12px;white-space:normal}.lesson-panel .helper{font-size:11px;line-height:1.6;color:#687561}.pen-presets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pen-presets button{border:1px solid #cbd6c2;padding:13px 9px;background:#f2f5ec;color:#344932;border-radius:8px;font-size:12px;text-align:left}.pen-presets small{display:block;margin-top:6px;color:#6e7b65}.pen-presets .chosen{border-color:#2b5647;background:#dce9d5}.lesson-panel .pen-touch{display:flex;align-items:center;gap:10px;line-height:1.5}.custom-color{width:100%;display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:8px}.custom-color input{width:35px;height:28px;border:0;background:none;padding:0}.brushbar{max-height:calc(100% - 150px);overflow:auto;gap:10px}.brushbar .palette{grid-template-columns:repeat(6,1fr);gap:6px}.brushbar .color-dot{width:18px;height:18px;border:1px solid #94a08b77;border-radius:50%}.brushbar .color-dot.selected{outline:2px solid #1c5635;outline-offset:2px}.calc-mode{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.calc-mode label{margin:0}.calc-mode select{width:95px}.lesson-panel #calcInput{font:17px ui-monospace,monospace}#calcOutput{display:block;min-height:50px;padding:14px 2px;font:24px ui-monospace,monospace;overflow-wrap:anywhere;color:#2b5647}.calc-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.calc-keys button{padding:12px 4px;border:1px solid #d2dcc9;background:#f0f4e9;border-radius:7px;color:#263d2b;font-size:15px}.calc-keys button:hover{background:#dce9d5}.formula-tabs{display:flex;gap:5px;margin-bottom:12px}.formula-tabs button{flex:1;font-size:11px;padding:10px 4px;border:1px solid #cbd6c2;background:transparent;border-radius:6px}.formula-tabs button[aria-pressed=true]{background:var(--primary);color:white;border-color:var(--primary)}.formula-card{margin-top:10px;border:1px solid #d3ddcb;border-radius:8px;padding:14px}.formula-card summary{cursor:pointer;font-weight:600;font-size:13px}.formula-card summary small{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1px;font-weight:400;color:#6f7e63;margin-bottom:6px}.formula-card pre{white-space:pre-wrap;font:15px/1.7 Georgia,serif;background:#edf2e6;border-radius:5px;padding:12px;overflow-wrap:anywhere}.formula-card p{font-size:11px;line-height:1.6;color:#617255}.formula-card .btn{font-size:11px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.toolbar [data-tool=ellipse],.toolbar [data-tool=triangle]{font-size:25px}.modal textarea{resize:vertical}.toolbar{max-width:calc(100% - 220px);overflow-x:auto}.toolbar .tool{flex-shrink:0}
@media(max-width:1050px){.studio-hero{grid-template-columns:1fr;min-height:0;padding-top:55px;gap:50px}.studio-copy{max-width:700px}.studio-copy h1{font-size:clamp(48px,7vw,78px)}.lesson-art{max-width:850px}.studio-copy p{max-width:500px}.toolbar{max-width:calc(100% - 20px)}}
@media(max-width:620px){.landing .site-nav{height:76px}.studio-hero{padding-top:42px;gap:34px}.studio-copy h1{font-size:clamp(42px,9.5vw,60px);letter-spacing:-2px}.studio-copy p{font-size:15px}.hero-proof{font-size:10px;gap:10px}.lesson-art{width:100%;margin:0}.lesson-top{font-size:8px;padding:15px}.lesson-foot{padding:14px 12px;font-size:8px}.lesson-foot .vals{font-size:11px}.circle-controls{padding:12px;gap:8px}.circle-controls button{min-width:75px;padding:8px}.studio-strip h2{font-size:25px}.lesson-tools{left:8px;right:8px;top:8px;gap:2px;justify-content:space-between}.lesson-tools button{padding:8px 5px}.lesson-tools button span{font-size:10px}.lesson-panel{left:8px;top:60px;max-width:calc(100% - 16px);width:330px;max-height:calc(100% - 175px)}.brushbar{top:65px;right:8px;width:116px;max-height:calc(100% - 185px)}.brushbar .palette{grid-template-columns:repeat(4,1fr)}.brushbar .color-dot{width:17px;height:17px}.toolbar{max-width:calc(100% - 16px)}.hero-create{padding:15px 19px}.custom-color{flex-wrap:wrap}.lesson-tools button{font-size:14px}}
@media(prefers-reduced-motion:reduce){.studio-copy{animation:none}.hero-create,.demo-button{transition:none}}
/* Crisp type and stationary vector illustration: no animated transforms or haze. */
.landing{color:#17251e}.landing .studio-hero{background:#f4f3ec;grid-template-columns:1fr 1.12fr;gap:4vw;padding-top:65px;padding-bottom:70px;min-height:720px}.landing .studio-copy{animation:none;transform:none;opacity:1}.landing .studio-copy h1{font:600 clamp(42px,4.5vw,78px)/1.09 Georgia,serif;letter-spacing:-.045em;margin:24px 0}.landing .studio-copy em{font-weight:500;color:#2b5647}.landing .studio-copy p{color:#425246;font-size:16px;line-height:1.8;max-width:410px}.landing .small-label{color:#35523d;font-size:11px}.landing .lesson-art{animation:none;transform:none;box-shadow:5px 5px 0 #dce3d4;border:1px solid #83967c;border-radius:4px;filter:none}.landing .lesson-top{border-radius:3px 3px 0 0;color:#304a36;font:600 11px ui-monospace,monospace}.landing .lesson-foot{border-radius:0 0 3px 3px;font:12px system-ui;color:#3f5342}.landing .lesson-foot .ink-dot{animation:none;box-shadow:none}.landing .lesson-foot .vals{font-size:14px;padding-top:9px;border-top:1px solid #cdd7c3}.landing .lesson-art svg{shape-rendering:geometricPrecision}.landing .lesson-art svg text{font-weight:500}.landing .lesson-art #paperDots{opacity:.5}.landing .lesson-art #fs,.landing .lesson-art #fc{opacity:.65}.landing .circle-controls button{min-width:45px;font-weight:600}.landing .hero-proof{color:#465c49;font-size:12px}.landing .studio-strip p{color:#435844;font-size:14px;line-height:1.8;max-width:360px}.landing .studio-strip h2{color:#203c2a;font-size:27px}.landing .studio-strip article{transform:none!important}.landing .studio-footer{color:#425a44;font-size:12px}.landing .plan-offer{box-shadow:none;border:1px solid #8ca27e;border-radius:5px}.landing .plan-offer p,.landing .studio-plan p{color:#40593e}.lesson-workflow{padding:90px clamp(24px,5vw,110px);display:grid;grid-template-columns:1fr 1.15fr;gap:7vw;background:#fffef9;border-bottom:1px solid #bfcbb6}.workflow-intro h2{font:500 clamp(32px,3vw,48px)/1.15 Georgia,serif;letter-spacing:-1px;margin:22px 0}.workflow-intro p{max-width:360px;font-size:15px;line-height:1.8;color:#435745}.workflow-intro .btn{margin-top:14px;border-color:#849b79;color:#284b33}.workflow-features{display:grid;grid-template-columns:1fr 1fr;gap:32px}.workflow-features article{border-top:1px solid #9eb291;padding-top:20px}.feature-symbol{display:inline-grid;place-items:center;width:35px;height:35px;font:24px Georgia,serif;color:#2b5647;border:1px solid #bac9b1;border-radius:4px}.workflow-features h3{font-size:16px;font-weight:600;margin:18px 0 10px}.workflow-features p{font-size:14px;line-height:1.8;color:#435745;margin:0}.remote-pointer{transition:none!important;will-change:transform;contain:layout style;line-height:1}.remote-pointer svg{display:block;overflow:visible}.remote-pointer b{font:600 11px/1.3 system-ui;box-shadow:none;background:#254735;margin-left:16px;padding:3px 6px}
@media(min-width:1600px){.landing .studio-hero{min-height:800px}}
@media(max-width:1050px){.landing .studio-hero{grid-template-columns:1fr;min-height:0;gap:42px}.landing .studio-copy h1{font-size:60px}.landing .lesson-art{max-width:820px}.lesson-workflow{grid-template-columns:1fr;gap:40px}}
@media(max-width:620px){.landing .studio-hero{padding-top:38px;padding-bottom:50px;gap:34px}.landing .studio-copy h1{font-size:clamp(39px,9vw,54px);letter-spacing:-1.6px}.landing .studio-copy p{font-size:15px}.landing .lesson-top{font-size:9px;padding:13px 12px}.landing .lesson-foot{font-size:11px}.landing .lesson-foot .vals{font-size:12px}.lesson-workflow{padding-top:55px;padding-bottom:55px}.workflow-features{grid-template-columns:1fr;gap:24px}.workflow-features article{display:flex;gap:15px}.feature-symbol{flex-shrink:0}.workflow-features h3{margin:0 0 8px}.landing .hero-proof{font-size:11px}}
.lesson-panel:has(.booklet-page){width:min(540px,calc(100vw - 28px))}.booklet-page{display:block;width:100%;height:auto;border:1px solid #ddd;border-radius:3px;margin:12px 0;background:white}.booklet-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}.booklet-nav button{border:1px solid #b9c5b5;background:white;border-radius:4px;padding:8px 15px;cursor:pointer}.booklet-nav button:disabled{opacity:.35;cursor:default}.booklet-nav label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px}.booklet-nav input{width:60px;padding:6px}.booklet-actions{display:flex;gap:8px;flex-wrap:wrap}.booklet-source{font-size:12px;color:#5b526d}.lesson-panel .booklet-actions .btn{font-size:12px}.lesson-tools{flex-wrap:wrap;max-width:calc(100% - 24px)}
.board-area.selecting .board-svg{cursor:crosshair}.landing .studio-hero{position:relative;isolation:isolate;overflow:hidden}.hero-network{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.landing .studio-copy h1{font-size:clamp(48px,5.8vw,96px);line-height:1.04;letter-spacing:-.05em}.landing .studio-copy p{max-width:390px}.landing .hero-actions button{transition:transform .18s,box-shadow .18s}.landing .hero-actions button:hover{transform:translateY(-3px);box-shadow:0 6px 0 #203d2518}.landing .lesson-art{box-shadow:9px 9px 0 #dce3d4}.reveal-once{opacity:0;translate:0 18px;transition:opacity .55s,translate .55s}.reveal-once.in-view{opacity:1;translate:0 0}.workflow-features article:nth-child(2){transition-delay:.07s}.workflow-features article:nth-child(3){transition-delay:.12s}.workflow-features article:nth-child(4){transition-delay:.17s}@media(prefers-reduced-motion:reduce){.reveal-once{opacity:1;translate:none;transition:none}.landing .hero-actions button{transition:none}.hero-network{opacity:.5}}@media(max-width:620px){.landing .studio-copy h1{font-size:clamp(44px,12vw,68px)}.hero-network{opacity:.65}}
.board-area.grabbing .board-svg{cursor:grabbing!important}.landing .studio-hero{min-height:700px;padding-top:58px;padding-bottom:65px}.landing .studio-copy h1{font-size:clamp(46px,5.6vw,88px)}.landing .lesson-art{box-shadow:7px 9px 0 #dce3d480;border-color:#9aaa8c}.hero-network{opacity:.8}.lesson-examples{padding:76px clamp(24px,5vw,110px) 90px;background:#f4f3ec;border-top:1px solid #c9d0bf;border-bottom:1px solid #c9d0bf}.examples-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:38px}.examples-heading h2{font:500 clamp(30px,3.4vw,48px)/1.12 Georgia,serif;letter-spacing:-1.3px;margin:16px 0 0;color:#243b2c}.examples-heading p{font:14px/1.7 system-ui;color:#58624f;max-width:300px;margin:0 0 15px}#lessonMotionToggle{background:transparent;border:1px solid #b7c1aa;padding:10px 14px;border-radius:4px;color:#36533c;font:12px system-ui;cursor:pointer}.example-sheets{display:grid;grid-template-columns:1fr 1fr;gap:32px}.example-sheet{background:#fffef7;border:1px solid #a6b398;border-radius:5px;box-shadow:5px 7px 0 #d8dfcd80;overflow:hidden;transition:box-shadow .25s,border-color .25s}.example-sheet:hover{border-color:#708666;box-shadow:7px 10px 0 #d8dfcdb0}.example-sheet header{display:flex;justify-content:space-between;padding:17px 24px;background:#e8eddc;border-bottom:1px solid #d1dac4;font:10px ui-monospace,monospace;letter-spacing:1px;color:#46583d}.spring-sheet header{background:#ece9de}.sheet-content{padding:26px 28px 20px}.sheet-content h3{font:500 27px/1.16 Georgia,serif;letter-spacing:-.6px;margin:0 0 15px;color:#344f39}.sheet-content svg{display:block;width:100%;height:auto;overflow:visible}.sheet-content svg text{font:14px Georgia,serif;fill:#5b6c4e}.sheet-content #parabolaEquation,.sheet-content #springPosition{font-size:17px}.sheet-content label{display:flex;justify-content:space-between;font:12px system-ui;color:#536348;margin-top:14px}.sheet-content output{font-variant-numeric:tabular-nums;color:#2f533d}.sheet-content input[type=range]{width:100%;height:25px;accent-color:#3c614b;cursor:pointer;margin-top:8px}.example-sheet footer{padding:16px 28px;border-top:1px solid #dde2d3;font:12px/1.6 system-ui;color:#637057}.example-sheet:focus-within{border-color:#365c47}@media(max-width:760px){.examples-heading{display:block}.examples-heading>div+div{margin-top:22px}.example-sheets{grid-template-columns:1fr;gap:28px}.lesson-examples{padding-top:45px;padding-bottom:50px}.sheet-content{padding:24px 18px 15px}.example-sheet header{font-size:9px;padding:15px 18px}.example-sheet footer{padding:14px 18px}.landing .studio-hero{min-height:0}.sheet-content h3{font-size:25px}}@media(prefers-reduced-motion:reduce){.example-sheet{transition:none}}
/* The three lesson sheets share the first screen, with compact secondary studies. */
.landing .studio-hero{grid-template-columns:minmax(0,.85fr) minmax(0,1.25fr);gap:4vw;padding:35px 5vw 38px;min-height:0;align-items:center}.hero-lessons{min-width:0;display:grid;gap:14px}.hero-lessons .lesson-art{width:100%;margin:0;box-shadow:4px 5px 0 #dce3d480}.hero-lessons .lesson-art>svg{width:100%;max-height:248px}.hero-lessons .lesson-top{padding:10px 16px;font-size:9px}.hero-lessons .lesson-foot{padding:8px 14px;font-size:10px}.hero-lessons .lesson-foot .vals{display:none}.hero-lessons .circle-controls{padding:5px 15px;gap:12px}.hero-examples.lesson-examples{padding:0;border:0;background:transparent}.hero-examples .example-sheets{gap:14px}.hero-examples .example-sheet{box-shadow:3px 4px 0 #d8dfcd70}.hero-examples .example-sheet header{padding:9px 12px;font-size:8px;letter-spacing:.5px}.hero-examples .sheet-content{padding:10px 12px 8px}.hero-examples h3,.hero-examples footer{display:none}.hero-examples .sheet-content svg{max-height:132px}.hero-examples .sheet-content label{font-size:10px;margin-top:3px}.hero-examples .sheet-content input[type=range]{height:16px;margin-top:3px}.hero-motion-control{display:flex;justify-content:space-between;align-items:center;gap:10px;font:10px system-ui;color:#6a775e}.hero-motion-control #lessonMotionToggle{padding:6px 10px;font-size:10px}.landing .studio-copy h1{font-size:clamp(46px,5.3vw,82px)}.subject-ribbon{overflow:hidden;background:#294c3a;color:#f1f2e7;padding:19px 0}.ribbon-track{display:flex;width:max-content;animation:subject-scroll 36s linear infinite}.ribbon-track>span{display:flex;align-items:center;gap:42px;padding-right:42px;white-space:nowrap;font:11px ui-monospace,monospace;letter-spacing:1.8px}.ribbon-track i{font:20px Georgia,serif;font-style:normal;color:#b6c69c}.subject-ribbon:hover .ribbon-track,.motion-paused .ribbon-track{animation-play-state:paused}@keyframes subject-scroll{to{transform:translateX(-50%)}}.learning-route{padding:76px 6vw 56px;background:#f7f6ef;border-bottom:1px solid #cbd4c1}.route-heading{display:flex;align-items:center;justify-content:space-between;gap:25px}.route-heading h2{font:500 clamp(32px,3.5vw,50px)/1.12 Georgia,serif;letter-spacing:-1.3px;margin:18px 0;color:#263d2d}.route-score{text-align:right;display:grid;gap:7px;color:#5a6d4e}.route-score strong{font:500 64px/1 Georgia,serif;font-variant-numeric:tabular-nums;color:#3e6146}.route-score>span{font:11px system-ui}.route-map{height:290px;position:relative;margin:4px 0 32px}.route-map>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.route-stop{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;color:#53654b}.route-stop b{display:grid;place-items:center;width:48px;height:48px;margin:auto;border:1px solid #bccbb1;border-radius:50%;background:#f7f6ef;font:15px ui-monospace,monospace;box-shadow:0 4px 0 #d9e2d0;transition:background .4s,box-shadow .4s,color .4s}.route-stop span{position:absolute;top:61px;left:50%;transform:translateX(-50%);white-space:nowrap;font:12px system-ui}.route-stop.passed b{background:#47694b;border-color:#47694b;color:#fffdf3}.route-stop[aria-pressed=true] b{box-shadow:0 0 0 7px #dfe7d5,0 5px 0 #bfcfb3}.route-stop:focus-visible{outline:2px solid #486e4e;outline-offset:8px;border-radius:50%}#routeProgress{transition:stroke-dashoffset 1s ease}.route-detail{border-top:1px solid #cbd4c1;padding-top:25px;display:grid;grid-template-columns:170px 1fr auto;gap:24px;align-items:center}.route-detail>span{font:10px ui-monospace,monospace;letter-spacing:1px;color:#5b7150}.route-detail p{font:14px/1.7 system-ui;color:#526249;max-width:480px;margin:0;min-height:48px}.route-detail .btn{font-size:12px}.hero-network{opacity:.5}@media(min-width:1600px){.hero-lessons .lesson-art>svg{max-height:310px}.hero-examples .sheet-content svg{max-height:165px}.landing .studio-hero{padding-top:48px;padding-bottom:50px}}@media(max-width:1000px){.landing .studio-hero{grid-template-columns:1fr;gap:30px;padding:35px 6vw}.landing .studio-copy{max-width:650px}.hero-lessons{max-width:800px;width:100%}.hero-lessons .lesson-art>svg{max-height:300px}.hero-examples .sheet-content svg{max-height:170px}.route-detail{grid-template-columns:1fr auto}.route-detail>span{grid-column:1/-1}.route-stop span{font-size:10px}.route-heading h2{font-size:38px}}@media(max-width:600px){.hero-examples .example-sheets{grid-template-columns:1fr 1fr;gap:10px}.hero-examples .example-sheet header{font-size:7px;padding:8px;letter-spacing:0}.hero-examples .sheet-content{padding:6px}.hero-examples .sheet-content label{font-size:9px}.hero-lessons .lesson-art>svg{max-height:245px}.route-heading h2{font-size:31px}.route-score strong{font-size:43px}.route-score>span{max-width:110px;font-size:10px}.learning-route{padding:45px 6vw}.route-map{height:230px;margin-top:20px}.route-stop b{width:34px;height:34px;font-size:11px}.route-stop span{white-space:normal;width:65px;top:47px;line-height:1.3}.route-detail{grid-template-columns:1fr;gap:15px}.route-detail .btn{justify-self:start}.ribbon-track>span{font-size:10px;gap:26px;padding-right:26px}}@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none}#routeProgress,.route-stop b{transition:none}}

/* Balanced lesson composition and a more legible subject ribbon. */
.hero-lessons{gap:18px;justify-self:center;width:100%;max-width:760px}
.hero-lessons .lesson-art{max-width:none;border-radius:5px;box-shadow:4px 5px 0 #d8dfcd80}
.hero-examples .example-sheets{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:stretch}
.hero-examples .example-sheet{min-width:0;box-shadow:4px 5px 0 #d8dfcd80}
.hero-lessons .lesson-top,.hero-examples .example-sheet header{min-height:36px;padding:10px 14px;gap:12px;font-size:9px;line-height:1.4;letter-spacing:.5px;align-items:center}
.hero-examples .example-sheet header span:last-child{flex-shrink:0}
.hero-examples .sheet-content{padding:12px 14px 10px}
.hero-examples .sheet-content svg{width:100%;height:140px;max-height:none}
.hero-examples .sheet-content label{margin-top:8px;font-size:11px}
.hero-motion-control{padding:0 2px}
.subject-ribbon{padding:24px 0}
.ribbon-track>span{font-size:clamp(18px,1.6vw,25px);line-height:1.2;letter-spacing:2px;gap:36px;padding-right:36px}
.ribbon-track i{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;font-size:30px;line-height:1;letter-spacing:0}
@media(max-width:600px){
 .hero-lessons{gap:14px}
 .hero-examples .example-sheets{gap:14px}
 .hero-lessons .lesson-top,.hero-examples .example-sheet header{min-height:40px;padding:8px 10px;font-size:8px}
 .hero-examples .sheet-content{padding:10px 8px}
 .hero-examples .sheet-content svg{height:108px}
 .hero-examples .sheet-content label{font-size:10px}
 .subject-ribbon{padding:20px 0}
 .ribbon-track>span{gap:24px;padding-right:24px;font-size:18px}
 .ribbon-track i{flex-basis:26px;width:26px;height:26px;font-size:26px}
}

/* Miniature lessons, drawn with the same paper and ink as the board. */
.lesson-cinema{padding:70px 5vw 55px;background:#f7f6ef;border-bottom:1px solid #cbd4c1}
.cinema-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:32px}
.cinema-heading h2{font:500 clamp(32px,3.5vw,50px)/1.12 Georgia,serif;letter-spacing:-1.3px;margin:16px 0 0;color:#263d2d}
#cinemaToggle{border:1px solid #b7c1aa;background:transparent;border-radius:5px;padding:10px 14px;font:12px system-ui;color:#36533c;cursor:pointer}
.lesson-films{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.lesson-film{min-width:0;background:#fffef7;border:1px solid #a6b398;border-radius:6px;overflow:hidden;box-shadow:4px 6px 0 #d8dfcd80}
.lesson-film header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 14px;border-bottom:1px solid #d1dac4;font:10px system-ui;color:#65765d;background:#eef0e4}
.lesson-film header b{font:600 17px Georgia,serif;color:#2d5140;margin-right:5px}.film-people{white-space:nowrap;color:#325945}.film-people i{font-style:normal;color:#a76543;margin-left:8px}
.lesson-film>svg{display:block;width:100%;height:auto;font-family:Georgia,serif;fill:#354937}
.lesson-film footer{display:flex;align-items:center;gap:12px;padding:18px 14px;border-top:1px solid #d1dac4}.lesson-film footer>span{font:11px monospace;color:#8b967e}.lesson-film h3{font:500 clamp(17px,1.6vw,23px) Georgia,serif;margin:0;color:#304c37}
.cinema-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:32px}.cinema-bottom>span{font:13px system-ui;color:#65765d}
.film-paste{animation:film-paste 12s infinite}.film-shortcut{animation:film-shortcut 12s infinite}.film-line{animation:film-write 12s infinite;clip-path:inset(0)}.line-two{animation-name:film-write-later}.film-answer{animation:film-answer 12s infinite}
.film-cursor{animation-duration:12s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}.paste-cursor{animation-name:film-paste-cursor}.tutor-cursor{animation-name:film-tutor}.student-cursor{animation-name:film-student}.check-cursor{animation-name:film-check}
@keyframes film-paste{0%,8%{opacity:0;transform:translate(0,18px) scale(.97)}18%,88%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes film-shortcut{0%,5%,35%,100%{opacity:0}10%,25%{opacity:1}}
@keyframes film-write{0%,20%{clip-path:inset(0 100% 0 0)}45%,92%{clip-path:inset(0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes film-write-later{0%,42%{clip-path:inset(0 100% 0 0)}69%,92%{clip-path:inset(0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes film-answer{0%,66%{opacity:0;transform:translateY(6px)}77%,92%{opacity:1;transform:none}100%{opacity:0}}
@keyframes film-paste-cursor{0%,100%{transform:translate(290px,205px)}18%,40%{transform:translate(190px,135px)}60%,88%{transform:translate(305px,186px)}}
@keyframes film-tutor{0%,20%,100%{transform:translate(35px,100px)}45%,65%{transform:translate(285px,108px)}80%,92%{transform:translate(300px,58px)}}
@keyframes film-student{0%,35%,100%{transform:translate(80px,226px)}42%{transform:translate(45px,164px)}58%{transform:translate(300px,166px)}63%{transform:translate(75px,211px)}73%,92%{transform:translate(300px,215px)}}
@keyframes film-check{0%,20%,100%{transform:translate(65px,110px)}45%{transform:translate(290px,150px)}75%,92%{transform:translate(270px,218px)}}
.film-paused svg *{animation-play-state:paused!important}
@media(max-width:1000px){.lesson-films{grid-template-columns:1fr;max-width:580px;margin:auto}.lesson-film h3{font-size:23px}.lesson-film header{font-size:12px}.lesson-cinema{padding:48px 6vw}.cinema-heading{align-items:start}.cinema-bottom{flex-wrap:wrap}}
@media(max-width:600px){.cinema-heading{flex-direction:column;gap:20px}.lesson-films{gap:24px}}
@media(prefers-reduced-motion:reduce){.lesson-film svg *{animation:none!important}.paste-cursor{transform:translate(290px,186px)}.tutor-cursor{transform:translate(300px,58px)}.student-cursor{transform:translate(300px,215px)}.check-cursor{transform:translate(270px,218px)}.film-shortcut{opacity:0}}
.lesson-film .writing-cursor{animation:none}
.lesson-film .written-ink{animation:none}

/* Landing copy, subscription offer and viewport-safe dialogs. */
.landing .studio-copy>.small-label{font-size:clamp(13px,1.1vw,16px);line-height:1.5}
.landing .hero-proof{font-size:clamp(14px,1.2vw,17px);line-height:1.6}
.cinema-heading h2{margin-top:0}.cinema-bottom{justify-content:flex-end}
.landing .studio-plan{max-width:1200px;padding:90px 5vw;gap:60px;background:radial-gradient(ellipse at 85% 30%,#e3ead9,transparent 65%)}
.plan-intro h2 em{font-style:italic;color:#2b5647}.plan-intro p{max-width:390px;font-size:16px}.plan-free{display:block;margin-top:28px;font-size:12px;color:#65765d}
.landing .plan-offer{position:relative;padding:36px;background:#fffef7;border:1px solid #849c7d;border-radius:10px;box-shadow:8px 10px 0 #dce4d2}
.plan-offer .plan-name{font-size:13px;letter-spacing:2px;color:#2b5647}.plan-offer .plan-price{font-size:68px;margin:20px 0 26px;color:#294c3a}.plan-offer ul{padding:0;list-style:none;margin:0}.plan-offer li{position:relative;padding:16px 0 16px 28px;border-top:1px solid #e0e5d8;line-height:1.5}.plan-offer li:before{content:'✓';position:absolute;left:0;color:#527449}.plan-offer li strong{font-size:15px;display:block}.plan-offer li span{display:block;font-size:12px;color:#6b7662;margin-top:4px}.plan-offer .btn{padding:17px 20px;font-size:16px}.plan-offer p{text-align:center}
#modalRoot{position:relative;z-index:1000}.modal-scrim{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;overscroll-behavior:contain;padding:24px 16px;height:100dvh;box-sizing:border-box}.modal-scrim>.modal{flex:0 0 auto;margin:auto 0;max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;min-width:0;box-sizing:border-box}.modal-actions{flex-wrap:wrap}.modal-actions .btn{white-space:normal}.modal .payment-detail{flex-wrap:wrap}
@media(max-width:700px){.landing .studio-plan{grid-template-columns:1fr;padding:55px 6vw;gap:32px}.landing .plan-offer{padding:28px 22px}.modal-scrim{padding:12px}.modal-scrim>.modal{max-height:calc(100dvh - 24px);padding:24px 20px}}