@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap");

:root { --ink:#101b36; --navy:#0c1730; --cream:#f8f2e7; --paper:#fffdf8; --blue:#5669e8; --cyan:#54b6d3; --coral:#ef8068; --line:#ded8cb; --android:#1f9d76; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
.site-header { height:78px; display:flex; justify-content:space-between; align-items:center; max-width:1220px; padding:0 28px; margin:auto; }
.wordmark { font-size:22px; font-weight:700; letter-spacing:-1.1px; }
.wordmark span { color:var(--coral); padding:0 2px; }
nav { display:flex; gap:24px; font-family:"DM Mono",monospace; font-size:12px; }
nav a { border-bottom:1px solid transparent; } nav a:hover { border-color:var(--ink); }
.hero { min-height:650px; color:var(--paper); background:var(--navy); position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.hero-copy { max-width:610px; padding:108px 28px 90px max(28px,calc((100vw - 1164px)/2)); z-index:1; }
.eyebrow { font:500 11px/1.3 "DM Mono",monospace; text-transform:uppercase; letter-spacing:1.15px; color:var(--coral); margin:0 0 18px; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces,serif; letter-spacing:-1.7px; line-height:1.03; }
h1 { font-size:clamp(48px,6.4vw,82px); margin-bottom:26px; } h2 { font-size:clamp(38px,4.5vw,60px); margin-bottom:20px; }
.lede { max-width:530px; font-size:20px; color:#d8e0f4; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }.button { display:inline-flex; padding:12px 17px; border-radius:99px; font-weight:600; font-size:14px; transition:transform .18s ease,background .18s ease; }.button:hover { transform:translateY(-2px); }.button-primary { background:var(--coral); color:var(--navy); }.button-quiet { border:1px solid #7180a8; color:var(--paper); }
.chips { list-style:none; padding:0; display:flex; gap:8px; flex-wrap:wrap; margin:44px 0 0; }.chips li { border:1px solid #405176; border-radius:99px; padding:5px 10px; font:11px "DM Mono",monospace; color:#c8d4ed; }
.hero-art { position:absolute; inset:0 0 0 43%; }.hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; opacity:.98; }.hero-note { position:absolute; background:rgba(255,253,248,.91); color:var(--ink); border-radius:99px; padding:7px 11px; font:11px "DM Mono",monospace; box-shadow:0 5px 20px rgba(12,23,48,.17); }.note-one { left:31%; top:28%; }.note-two { left:41%; bottom:22%; }
.section-shell { max-width:1164px; margin:0 auto; padding:112px 28px; }.intro { background:var(--cream); }.intro > h2 { max-width:690px; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:55px; }.feature-grid article { padding:23px 0 5px; border-top:1px solid var(--line); }.feature-number,.demo-copy span { font:11px "DM Mono",monospace; color:#60709a; }.feature-grid h3 { font:600 22px/1.15 Fraunces,serif; margin:18px 0 9px; }.feature-grid p,.showcase-heading>p,.code-section>div>p { color:#56617a; }
.showcase { background:var(--paper); max-width:none; padding-left:max(28px,calc((100vw - 1164px)/2)); padding-right:max(28px,calc((100vw - 1164px)/2)); }.showcase-heading { display:grid; grid-template-columns:1fr 1.4fr; column-gap:80px; align-items:end; }.showcase-heading .eyebrow { grid-column:1/-1; }.showcase-heading h2 { margin:0; }.showcase-heading p { margin:0; max-width:430px; }.demo-grid { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px; margin-top:48px; }.demo-card { background:var(--cream); border-radius:14px; overflow:hidden; }.demo-card img { display:block; width:100%; height:200px; object-fit:cover; }.card-large img { height:275px; }.demo-copy { padding:20px 20px 23px; }.demo-copy h3 { font:600 25px/1.08 Fraunces,serif; margin:10px 0 9px; }.demo-copy p { margin:0; color:#59647b; font-size:14px; }
.code-section { display:grid; grid-template-columns:1fr 1.1fr; gap:70px; align-items:center; }.code-section>div>p { max-width:370px; }.code-section pre { overflow:auto; margin:0; padding:27px; color:#dce8ff; background:#152446; border-radius:13px; font:13px/1.75 "DM Mono",monospace; box-shadow:8px 9px 0 #cfd5e3; }.closing { text-align:center; padding-top:120px; padding-bottom:125px; }.closing h2 { max-width:630px; margin:0 auto 30px; } footer { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:26px max(28px,calc((100vw - 1164px)/2)); border-top:1px solid var(--line); font-size:13px; color:#65708a; }
@media (max-width:760px) { .site-header { padding:0 20px; } nav { gap:13px; }.hero { display:block; min-height:690px; }.hero-copy { padding:74px 24px 330px; }.hero-art { inset:auto 0 0; height:340px; }.hero-note { display:none; }.section-shell { padding:75px 24px; }.feature-grid,.demo-grid,.code-section,.showcase-heading { grid-template-columns:1fr; gap:28px; }.demo-grid { margin-top:32px; }.card-large img,.demo-card img { height:220px; }.showcase { padding-left:24px; padding-right:24px; }.code-section { gap:35px; } footer { padding:24px; flex-direction:column; align-items:flex-start; } }

.demo-hero { padding-bottom:66px; }.demo-hero h1 { max-width:850px; color:var(--navy); }.dark-lede { color:#56617a; max-width:650px; }.use-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding-top:38px; background:var(--paper); max-width:none; padding-left:max(28px,calc((100vw - 1164px)/2)); padding-right:max(28px,calc((100vw - 1164px)/2)); }.use-case { border-top:2px solid var(--ink); padding-top:18px; }.use-case h2,.wasm-copy h2,.demo-links h2 { font-size:34px; }.use-case p { color:#56617a; min-height:130px; }.use-case pre { overflow:auto; margin:22px 0; min-height:146px; padding:16px; border-radius:10px; background:#152446; color:#dce8ff; font:12px/1.65 "DM Mono",monospace; }.use-case>a { font:500 13px "DM Mono",monospace; border-bottom:1px solid var(--ink); }.wasm-demo { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; align-items:center; }.wasm-copy>p:not(.eyebrow) { color:#56617a; max-width:630px; }.wasm-status { font:13px/1.45 "DM Mono",monospace; padding:12px; border-left:3px solid var(--cyan); background:#edf5f5; }.wasm-status.ready { border-color:#55a875; }.wasm-status.error { border-color:var(--coral); }.sample-row { display:flex; flex-wrap:wrap; gap:7px; margin:23px 0; }.digit-button { width:35px; height:35px; border:1px solid var(--line); border-radius:8px; background:var(--paper); color:var(--ink); font:500 14px "DM Mono",monospace; cursor:pointer; }.digit-button:hover,.digit-button.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }.noise-label { display:flex; justify-content:space-between; max-width:370px; font:12px "DM Mono",monospace; }.noise-label output { color:var(--coral); } input[type="range"] { accent-color:var(--coral); width:min(100%,370px); margin:11px 0 23px; }.wasm-note { font-size:12px; }.digit-panel { padding:28px; background:var(--navy); border-radius:18px; box-shadow:10px 10px 0 #d2d8e4; }.pixel-grid { width:min(100%,300px); margin:0 auto; display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }.pixel-grid span { aspect-ratio:1; border-radius:3px; background:#25385f; }.pixel-grid .on { background:var(--coral); box-shadow:0 0 12px rgba(239,128,104,.48); }.prediction { margin:24px auto 0; max-width:300px; padding-top:20px; border-top:1px solid #455574; color:#dce8ff; }.prediction span,.prediction small { display:block; font:11px "DM Mono",monospace; color:#aab8d4; }.prediction strong { display:block; margin:5px 0; font:68px/.9 Fraunces,serif; color:var(--paper); }.demo-links { background:var(--paper); max-width:none; padding-left:max(28px,calc((100vw - 1164px)/2)); padding-right:max(28px,calc((100vw - 1164px)/2)); }.link-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 40px; margin-top:40px; }.link-grid a { display:flex; justify-content:space-between; gap:15px; padding:18px 0; border-top:1px solid var(--line); font-size:17px; }.link-grid a span { color:var(--coral); } @media (max-width:760px) { .use-cases,.wasm-demo,.link-grid { grid-template-columns:1fr; }.use-cases { padding:60px 24px; }.use-case p { min-height:0; }.wasm-demo { gap:40px; }.demo-links { padding-left:24px; padding-right:24px; } }

.draw-actions { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }.dark-button { border-color:#687796; color:var(--ink); }.digit-panel canvas { display:block; width:min(100%,280px); margin:0 auto; border:1px solid #435373; border-radius:8px; background:#0c1730; touch-action:none; cursor:crosshair; }.prediction { max-width:280px; }

.gif-gallery { background:var(--paper); max-width:none; padding-left:max(28px,calc((100vw - 1164px)/2)); padding-right:max(28px,calc((100vw - 1164px)/2)); }.gif-gallery h2 { max-width:720px; }.gallery-lede { max-width:620px; color:#56617a; }.gif-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:42px; }.gif-grid figure { overflow:hidden; margin:0; border:1px solid var(--line); border-radius:10px; background:var(--cream); }.gif-grid img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }.gif-grid figcaption { padding:11px 12px; font:500 13px "DM Mono",monospace; }.gif-grid figure:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(12,23,48,.12); } @media (max-width:900px) { .gif-grid { grid-template-columns:repeat(2,1fr); } } @media (max-width:500px) { .gif-grid { grid-template-columns:1fr; } .gif-gallery { padding-left:24px; padding-right:24px; } }

.experiment-lab { background:#eaf2f4; max-width:none; padding-left:max(28px,calc((100vw - 1164px)/2)); padding-right:max(28px,calc((100vw - 1164px)/2)); }.experiment-lab h2 { max-width:740px; }.experiment-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:42px; }.experiment-card { padding:25px; border-radius:14px; background:var(--paper); border:1px solid #d4e0e2; }.experiment-card h3 { margin:8px 0; font:600 26px/1.1 Fraunces,serif; }.experiment-card p { min-height:48px; margin:0 0 18px; color:#56617a; font-size:14px; }.experiment-number { font:11px "DM Mono",monospace; color:var(--coral); }.experiment-card label { display:block; margin:13px 0; color:#354564; font:12px "DM Mono",monospace; }.experiment-card label output { float:right; color:var(--coral); }.experiment-card input[type="range"] { display:block; margin:7px 0 0; width:100%; }.experiment-result { display:block; margin-top:20px; padding-top:15px; border-top:1px solid #d4e0e2; font:600 17px/1.25 Fraunces,serif; color:var(--ink); }.experiment-wide { grid-column:1/-1; }.segment-layout { display:grid; grid-template-columns:minmax(0,1.4fr) 1fr; gap:25px; align-items:center; }.segment-layout canvas { width:100%; border-radius:9px; touch-action:none; cursor:crosshair; }.segment-layout small { display:block; margin-top:16px; color:#687493; font-size:12px; }.segment-key { min-height:0!important; font:12px "DM Mono",monospace; }.segment-key i { display:inline-block; width:9px; height:9px; margin:0 5px 0 10px; border-radius:50%; background:var(--blue); }.segment-key i:nth-of-type(2) { background:var(--cyan); }.segment-key i:nth-of-type(3) { background:var(--coral); }.gif-grid figcaption strong,.gif-grid figcaption span { display:block; }.gif-grid figcaption span { margin-top:3px; color:#687493; font-size:11px; } @media (max-width:760px) { .experiment-grid,.segment-layout { grid-template-columns:1fr; }.experiment-wide { grid-column:auto; }.experiment-lab { padding-left:24px; padding-right:24px; } }
.experiment-jump { display:inline-block; margin-top:4px; padding-bottom:2px; border-bottom:1px solid var(--ink); font:13px "DM Mono",monospace; }
.recorded-gallery { background:#fffdf8; }.recorded-gallery h2 { max-width:720px; }.recorded-gallery > p:not(.eyebrow) { max-width:600px; color:#56617a; }.recorded-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; }.recorded-grid figure { margin:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:var(--paper); }.recorded-grid img { display:block; width:100%; }.recorded-grid figcaption { padding:14px; color:#56617a; font-size:13px; } @media (max-width:760px) { .recorded-grid { grid-template-columns:1fr; } }

/* The demos page is deliberately a working notebook, not a marketing gallery. */
.demo-hero { padding-top:72px; padding-bottom:52px; border-bottom:1px solid var(--line); }.demo-hero h1 { max-width:760px; font-size:clamp(50px,7vw,88px); }.demo-hero::after { content:"10 interactive calculations · Flow → C → WebAssembly"; display:inline-block; margin-top:18px; padding:8px 11px; border:1px solid var(--line); border-radius:99px; color:#52617f; font:11px "DM Mono",monospace; }.experiment-lab { padding-top:72px; padding-bottom:92px; }.experiment-card { transition:transform .16s ease,box-shadow .16s ease; }.experiment-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(18,41,60,.10); }.experiment-card h3 { letter-spacing:-.7px; }.experiment-result { min-height:43px; }.use-cases { background:var(--cream); }.use-case { border-top-color:#6174a8; }.wasm-demo { border-top:1px solid var(--line); }.demo-links { border-top:1px solid var(--line); }

/* Documentation-led layout: calm surfaces, strong hierarchy, no decorative media. */
.site-header { max-width:none; border-bottom:1px solid var(--line); background:#fffdf8; }.site-header > *:first-child { margin-left:max(0px,calc((100vw - 1164px)/2)); }.site-header nav { margin-right:max(0px,calc((100vw - 1164px)/2)); }.hero { min-height:520px; display:block; background:#fffdf8; color:var(--ink); }.hero-copy { max-width:960px; padding:100px 28px 92px max(28px,calc((100vw - 1164px)/2)); }.hero-copy .lede { color:#56617a; font-size:21px; }.hero-art { display:none; }.hero .button-quiet { color:var(--ink); border-color:#9da8ba; }.intro { border-top:1px solid var(--line); }.showcase { background:#f4f7f8; }.demo-grid { grid-template-columns:repeat(3,1fr); }.demo-card,.text-card { min-height:250px; border:1px solid #dbe2e5; background:#fffdf8; }.text-card .demo-copy { display:flex; height:100%; flex-direction:column; align-items:flex-start; justify-content:flex-end; }.text-card a { margin-top:17px; border-bottom:1px solid currentColor; font:12px "DM Mono",monospace; }.text-card:first-child { background:#152446; }.text-card:first-child .demo-copy,.text-card:first-child .demo-copy p { color:#dce8ff; }.text-card:first-child .demo-copy h3 { color:#fffdf8; } @media (max-width:760px) { .site-header > *:first-child,.site-header nav { margin:0; }.hero-copy { padding:72px 24px; }.demo-grid { grid-template-columns:1fr; } }

.site-header { position:sticky; top:0; z-index:20; }.site-header nav a { padding:28px 0 24px; }.site-header nav a:focus-visible,.button:focus-visible,.experiment-jump:focus-visible,.text-card a:focus-visible { outline:3px solid var(--coral); outline-offset:4px; border-radius:3px; }.demo-hero { background:linear-gradient(180deg,#fffdf8 0%,#f8f2e7 100%); }.demo-hero h1 { letter-spacing:-2.4px; }.experiment-lab > h2 { max-width:860px; }.experiment-grid { gap:22px; }.experiment-card { padding:28px; }.experiment-card p { font-size:15px; }.experiment-card label { margin:17px 0; }.experiment-card input[type="range"] { height:22px; }.recorded-gallery { border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.recorded-gallery figure { box-shadow:0 8px 22px rgba(12,23,48,.07); }.recorded-gallery figcaption { min-height:58px; }.use-cases { gap:34px; }.use-case h2 { font-size:clamp(30px,3vw,42px); }.link-grid a:hover,.text-card a:hover { color:var(--blue); }

.visual-lab { display:none; }
.experiment-lab { display:none; }