:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color-scheme: light;
  --bg: #fafaf8; --surface: #f0f0ec; --raised: #fff; --ink: #20221f;
  --muted: #62675f; --subtle: #747a70; --line: #dddfd7; --blue: #2d594d;
  --button: #25354c; --button-text: #fff; --accent-bg: #e6edf7; --diagram-line: #acbbcb;
  background: var(--bg); color: var(--ink);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #15191f; --surface: #1c232d; --raised: #202833; --ink: #e2e7ee;
  --muted: #a2afbf; --subtle: #8d9db0; --line: #323d4c; --blue: #96b9ed;
  --button: #b3cbea; --button-text: #172536; --accent-bg: #25374d; --diagram-line: #52677f;
}
* { box-sizing: border-box; }
body { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 5px; }
img { display: block; max-width: 100%; }
.wrap { width: calc(100% - 96px); max-width: 1240px; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.header { min-height: 88px; display: flex; align-items: center; border-bottom: 1px solid var(--line); gap: 44px; }
.brand { font-weight: 680; font-size: 21px; display: flex; align-items: center; gap: 10px; letter-spacing: -.7px; flex-shrink: 0; }
.brand img { width: 33px; height: 36px; object-fit: contain; }
.header nav { display: flex; align-self: stretch; align-items: center; gap: 28px; font-size: 13px; color: var(--muted); }
.header nav a { position: relative; display: flex; align-items: center; height: 100%; white-space: nowrap; }
.header nav a[aria-current] { color: var(--ink); }
.header nav a[aria-current]::after { content: ""; position: absolute; bottom: -1px; height: 2px; width: 100%; background: var(--blue); }
.header-tools { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 12px; white-space: nowrap; }
.header select {
  appearance: none; -webkit-appearance: none;
  color: var(--ink); background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23626f7d' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  border: 1px solid var(--line); border-radius: 6px;
  padding: 0 32px 0 12px; height: 36px; line-height: normal;
  cursor: pointer; width: 112px; max-width: none;
}
.theme-switch { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--line); border-radius:9px; }
.language-switch { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:5px 4px; border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; flex-shrink:0; }
.language-switch svg { width:17px; height:17px; }
.language-switch:hover { color:var(--ink); }
.language-switch span { min-width:17px; }
html[lang="en"] .hero-heading { grid-template-columns:1fr; gap:24px; }
html[lang="en"] .hero-heading h1 { font-size:clamp(38px,4.5vw,64px); }
html[lang="en"] .hero-heading p { max-width:650px; }
html[lang="en"] .hero-action { flex-basis:190px; }
html[lang="en"] .hero-action .button { white-space:nowrap; gap:16px; padding-inline:16px; }
html[lang="en"] .task-selector { gap:23px; }
@media(max-width:760px) {
 .header-tools { gap:8px!important; }
 .theme-switch { padding:2px; }
 .theme-switch button { width:27px; height:28px; padding:5px; }
 .language-switch { gap:4px; padding-inline:0; }
 html[lang="en"] .header nav { font-size:11px; gap:8px; }
 html[lang="en"] .hero-heading h1 { font-size:42px; }
 html[lang="en"] .hero-action { flex-basis:auto; }
 html[lang="en"] .task-selector button { font-size:12px; }
}
.theme-switch button { display:grid; place-items:center; width:30px; height:30px; padding:6px; border:0; border-radius:6px; color:var(--muted); background:transparent; cursor:pointer; }
.theme-switch svg { width:18px; height:18px; }
.theme-switch button:hover { color:var(--ink); background:var(--surface); }
.theme-switch button[aria-pressed="true"] { color:var(--ink); background:var(--raised); box-shadow:0 1px 3px #07111c20; }
.preview-toolbar button { display:grid; place-items:center; width:36px; height:36px; padding:8px!important; border:0!important; background:transparent!important; }
.preview-toolbar button:hover { background:var(--surface)!important; }
.preview-toolbar button svg { width:20px; height:20px; }
.header-tools label { display: flex; align-items: center; }
.header-tools .source { display: inline-flex; align-items: center; min-height: 36px; line-height: 1; }
.header select:hover { border-color: var(--subtle); }
.header a:hover, .text-link:hover, .footer a:hover { color: var(--blue); }
.hero { padding-block: 48px 36px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.product-hero h1 { font-size: clamp(58px, 7vw, 88px); line-height: 1; letter-spacing: -5px; font-weight: 700; margin: 0 0 18px; }
.product-subtitle { font-size: 25px; line-height: 1.4; margin: 0 0 17px; font-weight: 520; }
.product-hero .intro { font-size: 14px; margin: 0; max-width: 680px; }
.release-label { display: flex; gap: 18px; font-size: 11px; color: var(--muted); margin: 0 0 24px; }
.release-label a { border-bottom: 1px solid var(--line); }
.download-block { flex: 0 0 215px; padding-bottom: 5px; }
.download-block .button { width: 100%; justify-content: space-between; }
.download-block p { font-size: 11px; color: var(--subtle); margin: 13px 0 19px; }
.overview { padding-block: 30px 65px; }
.overview-title { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 20px; }
.overview h2 { font-size: 22px; margin: 0; }
.capability-index { margin: 0; }
.capability-index>div { display: grid; grid-template-columns: 170px 1fr; gap: 25px; border-top: 1px solid var(--line); padding: 21px 0; font-size: 13px; line-height: 1.8; }
.capability-index>div:last-child { border-bottom: 1px solid var(--line); }
.capability-index dt { font-weight: 550; }
.capability-index dd { margin: 0; color: var(--muted); }
.eyebrow { font-size: 12px; color: var(--muted); letter-spacing: .04em; margin: 0 0 23px; }
.eyebrow>span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #49866f; margin-right: 8px; vertical-align: 2px; }
h1 { font-size: clamp(34px, 4vw, 54px); line-height: 1.38; letter-spacing: -1.7px; font-weight: 640; margin: 0 0 22px; }
h2 { font-size: 31px; line-height: 1.4; letter-spacing: -.8px; font-weight: 620; margin: 0 0 15px; }
p { line-height: 1.85; }
.intro { color: var(--muted); font-size: 15px; margin: 0 0 27px; }
.actions { display: flex; gap: 27px; align-items: center; }
.button { min-height: 43px; padding: 12px 20px; display: inline-flex; align-items: center; gap: 30px; font-size: 13px; border-radius: 5px; }
.primary { background: var(--button); color: var(--button-text); }
.primary:hover { opacity: .85; }
.text-link { font-size: 13px; color: var(--blue); }
.platforms { margin: 19px 0 0; color: var(--subtle); font-size: 11px; }
.platforms span { margin-left: 16px; }
.hero-note { padding-bottom: 7px; color: var(--subtle); font-size: 12px; width: 190px; flex-shrink: 0; }
.note-rule { display: block; width: 29px; border-top: 1px solid var(--diagram-line); }
.hero-note p { margin: 14px 0; }
.hero-note a { font-size: 11px; }
.page-intro { padding-block: 48px 26px; }
.page-intro h1 { font-size: clamp(30px, 3.5vw, 42px); letter-spacing: -1px; }
.page-intro .intro { max-width: 720px; }
.demo-caption { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; font-size: 12px; color: var(--muted); gap: 15px; }
.demo-caption small { font-size: 10px; color: var(--subtle); }
.product-shot { margin-block: 0 30px; }
.shot-link { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 20px 35px -30px #0006; }
.product-shot img { width: 100%; height: auto; }
.shot-dark { display: none; }
[data-theme="dark"] .shot-dark { display: block; }
[data-theme="dark"] .shot-light { display: none; }
.product-shot figcaption { font-size: 11px; line-height: 1.7; color: var(--subtle); margin-top: 14px; }
.home-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px; padding-block: 45px 75px; }
.home-links>a { border-top: 1px solid var(--line); padding-top: 22px; }
.home-links>a:hover h2 { color: var(--blue); }
.home-links span { color: var(--subtle); font-size: 11px; }
.home-links h2 { font-size: 21px; margin: 20px 0 12px; }
.home-links p { font-size: 13px; color: var(--muted); min-height: 48px; }
.home-links b { font-size: 12px; font-weight: 500; color: var(--blue); }
.section-heading { margin-bottom: 33px; }
.section-heading>p:last-child { font-size: 14px; color: var(--muted); }
.feature-list { padding-block: 5px 65px; }
.feature-list article { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding-block: 38px; border-top: 1px solid var(--line); }
.feature-list article>span { color: var(--subtle); font: 13px ui-monospace, monospace; padding-top: 8px; }
.feature-list h2 { font-size: 27px; }
.feature-list p { max-width: 720px; font-size: 14px; color: var(--muted); }
.feature-list .tags { font-size: 11px; color: var(--subtle); margin-bottom: 0; }
.workflows { padding-block: 0 72px; }
.workflow-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: 70px; }
.workflow-tabs { display: flex; flex-direction: column; }
.workflow-tabs button { border: 0; border-top: 1px solid var(--line); text-align: left; background: transparent; display: grid; grid-template-columns: 28px 1fr 24px; column-gap: 15px; padding: 23px 16px 23px 0; cursor: pointer; color: var(--muted); }
.workflow-tabs button:last-child { border-bottom: 1px solid var(--line); }
.workflow-tabs button[aria-selected=true] { color: var(--ink); }
.workflow-tabs button[aria-selected=true] b { color: var(--blue); }
.workflow-tabs span { font: 11px ui-monospace, monospace; grid-row: 1/3; align-self: center; }
.workflow-tabs b { font-weight: 550; font-size: 17px; }
.workflow-tabs small { grid-column: 2; font-size: 12px; margin-top: 9px; color: var(--subtle); }
.workflow-tabs i { grid-column: 3; grid-row: 1/3; align-self: center; font-style: normal; }
.flow-panel { padding: 25px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.flow-prompt { font-size: 14px; margin: 0 0 25px; }
.flow-panel ol { list-style: none; padding: 0; margin: 0; counter-reset: steps; }
.flow-panel li { position: relative; padding: 0 0 20px 32px; counter-increment: steps; border-left: 1px solid var(--diagram-line); margin-left: 8px; }
.flow-panel li:last-child { padding-bottom: 0; border-color: transparent; }
.flow-panel li::before { content: counter(steps); position: absolute; left: -10px; top: 0; width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--diagram-line); background: var(--surface); display: grid; place-items: center; font-size: 10px; color: var(--muted); }
.flow-panel b { font-size: 13px; font-weight: 550; display: block; margin-bottom: 7px; }
.flow-panel li span { font-size: 12px; color: var(--muted); line-height: 1.8; display: block; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; padding-block: 65px; }
.principles>div { border-top: 1px solid var(--line); padding-top: 22px; }
.mini-label { font-size: 11px; color: var(--subtle); }
.principles h3 { font-size: 17px; font-weight: 560; margin: 15px 0 10px; }
.principles p { font-size: 13px; color: var(--muted); margin: 0; }
.local-section { background: var(--surface); border-block: 1px solid var(--line); }
.local-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 110px; align-items: center; padding-block: 65px; }
.local-layout>div>p:not(.eyebrow) { font-size: 14px; color: var(--muted); max-width: 420px; }
.local-layout .text-link { display: block; margin-top: 23px; }
.deployment-diagram { border: 1px dashed var(--diagram-line); padding: 26px 35px 15px; border-radius: 7px; position: relative; font-size: 11px; color: var(--muted); }
.boundary-label { position: absolute; top: -9px; left: 22px; background: var(--surface); padding-inline: 8px; }
.diagram-row { display: flex; gap: 12px; }
.diagram-row>span { border: 1px solid var(--line); background: var(--raised); padding: 13px; flex: 1; text-align: center; border-radius: 4px; }
.connector { text-align: center; color: var(--subtle); padding: 7px; }
.diagram-core { display: flex; align-items: center; gap: 10px; border: 1px solid var(--diagram-line); border-radius: 5px; background: var(--raised); padding: 16px; }
.diagram-core img { width: 25px; }
.diagram-core b { font-size: 15px; color: var(--ink); }
.diagram-core>span { margin-left: auto; font-size: 10px; }
.deployment-diagram>p { text-align: center; font-size: 10px!important; color: var(--subtle); margin: 16px 0 0; }
.channels { padding-block: 65px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; align-items: center; }
.channels h2 { font-size: 28px; }
.channels p:not(.eyebrow) { color: var(--muted); font-size: 14px; }
.channel-names { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding-left: 30px; font-size: 20px; font-weight: 550; color: var(--muted); }
.channel-names span { border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.open-source { border-block: 1px solid var(--line); padding-block: 43px; display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.open-source h2 { font-size: 25px; }
.open-source p { font-size: 13px; color: var(--muted); margin: 0; }
.release { display: grid; grid-template-columns: 210px 1fr; gap: 30px; padding-block: 40px 48px; border-top: 1px solid var(--line); }
.release-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; color: var(--subtle); font-size: 12px; padding-top: 5px; }
.badge { background: var(--accent-bg); color: var(--blue); padding: 5px 9px; border-radius: 4px; font-size: 11px; }
.release-version { margin: 0 0 18px; font: 18px ui-monospace, monospace; }
.release-version span { color: var(--subtle); font: 11px -apple-system, sans-serif; margin-left: 12px; }
.release h2 { font-size: 27px; }
.release p:not(.release-version), .release-notes { font-size: 14px; color: var(--muted); line-height: 1.9; }
.release-notes { padding-left: 20px; max-width: 760px; }
.release-notes li+li { margin-top: 10px; }
.release details { padding: 14px 0 22px; font-size: 13px; }
.release summary { cursor: pointer; color: var(--muted); }
.release details p { margin-bottom: 0; }
.release-footnote { padding-block: 0 60px; font-size: 11px; color: var(--subtle); }
.release-footnote a { color: var(--blue); }
.footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 30px; font-size: 11px; color: var(--subtle); border-top: 1px solid var(--line); }
.footer .brand { font-size: 16px; color: var(--muted); }
.footer .brand img { width: 24px; height: 26px; }
.footer>div { display: flex; gap: 23px; margin-left: auto; }
.footer small { width: 100%; font-size: 10px; margin-top: 8px; }
@media(max-width: 1050px) {
  .wrap { width: calc(100% - 48px); } .header { gap: 28px; } .header nav { gap: 20px; }
  .header-tools { gap: 15px; } .hero-note { display: none; } .workflow-layout { gap: 30px; }
  .local-layout { gap: 40px; } .principles { gap: 28px; } .home-links { gap: 25px; }
  .feature-list article { grid-template-columns: 80px 1fr; }
}
@media(max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .header { padding-top: 17px; min-height: 110px; flex-wrap: wrap; gap: 14px; }
  .header nav { order: 3; width: 100%; justify-content: space-between; height: 42px; font-size: 12px; gap: 12px; }
  .header-tools { gap: 14px; } .header select { width: 108px; max-width: none; font-size: 12px; }
  .brand { font-size: 19px; } .brand img { width: 27px; height: 30px; }
  .hero { padding: 34px 0 28px; } .page-intro { padding-block: 34px 20px; }
  .product-hero { flex-direction: column; align-items: flex-start; gap: 22px; }
  .product-hero h1 { font-size: 62px; letter-spacing: -3.5px; }
  .product-subtitle { font-size: 22px; }
  .product-hero .intro br { display: none; }
  .download-block { flex: auto; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
  .download-block .button { width: auto; gap: 30px; }
  .download-block p { order: 3; width: 100%; margin: 0; }
  .overview-title { align-items: flex-start; flex-direction: column; gap: 12px; }
  .capability-index>div { grid-template-columns: 1fr; gap: 5px; padding-block: 16px; }
  h1 { font-size: 33px; letter-spacing: -1px; } h2 { font-size: 26px; }
  .intro { font-size: 14px; } .desktop { display: none; } .eyebrow { font-size: 11px; }
  .actions { gap: 20px; } .button { gap: 15px; padding-inline: 16px; }
  .demo-caption { align-items: flex-start; gap: 15px; font-size: 11px; }
  .demo-caption small { max-width: 150px; text-align: right; line-height: 1.6; }
  .product-shot figcaption { font-size: 10px; } .home-links { grid-template-columns: 1fr; gap: 28px; padding-block: 18px 45px; }
  .home-links p { min-height: 0; } .home-links h2 { margin-top: 15px; }
  .feature-list { padding-bottom: 35px; } .feature-list article { grid-template-columns: 25px 1fr; gap: 16px; padding-block: 25px; }
  .feature-list h2 { font-size: 22px; } .feature-list p { font-size: 13px; }
  .workflows { padding-bottom: 42px; } .workflow-layout { grid-template-columns: 1fr; gap: 24px; }
  .workflow-tabs button { padding-block: 18px; } .flow-panel { padding: 22px; }
  .principles { grid-template-columns: 1fr; gap: 25px; padding-block: 40px; }
  .local-layout { grid-template-columns: 1fr; gap: 40px; padding-block: 45px; }
  .deployment-diagram { padding-inline: 22px; }
  .channels { grid-template-columns: 1fr; gap: 23px; padding-block: 45px; }
  .channels h2 { font-size: 25px; } .channel-names { padding: 0; gap: 20px; font-size: 18px; }
  .open-source { align-items: flex-start; flex-direction: column; padding-block: 32px; }
  .release { grid-template-columns: 1fr; gap: 24px; padding-block: 28px 36px; }
  .release-meta { flex-direction: row; align-items: center; } .release h2 { font-size: 23px; }
  .footer { gap: 12px; } .footer>div { width: 100%; margin: 12px 0 0; flex-wrap: wrap; gap: 18px; }
  .platforms { font-size: 10px; } .source { font-size: 11px; }
}
.capability-gallery { padding-block:20px 65px; }
.capability-gallery>h2 { font-size:28px; margin-bottom:10px; }
.gallery-intro { font-size:14px; color:var(--muted); margin:0 0 28px; }
.gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 26px; }
.gallery-item { margin:0; min-width:0; }
.gallery-item .shot-link { position:relative; aspect-ratio:1.6; box-shadow:none; background:var(--raised); }
.gallery-item img { width:100%; height:100%; object-fit:contain; }
.gallery-zoom { position:absolute; bottom:12px; right:12px; padding:7px 12px; background:var(--raised); color:var(--ink); border-radius:4px; font-size:12px; opacity:0; transition:opacity .15s; }
.gallery-item a:hover .gallery-zoom,.gallery-item a:focus-visible .gallery-zoom { opacity:1; }
.gallery-item figcaption { padding-top:14px; }
.gallery-item h3 { font-size:17px; font-weight:550; margin:0 0 5px; }
.gallery-item p { font-size:12px; color:var(--muted); margin:0; }
.image-preview { width:min(96vw,1600px); max-width:none; max-height:94dvh; padding:0; border:0; border-radius:10px; color:var(--ink); background:var(--bg); box-shadow:0 20px 70px #0005; }
.image-preview::backdrop { background:#07111cbd; }
.preview-toolbar { display:flex; align-items:center; gap:14px; padding:14px 18px; }
.preview-toolbar h2 { font-size:16px; margin:0; flex:1; letter-spacing:0; }
.preview-toolbar button { background:var(--raised); color:var(--ink); border:1px solid var(--line); border-radius:5px; min-height:36px; padding:6px 12px; cursor:pointer; }
.preview-toolbar button:hover { border-color:var(--muted); }
.preview-count { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.preview-image { display:block; width:100%; height:min(76dvh,950px); object-fit:contain; background:var(--surface); }
.preview-status { margin:0; padding:10px 18px; color:var(--muted); font-size:12px; }
@media(max-width:600px) {
 .gallery-grid { grid-template-columns:1fr; gap:25px; }
 .capability-gallery { padding-bottom:40px; }
 .gallery-zoom { opacity:1; font-size:11px; }
 .preview-toolbar { flex-wrap:wrap; gap:8px; padding:12px; }
 .preview-toolbar h2 { min-width:45%; }
 .preview-toolbar button { padding:6px 10px; }
 .preview-image { height:65dvh; }
}
/* Agent-led product site: interface evidence, open composition, clear hierarchy. */
:root { --bg:#f6f7f9; --surface:#e9edf2; --ink:#162333; --muted:#4e5c6b; --subtle:#626f7d; --line:#d6dde5; --blue:#ad3b1e; --button:#192b40; --accent-bg:#f7e6dd; }
:root[data-theme="dark"] { --bg:#111923; --surface:#1b2735; --ink:#e9edf3; --muted:#b5c1cf; --subtle:#9caabd; --line:#354353; --blue:#ffae89; --button:#e9edf3; --button-text:#152234; --accent-bg:#3c2c27; }
::selection { background:#f2a982; color:#192b40; }
html { scrollbar-color:var(--subtle) var(--bg); }
.header { min-height:82px; border:0; }
.header nav a[aria-current]::after { bottom:16px; height:1px; background:var(--ink); }
.header nav a:hover { color:var(--ink); }
.button { border-radius:2px; min-height:48px; }
.agent-hero { padding-block:76px 60px; display:flex; justify-content:space-between; gap:50px; align-items:flex-end; }
.hero-heading { display:grid; grid-template-columns:minmax(340px,1fr) minmax(250px,.8fr); align-items:end; gap:48px; width:100%; }
.hero-heading h1 { font-size:clamp(42px,4.8vw,68px); line-height:1.16; letter-spacing:-.035em; margin:0; font-weight:650; }
.hero-heading p { margin:0 0 3px; font-size:15px; line-height:1.9; color:var(--muted); }
.hero-action { flex:0 0 180px; display:flex; flex-direction:column; gap:15px; align-items:stretch; font-size:12px; }
.hero-action .button { justify-content:space-between; }
.hero-action>span { font-size:10px; color:var(--subtle); }
.hero-action>a:last-child { margin-top:10px; }
.agent-opening { background:var(--surface); padding:28px 28px 20px; }
.opening-caption { display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding:0 3px 22px; }
.opening-caption p { font-size:23px; font-weight:550; margin:0; letter-spacing:-.025em; }
.opening-caption>span { font-size:12px; color:var(--muted); }
.agent-opening .product-shot { margin:0; }
.shot-link { border:0; border-radius:6px; box-shadow:0 12px 30px -18px #06182b55; }
.product-shot figcaption { color:var(--muted); }
.work-intro { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:100px 48px; }
.work-intro h2 { font-size:42px; line-height:1.3; letter-spacing:-.035em; }
.work-intro p { color:var(--muted); font-size:16px; margin:4px 0 20px; max-width:540px; }
.work-index { display:grid; grid-template-columns:1fr 1fr; column-gap:64px; padding-bottom:92px; }
.work-index>a { position:relative; border-top:1px solid var(--line); padding:28px 46px 28px 0; }
.work-index h3 { font-size:23px; font-weight:550; margin:0 0 12px; }
.work-index p { color:var(--muted); font-size:14px; max-width:420px; margin:0; }
.work-index>a>span { position:absolute; top:29px; right:5px; font-size:23px; transition:transform .2s; }
.work-index>a:hover>span { transform:translate(3px,-3px); }
.work-index>a:hover h3 { color:var(--blue); }
.reach-band { background:#cc4b28; color:#fff7f1; }
.reach-content { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding-block:70px; }
.reach-content h2 { font-size:42px; line-height:1.3; letter-spacing:-.03em; }
.reach-content p { margin:0 0 22px; font-size:16px; color:#fff1e9; max-width:510px; }
.reach-content a { display:inline-block; border-bottom:1px solid #f8c4b2; padding-bottom:7px; font-size:14px; }
.local-note { padding-block:86px; max-width:900px; }
.local-note h2 { font-size:32px; }
.local-note p { font-size:16px; color:var(--muted); max-width:800px; }
.page-intro { padding-block:65px 45px; }
.page-intro h1 { font-size:clamp(34px,4vw,52px); letter-spacing:-.03em; }
.eyebrow,.mini-label { display:none; }
.agent-workflow { padding-bottom:70px; }
.workflow-heading { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.workflow-heading h2 { font-size:26px; }
.workflow-heading p { color:var(--muted); font-size:13px; }
.task-selector { display:flex; gap:30px; border-bottom:1px solid var(--line); margin-top:14px; overflow-x:auto; }
.task-selector button { color:var(--muted); background:none; border:0; border-bottom:3px solid transparent; padding:17px 0; cursor:pointer; white-space:nowrap; font-size:15px; }
.task-selector button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--blue); }
.task-sheet { display:grid; grid-template-columns:1fr 1.25fr; background:var(--surface); min-height:420px; margin-top:28px; }
.task-question { padding:38px; display:flex; flex-direction:column; align-items:flex-start; }
.task-question>span,.task-output>span { color:var(--muted); font-size:12px; }
.task-question>p { font-size:27px; letter-spacing:-.025em; line-height:1.65; margin:22px 0 35px; max-width:380px; }
.task-question small { color:var(--subtle); font-size:11px; margin-top:auto; }
.task-process { background:var(--raised); margin:14px; padding:30px 36px; }
.task-process ol { margin:0; padding-left:20px; }
.task-process li { padding-left:8px; margin-bottom:22px; }
.task-process li::marker { color:var(--blue); }
.task-process b { font-size:16px; font-weight:550; }
.task-process li p { color:var(--muted); font-size:13px; margin:7px 0 0; }
.task-output { border-top:1px solid var(--line); padding-top:17px; }
.task-output p { margin:8px 0 0; font-size:13px; }
.deep-feature { padding-block:58px; border-top:1px solid var(--line); display:grid; grid-template-columns:1.2fr .8fr; gap:100px; scroll-margin-top:25px; }
.deep-feature h2 { font-size:32px; letter-spacing:-.03em; }
.deep-feature>div>p { font-size:15px; color:var(--muted); max-width:640px; }
.deep-feature aside { align-self:center; }
.material-list { padding:0 0 0 30px; }
.material-list h3,.continuity-note h3 { font-size:16px; font-weight:550; margin:0 0 20px; }
.material-list p { border-bottom:1px solid var(--line); padding-bottom:12px; font-size:14px; color:var(--muted); }
.sandbox-example { background:var(--surface); padding:28px; }
.sandbox-example>span { font-size:11px; color:var(--muted); }
.sandbox-example pre { margin:20px 0; line-height:1.9; font-size:13px; }
.reverse-chain { display:flex; flex-direction:column; align-items:center; gap:13px; font-size:13px; color:var(--muted); padding:20px; }
.reverse-chain strong { padding:20px 34px; color:var(--ink); background:var(--surface); font-size:19px; font-weight:550; }
.reverse-chain i { font-style:normal; }
.continuity-note { padding:35px; background:var(--surface); }
.continuity-note p { font-size:19px; line-height:2; margin:0; }
.model-section { padding-top:55px; }
.channels { border-top:1px solid var(--line); margin-top:45px; }
.channel-names { color:var(--ink); }
.footer { padding-block:32px; margin-top:25px; }
.workflow-tabs>button>span { display:none; }
.workflow-tabs>button { grid-template-columns:1fr 24px; }
.workflow-tabs small { grid-column:1; }
.workflow-tabs i { grid-column:2; }
.flow-panel { border:0; border-radius:0; }
.local-section { border:0; }
.principles { display:block; padding-block:45px; }
.principles>div { display:grid; grid-template-columns:240px 1fr; gap:30px; padding-block:22px; }
.principles h3 { margin:0; }
@media(min-width:1500px) { .agent-hero { padding-block:100px 70px; } }
@media(max-width:1150px) {
 .hero-heading { grid-template-columns:1fr; gap:25px; }
 .agent-hero { align-items:flex-end; padding-block:50px; }
 .hero-heading p br { display:none; } .hero-heading p { max-width:600px; }
 .work-intro,.reach-content,.deep-feature { gap:50px; }
}
@media(max-width:760px) {
 .agent-hero { flex-direction:column; align-items:stretch; gap:28px; padding-block:36px; }
 .hero-heading { gap:22px; } .hero-heading h1 { font-size:46px; }
 .hero-heading p { font-size:14px; }
 .hero-action { flex:auto; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:14px; }
 .hero-action>span { grid-row:2; } .hero-action>a:last-child { grid-column:2; grid-row:1; margin:0; text-align:right; }
 .agent-opening { padding:16px 12px 10px; }
 .opening-caption { display:block; padding-bottom:15px; }
 .opening-caption p { font-size:20px; margin-bottom:6px; }
 .opening-caption>span { font-size:11px; }
 .work-intro,.reach-content { grid-template-columns:1fr; gap:18px; padding-block:50px 30px; }
 .work-intro h2,.reach-content h2 { font-size:34px; margin-bottom:0; }
 .work-intro p,.reach-content p { font-size:14px; }
 .work-index { grid-template-columns:1fr; padding-bottom:42px; }
 .work-index>a { padding-block:23px; } .work-index h3 { font-size:21px; }
 .reach-content { padding-bottom:45px; } .local-note { padding-block:50px; }
 .local-note h2 { font-size:27px; } .local-note p { font-size:14px; }
 .page-intro { padding-block:35px 25px; } .page-intro h1 { font-size:32px; }
 .page-intro .intro br { display:none; }
 .workflow-heading { display:block; } .workflow-heading p { margin-top:0; }
 .task-selector { gap:24px; } .task-selector button { font-size:13px; }
 .task-sheet { grid-template-columns:1fr; margin-top:20px; }
 .task-question { padding:25px; } .task-question>p { font-size:22px; margin:15px 0 20px; }
 .task-process { padding:25px 22px; margin-top:0; }
 .agent-workflow { padding-bottom:40px; }
 .deep-feature { grid-template-columns:1fr; gap:25px; padding-block:38px; }
 .deep-feature h2 { font-size:26px; } .deep-feature>div>p { font-size:14px; }
 .material-list { padding:0; } .model-section { padding-top:35px; }
 .principles>div { grid-template-columns:1fr; gap:10px; }
 .channels { margin-top:20px; }
}
.mobile-theme-toggle,.mobile-menu-toggle,.header nav .mobile-github { display:none; }
@media(min-width:761px) and (max-width:1050px) {
 .header { gap:20px; }
 .header nav { gap:16px; font-size:12px; }
 .header-tools { gap:10px; }
 .header .brand { font-size:19px; gap:8px; }
 .header .brand img { width:29px; height:32px; }
}
.preview-stage { overflow:auto; max-height:76dvh; background:var(--surface); overscroll-behavior:contain; }
.preview-stage.is-zoomed .preview-image { width:max(100%,1280px); max-width:none; height:auto; object-fit:initial; }
.preview-toolbar button[aria-pressed="true"] { color:var(--blue); background:var(--surface)!important; }
main>* { min-width:0; }
@media(max-width:760px) {
 .wrap { width:calc(100% - 32px); }
 .header { display:flex; position:relative; min-height:68px; padding-block:10px; gap:8px; flex-wrap:wrap; align-items:center; }
 .header .brand { font-size:19px; gap:8px; }
 .header .header-tools { gap:2px!important; }
 .header-tools .theme-switch,.header-tools>.source { display:none; }
 .header .language-switch,.mobile-theme-toggle,.mobile-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; padding:10px; border:0; border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; flex-shrink:0; }
 .header .language-switch { width:48px; gap:4px; padding:8px 2px; }
 .mobile-theme-toggle svg,.mobile-menu-toggle svg { width:21px; height:21px; }
 .header nav { display:none; width:100%; height:auto; order:3; align-self:auto; padding:10px 0 6px; border-top:1px solid var(--line); font-size:15px!important; gap:0!important; }
 .header[data-menu-open="true"] nav { display:grid; grid-template-columns:1fr; }
 .header nav a { min-height:46px; padding-inline:12px; border-radius:5px; }
 .header nav a[aria-current] { background:var(--surface); }
 .header nav a[aria-current]::after { display:none; }
 .header nav .mobile-github { display:flex; }
 .mobile-menu-toggle[aria-expanded="true"] { background:var(--surface); }
 .agent-hero { padding-block:28px 36px; gap:24px; }
 .hero-heading { min-width:0; gap:20px; }
 .hero-heading h1 { font-size:clamp(34px,9.5vw,44px); }
 html[lang="en"] .hero-heading h1 { font-size:clamp(34px,9vw,42px); line-height:1.15; }
 .hero-heading p { line-height:1.8; }
 .hero-action { grid-template-columns:1fr; gap:12px; }
 .hero-action .button { justify-content:space-between; width:100%; min-height:48px; }
 .hero-action>span { grid-row:auto; }
 .hero-action>a:last-child { grid-column:auto; grid-row:auto; text-align:left; min-height:44px; display:flex; align-items:center; }
 .agent-opening { padding:20px 0 16px; overflow:hidden; }
 .opening-caption { padding-inline:16px; }
 .gallery-grid { display:grid; grid-auto-flow:column; grid-auto-columns:88%; grid-template-columns:none; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:4px; padding:6px 4px 18px; overscroll-behavior-x:contain; scrollbar-width:thin; }
 .agent-opening .gallery-grid { padding-inline:16px; scroll-padding-inline:16px; grid-auto-columns:88%; }
 .gallery-item { scroll-snap-align:start; }
 .gallery-item figcaption { padding-top:12px; }
 .gallery-item .shot-link { aspect-ratio:1.6; }
 .task-selector { display:grid; grid-template-columns:1fr 1fr; gap:8px!important; overflow:visible; border:0; }
 .task-selector button { white-space:normal; min-height:58px; padding:10px; font-size:13px!important; line-height:1.45; border:1px solid var(--line); border-radius:6px; text-align:left; }
 .task-selector button[aria-selected="true"] { border-color:var(--blue); background:var(--surface); }
 .task-question>p { font-size:20px; }
 .deep-feature,.task-sheet,.work-intro,.reach-content,.local-layout { min-width:0; }
 .deep-feature aside,.deep-feature>div,.task-process,.task-question { min-width:0; }
 .sandbox-example { padding:22px; }
 .sandbox-example pre { overflow-x:auto; }
 .reverse-chain { padding-inline:0; }
 .reverse-chain strong { padding-inline:20px; }
 .deployment-diagram { padding:25px 16px 16px; }
 .diagram-core { flex-wrap:wrap; gap:8px; padding:12px; }
 .diagram-core>span { flex-basis:100%; margin-left:0; }
 .image-preview { position:fixed; inset:0; margin:0; width:100%; max-width:none; height:100dvh; max-height:100dvh; border-radius:0; display:none; }
 .image-preview[open] { display:flex; flex-direction:column; }
 .preview-toolbar { flex-wrap:nowrap; gap:2px; padding:calc(8px + env(safe-area-inset-top)) 8px 8px; flex-shrink:0; }
 .preview-toolbar h2 { min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
 .preview-count { font-size:11px; margin-inline:4px; white-space:nowrap; }
 .preview-toolbar button { width:40px; height:44px; min-height:44px; flex-shrink:0; }
 .preview-stage { flex:1; min-height:0; max-height:none; display:flex; align-items:center; }
 .preview-stage.is-zoomed { display:block; }
 .preview-image { height:auto; max-height:100%; width:100%; flex-shrink:0; }
 .preview-stage.is-zoomed .preview-image { max-height:none; }
 .preview-status { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); font-size:11px; flex-shrink:0; }
 .footer>div { gap:8px 20px; }
 .footer>div>a { min-height:40px; display:inline-flex; align-items:center; }
 .page-intro h1,.deep-feature h2,.local-note h2 { overflow-wrap:break-word; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none!important; animation:none!important; } }