@font-face{font-family:Barlow;src:url('assets/barlow-condensed-bold.ttf');font-weight:700;font-display:swap}
:root{font-family:Arial,Helvetica,sans-serif;color:#172820;background:#f4f3eb;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{--bg:#f4f3eb;--ink:#172820;--accent:#dcff77;--surface:#e6e8dc;--line:#b9c0b3;margin:0;background:var(--bg);color:var(--ink)}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit;color:inherit}a{color:inherit;text-underline-offset:5px}button:focus-visible,a:focus-visible{outline:3px solid #bf542b;outline-offset:5px}button{border:0}h1,h2,h3,p{margin:0}.mono{font:11px/1.5 'Courier New',monospace;letter-spacing:.04em}.skip{position:fixed;top:-80px;background:var(--accent);padding:15px;z-index:20}.skip:focus{top:0}.concept-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:10px 3.5%;background:#172820;color:#f4f3eb;font:10px 'Courier New',monospace}.concept-bar b{font-weight:400;margin-left:16px;color:#dcff77}.concept-bar>div{display:flex;gap:5px}.concept-bar button{padding:8px 12px;background:transparent;color:#f4f3eb;font:11px 'Courier New',monospace;border-radius:3px}.concept-bar button[aria-pressed=true]{color:#172820;background:#dcff77}header{display:flex;align-items:center;justify-content:space-between;margin:0 4%;padding:22px 0;border-bottom:1px solid var(--ink);gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:11px;font-weight:700;line-height:1.2;letter-spacing:.03em}.brand-symbol{font-size:37px;font-weight:700;letter-spacing:-4px}.brand-symbol span{font-size:25px;display:inline-block;margin-left:4px}nav{display:flex;gap:32px;font-size:12px}nav a{text-decoration:none}.nav-cta{font-size:11px;text-decoration:none;border-bottom:1px solid;padding-bottom:5px}.hero{padding:27px 4% 0}.hero-top,.hero-footer{display:flex;justify-content:space-between;gap:20px}.hero-layout{display:grid;grid-template-columns:1.12fr 1fr;gap:2%;padding:45px 0 42px}.hero-copy h1{font:700 clamp(75px,9.5vw,160px)/.86 Barlow,'Arial Narrow',Impact,sans-serif;letter-spacing:-.025em}.hero-copy h1>span{display:block;color:var(--ink);white-space:nowrap;font-size:.72em;line-height:1.1;margin-top:.1em}.hero-bottom{display:flex;align-items:center;justify-content:space-between;margin:29px 20px 0 0}.hero-bottom p{font:18px/1.4 Georgia,serif}.round-link{height:58px;width:58px;border:1px solid;border-radius:50%;display:grid;place-items:center;text-decoration:none;font-size:28px}.hero-art{background:var(--accent);position:relative;min-height:435px;overflow:hidden;isolation:isolate;border-radius:3px;color:#172820}.giant-py{position:absolute;top:20px;left:12%;font:bold 190px/1 Arial,sans-serif;letter-spacing:-22px;transform:rotate(-12deg)}.giant-py>span{font-size:120px;display:inline-block;vertical-align:top;margin:1px 0 0 10px}.orbit{border:1px solid #17282033;width:510px;height:510px;border-radius:50%;position:absolute;left:-25px;top:-160px;transform:rotate(-25deg) scaleX(.65);z-index:-1}.orbit-two{transform:rotate(50deg) scaleX(.65)}.art-caption{position:absolute;left:20px;top:18px;font-size:9px}.art-cross{position:absolute;font:24px monospace}.cross-one{right:16px;top:12px}.cross-two{bottom:17px;left:20px}.floating-code{position:absolute;bottom:53px;left:10%;width:84%;background:#172820;color:#f4f3eb;padding:18px 20px;transform:rotate(-4deg);box-shadow:8px 12px 0 #17282026;border:1px solid #50604c;border-radius:5px}.code-label{font-size:9px;border-bottom:1px solid #ffffff25;padding-bottom:13px;margin-bottom:17px;display:flex;align-items:center;gap:6px}.dot{width:6px;height:6px;border-radius:50%;background:#dcff77}.floating-code>code{font:13px/1.7 Consolas,'Courier New',monospace}.purple{color:#d3b9fb}.yellow{color:#f6d47b}.mint{color:#b6e2b0}.error{text-decoration:underline wavy #f99184;text-underline-offset:5px}.diagnostic{display:flex;gap:10px;font-size:11px;padding-top:13px;margin-top:12px;border-top:1px solid #ffffff25}.diagnostic>span{color:#f5be80;font-size:18px}.diagnostic small{display:block;margin-top:6px;color:#aab9ab}.art-foot{position:absolute;bottom:18px;right:17px;font-size:8px}.hero-footer{padding:15px 0;border-top:1px solid var(--ink)}.hero-footer a{text-decoration:none}.features,.notes{padding:85px 4%}.section-heading{display:grid;grid-template-columns:1fr 2fr 1fr;gap:25px;margin-bottom:45px;align-items:start}.section-heading h2,.play-heading h2{font:normal 47px/1.03 Georgia,serif;letter-spacing:-2px}.section-heading>p,.play-heading>p{font-size:14px;line-height:1.6;align-self:end}.feature-list{border-top:1px solid var(--ink)}.feature-list button{display:grid;grid-template-columns:1fr 2fr 1fr 32px;align-items:center;gap:20px;width:100%;padding:23px 0;background:transparent;border-bottom:1px solid var(--line);text-align:left}.feature-list button:hover{background:var(--accent);padding-left:12px;padding-right:12px}.feature-list h3{font-size:20px;font-weight:400;letter-spacing:-.5px}.feature-list button>span:nth-last-child(2){font:11px 'Courier New',monospace}.arrow{font-size:23px}.playground{padding:65px 4% 75px;background:var(--surface)}.play-heading{display:flex;align-items:end;justify-content:space-between;gap:25px}.play-heading .mono{margin-bottom:22px}.play-heading em{font-weight:normal}.demo-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:35px 0 20px}.demo-tabs button{background:transparent;padding:10px 16px;border:1px solid var(--line);border-radius:25px;font-size:12px}.demo-tabs button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.demo-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:6%;align-items:center}.editor{background:#15231d;color:#e9eee6;min-width:0;border-radius:5px;overflow:hidden}.editor-top,.editor-bottom{display:flex;justify-content:space-between;padding:15px 22px;color:#aab9ab;font-size:10px;border-bottom:1px solid #ffffff20}.editor-top span:first-child{color:#dcff77}.editor pre{padding:28px 22px 10px;margin:0;min-height:180px;overflow:auto;font:14px/1.8 Consolas,'Courier New',monospace}.editor-bottom{border-top:1px solid #ffffff20;border-bottom:0;font-size:9px}.demo-result{min-height:98px;margin:0 22px 20px;padding:14px;background:#22392c;color:#dcff77;font:12px/1.6 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.demo-explainer{padding:10px 0}.demo-explainer h3{font:normal 30px/1.1 Georgia,serif;margin:20px 0 15px;letter-spacing:-.6px}.demo-explainer>p{font-size:14px;line-height:1.6}.action{display:flex;justify-content:space-between;gap:24px;background:var(--ink);color:var(--bg);padding:14px 18px;margin:24px 0 12px;min-width:205px;font-size:12px}.demo-explainer .demo-step{font:10px 'Courier New',monospace;min-height:15px}.demo-explainer .demo-disclaimer{font-size:10px;margin-top:22px;opacity:.75}.note-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.note-grid button{text-align:left;background:transparent;border-top:1px solid var(--ink);padding:20px 0}.note-grid h3{font:normal 30px/1.15 Georgia,serif;letter-spacing:-1px;margin:26px 0}.note-grid button>span:last-child{font-size:11px}.note-grid button:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}.closing{padding:55px 4% 60px;background:var(--accent);color:#172820}.closing h2{font:700 clamp(65px,9vw,145px)/.9 Barlow,Impact,sans-serif;letter-spacing:-.02em;margin:30px 0}.closing h2 em{font-style:normal;margin-left:18%}.closing>a{font:11px 'Courier New',monospace}footer{padding:28px 4%;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand-footer{font-size:13px;font-weight:700}footer p{font:10px/1.7 'Courier New',monospace}footer>a{font:10px 'Courier New',monospace}dialog{background:var(--bg);color:var(--ink);border:0;width:min(610px,90vw);padding:30px}dialog::backdrop{background:#10251bcc;backdrop-filter:blur(4px)}.dialog-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px}.dialog-header button{background:transparent;font-size:30px}dialog h2{font:40px/1.1 Georgia,serif;margin:30px 0}#note-body p{font-size:16px;line-height:1.6;margin:17px 0}dialog>a{display:inline-block;margin-top:20px;font-size:12px}body[data-theme=studio]{--bg:#111916;--ink:#e1ece4;--surface:#1c2a22;--line:#45564a;--accent:#b6b2ff}body[data-theme=studio] .hero-copy h1{color:#b6b2ff}body[data-theme=studio] .hero-art{background:#b6b2ff}body[data-theme=studio] .hero-copy h1>span{color:#e1ece4}body[data-theme=studio] .feature-list button:hover{background:#35413c}body[data-theme=studio] .hero-art{border-radius:50% 50% 4px 4px}body[data-theme=paper]{--bg:#fffaf2;--ink:#29251e;--surface:#efe8da;--accent:#efb087;--line:#c7bcac}body[data-theme=paper] .hero-copy h1{font-family:Georgia,serif;font-size:clamp(62px,7.6vw,120px);line-height:.98;letter-spacing:-.06em}body[data-theme=paper] .hero-copy h1>span{font-style:italic;font-size:.58em;letter-spacing:-.05em}body[data-theme=paper] .hero-art{background:#efe8da;border-radius:200px 200px 0 0}body[data-theme=paper] .floating-code{transform:rotate(3deg)}
@media(min-width:1600px){main,header,footer{max-width:1600px;margin-inline:auto}.hero-layout{gap:5%}.hero-art{min-height:500px}}
@media(max-width:900px){.concept-note{display:none}.concept-bar{padding-inline:4%}.hero-copy h1{font-size:11vw}.hero-art{min-height:360px}.floating-code{left:6%;width:90%;padding:15px}.floating-code>code{font-size:11px}.giant-py{font-size:155px}.giant-py>span{font-size:100px}.hero-bottom p{font-size:15px}.section-heading{grid-template-columns:1fr 2fr}.section-heading>p{grid-column:2}.feature-list button{grid-template-columns:45px 1fr 130px 25px}.demo-grid{gap:4%;grid-template-columns:1.3fr 1fr}.demo-explainer h3{font-size:27px}footer{flex-wrap:wrap}nav{gap:20px}}
@media(max-width:600px){.concept-bar{display:block;padding:9px 4%}.concept-bar>span{display:block;margin-bottom:9px;font-size:9px}.concept-bar>div{justify-content:space-between}.concept-bar button{font-size:10px;padding:8px}header{padding:18px 0}.brand{font-size:9px}.brand-symbol{font-size:32px}nav{gap:12px;font-size:10px}.nav-cta{display:none}.hero{padding-top:19px}.hero-top{font-size:8px;line-height:1.7}.hero-top>span{max-width:48%}.hero-top>span:last-child{text-align:right}.hero-layout{grid-template-columns:1fr;padding:30px 0 24px;gap:28px}.hero-copy h1{font-size:24vw}.hero-copy h1>span{font-size:.72em}.hero-bottom{margin:20px 0 0}.hero-bottom p{font-size:17px}.round-link{width:48px;height:48px}.hero-art{min-height:390px}.giant-py{font-size:185px;left:15%}.giant-py>span{font-size:110px}.floating-code{bottom:48px;left:10%;width:82%;padding:17px}.floating-code>code{font-size:12px}.hero-footer{font-size:8px}.hero-footer span{max-width:45%}.hero-footer a{text-align:right;max-width:45%}.features,.notes{padding:55px 5%}.section-heading{display:block;margin-bottom:27px}.section-heading>.mono{display:block;margin-bottom:22px}.section-heading h2,.play-heading h2{font-size:40px}.section-heading>p{margin-top:20px}.feature-list button{grid-template-columns:25px 1fr 20px;gap:10px;padding:20px 0}.feature-list h3{font-size:17px}.feature-list button>span:nth-last-child(2){grid-column:2;grid-row:2;font-size:10px}.feature-list .arrow{grid-column:3;grid-row:1 / 3}.playground{padding:45px 5%}.play-heading{display:block}.play-heading>p{margin-top:23px}.demo-tabs{gap:6px;margin-top:25px}.demo-tabs button{padding:9px 13px;font-size:11px}.demo-grid{grid-template-columns:1fr;gap:25px}.editor pre{font-size:12px;padding:20px 15px;min-height:155px}.editor-top,.editor-bottom{padding:12px 15px}.demo-result{margin-inline:15px;font-size:11px}.demo-explainer{padding-bottom:0}.demo-explainer h3{font-size:30px;margin-top:12px}.demo-explainer .demo-disclaimer{margin-top:15px}.note-grid{grid-template-columns:1fr;gap:12px}.note-grid h3{margin:20px 0;font-size:30px}.note-grid button{padding:20px 0}.closing{padding:40px 5%}.closing h2{font-size:15.5vw}.closing h2 em{margin-left:10%}footer{padding:30px 5%;display:block}footer p{margin:20px 0;font-size:9px}body[data-theme=paper] .hero-copy h1{font-size:21vw}body[data-theme=paper] .hero-copy h1>span{font-size:.63em}dialog{padding:24px}dialog h2{font-size:32px}}
@media(max-width:600px){body[data-theme=paper] .hero-copy h1>span{font-size:.50em}.concept-bar>.concept-note{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
