:root { --ink:#1b2437; --muted:#5d6a7d; --line:#e2e7ee; --paper:#fbfcfe; --card:#fff; --indigo:#312e81; --indigo-soft:#f0efff; --green:#237343; --green-soft:#e9f8ef; --orange:#a55a15; --orange-soft:#fff3e6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:var(--indigo); font-weight:650; text-decoration:none; }
a:hover { text-decoration:underline; }
.site-header { border-bottom:1px solid var(--line); background:rgba(251,252,254,.94); position:sticky; top:0; backdrop-filter:blur(10px); z-index:2; }
.header-inner { align-items:center; display:flex; gap:22px; height:64px; justify-content:space-between; margin:auto; max-width:1160px; padding:0 24px; }
.brand { align-items:center; color:var(--ink); display:flex; font-weight:750; gap:10px; letter-spacing:-.02em; }
.brand-mark { background:var(--indigo); border-radius:9px; color:#fff; display:grid; font-size:.82rem; height:30px; place-items:center; width:30px; }
.nav { display:flex; gap:18px; font-size:.9rem; }
.nav a { color:#526072; }
.wrap { margin:auto; max-width:1100px; padding:48px 24px 72px; }
.eyebrow { color:#6056ad; font-size:.75rem; font-weight:800; letter-spacing:.12em; margin:0 0 12px; text-transform:uppercase; }
h1 { font-size:clamp(2.4rem,5vw,4.25rem); letter-spacing:-.06em; line-height:1.03; margin:0; max-width:900px; }
h2 { font-size:1.7rem; letter-spacing:-.035em; line-height:1.18; margin:0 0 14px; }
h3 { font-size:1rem; line-height:1.3; margin:0 0 7px; }
.lede { color:var(--muted); font-size:1.18rem; line-height:1.7; margin:22px 0 0; max-width:750px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.button { background:var(--indigo); border:1px solid var(--indigo); border-radius:9px; color:#fff; display:inline-block; padding:10px 15px; text-decoration:none; }
.button:hover { color:#fff; text-decoration:none; }
.button.secondary { background:#fff; border-color:#d7dce6; color:#48556a; }
.rule { border:0; border-top:1px solid var(--line); margin:54px 0; }
.grid { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.card p { color:var(--muted); font-size:.93rem; margin:0; }
.card .number { color:#665cb7; display:block; font-size:.75rem; font-weight:800; margin-bottom:12px; }
.boundary { background:var(--indigo-soft); border-left:3px solid #5d54aa; border-radius:0 10px 10px 0; color:#505a70; font-size:.92rem; margin:28px 0 0; max-width:880px; padding:16px 18px; }
.source { color:var(--muted); font-size:.85rem; margin-top:22px; }
.footer { border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; padding:24px; text-align:center; }
.current { color:var(--indigo)!important; }
.prototype-hero { max-width:920px; padding:24px 0 10px; }
.compact { font-size:1rem; margin-top:12px; }
.journey { display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:25px; }
.journey-card { background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--ink); min-height:220px; padding:21px; transition:border-color .15s,transform .15s; }
.journey-card:hover { border-color:#b6b0e8; text-decoration:none; transform:translateY(-2px); }
.journey-card .number { color:#665cb7; display:block; font-size:.75rem; font-weight:800; margin-bottom:13px; }.journey-card p { color:var(--muted); font-size:.93rem; margin:0; }.journey-card .link-arrow { color:var(--indigo); display:block; font-size:.86rem; font-weight:750; margin-top:18px; }
.feature-grid { align-items:center; display:grid; gap:28px; grid-template-columns:1.05fr .95fr; }.dark-card { background:#202348; border-radius:14px; color:#fff; padding:26px; }.dark-card .eyebrow { color:#bfbcf5; }.dark-card h3 { font-size:1.35rem; }.dark-card p { color:#d2d5e7; font-size:.94rem; }.dark-card a { color:#f0efff; font-size:.9rem; }
.source-strip { align-items:center; background:#f3f4f8; border:1px solid #e3e6ed; border-radius:12px; display:flex; gap:24px; justify-content:space-between; margin-top:48px; padding:18px 20px; }.source-strip p { color:var(--muted); font-size:.9rem; margin:3px 0 0; }.source-strip a { font-size:.88rem; white-space:nowrap; }
.integration-teaser { background:linear-gradient(110deg,#f4f3ff,#fbfcfe 68%); border:1px solid #dfdcf6; border-radius:14px; margin-top:42px; max-width:900px; padding:27px; }.integration-teaser h2 { font-size:1.45rem; }.integration-teaser p { color:var(--muted); margin:0 0 17px; max-width:680px; }
.integration-grid { display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }.integration-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }.integration-card h2 { font-size:1.08rem; margin:14px 0 6px; }.integration-card p { color:var(--muted); font-size:.91rem; margin:0 0 12px; }.integration-card a { font-size:.86rem; }.integration-icon { background:#eeeaff; border-radius:8px; color:#5146aa; display:inline-grid; font-size:.75rem; font-weight:800; height:30px; place-items:center; width:38px; }
.demo-label { color:#877643!important; display:block; font-size:.76rem!important; font-style:italic; margin-top:10px!important; }.catalog-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; }.catalog-table>div { border-top:1px solid #edf0f4; display:grid; gap:20px; grid-template-columns:180px 1fr; padding:14px 17px; }.catalog-table>div:first-child { background:#fafbfc; border-top:0; color:#778497; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }.catalog-table span { color:var(--muted); font-size:.9rem; }.catalog-table span:first-child { color:#30394e; font-weight:700; }
.quickstart-outcome { background:#eef8f1; border:1px solid #d8ecdd; border-radius:12px; padding:19px 21px; }.quickstart-outcome .eyebrow { color:#437857; }.quickstart-outcome h2 { font-size:1.05rem; }.quickstart-outcome ul { color:#496554; font-size:.91rem; margin:0; padding-left:19px; }.quickstart-outcome li+li { margin-top:6px; }.steps pre { background:#202348; border-radius:10px; color:#e4e5ff; margin:15px 0 0; overflow:auto; padding:15px; }.steps pre code { background:transparent; color:inherit; padding:0; }.check-grid { display:grid; gap:10px; grid-template-columns:1fr 1fr; }.check-grid span { background:#f8f9fb; border:1px solid #e7eaf0; border-radius:7px; color:#4f5c70; font-size:.87rem; padding:9px 10px; }
.doc-wrap { display:grid; gap:44px; grid-template-columns:224px minmax(0,760px); margin:0 auto; max-width:1130px; padding:45px 24px 74px; }.docs-side { align-self:start; border-right:1px solid var(--line); padding-right:20px; position:sticky; top:92px; }.docs-side p { color:#7a8698; font-size:.72rem; font-weight:800; letter-spacing:.11em; margin:0 0 12px; text-transform:uppercase; }.docs-side a { color:#536174; display:block; font-size:.9rem; font-weight:550; padding:7px 9px; }.docs-side a.active { background:var(--indigo-soft); border-radius:7px; color:#443b90; }.doc-content h1 { font-size:clamp(2.35rem,4.8vw,4rem); }.doc-content section { margin-top:34px; }.doc-content section>p:not(.eyebrow) { color:var(--muted); }.crumbs { color:#788598; font-size:.86rem; margin-bottom:24px; }.crumbs span { color:#a3abb8; margin:0 5px; }
.steps { border-left:2px solid #dedbf4; margin-left:11px; padding-left:26px; }.steps>div { display:flex; gap:14px; margin:0 0 26px; position:relative; }.steps>div>span { background:#eeeaff; border:1px solid #d8d2fb; border-radius:50%; color:#5046a3; font-size:.78rem; font-weight:800; height:24px; left:-39px; line-height:22px; position:absolute; text-align:center; top:1px; width:24px; }.steps h2 { font-size:1.1rem; margin:0 0 5px; }.steps p { color:var(--muted); font-size:.95rem; margin:0; }.text-link { font-size:.9rem; }
.callout { background:#f5f4ff; border:1px solid #dddafa; border-radius:12px; color:#393461; padding:19px; }.callout .eyebrow { color:#746fa4; margin-bottom:8px; }.callout code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92rem; }
.reference-group { margin-top:32px!important; }.reference-group>.eyebrow { margin-bottom:9px; }.tool-card { align-items:center; background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--ink); display:flex; justify-content:space-between; padding:19px 20px; }.tool-card:hover { border-color:#bbb5ec; text-decoration:none; }.tool-card h2 { font-size:1.12rem; margin:10px 0 4px; }.tool-card p { color:var(--muted); font-size:.92rem; margin:0; }.tool-card>span { color:#554caf; font-size:1.25rem; }
.write-warning { background:var(--orange-soft); border-left:3px solid #ce7b2c; border-radius:0 10px 10px 0; color:#765126; font-size:.92rem; margin-top:25px; padding:15px 18px; }.write-warning strong { color:#87470c; }
.source-note { background:#f6f8fa; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:.9rem; padding:17px 19px; }.source-note strong { color:#39445a; }.source-note p { margin:5px 0 0; }
.doc-content table { border-collapse:collapse; font-size:.87rem; width:100%; }.doc-content th { background:#fafbfc; color:#728095; font-size:.72rem; letter-spacing:.07em; text-align:left; text-transform:uppercase; }.doc-content th,.doc-content td { border-bottom:1px solid #e9edf2; padding:12px 10px; vertical-align:top; }.doc-content td { color:var(--muted); }.doc-content td:first-child { color:#343e52; font-weight:700; }.doc-content code { background:#eff0fb; border-radius:4px; color:#403789; padding:2px 5px; }.page-nav { border-top:1px solid var(--line); display:flex; justify-content:space-between; margin-top:46px!important; padding-top:20px; }.page-nav a { font-size:.89rem; }
.model-flow { display:grid; gap:0; grid-template-columns:repeat(4,1fr); margin-top:35px; }.model-flow>div { border-left:1px solid #dcdff0; padding:0 16px; }.model-flow>div:first-child { border-left:0; padding-left:0; }.model-flow span { color:#6259ad; display:block; font-size:.75rem; font-weight:800; margin-bottom:9px; }.model-flow strong { display:block; font-size:.93rem; line-height:1.35; }.model-flow p { color:var(--muted); font-size:.84rem; line-height:1.5; margin:8px 0 0; }
.prototype-layout { display:grid; gap:42px; grid-template-columns:230px minmax(0,1fr); }
.side { align-self:start; border-right:1px solid var(--line); padding-right:20px; position:sticky; top:92px; }
.side p { color:#7a8698; font-size:.72rem; font-weight:800; letter-spacing:.11em; margin:0 0 12px; text-transform:uppercase; }
.side a { color:#536174; display:block; font-size:.9rem; font-weight:550; padding:7px 9px; }
.side a.active { background:var(--indigo-soft); border-radius:7px; color:#443b90; }
.crumbs { color:#788598; font-size:.86rem; margin-bottom:22px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.badge { border-radius:999px; font-size:.76rem; font-weight:750; padding:4px 9px; }
.badge.read { background:var(--green-soft); color:var(--green); }.badge.access { background:#f4f5f8; color:#586579; }.badge.write { background:var(--orange-soft); color:var(--orange); }
.tool-title { font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.05em; line-height:1.06; margin:0; }
.tool-summary { color:var(--muted); font-size:1.08rem; line-height:1.65; max-width:690px; }
.two { display:grid; gap:14px; grid-template-columns:1fr 1fr; margin:30px 0; }
.list-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }.list-card h2 { font-size:1rem; }.list-card ul { color:var(--muted); font-size:.92rem; margin:0; padding-left:18px; }.list-card li+li { margin-top:7px; }
.prompt { background:#f5f4ff; border:1px solid #dddafa; border-radius:12px; color:#393461; margin:22px 0 32px; padding:18px; }.prompt small { color:#746fa4; display:block; font-size:.72rem; font-weight:800; letter-spacing:.1em; margin-bottom:8px; text-transform:uppercase; }.prompt code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.result-table { border:1px solid var(--line); border-radius:12px; overflow:hidden; }.result-row { border-top:1px solid #edf0f4; display:grid; gap:18px; grid-template-columns:150px 1fr 1fr; padding:15px 18px; }.result-row:first-child { background:#fafbfc; border-top:0; color:#758195; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.result-row div { color:var(--muted); font-size:.9rem; }.result-row div:first-child { color:#2c354a; font-weight:700; }
.technical { background:#fff; border:1px solid var(--line); border-radius:12px; margin-top:30px; padding:20px; }.technical code { background:#eff0fb; border-radius:4px; color:#403789; padding:2px 5px; }.technical p { color:var(--muted); margin:7px 0 0; }
@media(max-width:760px) { .grid,.two,.journey,.feature-grid,.integration-grid { grid-template-columns:1fr; }.prototype-layout,.doc-wrap { grid-template-columns:1fr; }.side,.docs-side { border-bottom:1px solid var(--line); border-right:0; padding:0 0 16px; position:static; }.side a,.docs-side a { display:inline-block; }.result-row { grid-template-columns:1fr; gap:5px; }.result-row:first-child { display:none; }.nav { gap:11px; }.header-inner { padding:0 16px; }.wrap,.doc-wrap { padding:38px 18px 54px; }.source-strip { align-items:flex-start; flex-direction:column; gap:11px; }.model-flow { grid-template-columns:1fr 1fr; row-gap:22px; }.model-flow>div:nth-child(3) { border-left:0; padding-left:0; }.page-nav { gap:18px; }.doc-content table { display:block; overflow-x:auto; white-space:nowrap; }.catalog-table>div { grid-template-columns:1fr; gap:6px; }.catalog-table>div:first-child { display:none; }.check-grid { grid-template-columns:1fr; } }