@import url('tokens.css');
@font-face{font-family:Figtree;src:url(fonts/Figtree.ttf);font-display:swap}@font-face{font-family:'Bricolage Grotesque';src:url(fonts/BricolageGrotesque.ttf);font-display:swap}@font-face{font-family:'JetBrains Mono';src:url(fonts/JetBrainsMono.ttf);font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 var(--font-ui)}a{color:var(--syn-cmd);text-underline-offset:4px}button,a,input,textarea{touch-action:manipulation}button,textarea{font:inherit}button,a{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}h1,h2,h3{font-family:var(--font-heading);line-height:1.08;font-weight:750}h1{font-size:clamp(52px,7.5vw,96px);letter-spacing:-.055em;margin:22px 0}h2{font-size:clamp(36px,4.5vw,58px);letter-spacing:-.035em;margin:14px 0 26px}h3{font-size:27px;margin:10px 0}p{margin:14px 0}.wrap{max-width:1220px;margin:auto;padding:0 32px}.nav{display:flex;align-items:center;gap:28px;padding-top:22px;padding-bottom:22px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:8px;font:800 25px var(--font-heading);color:var(--text);text-decoration:none;margin-right:auto}.brand img{width:40px;height:40px}.nav>a:not(.brand){font-size:15px;text-decoration:none;color:var(--text)}.eyebrow{font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding-top:76px;padding-bottom:90px}.hero h1 em{font-style:normal;color:var(--syn-cmd)}.lede{font-size:21px;color:var(--muted);max-width:640px}.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;background:var(--text);color:var(--bg);border:1px solid var(--text);border-radius:var(--radius-m);padding:13px 22px;text-decoration:none;font-weight:650;font-size:16px}.btn.secondary{background:transparent;color:var(--text);border-color:var(--border)}.btn:hover{background:var(--syn-cmd);border-color:var(--syn-cmd);color:white}.small{font-size:14px;color:var(--muted)}.demo{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-l);overflow:hidden;box-shadow:0 20px 60px #1414130c;transform:rotate(2deg)}.demo-top{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;gap:7px;align-items:center;font:12px var(--font-code);color:var(--muted)}.dot{width:7px;height:7px;background:var(--border);border-radius:50%}.demo-top span:last-child{margin-left:10px}.demo-art{background:var(--surface);display:grid;place-items:center;padding:26px;aspect-ratio:1.5}.demo-art svg{width:100%;height:210px}.demo pre{margin:0;border-top:1px solid var(--border);background:var(--chrome);padding:24px 30px;font:14px/1.7 var(--font-code)}.k-cmd{color:var(--syn-cmd)}.k-str{color:var(--syn-str)}.k-num{color:var(--syn-num)}.k-word{color:var(--syn-word)}.k-com{color:var(--muted)}.promise{display:flex;gap:30px;justify-content:space-between;border-block:1px solid var(--border);padding:22px 0;font-size:14px}.band{padding-top:86px;padding-bottom:86px}.section-head{display:flex;align-items:end;gap:30px;justify-content:space-between;margin-bottom:24px}.section-head p{max-width:370px;color:var(--muted)}.section-head h2{margin-bottom:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px}.feature{border-top:2px solid var(--border);padding-top:24px}.feature .number{font:13px var(--font-code);color:var(--syn-cmd)}.feature p{color:var(--muted)}.classroom{display:grid;grid-template-columns:1fr 1fr;gap:60px;background:var(--chrome);border-radius:24px;padding:48px}.assignment{border:1px solid var(--border);border-radius:var(--radius-l);background:var(--surface);padding:30px;align-self:center}.assignment code{font:14px/1.8 var(--font-code);white-space:pre-line}.check{color:var(--success);border-top:1px solid var(--border);padding-top:16px}.play{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:var(--radius-l);overflow:hidden;background:var(--surface)}.toolbar{padding:12px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:14px}.toolbar .btn{padding:6px 15px}.editor{position:relative;height:370px}.editor textarea,.editor pre{position:absolute;inset:0;margin:0;padding:22px 18px 22px 54px;font:14px/1.8 var(--font-code);white-space:pre;tab-size:2;border:0;resize:none;overflow:auto;background:transparent}.editor textarea{color:transparent;caret-color:var(--text);width:100%;height:100%;outline:none}.editor textarea:focus{box-shadow:inset 0 0 0 2px var(--focus)}.editor pre{pointer-events:none}.ln{display:inline-block;width:30px;margin-left:-36px;margin-right:6px;text-align:right;color:var(--faint)}.errline{background:var(--danger-soft)}.preview{border-left:1px solid var(--border)}.stagebox{aspect-ratio:4/3;display:grid;place-items:center}canvas{width:100%;height:auto;display:block}.console{padding:15px 20px;min-height:60px;border-top:1px solid var(--border);font:13px/1.5 var(--font-code);overflow-wrap:anywhere}.dim{color:var(--muted)}.err{color:var(--danger)}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.chip{background:transparent;border:1px solid var(--border);border-radius:50px;padding:7px 15px;color:var(--text);font-size:14px}.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent)}.share-row{display:flex;gap:12px;align-items:center;margin-top:16px;flex-wrap:wrap}.share-row input{flex:1;min-width:220px;padding:10px;font:12px var(--font-code);border:1px solid var(--border);background:var(--surface);border-radius:8px}.download-grid,.projects-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.download,.project{padding:28px;border:1px solid var(--border);border-radius:var(--radius-l);background:var(--surface)}.download.recommended{border:2px solid var(--syn-cmd)}.download .btn{margin:12px 0}.download code{display:block;font:11px/1.5 var(--font-code);overflow-wrap:anywhere}.project pre{white-space:pre-wrap;font:12px/1.5 var(--font-code);background:var(--chrome);padding:15px;max-height:280px;overflow:auto}.footer{margin-top:50px;padding-top:30px;padding-bottom:40px;border-top:1px solid var(--border);display:flex;gap:20px;flex-wrap:wrap;align-items:center}.footer span{margin-right:auto}.footer a{font-size:14px}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}[hidden]{display:none!important}
@media(max-width:850px){.hero{gap:30px;padding-top:45px}.nav{gap:17px}.feature-grid{gap:22px}.classroom{gap:30px;padding:30px}.download-grid,.projects-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.wrap{padding-left:20px;padding-right:20px}.nav{flex-wrap:wrap;gap:14px}.nav .brand{flex-basis:100%}.hero{grid-template-columns:1fr;padding-top:32px;padding-bottom:45px;gap:38px}.hero h1{font-size:60px}.demo{transform:none}.promise{flex-wrap:wrap;gap:12px 24px}.band{padding-top:52px;padding-bottom:40px}.section-head{display:block}.feature-grid,.classroom,.play,.download-grid,.projects-grid{grid-template-columns:1fr}.classroom{padding:25px}.preview{border-left:0;border-top:1px solid var(--border)}.editor{height:310px}.section-head p{max-width:none}.footer{gap:14px}.footer span{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.project h2,.download h2{font-size:32px;letter-spacing:-.03em}.project .btn{margin-top:10px}

.release{max-width:820px;border-top:1px solid var(--border);padding:30px 0;margin-top:30px}.release h2{font-size:38px}.release li{margin:10px 0}