/* Enterprise banking architecture portfolio */
body[data-page-kind="work-portfolio"] .portfolio-hero{padding-top:clamp(2rem,5vw,5rem);padding-bottom:1.5rem}
.portfolio-hero-grid{margin-top:clamp(1.4rem,4vw,3.6rem)}
.portfolio-hero h1{max-width:15ch;margin:.4rem 0 .9rem;font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.075em}
.portfolio-hero .sub{max-width:76ch;color:var(--muted);font-family:var(--f-body);font-size:clamp(1rem,1.5vw,1.3rem);line-height:1.5}
.portfolio-disclosure{margin-top:clamp(1.5rem,3vw,2.5rem);max-width:100ch;padding:1rem 1.1rem;border-left:4px solid var(--t-gov);background:color-mix(in srgb,var(--t-gov) 7%,var(--bg));color:var(--muted);font:400 .9rem/1.55 var(--f-body)}
.portfolio-disclosure strong{color:var(--ink)}
.portfolio-tools{position:sticky;top:3.2rem;z-index:45;padding-block:.9rem;border-block:1px solid var(--line);background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(12px)}
.portfolio-search{display:grid;grid-template-columns:minmax(150px,.25fr) minmax(260px,1fr);gap:1rem;align-items:center}
.portfolio-search label{font:600 .72rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.portfolio-search input{width:100%;min-height:2.6rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);font:500 .9rem/1.2 var(--f-display)}
.portfolio-filters{display:flex;gap:.4rem .8rem;flex-wrap:wrap;margin-top:.8rem}
.portfolio-filter,.portfolio-status button{appearance:none;padding:.25rem 0;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;font:600 .72rem/1.2 var(--f-display)}
.portfolio-filter:hover,.portfolio-filter.on,.portfolio-status button:hover{border-bottom-color:var(--ink);color:var(--ink)}
.portfolio-filter.on{color:var(--t-agentic)}
.portfolio-status{display:flex;justify-content:space-between;gap:1rem;margin-top:.75rem;color:var(--muted);font:500 .68rem/1.2 var(--f-mono);letter-spacing:.04em}
.portfolio-list{margin-top:1.4rem;border-top:2px solid var(--ink)}
.portfolio-case{border-bottom:1px solid var(--line)}
.portfolio-case[hidden]{display:none}
.portfolio-case summary{display:grid;grid-template-columns:minmax(0,1fr) 2rem;gap:1rem;align-items:start;padding:1.15rem 0;cursor:pointer;list-style:none}
.portfolio-case summary::-webkit-details-marker{display:none}
.portfolio-heading{display:grid;grid-template-columns:minmax(13rem,.42fr) minmax(15rem,.58fr) minmax(20rem,1fr);gap:clamp(1rem,3vw,3rem);align-items:baseline}
.portfolio-domain{color:var(--muted);font:500 .69rem/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.portfolio-heading strong{color:var(--ink);font:600 clamp(1.05rem,1.5vw,1.35rem)/1.15 var(--f-display);letter-spacing:-.025em}
.portfolio-heading>span:last-child{color:var(--muted);font:400 .9rem/1.5 var(--f-body)}
.portfolio-open{color:var(--muted);font:300 1.6rem/1 var(--f-display);transition:transform .2s ease}
.portfolio-case[open] .portfolio-open{transform:rotate(45deg)}
.portfolio-case[open] summary{border-bottom:1px solid var(--line)}
.portfolio-detail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-left:1px solid var(--line);margin:0 0 1.4rem}
.portfolio-field{padding:1rem 1.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.portfolio-field h3{margin:0 0 .35rem;color:var(--muted);font:600 .66rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.portfolio-field p{margin:0;color:var(--ink);font:400 .9rem/1.55 var(--f-body)}
.portfolio-solution{grid-column:1 / -1;border-top:3px solid var(--t-gov);background:color-mix(in srgb,var(--t-gov) 5%,var(--bg))}
.portfolio-design-link{grid-column:1 / -1;display:grid;grid-template-columns:minmax(11rem,.35fr) minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem 1.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink);color:var(--bg);font:400 .84rem/1.45 var(--f-body);text-decoration:none}
.portfolio-design-link span{font:650 .74rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.portfolio-design-link b{font:400 1.4rem/1 var(--f-display);transition:transform .2s ease}
.portfolio-design-link:hover b{transform:translateX(.35rem)}
.portfolio-empty{padding:2rem 0;color:var(--muted);font-family:var(--f-body)}
.portfolio-platform{display:grid;grid-template-columns:minmax(240px,.42fr) minmax(0,1fr);gap:clamp(2rem,7vw,8rem);margin-top:clamp(4rem,8vw,8rem);padding-block:2rem;border-block:1px solid var(--ink)}
.portfolio-platform h2{margin:.35rem 0 .8rem;font:600 clamp(2rem,4vw,4rem)/1 var(--f-display);letter-spacing:-.055em}
.portfolio-platform p{max-width:48ch;color:var(--muted);font:400 .95rem/1.55 var(--f-body)}
.portfolio-platform ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.portfolio-platform li{display:grid;gap:.25rem;padding:.75rem .9rem;border-bottom:1px solid var(--line)}
.portfolio-platform li strong{font:600 .82rem/1.2 var(--f-display)}
.portfolio-platform li span{color:var(--muted);font:400 .8rem/1.4 var(--f-body)}
.portfolio-deepdives{margin-top:clamp(4rem,8vw,8rem);margin-bottom:5rem}
.portfolio-deepdives .hubhead{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.8rem;border-bottom:2px solid var(--ink)}
.portfolio-deepdives .hubhead h2{margin:0;font:600 clamp(2rem,4vw,4rem)/1 var(--f-display);letter-spacing:-.055em}
.portfolio-deep-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-bottom:1px solid var(--line)}
.portfolio-deep-grid .wcard{display:grid;grid-template-columns:1fr;align-content:start;min-height:0;padding:1.4rem;border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.portfolio-deep-grid .wcard:nth-child(2n){border-right:0}
.portfolio-deep-grid .wdiag{display:none}
.portfolio-deep-grid .wcard h3{padding:.55rem 0 .25rem;font:600 clamp(1.3rem,2.2vw,2rem)/1.08 var(--f-display);letter-spacing:-.04em}
.portfolio-deep-grid .wcard p{padding:0;color:var(--muted);font:400 .9rem/1.5 var(--f-body)}
.portfolio-deep-grid .wcard .doorgo{padding:.8rem 0 0}
.portfolio-deepdives .morework{margin-top:1.2rem}

/* Individual enterprise system designs */
body[data-page-kind="system-design"]{--case-accent:var(--t-agentic);--design-accent:var(--case-accent);--t-sky:var(--t-research);--t-control:var(--t-gov);--t-emphasis:var(--t-memory)}
body[data-visual-pattern="interactive-read"],body[data-visual-pattern="analytics-decision"]{--case-accent:var(--t-research)}
body[data-visual-pattern="transactional-saga"],body[data-visual-pattern="batch-reconciliation"]{--case-accent:var(--t-gov)}
body[data-visual-pattern="event-investigation"],body[data-visual-pattern="streaming-control"]{--case-accent:var(--t-mind)}
body[data-visual-pattern="knowledge-compiler"]{--case-accent:var(--t-memory)}
body[data-visual-pattern="platform-lifecycle"]{--case-accent:var(--t-atlas)}
.system-design{overflow:hidden}
.design-hero{padding-top:clamp(2rem,5vw,5rem);padding-bottom:clamp(3rem,7vw,7rem)}
.design-hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:clamp(2rem,4vw,4rem);color:var(--muted);font:600 .69rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.design-hero-meta span:not(:last-child){padding-right:1.4rem;border-right:1px solid var(--line)}
.design-hero h1{max-width:14ch;margin:.75rem 0 1.2rem;font:600 clamp(3.2rem,7.6vw,7.8rem)/.9 var(--f-display);letter-spacing:-.075em}
.design-problem{max-width:72ch;color:var(--muted);font:400 clamp(1.08rem,1.65vw,1.42rem)/1.55 var(--f-body)}
.design-thesis{display:grid;grid-template-columns:minmax(11rem,.25fr) minmax(0,1fr);gap:clamp(1rem,4vw,4rem);margin-top:clamp(2rem,4vw,4rem);padding:1.35rem 0;border-block:2px solid var(--ink)}
.design-thesis span{padding-top:.25rem;color:var(--design-accent);font:650 .72rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.design-thesis p{max-width:62ch;margin:0;font:600 clamp(1.25rem,2.2vw,2rem)/1.25 var(--f-display);letter-spacing:-.025em}
.design-disclosure{max-width:94ch;margin:1rem 0 0;color:var(--muted);font:400 .78rem/1.5 var(--f-body)}
.design-section{padding-block:clamp(3.2rem,7vw,7rem);border-top:1px solid var(--line)}
.design-section-head{display:grid;grid-template-columns:minmax(8.5rem,.18fr) minmax(16rem,.42fr) minmax(18rem,.4fr);gap:clamp(1rem,4vw,4rem);align-items:start;margin-bottom:clamp(1.8rem,4vw,3.5rem)}
.design-section-head>span{padding-top:.45rem;color:var(--design-accent);font:650 .7rem/1.25 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.design-section-head h2{margin:0;font:600 clamp(2rem,4vw,4rem)/.98 var(--f-display);letter-spacing:-.055em}
.design-section-head p{max-width:44ch;margin:.25rem 0 0;color:var(--muted);font:400 .96rem/1.58 var(--f-body)}
.design-boundary-grid,.design-operate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.design-boundary-grid article,.design-operate-grid article{min-height:10rem;padding:1.3rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.design-boundary-grid h3,.design-rule-grid h3,.design-failure h3,.design-measures h3,.design-operate-grid h3,.design-gates h3{margin:0 0 .55rem;color:var(--muted);font:650 .68rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.design-boundary-grid p,.design-rule-grid p,.design-failure p,.design-measures p,.design-operate-grid p{margin:0;font:400 .94rem/1.58 var(--f-body)}
.authority-map{display:grid;grid-template-columns:minmax(310px,.42fr) minmax(0,.58fr);gap:clamp(2rem,6vw,7rem);align-items:center;margin:0;padding:clamp(1.5rem,4vw,4rem);background:linear-gradient(135deg,color-mix(in srgb,var(--design-accent) 8%,var(--bg)),color-mix(in srgb,var(--t-gov) 5%,var(--bg)));border-top:2px solid var(--ink)}
.authority-orbits{display:grid;place-items:center;aspect-ratio:1;min-height:310px}
.authority-orbit{display:grid;place-items:center;border-radius:50%;position:relative}
.authority-orbit>span{position:absolute;top:1rem;left:50%;translate:-50% 0;white-space:nowrap;font:650 .63rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.authority-estate{width:100%;max-width:430px;aspect-ratio:1;border:1px solid var(--t-sky);background:color-mix(in srgb,var(--t-sky) 7%,transparent)}
.authority-control{width:66%;aspect-ratio:1;border:2px solid var(--t-gov);background:color-mix(in srgb,var(--t-gov) 9%,var(--bg))}
.authority-model{width:48%;aspect-ratio:1;border:2px dotted var(--design-accent);background:var(--bg)}
.authority-model>span{top:20%}.authority-model b{font:650 clamp(2rem,5vw,4.5rem)/1 var(--f-display);letter-spacing:-.08em}
.authority-signals{display:grid;gap:0}
.authority-signals article{display:grid;grid-template-columns:2.7rem minmax(0,1fr);gap:1rem;padding:1rem 0;border-top:1px solid var(--line)}
.authority-signals article:last-child{border-bottom:1px solid var(--line)}
.authority-signals i{display:grid;place-items:center;width:1.8rem;height:1.8rem;border:1px solid var(--t-sky);border-radius:50%;color:var(--t-sky);font:650 .62rem/1 var(--f-mono);font-style:normal}
.authority-signals h3{margin:0 0 .25rem;font:650 .78rem/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.authority-signals p{max-width:60ch;margin:0;color:var(--muted);font:400 .87rem/1.5 var(--f-body)}
.authority-signals .authority-stop i{border-color:var(--t-gov);background:var(--t-gov);color:var(--bg);font-size:1rem}
.authority-map figcaption{grid-column:1 / -1;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--line);color:var(--muted);font:500 .7rem/1.4 var(--f-mono);letter-spacing:.03em}
.design-architecture{position:relative}
.design-topology{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:0;padding:0;list-style:none;border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.design-lane{position:relative;min-height:13.5rem;padding:1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--muted) 3%,var(--bg))}
.design-lane.active{background:color-mix(in srgb,var(--design-accent) 8%,var(--bg))}
.design-lane>span{display:block;margin-bottom:clamp(2.5rem,6vw,5rem);color:var(--muted);font:600 .65rem/1 var(--f-mono)}
.design-lane strong{display:block;font:650 .92rem/1.22 var(--f-display)}
.design-lane p{margin:.55rem 0 0;color:var(--muted);font:400 .75rem/1.45 var(--f-body)}
.design-lane:not(:last-child)::after{content:"→";position:absolute;top:1rem;right:-.45rem;z-index:2;padding:.1rem;background:var(--bg);color:var(--design-accent);font:600 .75rem/1 var(--f-mono)}
.design-callout{display:grid;grid-template-columns:minmax(11rem,.25fr) minmax(0,1fr);gap:2rem;padding:1.2rem;border:1px solid var(--line);border-top:0}
.design-callout strong{font:650 .68rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.design-callout p{max-width:72ch;margin:0;font:400 .92rem/1.55 var(--f-body)}
.design-path{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.design-path li{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--line)}
.design-path span{color:var(--design-accent);font:650 .68rem/1.5 var(--f-mono)}
.design-path p{max-width:78ch;margin:0;font:500 clamp(.94rem,1.2vw,1.08rem)/1.52 var(--f-body)}
.design-rule-grid,.design-measures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2rem;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.design-rule-grid article,.design-measures article{padding:1.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.design-table-wrap{width:100%;overflow-x:auto;border-top:2px solid var(--ink)}
.design-table{width:100%;min-width:880px;border-collapse:collapse;table-layout:fixed}
.design-table th,.design-table td{padding:1rem 1.1rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.design-table thead th{color:var(--muted);font:650 .65rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.design-table tbody th{width:22%;font:650 .9rem/1.35 var(--f-display)}
.design-table tbody th span{display:block;margin-top:.3rem;color:var(--muted);font:500 .62rem/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.design-table td{font:400 .86rem/1.55 var(--f-body)}
.design-table code,.design-measures code{white-space:normal;color:var(--ink);font:500 .75rem/1.5 var(--f-mono)}
.design-records th:nth-child(1){width:18%}.design-records th:nth-child(2){width:34%}
.design-tradeoffs{min-width:1120px}.design-tradeoffs th{width:25%}
.design-failure{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:2rem;border-top:2px solid var(--ink);border-left:1px solid var(--line)}
.design-failure article{min-height:9rem;padding:1.2rem;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.design-failure article:first-child{background:color-mix(in srgb,var(--t-gov) 7%,var(--bg))}
.design-measures{margin-top:0;border-top:2px solid var(--ink)}
.design-measures ul{display:grid;gap:.65rem;margin:.2rem 0 0;padding-left:1.1rem}
.design-measures li{font:400 .86rem/1.5 var(--f-body)}
.design-gates{display:grid;grid-template-columns:minmax(11rem,.25fr) minmax(0,1fr);gap:2rem;margin-top:2rem;padding-top:1.2rem;border-top:2px solid var(--ink)}
.design-gates ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem 2rem;margin:0;padding-left:1.4rem}
.design-gates li{padding-left:.35rem;font:500 .88rem/1.45 var(--f-body)}
.design-pager{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-top:1rem;padding-block:2.5rem 4.5rem;border-top:2px solid var(--ink)}
.design-pager a{font:600 .84rem/1.35 var(--f-display);text-decoration:none}
.design-pager a:first-child{text-align:left}.design-pager a:last-child{text-align:right}
.design-pager a:nth-child(2){padding:.5rem .8rem;border:1px solid var(--line);font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase}
.design-pager span{display:block;margin-bottom:.3rem;color:var(--muted);font:600 .62rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}

/* Visual architecture grammar */
.topology-map,.journey-map,.service-constellation,.record-rail,.tradeoff-field,.failure-bowtie,.measurement-field,.release-runway,.operate-compass{margin:0}
.topology-map{position:relative;padding:clamp(2rem,5vw,4.5rem) 1rem 1rem;background:linear-gradient(180deg,color-mix(in srgb,var(--t-sky) 6%,var(--bg)),transparent)}
.topology-map .design-topology{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:0}
.topology-map .design-topology::before{content:"";position:absolute;top:2rem;left:7%;right:7%;height:2px;background:linear-gradient(90deg,var(--t-sky),var(--design-accent),var(--t-gov))}
.topology-map .design-lane{display:grid;grid-template-rows:auto auto;place-items:start center;min-height:10rem;padding:0 .7rem;border:0;background:none;text-align:center}
.topology-map .design-lane>span{position:relative;z-index:2;display:grid;place-items:center;width:4rem;height:4rem;margin:0 auto 1.25rem;border:2px dotted var(--muted);border-radius:50%;background:var(--bg);color:var(--muted);font:650 .7rem/1 var(--f-mono)}
.topology-map .design-lane.active>span{border-style:solid;border-color:var(--design-accent);background:var(--design-accent);color:#fff;box-shadow:0 0 0 .55rem color-mix(in srgb,var(--design-accent) 12%,transparent)}
.topology-map .design-lane strong{font-size:.82rem}.topology-map .design-lane p{font-size:.7rem}
.topology-map .design-lane:not(:last-child)::after{content:none}
.topology-map figcaption,.journey-map figcaption,.service-constellation figcaption,.record-rail figcaption,.tradeoff-field figcaption,.failure-bowtie figcaption,.measurement-field figcaption,.release-runway figcaption,.operate-compass figcaption{color:var(--muted);font:500 .68rem/1.45 var(--f-mono);letter-spacing:.03em}
.control-boundary-line{display:grid;grid-template-columns:auto minmax(5rem,.18fr) minmax(0,1fr);gap:1rem;align-items:center;padding:1rem 0;border-block:1px solid var(--line)}
.control-boundary-line span{color:var(--t-gov);font:650 .66rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.control-boundary-line i{height:1px;background:var(--t-gov)}
.control-boundary-line p{max-width:72ch;margin:0;font:500 .88rem/1.52 var(--f-body)}

.journey-map{position:relative;padding:clamp(1.4rem,4vw,3rem);background:var(--ink);color:var(--bg)}
.journey-map .design-path{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);border:0}
.journey-map .design-path::before{content:"";position:absolute;top:1.45rem;left:4%;right:4%;height:1px;background:linear-gradient(90deg,var(--t-sky),var(--design-accent),var(--t-gov))}
.journey-map .design-path li{position:relative;z-index:1;display:block;padding:0;border:0}
.journey-map .design-path li:nth-child(n+4){margin-top:1.2rem}
.journey-map .design-path span{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1rem;border:1px solid color-mix(in srgb,var(--bg) 45%,transparent);border-radius:50%;background:var(--ink);color:var(--t-sky)}
.journey-map .design-path p{color:color-mix(in srgb,var(--bg) 84%,transparent);font-size:.82rem;line-height:1.55}
.journey-map figcaption{margin-top:2rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);color:color-mix(in srgb,var(--bg) 65%,transparent)}
.decision-triad{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,4rem);margin-top:3rem;padding-top:2.4rem}
.decision-triad::before{content:"";position:absolute;top:0;left:16.5%;right:16.5%;height:1px;background:var(--line)}
.decision-triad article{position:relative;padding:0;text-align:center}
.decision-triad article::before{content:"";position:absolute;top:-2.4rem;left:50%;width:1px;height:1.6rem;background:var(--line)}
.decision-triad article>span{display:grid;place-items:center;width:2.5rem;height:2.5rem;margin:0 auto .75rem;border:1px solid var(--t-sky);border-radius:50%;color:var(--t-sky);font:700 .75rem/1 var(--f-mono)}
.decision-triad h3{margin:0 0 .45rem;font:650 .72rem/1.25 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.decision-triad p{margin:0;color:var(--muted);font:400 .84rem/1.5 var(--f-body)}

.service-constellation{display:grid;grid-template-columns:minmax(220px,.28fr) minmax(0,.72fr);gap:clamp(2rem,6vw,7rem);align-items:center;padding:clamp(1.5rem,4vw,4rem);background:radial-gradient(circle at 18% 50%,color-mix(in srgb,var(--design-accent) 13%,transparent),transparent 32%),linear-gradient(135deg,color-mix(in srgb,var(--t-sky) 4%,var(--bg)),var(--bg))}
.service-core{display:grid;place-items:center;align-content:center;width:min(100%,260px);aspect-ratio:1;margin:auto;border:1px solid var(--design-accent);border-radius:50%;box-shadow:0 0 0 1.1rem color-mix(in srgb,var(--design-accent) 6%,transparent),0 0 0 2.2rem color-mix(in srgb,var(--design-accent) 3%,transparent)}
.service-core span{font:650 .65rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}.service-core b{margin-top:.35rem;text-align:center;font:650 clamp(1.6rem,3vw,2.5rem)/.95 var(--f-display);letter-spacing:-.05em}
.service-constellation>ol{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;margin:0;padding:0;list-style:none}
.service-constellation>ol::before{content:"";position:absolute;top:0;bottom:0;left:-3.5rem;border-left:1px dotted var(--design-accent)}
.service-constellation>ol>li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.9rem;position:relative;padding-top:.8rem;border-top:1px solid var(--line)}
.service-constellation>ol>li::before{content:"";position:absolute;top:-1px;left:-3.5rem;width:3.5rem;border-top:1px dotted var(--design-accent)}
.service-marker{display:grid;place-items:center;width:2.65rem;height:2.65rem;border:1px solid var(--design-accent);border-radius:50%;background:var(--bg);color:var(--design-accent);font:700 .63rem/1 var(--f-mono)}
.service-copy small{display:block;color:var(--muted);font:600 .6rem/1.25 var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.service-copy h3{margin:.2rem 0 .4rem;font:650 .92rem/1.2 var(--f-display)}
.service-copy p{margin:0;color:var(--muted);font:400 .78rem/1.48 var(--f-body)}
.service-fallback{display:flex;gap:.45rem;margin-top:.55rem;color:var(--t-gov);font:500 .67rem/1.4 var(--f-body)}
.service-fallback b{flex:0 0 auto;font:650 .58rem/1.45 var(--f-mono);letter-spacing:.05em;text-transform:uppercase}
.service-constellation figcaption{grid-column:1 / -1;padding-top:1rem;border-top:1px solid var(--line)}

.record-rail{padding:clamp(1rem,3vw,2.5rem) 0}
.record-rail>ol{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:0;padding:0;list-style:none}
.record-rail>ol::before{content:"";position:absolute;top:1.45rem;left:1rem;right:1rem;height:2px;background:linear-gradient(90deg,var(--t-sky),var(--design-accent),var(--t-gov))}
.record-rail li{position:relative;z-index:1;padding:0 1rem}
.record-pin{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:1.2rem;border:2px solid var(--t-sky);border-radius:50%;background:var(--bg);color:var(--t-sky);font:700 .65rem/1 var(--f-mono)}
.record-copy h3{margin:0 0 .5rem;font:650 1rem/1.2 var(--f-display)}
.record-copy code{display:block;min-height:5.5rem;color:var(--t-sky);font:500 .66rem/1.45 var(--f-mono);overflow-wrap:anywhere}
.record-copy p{margin:.75rem 0 0;padding-top:.75rem;border-top:1px dotted var(--line);color:var(--muted);font:400 .76rem/1.48 var(--f-body)}
.record-rail figcaption{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--line)}

.tradeoff-field{padding:clamp(1rem,3vw,2rem) 0}
.tradeoff-field>ol{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.tradeoff-field>ol>li{display:grid;grid-template-columns:minmax(180px,.26fr) minmax(360px,.48fr) minmax(180px,.26fr);gap:clamp(1rem,3vw,3rem);align-items:stretch;padding:1.3rem 0;border-bottom:1px solid var(--line)}
.tradeoff-question{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.75rem;align-items:start}
.tradeoff-question>span{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--ink);border-radius:50%;font:650 .6rem/1 var(--f-mono)}
.tradeoff-question h3{margin:0;font:650 .88rem/1.35 var(--f-display)}
.tradeoff-fork{display:grid;grid-template-columns:1fr 1fr;gap:2rem;position:relative}
.tradeoff-fork::before{content:"";position:absolute;top:.6rem;bottom:.6rem;left:50%;border-left:1px solid var(--line)}
.tradeoff-selected,.tradeoff-rejected{position:relative;padding-top:1.2rem}
.tradeoff-selected::before,.tradeoff-rejected::before{content:"";position:absolute;top:0;left:0;right:0;border-top:3px solid var(--t-control,var(--t-gov))}
.tradeoff-rejected::before{border-top:2px dotted var(--t-gov)}
.tradeoff-fork b,.tradeoff-cost b{display:block;margin-bottom:.35rem;color:var(--t-control,var(--t-gov));font:650 .58rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.tradeoff-rejected b{color:var(--t-gov)}
.tradeoff-fork p,.tradeoff-cost{margin:0;color:var(--muted);font:400 .75rem/1.46 var(--f-body)}
.tradeoff-cost{padding-left:1rem;border-left:3px solid var(--t-emphasis,var(--t-agentic))}
.tradeoff-field figcaption{margin-top:1rem}

.failure-bowtie{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1fr);align-items:center;background:linear-gradient(90deg,color-mix(in srgb,var(--t-gov) 8%,var(--bg)),var(--bg) 50%,color-mix(in srgb,var(--t-control,var(--t-gov)) 8%,var(--bg)))}
.bowtie-wing{display:grid;align-content:center;min-height:290px;padding:clamp(2rem,5vw,4rem)}
.bowtie-threat{clip-path:polygon(0 0,100% 34%,100% 66%,0 100%);background:color-mix(in srgb,var(--t-gov) 15%,var(--bg));padding-right:5rem}
.bowtie-recover{clip-path:polygon(0 34%,100% 0,100% 100%,0 66%);background:color-mix(in srgb,var(--t-control,var(--t-gov)) 12%,var(--bg));padding-left:5rem}
.bowtie-wing>span{margin-bottom:.5rem;color:var(--t-gov);font:700 .66rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.bowtie-recover>span{color:var(--t-control,var(--t-gov))}
.bowtie-wing p{margin:0;font:550 .9rem/1.52 var(--f-body)}
.bowtie-knot{position:relative;z-index:2;display:grid;place-items:center;align-content:center;width:150px;height:150px;border:2px solid var(--t-gov);border-radius:50%;background:var(--bg);box-shadow:0 0 0 .7rem color-mix(in srgb,var(--t-gov) 8%,transparent)}
.bowtie-knot span{text-align:center;color:var(--muted);font:600 .6rem/1.25 var(--f-mono);letter-spacing:.05em;text-transform:uppercase}.bowtie-knot b{margin-top:.45rem;font:650 1.4rem/1 var(--f-display)}
.failure-bowtie figcaption{grid-column:1 / -1;padding:1rem;border-top:1px solid var(--line)}
.recovery-satellites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.5rem;margin:2rem 0 0;padding:0;list-style:none}
.recovery-satellites li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.8rem;padding-top:.8rem;border-top:1px solid var(--line)}
.recovery-satellites>li>span{display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px dotted var(--t-gov);border-radius:50%;color:var(--t-gov);font:700 .58rem/1 var(--f-mono)}
.recovery-satellites b{font:650 .78rem/1.25 var(--f-display)}.recovery-satellites p{margin:.25rem 0 0;color:var(--muted);font:400 .74rem/1.45 var(--f-body)}

.measurement-field{display:grid;grid-template-columns:minmax(330px,.46fr) minmax(0,.54fr);grid-template-rows:auto auto;gap:2rem clamp(2rem,7vw,8rem);align-items:center;padding:clamp(1.5rem,4vw,4rem);background:linear-gradient(135deg,color-mix(in srgb,var(--t-sky) 7%,var(--bg)),color-mix(in srgb,var(--design-accent) 5%,var(--bg)))}
.signal-orbit{position:relative;display:grid;place-items:center;width:min(100%,440px);aspect-ratio:1;margin:auto;border:1px dotted var(--t-sky);border-radius:50%}
.signal-orbit::before{content:"";position:absolute;inset:18%;border:1px solid color-mix(in srgb,var(--t-sky) 55%,transparent);border-radius:50%}
.signal-core{position:relative;z-index:2;display:grid;place-items:center;align-content:center;width:42%;aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--bg)}
.signal-core span{font:650 .58rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}.signal-core b{margin-top:.35rem;text-align:center;font:650 1.35rem/1 var(--f-display)}
.signal-orbit ul{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.signal-orbit li{position:absolute;width:36%;text-align:center;font:650 .68rem/1.35 var(--f-mono)}
.signal-orbit li:nth-child(1){top:4%;left:32%}.signal-orbit li:nth-child(2){top:45%;right:-3%}.signal-orbit li:nth-child(3){bottom:4%;left:32%}.signal-orbit li:nth-child(4){top:45%;left:-3%}
.formula-rail>span,.privacy-lens>span,.runway-label{display:block;margin-bottom:1rem;color:var(--muted);font:650 .65rem/1.25 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.formula-rail ol{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.formula-rail li{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:.8rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.formula-rail li>span{color:var(--t-sky);font:700 .62rem/1.45 var(--f-mono)}
.formula-rail code{font:500 .72rem/1.45 var(--f-mono);overflow-wrap:anywhere}
.privacy-lens{grid-column:2;padding:1.2rem 0;border-block:1px solid var(--design-accent)}
.privacy-lens p{margin:0;font:500 .84rem/1.52 var(--f-body)}
.measurement-field figcaption{grid-column:1 / -1;padding-top:1rem;border-top:1px solid var(--line)}

.release-runway{position:relative;padding:clamp(1.5rem,4vw,3rem);background:var(--ink);color:var(--bg)}
.release-runway .runway-label{color:color-mix(in srgb,var(--bg) 65%,transparent)}
.release-runway ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem;margin:0;padding:2rem 0 0;list-style:none}
.release-runway ol::before{content:"";position:absolute;top:.8rem;left:2%;right:2%;height:2px;background:linear-gradient(90deg,var(--t-sky),var(--design-accent),var(--t-gov))}
.release-runway li{position:relative;padding-right:1rem}
.release-runway li::before{content:"";position:absolute;top:-1.5rem;left:0;width:1rem;height:1rem;border:2px solid var(--t-sky);border-radius:50%;background:var(--ink)}
.release-runway li>span{display:block;margin-bottom:.45rem;color:var(--t-sky);font:700 .62rem/1 var(--f-mono)}
.release-runway li p{margin:0;color:color-mix(in srgb,var(--bg) 82%,transparent);font:500 .78rem/1.45 var(--f-body)}
.release-runway figcaption{margin-top:2rem;padding-top:1rem;border-top:1px solid color-mix(in srgb,var(--bg) 20%,transparent);color:color-mix(in srgb,var(--bg) 65%,transparent)}
.operate-compass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto auto;gap:1.5rem 3rem;align-items:center;margin-top:3rem}
.operate-core{grid-column:2;grid-row:2;display:grid;place-items:center;align-content:center;width:190px;aspect-ratio:1;margin:auto;border:1px solid var(--design-accent);border-radius:50%;background:color-mix(in srgb,var(--design-accent) 8%,var(--bg))}
.operate-core span,.operate-core i{font:650 .62rem/1.2 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;font-style:normal}.operate-core b{margin:.35rem 0;font:650 1.8rem/1 var(--f-display)}
.operate-compass article{position:relative;padding:1rem 0;border-top:1px solid var(--line)}
.operate-compass article>span{display:block;margin-bottom:.35rem;color:var(--design-accent);font:650 .62rem/1.25 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.operate-compass article p{margin:0;color:var(--muted);font:400 .78rem/1.48 var(--f-body)}
.operate-north{grid-column:2;grid-row:1}.operate-east{grid-column:3;grid-row:2}.operate-south{grid-column:2;grid-row:3}.operate-west{grid-column:1;grid-row:2}
.operate-north::after,.operate-south::before{content:"";position:absolute;left:50%;height:1.5rem;border-left:1px dotted var(--design-accent)}
.operate-north::after{bottom:-1.5rem}.operate-south::before{top:-1.5rem}
.operate-east::before,.operate-west::after{content:"";position:absolute;top:50%;width:3rem;border-top:1px dotted var(--design-accent)}
.operate-east::before{left:-3rem}.operate-west::after{right:-3rem}
.operate-compass figcaption{grid-column:1 / -1;grid-row:4;padding-top:1rem;border-top:1px solid var(--line)}

/* Production architecture diagrams */
.enterprise-diagram{margin:0;overflow-x:auto;border:1px solid var(--line);border-top:3px solid var(--ink);background:color-mix(in srgb,var(--t-sky) 2%,var(--bg));overscroll-behavior-inline:contain}
.enterprise-diagram>svg{display:block;width:100%;min-width:1080px;height:auto;background:var(--bg)}
.enterprise-diagram figcaption{position:sticky;left:0;max-width:100%;padding:.9rem 1rem;border-top:1px solid var(--line);background:var(--bg);color:var(--muted);font:500 .68rem/1.5 var(--f-mono);letter-spacing:.02em}
.architecture-svg text,.deployment-svg text,.lineage-svg text,.recovery-svg text,.sequence-svg text{font-family:var(--f-mono);fill:var(--ink)}
.arch-zones rect,.deploy-zone rect,.lineage-source-band rect{fill:color-mix(in srgb,var(--t-sky) 4%,var(--bg));stroke:var(--line);stroke-width:1}
.arch-zones rect:nth-child(3),.deploy-zone rect:nth-child(2){fill:color-mix(in srgb,var(--design-accent) 4%,var(--bg))}
.arch-zones rect:nth-child(5),.deploy-zone rect:last-of-type{fill:color-mix(in srgb,var(--t-gov) 4%,var(--bg))}
.zone-labels text,.deploy-zone text,.lineage-source-band text,.recovery-columns text{font-size:10px;font-weight:700;letter-spacing:.1em;fill:var(--muted)}
.arch-node rect{fill:var(--bg);stroke:var(--muted);stroke-width:1.2}
.arch-node.active-node rect,.arch-node.deploy-node rect,.arch-node.sequence-actor rect{fill:color-mix(in srgb,var(--design-accent) 10%,var(--bg));stroke:var(--design-accent);stroke-width:1.6}
.arch-node.optional-node{opacity:.46}.arch-node.optional-node rect{fill:transparent;stroke:var(--muted)}
.arch-node.source-node rect{fill:color-mix(in srgb,var(--t-sky) 10%,var(--bg));stroke:var(--t-sky);stroke-width:1.35}
.arch-node.channel-node rect{fill:var(--ink);stroke:var(--ink)}
.arch-node.channel-node .node-title,.arch-node.channel-node .node-subtitle{fill:var(--bg)}
.arch-node.rail-node rect{fill:color-mix(in srgb,var(--t-gov) 8%,var(--bg));stroke:var(--t-gov)}
.node-title{font-size:10px;font-weight:700}.node-subtitle{font-size:7px;fill:var(--muted);letter-spacing:.015em}
.flow line,.flow path,.data-flow line,.deploy-flow line,.lineage-chain line,.lineage-chain path,.fault-flow line,.recovery-flow line{stroke:var(--ink);stroke-width:1.2;fill:none}
.data-flow line,.deploy-flow line{stroke:var(--t-sky)}
.proposal-flow line,.proposal-flow path{stroke:var(--design-accent);stroke-width:1.3;stroke-dasharray:6 5;fill:none}
.evidence-flow path,.evidence-link line,.evidence-link path,.lineage-evidence line{stroke:var(--t-gov);stroke-width:1.2;stroke-dasharray:3 4;fill:none;opacity:.82}
.edge-label{font-size:7px;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.arch-legend text,.sequence-legend text{font-size:8px;fill:var(--muted)}
.arch-legend line{stroke:var(--ink);stroke-width:1.4}.arch-legend line.proposal{stroke:var(--design-accent);stroke-dasharray:6 5}.arch-legend line.evidence{stroke:var(--t-gov);stroke-dasharray:3 4}.arch-legend rect{fill:color-mix(in srgb,var(--design-accent) 10%,var(--bg));stroke:var(--design-accent)}
.architecture-annotations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-top:0}
.architecture-annotations p{margin:0;padding:1rem;border-right:1px solid var(--line);font:400 .8rem/1.5 var(--f-body)}
.architecture-annotations p:last-child{border-right:0}.architecture-annotations b{display:block;margin-bottom:.35rem;color:var(--muted);font:650 .6rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}

.sequence-canvas{fill:color-mix(in srgb,var(--ink) 2%,var(--bg));stroke:var(--line)}
.sequence-actor .node-title{font-size:8px}.sequence-actor .node-subtitle{font-size:6px}
.lifeline{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.seq-message line{stroke:var(--ink);stroke-width:1.2}.seq-message text{font-size:7px;fill:var(--muted);paint-order:stroke;stroke:var(--bg);stroke-width:4px}
.seq-message.return line{stroke:var(--t-sky)}.seq-message.proposal line{stroke:var(--design-accent);stroke-dasharray:6 4}.seq-message.evidence line{stroke:var(--t-gov);stroke-dasharray:3 3}
.alt-frame rect{fill:color-mix(in srgb,var(--t-gov) 6%,var(--bg));stroke:var(--t-gov);stroke-dasharray:5 4}.alt-frame path{stroke:var(--t-gov);stroke-width:1}.alt-frame text{font-size:8px;fill:var(--t-gov)}.alt-frame text:first-of-type{font-weight:700;letter-spacing:.05em}
.sequence-legend line{stroke:var(--ink);stroke-width:1.4}.sequence-legend line.proposal{stroke:var(--design-accent);stroke-dasharray:6 4}.sequence-legend line.evidence{stroke:var(--t-gov);stroke-dasharray:3 3}

.deploy-zone text{font-size:9px}.deploy-node .node-title{font-size:8px}.deploy-node .node-subtitle{font-size:6px}
.deployment-svg .edge-label{font-size:6px}

.lineage-record rect{fill:var(--bg);stroke:var(--design-accent);stroke-width:1.4}.lineage-record.optional-record{opacity:.48}.lineage-record.optional-record rect{stroke-dasharray:6 5}
.record-owner{font-size:7px;font-weight:700;letter-spacing:.04em;fill:var(--muted)}.record-title{font-size:12px;font-weight:700}.record-field{font-size:8px;fill:var(--t-sky)}.record-rule{font-size:7px;fill:var(--muted)}
.lineage-rail rect{fill:var(--ink);stroke:var(--ink)}.lineage-rail text{font-size:8px;fill:var(--bg)}.lineage-rail text:first-of-type{font-size:9px;font-weight:700;letter-spacing:.06em}
.state-invariants{display:grid;grid-template-columns:10rem minmax(0,1fr);border:1px solid var(--line);border-top:0}
.state-invariants span,.state-invariants p{margin:0;padding:.9rem 1rem;border-bottom:1px solid var(--line)}.state-invariants span{color:var(--muted);font:650 .6rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}.state-invariants p{border-left:1px solid var(--line);font:400 .8rem/1.5 var(--f-body)}.state-invariants>:nth-last-child(-n+2){border-bottom:0}

.fault-node rect{fill:color-mix(in srgb,var(--t-gov) 8%,var(--bg));stroke:var(--t-gov)}.fault-node .node-title{font-size:9px}.fault-node .node-subtitle{font-size:6px}
.classifier-node rect{fill:var(--ink);stroke:var(--ink)}.classifier-node .node-title,.classifier-node .node-subtitle{fill:var(--bg)}
.recovery-node rect{fill:color-mix(in srgb,var(--t-control,var(--t-gov)) 9%,var(--bg));stroke:var(--t-control,var(--t-gov))}.recovery-node .node-title{font-size:9px}.recovery-node .node-subtitle{font-size:6px}
.fault-flow line{stroke:var(--t-gov)}.recovery-flow line{stroke:var(--t-control,var(--t-gov))}
.degrade-title{font-size:8px;font-weight:700;fill:var(--design-accent)}.degrade-copy{font-size:7px;fill:var(--muted)}.pattern-recovery{font-size:7px;fill:var(--muted)}
.recovery-rail rect{fill:var(--ink);stroke:var(--ink)}.recovery-rail text{fill:var(--bg);font-size:8px}.recovery-rail text:first-of-type{font-weight:700;letter-spacing:.07em}

/* Diagram compositions */
.federated-zones rect,.spine-zones rect,.event-lanes rect,.lifecycle-zones rect{fill:color-mix(in srgb,var(--t-sky) 3%,var(--bg));stroke:var(--line);stroke-width:1}
.federated-zones rect:nth-child(2),.spine-zones rect:nth-child(3),.event-lanes rect:nth-child(3),.lifecycle-zones rect:nth-child(2){fill:color-mix(in srgb,var(--design-accent) 5%,var(--bg))}
.federated-zones rect:last-child,.spine-zones rect:last-child,.event-lanes rect:last-child,.lifecycle-zones rect:last-child{fill:color-mix(in srgb,var(--t-gov) 5%,var(--bg))}
.event-spine rect{fill:var(--ink);stroke:var(--ink)}.event-spine text{fill:var(--bg);font-size:8px}.event-spine text:first-of-type{font-size:10px;font-weight:700;letter-spacing:.08em}
.event-flow line,.lifecycle-flow line{stroke:var(--design-accent);stroke-width:1.5;fill:none}
.runtime-note text{font-size:7px;fill:var(--muted)}
.gate-frame rect{fill:color-mix(in srgb,var(--design-accent) 7%,var(--bg));stroke:var(--design-accent)}.gate-frame text{font-size:8px;fill:var(--ink)}

/* Six visual families: shared navigation, different working character */
body[data-design-family="ledger"] .design-section{border-top-color:color-mix(in srgb,var(--ink) 55%,var(--line))}
body[data-design-family="ledger"] .enterprise-diagram>svg{background-color:var(--bg);background-image:linear-gradient(color-mix(in srgb,var(--t-sky) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--t-sky) 8%,transparent) 1px,transparent 1px);background-size:24px 24px}
body[data-design-family="ledger"] .arch-node rect,body[data-design-family="ledger"] .enterprise-diagram rect{rx:1px}
body[data-design-family="ledger"] .design-thesis{border-block-style:double;border-block-width:4px}

body[data-design-family="network"] .design-hero{background:radial-gradient(circle at 84% 22%,color-mix(in srgb,var(--design-accent) 11%,transparent),transparent 25%)}
body[data-design-family="network"] .arch-node.active-node rect{rx:18px}
body[data-design-family="network"] .enterprise-diagram{border-top-color:var(--design-accent)}
body[data-design-family="network"] .design-section-head>span{display:inline-flex;align-items:center;gap:.5rem}
body[data-design-family="network"] .design-section-head>span::before{content:"";width:.55rem;height:.55rem;border:1px solid currentColor;border-radius:50%}

body[data-design-family="signal"] .design-hero{border-bottom:8px solid color-mix(in srgb,var(--design-accent) 20%,var(--bg))}
body[data-design-family="signal"] .design-section-head{border-left:4px solid var(--design-accent);padding-left:1rem}
body[data-design-family="signal"] .enterprise-diagram{border:0;border-block:3px solid var(--ink)}
body[data-design-family="signal"] .arch-node.active-node rect{stroke-width:2.4}

body[data-design-family="document"] .design-hero h1{max-width:11ch}
body[data-design-family="document"] .design-section{background:linear-gradient(90deg,transparent 0 6%,color-mix(in srgb,var(--t-memory) 4%,transparent) 6% 94%,transparent 94%)}
body[data-design-family="document"] .enterprise-diagram{box-shadow:0 14px 34px color-mix(in srgb,var(--ink) 8%,transparent);border-top-color:var(--t-memory)}
body[data-design-family="document"] .enterprise-diagram figcaption{font-family:var(--f-body);font-size:.78rem}

body[data-design-family="blueprint"] .enterprise-diagram{border-color:var(--t-atlas);border-top-width:5px}
body[data-design-family="blueprint"] .enterprise-diagram>svg{background:linear-gradient(135deg,color-mix(in srgb,var(--t-atlas) 7%,var(--bg)),var(--bg) 62%)}
body[data-design-family="blueprint"] .arch-node.active-node rect{fill:color-mix(in srgb,var(--t-atlas) 12%,var(--bg));stroke:var(--t-atlas)}
body[data-design-family="blueprint"] .design-section:nth-of-type(odd){background:color-mix(in srgb,var(--t-atlas) 3%,var(--bg))}

body[data-design-family="workbench"] .design-section:nth-of-type(even){background:color-mix(in srgb,var(--t-sky) 3%,var(--bg))}
body[data-design-family="workbench"] .enterprise-diagram{border-top-color:var(--t-sky)}
body[data-design-family="workbench"] .architecture-annotations,body[data-design-family="workbench"] .state-invariants{border-left:4px solid var(--t-sky)}

/* Four page rhythms prevent the collection from reading as one repeated template. */
@media(min-width:901px){
  body[data-layout-variant="sidecar"] .design-section{display:grid;grid-template-columns:minmax(220px,.27fr) minmax(0,.73fr);column-gap:clamp(2rem,5vw,6rem);align-items:start}
  body[data-layout-variant="sidecar"] .design-section>.design-section-head{display:block;grid-column:1;position:sticky;top:5.5rem;margin:0}
  body[data-layout-variant="sidecar"] .design-section>.design-section-head>span{display:block;margin-bottom:.65rem}
  body[data-layout-variant="sidecar"] .design-section>.design-section-head h2{font-size:clamp(2rem,3.2vw,3.4rem)}
  body[data-layout-variant="sidecar"] .design-section>.design-section-head p{margin-top:1rem}
  body[data-layout-variant="sidecar"] .design-section>figure,body[data-layout-variant="sidecar"] .design-section>.architecture-annotations,body[data-layout-variant="sidecar"] .design-section>.control-boundary-line,body[data-layout-variant="sidecar"] .design-section>.decision-triad,body[data-layout-variant="sidecar"] .design-section>.state-invariants{grid-column:2}
  body[data-layout-variant="alternating"] .design-section:nth-of-type(even)>.design-section-head{grid-template-columns:minmax(18rem,.4fr) minmax(16rem,.42fr) minmax(8.5rem,.18fr)}
  body[data-layout-variant="alternating"] .design-section:nth-of-type(even)>.design-section-head>span{grid-column:3;grid-row:1;text-align:right}
  body[data-layout-variant="alternating"] .design-section:nth-of-type(even)>.design-section-head>h2{grid-column:1;grid-row:1}
  body[data-layout-variant="alternating"] .design-section:nth-of-type(even)>.design-section-head>p{grid-column:2;grid-row:1}
  body[data-layout-variant="wide"] .design-section>.enterprise-diagram{width:min(94vw,1540px);margin-left:50%;transform:translateX(-50%)}
  body[data-layout-variant="wide"] .design-section:nth-of-type(3n)>.design-section-head{grid-template-columns:minmax(8rem,.14fr) minmax(20rem,.58fr) minmax(15rem,.28fr)}
}

@media(max-width:900px){
  .portfolio-heading{grid-template-columns:minmax(11rem,.4fr) minmax(0,.6fr)}
  .portfolio-heading>span:last-child{grid-column:1 / -1}
  .portfolio-platform{grid-template-columns:1fr}
  .design-section-head{grid-template-columns:8rem minmax(0,1fr)}
  .design-section-head>p{grid-column:2}
  .design-topology{grid-template-columns:repeat(3,minmax(0,1fr))}
  .design-rule-grid,.design-measures{grid-template-columns:1fr}
  .authority-map{grid-template-columns:1fr}
  .authority-orbits{max-width:430px;width:100%;margin:auto}
  .topology-map .design-topology{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 0}
  .topology-map .design-topology::before{display:none}
  .journey-map .design-path{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-map .design-path::before{display:none}
  .service-constellation{grid-template-columns:1fr}
  .service-core{max-width:220px}
  .service-constellation>ol::before,.service-constellation>ol>li::before{display:none}
  .record-rail>ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 0}
  .record-rail>ol::before{display:none}
  .tradeoff-field>ol>li{grid-template-columns:1fr}
  .measurement-field{grid-template-columns:1fr}
  .privacy-lens{grid-column:auto}
  .architecture-annotations{grid-template-columns:1fr}.architecture-annotations p{border-right:0;border-bottom:1px solid var(--line)}.architecture-annotations p:last-child{border-bottom:0}
}
@media(max-width:680px){
  .portfolio-tools{position:static}
  .portfolio-search{grid-template-columns:1fr}
  .portfolio-case summary{grid-template-columns:minmax(0,1fr) 1.4rem;gap:.7rem}
  .portfolio-heading{grid-template-columns:1fr;gap:.35rem}
  .portfolio-heading>span:last-child{grid-column:auto}
  .portfolio-detail{grid-template-columns:1fr;margin-left:0}
  .portfolio-solution{grid-column:auto}
  .portfolio-design-link{grid-column:auto;grid-template-columns:1fr auto}
  .portfolio-design-link span{grid-column:1 / -1}
  .portfolio-platform ol,.portfolio-deep-grid{grid-template-columns:1fr}
  .portfolio-deep-grid .wcard{border-right:0}
  .design-hero-meta span:not(:last-child){padding-right:0;border-right:0}
  .design-thesis,.design-callout,.design-gates{grid-template-columns:1fr;gap:.6rem}
  .design-section-head{grid-template-columns:1fr;gap:.5rem}
  .design-section-head>p{grid-column:auto}
  .design-boundary-grid,.design-operate-grid,.design-failure{grid-template-columns:1fr}
  .authority-map{padding:1rem}
  .authority-orbits{min-height:270px}
  .design-topology{grid-template-columns:1fr}
  .design-lane{min-height:0}
  .design-lane>span{margin-bottom:1.5rem}
  .design-lane:not(:last-child)::after{content:"↓";top:auto;right:1rem;bottom:-.45rem}
  .design-gates ol{grid-template-columns:1fr}
  .design-pager{grid-template-columns:1fr 1fr}
  .design-pager a:nth-child(2){grid-column:1 / -1;grid-row:1;text-align:center}
  .control-boundary-line{grid-template-columns:1fr}.control-boundary-line i{display:none}
  .journey-map .design-path,.decision-triad,.service-constellation>ol,.record-rail>ol,.recovery-satellites{grid-template-columns:1fr}
  .decision-triad{padding-top:0}.decision-triad::before,.decision-triad article::before{display:none}
  .decision-triad article{text-align:left}.decision-triad article>span{margin-left:0}
  .record-rail li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:1rem}.record-pin{margin:0}.record-copy code{min-height:0}
  .tradeoff-fork{grid-template-columns:1fr;gap:1rem}.tradeoff-fork::before{display:none}
  .failure-bowtie{grid-template-columns:1fr;padding:1rem}
  .bowtie-wing{min-height:0;padding:1.5rem;clip-path:none}
  .bowtie-knot{width:120px;height:120px;margin:-.4rem auto}
  .failure-bowtie figcaption{grid-column:auto}
  .signal-orbit{max-width:330px}.measurement-field{padding:1rem}
  .release-runway ol{grid-template-columns:1fr;gap:1.5rem;padding:0 0 0 2rem}.release-runway ol::before{top:0;bottom:0;left:.45rem;right:auto;width:2px;height:auto}.release-runway li::before{top:.2rem;left:-2rem}
  .operate-compass{grid-template-columns:1fr;grid-template-rows:auto}
  .operate-core,.operate-north,.operate-east,.operate-south,.operate-west{grid-column:1;grid-row:auto}
  .operate-core{grid-row:1}.operate-compass article::before,.operate-compass article::after{display:none}
  .enterprise-diagram>svg{min-width:1020px}.enterprise-diagram figcaption{width:calc(100vw - 2rem);box-sizing:border-box}
  .state-invariants{grid-template-columns:1fr}.state-invariants p{border-left:0}.state-invariants>:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.state-invariants>:last-child{border-bottom:0}
}

/* Scientific-paper figure system: applied to every figure in the architecture portfolio. */
body[data-page-kind="system-design"]{
  --fig-indigo:#5B5CF6;
  --fig-teal:#00A884;
  --fig-coral:#F97362;
  --fig-lavender:#8B5CF6;
  --fig-sky:#0891B2;
  --fig-saffron:#F59E0B;
  --fig-ink:#111426;
  --fig-soft:#52576d;
  --fig-paper:#fff;
  --fig-wash:#f6f7fc;
}
body[data-page-kind="system-design"] .scientific-figure{
  position:relative;
  margin:0;
  border:1px solid color-mix(in srgb,var(--fig-ink) 28%,transparent)!important;
  border-top:3px solid var(--fig-coral)!important;
  border-radius:0!important;
  background:var(--fig-paper)!important;
  box-shadow:0 10px 30px color-mix(in srgb,var(--fig-ink) 7%,transparent)!important;
}
body[data-page-kind="system-design"] .enterprise-diagram.scientific-figure{
  border-top:1px solid color-mix(in srgb,var(--fig-ink) 28%,transparent)!important;
}
body[data-page-kind="system-design"] .scientific-figure:not(.enterprise-diagram)::before{
  content:attr(data-figure) "  ·  " attr(data-figure-title);
  display:block;
  grid-column:1 / -1;
  padding:0 0 .85rem;
  border-bottom:1px solid color-mix(in srgb,var(--fig-ink) 18%,transparent);
  color:var(--fig-ink);
  font:700 .72rem/1.35 var(--f-display);
  letter-spacing:.01em;
  text-align:left;
}
body[data-page-kind="system-design"] .scientific-figure figcaption{
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:1rem 1.15rem;
  border-top:1px solid color-mix(in srgb,var(--fig-ink) 20%,transparent);
  background:var(--fig-paper);
  color:var(--fig-soft);
  font:400 .76rem/1.55 var(--f-body);
  letter-spacing:0;
  text-align:left;
}
body[data-page-kind="system-design"] .scientific-figure figcaption b{
  color:var(--fig-ink);
  font-weight:700;
}

/* SVG title band and evidence labels */
.scientific-svg{background:var(--fig-paper)!important}
.scientific-svg .science-top-rule{stroke:var(--fig-coral);stroke-width:4}
.scientific-svg .science-divider{stroke:color-mix(in srgb,var(--fig-ink) 20%,transparent);stroke-width:1}
.scientific-svg .science-panel{fill:var(--fig-ink);font:800 13px/1 var(--f-display)}
.scientific-svg .science-title{fill:var(--fig-ink);font:700 13px/1 var(--f-display);letter-spacing:.01em}
.scientific-svg .science-status{fill:var(--fig-soft);font:500 8px/1 var(--f-mono);letter-spacing:.025em}
.scientific-svg .science-figure-body text{font-family:var(--f-display)}
.scientific-svg .zone-labels text,
.scientific-svg .deploy-zone>text,
.scientific-svg .lineage-source-band>text,
.scientific-svg .recovery-columns>text{
  fill:var(--fig-soft);
  font-family:var(--f-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.075em;
}
.scientific-svg .arch-zones rect,
.scientific-svg .federated-zones rect,
.scientific-svg .spine-zones rect,
.scientific-svg .event-lanes rect,
.scientific-svg .lifecycle-zones rect,
.scientific-svg .deploy-zone rect,
.scientific-svg .lineage-source-band rect{
  rx:1px;
  fill:var(--fig-wash);
  stroke:color-mix(in srgb,var(--fig-ink) 18%,transparent);
}
.scientific-svg .arch-zones rect:nth-child(3),
.scientific-svg .federated-zones rect:nth-child(2),
.scientific-svg .spine-zones rect:nth-child(3),
.scientific-svg .event-lanes rect:nth-child(3),
.scientific-svg .lifecycle-zones rect:nth-child(2),
.scientific-svg .deploy-zone rect:nth-of-type(2){fill:color-mix(in srgb,var(--fig-indigo) 4%,var(--fig-paper))}
.scientific-svg .arch-zones rect:last-child,
.scientific-svg .federated-zones rect:last-child,
.scientific-svg .spine-zones rect:last-child,
.scientific-svg .event-lanes rect:last-child,
.scientific-svg .lifecycle-zones rect:last-child,
.scientific-svg .deploy-zone rect:last-of-type{fill:color-mix(in srgb,var(--fig-lavender) 4%,var(--fig-paper))}
.scientific-svg .arch-node rect{rx:1px;fill:var(--fig-paper);stroke:var(--fig-soft);stroke-width:1}
.scientific-svg .arch-node.active-node rect,
.scientific-svg .arch-node.deploy-node rect,
.scientific-svg .arch-node.sequence-actor rect{
  fill:color-mix(in srgb,var(--fig-indigo) 4%,var(--fig-paper));
  stroke:var(--fig-indigo);
  stroke-width:1.25;
}
.scientific-svg .arch-node.source-node rect{fill:color-mix(in srgb,var(--fig-sky) 5%,var(--fig-paper));stroke:var(--fig-sky)}
.scientific-svg .arch-node.channel-node rect{fill:color-mix(in srgb,var(--fig-sky) 5%,var(--fig-paper));stroke:var(--fig-sky)}
.scientific-svg .arch-node.channel-node .node-title{fill:var(--fig-ink)}
.scientific-svg .arch-node.channel-node .node-subtitle{fill:var(--fig-soft)}
.scientific-svg .arch-node.rail-node rect{fill:color-mix(in srgb,var(--fig-lavender) 4%,var(--fig-paper));stroke:var(--fig-lavender)}
.scientific-svg .arch-node.classifier-node rect{fill:color-mix(in srgb,var(--fig-coral) 6%,var(--fig-paper));stroke:var(--fig-coral);stroke-width:1.4}
.scientific-svg .classifier-node .node-title{fill:var(--fig-ink)}
.scientific-svg .classifier-node .node-subtitle{fill:var(--fig-soft)}
.scientific-svg .arch-node.optional-node{opacity:.58}
.scientific-svg .node-title{fill:var(--fig-ink);font-size:9px;font-weight:700}
.scientific-svg .node-subtitle{fill:var(--fig-soft);font-family:var(--f-mono);font-size:6.5px}
.scientific-svg .event-spine rect,
.scientific-svg .lineage-rail rect,
.scientific-svg .recovery-rail rect{
  rx:1px;
  fill:color-mix(in srgb,var(--fig-indigo) 7%,var(--fig-paper));
  stroke:var(--fig-indigo);
}
.scientific-svg .event-spine text,
.scientific-svg .lineage-rail text,
.scientific-svg .recovery-rail text{fill:var(--fig-ink)}
.scientific-svg .flow line,.scientific-svg .flow path,
.scientific-svg .lineage-chain line,.scientific-svg .lineage-chain path{stroke:var(--fig-ink);stroke-width:1.15}
.scientific-svg .data-flow line,.scientific-svg .deploy-flow line{stroke:var(--fig-sky)}
.scientific-svg .proposal-flow line,.scientific-svg .proposal-flow path{stroke:var(--fig-indigo);stroke-dasharray:6 5}
.scientific-svg .evidence-link line,.scientific-svg .evidence-link path,
.scientific-svg .lineage-evidence line{stroke:var(--fig-lavender);stroke-dasharray:3 4}
.scientific-svg .fault-flow line{stroke:var(--fig-coral)}
.scientific-svg .recovery-flow line{stroke:var(--fig-teal)}
.scientific-svg marker[id*="proposal"] path{fill:var(--fig-indigo)}
.scientific-svg marker[id*="evidence"] path{fill:var(--fig-lavender)}
.scientific-svg marker[id*="recovery"] path{fill:var(--fig-teal)}
.scientific-svg .edge-label,
.scientific-svg .seq-message text{fill:var(--fig-soft);stroke:var(--fig-paper);stroke-width:4px}
.scientific-svg .sequence-canvas{rx:1px;fill:var(--fig-paper);stroke:color-mix(in srgb,var(--fig-ink) 18%,transparent)}
.scientific-svg .lifeline{stroke:color-mix(in srgb,var(--fig-ink) 24%,transparent)}
.scientific-svg .seq-message.return line{stroke:var(--fig-sky)}
.scientific-svg .seq-message.proposal line{stroke:var(--fig-indigo)}
.scientific-svg .seq-message.evidence line{stroke:var(--fig-lavender)}
.scientific-svg .alt-frame rect{rx:1px;fill:color-mix(in srgb,var(--fig-coral) 5%,var(--fig-paper));stroke:var(--fig-coral)}
.scientific-svg .alt-frame path{stroke:var(--fig-coral)}
.scientific-svg .alt-frame text{fill:var(--fig-coral)}
.scientific-svg .lineage-record rect{rx:1px;fill:var(--fig-paper);stroke:var(--fig-indigo);stroke-width:1.2}
.scientific-svg .record-owner{fill:var(--fig-soft);font-family:var(--f-mono)}
.scientific-svg .record-field{fill:var(--fig-sky);font-family:var(--f-mono)}
.scientific-svg .record-rule{fill:var(--fig-soft);font-family:var(--f-mono)}
.scientific-svg .fault-node rect{fill:color-mix(in srgb,var(--fig-coral) 5%,var(--fig-paper));stroke:var(--fig-coral)}
.scientific-svg .recovery-node rect{fill:color-mix(in srgb,var(--fig-teal) 5%,var(--fig-paper));stroke:var(--fig-teal)}
.scientific-svg .degrade-title{fill:var(--fig-indigo)}
.scientific-svg .degrade-copy,.scientific-svg .pattern-recovery{fill:var(--fig-soft);font-family:var(--f-mono)}
.scientific-svg .gate-frame rect{rx:1px;fill:color-mix(in srgb,var(--fig-saffron) 6%,var(--fig-paper));stroke:var(--fig-saffron)}

/* HTML figures become research instruments rather than infographic cards. */
body[data-page-kind="system-design"] .service-constellation{
  grid-template-columns:minmax(170px,.2fr) minmax(0,.8fr);
  gap:2rem 3rem;
  align-items:start;
  padding:1.35rem;
  background:var(--fig-paper)!important;
}
body[data-page-kind="system-design"] .service-core{
  width:100%;
  aspect-ratio:auto;
  margin:0;
  padding:1rem;
  place-items:start;
  border:0;
  border-left:4px solid var(--fig-indigo);
  border-radius:0;
  box-shadow:none;
  background:color-mix(in srgb,var(--fig-indigo) 5%,var(--fig-paper));
}
body[data-page-kind="system-design"] .service-core b{text-align:left;font-size:1.35rem;line-height:1.05}
body[data-page-kind="system-design"] .service-constellation>ol{gap:0;border-top:1px solid var(--fig-ink)}
body[data-page-kind="system-design"] .service-constellation>ol::before,
body[data-page-kind="system-design"] .service-constellation>ol>li::before{display:none}
body[data-page-kind="system-design"] .service-constellation>ol>li{grid-template-columns:2.25rem minmax(0,1fr);gap:.75rem;padding:.9rem .7rem;border-top:0;border-bottom:1px solid var(--line)}
body[data-page-kind="system-design"] .service-marker{width:1.8rem;height:1.8rem;border-radius:0;background:color-mix(in srgb,var(--fig-indigo) 5%,var(--fig-paper));color:var(--fig-indigo)}
body[data-page-kind="system-design"] .service-fallback{padding-top:.45rem;border-top:1px dotted var(--fig-coral);color:var(--fig-coral)}

body[data-page-kind="system-design"] .tradeoff-field{padding:1.35rem}
body[data-page-kind="system-design"] .tradeoff-field>ol{border-top:1px solid var(--fig-ink)}
body[data-page-kind="system-design"] .tradeoff-question>span{border-radius:0;border-color:var(--fig-soft)}
body[data-page-kind="system-design"] .tradeoff-selected::before{border-top-color:var(--fig-teal)}
body[data-page-kind="system-design"] .tradeoff-rejected::before{border-top-color:var(--fig-coral)}
body[data-page-kind="system-design"] .tradeoff-fork b{color:var(--fig-teal)}
body[data-page-kind="system-design"] .tradeoff-rejected b{color:var(--fig-coral)}
body[data-page-kind="system-design"] .tradeoff-cost{border-left-color:var(--fig-saffron)}

body[data-page-kind="system-design"] .measurement-field{
  grid-template-columns:minmax(300px,.42fr) minmax(0,.58fr);
  gap:2rem 4rem;
  align-items:start;
  padding:1.35rem;
  background:var(--fig-paper)!important;
}
body[data-page-kind="system-design"] .signal-orbit{
  display:block;
  width:100%;
  aspect-ratio:auto;
  margin:0;
  padding:0 0 .8rem 1rem;
  border:0;
  border-left:1px solid var(--fig-ink);
  border-bottom:1px solid var(--fig-ink);
  border-radius:0;
}
body[data-page-kind="system-design"] .signal-orbit::before{display:none}
body[data-page-kind="system-design"] .signal-orbit::after{
  content:"measurement and operational exposure  →";
  display:block;
  margin-top:.8rem;
  color:var(--fig-soft);
  font:500 .58rem/1.2 var(--f-mono);
}
body[data-page-kind="system-design"] .signal-core{
  display:block;
  width:auto;
  aspect-ratio:auto;
  padding:.65rem .75rem;
  border-radius:0;
  background:color-mix(in srgb,var(--fig-sky) 6%,var(--fig-paper));
  color:var(--fig-ink);
}
body[data-page-kind="system-design"] .signal-core b{display:block;margin-top:.2rem;text-align:left;font-size:1rem}
body[data-page-kind="system-design"] .signal-orbit ul{position:static;display:grid;gap:0;margin:.7rem 0 0;padding:0}
body[data-page-kind="system-design"] .signal-orbit li{
  position:relative!important;
  inset:auto!important;
  width:auto;
  padding:.55rem .5rem .55rem 1.25rem;
  border-top:1px solid var(--line);
  text-align:left;
  font:600 .7rem/1.35 var(--f-display);
}
body[data-page-kind="system-design"] .signal-orbit li::before{content:"";position:absolute;left:.25rem;top:.85rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--fig-sky)}
body[data-page-kind="system-design"] .formula-rail ol{border-top:1px solid var(--fig-ink)}
body[data-page-kind="system-design"] .privacy-lens{border-block-color:var(--fig-lavender)}

body[data-page-kind="system-design"] .release-runway{
  padding:1.35rem;
  background:var(--fig-paper)!important;
  color:var(--fig-ink);
}
body[data-page-kind="system-design"] .release-runway .runway-label{color:var(--fig-soft)}
body[data-page-kind="system-design"] .release-runway ol::before{height:1px;background:var(--fig-indigo)}
body[data-page-kind="system-design"] .release-runway li::before{width:.7rem;height:.7rem;border:1.5px solid var(--fig-indigo);border-radius:0;background:var(--fig-paper)}
body[data-page-kind="system-design"] .release-runway li>span{color:var(--fig-indigo)}
body[data-page-kind="system-design"] .release-runway li p{color:var(--fig-soft)}

body[data-page-kind="system-design"] .operate-compass{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto;
  gap:0;
  align-items:stretch;
  margin-top:2rem;
  padding:1.35rem;
}
body[data-page-kind="system-design"] .operate-core{
  grid-column:1 / -1;
  grid-row:auto;
  width:auto;
  aspect-ratio:auto;
  margin:0;
  padding:.8rem 1rem;
  place-items:start;
  border:0;
  border-left:4px solid var(--fig-indigo);
  border-radius:0;
  background:color-mix(in srgb,var(--fig-indigo) 5%,var(--fig-paper));
}
body[data-page-kind="system-design"] .operate-core b{margin:.25rem 0 0;font-size:1.25rem}
body[data-page-kind="system-design"] .operate-north,
body[data-page-kind="system-design"] .operate-east,
body[data-page-kind="system-design"] .operate-south,
body[data-page-kind="system-design"] .operate-west{grid-column:auto;grid-row:auto}
body[data-page-kind="system-design"] .operate-compass article{padding:1rem;border:1px solid var(--line);border-top:0}
body[data-page-kind="system-design"] .operate-compass article:nth-of-type(odd){border-right:0}
body[data-page-kind="system-design"] .operate-compass article::before,
body[data-page-kind="system-design"] .operate-compass article::after{display:none}
body[data-page-kind="system-design"] .operate-compass article>span{color:var(--fig-indigo)}
body[data-page-kind="system-design"] .operate-compass figcaption{grid-column:1 / -1;grid-row:auto}

/* Family variation remains in page rhythm, never in figure legibility. */
body[data-page-kind="system-design"][data-design-family] .scientific-figure:not(.enterprise-diagram){border-top-color:var(--fig-coral)!important}
body[data-page-kind="system-design"][data-design-family] .enterprise-diagram>svg{background:var(--fig-paper)!important;background-image:none!important}
body[data-page-kind="system-design"][data-design-family] .arch-node rect{rx:1px}

@media(max-width:900px){
  body[data-page-kind="system-design"] .service-constellation,
  body[data-page-kind="system-design"] .measurement-field{grid-template-columns:1fr}
  body[data-page-kind="system-design"] .privacy-lens{grid-column:auto}
}
@media(max-width:680px){
  body[data-page-kind="system-design"] .scientific-figure:not(.enterprise-diagram)::before{font-size:.68rem}
  body[data-page-kind="system-design"] .service-constellation,
  body[data-page-kind="system-design"] .tradeoff-field,
  body[data-page-kind="system-design"] .measurement-field,
  body[data-page-kind="system-design"] .release-runway,
  body[data-page-kind="system-design"] .operate-compass{padding:1rem}
  body[data-page-kind="system-design"] .service-constellation>ol{grid-template-columns:1fr}
  body[data-page-kind="system-design"] .operate-compass{grid-template-columns:1fr}
  body[data-page-kind="system-design"] .operate-compass article:nth-of-type(odd){border-right:1px solid var(--line)}
  body[data-page-kind="system-design"] .tradeoff-field>ol>li{grid-template-columns:1fr}
}