@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f3ed;--ink:#173b35;--muted:#5e6e65;--line:#cbd2c6;--copper:#ac5838;--paper:#fffef9;--font:Manrope,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 'DM Sans',system-ui,sans-serif}a{color:inherit;text-underline-offset:5px}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #bc6946;outline-offset:4px}header.nav{max-width:1480px;margin:auto;padding:28px 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.wordmark{font:800 19px var(--font);letter-spacing:-.6px;text-decoration:none}.wordmark span{color:var(--copper)}nav{display:flex;gap:28px}nav a{text-decoration:none;font-size:13px}main{max-width:1480px;margin:auto;padding:0 6%}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:2.5px;font-weight:700;color:var(--copper)}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:6%;align-items:center;padding:85px 0 90px}.hero h1{font:600 clamp(42px,5.8vw,88px)/1.05 var(--font);letter-spacing:-4px;margin:22px 0 28px;max-width:760px}.hero p{font-size:18px;color:var(--muted);max-width:540px}.hero-art{position:relative;margin:0}.hero-art img{display:block;width:100%;aspect-ratio:1/1.05;object-fit:cover;object-position:65% center;border-radius:3px}.hero-art figcaption{font-size:12px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--muted)}.action{display:inline-flex;align-items:center;justify-content:center;gap:15px;text-decoration:none;padding:13px 20px;background:var(--ink);color:white;font-weight:600;font-size:13px;border:1px solid var(--ink);cursor:pointer}.action.secondary{background:transparent;color:var(--ink)}.action:hover{background:#28594e;color:white}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 0 30px;border-top:1px solid var(--line);padding-top:28px}.section-head h2{font:600 35px/1.2 var(--font);letter-spacing:-1.3px;margin:6px 0}.section-head p{color:var(--muted);max-width:470px;font-size:14px}.feature{display:grid;grid-template-columns:1.3fr 1fr;gap:5%;align-items:center;padding:35px 0 60px}.feature:nth-child(odd){grid-template-columns:1fr 1.3fr}.feature:nth-child(odd) .feature-image{order:2}.feature-image{background:#e6e9df;padding:20px;display:block}.feature-image img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;object-position:top;border:1px solid #d0d6ca}.number{font:500 12px var(--font);color:var(--copper)}h3{font:600 clamp(25px,2.7vw,40px)/1.18 var(--font);letter-spacing:-1.4px;margin:13px 0 18px}.feature p{color:var(--muted)}.pills{display:flex;gap:8px;flex-wrap:wrap}.pills span{font-size:11px;padding:5px 9px;border:1px solid var(--line);border-radius:4px}.index{margin-bottom:90px}.project-row{display:grid;grid-template-columns:50px 1fr 1.25fr 130px;gap:20px;align-items:center;padding:25px 0;border-top:1px solid var(--line);text-decoration:none}.project-row h3{font-size:21px;letter-spacing:-.5px;margin:0}.project-row p{font-size:13px;color:var(--muted);margin:0}.project-row .arrow{text-align:right;font-weight:600;font-size:13px}.project-row:hover h3{color:var(--copper)}.approach{background:var(--ink);color:#f7f3e7;padding:55px;display:grid;grid-template-columns:1fr 2fr;gap:6%;margin-bottom:85px}.approach h2{font:500 35px/1.2 var(--font);margin:10px 0}.approach p{color:#c9d6cd}.principles{display:grid;grid-template-columns:1fr 1fr;gap:30px}.principles strong{font:600 18px var(--font)}footer{max-width:1480px;margin:auto;padding:25px 6% 45px;border-top:1px solid var(--line);font-size:12px;display:flex;justify-content:space-between;gap:20px;color:var(--muted)}.case-hero{padding:75px 0 40px;max-width:1050px}.case-hero h1{font:600 clamp(38px,5vw,72px)/1.1 var(--font);letter-spacing:-3px;margin:20px 0}.lead{font-size:20px;color:var(--muted)}.case-grid{display:grid;grid-template-columns:2fr 1fr;gap:7%;padding-bottom:80px}.case-grid h2{font:600 25px/1.3 var(--font);letter-spacing:-.7px;margin:35px 0 13px}.case-grid p{color:var(--muted)}.case-grid img{width:100%;border:1px solid var(--line)}.side-note{border-top:1px solid var(--line);margin-top:30px;padding-top:20px;font-size:14px}.side-note p{margin:5px 0}.demo-header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 24px;background:#173b35;color:#fff;font-size:12px}.demo-header a{white-space:nowrap}.demo-header strong{font-size:13px}.demo-frame{border:0;width:100%;height:calc(100dvh - 64px);display:block;background:#fff}.demo-header .demo-links{display:flex;gap:20px;align-items:center}.demo-page{overflow:hidden}.app-shell{padding:45px 5%;max-width:1500px;margin:auto}.app-shell h1{font:600 43px/1.1 var(--font);letter-spacing:-1.8px;margin:15px 0}.app-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:30px}.panel{background:var(--paper);border:1px solid var(--line);padding:25px;border-radius:6px}.panel h2{margin-top:0;font:600 23px var(--font)}.control-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.control-row label{font-size:13px}.control-row select,.control-row input{padding:8px;border:1px solid var(--line);background:white;color:var(--ink)}.canvas{background:#eef1e9;border:1px solid var(--line);overflow:hidden;min-height:380px;display:grid;place-items:center}.canvas img{max-width:100%;max-height:510px;object-fit:contain}.canvas svg{width:100%;max-height:510px;min-height:380px}.json-editor{width:100%;height:350px;font:12px/1.5 ui-monospace,monospace;border:1px solid var(--line);padding:15px;resize:vertical;background:#fafbf7;color:#263c30}.result{font-size:13px;padding:12px 15px;background:#edf2e8;border-left:3px solid #49775d;margin:15px 0}.result.error{border-color:#af483c;background:#fff0e8}.note{font-size:13px;color:var(--muted)}.steps{display:flex;gap:7px;margin:30px 0}.steps span{flex:1;height:5px;background:#d8ded2}.steps .done{background:#4a7a63}.stage{min-height:190px;display:flex;flex-direction:column;justify-content:center}.stage h2{font:600 31px/1.2 var(--font);margin:10px 0}.log{font:12px/1.7 ui-monospace,monospace;white-space:pre-wrap;background:#152e29;color:#d3e5da;padding:20px;min-height:240px}.comparison{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}.comparison button{padding:20px;text-align:left;background:white;border:1px solid var(--line);cursor:pointer;color:var(--ink)}.comparison button.active{border:2px solid var(--copper);padding:19px}.comparison b{display:block;font-size:16px;margin-bottom:9px}.comparison span{font-size:13px;color:var(--muted)}@media(max-width:900px){.hero{grid-template-columns:1fr;padding:50px 0}.hero h1{letter-spacing:-2px}.hero-art img{aspect-ratio:1.6}.feature,.feature:nth-child(odd){grid-template-columns:1fr}.feature:nth-child(odd) .feature-image{order:0}.project-row{grid-template-columns:30px 1fr 80px}.project-row p{display:none}.approach{grid-template-columns:1fr;padding:30px}.case-grid,.app-grid{grid-template-columns:1fr}.case-grid{row-gap:32px}.case-hero h1{letter-spacing:-1.6px}.demo-header{padding:0 12px;gap:8px}.demo-header .demo-links{gap:10px}.demo-header strong{font-size:11px}.demo-header .full-label{display:none}.comparison{grid-template-columns:1fr}.principles{grid-template-columns:1fr}header.nav{padding-top:20px}nav{gap:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.install-box{margin:35px 0;padding:26px;background:#fffef9;border:1px solid var(--line);scroll-margin-top:25px}.install-box h2{margin-top:12px}.install-subhead{font-size:24px;letter-spacing:-.7px}.install-box li{margin:14px 0}.install-box code{font-size:.9em;overflow-wrap:anywhere}.table-scroll{overflow-x:auto}.policy-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}.policy-table th,.policy-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}.policy-table th{background:#e9eee4}.policy-table td:first-child{font-weight:700;white-space:nowrap}.install-box summary{cursor:pointer;font-weight:700;padding:12px 0}.related-labs{display:grid;gap:12px}.related-labs a{display:grid;gap:5px;border:1px solid var(--line);padding:18px;text-decoration:none;background:var(--paper)}.related-labs a:hover{border-color:var(--copper)}.related-labs span{font-size:14px;color:var(--muted)}@media(max-width:600px){.install-box{padding:18px}.policy-table th,.policy-table td{padding:9px}.install-box ol{padding-left:22px}}

/* Match each real prototype capture to its frame so text and geometry stay visible. */
.hero-art.prototype-hero img{aspect-ratio:20/21;object-fit:contain;object-position:center}.feature-image.prototype-shot img{aspect-ratio:36/25;height:auto;object-fit:contain;object-position:center}@media(max-width:900px){.hero-art.prototype-hero img{aspect-ratio:36/25}}

/* Screenshot audit: preserve source proportions and offer readable originals. */
.feature-image img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center}
.portfolio-screenshot{margin:30px 0}.portfolio-screenshot img{display:block;width:100%;max-width:100%;height:auto;object-fit:contain;border:1px solid var(--line)}.portfolio-screenshot figcaption{font-size:13px;line-height:1.6;color:var(--muted);padding:12px 0}.screenshot-details{margin:28px 0}.screenshot-details>summary{font-weight:600;cursor:pointer;padding:10px 0}.screenshot-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.screenshot-pair .portfolio-screenshot{margin:15px 0}.screenshot-pair img{max-width:340px;margin:auto}.feature-image-label{display:block;font-size:11px;color:var(--muted);padding-top:10px}@media(max-width:620px){.screenshot-pair{grid-template-columns:1fr}}

.portfolio-screenshot.portrait-screenshot{max-width:360px;margin:24px auto}