@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--paper:#f6f3ec;--ink:#152a35;--muted:#67716e;--line:#d8d9cf;--accent:#b45835;--navy:#0d2738;--mono:'IBM Plex Mono',monospace;--sans:'DM Sans',Arial,sans-serif;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}::selection{background:#d6bda1;color:var(--ink)}h1,h2,h3,p,figure{margin:0}h2{font:52px/1.08 var(--serif);letter-spacing:-2.4px;font-weight:400}h2 em{font-weight:400;color:var(--accent)}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.skip{position:fixed;z-index:50;top:8px;left:8px;transform:translateY(-150%);padding:10px 16px;background:var(--ink);color:white}.skip:focus{transform:none}.nav{position:sticky;top:0;z-index:30;background:#f6f3ecf5;border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.nav-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px}.wordmark{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:22px;letter-spacing:-1px}.mark{background:var(--navy);color:#f1e3c5;width:38px;height:38px;display:grid;place-items:center;font:italic 29px/1 var(--serif);letter-spacing:-3px;padding-right:4px}.version{font:12px var(--mono);border:1px solid var(--line);padding:3px 5px;letter-spacing:0;margin-left:4px;color:var(--muted)}.nav nav{display:flex;gap:32px;font-size:16px;font-weight:500}.nav a:not(.wordmark):hover{color:var(--accent)}.github-link{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:500}.github-link svg{width:18px;height:18px;fill:currentColor}.github-link{white-space:nowrap;flex-shrink:0}.github-stars{display:inline-flex;align-items:center;gap:7px;padding-left:12px;border-left:1px solid var(--line);font:16px var(--mono);font-variant-numeric:tabular-nums}.github-stars svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linejoin:round}#github-star-count{min-width:1ch}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:68px;align-items:center;padding-block:64px 76px}.eyebrow,.section-label{font:10px/1.6 var(--mono);letter-spacing:1.1px}.eyebrow{display:flex;align-items:center;gap:10px}.live-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}.edition{color:var(--muted);margin-left:auto;font-size:8px}.hero h1{font:82px/.99 var(--serif);letter-spacing:-4.5px;margin-top:33px;font-weight:400}.hero h1 em{color:var(--accent);font-weight:400}.hero-description{font-size:15px;line-height:1.85;max-width:420px;margin-top:30px;color:#5d6765}.hero-description strong{color:var(--ink);font-weight:500}.hero-actions{display:flex;align-items:center;gap:24px;margin-top:29px}.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:12px 21px;font-size:12px;font-weight:500}.primary{background:var(--ink);color:white;border:1px solid var(--ink);transition:background .2s}.primary:hover{background:#254754}.text-link{font-size:11px;display:inline-flex;align-items:center;gap:13px;white-space:nowrap}.text-link:hover{color:var(--accent)}.hero-note{margin-top:33px;color:var(--muted);font-size:11px;line-height:1.6}.mini-rule{display:inline-block;height:1px;background:var(--accent);width:25px;vertical-align:middle;margin-right:9px}.hero-note-indent{margin-left:38px}.hero-figure{position:relative;padding-bottom:36px}.figure-top{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:1px;border-top:1px solid var(--line);padding:13px 0}.figure-top span:last-child{font-size:20px}.hero-figure>:is(img,.writer-art){display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:var(--navy)}.paper-note{position:absolute;bottom:48px;left:-26px;right:26px;display:flex;align-items:center;gap:21px;background:#f4ead5;padding:19px 25px;box-shadow:0 8px 30px #10283816;transform:rotate(-3deg);border:1px solid #e8dcc3}.paper-number{font:70px/.95 var(--serif);letter-spacing:-7px;color:var(--accent);padding-right:6px}.paper-note strong{display:block;font:23px/1.05 var(--serif);letter-spacing:-.5px}.paper-note div>span{display:block;font:8px var(--mono);margin-top:10px;color:#696b5c}.note-asterisk{margin-left:auto;font-size:50px;line-height:1;font-weight:400;color:var(--accent)}figcaption{font:8px var(--mono);text-align:right;letter-spacing:1px;padding-top:14px;color:var(--muted)}.facts{border-block:1px solid var(--line)}.facts-inner{display:flex;justify-content:space-between;gap:24px;padding-block:23px}.facts p{display:flex;align-items:center;gap:11px;font:10px var(--mono);color:#5a6767}.fact-icon{font-size:20px;color:var(--accent)}.intro{padding-block:91px 101px}.section-label{display:flex;justify-content:space-between;color:var(--muted)}.intro-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:90px;margin-top:35px}.intro-body{font-size:14px;line-height:1.85;color:#5d6765}.intro-body p+p{margin-top:19px}.inline-link{display:inline-flex;gap:16px;font-size:10px;color:var(--ink);margin-top:23px;border-bottom:1px solid var(--line);padding-bottom:6px}.inline-link:hover{color:var(--accent)}.method{padding-block:80px 68px;background:#e9ece5;border-block:1px solid #d2d8cc}.method-intro{display:flex;justify-content:space-between;gap:48px;align-items:flex-end;margin-top:31px}.method-intro>p{max-width:340px;font-size:13px;color:#65706a;line-height:1.85}.process-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;margin-top:43px}.step-list{border-top:1px solid #ccd3c7}.step-list button{display:flex;align-items:center;gap:22px;text-align:left;width:100%;border:0;border-bottom:1px solid #ccd3c7;background:transparent;color:#657269;min-height:52px;padding:13px 15px;font-size:13px;transition:background .2s,color .2s}.step-list button>span:first-child{font:10px var(--mono);color:#798579}.step-list button>span:last-child{margin-left:auto;opacity:0}.step-list button[aria-selected=true]{background:var(--navy);color:white;border-bottom-color:var(--navy)}.step-list button[aria-selected=true]>span{color:#d4bb8c}.step-list button[aria-selected=true]>span:last-child{opacity:1}.step-list button:hover:not([aria-selected=true]){background:#dde3d7;color:var(--ink)}.step-panel{position:relative;background:var(--paper);border:1px solid #d8dcce;padding:27px 34px 0;display:flex;flex-direction:column;min-height:520px;overflow:hidden;box-shadow:4px 4px 0 #dde0d3}.panel-meta,.panel-bottom{display:flex;justify-content:space-between;gap:16px;font:8px var(--mono);letter-spacing:1px;color:var(--muted)}.large-step{font:100px/1 var(--serif);letter-spacing:-9px;color:#d9d9c8;align-self:flex-end;margin-top:8px}.step-panel h3{font:34px/1.12 var(--serif);letter-spacing:-1px;margin-top:-18px;max-width:340px;font-weight:400}.step-panel>p{font-size:12px;color:#687068;line-height:1.85;margin-top:22px;min-height:88px;max-width:355px}.gate{margin-block:25px;background:#e8ede3;padding:15px 17px;border:1px solid #d8dfd0}.gate>div{display:flex;gap:8px;align-items:center;font:8px var(--mono);color:#4d6a50}.gate code{font-size:10px;margin-left:auto}.gate-dot{width:5px;height:5px;background:#658268;border-radius:50%}.gate p{margin-top:8px;font-size:10px;line-height:1.7;color:#667363}.panel-bottom{margin-top:auto;margin-inline:-34px;padding:16px 34px;border-top:1px solid var(--line);letter-spacing:.6px}.panel-bottom code{color:var(--ink);font-size:10px}.method-footnote{font-size:10px;color:#778271;max-width:680px;margin-top:28px;line-height:1.8}.artifacts{padding-block:89px 45px}.artifacts-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:100px;align-items:end;margin-top:32px}.artifacts-heading>p{font-size:13px;line-height:1.85;color:var(--muted)}.workspace-preview{margin-top:44px;border:1px solid var(--line);background:#fffdf8;box-shadow:4px 5px 0 #e8e7de}.workspace-bar{height:48px;padding:0 23px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:28px;background:#eeeee5}.workspace-bar>span:first-child{display:flex;gap:5px}.window-dot{width:6px;height:6px;border-radius:50%;border:1px solid #b8bfb3}.workspace-bar>code{font:10px var(--mono);color:#6d786a}.sample-label{margin-left:auto;font:7px var(--mono);letter-spacing:1px;color:#778173}.workspace-content{display:grid;grid-template-columns:250px 1fr;min-height:312px}.file-list{background:#f1f1e9;padding:20px 14px;border-right:1px solid var(--line)}.file-list button{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;border-radius:2px;text-align:left;font:11px var(--mono);color:#6c7869;padding:12px}.file-list button[aria-selected=true]{background:#e1e7da;color:#254c36}.file-list button>span:first-child{font-size:16px}.file-stage{font-size:8px;margin-left:auto;color:#7d8d73}.file-extra{display:block;font:9px/1.9 var(--mono);color:#879180;padding:19px 12px 4px}#file-panel{padding:25px 31px;display:flex;flex-direction:column;min-width:0}.file-caption{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#869080}.file-caption>span:last-child{color:var(--accent);font-size:20px}#file-preview{font:12px/2.15 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:24px 0 35px;color:#435446;min-height:105px}.local-badge{margin-top:auto;font:8px var(--mono);color:#8a9680;display:flex;gap:7px;align-items:center}.local-badge>span{font-size:16px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding-block:33px 85px}.principles article{border-top:1px solid var(--line);padding-top:21px}.principle-icon{font:25px var(--serif);color:var(--accent)}.principles h3{font:23px/1.2 var(--serif);letter-spacing:-.5px;margin-top:15px;font-weight:400}.principles p{font-size:11px;color:var(--muted);margin-top:12px;line-height:1.85;max-width:290px}.install{background:var(--navy);color:var(--paper);padding-block:78px 82px}.install-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.install .eyebrow{color:#acb7b9;font-size:8px}.install h2{font-size:47px;margin-top:24px}.install h2 em{color:#d5b17f}.install-grid>div:first-child>p{font-size:13px;line-height:1.9;color:#9db0b7;max-width:350px;margin-top:25px}.requirements{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:36px;font-size:10px;color:#c8d0cb}.requirements>span{flex-basis:100%;font:7px var(--mono);letter-spacing:1.2px;color:#78909b}.requirements a:hover{color:#e0bf8e}.install-card{background:#142e40;border:1px solid #355061;min-width:0}.install-tabs{display:flex;border-bottom:1px solid #355061;padding-inline:21px;gap:24px}.install-tabs button{border:0;border-bottom:2px solid transparent;color:#8fa6b2;background:none;display:flex;align-items:center;gap:10px;padding:17px 0 15px;font:11px var(--mono)}.install-tabs button[aria-selected=true]{border-bottom-color:#d1ab76;color:#f3ead7}.soon-badge{font:6px var(--mono);border:1px solid #47616b;padding:3px 5px;color:#b5beb3}#install-panel{padding:22px 23px 26px}.install-label{display:flex;align-items:center;justify-content:space-between;gap:16px;font:7px var(--mono);color:#8aa0aa;letter-spacing:.8px}.copy-button{border:0;background:none;color:#bdc9ca;display:flex;align-items:center;gap:8px;font:8px var(--mono);padding:5px 0}.copy-button:hover{color:white}.copy-button:disabled{opacity:.45}.copy-button>span{font-size:13px}.install-command,.usage-command{font:12px/1.9 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;margin:15px 0;color:#e3e6d8}.install-status{font-size:9px;line-height:1.8;color:#89a0ab}.usage-label{border-top:1px solid #355061;padding-top:24px;margin-top:22px}.usage-command{color:#d7bd92;font-size:11px}.command-hint{font:8px/1.8 var(--mono);color:#91a5ae}.command-hint>span{color:#6d8795}.faq{display:grid;grid-template-columns:.65fr 1.35fr;gap:100px;padding-block:83px 88px}.faq h2{margin-top:21px;font-size:44px}.questions{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding-block:20px}summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:22px;font-size:13px}summary::-webkit-details-marker{display:none}summary>span{font:21px var(--serif);color:var(--accent);flex-shrink:0}details[open] summary>span{transform:rotate(45deg)}details p{font-size:12px;line-height:1.9;color:var(--muted);margin-top:16px;max-width:560px;padding-right:20px}footer{border-top:1px solid var(--line);background:#edeee5}.footer-top{padding-block:40px;display:flex;align-items:center;justify-content:space-between;gap:35px}.footer-top p{font:19px/1.2 var(--serif);color:#7b8576}.footer-top>a:last-child{display:flex;gap:24px;font-size:10px}.footer-bottom{border-top:1px solid #d4d9cb;padding-block:20px;display:flex;justify-content:space-between;gap:20px;font:7px/1.7 var(--mono);color:#7e8975;letter-spacing:.5px}.toast{position:fixed;z-index:50;bottom:24px;left:50%;transform:translate(-50%,15px);max-width:calc(100% - 40px);background:var(--ink);color:white;padding:12px 20px;font-size:12px;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 5px 25px #0002}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1450px){.hero{padding-block:80px 90px;gap:85px}.hero h1{font-size:92px}.hero-figure{max-width:495px}}
@media(max-width:1050px){.wrap{width:calc(100% - 64px)}.hero{gap:40px}.hero h1{font-size:68px;letter-spacing:-3px}.hero-description{font-size:13px}.hero-actions{flex-wrap:wrap;gap:18px}.edition{display:none}.paper-note{left:-16px;right:16px;padding:16px 20px;gap:14px}.paper-number{font-size:60px}.paper-note strong{font-size:20px}.note-asterisk{font-size:37px}.intro-grid{gap:45px}.process-grid{gap:35px;grid-template-columns:1fr 1.05fr}.step-panel{padding-inline:24px}.step-panel h3{font-size:30px}.panel-bottom{margin-inline:-24px;padding-inline:24px}.artifacts-heading{gap:50px}.install-grid{gap:45px}.install h2{font-size:39px}.faq{gap:55px}.principles{gap:30px}.nav nav{gap:20px;font-size:15px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.nav-inner{height:72px}.nav nav{display:none}.wordmark{font-size:20px}.mark{width:34px;height:34px;font-size:26px}.version{font-size:10px}.github-link{font-size:14px}.hero{grid-template-columns:1fr;gap:45px;padding-block:43px 35px}.hero h1{font-size:clamp(48px,15vw,68px);letter-spacing:-2.6px;margin-top:24px}.hero-description{font-size:14px;max-width:440px;margin-top:24px}.hero-actions{gap:23px;margin-top:25px}.hero-note{margin-top:24px}.hero-figure{width:100%;max-width:480px;justify-self:center;margin-bottom:10px}.figure-top{font-size:8px}.hero-figure>:is(img,.writer-art){aspect-ratio:1.08;object-position:center 35%}.paper-note{bottom:44px;left:12px;right:16px;padding:17px 24px;gap:20px}.paper-number{font-size:68px}.paper-note strong{font-size:23px}.note-asterisk{font-size:45px}.facts-inner{display:grid;grid-template-columns:1fr 1fr;gap:15px 13px;padding-block:19px}.facts p{font-size:8px;gap:8px}.fact-icon{font-size:17px}h2{font-size:42px;letter-spacing:-1.8px}.intro{padding-block:57px 62px}.section-label{font-size:8px;letter-spacing:.8px}.section-label>span:last-child{font-size:7px}.intro-grid{grid-template-columns:1fr;gap:25px;margin-top:25px}.intro-body{font-size:13px}.method{padding-block:54px 40px}.method-intro{flex-direction:column;align-items:flex-start;gap:22px;margin-top:24px}.method-intro>p{max-width:440px;font-size:12px}.process-grid{grid-template-columns:1fr;gap:25px;margin-top:27px}.step-list{display:grid;grid-template-columns:1fr 1fr}.step-list button{font-size:10px;gap:9px;min-height:50px;padding:10px 9px}.step-list button>span:first-child{font-size:8px}.step-list button>span:last-child{font-size:10px}.step-panel{min-height:465px;padding:23px 25px 0}.large-step{font-size:90px;margin-top:5px}.step-panel h3{font-size:32px;max-width:300px;margin-top:-15px}.step-panel>p{min-height:75px;margin-top:18px;font-size:12px;max-width:100%}.gate{margin-block:22px}.panel-bottom{margin-inline:-25px;padding:15px 25px}.method-footnote{font-size:9px;margin-top:23px}.artifacts{padding-block:57px 25px}.artifacts-heading{grid-template-columns:1fr;gap:24px;margin-top:24px}.artifacts-heading>p{font-size:12px}.workspace-preview{margin-top:29px}.workspace-bar{padding-inline:14px;gap:15px;height:42px}.workspace-bar>code{font-size:8px}.sample-label{display:none}.workspace-content{grid-template-columns:1fr}.file-list{display:grid;grid-template-columns:1fr 1fr;border-right:0;border-bottom:1px solid var(--line);padding:10px;gap:2px}.file-list button{font-size:9px;gap:7px;padding:10px 8px}.file-extra{display:none}#file-panel{padding:22px;min-height:280px}#file-preview{font-size:10px;line-height:2;min-height:125px}.file-caption{font-size:10px}.principles{grid-template-columns:1fr;gap:27px;padding-block:17px 55px}.principles article{display:grid;grid-template-columns:35px 1fr;gap:0 15px;padding-top:19px}.principle-icon{grid-row:1/3}.principles h3{margin-top:0;font-size:24px}.principles p{grid-column:2;margin-top:9px;max-width:none;font-size:12px}.install{padding-block:51px 55px}.install-grid{grid-template-columns:1fr;gap:31px}.install h2{font-size:42px}.install-grid>div:first-child>p{font-size:13px;max-width:400px;margin-top:19px}.requirements{margin-top:23px}.install-card{max-width:100%}.faq{grid-template-columns:1fr;gap:29px;padding-block:51px}.faq h2{font-size:39px;margin-top:15px}summary{font-size:12px}details p{font-size:11px}.footer-top{flex-wrap:wrap;gap:25px;padding-block:31px}.footer-top p{font-size:18px}.footer-top>a:last-child{flex-basis:100%;justify-content:space-between;font-size:10px;padding-top:2px}.footer-bottom{flex-wrap:wrap;gap:13px;font-size:6px}.footer-bottom>span:nth-child(2){order:3;flex-basis:100%}}
@media(max-width:370px){.github-label{display:none}.github-link{gap:7px}.wrap{width:calc(100% - 32px)}.hero h1{font-size:48px}.hero-actions{gap:17px}.button{padding-inline:16px;gap:20px}.text-link{font-size:10px;gap:8px}.step-list button{font-size:9px;gap:7px}.step-panel{padding-inline:20px}.panel-bottom{margin-inline:-20px;padding-inline:20px}.paper-note{gap:17px;padding:15px 18px}.paper-note strong{font-size:21px}.note-asterisk{font-size:35px}.install h2{font-size:36px}.hero-figure>:is(img,.writer-art){aspect-ratio:1}.section-label>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Match the surface behind the sticky header while keeping its controls legible. */
.nav {
  --nav-background: #081b32;
  --nav-foreground: var(--paper);
  --nav-muted: var(--muted);
  --nav-border: var(--line);
  --nav-accent: var(--accent);
  --nav-mark-background: var(--navy);
  --nav-mark-foreground: #f1e3c5;
  background: var(--nav-background);
  color: var(--nav-foreground);
  border-bottom-color: var(--nav-border);
  backdrop-filter: none;
}
.nav[data-theme="dark"] {
  --nav-muted: #b4c4cc;
  --nav-border: #f6f3ec38;
  --nav-accent: #d5b17f;
  --nav-mark-background: var(--paper);
  --nav-mark-foreground: var(--nav-background);
}
.nav .mark {
  background: var(--nav-mark-background);
  color: var(--nav-mark-foreground);
}
.nav .version { color: var(--nav-muted); border-color: var(--nav-border); }
.nav .github-stars { border-color: var(--nav-border); }
.nav .github-stars svg { stroke: var(--nav-accent); }
.nav a:not(.wordmark):hover { color: var(--nav-accent); }
.nav a:focus-visible { outline-color: var(--nav-accent); }
.nav .github-label { display: inline; }
.nav .github-link > svg { width: 28px; height: 28px; flex-shrink: 0; }
.nav-actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.nav-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 9px 15px;
  border: 1px solid var(--nav-border);
  background: var(--nav-foreground);
  color: var(--nav-background);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 200ms ease, color 200ms ease;
}
.nav-download svg { width: 17px; height: 17px; flex: 0 0 17px; }
.nav a.nav-download:is(:hover, :focus-visible) { background: var(--nav-accent); color: var(--nav-background); }
@media (max-width: 1050px) and (min-width: 761px) {
  .nav nav { gap: 18px; font-size: 14px; }
  .nav-actions { gap: 14px; }
  .nav .version { display: none; }
}
@media (max-width: 760px) {
  .nav-inner { gap: 12px; }
  .nav-actions { gap: 12px; }
  .nav-download { gap: 7px; padding-inline: 12px; font-size: 13px; }
}
@media (max-width: 520px) {
  .nav .version, .nav .github-label { display: none; }
  .github-stars { padding-left: 8px; gap: 5px; font-size: 14px; }
  .github-link { gap: 7px; }
}
@media (max-width: 370px) {
  .nav .wordmark { gap: 8px; font-size: 18px; white-space: nowrap; }
  .nav .mark { width: 30px; height: 30px; }
  .nav-actions { gap: 10px; }
  .nav-download { padding-inline: 10px; }
  .nav-download svg { display: none; }
}
.nav, .nav .mark, .nav .version, .nav .github-stars {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

/* Let footer content span the viewport, with responsive edge spacing. */
footer > .wrap {
  width: 100%;
  padding-inline: clamp(20px, 3vw, 48px);
}

/* Give the hero the opening viewport. */
:root { --nav-height: 89px; }
.hero-screen {
  min-height: calc(100svh - var(--nav-height));
  display: grid;
  grid-template-rows: 1fr;
}
.hero-screen .hero {
  min-height: calc(100svh - var(--nav-height));
  padding-block: clamp(64px, 10svh, 112px) clamp(24px, 5svh, 64px);
}
.hero-screen .hero h1 {
  font-size: clamp(56px, min(9.2svh, 6.4vw), 92px);
  margin-top: clamp(20px, 3svh, 33px);
}
.hero-screen .hero-description { margin-top: clamp(18px, 3svh, 30px); }
.hero-screen .hero-actions { margin-top: clamp(18px, 3svh, 29px); }
.hero-screen .hero-note { margin-top: clamp(18px, 3svh, 33px); }
.hero-screen .hero-figure {
  width: min(100%, max(240px, calc(100svh - 370px)));
  max-width: 495px;
  justify-self: end;
}
@media (max-width: 760px) {
  :root { --nav-height: 73px; }
  .hero-screen .hero { gap: 20px; padding-block: 24px; }
  .hero-screen .hero h1 {
    font-size: clamp(40px, 11vw, 58px);
    margin-top: 16px;
  }
  .hero-screen .hero-description {
    margin-top: 16px;
    font-size: 13px;
    line-height: 1.65;
  }
  .hero-screen .hero-actions { margin-top: 18px; gap: 18px; }
  .hero-screen .hero-note { display: none; }
  .hero-screen .hero-figure {
    width: clamp(140px, 19svh, 200px);
    justify-self: center;
    padding-bottom: 12px;
    margin-bottom: 0;
  }
  .hero-screen .figure-top, .hero-screen figcaption { display: none; }
  .hero-screen .hero-figure > :is(img,.writer-art) { aspect-ratio: 1; }
  .hero-screen .paper-note {
    bottom: 8px;
    left: -48px;
    right: -32px;
    padding: 10px 14px;
    gap: 12px;
  }
  .hero-screen .paper-number { font-size: 42px; letter-spacing: -4px; }
  .hero-screen .paper-note strong { font-size: 16px; }
  .hero-screen .paper-note div > span { font-size: 6px; margin-top: 6px; }
  .hero-screen .note-asterisk { font-size: 28px; }
}

@media (max-width: 760px) and (max-height: 740px) {
  .hero-screen .hero { gap: 12px; padding-block: 16px; }
  .hero-screen .hero-figure { width: clamp(100px, 17svh, 140px); }
  .hero-screen .paper-note { left: -70px; right: -55px; bottom: -8px; padding: 8px 12px; gap: 10px; }
}
/* Slow pools of blue light flow behind the opening content. */
.hero-screen { position: relative; isolation: isolate; overflow: clip; }
.hero-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--hero-background, #081b32);
}
.hero-glow { position: absolute; border-radius: 50%; }
.hero-glow-first {
  width: 105%; height: 130%; left: -38%; top: -48%;
  background: radial-gradient(ellipse, #2c6394a3 0%, #1b466d66 34%, #081b3200 70%);
}
.hero-glow-second {
  width: 105%; height: 145%; right: -38%; top: -17%;
  background: radial-gradient(ellipse, #255b8d99 0%, #193e6355 38%, #081b3200 72%);
}
.hero-glow-third {
  width: 95%; height: 110%; left: 5%; bottom: -74%;
  background: radial-gradient(ellipse, #3d7b8f66 0%, #1d4b6d44 36%, #081b3200 70%);
}
.hero-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 30%, #020b162e 100%);
}
.hero-screen .facts { background: var(--paper); }
@media (prefers-reduced-motion: no-preference) {
  .hero-glow-first { animation: hero-flow-first 24s ease-in-out -6s infinite; }
  .hero-glow-second { animation: hero-flow-second 29s ease-in-out -16s infinite; }
  .hero-glow-third { animation: hero-flow-third 32s ease-in-out -10s infinite; }
}
@keyframes hero-flow-first {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .75; }
  50% { transform: translate(28%, 20%) scale(1.08); opacity: 1; }
}
@keyframes hero-flow-second {
  0%, 100% { transform: translate(0, 0) scale(1.05); opacity: 1; }
  50% { transform: translate(-24%, -16%) scale(.92); opacity: .65; }
}
@keyframes hero-flow-third {
  0%, 100% { transform: translate(-16%, 0); opacity: .65; }
  50% { transform: translate(22%, -28%); opacity: 1; }
}
@media (max-width: 760px) {
  .hero-glow-first { width: 175%; left: -90%; }
  .hero-glow-second { width: 175%; right: -100%; }
  .hero-glow-third { width: 150%; left: -25%; }
}

/* Motion comic: one continuous camera loop, with depth between layers. */
.hero-figure { --comic-loop: 10s; --comic-gesture-ease: cubic-bezier(.7, 0, .25, 1); }
.writer-art { overflow: hidden; }
.writer-background { transform-origin: 50% 50%; transform: scale(1.035); }
.writer-torso { transform-origin: 52% 86%; }
.writer-head { transform-origin: 53% 38%; }
.writer-gesture { transform-origin: 23% 74%; }
.writer-writing { transform-origin: 82% 81%; }
@media (prefers-reduced-motion: no-preference) {
  .writer-background { animation: comic-background var(--comic-loop) ease-in-out infinite; }
  .writer-torso { animation: comic-posture var(--comic-loop) var(--comic-gesture-ease) infinite; }
  .writer-head { animation: comic-head var(--comic-loop) var(--comic-gesture-ease) -2.5s infinite; }
  .writer-gesture { animation: comic-gesture calc(var(--comic-loop) / 2) var(--comic-gesture-ease) -.8s infinite; }
  .writer-writing { animation: comic-pen calc(var(--comic-loop) / 4) var(--comic-gesture-ease) -.35s infinite; }
  .hero-figure .paper-note { animation: comic-caption var(--comic-loop) ease-in-out infinite; }
}
@keyframes comic-background {
  0%, 100% { transform: translate(7px, -3px) scale(1.035); }
  50% { transform: translate(-7px, 3px) scale(1.035); }
}
@keyframes comic-posture {
  0%, 100% { transform: translate(-7px, 4px) rotate(-1deg); }
  50% { transform: translate(7px, -4px) rotate(1deg); }
}
@keyframes comic-head {
  0%, 100% { transform: rotate(-2.5deg) translateY(2px); }
  50% { transform: rotate(2.5deg) translateY(-2px); }
}
@keyframes comic-gesture {
  0%, 100% { transform: rotate(4deg) translate(2px, 2px); }
  50% { transform: rotate(-9deg) translate(-4px, -5px); }
}
@keyframes comic-pen {
  0%, 100% { transform: rotate(-4.5deg) translate(-3px, 2px); }
  50% { transform: rotate(3.2deg) translate(3px, -2px); }
}
@keyframes comic-caption {
  0%, 100% { transform: translate(-2px, 2px) rotate(-3deg); }
  50% { transform: translate(2px, -2px) rotate(-2.6deg); }
}

/* A quiet, pausable walkthrough of the generated files. */
@property --workspace-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.workspace-preview { position: relative; isolation: isolate; }
.workspace-preview::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--workspace-border-angle), transparent 0% 65%, #d5b17f 76%, #b45835 87%, transparent 98%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: workspace-border-orbit 8s linear infinite paused;
}
.workspace-preview[data-playing="true"]::after { animation-play-state: running; }
@keyframes workspace-border-orbit { to { --workspace-border-angle: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .workspace-preview::after { animation: none; background: #b4583540; }
}
.preview-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  padding: 5px 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: 9px var(--mono);
}
.preview-toggle:hover { color: var(--ink); border-color: #aab5a1; }
.preview-toggle[hidden] { display: none; }
.preview-toggle-icon { color: var(--accent); font-size: 12px; width: 10px; }
.file-list button { position: relative; overflow: hidden; }
.file-progress {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: #b4583570;
  transform: scaleX(0);
  transform-origin: left;
}
#file-panel { position: relative; isolation: isolate; overflow: hidden; }
#file-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -30%;
  pointer-events: none;
  background: radial-gradient(ellipse at 25% 35%, #dfc39520, transparent 55%),
              radial-gradient(ellipse at 75% 65%, #a6bba019, transparent 50%);
  animation: manuscript-light 18s ease-in-out infinite alternate paused;
}
.workspace-preview[data-playing="true"] #file-panel::before { animation-play-state: running; }
#file-preview { min-height: 210px; }
#file-preview code { font: inherit; }
.preview-written::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--accent);
  opacity: 0;
}
#file-preview[data-typing="true"] .preview-written::after { animation: manuscript-caret 900ms step-end infinite; }
.preview-accessible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: pre;
}
@keyframes manuscript-light {
  from { transform: translate(-4%, -3%) rotate(-4deg); }
  to { transform: translate(4%, 3%) rotate(4deg); }
}
@keyframes manuscript-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (max-width: 760px) {
  .preview-toggle { margin-left: auto; font-size: 8px; }
  #file-preview { min-height: 225px; }
}
@media (prefers-reduced-motion: reduce) {
  #file-panel::before { animation: none; }
  #file-preview[data-typing="true"] .preview-written::after { animation: none; }
}


/* Match the FAQ icon to the answer's opening and closing motion. */
.faq summary > span { transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }
.faq summary[aria-expanded="true"] > span { transform: rotate(45deg); }
.faq summary[aria-expanded="false"] > span { transform: rotate(0deg); }


/* Frame the hero command as a compact terminal card. */
.hero-screen .hero-actions {
  flex-direction: column;
  align-items: stretch;
  max-width: 420px;
}
.hero-install {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #152a3526;
  border-radius: 12px;
  background: #f6f3ecb3;
  color: var(--ink);
  box-shadow: 0 2px 6px #00000008;
  backdrop-filter: blur(6px);
  font: 12px/1.6 var(--mono);
}
.hero-install-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 6px;
  border-bottom: 1px solid #152a3526;
}
.hero-install-label {
  padding: 5px 10px;
  border: 1px solid #152a3533;
  border-radius: 6px;
  background: #152a350a;
  color: var(--ink);
  font: 600 11px/1.6 var(--sans);
}
.hero-install-body {
  display: flex;
  align-items: baseline;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 14px 2px;
  scrollbar-width: thin;
}
.hero-prompt { color: var(--muted); user-select: none; }
.hero-install code { min-width: 0; padding-right: 6px; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-weight: 500; }
.hero-install-target { padding: 0 14px 11px; color: var(--muted); font: 9px/1.6 var(--mono); }
.hero-install button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font: 600 11px/1.6 var(--sans);
  transition: background 180ms ease, color 180ms ease;
}
.hero-install button:hover { background: #152a350a; color: var(--ink); }
.hero-install #copy-hero-install { width: 30px; padding: 7px; }
.hero-install button svg { width: 14px; height: 14px; }

/* Reserve the largest installation option without fixing responsive heights. */
.install-command, .install-status-slot { display: grid; }
.install-command > code, .install-status-slot > p { grid-area: 1 / 1; min-width: 0; }
.install-size-ghost { visibility: hidden; pointer-events: none; user-select: none; }
.install-tabs button { transition: color 200ms ease-out, border-color 200ms ease-out; }

/* Writing tools sit in the outer margins, clear of the reading column. */
.writing-surround { position: relative; isolation: isolate; }
.writing-margin {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  width: max(0px, calc((100% - 1180px) / 2 - 28px));
  overflow: clip;
  pointer-events: none;
  user-select: none;
}
.writing-margin-left { left: 0; }
.writing-margin-right { right: 0; }
.writing-object {
  position: absolute;
  left: 50%;
  width: clamp(88px, calc((100vw - 1180px) / 2 - 48px), 230px);
  height: auto;
  opacity: .8;
}
.writing-pen-left {
  top: 5%;
  width: clamp(28px, calc((100vw - 1180px) / 5), 64px);
  transform: translateX(-50%) rotate(28deg);
}
.writing-pages-left { top: 34%; transform: translateX(-50%) rotate(-15deg); }
.writing-notebook-left { bottom: 5%; transform: translateX(-50%) rotate(12deg); }
.writing-notebook-right { top: 5%; transform: translateX(-50%) rotate(15deg); }
.writing-pen-right {
  top: 43%;
  width: clamp(28px, calc((100vw - 1180px) / 5), 64px);
  transform: translateX(-50%) rotate(-32deg);
}
.writing-pages-right { bottom: 1%; transform: translateX(-50%) rotate(-13deg); }
.writing-pen-left, .writing-pen-right {
  width: clamp(88px, calc((100vw - 1180px) / 2 - 48px), 230px);
}
.writing-pen-left { top: 1%; transform: translateX(-50%) rotate(9deg); }
.writing-pages-left { top: 40%; }
.writing-pen-right { top: 33%; transform: translateX(-50%) rotate(-10deg); }
@media (max-width: 1399px) {
  .writing-margin { display: none; }
}

/* Soft circular ripples spread across the entire section. */
.method { position: relative; isolation: isolate; overflow: clip; }
.method > .wrap { position: relative; z-index: 1; }
.step-panel-shell { position: relative; min-width: 0; }
.step-panel-shell > .step-panel { height: 100%; }
.method-pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.method-pulse-wash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--pulse-x, 70%) var(--pulse-y, 60%), #244d6820, #244d680c 60%, transparent 90%);
  opacity: 0;
}
.method-pulse > span {
  position: absolute;
  left: var(--pulse-x, 70%);
  top: var(--pulse-y, 60%);
  width: var(--pulse-width, 40%);
  height: var(--pulse-height, 50%);
  border: 1px solid #244d68;
  border-radius: 50%;
  box-shadow: 0 0 12px #244d680e, inset 0 0 12px #244d6808;
  transform: translate(-50%, -50%);
  opacity: 0;
}


/* Center each section heading above its content. */
.method-intro,
.artifacts-heading { text-align: center; }
.method-intro,
.artifacts-heading { display: block; }

/* Match the opening surface to the illustrated writer's navy backdrop. */
.hero-screen {
  --hero-background: #081b32;
  background: var(--hero-background);
  color: var(--paper);
}
.hero-screen .hero h1 em { color: #e0ad70; }
.hero-screen .hero-description { color: #bac7d2; }
.hero-screen .hero-description strong { color: var(--paper); }
.hero-screen .eyebrow { color: #dbc69e; }
.hero-screen .edition,
.hero-screen .hero-note,
.hero-screen figcaption { color: #b4c2d0; }
.hero-screen .figure-top { border-top-color: #ffffff2b; color: #b4c2d0; }
.hero-screen .hero-install {
  --ink: var(--paper);
  --muted: #bac7d2;
  background: transparent;
  border-color: #ffffff2b;
  color: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
}
.hero-screen .hero-install-bar { border-bottom-color: #ffffff2b; }
.hero-screen .hero-install-label { border-color: #ffffff38; background: #ffffff08; }
.hero-screen .hero-install button:hover { background: #ffffff12; }
.hero-screen .hero-actions > .primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.hero-screen .hero-actions > .primary:hover { background: #e6d2b1; border-color: #e6d2b1; }
.hero-screen .text-link { color: var(--paper); }
.hero-screen .text-link:hover { color: #e0ad70; }
.hero-screen .paper-note,
.hero-screen .facts { color: var(--ink); }