:root {
  --ink: #18271f;
  --paper: #f4f0e7;
  --acid: #f6e56a;
  --coral: #f36d4d;
  --lilac: #c7b9ee;
  --line: rgba(24, 39, 31, 0.22);
}

/* Origin, founder, ownership and answer-engine content */
.origin{padding:clamp(80px,10vw,150px) clamp(20px,7vw,110px);background:#e9e3d7;border-top:1px solid var(--ink)}.origin-heading{display:grid;grid-template-columns:.7fr 2fr;gap:6vw;align-items:start}.origin-heading h2{margin:0;font-size:clamp(52px,7vw,100px);line-height:.9;letter-spacing:-.065em}.origin-heading h2 em{font:500 italic 1em "Newsreader",serif;color:var(--coral)}.origin-story{margin:clamp(70px,9vw,130px) 0 0 24%}.origin-lead{max-width:850px;margin:0 0 55px;font:500 clamp(30px,4vw,55px)/1.08 "Newsreader",serif}.origin-columns{display:grid;grid-template-columns:1fr 1fr;gap:8vw}.origin-columns p{font-size:16px;line-height:1.8}.origin blockquote{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:70px 0;padding:28px 0;border-block:1px solid var(--ink)}.origin blockquote span{font:11px "DM Mono",monospace;text-transform:uppercase}.origin blockquote strong{font-size:clamp(45px,6vw,85px);line-height:.85;letter-spacing:-.06em}.origin-close{max-width:850px;margin:75px 0 0;font:500 italic clamp(34px,5vw,68px)/1 "Newsreader",serif;color:#17654c}
.founder{display:grid;grid-template-columns:minmax(260px,.72fr) 1.28fr;gap:clamp(35px,7vw,100px);align-items:center;margin-top:clamp(90px,12vw,180px);padding:clamp(26px,4vw,55px);border:1px solid var(--ink);background:var(--acid);box-shadow:12px 12px 0 var(--coral)}.founder figure{position:relative;margin:0;min-height:520px;overflow:hidden;background:var(--ink)}.founder figure:after{content:"FOUNDER / 01";position:absolute;right:0;bottom:0;padding:9px 12px;background:var(--ink);color:var(--paper);font:9px "DM Mono",monospace}.founder img{width:100%;height:100%;min-height:520px;object-fit:cover;object-position:center top;filter:saturate(.85) contrast(1.03)}.founder-copy{max-width:690px}.founder-copy h3{margin:24px 0 30px;font-size:clamp(48px,6vw,84px);line-height:.9;letter-spacing:-.06em}.founder-copy>p:not(.section-index){font-size:16px;line-height:1.72}.founder-copy a{text-decoration:underline;text-underline-offset:3px}.founder-link{display:inline-block;margin-top:24px;font:11px "DM Mono",monospace;text-transform:uppercase}.ownership{display:grid;grid-template-columns:repeat(4,1fr);margin-top:70px;border-top:1px solid;border-left:1px solid}.ownership>*{padding:17px;border-right:1px solid;border-bottom:1px solid;font:10px "DM Mono",monospace;text-transform:uppercase}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:8vw;padding:clamp(80px,10vw,150px) clamp(20px,7vw,110px);background:#efc6e5;border-top:1px solid var(--ink)}.faq h2{margin:28px 0 0;font-size:clamp(52px,7vw,95px);line-height:.9;letter-spacing:-.065em}.faq h2 em{font:500 italic 1em "Newsreader",serif;color:#17654c}.faq-list{border-top:1px solid}.faq details{border-bottom:1px solid}.faq summary{position:relative;padding:25px 45px 25px 0;font-size:18px;font-weight:700;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;right:5px;font:26px "Newsreader",serif}.faq details[open] summary:after{content:"−"}.faq details p{max-width:700px;margin:0;padding:0 45px 28px 0;font-size:15px;line-height:1.7}.faq details a{text-decoration:underline}.faq details code{color:inherit}
@media(max-width:980px){.origin-heading{grid-template-columns:1fr}.origin-story{margin-left:0}.founder{grid-template-columns:1fr}.founder figure{min-height:620px}.ownership{grid-template-columns:1fr 1fr}.faq{grid-template-columns:1fr}}
@media(max-width:600px){.origin-columns{grid-template-columns:1fr;gap:12px}.origin blockquote{align-items:flex-start;flex-direction:column}.founder{padding:18px}.founder figure,.founder img{min-height:430px}.ownership{grid-template-columns:1fr}}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--coral); outline-offset: 4px; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; padding: 10px 14px; background: var(--paper); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 24px clamp(20px, 4vw, 64px); border-bottom: 1px solid rgba(244,240,231,.25); color: var(--paper); }
.wordmark { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; letter-spacing: -0.04em; }
.wordmark-mark { width: 22px; height: 22px; border-radius: 4px; }
nav { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.nav-cta { border: 1px solid currentColor; padding: 10px 14px; }

.hero { min-height: 92vh; padding: 140px clamp(20px, 6vw, 96px) 54px; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.eyebrow { width: 100%; display: flex; justify-content: space-between; font: 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; opacity: .72; }
.hero h1 { margin: auto 0 24px; max-width: 1050px; font-size: clamp(64px, 10vw, 150px); line-height: .83; letter-spacing: -.075em; font-weight: 600; }
.hero h1 em, .manifesto h2 em { font-family: "Newsreader", serif; font-weight: 500; }
.hero h1 em { color: var(--acid); }
.hero-copy { max-width: 680px; margin: 0 auto 32px; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: rgba(244,240,231,.78); }
code { font-family: "DM Mono", monospace; color: var(--acid); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.release-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font: 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,240,231,.68); }
.release-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 4px rgba(246,229,106,.14); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 21px; border: 1px solid; font-size: 13px; font-weight: 700; transition: transform .2s, box-shadow .2s; }
.button:hover { transform: translate(-3px,-3px); box-shadow: 5px 5px 0 var(--coral); }
.button-primary { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.button-secondary { border-color: rgba(244,240,231,.4); }
.studio-signature { margin-top: auto; padding-top: 42px; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.studio-signature img { width: 30px; height: 30px; border-radius: 3px; }
.studio-signature small { font: 10px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .09em; opacity: .65; }

.translation { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(16px, 3vw, 48px); align-items: center; padding: clamp(70px, 10vw, 150px) clamp(20px, 8vw, 140px); background: var(--acid); }
.reference-card,.system-card { padding: 18px; border: 1px solid var(--ink); background: var(--paper); box-shadow: 9px 9px 0 var(--ink); }
.system-card { transform: rotate(1.5deg); background: var(--lilac); }
.card-label,.section-index { font: 11px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .08em; }
.reference-card > p,.system-card > p { margin: 18px 0 0; font-weight: 700; }
.graft-mark { font: 60px "Newsreader", serif; }
.mini-site { min-height: 330px; padding: 20px; margin-top: 16px; background: #f3c9c1; overflow: hidden; }
.mini-nav { height: 16px; background: var(--coral); margin-bottom: 28px; }
.mini-copy { width: 60%; height: 62px; margin: auto; background: var(--ink); clip-path: polygon(0 0,100% 0,85% 22%,100% 48%,82% 70%,100% 100%,0 100%,13% 72%,0 52%,14% 25%); }
.mini-grid { display: grid; grid-template-columns: 1.2fr .8fr 1fr; gap: 10px; margin-top: 30px; }
.mini-grid i { height: 100px; background: var(--acid); }
.mini-grid i:nth-child(2) { background: var(--ink); transform: rotate(-3deg); }
.mini-grid i:nth-child(3) { background: var(--coral); transform: rotate(2deg); }
.mini-block { height: 54px; margin-top: 20px; background: var(--ink); }
pre { min-height: 330px; margin: 16px 0 0; padding: 28px; background: var(--ink); color: var(--paper); font: 14px/1.9 "DM Mono", monospace; white-space: pre-wrap; }
pre span { color: var(--acid); }

.manifesto,.steps,.output { padding: clamp(80px, 10vw, 150px) clamp(20px, 7vw, 110px); }
.manifesto h2,.output h2,.final-cta h2 { max-width: 1050px; margin: 28px 0 70px; font-size: clamp(48px, 7vw, 100px); line-height: .92; letter-spacing: -.065em; }
.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10vw; margin-left: 25%; }
.manifesto-grid p,.output-copy { font-size: 18px; line-height: 1.7; }
.steps { border-top: 1px solid var(--line); background: #e9e3d7; }
.step-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.step-grid article { min-height: 320px; padding: 22px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); display: flex; flex-direction: column; }
.step-grid span { font: 12px "DM Mono", monospace; }
.step-grid h3 { margin-top: auto; font: 500 31px/1 "Newsreader", serif; }
.step-grid p { margin-bottom: 0; line-height: 1.55; font-size: 14px; }
.step-grid article:nth-child(2) { background: var(--lilac); }
.step-grid article:nth-child(3) { background: var(--coral); }
.step-grid article:nth-child(4) { background: var(--acid); }

.output { display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; background: var(--paper); }
.output h2 { margin-bottom: 36px; }
.output ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.output li { display: grid; grid-template-columns: 50px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--ink); font-size: 17px; }
.output li span { font: 11px "DM Mono", monospace; }
.final-cta { min-height: 80vh; padding: clamp(80px, 10vw, 140px) 20px 52px; background: var(--coral); text-align: center; display: flex; flex-direction: column; align-items: center; }
.final-cta > p { font: 12px "DM Mono", monospace; text-transform: uppercase; }
.final-cta h2 { margin: auto 0 48px; }
.button-light { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.studio-signature-light { margin-top: 46px; }
footer { padding: 24px clamp(20px, 4vw, 64px); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; background: var(--ink); color: var(--paper); font: 11px "DM Mono", monospace; text-transform: uppercase; }
footer > span:nth-child(2) { text-align: center; }
footer div { display: flex; justify-content: flex-end; gap: 20px; }

.legal { min-height: 100vh; padding: 120px max(20px, calc((100vw - 760px)/2)); background: var(--paper); }
.legal h1 { font: 600 clamp(48px, 8vw, 92px)/.9 "Newsreader", serif; letter-spacing: -.05em; }
.legal h2 { margin-top: 48px; }
.legal p,.legal li { line-height: 1.7; }
.legal a { text-decoration: underline; }

@media (max-width: 800px) {
  nav a:not(.nav-cta) { display: none; }
  .site-header { padding: 18px 20px; }
  .hero { min-height: 820px; padding-top: 110px; }
  .eyebrow span:last-child { display: none; }
  .translation { grid-template-columns: 1fr; }
  .graft-mark { transform: rotate(90deg); text-align: center; }
  .manifesto-grid { grid-template-columns: 1fr; margin-left: 0; gap: 20px; }
  .step-grid { grid-template-columns: 1fr 1fr; }
  .output { grid-template-columns: 1fr; }
  footer { grid-template-columns: 1fr; text-align: left; }
  footer > span:nth-child(2) { text-align: left; }
  footer div { justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 520px) {
  .hero h1 { font-size: 58px; }
  .hero-actions { width: 100%; }
  .button { width: 100%; }
  .step-grid { grid-template-columns: 1fr; }
  .step-grid article { min-height: 250px; }
  .mini-site, pre { min-height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { transition: none !important; }
}

/* 2026 product experience */
.hero { min-height: 100vh; padding: 112px clamp(20px,4vw,64px) 64px; align-items: stretch; text-align: left; }
.hero-studio { display: inline-flex; align-items: center; align-self: flex-start; gap: 9px; margin-bottom: clamp(38px,6vw,74px); font-size: 13px; font-weight: 700; }
.hero-studio img { width: 26px; height: 26px; border-radius: 3px; }
.hero-studio small { font: 9px "DM Mono",monospace; text-transform: uppercase; letter-spacing: .09em; opacity: .64; }
.hero-layout { display: grid; grid-template-columns: minmax(0,.88fr) minmax(480px,1.12fr); gap: clamp(44px,7vw,110px); align-items: center; }
.hero-content .eyebrow { max-width: 640px; }
.hero h1 { max-width: 720px; margin: 38px 0 28px; font-size: clamp(68px,8vw,124px); }
.hero-copy { max-width: 620px; margin: 0 0 30px; }
.hero-actions { justify-content: flex-start; }
.hero-proof { display:flex; flex-wrap:wrap; margin-top:16px; border-top:1px solid rgba(244,240,231,.28); border-left:1px solid rgba(244,240,231,.28); width:max-content; max-width:100%; }
.hero-proof a { display:grid; grid-template-columns:auto auto; gap:10px; align-items:baseline; padding:10px 12px; border-right:1px solid rgba(244,240,231,.28); border-bottom:1px solid rgba(244,240,231,.28); color:var(--paper); }
.hero-proof a:hover { background:rgba(244,240,231,.08); }
.proof-label { font:9px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.06em; opacity:.65; }
.hero-proof strong { font:500 12px "DM Mono",monospace; color:var(--acid); }
.hero-demo { position: relative; min-height: 650px; }
.hero-reference,.hero-system { position: absolute; overflow: hidden; border: 1px solid rgba(244,240,231,.7); background: var(--paper); color: var(--ink); box-shadow: 12px 12px 0 var(--coral); }
.hero-reference { width: 61%; left: 0; top: 0; transform: rotate(-2deg); }
.hero-system { width: 56%; right: 0; bottom: 12px; transform: rotate(2deg); background: var(--lilac); box-shadow: 12px 12px 0 var(--acid); }
.demo-topbar { display: flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--ink); font: 9px "DM Mono",monospace; }
.demo-topbar i { width: 6px; height: 6px; border: 1px solid; border-radius: 50%; }
.demo-topbar span { margin-left: auto; }
.demo-webpage { min-height: 440px; background: #f4cbd0; }
.demo-web-nav { display: flex; justify-content: space-between; padding: 16px; font-size: 9px; background: var(--paper); }
.demo-web-hero { position: relative; min-height: 190px; padding: 35px 20px; background: var(--acid); }
.demo-web-hero strong { position: relative; z-index: 1; font-size: clamp(24px,3vw,43px); line-height: .9; letter-spacing: -.06em; }
.demo-web-hero i { position: absolute; right: 9%; bottom: -14px; width: 42%; aspect-ratio: 1; border: 18px solid var(--coral); border-radius: 50%; }
.demo-web-band { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 18px; background: #17654c; }
.demo-web-band i { min-height: 90px; background: var(--paper); border-radius: 50% 50% 8px 8px; }
.demo-web-band p { background: repeating-linear-gradient(0deg,transparent 0 10px,rgba(244,240,231,.75) 11px 13px); }
.demo-web-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 16px; }
.demo-web-cards i { height: 54px; border: 1px solid; background: var(--coral); }
.demo-web-cards i:nth-child(2) { background: var(--lilac); }.demo-web-cards i:nth-child(3) { background: var(--acid); }
.hero-reference>p,.hero-system>p { display: flex; justify-content: space-between; margin: 0; padding: 12px 14px; border-top: 1px solid; font: 10px "DM Mono",monospace; text-transform: uppercase; }
.system-lines { min-height: 350px; padding: 30px 24px; background: var(--ink); color: var(--paper); font: 12px/2 "DM Mono",monospace; }
.system-lines p { margin: 0; border-bottom: 1px solid rgba(244,240,231,.13); }.system-lines b { color: var(--acid); }.system-lines em { color: #d3c7f4; font-style: normal; }
.hero-transfer { position: absolute; z-index: 3; top: 48%; left: 45%; padding: 10px 13px; border: 1px solid var(--ink); background: var(--acid); color: var(--ink); box-shadow: 5px 5px 0 var(--coral); transform: rotate(-5deg); font: 18px "Newsreader",serif; }
.hero-transfer span { display: block; font: 8px "DM Mono",monospace; text-transform: uppercase; }

.process { background: #b9dce8; }
.process-heading { padding: clamp(80px,10vw,140px) clamp(20px,7vw,110px); }
.process-heading h2 { margin: 28px 0 0; max-width: 1020px; font-size: clamp(48px,7vw,100px); line-height: .92; letter-spacing: -.065em; }.process-heading h2 em { font-family: "Newsreader",serif; font-weight: 500; }
.process-row { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px,8vw,120px); padding: clamp(65px,8vw,115px) clamp(20px,7vw,110px); border-top: 1px solid var(--ink); overflow: hidden; }
.process-copy { max-width: 520px; }.process-copy>span { font: 11px "DM Mono",monospace; text-transform: uppercase; letter-spacing: .1em; }.process-copy h3 { margin: 28px 0 22px; font-size: clamp(46px,6vw,82px); line-height: .9; letter-spacing: -.06em; }.process-copy p { font-size: 17px; line-height: 1.7; }.interaction-hint { font: 11px "DM Mono",monospace!important; text-transform: uppercase; }
.process-reference { background: var(--paper); }.process-ground { background: #17654c; color: var(--paper); }.process-taste { background: #efc6e5; }.process-build { background: var(--acid); }
.reference-scroll { width: min(100%,460px); height: 530px; justify-self: center; overflow: hidden; border: 1px solid var(--ink); background: white; box-shadow: 12px 12px 0 var(--coral); transform: rotate(1.3deg); }
.reference-scroll-bar { display:flex; gap:5px; padding:10px; border-bottom:1px solid }.reference-scroll-bar span { width:7px;height:7px;border:1px solid;border-radius:50% }
.reference-page { padding: 14px; }.ref-page-hero { position:relative; min-height:175px; padding:22px; background:#f0b7d8 }.ref-page-hero strong{font-size:35px;line-height:.9}.ref-page-hero i{position:absolute;right:20px;bottom:18px;width:90px;height:90px;border-radius:50%;background:var(--acid)}
.ref-page-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 0}.ref-page-split i{height:105px;background:#17654c;border-radius:55px 55px 5px 5px}.ref-page-split p{margin:0;background:repeating-linear-gradient(0deg,transparent 0 9px,var(--ink) 10px 11px)}.ref-page-poster{padding:22px;background:var(--coral);font-size:25px}.ref-page-footer{height:42px;margin-top:12px;background:var(--ink)}
.repo-visual { position:relative; min-height:450px; display:grid; place-items:center }.repo-window { position:relative;z-index:1;width:min(100%,460px);border:1px solid var(--paper);background:var(--ink);box-shadow:12px 12px 0 var(--coral);transform:rotate(-1.5deg)}.repo-head{display:flex;justify-content:space-between;padding:15px;border-bottom:1px solid rgba(244,240,231,.35);font:11px "DM Mono",monospace}.repo-window ul{list-style:none;margin:0;padding:24px;font:13px/2.25 "DM Mono",monospace}.repo-window li:before{content:'↳';margin-right:10px;color:var(--acid)}.repo-window .indent{padding-left:18px}.repo-window .active-file{margin:8px -10px 0;padding:4px 10px;background:var(--acid);color:var(--ink)}.active-file span{float:right}.repo-pulse{display:flex;gap:10px;align-items:center;padding:15px 24px;border-top:1px solid rgba(244,240,231,.35);font:10px "DM Mono",monospace;text-transform:uppercase}.repo-pulse i{width:8px;height:8px;border-radius:50%;background:var(--coral);animation:pulse 1.8s infinite}.repo-orbit{position:absolute;width:520px;max-width:120%;stroke:rgba(246,229,106,.35);fill:none;stroke-dasharray:5 8}@keyframes pulse{50%{box-shadow:0 0 0 9px rgba(243,109,77,.12)}}
.taste-lab { border:1px solid;background:var(--paper);box-shadow:12px 12px 0 var(--ink) }.taste-controls,.build-tabs{display:flex;border-bottom:1px solid}.taste-controls button,.build-tabs button{flex:1;padding:14px 10px;border:0;border-right:1px solid;background:transparent;font:10px "DM Mono",monospace;text-transform:uppercase;cursor:pointer}.taste-controls button:last-child,.build-tabs button:last-child{border-right:0}.taste-controls button.active,.build-tabs button.active{background:var(--ink);color:var(--paper)}.taste-canvas{position:relative;min-height:340px;padding:45px 38px;overflow:hidden}.taste-kicker{position:relative;z-index:1;font:10px "DM Mono",monospace}.taste-title{position:relative;z-index:1;display:block;max-width:420px;margin-top:65px;font:500 clamp(42px,5vw,68px)/.87 "Newsreader",serif}.taste-shape{position:absolute;transition:.35s}.taste-shape-a{right:-30px;top:30px;width:190px;height:190px;border:35px solid var(--coral);border-radius:50%}.taste-shape-b{right:75px;bottom:-60px;width:140px;height:180px;background:var(--acid);transform:rotate(25deg)}.taste-swatches{position:absolute;left:38px;bottom:28px;display:flex}.taste-swatches i{width:35px;height:12px;background:var(--ink)}.taste-swatches i:nth-child(2){background:var(--coral)}.taste-swatches i:nth-child(3){background:var(--acid)}.taste-swatches i:nth-child(4){background:var(--lilac)}.taste-rules{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid}.taste-rules span{padding:13px;border-right:1px solid;font:9px/1.5 "DM Mono",monospace}.taste-rules span:last-child{border:0}.taste-lab[data-tone=playful] .taste-canvas{background:var(--acid)}.taste-lab[data-tone=playful] .taste-shape-a{border-radius:0;transform:rotate(45deg);border-color:var(--lilac)}.taste-lab[data-tone=precise] .taste-canvas{background:#d9e2dd}.taste-lab[data-tone=precise] .taste-shape-a{border-radius:0;border-width:1px}.taste-lab[data-tone=precise] .taste-shape-b{transform:none;background:var(--ink)}
.build-visual{border:1px solid;background:var(--paper);box-shadow:12px 12px 0 var(--coral)}.build-panel{display:none;min-height:390px}.build-panel.active{display:block}.build-panel pre{margin:0;min-height:390px}.built-page{min-height:390px;background:#f4f0e7}.built-page header{display:flex;justify-content:space-between;padding:18px;border-bottom:1px solid;font-size:11px}.built-page main{padding:28px}.built-page main p{font:9px "DM Mono",monospace}.built-page main strong{display:block;font-size:48px;line-height:.9;letter-spacing:-.06em}.built-page main div{display:grid;grid-template-columns:1.4fr .8fr 1fr;gap:8px;margin-top:40px}.built-page main i{height:110px;background:var(--coral)}.built-page main i:nth-child(2){background:#17654c}.built-page main i:nth-child(3){background:var(--lilac)}
.configure{padding:clamp(80px,10vw,150px) clamp(20px,7vw,110px);background:var(--ink);color:var(--paper)}.configure-intro{display:grid;grid-template-columns:.8fr 1.45fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}.configure-intro h2{margin:0;font-size:clamp(48px,6vw,88px);line-height:.9;letter-spacing:-.06em}.configure-intro h2 em{color:var(--acid);font:500 italic 1em "Newsreader",serif}.configure-intro>p{margin:0;font-size:16px;line-height:1.7;color:rgba(244,240,231,.75)}
.availability{grid-column:2/-1;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:13px 0;border-block:1px solid rgba(244,240,231,.28);font:10px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.06em}.availability i{width:8px;height:8px;border-radius:50%;background:var(--acid)}.availability small{color:rgba(244,240,231,.55)}
.configure-paths{display:grid;grid-template-columns:1fr 1fr;margin-top:70px;border-top:1px solid var(--paper);border-left:1px solid var(--paper)}.configure-paths article{display:flex;flex-direction:column;min-height:500px;padding:clamp(24px,4vw,52px);border-right:1px solid var(--paper);border-bottom:1px solid var(--paper)}.configure-paths article:first-child{background:#17654c}.configure-paths article:last-child{background:var(--lilac);color:var(--ink)}
.configure-label{display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid currentColor}.configure-label span,.configure-label small{font:10px "DM Mono",monospace;text-transform:uppercase}.configure-label b{font-size:30px;letter-spacing:-.04em}.configure-paths ol{margin:38px 0 45px;padding-left:23px}.configure-paths li{padding:0 0 18px 9px;font-size:15px;line-height:1.6}.configure-paths code{color:inherit;background:rgba(244,240,231,.12);padding:2px 5px}.prompt-block{margin-top:auto;padding:18px;border:1px solid currentColor;background:var(--ink);color:var(--paper);box-shadow:7px 7px 0 var(--coral)}.prompt-block span{font:9px "DM Mono",monospace;color:var(--acid)}.prompt-block p{margin:12px 0 0;font:12px/1.65 "DM Mono",monospace}.configure-footer{display:flex;justify-content:space-between;gap:30px;align-items:center;padding-top:38px}.configure-footer p{max-width:660px;margin:0;line-height:1.65;color:rgba(244,240,231,.72)}
.final-cta{position:relative;isolation:isolate;overflow:hidden;min-height:85vh;background:var(--ink);color:var(--paper)}.final-cta-content{position:relative;z-index:2;margin:auto}.final-cta-content>p{font:11px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em}.final-cta h2{margin:32px auto 48px;max-width:1000px}.agent-field{position:absolute;inset:0;z-index:-1;opacity:.62}.agent-mark{position:absolute;display:flex;align-items:center;gap:9px;padding:12px 15px;border:1px solid var(--paper);background:var(--acid);color:var(--ink);box-shadow:6px 6px 0 var(--coral);transform:rotate(var(--r))}.agent-mark img{width:27px;height:27px}.agent-mark span{font:10px "DM Mono",monospace}.agent-codex{left:7%;top:15%;--r:-7deg}.agent-claude{right:8%;top:13%;--r:5deg}.agent-cursor{left:14%;bottom:19%;--r:5deg}.agent-gemini{right:15%;bottom:17%;--r:-6deg}.agent-copilot{left:42%;top:9%;--r:2deg}.agent-windsurf{right:41%;bottom:10%;--r:-3deg}.studio-signature-light{position:relative;z-index:2}

@media(max-width:980px){.hero-layout{grid-template-columns:1fr}.hero-demo{min-height:620px;max-width:720px;width:100%;margin:20px auto 0}.process-row{grid-template-columns:1fr}.process-ground .repo-visual,.process-build .build-visual{order:2}.process-copy{max-width:700px}.reference-scroll,.taste-lab,.build-visual{width:min(100%,680px);justify-self:center}.configure-intro{grid-template-columns:1fr}.availability{grid-column:auto}.configure-paths{grid-template-columns:1fr}.configure-footer{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){.hero{padding-top:100px}.hero-studio{margin-bottom:30px}.hero h1{font-size:58px}.hero-content .eyebrow span:last-child{display:none}.hero-demo{min-height:520px}.hero-reference{width:72%}.hero-system{width:68%}.demo-webpage{min-height:350px}.demo-web-hero{min-height:140px}.demo-web-band i{min-height:65px}.system-lines{min-height:290px;padding:20px 15px;font-size:9px}.process-row{min-height:0}.taste-rules{grid-template-columns:1fr}.taste-rules span{border-right:0;border-bottom:1px solid}.taste-canvas{padding:32px 22px;min-height:330px}.taste-title{font-size:45px}.agent-mark span{display:none}.agent-mark{padding:10px}.agent-copilot,.agent-windsurf{display:none}.availability{grid-template-columns:auto 1fr}.availability small{grid-column:2}.configure-paths article{min-height:0}.configure-footer .button{width:100%}}
@media(max-width:600px){.hero-proof{width:100%}.hero-proof a{flex:1;grid-template-columns:1fr;gap:4px;min-width:105px}}

/* Keep the complete desktop introduction inside the first viewport. */
@media (min-width: 981px) {
  .hero {
    height: 100svh;
    min-height: 720px;
    padding: 96px clamp(32px, 4vw, 64px) 30px;
  }

  .hero-studio {
    align-self: center;
    margin-bottom: clamp(14px, 2vh, 22px);
    font-size: 12px;
  }

  .hero-studio img { width: 23px; height: 23px; }

  .hero-layout {
    flex: 1;
    width: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
    gap: clamp(38px, 5vw, 80px);
  }

  .hero h1 {
    max-width: 650px;
    margin: clamp(22px, 3vh, 32px) 0 20px;
    font-size: clamp(68px, 5.3vw, 96px);
    line-height: .84;
  }

  .hero-copy {
    max-width: 590px;
    margin-bottom: 22px;
    font-size: clamp(15px, 1.2vw, 18px);
    line-height: 1.5;
  }

  .button { min-height: 46px; padding-inline: 18px; }
  .release-note { margin-top: 14px; }

  .hero-demo {
    min-height: 0;
    height: min(55vh, 520px);
    align-self: center;
  }

  .hero-reference { width: 58%; }
  .hero-system { width: 53%; bottom: 0; }
  .demo-webpage { min-height: 350px; }
  .demo-web-hero { min-height: 145px; padding: 28px 18px; }
  .demo-web-hero strong { font-size: clamp(25px, 2.3vw, 38px); }
  .demo-web-band i { min-height: 68px; }
  .demo-web-cards i { height: 42px; }
  .system-lines { min-height: 300px; padding: 24px 20px; font-size: 11px; }
}