/* Fonts, served from here rather than from Google. A page that tells the
   reader their data stays where they put it should not hand their IP to a
   third party to fetch a typeface. Self-hosting also drops two DNS and TLS
   handshakes and a render-blocking round trip.
   Newsreader keeps its optical-size axis, which is what makes the display
   italic look drawn rather than scaled, but not its weight axis: the whole
   page sets the serif at 400. That is the difference between 272kB and
   118kB. DM Sans stays variable across 400-600, where the range is cheaper
   than the three static instances it replaces. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/dmsans-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/dmsans.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/newsreader.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{color-scheme:light;--paper:#f9faf6;--ink:#172623;--muted:#5a6963;--line:#d9e0d8;--celadon:#b8dacf;--accent:#216d61;--dark:#172d28;--serif:Newsreader,Georgia,serif;--sans:'DM Sans',sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}::selection{background:var(--celadon);color:var(--ink)}:focus-visible{outline:3px solid #318d78;outline-offset:5px}button:disabled{cursor:default}h1,h2,p{margin:0}h1,h2{text-wrap:balance}.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}.skip{position:fixed;left:1rem;top:-100px;z-index:10;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:1rem}.skip:focus{top:1rem}.top{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:27px;font-weight:600;letter-spacing:-1.1px}.brand img{width:25px;height:29px}.nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:500}.nav a:hover{color:var(--accent)}.nav .nav-cta{padding:12px 17px;border:1px solid var(--ink);border-radius:6px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px}.eyebrow::before{content:'';width:7px;height:7px;background:var(--accent);border-radius:50%}.hero-top{display:flex;justify-content:space-between;align-items:center}h1{font-size:clamp(54px,6.8vw,98px);font-weight:500;line-height:1.025;letter-spacing:-.067em;margin-top:29px;max-width:1120px}h1 span{display:block}h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-.049em;color:var(--accent)}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:end}.lede{color:var(--muted)}.actions{display:flex;flex-direction:column;align-items:flex-end}.action-row{display:flex;align-items:center}.button{display:inline-flex;align-items:center;justify-content:center;padding:16px 22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:6px;font-size:14px;font-weight:500;transition:background .2s}.button:hover{background:var(--accent)}.text-link{font-size:14px}
.product-stage{background:var(--dark);padding:24px 24px 0;color:#e6f0e9;overflow:hidden}.stage-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:20px}.stage-label{font-size:13px;display:flex;gap:10px;align-items:center}.stage-label span{color:#92b3a6}.tabs{display:flex;gap:3px;background:#294139;border-radius:6px;padding:4px}.tabs button{border:0;color:#c4d7ca;background:transparent;padding:9px 16px;border-radius:4px;font-size:13px}.tabs button[aria-selected=true]{background:#d3e8dc;color:#172d28}.workspace{color:var(--ink);display:grid;grid-template-columns:195px minmax(0,1fr) 280px;background:#fffefa;min-height:414px;border-radius:7px 7px 0 0;overflow:hidden}.sidebar{background:#f3f5ef;border-right:1px solid #e1e5dc;padding:23px 17px;font-size:13px}.workspace-brand{display:flex;align-items:center;gap:9px;font-weight:600;margin-bottom:27px}.workspace-brand img{width:15px;height:18px}.workspace-brand span:last-child{margin-left:auto;color:var(--quiet)}.search{border:1px solid #dde2d8;border-radius:5px;padding:9px 10px;display:flex;justify-content:space-between;color:#737c71;margin-bottom:25px}.side-label{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#778073;margin:18px 8px 9px}.side-item{padding:9px 10px;color:#637064}.side-item.active{color:#274e3f;background:#e0e9df;border-radius:4px;font-weight:500}.side-item i{font-style:normal;margin-right:9px;color:var(--quiet)}.doc{padding:23px 32px 30px}.doc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#778073;font-size:11px}.doc-top span:last-child{border:1px solid #dce1d7;border-radius:4px;padding:6px 10px;color:#53684f}.doc-body{max-width:560px;margin:28px auto 0}.doc h3{font-family:var(--serif);font-size:37px;letter-spacing:-1.4px;font-weight:400;margin:0 0 8px}.byline{color:var(--quiet);font-size:11px}.doc-prose{font-family:var(--serif);font-size:19px;line-height:1.6;margin-top:23px}.doc-prose p+p{margin-top:12px}.doc-prose mark{background:#deeee2;color:inherit;padding:2px 0}.proposal{padding:25px 19px;background:#f4f7ef;border-left:1px solid #e1e5dc;display:flex;flex-direction:column}.proposal-label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);display:flex;justify-content:space-between}.badge{background:#dce8d6;color:#385e33;border-radius:3px;padding:2px 5px;letter-spacing:0}.proposal h4{font-size:15px;font-weight:500;line-height:1.45;margin:0 0 17px}.diff{font-family:var(--mono);font-size:12px;line-height:1.7;border:1px solid #dae4d4;border-radius:4px;overflow:hidden}.diff .addition{padding:12px 9px;background:#e2efdb;color:#345b2d}.merge{background:var(--dark);color:#f3f7ec;border:0;border-radius:4px;padding:10px;margin-top:auto;font-size:12px}.merge:hover{background:#2b5647}.merge:disabled{background:#dce8d6;color:#385e33}.stage-foot{display:flex;align-items:center;justify-content:space-between;padding:17px 3px;color:#9eb8ab;font-family:var(--mono);font-size:11px;gap:16px}.stage-foot strong{font-weight:400;color:#d7e8dd}.terminal{min-height:414px;background:#10231e;border:1px solid #39564a;border-bottom:0;border-radius:7px 7px 0 0;padding:30px 38px;position:relative;font-family:var(--mono);font-size:14px;line-height:1.9;overflow:auto}.terminal[hidden],.workspace[hidden]{display:none}.terminal .terminal-label{font-size:12px;color:#99b5a4;border-bottom:1px solid #324f41;padding-bottom:18px;margin-bottom:18px}.terminal pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;color:#d6e3d8}.terminal .prompt{color:#a3d9bd}.terminal .output{color:#c1d6c4}.story-head{grid-template-columns:1fr 1fr}.section-index{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:26px}h2{font-size:clamp(38px,4.4vw,62px);font-weight:500;line-height:1.06;letter-spacing:-.055em}h2 em{font-family:var(--serif);font-weight:400;color:var(--accent)}.story-copy{color:var(--muted)}.story-copy p+p{margin-top:16px}.flow{display:grid;grid-template-columns:1fr 64px 1fr;align-items:stretch}.flow-panel{border:1px solid var(--line);border-radius:7px;background:#fffefa}.flow-kicker{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}.flow-quote{font-family:var(--serif);font-size:26px;line-height:1.45;margin:27px 0 13px}.flow-quote del{color:#7b8478;text-decoration-thickness:1px}.flow-quote ins{text-decoration:none;background:var(--ins-bg);padding:1px 4px}.flow-note{font-size:12px;color:var(--muted)}.flow-arrow{display:grid;place-items:center;color:var(--accent);font-size:26px}.git-panel{background:#edf3e9}.git-panel pre{font-family:var(--mono);font-size:13px;line-height:1.9;white-space:pre-wrap;margin:24px 0 14px;color:#416137}.git-panel .minus{color:#8c5147}.git-panel .plus{color:#3b6d36}.story-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:23px}.story-bottom p{font-size:13px;color:var(--muted)}.footer{border-top:1px solid var(--line);color:var(--ink);font-size:12px}.footer a{text-underline-offset:3px}.reset{background:none;border:0;color:#bcd5c5;font-family:var(--mono);font-size:11px;text-decoration:underline;text-underline-offset:3px;padding:3px}.reset[hidden]{display:none}
@media(min-width:1550px){h1{font-size:106px}}
@media(max-width:1100px){.wrap{width:calc(100% - 64px)}.workspace{grid-template-columns:160px minmax(0,1fr) 240px}.doc{padding:22px}.doc h3{font-size:30px}.doc-prose{font-size:17px}.proposal{padding:23px 15px}}
@media(max-width:850px){.workspace{grid-template-columns:1fr 235px}.sidebar{display:none}.actions{align-items:flex-start}.story-head{grid-template-columns:1fr}.flow{grid-template-columns:1fr 35px 1fr}.flow-quote{font-size:23px}.git-panel pre{font-size:12px}}
@media(max-width:600px){.brand{font-size:24px}.nav{gap:18px}.nav .github{display:none}.nav .nav-cta{padding:10px 12px}.hero h1 span{display:inline}.stage-bar{align-items:flex-start;margin-bottom:13px;gap:10px}.stage-label{font-size:11px;line-height:1.5;display:block;padding:5px 0}.stage-label span{display:block}.tabs button{font-size:11px;padding:8px 10px}.workspace{grid-template-columns:1fr}.doc{padding:19px 22px 25px}.doc-body{margin-top:25px}.doc-prose{font-size:18px}.doc h3{font-size:33px}.proposal{border-left:0;border-top:1px solid #e1e5dc;padding:18px 22px}.proposal h4{margin-bottom:11px}.merge{padding:13px}.stage-foot{font-size:10px;align-items:flex-start;line-height:1.6}.stage-foot .branch{display:none}.terminal{padding:22px 17px;min-height:660px;font-size:12px}.terminal .terminal-label{font-size:11px}.flow{grid-template-columns:1fr}.story-bottom{align-items:flex-start;flex-direction:column;gap:17px}}
@media(max-width:600px){.button{padding:15px 17px}.stage-bar{flex-wrap:wrap}.stage-foot{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* The second pass: a consistent rhythm, quiet motion, and one continuous story. */
[hidden]{display:none!important}
.hero{padding-top:64px}.hero-bottom{margin:36px 0 48px;gap:40px}.actions{gap:16px}.action-row{gap:24px;flex-wrap:wrap;justify-content:flex-end}.button{min-height:52px;gap:20px}.text-link{display:inline-flex;align-items:center;gap:12px;width:fit-content;line-height:1.6;border:0;background:linear-gradient(var(--line),var(--line)) bottom left/100% 1px no-repeat;padding:0 0 5px;transition:color .2s,background-size .2s}.text-link:hover{color:var(--accent);background-size:35% 1px}.link-arrow{display:inline-block;width:16px;height:16px;flex:none;vertical-align:middle;margin:0;transition:transform .25s cubic-bezier(.2,.8,.2,1)}.link-arrow svg{width:100%;height:100%;display:block}.nav-cta{display:inline-flex;align-items:center;gap:15px}.nav a.github{display:flex;align-items:center;gap:8px}a:hover>.link-arrow{transform:translate(2px,-2px)}.merge{display:flex;align-items:center;justify-content:center;gap:16px;min-height:42px}.merge .link-arrow{width:14px;height:14px}.story{padding:104px 0}.flow{margin-top:44px}.flow-arrow .link-arrow{width:23px;height:23px}.flow-panel{padding:30px 32px}.flow-kicker,.flow-note{font-size:12px}.stage-foot{min-height:56px}.product-stage{position:relative}.workspace,.terminal{animation:surface-in .45s cubic-bezier(.2,.8,.2,1)}.doc-prose #merged-line{overflow:hidden}.doc-prose #merged-line mark{box-decoration-break:clone;-webkit-box-decoration-break:clone;background:linear-gradient(90deg,#c5e3cb,#e1efde)}.product-stage.merging .diff{border-color:#438266}.merge-flight{position:fixed;z-index:100;pointer-events:none;background:#d9ecd7;color:#345b2d;padding:12px 16px;border:1px solid #bad6b5;border-radius:4px;box-shadow:0 10px 35px #102a2520;font-family:var(--mono);font-size:12px;line-height:1.7;transform-origin:top left}.chapter{scroll-margin-top:40px}.permission-section,.collaboration-section{padding:100px 0;border-top:1px solid var(--line)}.permission-demo{display:grid;background:#eef2eb;border:1px solid #dee5d9;border-radius:8px}.permission-controls>p:first-child{font-size:24px;line-height:1.4;font-weight:500;letter-spacing:-.6px}.permission-controls>p:first-child span{font-family:var(--serif);font-size:27px;font-style:italic;font-weight:400;color:var(--accent)}.identity-picker{display:flex;gap:8px;margin:27px 0 18px;flex-wrap:wrap}.identity-picker button{display:flex;align-items:center;gap:9px;border:1px solid #d0dacb;border-radius:6px;padding:11px 13px;background:transparent;color:var(--muted);text-align:left;font-size:14px;transition:background .2s,border-color .2s,color .2s}.identity-picker button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.identity-picker button small{display:block;font-size:11px;line-height:1.5;opacity:.75}.identity-avatar{display:grid;place-items:center;flex:none;width:29px;height:29px;border:1px solid currentColor;border-radius:50%;font-size:12px;font-weight:500}.machine{border-radius:7px}.interaction-hint{font-size:12px;color:var(--muted);line-height:1.6}.permission-tree{min-width:0;background:#fffefa;border:1px solid #dce3d6;border-radius:6px;padding:18px 23px}.tree-header{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;color:var(--muted);padding-bottom:15px;border-bottom:1px solid var(--line)}.tree-page{display:flex;align-items:center;gap:13px;min-height:63px;border-bottom:1px solid #e9ece4;font-size:14px}.tree-page small{display:block;font-family:var(--mono);font-size:10px;color:var(--quiet);margin-top:4px}.file-icon{position:relative;width:14px;height:18px;border:1px solid #7d9571;border-radius:2px;flex:none}.file-icon::after{content:'';position:absolute;left:3px;right:3px;top:6px;height:1px;background:#a9baa0;box-shadow:0 4px #a9baa0}.access-label{margin-left:auto;font-size:10px;color:var(--quiet);white-space:nowrap}.permission-status{font-size:12px;line-height:1.6;color:var(--muted);padding-top:13px}.fine-print{font-size:12px;color:var(--muted);line-height:1.6;margin-top:19px;max-width:850px}.margin-demo{display:grid;grid-template-columns:1.25fr 1fr;border-block:1px solid var(--line)}.margin-page{padding:35px 45px 34px 0}.small-label{font-family:var(--mono);font-size:11px;letter-spacing:.08em}.margin-page>p{font-family:var(--serif);line-height:1.38;letter-spacing:-.8px;max-width:530px}.annotated{display:inline;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;border:0;border-radius:0;padding:0;text-align:left;background:linear-gradient(#e0eadd,#e0eadd) bottom/100% 40% no-repeat;transition:background-size .3s;position:relative;cursor:pointer}.annotated:hover,.annotated[aria-expanded=true]{background-size:100% 100%}.comment-count{font-family:var(--sans);position:relative;display:inline-grid;place-items:center;vertical-align:super;margin-left:8px;width:20px;height:19px;line-height:1;font-size:10px;font-weight:600;color:#f5faf1;background:var(--accent);border-radius:5px 5px 5px 0;letter-spacing:0}.margin-side{border-left:1px solid var(--line);display:grid;align-items:center;padding:34px 0 34px 42px}.margin-idle{display:flex;align-items:center;gap:25px}.margin-line{width:48px;height:1px;background:#a6b8a1;position:relative;flex:none}.margin-line::before{content:'';position:absolute;left:0;top:-3px;width:7px;height:7px;border:1px solid #a6b8a1;border-radius:50%;background:var(--paper)}.margin-idle p{font-size:22px;line-height:1.5;letter-spacing:-.4px}.margin-idle em{font-family:var(--serif);font-size:26px;color:var(--accent)}.margin-thread{border:1px solid var(--line);border-radius:7px;background:#fffefa;padding:20px 23px;animation:surface-in .3s ease}.thread-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:10px;color:var(--muted)}.thread-top button{font-size:24px;border:0;background:transparent;color:var(--muted);padding:0 5px;line-height:1;min-width:30px;min-height:30px}.comment-item{display:flex;gap:12px;margin-top:20px}.comment-item strong{font-size:13px;font-weight:500}.comment-item small{font-size:10px;font-weight:400;color:#85907d;margin-left:7px}.comment-item p{font-family:var(--serif);font-size:19px;line-height:1.4;margin-top:6px}.comment-item .identity-avatar{color:#637b56}.thread-foot{display:block;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:15px;margin-top:20px}.margin-caption{display:flex;justify-content:space-between;align-items:flex-start}.margin-caption p{max-width:630px;font-size:14px;line-height:1.7;color:var(--muted)}.margin-caption a{flex-shrink:0}.activity-example{display:grid;align-items:center}.activity-example h3{font-weight:500;letter-spacing:-1px;line-height:1.18;margin:18px 0 15px}.activity-example>div>p{font-size:14px;line-height:1.7;color:var(--muted);max-width:330px}.activity-legend{display:flex;justify-content:flex-end;gap:20px;font-size:12px;color:var(--muted);margin-bottom:18px}.activity-legend span{display:flex;align-items:center;gap:7px}.activity-legend i{width:7px;height:7px;background:var(--ink);border-radius:50%}.activity-legend span+span i{background:#8ab6a1}.activity-bars{height:160px;display:flex;align-items:center;gap:4px;position:relative;padding:0 2px}.activity-bars::after{position:absolute;content:'';left:0;right:0;top:50%;height:1px;background:#c9d6c3}.activity-day{height:100%;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px;position:relative}.activity-day i{position:absolute;left:0;right:0;border-radius:2px 2px 0 0;bottom:calc(50% + 4px);height:var(--human);background:var(--ink);transform-origin:bottom;transition:opacity .2s}.activity-day i+i{bottom:auto;top:calc(50% + 4px);height:var(--agent);background:#8ab6a1;border-radius:0 0 2px 2px;transform-origin:top}.activity-axis{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:12px}.activity-chart>p{font-family:var(--serif);font-size:19px;color:var(--muted);font-style:italic;margin-top:24px;text-align:right}.no-model{background:var(--dark);color:#f1f5e9;padding:40px 48px 0;border-radius:9px;position:relative;overflow:hidden}.no-model::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(600px circle at var(--pointer-x,20%) var(--pointer-y,50%),#6d997817,transparent 80%);z-index:0}.no-model>*{position:relative}.no-model-top{display:flex;align-items:baseline;justify-content:space-between;gap:25px}.no-model .section-index{color:#adcbb7}.no-model-top>.small-label{color:#90aa99}.no-model-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:50px;align-items:center;padding:10px 0 35px}.zero{font-size:clamp(180px,25vw,340px);letter-spacing:-.13em;font-weight:450;line-height:.88;color:#bfd9b7;font-variant-numeric:tabular-nums;padding-bottom:30px}.zero span{font-family:var(--serif);font-size:.64em;letter-spacing:-.14em;color:#76a18b}.no-model h2{font-size:clamp(37px,4vw,57px)}.no-model h2 em{color:#bfd9b7}.no-model-copy>p{font-size:16px;line-height:1.7;color:#b5c6b7;margin-top:25px;max-width:470px}.no-model-copy>p+p{margin-top:12px;color:#eef4e5}.zero-facts{display:flex;gap:50px;padding:24px 0;border-block:1px solid #3a5243;color:#afc4b1;font-size:13px}.zero-facts b{font-size:22px;font-weight:400;color:#e0ecd7;margin-right:8px;letter-spacing:-.6px}.agent-note{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:26px 0;color:#b4cdb9;font-family:var(--serif);font-size:21px}.agent-note .small-label{display:block;margin-bottom:8px;color:#7f9e89;font-size:10px}.agent-note .mono{font-family:var(--mono);font-size:13px;display:flex;align-items:center;gap:14px}.agent-note:hover{color:#f1f5e9}.run-section{display:grid;grid-template-columns:.85fr 1.15fr;gap:100px}.run-intro>p:not(.section-index){font-size:16px;line-height:1.75;max-width:330px;color:var(--muted)}.availability{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);margin-top:28px}.availability>span{width:6px;height:6px;border-radius:50%;background:var(--accent)}.run-options{border-top:1px solid var(--ink)}details:not(.picker){border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;align-items:center;gap:20px;padding:27px 0;font-size:19px;letter-spacing:-.3px;cursor:pointer}summary::-webkit-details-marker{display:none}.option-number{font-family:var(--mono);font-size:11px;color:var(--quiet);letter-spacing:0}.disclosure{width:14px;height:14px;position:relative;margin-left:auto;flex:none}.disclosure::before,.disclosure::after{content:'';position:absolute;left:0;top:6px;width:14px;height:1px;background:var(--accent);transition:transform .25s}.disclosure::after{transform:rotate(90deg)}details[open] .disclosure::after{transform:rotate(0)}.option-body{padding:0 0 30px 36px}.option-body>p{font-size:15px;line-height:1.7;color:var(--muted);max-width:480px}.code-block{margin:21px 0;background:#edf1e8;padding:17px 20px;border-radius:4px;overflow:auto}.code-block pre{font-family:var(--mono);font-size:12px;line-height:1.85;margin:0;color:#3d5b34;white-space:pre-wrap;overflow-wrap:anywhere}details[open] .option-body{animation:surface-in .25s ease}.launch-section{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--line);align-items:center}.launch-heading>p:last-child{color:var(--muted);font-size:16px;line-height:1.65;margin-top:23px;max-width:355px}.launch-form{max-width:490px;padding-top:30px}.launch-form label{font-size:15px;font-weight:500}.email-row{display:flex;align-items:center;border-bottom:1px solid var(--ink);margin-top:13px;gap:16px}.email-row input{border:0;background:transparent;width:100%;min-width:0;font:400 25px var(--serif);color:var(--ink);padding:15px 0 17px;border-radius:0}.email-row input::placeholder{color:#8c9987}.email-row button{width:42px;height:42px;flex:none;border:0;border-radius:50%;color:var(--paper);background:var(--ink);display:grid;place-items:center;transition:background .2s}.email-row button:hover{background:var(--accent)}.launch-form form>p{font-size:12px;line-height:1.75;color:var(--muted);margin:18px 0 28px;max-width:380px}.footer{display:block;padding:38px 0 28px}.footer a{text-decoration:none}.reading-progress{position:fixed;top:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left;background:#5c9d83;z-index:99;pointer-events:none}.reveal.visible{animation:reveal-in .75s cubic-bezier(.2,.75,.2,1) both}.reveal.waiting{opacity:0;transform:translateY(18px)}.activity-chart.visible .activity-day i{animation:bar-grow .8s cubic-bezier(.2,.75,.2,1) both;animation-delay:var(--delay)}
@keyframes reveal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes surface-in{from{opacity:.45;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes bar-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media(prefers-reduced-motion:no-preference){.hero-top{animation:reveal-in .65s .05s both}.hero h1{animation:reveal-in .8s .12s both}.hero-bottom{animation:reveal-in .8s .2s both}.product-stage{animation:reveal-in .85s .3s both}}
@media(max-width:1100px){.hero-bottom{grid-template-columns:1.1fr 1fr;gap:24px}.action-row{gap:16px}.button{padding:14px 17px;gap:10px}.hero .text-link{font-size:13px}.identity-picker{flex-direction:column;max-width:190px}.identity-picker button{padding:10px 13px}.permission-tree{align-self:center}.access-label{font-size:9px}.margin-side{padding-left:26px}.margin-page{padding-right:26px}.margin-caption{flex-direction:column}.no-model{padding:33px 35px 0}.no-model-grid{gap:28px}.run-section{gap:60px}.launch-section{gap:50px}}
@media(max-width:850px){.hero-bottom{grid-template-columns:1fr}.action-row{justify-content:flex-start}.identity-picker{flex-direction:row;max-width:none;margin:20px 0 12px}.access-label{font-size:11px}.margin-demo{grid-template-columns:1fr 1fr}.margin-idle{gap:15px}.margin-line{width:20px}.margin-idle p{font-size:18px}.margin-idle em{font-size:22px}.margin-thread{padding:16px}.comment-item{gap:8px}.no-model-grid{grid-template-columns:.7fr 1.3fr}.zero{font-size:190px}.no-model-copy>p{font-size:15px}.zero-facts{gap:28px}.run-section{gap:38px;grid-template-columns:.85fr 1.15fr}summary{font-size:16px;gap:14px}.option-body{padding-left:27px}.launch-section{gap:35px}.launch-heading h2{font-size:43px}.stage-foot{min-height:58px}}
@media(max-width:600px){.button{min-height:49px}.actions{gap:13px}.stage-foot{padding:14px 3px}.permission-controls>p:first-child{font-size:22px}.permission-controls>p:first-child span{font-size:25px}.identity-picker button small{font-size:9px}.tree-page small{font-size:8px}.access-label{font-size:9px}.margin-demo{grid-template-columns:1fr}.margin-page>p{max-width:390px}.margin-side{border-left:0;border-top:1px solid var(--line)}.margin-idle{gap:22px}.margin-line{width:38px}.margin-thread{padding:20px;max-width:none}.margin-caption .text-link{font-size:13px}.activity-chart{min-width:0}.activity-bars{gap:3px}.activity-chart>p{font-size:18px}.no-model{padding:27px 23px 0}.no-model-top{display:block}.no-model-top>.small-label{display:none}.no-model-grid{grid-template-columns:1fr;gap:10px;padding:5px 0 27px}.zero{font-size:180px;line-height:.85;padding-bottom:20px;letter-spacing:-.12em}.no-model h2{font-size:38px}.no-model-copy>p{font-size:15px;margin-top:22px}.zero-facts{gap:14px;justify-content:space-between;padding:20px 0;font-size:10px}.zero-facts b{display:block;font-size:25px;margin:0 0 5px}.agent-note{padding:22px 0;gap:20px;font-size:18px;align-items:flex-end}.agent-note .small-label{font-size:8px}.agent-note .mono{font-size:11px;white-space:nowrap;gap:7px}.run-section{grid-template-columns:1fr}.run-intro>p:not(.section-index){max-width:400px}.availability{margin-top:19px;font-size:11px}summary{font-size:17px;padding:24px 0;gap:18px}.code-block{padding:14px}.launch-section{grid-template-columns:1fr}.launch-form{padding-top:8px;width:100%;max-width:none}}
/* Comparison: a quiet matrix, with a persistent Hanji column. */
.compare-section{padding:100px 0 0}.compare-section .story-copy{max-width:440px}.compare-toolbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px}.compare-toolbar>p{font-family:var(--serif);font-size:21px;color:var(--muted)}.compare-desktop-note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--quiet)}.compare-picker{display:none}.matrix-shell{width:100%}.fit-matrix{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;font-size:14px;line-height:1.5}.fit-matrix .criteria-col{width:13%}.fit-matrix th,.fit-matrix td{text-align:left;padding:23px 18px;vertical-align:top;border-bottom:1px solid var(--line);font-weight:400;overflow-wrap:break-word}.fit-matrix thead th{font-size:18px;font-weight:500;letter-spacing:-.5px;padding-top:25px;padding-bottom:26px;border-top:1px solid var(--line)}.fit-matrix thead td{border:0;padding-left:0;vertical-align:middle}.matrix-corner{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.4;color:var(--quiet)}.fit-matrix thead small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.03em;line-height:1.6;color:var(--quiet);margin-top:12px;font-weight:400}.fit-matrix tbody th{font-size:12px;font-weight:500;color:var(--muted);padding-left:0;padding-right:20px;vertical-align:middle}.fit-matrix tbody td{color:#4e604e}.fit-matrix [data-tool="hanji"]{background:#e8f0e2;color:#294d37;border-color:#d0dfc7}.fit-matrix thead [data-tool="hanji"]{background:var(--dark);color:#f5f8ef;border-radius:8px 8px 0 0;border-top-color:var(--dark);border-bottom-color:var(--dark)}.fit-matrix thead [data-tool="hanji"] small{color:#a9c6ab}.matrix-brand{display:flex;align-items:center;gap:9px;font-size:21px}.matrix-brand img{width:17px;height:21px;filter:brightness(0) invert(1)}.fit-matrix tbody strong{font-weight:550}.fit-matrix tbody small{display:block;font-size:11px;line-height:1.6;color:var(--quiet);margin-top:8px}.fit-matrix [data-tool="hanji"] small{color:var(--quiet)}.fit-matrix .matrix-tradeoffs td{font-size:12px;padding-block:24px}.fit-matrix .matrix-tradeoffs [data-tool="hanji"]{border-radius:0 0 8px 8px;border-bottom:0}.comparison-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:40px;margin-top:26px}.comparison-bottom>p{font-size:13px;line-height:1.75;max-width:690px;color:var(--muted)}.comparison-bottom strong{font-weight:500;color:var(--ink)}.comparison-bottom>a{flex-shrink:0;font-size:13px}.comparison-sources{margin-top:22px;border-bottom:1px solid var(--line)}.comparison-sources summary{font-size:11px;letter-spacing:0;gap:20px;padding:15px 0;color:var(--muted)}.source-date{margin-left:auto;font-family:var(--mono);font-size:10px}.comparison-sources .disclosure{margin-left:0;width:12px}.comparison-source-content{padding:0 0 22px;font-size:12px;line-height:1.8;color:var(--muted)}.comparison-source-content>p{max-width:760px}.comparison-source-content ul{padding-left:18px;margin:14px 0 0;display:grid;gap:6px}.comparison-source-content a{text-decoration:underline;text-underline-offset:3px}.comparison-source-content strong{font-weight:500;color:var(--ink)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:901px) and (max-width:1150px){.fit-matrix th,.fit-matrix td{padding:20px 12px}.fit-matrix thead th{font-size:15px}.fit-matrix thead small{font-size:8px}.fit-matrix{font-size:12px}.fit-matrix tbody small{font-size:10px}.fit-matrix tbody th{font-size:11px}}
@media(max-width:900px){.compare-desktop-note{display:none}.compare-picker{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}.compare-picker select{font:500 14px var(--sans);color:var(--ink);border:1px solid #bbcbb4;border-radius:5px;background:var(--paper);padding:10px 30px 10px 12px;max-width:170px}.fit-matrix [data-tool]{display:none}.fit-matrix [data-tool="hanji"],.fit-matrix [data-active="true"]{display:table-cell}.fit-matrix colgroup{display:none}.fit-matrix thead td{width:24%}.fit-matrix thead th{width:38%}.comparison-bottom{align-items:flex-start;flex-direction:column;gap:17px}}
@media(max-width:600px){.compare-toolbar{align-items:flex-start;flex-direction:column;gap:16px}.compare-picker{width:100%;justify-content:flex-end}.fit-matrix th,.fit-matrix td{padding:19px 12px;font-size:12px}.fit-matrix thead th{font-size:16px;padding:20px 12px}.fit-matrix thead small{margin-top:9px}.matrix-brand{font-size:18px;gap:6px}.matrix-brand img{width:14px}.fit-matrix tbody th{font-size:11px;padding-right:12px}.fit-matrix tbody small{font-size:10px;margin-top:7px}.fit-matrix .matrix-tradeoffs td{font-size:11px}.comparison-bottom{margin-top:22px}.source-date{font-size:9px}.comparison-sources summary{gap:12px}}
/* Small moments of ink: the eye follows an edit, then finds its place. */
.fit-matrix [data-tool]{transition:background-color .32s ease,color .32s ease,box-shadow .32s ease}
.fit-matrix tbody [data-tool]:not([data-tool="hanji"]).column-reading{background:#edf2e8;color:#294d37}
.fit-matrix thead [data-tool]:not([data-tool="hanji"]).column-reading{background:#edf2e8;box-shadow:inset 0 2px #86a67a}
.fit-matrix tbody [data-tool="hanji"].column-reading{background:#ddebd4}
.fit-matrix thead [data-tool="hanji"].column-reading{background:#264737}
.flow-arrow{position:relative}
.flow-arrow::before{content:'';position:absolute;left:4px;right:4px;height:1px;top:50%;background:var(--line);z-index:0}
.flow-arrow .link-arrow{position:relative;z-index:1;background:var(--paper);box-sizing:content-box;padding:6px}
.flow-quote ins{box-decoration-break:clone;-webkit-box-decoration-break:clone}
.launch-heading h2 em{background:linear-gradient(#bfd2b6,#bfd2b6) left 94%/0% 1px no-repeat;padding-bottom:3px}
.email-row{position:relative}
.email-row::after{position:absolute;content:'';left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.email-row:focus-within::after{transform:scaleX(1)}
.annotated::after{content:'';position:absolute;right:0;bottom:-4px;width:28px;height:1px;background:#88a27b;transform:scaleX(0);transform-origin:left;transition:transform .3s}
.annotated:hover::after,.annotated:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:no-preference){
 .flow.visible .flow-quote ins{animation:ink-arrives .75s .25s both}
 .flow.visible .git-panel .minus{display:inline-block;animation:diff-arrives .5s .65s both}
 .flow.visible .git-panel .plus{display:inline-block;animation:diff-arrives .6s .85s both}
 .flow.visible .flow-arrow .link-arrow{animation:carry-edit .8s .4s both}
 .matrix-shell.visible .fit-matrix thead [data-tool="hanji"]{animation:seal-settle .7s .15s both}
 .launch-heading.visible h2 em{animation:underline-written 1.1s .45s both}
}
@keyframes ink-arrives{from{background-color:transparent;color:var(--ins-from)}to{background-color:var(--ins-bg);color:var(--ink)}}
@keyframes diff-arrives{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes carry-edit{0%{opacity:.3;transform:translateX(-7px)}65%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes seal-settle{from{box-shadow:inset 0 0 0 1px #bad2af;color:#c2dcb6}to{box-shadow:inset 0 0 0 1px transparent;color:#f5f8ef}}
@keyframes underline-written{from{background-size:0% 1px}to{background-size:100% 1px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal.waiting{opacity:1;transform:none}.reading-progress{display:none}}

/* Korean measures: keep words intact, give Hangul its own reading rhythm. */
/* RIDIBatang, cut down to the glyphs the Korean page actually sets: 440kB to
   25kB. The full file stays in the repo as the source to re-cut from.
   If the Korean copy changes, re-run:
     pyftsubset assets/fonts/RIDIBatang.woff2 --text-file=<chars> \
       --flavor=woff2 --layout-features='*' --no-hinting --desubroutinize \
       --output-file=assets/fonts/RIDIBatang.subset.woff2
   where <chars> is every character in ko/index.html plus the ko: strings in
   landing.js. A glyph left out does not break: it falls through to the
   reader's own serif, which is visible but legible. */
@font-face{font-family:RIDIBatang;src:url('/assets/fonts/RIDIBatang.subset.woff2') format('woff2');font-display:swap}
html:lang(ko){--serif:RIDIBatang,Georgia,serif;--sans:'DM Sans','Apple SD Gothic Neo','Malgun Gothic',sans-serif}
html:lang(ko) body{word-break:keep-all;overflow-wrap:break-word}
html:lang(ko) h1{font-size:clamp(44px,5.6vw,81px);line-height:1.2;letter-spacing:-.06em;max-width:1200px}
html:lang(ko) h1 em,html:lang(ko) h2 em{font-style:normal}
html:lang(ko) h2{font-size:clamp(32px,3.7vw,52px);line-height:1.3;letter-spacing:-.05em}
html:lang(ko) .doc h3{font-size:29px;line-height:1.45;letter-spacing:-1px}
html:lang(ko) .doc-prose{font-size:16px;line-height:1.85}
html:lang(ko) .doc-prose h4{font-size:19px}
html:lang(ko) .margin-page>p{font-size:clamp(25px,2.5vw,34px);line-height:1.65}
html:lang(ko) .fit-matrix{font-size:13px;line-height:1.7}
html:lang(ko) .fit-matrix small{line-height:1.75}
html:lang(ko) .hero-bottom{grid-template-columns:1fr 1fr}
@media(max-width:850px){html:lang(ko) .hero-bottom{grid-template-columns:1fr}}
@media(max-width:600px){html:lang(ko) h1{font-size:clamp(36px,8.5vw,48px)}html:lang(ko) .doc h3{font-size:26px}html:lang(ko) .fit-matrix{font-size:12px}html:lang(ko) .flow-quote{font-size:23px}}

/* A shorter reading path; compact examples instead of miniature app tours. */
.hero-bottom{align-items:center;margin:26px 0 32px}.lede{max-width:430px;font-size:19px;line-height:1.55}.hero .button{padding-inline:23px}.hero .actions{gap:10px}.product-stage .sidebar{padding:20px 15px}.product-stage .sidebar .search,.product-stage .sidebar .side-label:nth-of-type(n+8),.product-stage .sidebar .side-item:nth-last-child(-n+2){display:none}.product-stage .doc-body{margin:30px auto 0}.product-stage .proposal{justify-content:center;gap:24px;padding:30px 23px}.product-stage .proposal .merge{margin-top:0}.product-stage .proposal .diff{border:0}.product-stage .proposal .addition{border-radius:4px;font-size:13px;padding:15px}.product-stage .terminal{padding:27px 34px;line-height:1.7}.terminal-caption{font-family:var(--sans);font-size:13px;color:#91b29f;margin-top:24px}.product-stage .stage-bar{margin-bottom:18px}.product-stage .stage-foot{min-height:44px;padding:12px 3px}.product-stage .stage-foot .branch{display:none}.story,.permission-section,.collaboration-section{padding:76px 0}.story-copy{padding:0!important;max-width:365px;font-size:18px;line-height:1.65}.story .flow{margin-top:32px}.story .story-bottom{padding-top:20px}.permission-demo{margin-top:30px;gap:32px;padding:30px;grid-template-columns:.7fr 1.3fr;align-items:center}.identity-picker{margin-top:0}.permission-tree{min-height:338px}.margin-demo{margin-top:30px}.margin-page>p{font-size:32px;margin:22px 0}.margin-side{min-height:245px}.margin-caption{margin-top:17px;gap:25px}.activity-example{margin-top:46px}.activity-example h3{font-size:26px}.activity-example>div>p{margin-bottom:0}.activity-chart>p{display:none}.compare-section{padding-top:72px}.compare-toolbar{margin-top:27px}.run-section{padding:70px 0}.launch-section{padding:50px 0 65px}.run-intro>p:not(.section-index){margin-top:18px}.no-model{margin:12px 0 68px}.permission-section{border-top:0;padding-top:0}.top .nav{flex-shrink:0}.top .brand{flex-shrink:0}.top .nav a{white-space:nowrap}.tabs button,.identity-picker button{min-height:44px}.flow-panel,.story-head>*,.hero-bottom>*,.workspace>*,.margin-demo>*,.activity-example>*,.run-section>*,.launch-section>*{min-width:0}.email-row input{font-size:20px}
@media(max-width:900px){.top .nav a.github{display:none}.top .nav{gap:20px}.story-head{grid-template-columns:1fr}.story-copy{max-width:550px}.hero-bottom{grid-template-columns:1fr}.product-stage .stage-bar{align-items:center;flex-wrap:nowrap}.permission-demo{grid-template-columns:1fr}.identity-picker{flex-direction:row;margin-bottom:12px}.margin-caption{flex-direction:column}.no-model{margin-bottom:56px}}
@media(max-width:600px){
 .wrap{width:calc(100% - 40px)}.top{height:70px;gap:20px}.top .brand{font-size:23px;gap:9px}.top .brand img{width:21px;height:24px}.top .nav{gap:16px;font-size:12px}.top .nav .nav-cta{padding:0;min-height:44px;border:0;border-radius:0;gap:6px}.hero .eyebrow{font-size:10px;letter-spacing:.07em}.hero-bottom{margin:22px 0 26px;gap:20px}.lede{font-size:17px;line-height:1.6;max-width:330px}.action-row{gap:16px;align-items:center}.hero .button{padding:13px 17px;min-height:46px;font-size:13px}.hero .text-link{font-size:12px;gap:6px}.hero .text-link .link-arrow{width:12px}.product-stage{padding:12px 12px 0}.product-stage .stage-bar{margin-bottom:12px;justify-content:center}.product-stage .stage-label{display:none}.product-stage .tabs{width:100%;padding:3px;background:#294139}.product-stage .tabs button{flex:1;font-size:12px;padding:8px;min-height:40px}.product-stage .workspace{border-radius:5px}.product-stage .doc-top{font-size:10px;overflow-wrap:anywhere}.product-stage .doc h3{line-height:1.15;margin-bottom:7px}.product-stage .byline{font-size:10px}.product-stage .proposal{padding:16px 20px 18px;border-left:0;border-top:1px solid #dbe4d4;background:#e9f0e2}.product-stage .proposal-label{font-size:11px;letter-spacing:0;text-transform:none;align-items:center}.product-stage .proposal .addition{font-size:12px;line-height:1.6;padding:0;background:transparent}.product-stage .merge{align-self:flex-end;padding:8px 15px;min-height:40px;font-size:12px}.product-stage .stage-foot{min-height:40px;padding:10px 2px;font-size:10px;gap:8px}.product-stage .terminal{padding:21px 18px;line-height:1.8;border-radius:5px}.product-stage .terminal-label{font-size:10px;margin-bottom:18px;padding-bottom:12px}.product-stage .terminal-caption{font-size:12px;line-height:1.6}.story,.collaboration-section{padding:48px 0}.section-index{font-size:10px;margin-bottom:16px;letter-spacing:.05em}h2{font-size:34px;line-height:1.13;letter-spacing:-.04em}.story-copy{font-size:16px;line-height:1.6}.flow{margin-top:25px;gap:0;background:#fffefa;border:1px solid var(--line);border-radius:7px;overflow:hidden}.flow-panel{border:0;border-radius:0;padding:23px}.flow-arrow{height:26px;background:#fffefa;transform:none}.flow-arrow .link-arrow{transform:rotate(90deg);padding:3px;background:#fffefa}.flow-arrow::before{left:23px;right:23px}.flow-quote{font-size:25px;margin:22px 0 12px}.git-panel{padding-top:20px}.git-panel pre{font-size:11px;line-height:1.9;margin:18px 0 10px;overflow-wrap:anywhere}.flow-kicker,.flow-note{font-size:10px}.story-bottom .text-link{font-size:12px}.no-model{margin:5px 0 46px}.permission-section{padding:0 0 46px}.permission-demo{padding:18px 15px;margin-top:24px;gap:15px}.identity-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:0}.identity-picker button{justify-content:center;gap:7px;padding:10px 5px;min-height:44px;font-size:12px}.identity-picker button small{display:none}.identity-picker .identity-avatar{width:22px;height:22px;font-size:10px}.permission-controls .interaction-hint{display:none}.permission-tree{padding:13px}.tree-header{font-size:9px;gap:10px}.tree-page{min-height:49px;gap:9px}.tree-page small{display:none}.tree-page .access-label{font-size:9px}.permission-status{line-height:1.5}.fine-print{font-size:10px;line-height:1.6;margin-top:13px}.margin-demo{margin-top:23px}.margin-page{padding:23px 0}.margin-page>p{font-size:27px;line-height:1.4;margin:19px 0}.margin-page .interaction-hint{font-size:11px}.margin-side{padding:18px 0;min-height:110px}.margin-idle p{font-size:19px}.margin-idle em{font-size:22px}.margin-caption p{font-size:12px}.margin-caption a{font-size:12px}.activity-example{margin-top:32px}.activity-example h3{font-size:25px;margin:13px 0}.activity-example>div>p{font-size:13px}.activity-bars{height:130px}.compare-section{padding-top:45px}.compare-toolbar>p{font-size:18px}.fit-matrix th,.fit-matrix td{overflow-wrap:anywhere}.run-section{padding:46px 0;gap:25px}.run-intro h2 br{display:none}.run-options summary{padding:19px 0;min-height:62px;font-size:16px;gap:15px}.option-body{padding:0 0 23px 25px}.option-body>p{font-size:14px}.code-block pre{font-size:11px}.launch-heading h2{font-size:35px}.launch-heading>p:last-child{font-size:15px;margin-top:18px}
 html:lang(ko) .hero h1{line-height:1.3}html:lang(ko) h2{font-size:30px;line-height:1.35}html:lang(ko) .product-stage .doc h3{font-size:23px;line-height:1.45}html:lang(ko) .product-stage .doc-prose{font-size:18px;line-height:1.6}html:lang(ko) .nav{gap:14px}html:lang(ko) .nav .nav-cta{font-size:12px}html:lang(ko) .margin-page>p{font-size:25px;line-height:1.6}
}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.top{gap:12px}.top .nav{gap:12px}.hero .text-link{font-size:11px}.fit-matrix th,.fit-matrix td{padding-inline:9px}.fit-matrix thead th{font-size:14px}.matrix-brand{font-size:16px}.fit-matrix thead small{font-size:7px}.agent-note{flex-wrap:wrap}}
.product-stage .doc-top span:last-child{border:0;padding:0;color:var(--quiet)}.activity-example>div>p{margin-top:15px}
@media(max-width:600px){.permission-tree{min-height:0}.permission-status{min-height:33px;font-size:12px}.tree-page{font-size:14px}.activity-example>div>p{margin-top:10px}.margin-page>p{margin-block:22px}.product-stage .doc-prose #merged-line{font-size:18px}html:lang(ko) .product-stage .doc-prose #merged-line{font-size:16px}}
@media(max-width:600px){.matrix-corner{font-size:14px;line-height:1.5}.fit-matrix thead small{font-size:9px}html:lang(ko) .matrix-corner{font-size:12px;word-break:keep-all;font-style:normal}.product-stage{margin-bottom:4px}}
.hero .eyebrow::before{content:none}
.hero .lede span{font:inherit;color:inherit}
.hero-explore{display:flex;align-items:center;justify-content:center;min-height:44px;width:fit-content;font-size:12px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:5px}
.hero-explore:hover{color:var(--accent);text-decoration-color:currentColor}
#demo{scroll-margin-top:24px}
@media(max-width:600px){
 .hero{padding-top:0}
 .hero .hero-bottom{margin:28px 0 32px;gap:30px}
 .hero .lede span{font:inherit;color:inherit}
 .hero .actions{gap:12px}
 .hero-explore{font-size:12px}
}

/* Keep the closing signature together and give links a clear reading order. */
.footer{padding:48px 0 24px}
.footer-layout{display:grid;grid-template-columns:1fr auto;gap:64px;align-items:start}
.footer-identity .brand{display:inline-flex}
.footer-quote{font-family:var(--serif);font-size:26px;line-height:1.35;letter-spacing:-.4px;color:var(--ink);margin:23px 0 14px}
.footer-origin{font-size:13px;line-height:1.6;color:var(--muted)}
.footer-links{display:grid;grid-template-columns:repeat(2,max-content);justify-content:end;gap:48px;padding-top:6px}
.footer-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:14px}
.footer-links a{display:flex;align-items:center;min-height:40px;font-size:13px;color:var(--ink)}
.footer a:hover{color:var(--accent)}
.footer-colophon{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:48px;font-size:11px;line-height:1.6;color:var(--muted)}
.footer-colophon a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.launch-form .email-row button{width:auto;min-width:90px;border-radius:5px;padding:0 16px;font-family:var(--sans);font-size:13px}
@media(max-width:600px){
 .footer{padding-top:32px}
 .footer-layout{grid-template-columns:1fr;gap:32px}
 .footer-quote{font-size:25px;margin-top:20px}
 .footer-links{grid-template-columns:1fr 1fr;gap:24px;padding-top:0}
 .footer-label{margin-bottom:8px}
 .footer-links a{min-height:44px}
 .footer-colophon{margin-top:40px;font-size:10px;gap:16px;align-items:flex-start}
 .footer-colophon p{max-width:190px;padding-top:13px}
}

/* The next chapter is an invitation, framed in Hanji's deep green. */
.launch-section{position:relative;isolation:isolate;background:#203e35;color:#f6f5eb;border:1px solid #345247;border-radius:12px;padding:52px;margin:24px 0 56px;gap:56px;overflow:hidden}
.launch-section::before{content:'';position:absolute;z-index:-1;width:260px;height:260px;right:-120px;top:-150px;border:1px solid #7a978066;border-radius:50%;box-shadow:0 0 0 32px #7a978014,0 0 0 64px #7a97800c;pointer-events:none}
.launch-section .section-index{color:#c4d6bb;margin-bottom:22px}
.launch-section h2{color:#f6f5eb;font-size:46px;line-height:1.12}
.launch-section h2 em{color:#d1e4bf;background:none}
.launch-section .launch-heading>p:last-child{color:#d0dcd3;max-width:330px}
.launch-section .launch-form{padding:0;width:100%;max-width:none}
.launch-section .launch-form label{display:block;font-size:18px;font-weight:500;color:#f6f5eb}
.launch-section .email-row{background:#fffdf6;border:1px solid #fffdf6;border-radius:7px;padding:6px;margin-top:16px;gap:6px;transition:box-shadow .2s}
.launch-section .email-row::after{content:none}
.launch-section .email-row:focus-within{box-shadow:0 0 0 4px #c5dea64d;border-color:#c5dea6}
.launch-section .email-row input{font-family:var(--sans);font-size:16px;padding:13px 10px;color:#203e35;outline:none}
.launch-section .email-row input::placeholder{color:#69776c}
.launch-section .email-row button{min-height:48px;height:auto;background:#d1e4bf;color:#203e35;font-size:14px;font-weight:600;border-radius:4px}
.launch-section .email-row button:hover{background:#b9d59e}
.launch-section .email-row button:focus-visible{outline:2px solid #203e35;outline-offset:2px}
.launch-section .launch-form form>p{color:#c2d0c7;margin:16px 0 22px;max-width:390px}
.launch-section .launch-form>.text-link{color:#d9e5d8;font-size:12px;text-decoration:none;background-image:linear-gradient(#7a9780,#7a9780)}
@media(max-width:900px){.launch-section{padding:36px;gap:32px;grid-template-columns:1fr}.launch-section .launch-form{max-width:540px}}
@media(max-width:600px){.launch-section{padding:28px 20px;margin:12px 0 36px;border-radius:9px;gap:30px}.launch-section h2{font-size:36px}.launch-section .section-index{margin-bottom:18px}.launch-section .launch-heading>p:last-child{font-size:15px;margin-top:17px}.launch-section .launch-form label{font-size:17px}.launch-section .email-row{flex-wrap:wrap;padding:6px;gap:4px}.launch-section .email-row input{flex:1 1 150px;min-height:48px}.launch-section .email-row button{flex:1 0 90px}.launch-section .launch-form form>p{font-size:11px;line-height:1.65}}

/* Let the opening occupy the viewport, with only a glimpse of the demo. */
.hero{padding-top:0}
.hero-intro{display:flex;flex-direction:column;box-sizing:border-box;padding-top:64px}
.hero-explore{margin:auto auto 22px;padding:12px 18px;flex-shrink:0}
@media(max-width:600px){.hero-explore{margin-bottom:20px}}

/* The agent is a reader too. A quiet second action that hands over the one
   command, rather than a second door for the same human. */
.button-quiet{background:transparent;border:1px solid var(--line);color:var(--ink);cursor:pointer;font:inherit}
/* .button:hover fills with accent, which on a quiet button leaves ink text
   on a mid-green field. A quiet action stays quiet: the border firms up,
   the fill does not arrive. */
.button-quiet:hover{background:transparent;border-color:var(--ink)}
.button-quiet.copied{border-color:var(--accent);color:var(--accent)}
/* The command itself, on screen. Revealing beats an invisible write. */
.agent-command{margin:14px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;flex-direction:column;gap:8px;max-width:520px}
.agent-command.copied{border-color:var(--accent)}
.agent-command code{font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-break:break-all;user-select:all}
.agent-command-note{font-size:12px;color:var(--muted)}

/* The proposal, given its own chapter. This is the one screen no competitor
   has: a machine that asks instead of writing. It had been a detail inside
   the hero demo, which is the wrong place for the whole argument. */
.review-section{padding:100px 0 0}
.review-stage{margin-top:36px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.review-row{display:flex;align-items:baseline;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.review-who{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.review-title{flex:1;font-size:17px;color:var(--ink)}
.review-weight{font-family:var(--mono);font-size:13px;color:var(--accent)}
.review-note{margin:0;padding:16px 22px;font-size:15px;line-height:1.6;color:var(--muted);border-bottom:1px solid var(--line)}
.review-diff{padding:16px 22px;display:flex;flex-direction:column;gap:4px;font-family:var(--mono);font-size:13px;line-height:1.6}
.d-add{color:#1f5f43;background:rgba(184,218,207,.28);padding:2px 6px;border-radius:4px}
@media(max-width:600px){.review-section{padding-top:56px}.review-row{flex-wrap:wrap;gap:8px;padding:15px 16px}.review-title{flex-basis:100%;font-size:16px}.review-note,.review-diff{padding:14px 16px}.review-diff{font-size:12px}}

/* Rhythm. One value governs the pause between chapters, so the page reads as
   a sequence of beats rather than a stack of panels. Every chapter takes the
   whole pause on top and none on the bottom: the gap between any two is
   exactly --chapter-gap, never the sum of two guesses. This rule sits last
   on purpose; it overrides the nine scattered paddings above it. */
:root{--chapter-gap:200px}
@media(max-width:1100px){:root{--chapter-gap:140px}}

main > .story,main > .chapter{padding-top:var(--chapter-gap);padding-bottom:0}
/* The hero's own exhale before the first chapter. */
main > .hero{padding-bottom:calc(var(--chapter-gap) * .35)}
/* The last chapter needs its own floor before the footer's rule. */
main > .chapter:last-of-type{padding-bottom:calc(var(--chapter-gap) * .7)}

/* September refinement: a consistent reading column and evidence in the hero. */
:root{--chapter-gap:104px}
.top .brand-frame,.footer-identity .brand img{border:1px solid #b8c9b9;border-radius:10px 10px 3px 10px;background:#eaf0e3}
.top .brand-frame{display:grid;place-items:center;width:42px;height:44px}
.footer-identity .brand img{box-sizing:content-box;width:23px;height:27px;padding:7.5px 8.5px}
.top .brand-frame img{width:23px;height:27px}
.hero h1{font-size:clamp(50px,6.1vw,86px);line-height:1.05;letter-spacing:-.055em;max-width:1060px}
.hero h1 em{display:block;margin-top:8px}
.hero .hero-bottom,html:lang(ko) .hero-bottom{grid-template-columns:minmax(0,1.4fr) minmax(240px,.6fr);gap:64px;align-items:center;margin:32px 0 28px}
.hero-message{max-width:620px}
.hero .lede{font-size:21px;line-height:1.55;max-width:560px}
.hero-keywords{list-style:none;display:flex;flex-wrap:wrap;gap:10px 20px;padding:0;margin:20px 0 26px;font-size:12px;color:var(--accent)}
.hero .actions{align-items:flex-start}
.hero .action-row{flex-wrap:wrap;gap:12px}
.hero .button-quiet{font-size:14px}
main>.hero{padding-bottom:0}
.story-head{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:760px}
.story-head h2{font-size:clamp(34px,4vw,52px);line-height:1.13}
.story-head .story-copy{max-width:620px;font-size:18px;line-height:1.65}
.story-head .section-index{margin-bottom:16px;color:var(--accent)}
main>.no-model{margin-top:var(--chapter-gap);padding:38px 42px 0}
main>.no-model .no-model-grid{padding-top:18px}
main>.launch-section.chapter{padding:48px;margin-top:var(--chapter-gap);margin-bottom:48px}
main>.chapter:last-of-type{padding-bottom:48px}
.product-stage .workspace{grid-template-columns:180px minmax(0,1fr) 250px;min-height:420px}
.product-stage .sidebar{display:block}
.product-stage .sidebar .side-label,.product-stage .sidebar .side-item{display:flex}
.product-stage .doc{padding:26px 30px}
.product-stage .doc-body{margin-top:26px}
.product-stage .doc h3{font-size:32px}
.product-stage .doc-prose{font-size:17px;line-height:1.6;margin-top:22px}
.demo-summary{max-width:440px}
.demo-outline{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 26px;font-family:var(--sans);font-size:10px;color:var(--muted)}
.demo-outline span{border:1px solid #dce4d5;border-radius:3px;padding:3px 7px}
.doc-prose h4{font-family:var(--sans);font-size:14px;font-weight:600;margin:20px 0 9px}
.demo-list{padding-left:18px;font-size:15px;line-height:1.75;margin-bottom:22px}
.product-stage .terminal{min-height:420px;font-size:14px;white-space:normal}
.product-stage .terminal pre{white-space:pre-wrap;overflow-wrap:anywhere}
.review-stage{max-width:940px;background:#fffdf6}
.review-note{font-style:normal;max-width:none}
.review-diff{white-space:normal;overflow-wrap:anywhere}
.activity-example{grid-template-columns:1fr;gap:18px;max-width:760px}
.activity-example>div:first-child{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
@media(max-width:1000px){.hero .lede{font-size:19px}.product-stage .workspace{grid-template-columns:minmax(0,1fr) 230px}.product-stage .sidebar{display:none}}
@media(max-width:600px){
 :root{--chapter-gap:64px}
 .top .brand-frame,.footer-identity .brand img{border-radius:7px 7px 2px 7px}.top .brand-frame{width:32px;height:34px}.top .brand-frame img{width:19px;height:22px}.footer-identity .brand{font-size:23px;gap:9px}.footer-identity .brand img{width:19px;height:22px;padding:5px 5.5px}
 .hero-intro{padding-top:28px}
 .hero h1{font-size:39px;line-height:1.1;margin-top:22px}
 .hero .hero-bottom,html:lang(ko) .hero-bottom{grid-template-columns:1fr;gap:24px;margin:22px 0 24px}
 .hero .lede{font-size:17px}
 .hero-keywords{font-size:11px;margin:16px 0 20px}
 .hero .action-row{gap:9px}.hero .button,.hero .button-quiet{font-size:12px;padding:12px;min-height:44px}
 .hero-explore{margin-top:auto}
 .product-stage .workspace{grid-template-columns:1fr}.product-stage .doc{padding:20px}.product-stage .doc h3{font-size:27px}.product-stage .doc-prose{font-size:16px}.demo-outline{margin:14px 0 18px}.demo-list{font-size:14px}.product-stage .terminal{font-size:12px;min-height:540px}
 .product-stage .proposal{gap:12px}
 .story-head{gap:16px}.story-head .story-copy{font-size:16px}.story-head h2{font-size:34px}
 main>.no-model{padding:26px 23px 0;margin-bottom:0}
 main>.launch-section.chapter{padding:28px 20px;margin-bottom:36px}
 .activity-example>div:first-child{gap:10px}
 html:lang(ko) .hero h1{font-size:36px}
}

/* Product labels are metadata; only the benchmark source is a link. */
.hero-keywords{gap:8px}
.hero-keywords li{border:0;border-radius:4px;background:#e9eee5;padding:6px 9px;font-size:11px;font-weight:500;color:#425b4c;line-height:1.3}
@media(max-width:600px){
 .hero-keywords{gap:7px}.hero-keywords li{font-size:10px;padding:6px 8px}
}

/* A tiny Hanji: three contributors, one continuous 5.6-second vignette. */
.hero .hero-bottom,html:lang(ko) .hero-bottom{grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:70px}
.mini-hanji{margin:0;min-width:0;perspective:1000px;padding:12px 10px 0}
.mini-window{position:relative;background:#fffef8;border:1px solid #ced9ca;border-radius:16px;box-shadow:0 22px 40px -23px #23433366,4px 5px 0 #e0e7d9,5px 6px 0 #c7d3c0;transform:rotateY(-9deg) rotateX(5deg) rotateZ(2deg);transform-style:preserve-3d;height:280px}
.mini-chrome{height:43px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #e2e8db;border-radius:16px 16px 0 0;background:#f0f4e9}
.mini-brand{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600}.mini-brand img{width:13px;height:16px}
.mini-presence{display:flex;padding-left:5px}.mini-presence i{display:grid;place-items:center;font:500 8px var(--sans);font-style:normal;width:20px;height:20px;margin-left:-3px;border:2px solid #f0f4e9;border-radius:50%;background:#d4e6d8;color:#285b45}.mini-presence i:nth-child(2){background:#e8d8ba;color:#6f4f22}.mini-presence i:nth-child(3){background:#dfd9ef;color:#6b5495}.mini-presence i:nth-child(4){background:#cfdeed;color:#466d91}
.mini-body{display:flex;height:calc(100% - 43px)}.mini-nav{display:flex;flex-direction:column;gap:21px;align-items:center;width:39px;flex:none;padding-top:20px;border-right:1px solid #e4e9df;color:#879d88;background:#f8faf3;border-radius:0 0 0 16px;font-size:12px}
.mini-paper{padding:17px 21px;min-width:0;flex:1;position:relative}.mini-crumb{font-size:8px;color:#86927e}.mini-paper h3{font:500 21px var(--serif);letter-spacing:-.5px;color:#203e35;white-space:nowrap}.mini-rule{border-radius:2px;background:#e8ece2}.rule-long{width:86%}.rule-short{width:57%}
.mini-written{font:12px var(--serif);white-space:nowrap;animation:mini-write 5.6s linear infinite}
.mini-proposed{align-items:center;gap:6px;font-size:10px;background:#e6efdd;border-radius:4px;color:#416f4c;animation:mini-proposal 5.6s ease infinite}.mini-proposed b{margin-left:auto;font-weight:400;font-size:7px;opacity:.65}.mini-reviewed{left:21px;bottom:17px;color:#477760;animation:mini-review 5.6s ease infinite}
.mini-cursor{position:absolute;z-index:2;pointer-events:none;display:flex;align-items:flex-start;gap:0;animation-duration:5.6s;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.2,1)}.mini-cursor svg{width:15px;height:19px;flex:none;filter:drop-shadow(0 1px 1px #0002)}.mini-cursor>span{margin-top:14px;margin-left:-4px;color:white;background:currentColor;border-radius:3px 6px 6px 6px;padding:3px 6px;white-space:nowrap;font-size:9px;box-shadow:0 2px 4px #0001}.mini-cursor small{font-size:7px;opacity:.8;margin-left:3px}
.cursor-ada{color:#32765a;animation-name:cursor-ada}.cursor-ada>span{background:#32765a}.cursor-claude{color:#8062a3;animation-name:cursor-claude}.cursor-claude>span{background:#8062a3}.cursor-codex{color:#4b799c;animation-name:cursor-codex}.cursor-codex>span{background:#4b799c}
.mini-hanji figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:23px;color:var(--muted);font-size:9px}.mini-hanji.is-paused *{animation-play-state:paused!important}

@media(max-width:1000px){.hero .hero-bottom,html:lang(ko) .hero-bottom{grid-template-columns:1fr 1fr;gap:24px}.mini-paper{padding:17px 14px}.mini-paper h3{font-size:18px}.mini-proposed{font-size:9px}}
@media(max-width:700px){.hero .hero-bottom,html:lang(ko) .hero-bottom{grid-template-columns:1fr}.mini-hanji{width:100%;max-width:420px;justify-self:center;padding:6px 8px 0}.mini-window{transform:rotateY(-6deg) rotateX(3deg) rotateZ(1deg)}.mini-hanji figcaption{margin-top:14px}.mini-paper h3{font-size:20px}}
@media(max-width:360px){.mini-paper h3{font-size:17px}.mini-cursor>span{font-size:8px;padding:3px 4px}.mini-cursor small{font-size:6px}}
@media(prefers-reduced-motion:reduce){.mini-hanji *{animation:none!important}.mini-written{clip-path:none}.mini-cursor{opacity:1}.cursor-ada{left:8%;top:42%}.cursor-claude{left:58%;top:64%}.cursor-codex{left:12%;top:86%}}

/* Write two lines, propose two, check each, then the human merges. */
.mini-window{height:302px;transform:rotateY(calc(-6deg + var(--tilt-y,0deg))) rotateX(calc(4deg + var(--tilt-x,0deg))) rotateZ(1deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.mini-paper h3{margin:11px 0 8px}.mini-rule{height:3px;margin-top:5px}
.mini-edits{margin-top:13px}.mini-written{margin:0;line-height:1.7;font-size:12px;animation-name:mini-line-one}
.mini-written.line-two{animation-name:mini-line-two}
.mini-proposed{display:block;margin-top:9px;padding:5px 8px;animation-name:mini-proposal-two}
.mini-add{line-height:1.8;position:relative;padding-right:14px;animation:mini-add-one 5.6s linear infinite}
.mini-add.add-two{animation-name:mini-add-two}
.mini-add i{position:absolute;right:0;font-style:normal;color:#32765a;animation:mini-check-one 5.6s linear infinite}.mini-add.add-two i{animation-name:mini-check-two}
.mini-review-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px}
.mini-reviewed{position:static;font-size:8px;animation-name:mini-check-two}
.mini-merge{position:relative;display:grid;place-items:center;width:57px;height:24px;border-radius:5px;background:#285d46;color:#fff;font-size:9px;flex:none;animation:mini-merge-click 5.6s ease infinite}
.mini-merge>span{grid-area:1/1}.merge-before{animation:mini-merge-before 5.6s linear infinite}.merge-after{animation:mini-merge-after 5.6s linear infinite}
.mini-merge::after{content:'';position:absolute;inset:-5px;border:1px solid #6d9c7e;border-radius:9px;animation:mini-click-ring 5.6s ease-out infinite}
@keyframes mini-line-one{0%,5%{clip-path:inset(0 100% 0 0);opacity:0}6%{opacity:1}17%,94%{clip-path:inset(0);opacity:1}100%{opacity:0}}
@keyframes mini-line-two{0%,14%{clip-path:inset(0 100% 0 0);opacity:0}15%{opacity:1}26%,94%{clip-path:inset(0);opacity:1}100%{opacity:0}}
@keyframes mini-proposal-two{0%,28%{opacity:0;transform:translateY(3px);background:#e6efdd}33%,82%{opacity:1;transform:translateY(0);background:#e6efdd}86%,94%{opacity:1;transform:translateY(0);background:#f2f5eb}100%{opacity:0}}
@keyframes mini-add-one{0%,28%{clip-path:inset(0 100% 0 0)}39%,100%{clip-path:inset(0)}}
@keyframes mini-add-two{0%,38%{clip-path:inset(0 100% 0 0)}48%,100%{clip-path:inset(0)}}
@keyframes mini-check-one{0%,53%{opacity:0}57%,94%{opacity:1}100%{opacity:0}}
@keyframes mini-check-two{0%,63%{opacity:0}68%,94%{opacity:1}100%{opacity:0}}
@keyframes mini-merge-before{0%,81%{opacity:1}83%,100%{opacity:0}}
@keyframes mini-merge-after{0%,81%{opacity:0}83%,94%{opacity:1}100%{opacity:0}}
@keyframes mini-merge-click{0%,79%,87%,100%{transform:scale(1)}82%{transform:scale(.9)}}
@keyframes mini-click-ring{0%,79%{opacity:0;transform:scale(.85)}82%{opacity:.7}91%,100%{opacity:0;transform:scale(1.4)}}
@keyframes cursor-ada{0%,100%{left:10%;top:38%;opacity:0}6%{opacity:1}15%{left:56%;top:49%;opacity:1}25%{left:61%;top:56%;opacity:1}34%,68%{left:8%;top:44%;opacity:.45}79%,85%{left:82%;top:87%;opacity:1}94%{left:70%;top:86%;opacity:.6}99%{opacity:0}}
@keyframes cursor-claude{0%,100%{left:65%;top:29%;opacity:0}25%{opacity:.5}37%{left:57%;top:64%;opacity:1}47%{left:58%;top:71%;opacity:1}58%,94%{left:73%;top:32%;opacity:.45}99%{opacity:0}}
@keyframes cursor-codex{0%,100%{left:69%;top:45%;opacity:0}45%{opacity:.5}55%{left:82%;top:64%;opacity:1}65%{left:82%;top:71%;opacity:1}72%,94%{left:22%;top:89%;opacity:.5}99%{opacity:0}}
@media(max-width:700px){.mini-window{height:302px}.mini-written{font-size:11px}.mini-paper{padding-inline:14px}.mini-review-bar{margin-top:11px}.mini-reviewed{font-size:7px}}
@media(prefers-reduced-motion:reduce){.mini-window{transform:rotateY(-6deg) rotateX(4deg) rotateZ(1deg)}.mini-merge .merge-before{display:none}.mini-merge::after{display:none}.mini-add{clip-path:none}}

/* The exposed edges follow the same perspective as the face. */
.mini-window{box-shadow:0 22px 40px -23px #23433366,var(--edge-right,4px) var(--edge-bottom,5px) 0 #e0e7d9,calc(var(--edge-right,4px) + 1px) calc(var(--edge-bottom,5px) + 1px) 0 #c7d3c0;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1)}
@media(prefers-reduced-motion:reduce){.mini-window{transition:none}}

/* Screens. The opening owns a viewport, and the demo below it owns the next
   one. A chapter dense enough to nearly fill a screen is given the whole one
   and centred in it; a short chapter is left to flow in the rhythm above, so
   the page alternates between held screens and passing beats.
   --top-h mirrors .top's height, so the opening lands exactly on the fold. */
:root{--top-h:96px}
@media(max-width:600px){:root{--top-h:77px}}
@media(max-width:360px){:root{--top-h:70px}}
.hero-intro{min-height:calc(100svh - var(--top-h))}
/* The vignette is the only fixed height in the opening, so it is the one that
   gives way on a short window. It never grows past its drawn size, and phones
   keep theirs: there the opening is taller than the screen no matter what. */
@media(min-width:701px){.mini-window{height:clamp(288px,30svh,312px)}
/* The Korean headline takes three lines where English takes two, so the
   vignette gives up a little more to keep the same fold. */
html:lang(ko) .mini-window{height:clamp(296px,30svh,312px)}}

/* The demo is the second screen: one viewport, the mockup centred in it and
   given more room than it had when it was only a glimpse under the fold. The
   card is inset from the top and bottom the way it is from the sides, so it
   reads as a card standing on the page rather than a full-bleed panel.
   --stage-inset tracks the .wrap gutter, which is 60-96px on a desktop width,
   32px once .wrap goes edge-relative, and 18px on a phone. Card plus its two
   insets still comes to one screen, so the demo stays a screen you scroll to. */
:root{--stage-inset:64px}
@media(max-width:1100px){:root{--stage-inset:32px}}
@media(max-width:600px){:root{--stage-inset:18px}}
.product-stage{min-height:calc(100svh - var(--stage-inset) * 2);margin-block:var(--stage-inset);display:flex;flex-direction:column;justify-content:center;padding-bottom:24px;border-radius:12px}
.product-stage .workspace,.product-stage .terminal{min-height:min(600px,64svh)}
/* The card's bottom inset is the hero's exhale now, so the hero does not add
   a second one on top of it. */
main > .hero{padding-bottom:0}

/* The dense chapters. The others flow: the editor and proposal chapters, the
   deployment list, the closing invitation. Each screen keeps its --chapter-gap
   on top, so the pause between beats is the same one value as before, and the
   centring only spends the room left over. The dark no-model panel is left out
   on purpose: at four fifths of a screen its leftover room became a band of
   empty dark inside the card, which reads as a mistake rather than a pause. */
.permission-section,.collaboration-section,.compare-section{min-height:100svh;display:flex;flex-direction:column;justify-content:center}

/* Japanese measures. The same problems Hangul has: there is no true italic,
   so the display em must not be slanted, and full-width glyphs read far
   larger than Latin at the same size, so every display size comes down. The
   fonts are the reader's own; shipping a Japanese webfont would cost more
   than the whole page weighs. Line breaking is the browser's, which is
   already correct for Japanese, so only kinsoku is asked for. */
html:lang(ja){--serif:'Hiragino Mincho ProN','Yu Mincho','Noto Serif JP',Georgia,serif;--sans:'DM Sans','Hiragino Sans','Yu Gothic','Noto Sans JP',sans-serif}
html:lang(ja) body{line-break:strict;overflow-wrap:break-word}
html:lang(ja) h1 em,html:lang(ja) h2 em{font-style:normal}
html:lang(ja) h1{font-size:clamp(42px,5.2vw,74px);line-height:1.24;letter-spacing:-.04em;max-width:1200px}
html:lang(ja) h2{font-size:clamp(31px,3.5vw,49px);line-height:1.34;letter-spacing:-.03em}
html:lang(ja) .lede{line-height:1.8}
html:lang(ja) .doc h3{font-size:28px;line-height:1.5;letter-spacing:-.5px}
html:lang(ja) .doc-prose{font-size:16px;line-height:1.9}
html:lang(ja) .doc-prose h4{font-size:19px}
html:lang(ja) .flow-quote{font-size:25px;line-height:1.6}
html:lang(ja) .margin-page>p{font-size:clamp(24px,2.4vw,33px);line-height:1.7}
html:lang(ja) .fit-matrix{font-size:13px;line-height:1.75}
html:lang(ja) .matrix-corner{font-size:12px;font-style:normal}
html:lang(ja) .mini-window{height:clamp(304px,30svh,312px)}
@media(max-width:600px){
html:lang(ja) h1,html:lang(ja) .hero h1{font-size:34px;line-height:1.35}
html:lang(ja) h2{font-size:29px;line-height:1.4}
html:lang(ja) .doc h3{font-size:25px}
html:lang(ja) .product-stage .doc h3{font-size:22px;line-height:1.5}
html:lang(ja) .product-stage .doc-prose{font-size:17px;line-height:1.7}
html:lang(ja) .margin-page>p{font-size:24px;line-height:1.65}
html:lang(ja) .fit-matrix{font-size:12px}
html:lang(ja) .nav{gap:12px}
}

/* Five languages plus an action do not fit a phone's header. The GitHub link
   already steps aside at 600px; below 480px the docs button does too, since
   the hero repeats it as the primary action a thumb's width below. The
   switcher stays: a reader who needs another language needs it here. */
@media(max-width:480px){.top .nav .nav-cta{display:none}}
/* At 320px even five labels need the gap pulled in. */
@media(max-width:360px){.top .nav{gap:8px}}

/* German and French measures. The words are simply longer: the opening
   headline needs a wider line to stay the two lines the design is built
   around, rather than a smaller type size, which would cost the page its one
   loud voice. Korean and Japanese need the opposite and get it above. */
html:lang(de) .hero h1,html:lang(fr) .hero h1{max-width:1240px}

/* The language picker and the theme control.
   The picker is a native <details>: it opens on click and on Enter, closes on
   Escape, and still works with JavaScript off, which a hand-built menu would
   not. Rows carry each language's own name, because a reader hunting for their
   language looks for the word they call it by, not a two-letter code. */
.picker{position:relative}
.picker>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px;font-size:13px;color:var(--muted);cursor:pointer;list-style:none;white-space:nowrap}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary:hover,.picker[open]>summary{color:var(--accent)}
.picker .caret{width:6px;height:6px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.picker[open] .caret{transform:translateY(1px) rotate(-135deg)}
.lang-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:60;min-width:196px;display:grid;gap:1px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:9px;box-shadow:var(--pop-shadow);animation:surface-in .18s ease}
.lang-option{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:40px;padding:0 11px;border-radius:5px;font-size:14px;line-height:1.3;color:var(--ink);text-decoration:none}
.lang-option i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--muted)}
.lang-option:hover{background:var(--surface);color:var(--accent)}
.lang-option.is-current{background:var(--surface);cursor:default}
.lang-option.is-current i{color:var(--accent)}

/* Three states, not a toggle: a reader who has never chosen is on System, and
   the control should say so rather than pretend to be on one of the other two. */

/* Two tokens the picker and the theme control needed, named here so the dark
   theme has one place to answer them. */
:root{--surface:#eef2eb;--pop-shadow:0 14px 34px -12px #1726231f;--ins-bg:#dbeadc;--ins-from:#7e9376;--quiet:#5c6b5a}
/* --quiet is --muted with a green cast instead of a blue-grey one, at the same
   luminance. Twelve small labels had drifted to their own lighter greens and
   sat between 2.4:1 and 4.4:1 on paper; they all point here now. Chosen as the
   LIGHTEST green that still clears 4.55:1 on every background such a label
   lands on, so it stays quiet without going dark. */

/* Dark. The page turns over; the two product depictions do not. The hero
   vignette and the demo mockup stay light, because they are pictures of paper
   and that is the whole pitch: a dark page framing a lit document is the look,
   and it avoids inventing a dark product UI that does not exist yet.

   These nine values are chosen. Everything after them is derived from the light
   stylesheet by role, because the long tail is a hundred near-identical tints
   whose job is to sit a hair above or below a surface, and a hair is a formula,
   not a decision. Text lightens, surfaces land in a narrow band above the page,
   borders stay just visible, and anything already light or already dark, a chip
   label or an ink-filled button, keeps the polarity it had. */
html[data-theme=dark]{
 color-scheme:dark;
 --paper:#121715;
 --ink:#e7eee6;
 --muted:#93a59b;
 --line:#28322d;
 --celadon:#7fc0b0;
 --accent:#6ec2a4;
 --dark:#1b2f29;
 --surface:#1c2320;
 --pop-shadow:0 18px 40px -16px #00000099;
 --ins-bg:#24402f;
 --ins-from:#7fa38c;
 --quiet:#93a59b}
html[data-theme=dark] :focus-visible{outline:3px solid #0e241e}
html[data-theme=dark] .text-link{border-bottom:1px solid #1f2521}
html[data-theme=dark] .diff{border:1px solid #2c302a}
html[data-theme=dark] .flow-panel{background:#2b2b2a}
html[data-theme=dark] .flow-quote del{color:#8f9b8b}
html[data-theme=dark] .git-panel{background:#272926}
html[data-theme=dark] .git-panel pre{color:#90be82}
html[data-theme=dark] .git-panel .minus{color:#e28e7f}
html[data-theme=dark] .git-panel .plus{color:#7fbd78}
html[data-theme=dark] .permission-demo{background:#272926;border:1px solid #2d302b}
html[data-theme=dark] .identity-picker button{border:1px solid #2a2d28}
html[data-theme=dark] .permission-tree{background:#2b2b2a;border:1px solid #2d2f2a}
html[data-theme=dark] .tree-page{border-bottom:1px solid #30312e}
html[data-theme=dark] .tree-page small{color:#8f9f83}
html[data-theme=dark] .file-icon{border:1px solid #192214}
html[data-theme=dark] .access-label{color:#8ba57c}
html[data-theme=dark] .annotated{background-image:linear-gradient(#2c4a3c,#2c4a3c)}
html[data-theme=dark] .margin-line::before{border:1px solid #1f261d}
html[data-theme=dark] .margin-thread{background:#2b2b2a}
html[data-theme=dark] .comment-item small{color:#87967d}
html[data-theme=dark] .activity-legend span+span i{background:#0e1d16}
html[data-theme=dark] .activity-day i+i{background:#0e1d16}
html[data-theme=dark] .option-number{color:#839876}
html[data-theme=dark] .code-block{background:#272825}
html[data-theme=dark] .code-block pre{color:#95c188}
html[data-theme=dark] .reading-progress{background:#0d1d17}
html[data-theme=dark] .compare-desktop-note{color:#84997a}
html[data-theme=dark] .matrix-corner{color:#819378}
html[data-theme=dark] .fit-matrix thead small{color:#84997a}
html[data-theme=dark] .fit-matrix tbody td{color:#9bb59b}
html[data-theme=dark] .fit-matrix [data-tool="hanji"]{background:#262824;color:#95caa8;border-color:#292f26}
html[data-theme=dark] .fit-matrix thead [data-tool="hanji"]{color:#f2f5ed}
html[data-theme=dark] .fit-matrix tbody small{color:#899c7e}
html[data-theme=dark] .fit-matrix [data-tool="hanji"] small{color:#81a974}
html[data-theme=dark] .compare-picker select{border:1px solid #242a21}
html[data-theme=dark] .fit-matrix tbody [data-tool]:not([data-tool="hanji"]).column-reading{background:#272925;color:#95caa8}
html[data-theme=dark] .fit-matrix thead [data-tool]:not([data-tool="hanji"]).column-reading{background:#272925;box-shadow:inset 0 2px #060e04bf}
html[data-theme=dark] .fit-matrix tbody [data-tool="hanji"].column-reading{background:#232720}
html[data-theme=dark] .fit-matrix thead [data-tool="hanji"].column-reading{background:#101d16}
html[data-theme=dark] .launch-heading h2 em{background:linear-gradient(#1c2219,#1c2219) left 94%/0% 1px no-repeat}
html[data-theme=dark] .flow{background:#2b2b2a}
html[data-theme=dark] .flow-arrow{background:#2b2b2a}
html[data-theme=dark] .flow-arrow .link-arrow{background:#2b2b2a}
html[data-theme=dark] .agent-command{background:#2b2b2b}
html[data-theme=dark] .top .brand-frame,html[data-theme=dark] .footer-identity .brand img{border-color:#232a24;background:#262824}
html[data-theme=dark] .review-stage{background:#2b2b28}
html[data-theme=dark] .hero-keywords li{background:#262825;color:#97bba5}

/* The dark panels now sit on a dark page, so they need an edge to stay panels. */
html[data-theme=dark] .product-stage,html[data-theme=dark] .no-model{border:1px solid #27403a}
html[data-theme=dark] .launch-section{border-top-color:var(--line)}
/* The mockup keeps its paper, so its shadow has to work against dark. */
html[data-theme=dark] .mini-window{box-shadow:0 26px 50px -22px #00000099,var(--edge-right,4px) var(--edge-bottom,5px) 0 #2a3a31,calc(var(--edge-right,4px) + 1px) calc(var(--edge-bottom,5px) + 1px) 0 #1d2a24}

/* The hero vignette and the demo mockup are pictures of paper, so inside them
   the tokens keep their daylight values. Without this the page's own ink token
   would follow the theme and write light text onto a light document. */
html[data-theme=dark] .mini-window,html[data-theme=dark] .product-stage .workspace{--paper:#f9faf6;--ink:#172623;--muted:#5a6963;--line:#d9e0d8;--accent:#216d61;--celadon:#b8dacf;--surface:#eef2eb;--dark:#172d28;--quiet:#5c6b5a;color:var(--ink)}
/* Re-stating colour on the container matters: a child that inherits colour
   inherits the computed value from the page, not the token we just pinned. */

/* Three the contrast check caught once the page went dark: the proposal's
   added line and the comment count both kept a colour chosen against paper,
   and the Hanji column's subtitle sat too close to its own background. The
   skip link was fixed at its own rule, by giving it tokens instead of white. */
html[data-theme=dark] .d-add{color:#8fd7b2;background:#1b3b2c}
html[data-theme=dark] .comment-count{color:#0e1a15}
html[data-theme=dark] .fit-matrix thead [data-tool="hanji"] small{color:#93bd97}

/* Everything below is a correction to the derived dark values above. The
   derivation asked "what is this colour?" and answered by role, which is right
   for a surface and wrong for anything whose whole job is to be *seen against*
   a surface. A hairline, a chart bar and a focus ring all got darker as the
   page got darker, which is exactly backwards. Measured against --paper
   #121715 unless noted. */

/* The focus ring was 1.13:1. Every keyboard reader on the page lost it. */
html[data-theme=dark] :focus-visible{outline:3px solid #6ec2a4}

/* The activity chart's argument is "people above, agents below". The agent
   half was 1.06:1, so the chart showed one side and the caption lied. */
html[data-theme=dark] .activity-day i+i,html[data-theme=dark] .activity-legend span+span i{background:#6aab90}
html[data-theme=dark] .activity-bars::after{background:#33443c}

/* Marks that have to be visible or they are not marks. */
html[data-theme=dark] .reading-progress{background:var(--accent)}
html[data-theme=dark] .margin-line{background:#51655b}
html[data-theme=dark] .margin-line::before{border-color:#51655b}
html[data-theme=dark] .annotated::after{background:#4c7a66}
html[data-theme=dark] .file-icon{border-color:#7d9a72}
html[data-theme=dark] .file-icon::after{background:#7d9a72;box-shadow:0 4px #7d9a72}

/* These two sit on their own fixed backgrounds, which never turned over, so
   they should not have been darkened at all. */
html[data-theme=dark] .launch-heading h2 em{background-image:linear-gradient(#7fc0b0,#7fc0b0)}
html[data-theme=dark] .email-row input::placeholder{color:#69776c}

/* The selected identity kept its fill but lost its border to a later rule. */
html[data-theme=dark] .identity-picker button[aria-pressed=true]{border-color:var(--ink)}

/* The vignette's pause control. It is always visible, not hover-revealed: a
   control a reader has to discover by accident is not a mechanism. It is quiet
   until you reach it, and it answers the space bar because it is a button, which
   is the only way to answer the space bar without taking it from page scrolling. */
.mini-controls{display:flex;justify-content:flex-start;margin-top:10px}
/* The canvas has a floor now: the vignette's own layout needs 268px, and 280px
   in Japanese, and squeezing below that threw the Merge button clean off the
   window. Above 700px the control is lifted out of the flow so paying for that
   floor does not cost the opening its fold; on a phone it stays in the flow,
   where the hero is taller than the screen regardless. */
@media(min-width:701px){.mini-hanji{position:relative}.mini-controls{position:absolute;left:10px;bottom:-30px;margin:0}}
.mini-pause{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 4px;border:0;background:transparent;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:.06em;cursor:pointer;opacity:.7;transition:opacity .2s,color .2s}
.mini-pause:hover,.mini-pause:focus-visible{opacity:1;color:var(--accent)}
.mini-pause i{width:9px;height:10px;flex:none;border-left:3px solid currentColor;border-right:3px solid currentColor}
.mini-pause.is-playing i{width:0;height:0;border:5px solid transparent;border-left:8px solid currentColor;border-right:0}
@media(max-width:600px){.mini-pause{min-height:44px;padding:0 8px}}

/* The header reads as two things, not five. GitHub and the docs button are the
   page's own navigation and stay with the wordmark's weight; the language and
   the theme are settings about how you read it, so they sit apart at the far
   right with a gap wide enough to be a separation rather than a list item. */
.nav{gap:0}
.nav-main{display:inline-flex;align-items:center;gap:32px}
.nav-prefs{display:inline-flex;align-items:center;gap:14px;margin-left:72px}
@media(max-width:1100px){.nav-main{gap:24px}.nav-prefs{margin-left:48px}}
@media(max-width:850px){.nav-main{gap:20px}.nav-prefs{margin-left:36px}}
@media(max-width:600px){.nav-main{gap:16px}.nav-prefs{gap:10px;margin-left:24px}}
/* Below 480px both of nav-main's links have already stepped aside, so the
   group itself should too rather than leave a gap standing in for them. */
@media(max-width:480px){.nav-main{display:none}.nav-prefs{margin-left:0}}
/* At 360px the three 44px theme targets and five languages no longer both fit;
   36px still clears the 24px floor comfortably. */

/* Korean and Japanese carry a taller headline and a taller vignette floor than
   the Latin locales, which together ran the opening past the fold at 1440x900.
   The difference comes out of the gap around the hero's lower row rather than
   out of the display type, which is the page's voice. */
html:lang(ko) .hero .hero-bottom,html:lang(ja) .hero .hero-bottom{margin:20px 0 18px}

/* The theme control, wearing the language picker's clothes. The header shows
   only the mode you chose; the three options appear when you ask for them.
   Which face shows is decided in CSS from html[data-theme-choice], which the
   inline <head> script writes before first paint, so the right one is there
   with no JavaScript and no flash. With no attribute at all, System shows,
   which is also the default. */
.theme-now{display:inline-flex;align-items:center}
.theme-now>span{display:none;align-items:center;gap:7px}
html[data-theme-choice=light] .theme-now>span[data-mode=light],
html[data-theme-choice=dark] .theme-now>span[data-mode=dark],
html[data-theme-choice=system] .theme-now>span[data-mode=system],
html:not([data-theme-choice]) .theme-now>span[data-mode=system]{display:inline-flex}
.theme-now svg,.theme-row>svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.theme-now svg path[d^="M13.4"],.theme-row>svg path[d^="M13.4"]{fill:currentColor;stroke:none}
.theme-menu{min-width:168px}
.theme-row{gap:12px;justify-content:flex-start;cursor:pointer}
.theme-row>span{flex:1}
.theme-row input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.theme-row:has(input:checked){background:var(--surface);color:var(--accent)}
.theme-row:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:-3px}

/* The floor was set at the height where the vignette stops overflowing, which
   is not the same as the height where it looks right: the Merge chip ended up
   1px off the window's edge in Japanese and 6 to 8px in the others. The floor
   now includes the clearance, and the opening pays for it out of its own
   spacing rather than out of the fold. */
.hero-intro{padding-top:56px}
.hero-explore{margin-bottom:12px}