html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { [data-ann-text], * { transition: none !important; } }
body { margin: 0; background: #E9EDEF; color: #10161A; font-family: Nunito, system-ui, sans-serif; font-weight: 450; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: #4A2680; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #35195E; }
*:focus-visible { outline: 2px solid #4A2680; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
@keyframes dirhp-flow-276 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -276; } }
@keyframes dirhp-flow-276-rev { from { stroke-dashoffset: -276; } to { stroke-dashoffset: 0; } }
@keyframes dirhp-flow-220 { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -220; } }
@keyframes dirhp-flow-220-rev { from { stroke-dashoffset: -220; } to { stroke-dashoffset: 0; } }
@keyframes dirhp-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.95; } }
@keyframes dirhp-orb { 0% { opacity: 0; transform: scale(0.54); } 18% { opacity: 0.34; transform: scale(0.66); } 70%, 100% { opacity: 0; transform: scale(1.0); } }
/* hover rules converted from the design's style-hover attributes */
.lr { transition: background-color 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.lr:hover { background: rgba(255,255,255,0.7); }
.lc:hover { color: #3A2E52 !important; }
.la:hover { border-color: #4A2680 !important; color: #4A2680 !important; }
.dh0:hover { background: #35195E !important; border-color: #35195E !important; }
.dh1:hover { background: #E7DFF3 !important; }
.dh2:hover { stroke: #F2C744 !important; }
.dh3:hover { border-color: #4A2680 !important; box-shadow: 0 10px 28px rgba(16,22,26,0.18) !important; }
.dh4:hover { color: #F4F7F8 !important; background: #3A2A55 !important; }
.dh5:hover { color: #D3CAE0 !important; }
.dh6:hover { background: #3A2A55 !important; border-color: #B3A7C8 !important; color: #F4F7F8 !important; }
.dh7:hover { background: #D3CAE0 !important; border-color: #D3CAE0 !important; color: #26163E !important; }
.dh8:hover { color: #4A2680 !important; }
.dh9:hover { color: #E9EDEF !important; border-color: #7A868D !important; }
[role=tab] { background: transparent; color: #4A2680; border: 0; }
[role=tab] + [role=tab] { border-left: 1px solid #4A2680; }
[role=tab][aria-selected=true] { background: #4A2680; color: #fff; }
[role=tab][aria-selected=false]:hover { background: #E7DFF3; color: #4A2680; }
/* ---- hero demo ---- */
.hero-text { display: flex; flex-direction: column; gap: 1rem; }
.dm { margin-top: 3rem; min-width: 0; }
@media (min-width: 960px) {
.hero { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: clamp(64px, 7vw, 120px) !important; align-items: stretch; align-content: center; }
.hero-h1 { font-size: clamp(34px, 4vw, 58px) !important; }
.hero-text { justify-content: space-between; }
.dm { margin-top: 0; display: flex; flex-direction: column; }
.dm > div[aria-hidden] { flex: 1 1 auto; display: flex; flex-direction: column; }
.dm-vp { flex: 1 1 auto; aspect-ratio: auto !important; min-height: clamp(380px, 32vw, 500px) !important; }
}
.dm-vp { position: relative; width: 100%; min-width: 0; aspect-ratio: 4 / 3; min-height: 300px; box-sizing: border-box; overflow: hidden; background: #171E22; border: 1px solid #10161A; }
.dm-svg { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 120px); display: block; }
.dm-ext { opacity: 0; transform: translateY(24px); transition: opacity 900ms ease-out, transform 900ms ease-out; }
.dm-ext.show { opacity: 1; transform: none; }
.dm-ext.out { opacity: 0; transform: translateY(-24px); transition-duration: 800ms; transition-timing-function: ease-in; }
.dm-o { stroke: #3C4A52; stroke-width: 1; stroke-linejoin: round; transition: stroke var(--d, 600ms) ease, opacity 400ms ease; }
.dm-o polygon { vector-effect: non-scaling-stroke; transition: fill var(--d, 600ms) ease, fill-opacity var(--d, 600ms) ease; }
.dm-o path { fill: none; vector-effect: non-scaling-stroke; }
.dm-o .t { fill: #2A353B; } .dm-o .l { fill: #212B31; } .dm-o .r { fill: #1A2328; }
.dm-o.on { stroke: var(--s); }
.dm-o.on .t { fill: var(--t); } .dm-o.on .l { fill: var(--l); } .dm-o.on .r { fill: var(--r); }
.dm-o.on.k-glass polygon { fill-opacity: 0.75; }
.k-structure { --s: #A9B6BC; --t: #A0AEB5; --l: #8B9AA2; --r: #707E86; }
.k-cladding { --s: #C2A585; --t: #B89D7D; --l: #A68B6B; --r: #86705A; }
.k-frame { --s: #D3CAE0; --t: #C4BAD6; --l: #B3A7C8; --r: #9A8DB0; }
.k-glass { --s: #8FBDD0; --t: #6FA2B9; --l: #5E8FA6; --r: #4A7589; }
.k-roof { --s: #93AF8F; --t: #84A180; --l: #6F8C6B; --r: #587252; }
.dm-o.on.ln { stroke: #B3A7C8; }
.dm-dim .dm-o:not(.k-glass) { opacity: 0.35; }
.dm-pulse .k-glass { animation: dm-pulse 700ms ease-in-out 1; }
@keyframes dm-pulse { 0%, 100% { filter: brightness(1); } 45% { filter: brightness(2.1) drop-shadow(0 0 4px #8FBDD0); } }
.dm-pills { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.dm-pill { font: 600 10.5px/1 Nunito, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; color: #8B9AA2; border: 1px solid #3C4A52; padding: 5px 9px; transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; }
.dm-pill.on { background: #B3A7C8; border-color: #B3A7C8; color: #26163E; }
.dm-chip { position: absolute; top: 12px; right: 12px; font: 500 11px/1 'IBM Plex Mono', monospace; color: #26163E; background: #B3A7C8; padding: 6px 10px; opacity: 0; transform: translateY(-6px); transition: opacity 250ms ease, transform 250ms ease; }
.dm-chip.on { opacity: 1; transform: none; }
.dm-legend { position: absolute; left: 12px; top: 46px; display: flex; flex-direction: column; gap: 7px; }
.dm-lg { display: flex; align-items: center; gap: 5px; font: 600 10.5px/1 Nunito, sans-serif; color: #B8C3C9; opacity: 0; transition: opacity 300ms ease; }
.dm-lg.on { opacity: 1; }
.dm-lg i { width: 8px; height: 8px; background: var(--l); border: 1px solid var(--s); }
.dm-modal { position: absolute; top: 12px; right: 12px; width: 220px; box-sizing: border-box; background: #F2EEF8; border: 1px solid #D6CCE5; padding: 12px 14px; color: #10161A; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 300ms ease-out, transform 300ms ease-out; box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.dm-modal.on { opacity: 1; transform: none; }
.dm-modal.leave { transition-duration: 400ms; transform: scale(0.96); }
.dm-mt { font: 700 10px/1 Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #8A7C9E; margin-bottom: 6px; }
.dm-mh { font: 700 13px/1.2 Manrope, sans-serif; padding-bottom: 8px; border-bottom: 1px solid #D6CCE5; }
.dm-rows { min-height: 100px; padding: 6px 0; }
.dm-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font: 400 11px/1.3 'IBM Plex Mono', monospace; opacity: 0; transform: translateY(4px); transition: opacity 160ms ease, transform 160ms ease; }
.dm-row.on { opacity: 1; transform: none; }
.dm-k { color: #8A7C9E; } .dm-v { text-align: right; min-height: 1.3em; }
.dm-mf { font: 700 11px/1 Nunito, sans-serif; color: #4A2680; opacity: 0; transition: opacity 250ms ease; }
.dm-mf.on { opacity: 1; }
.dm-comp { position: absolute; left: 16px; right: 16px; bottom: 16px; box-sizing: border-box; background: #FAFAFA; border: 1px solid #D6CCE5; border-radius: 16px; padding: 12px 12px 10px 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.dm-text { height: 2.8em; overflow: hidden; font: 450 13px/1.4 Nunito, sans-serif; color: #10161A; }
.dm-ph { color: #8A7C9E; }
.dm-t:not(:empty) ~ .dm-ph, .dm-comp.typing .dm-ph { display: none; }
.dm-caret { display: none; width: 1px; height: 1em; background: #10161A; vertical-align: -0.12em; margin-left: 1px; }
.dm-comp.typing .dm-caret { display: inline-block; animation: dm-blink 1s steps(1) infinite; }
@keyframes dm-blink { 50% { opacity: 0; } }
.dm-bar { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: #5B4F70; }
.dm-bar svg { display: block; flex: none; }
.dm-sp { flex: 1; }
.dm-auto { font: 600 11.5px/1 Nunito, sans-serif; border: 1px solid #D6CCE5; border-radius: 999px; padding: 6px 10px; }
.dm-send { width: 28px; height: 28px; border-radius: 50%; background: #4A2680; color: #fff; display: flex; align-items: center; justify-content: center; transition: transform 150ms ease; }
.dm-send.press { transform: scale(0.92); }
.dm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
.dm-vp { min-height: 440px; }
.dm-svg { width: 128%; left: -4%; top: 56px; height: calc(100% - 176px); }
.dm-text { height: 4.2em; font-size: 12.5px; }
.dm-modal { top: 46px; width: 176px; padding: 10px 12px; }
.dm-chip { top: 46px; }
.dm-row { font-size: 10px; white-space: nowrap; }
}
@media (min-width: 960px) and (max-width: 1199px) {
.dm-vp { min-height: 400px; }
.dm-modal { top: 46px; width: 176px; padding: 10px 12px; }
.dm-chip { top: 46px; }
.dm-row { font-size: 10px; white-space: nowrap; }
}
/* ---- hero marquee: agent clients ---- */
.mq { overflow: hidden; border-top: 1px solid #D3DBDF; border-bottom: 1px solid #D3DBDF; padding: 22px 0; margin: 4px 0 0;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; width: max-content; animation: mq-scroll 21s linear infinite; } /* list width ~860px / 21s = ~41px/s; retune if items change */
.mq-list { display: flex; margin: 0; padding: 0; list-style: none; flex: none; }
.mq-list li { position: relative; display: flex; align-items: center; padding-right: 40px; white-space: nowrap; font: 600 17.5px/1.3 Manrope, sans-serif; color: #10161A; }
.mq-list li::after { content: ""; position: absolute; right: 18px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: #B3A7C8; }
.mq-list li.soon { color: rgba(16, 22, 26, 0.48); min-width: 76px; justify-content: center; } /* slot fits the caption so it never hangs into the next gap */
.mq-list small { position: absolute; top: 100%; left: calc(50% - 20px); transform: translateX(-50%); margin-top: 3px; white-space: nowrap; font: 700 9px/1 Nunito, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #8A7C9E; } /* left offsets the 40px item padding */
@keyframes mq-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.mq { -webkit-mask-image: none; mask-image: none; }
.mq-track { animation: none; display: block; width: auto; }
.mq-list { flex-wrap: wrap; row-gap: 22px; }
.mq-list[aria-hidden] { display: none; }
}
/* ---- content pages: blog, post, help ---- */
.wrap { width: max(75vw, min(90vw, 420px)); margin: 0 auto; box-sizing: border-box; }
.page-bg { min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 0; background: rgba(250,250,250,1); }
.page-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at 1px 1px, rgba(16,22,26,0.1) 1px, transparent 0); background-size: 32px 32px; }
.eyebrow { margin: 0 0 14px; font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: 0.04em; color: #4A2680; }
.eyebrow a { color: inherit; text-decoration: none; } .eyebrow a:hover { text-decoration: underline; }
.page-h1 { font-family: Manrope; font-weight: 700; margin: 0 0 18px; max-width: 20ch; letter-spacing: -0.025em; line-height: 1.06; font-size: clamp(34px, 5.6vw, 60px); text-wrap: balance; }
.lede { margin: 0; max-width: 56ch; font-family: Nunito; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: #38444B; }
.sec-h2 { font-family: Manrope; font-weight: 680; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 1.5rem; }
.meta { font: 400 12px/1.4 'IBM Plex Mono', monospace; color: #63717A; }
.tag { display: inline-block; font: 700 10.5px/1 Nunito, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #4A2680; border: 1px solid #D6CCE5; background: #F2EEF8; padding: 5px 8px; }
.code { font-family: 'IBM Plex Mono', monospace; font-size: 0.86em; background: #E7DFF3; color: #26163E; padding: 1px 5px; }
.btn { display: inline-block; background: #4A2680; color: #fff; text-decoration: none; font-family: Manrope; font-weight: 600; font-size: 16px; padding: 14px 24px; border: 1px solid #4A2680; transition: background-color 160ms ease, border-color 160ms ease; }
.btn:hover { background: #35195E; border-color: #35195E; color: #fff; }
.btn-light { background: #F4F7F8; color: #26163E; border-color: #F4F7F8; }
.btn-light:hover { background: #D3CAE0; border-color: #D3CAE0; color: #26163E; }
.band { color: #F4F7F8; background-color: #26163EE6; border-top: 1px solid #2A1A45; border-bottom: 1px solid #2A1A45; }
.band .lede { color: #D3CAE0; }
.iso-vp { position: relative; background: #171E22; border: 1px solid #10161A; overflow: hidden; }
.iso-vp svg { display: block; width: 100%; height: 100%; }
.iso-vp .dm-o { --d: 0ms; }
.iso-vp .dm-pills { pointer-events: none; }
/* blog index: filter column + card grid */
.blog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(40px, 5vw, 80px); padding: 40px 0 96px; }
@media (min-width: 900px) { .blog { grid-template-columns: 180px minmax(0, 1fr); } .filters { position: sticky; top: 93px; align-self: start; } }
.filters { display: flex; flex-direction: column; gap: 24px; }
.f-group p { margin: 0 0 8px; font: 700 10.5px/1 Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #8A7C9E; }
.f-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: 1px solid #D6CCE5; }
.f-group button { width: 100%; display: flex; justify-content: space-between; gap: 12px; padding: 6px 0 6px 14px; margin-left: -1px; background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; text-align: left; font-family: Nunito; font-size: 14.5px; color: #38444B; }
.f-group button:hover { color: #4A2680; }
.f-group button[aria-pressed=true] { color: #4A2680; font-weight: 700; border-left-color: #4A2680; }
.f-group small { font: 400 11.5px/1.6 'IBM Plex Mono', monospace; color: #8A7C9E; }
@media (max-width: 899px) {
.filters { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
.f-group ul { flex-direction: row; flex-wrap: wrap; gap: 6px; border: 0; }
.f-group button { width: auto; padding: 6px 10px; margin: 0; border: 1px solid #D6CCE5; background: #fff; }
.f-group button[aria-pressed=true] { background: #4A2680; border-color: #4A2680; color: #fff; }
.f-group button[aria-pressed=true] small { color: #D3CAE0; }
}
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.cards li[hidden] { display: none; }
.card { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #D3DBDF; text-decoration: none; color: #10161A; transition: border-color 200ms ease, box-shadow 200ms ease; }
.card:hover { border-color: #4A2680; box-shadow: 0 10px 26px rgba(16,22,26,0.1); color: #10161A; }
.cover { position: relative; aspect-ratio: 3 / 2; border-bottom: 1px solid #D3DBDF; background: #FAFAFA; overflow: hidden; }
.cover::before, .cover::after { content: ""; position: absolute; background: #E3E8EA; }
.cover::before { left: 50%; top: 0; bottom: 0; width: 1px; } .cover::after { top: 50%; left: 0; right: 0; height: 1px; }
.cover svg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.cover .dm-o { stroke: #10161A; stroke-opacity: 0.35; }
.card-b { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; }
.card-h { margin: 0; font-family: Manrope; font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.card:hover .card-h { color: #4A2680; }
.card-x { margin: 0; font-family: Nunito; font-size: 15px; line-height: 1.6; color: #4F5C63; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-f { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; font: 400 11.5px/1 'IBM Plex Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #8A9499; }
.card-f span:last-child { color: #4A2680; }
.no-match { margin: 0; font-family: Nunito; font-size: 15.5px; color: #63717A; }
.no-match[hidden] { display: none; }
/* blog post */
.post-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
@media (min-width: 1040px) { .post-grid { grid-template-columns: minmax(0, 68ch) 220px; justify-content: space-between; } .toc { position: sticky; top: 88px; align-self: start; } }
.toc p { margin: 0 0 12px; font: 700 10.5px/1 Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #8A7C9E; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid #D6CCE5; }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 1px solid transparent; font-family: Nunito; font-size: 14px; color: #38444B; text-decoration: none; }
.toc a:hover, .toc a[aria-current=true] { color: #4A2680; border-left-color: #4A2680; }
.prose { font-family: Nunito; font-size: 17.5px; line-height: 1.72; color: #1E2A30; }
.prose > * { margin: 0 0 1.15em; }
.prose h2 { font-family: Manrope; font-weight: 680; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -0.015em; color: #10161A; margin: 2.2em 0 0.7em; scroll-margin-top: 88px; }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li { margin: 0 0 0.45em; } .prose li::marker { color: #8A7C9E; }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid #4A2680; font-family: Manrope; font-weight: 550; font-size: 21px; line-height: 1.45; color: #26163E; }
.prose figure { margin: 2em 0; } .prose figcaption { margin-top: 10px; font: 400 12px/1.5 'IBM Plex Mono', monospace; color: #63717A; }
.prose .iso-vp { aspect-ratio: 16 / 9; }
.post-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid #CBD4D8; font-family: Nunito; font-size: 15px; }
/* help: docs layout, contents column + article column */
.docs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(40px, 5vw, 80px); padding: 0 0 96px; }
.docs-side { padding: 24px 0 8px; border-bottom: 1px solid #D3DBDF; }
.docs-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #B9C4CA; padding: 12px 14px; font: 600 15px/1 Manrope, sans-serif; color: #10161A; cursor: pointer; }
.docs-toggle::after { content: "+"; font: 400 16px/1 'IBM Plex Mono', monospace; color: #63717A; }
.docs-toggle[aria-expanded=true]::after { content: "\2212"; }
.docs-nav { display: none; padding: 16px 0 8px; }
.docs-toggle[aria-expanded=true] + .docs-nav { display: block; }
@media (min-width: 900px) {
.docs { grid-template-columns: 240px minmax(0, 72ch); }
.docs-side { position: sticky; top: 53px; align-self: start; max-height: calc(100vh - 53px); overflow-y: auto; box-sizing: border-box; padding: 40px 8px 40px 0; border-bottom: 0; }
.docs-toggle { display: none; }
.docs-nav { display: block; padding: 0; }
}
.search { position: relative; margin: 0 0 24px; }
.search input { width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #B9C4CA; color: #10161A; font-family: Nunito; font-size: 15px; padding: 10px 10px 10px 34px; border-radius: 0; -webkit-appearance: none; appearance: none; }
.search input:focus { outline: 2px solid #4A2680; outline-offset: 0; border-color: #4A2680; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #63717A; pointer-events: none; }
.search-note { margin: 8px 0 0; font: 400 11.5px/1.4 'IBM Plex Mono', monospace; color: #63717A; }
.search-note:empty { display: none; }
.nav-group { margin: 0 0 22px; }
.nav-group[hidden], .nav-group li[hidden] { display: none; }
.nav-group p { margin: 0 0 8px; font: 700 10.5px/1 Nunito, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #8A7C9E; }
.nav-group ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid #D6CCE5; }
.nav-group a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-family: Nunito; font-size: 14.5px; line-height: 1.35; color: #38444B; text-decoration: none; }
.nav-group a:hover { color: #4A2680; }
.nav-group a[aria-current=true] { color: #4A2680; font-weight: 700; border-left-color: #4A2680; }
.docs-main { min-width: 0; padding-top: 40px; }
.docs-main .prose { font-size: 16.5px; }
.doc-part { padding-bottom: 8px; }
.doc-part + .doc-part { border-top: 1px solid #D3DBDF; padding-top: 48px; margin-top: 40px; }
.doc-part > .eyebrow { margin-bottom: 0; }
.doc { scroll-margin-top: 72px; }
.doc h2 { margin-top: 1.4em; }
.doc-part > .doc:first-of-type h2 { margin-top: 0.6em; }
.steps-ol { list-style: none; padding: 0 !important; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.steps-ol li { counter-increment: s; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; align-items: baseline; margin: 0; }
.steps-ol li::before { content: counter(s, decimal-leading-zero); font: 500 12px/1 'IBM Plex Mono', monospace; color: #8A7C9E; }
.cmd { display: block; margin: 8px 0 2px; font: 400 13.5px/1.5 'IBM Plex Mono', monospace; background: #26163E; color: #F4F7F8; padding: 11px 14px; overflow-x: auto; white-space: pre; }
.note { border-left: 2px solid #4A2680; background: #F2EEF8; padding: 12px 16px; font-size: 15.5px; }
.tabs-h { margin: 1.6em 0 0.5em; font-family: Manrope; font-weight: 650; font-size: 17px; color: #10161A; }
/* ---- context diagram: assistant, tool carousel, dirhp, model + design context ---- */
.ctx { position: relative; display: grid; gap: 64px; margin: 0; padding: 0 64px 0 0; max-width: 980px; width: 100%; box-sizing: border-box; font-family: Nunito, sans-serif; }
.ctx-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.ctx-wires .w { fill: none; stroke: #CDBDEB; stroke-width: 1.4; }
.ctx-wires .f { fill: none; stroke: #9B72D8; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 7 93; animation: ctx-flow 3.6s linear infinite; }
.ctx-wires .loop.w { stroke: #9B72D8; stroke-width: 1.8; }
.ctx-wires .loop.f { stroke: #4A2680; animation-duration: 4.8s; }
.ctx-wires .dot { fill: #FFFFFF; stroke: #9B72D8; stroke-width: 1.4; }
.ctx-wires .arrow { fill: #9B72D8; }
@keyframes ctx-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.ctx > .ctx-card, .ctx > .ctx-tools { position: relative; z-index: 1; }
.ctx-card { background: #FFFFFF; border: 1px solid #D3DBDF; border-radius: 14px; box-shadow: 0 10px 30px rgba(38,22,62,0.07); box-sizing: border-box; }
.ctx-ai { justify-self: center; width: min(100%, 440px); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 26px 24px; font-family: Manrope; font-weight: 650; font-size: 20px; color: #26163E; }
.ctx-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.ctx-tools > * { justify-self: center; width: min(100%, 300px); }
.ctx-node { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 26px 18px; }
.ctx-node b { font-family: Manrope; font-weight: 680; font-size: 20px; color: #10161A; letter-spacing: -0.01em; }
.ctx-node span { font-size: 15px; color: #5B6A72; line-height: 1.35; }
.ctx-node svg { margin-bottom: 8px; }
.ctx-node img { border-radius: 7px; margin-bottom: 8px; }
.ctx-dirhp { background: #F2EEF8; border-color: #D6CCE5; }
.ctx-dirhp b { color: #26163E; }
.ctx-dirhp span { color: #5B4F70; }
/* stack: two ghost cards behind, one live card whose faces cross-fade */
.ctx-stack { position: relative; }
.ctx-ghost { position: absolute; inset: 0; border: 1px solid #D3DBDF; border-radius: 14px; background: #FFFFFF; }
.ctx-ghost:nth-child(1) { transform: translate(-22px, 10px) scale(0.94); opacity: 0.55; }
.ctx-ghost:nth-child(2) { transform: translate(-11px, 5px) scale(0.97); opacity: 0.85; }
.ctx-stack > .ctx-card { position: relative; display: grid; height: 100%; }
.ctx-face { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.ctx-face.on { visibility: visible; opacity: 1; }
.ctx-model { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(220px, 1fr); align-items: center; gap: 12px; padding: 18px; }
.ctx-model img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%); }
.ctx-panel { background: #F2EEF8; border: 1px solid #D6CCE5; border-radius: 12px; padding: 20px 18px 8px; }
.ctx-panel h4 { margin: 0 0 6px; font-family: Manrope; font-weight: 680; font-size: 18px; color: #26163E; }
.ctx-panel ul { margin: 0; padding: 0; list-style: none; }
.ctx-panel li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 0; font-size: 14px; color: #5B4F70; line-height: 1.35; }
.ctx-panel li + li { border-top: 1px solid #D6CCE5; }
.ctx-panel li b { display: block; font-family: Manrope; font-weight: 650; font-size: 15px; color: #10161A; }
.ctx-ico { width: 40px; height: 40px; border-radius: 10px; background: #FFFFFF; border: 1px solid #D6CCE5; display: grid; place-items: center; }
.ctx .ctx-tag { position: absolute; z-index: 2; transform: translate(-50%, -50%); white-space: nowrap; background: #F2EEF8; border: 1px solid #D6CCE5; color: #4A2680; border-radius: 999px; padding: 6px 14px; font-family: Manrope; font-weight: 620; font-size: 13.5px; }
.ctx-tag[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
.ctx { gap: 44px; padding-right: 30px; }
.ctx-tools { gap: 16px; }
.ctx-node { padding: 18px 10px; }
.ctx-node b { font-size: 16px; }
.ctx-node span { font-size: 13px; }
.ctx-ai { font-size: 17px; padding: 18px; }
.ctx-model { grid-template-columns: minmax(0, 1fr); padding: 12px; }
.ctx-ghost:nth-child(1) { transform: translate(-8px, 12px) scale(0.94); }
.ctx-ghost:nth-child(2) { transform: translate(-4px, 6px) scale(0.97); }
}