:where(.sdes-page) { color:var(--color-text); background:var(--color-background); font-family:var(--font-family-body) }
:where(.sdes-page) .container { width:calc(100% - var(--page-gutter)*2); max-width:var(--size-1320); margin-inline:auto }
:where(.sdes-page) .sdes-system-section { padding:var(--size-96) 0; scroll-margin-top:var(--anchor-offset) }
:where(.sdes-page) h1 { font-family:var(--font-family-display); font-weight:var(--font-weight-display); color:var(--color-heading); letter-spacing:var(--letter-spacing-display); line-height:var(--line-height-display) }
:where(.sdes-page) h2 { font-family:var(--font-family-display); font-weight:var(--font-weight-display); color:var(--color-heading); letter-spacing:var(--letter-spacing-display); line-height:var(--line-height-display) }
:where(.sdes-page) h1 { font-size:clamp(var(--size-44),4.5vw,var(--size-68)); max-width:var(--size-660); margin:var(--size-25) 0 }
:where(.sdes-page) h1 em { color:var(--color-accent); font-weight:var(--font-weight-regular) }
:where(.sdes-page) h2 { font-size:var(--font-size-section); max-width:var(--size-860); margin:var(--size-14) 0 var(--size-28) }
:where(.sdes-page) h3 { font-family:var(--font-family-body); font-weight:var(--font-weight-bold); line-height:var(--line-height-art-1-4); letter-spacing:var(--letter-spacing-heading); color:var(--color-heading); margin:0 0 var(--size-12) }
:where(.sdes-page) h4 { font-family:var(--font-family-body); font-weight:var(--font-weight-bold); line-height:var(--line-height-art-1-4); letter-spacing:var(--letter-spacing-heading); color:var(--color-heading); margin:0 0 var(--size-12) }
:where(.sdes-page) h3 { font-size:var(--size-19) }
:where(.sdes-page) h4 { font-size:var(--size-17) }
:where(.sdes-page) p { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 0 var(--size-18) }
:where(.sdes-page) p:last-child { margin-bottom:0 }
:where(.sdes-page) .eyebrow { font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-5) var(--font-family-mono); letter-spacing:var(--letter-spacing-12em); text-transform:uppercase; color:var(--color-heading); margin:0 0 var(--size-18) }
:where(.sdes-page) .sdes-eyebrow__sep { margin-inline:var(--size-2) }
:where(.sdes-page) .lead { max-width:var(--size-920); font-size:var(--size-16); line-height:var(--line-height-relaxed) }
:where(.sdes-page) .section-head { margin-bottom:var(--size-42); max-width:100% }
:where(.sdes-page) .sdes-section-head__main { max-width:var(--size-860) }
:where(.sdes-page) .sdes-section-head--wide { display:block }
:where(.sdes-page) .action-group { gap:var(--size-24); margin:var(--size-28) 0 0 }
:where(.sdes-page) [hidden] { display:none!important }
:where(.sdes-page) .card { padding:var(--size-28); min-width:0; display:flex; flex-direction:column }
:where(.sdes-page) .card__title { font-size:var(--size-19); font-weight:var(--font-weight-bold); line-height:var(--line-height-art-1-4); margin:0 0 var(--size-12) }
:where(.sdes-page) p.card__description { display:block; flex:none; padding:0; margin:0; font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sdes-page) .card-grid { gap:var(--size-24); align-items:stretch }
:where(.sdes-page) .sdes-card-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
:where(.sdes-page) .sdes-card-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sdes-page) .sdes-card-grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)) }
:where(.sdes-page) .sdes-system-icon { display:inline-grid; place-items:center; align-items:center; justify-content:center; flex:0 0 var(--size-44); width:var(--size-44); height:var(--size-44); padding:0; margin:0 0 var(--size-20); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); background:var(--color-surface-secondary); color:var(--color-heading); line-height:var(--line-height-art-1) }
:where(.sdes-page) .sdes-system-icon svg { display:block; position:static; align-self:center; justify-self:center; width:var(--size-24); height:var(--size-24); max-width:var(--size-24); max-height:var(--size-24); margin:0; fill:none; stroke:currentColor; stroke-width:1.5; flex:none }
:where(.sdes-page) .hero-section { padding:var(--size-65) 0 }
:where(.sdes-page) .hero-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:7%; align-items:center }
:where(.sdes-page) .hero-content { min-width:0 }
:where(.sdes-page) .hero-lead { font-size:var(--size-17); line-height:var(--line-height-relaxed); max-width:var(--size-650); margin:0 }
/* Hierarchical source map with bounded nodes instead of a large orbit. */
:where(.sdes-page) .sdes-system-map { margin:0; width:100%; max-width:var(--size-445); justify-self:center; padding:var(--size-28); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-18); box-shadow:var(--size-8) var(--size-8) 0 var(--color-surface-accent) }
:where(.sdes-page) .sdes-system-map>figcaption { display:flex; justify-content:space-between; gap:var(--size-15); font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-04em); color:var(--color-heading); margin-bottom:var(--size-24) }
:where(.sdes-page) .sdes-map-token { display:flex; align-items:center; justify-content:center; gap:var(--size-16); padding:var(--size-22) var(--size-18); background:var(--color-primary); color:var(--color-white); border-radius:var(--size-10) }
:where(.sdes-page) .sdes-map-token .sdes-system-icon { margin:0; background:var(--color-illustration-194e3e); border-color:var(--color-illustration-72998b); color:var(--color-highlight) }
:where(.sdes-page) .sdes-map-token strong { display:block; font:var(--font-weight-regular) var(--size-26)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em) }
:where(.sdes-page) .sdes-map-token small { display:block; font-size:var(--size-10); line-height:var(--line-height-1-6); color:var(--color-illustration-d9eade); margin-top:var(--size-7) }
:where(.sdes-page) .sdes-map-branch { display:flex; justify-content:space-around; height:var(--size-25) }
:where(.sdes-page) .sdes-map-branch i { width:var(--size-1); background:var(--color-illustration-739582) }
:where(.sdes-page) .sdes-map-libraries { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-15) }
:where(.sdes-page) .sdes-map-libraries>div { display:flex; flex-direction:column; align-items:center; padding:var(--size-17) var(--size-10); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); text-align:center; min-width:0 }
:where(.sdes-page) .sdes-map-libraries svg { width:var(--size-24); height:var(--size-24); color:var(--color-heading); margin-bottom:var(--size-12) }
:where(.sdes-page) .sdes-map-libraries strong { font-size:var(--size-13); line-height:var(--line-height-art-1-4); font-weight:var(--font-weight-bold); color:var(--color-heading) }
:where(.sdes-page) .sdes-map-libraries small { font-size:var(--size-10); line-height:var(--line-height-1-6); color:var(--color-text-muted); margin-top:var(--size-7) }
:where(.sdes-page) .sdes-map-shared { padding:var(--size-15) 0; text-align:center; font-size:var(--size-11); color:var(--color-text-muted); position:relative }
:where(.sdes-page) .sdes-map-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-15) }
:where(.sdes-page) .sdes-map-products>div { background:var(--color-surface-accent); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); padding:var(--size-12) var(--size-8); font-size:var(--size-13); font-weight:var(--font-weight-medium); text-align:center; line-height:var(--line-height-art-1-4); color:var(--color-heading) }
:where(.sdes-page) .sdes-map-products small { display:block; font-size:var(--size-10); color:var(--color-text-muted); font-weight:var(--font-weight-regular); margin-top:var(--size-6) }
:where(.sdes-page) .sdes-map-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--size-7); margin-top:var(--size-24); font:var(--size-9)/var(--line-height-1-5) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdes-page) .section-nav .container { overflow-x:auto; scrollbar-width:none }
:where(.sdes-page) .section-nav-label { color:var(--color-heading); font-size:var(--size-12) }
:where(.sdes-page) .section-nav-links { gap:var(--size-28) }
/* A token change is visible in three simulated surfaces. Page branding stays fixed. */
:where(.sdes-page) .sdes-token-lab { --example-primary:var(--color-primary); background:var(--color-primary); color:var(--color-white); border-radius:var(--size-18); padding:var(--size-32); margin-top:var(--size-40) }
:where(.sdes-page) .sdes-lab-header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--size-28); margin-bottom:var(--size-25) }
:where(.sdes-page) .sdes-lab-kicker { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-1em); color:var(--color-highlight) }
:where(.sdes-page) .sdes-lab-header h3 { font:var(--font-weight-regular) var(--size-30)/var(--line-height-1-2) var(--font-family-display); color:var(--color-white); margin:var(--size-14) 0 var(--size-16); letter-spacing:var(--letter-spacing-negative-025em) }
:where(.sdes-page) .sdes-lab-header p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-illustration-e0eee5); max-width:var(--size-740); margin:0 }
:where(.sdes-page) .sdes-lab-play { background:transparent; border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-6); padding:var(--size-10) var(--size-14); font-size:var(--size-12); line-height:var(--line-height-label); color:var(--color-white); white-space:nowrap }
:where(.sdes-page) .sdes-lab-controls { display:flex; flex-wrap:wrap; align-items:center; gap:var(--size-10); margin-bottom:var(--size-25) }
:where(.sdes-page) .sdes-lab-controls>span { font:var(--size-11)/var(--line-height-1-6) var(--font-family-mono); color:var(--color-illustration-d9eade); margin-right:var(--size-7) }
:where(.sdes-page) .sdes-color-choice { display:inline-flex; align-items:center; gap:var(--size-8); min-height:var(--size-40); border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-6); background:var(--color-illustration-194e3e); padding:var(--size-9) var(--size-13); font-size:var(--size-12); font-weight:var(--font-weight-medium); color:var(--color-white) }
:where(.sdes-page) .sdes-color-choice[aria-pressed="true"] { background:var(--color-highlight); border-color:var(--color-highlight); color:var(--color-heading) }
:where(.sdes-page) .sdes-color-choice>i { height:var(--size-14); width:var(--size-14); border:var(--size-1) var(--border-style) var(--color-border); border-radius:50%; flex:none }
:where(.sdes-page) .sdes-token-lab button:focus-visible { outline-color:var(--color-highlight) }
:where(.sdes-page) .sdes-lab-surfaces { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-22) }
:where(.sdes-page) .sdes-lab-surface { min-width:0; padding:var(--size-22); background:var(--color-background); border-radius:var(--size-10); color:var(--color-heading); min-height:var(--size-275); display:flex; flex-direction:column; align-items:center }
:where(.sdes-page) .sdes-surface-label { align-self:flex-start; font:var(--size-10)/var(--line-height-1-5) var(--font-family-mono); letter-spacing:var(--letter-spacing-07em); color:var(--color-text-muted); margin-bottom:var(--size-22) }
:where(.sdes-page) .sdes-example-web { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); padding:var(--size-17); width:100%; margin:auto 0; min-height:var(--size-185) }
:where(.sdes-page) .sdes-example-panel { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-7); padding:var(--size-17); width:100%; margin:auto 0; min-height:var(--size-185) }
:where(.sdes-page) .sdes-example-nav { display:flex; align-items:center; gap:var(--size-12); margin-bottom:var(--size-18) }
:where(.sdes-page) .sdes-example-nav b { font:var(--size-22)/var(--line-height-1) var(--font-family-display); color:var(--example-primary); letter-spacing:var(--letter-spacing-negative-04em) }
:where(.sdes-page) .sdes-example-nav i { width:var(--size-22); height:var(--size-3); border-radius:var(--size-2); background:var(--color-border-strong); margin-left:auto }
:where(.sdes-page) .sdes-example-web>strong { display:block; font:var(--font-weight-regular) var(--size-23)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-heading) }
:where(.sdes-page) .sdes-example-lines { margin-top:var(--size-14); display:grid; gap:var(--size-6) }
:where(.sdes-page) .sdes-example-lines i { display:block; height:var(--size-4); width:85%; background:var(--color-surface-accent); border-radius:var(--size-2) }
:where(.sdes-page) .sdes-example-lines i:last-child { width:65% }
:where(.sdes-page) .sdes-token-button { display:inline-flex; align-items:center; justify-content:center; padding:var(--size-10) var(--size-14); min-height:var(--size-34); line-height:var(--line-height-art-1-4); background:var(--example-primary); color:var(--color-white); border-radius:var(--size-6); font-size:var(--size-10); font-weight:var(--font-weight-medium); margin-top:var(--size-19); transition:background .3s ease }
:where(.sdes-page) .sdes-example-phone { border:var(--size-2) var(--border-style) var(--color-illustration-739582); background:var(--color-surface); border-radius:var(--size-17); padding:var(--size-10) var(--size-12) var(--size-14); width:var(--size-137); min-height:var(--size-205); margin:auto }
:where(.sdes-page) .sdes-phone-handle { width:var(--size-35); height:var(--size-3); background:var(--color-border-strong); border-radius:var(--size-3); margin:0 auto var(--size-18) }
:where(.sdes-page) .sdes-example-phone>b { font-size:var(--size-13); font-weight:var(--font-weight-bold); color:var(--color-heading); line-height:var(--line-height-label) }
:where(.sdes-page) .sdes-phone-field { height:var(--size-24); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-4); margin-top:var(--size-12); background:var(--color-background) }
:where(.sdes-page) .sdes-example-phone .sdes-token-button { width:100%; padding:var(--size-8); font-size:var(--size-9); margin-top:var(--size-15) }
:where(.sdes-page) .sdes-example-panel>b { font-size:var(--size-14); line-height:var(--line-height-label); color:var(--color-heading); font-weight:var(--font-weight-bold); display:block; margin-bottom:var(--size-20) }
:where(.sdes-page) .sdes-panel-row { display:flex; gap:var(--size-10); align-items:center; margin:var(--size-13) 0 }
:where(.sdes-page) .sdes-panel-row i { width:var(--size-20); height:var(--size-20); background:var(--example-primary); border-radius:var(--size-4); flex:none; transition:background .3s ease }
:where(.sdes-page) .sdes-panel-row span { height:var(--size-4); width:70%; background:var(--color-surface-accent); border-radius:var(--size-2) }
:where(.sdes-page) .sdes-lab-status { display:flex; justify-content:space-between; gap:var(--size-16); flex-wrap:wrap; margin-top:var(--size-20); color:var(--color-illustration-d9eade); font:var(--size-11)/var(--line-height-1-7) var(--font-family-mono) }
:where(.sdes-page) .sdes-token-code b { color:var(--color-highlight); font-weight:var(--font-weight-regular) }
:where(.sdes-page) .sdes-lab-note { display:block; margin-top:var(--size-12); color:var(--color-illustration-c9dfd1); font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono) }
/* Inconsistent vs shared UI, followed by the original six problem statements. */
:where(.sdes-page) #problem .split { display:grid; grid-template-columns:.85fr 1.15fr; gap:7%; align-items:start }
:where(.sdes-page) #problem .section-head { margin:0 }
:where(.sdes-page) .sdes-consistency-figure { padding:var(--size-26); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-16); margin-top:var(--size-32) }
:where(.sdes-page) .sdes-consistency-figure figcaption { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-06em); color:var(--color-heading); margin-bottom:var(--size-22) }
:where(.sdes-page) .sdes-inconsistent-set { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-10); align-items:center }
:where(.sdes-page) .sdes-consistent-set { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-10); align-items:center }
:where(.sdes-page) .sdes-inconsistent-set>span { display:flex; justify-content:center; align-items:center; min-height:var(--size-37); font-size:var(--size-10); font-weight:var(--font-weight-medium); line-height:var(--line-height-art-1-4); text-align:center; background:var(--color-primary); color:var(--color-white); padding:var(--size-10) var(--size-7); border-radius:var(--size-5) }
:where(.sdes-page) .sdes-consistent-set>span { display:flex; justify-content:center; align-items:center; min-height:var(--size-37); font-size:var(--size-10); font-weight:var(--font-weight-medium); line-height:var(--line-height-art-1-4); text-align:center; background:var(--color-primary); color:var(--color-white); padding:var(--size-10) var(--size-7); border-radius:var(--size-5) }
:where(.sdes-page) .sdes-inconsistent-set>span:nth-child(2) { border-radius:var(--size-22); background:var(--color-surface-accent); color:var(--color-text); font-size:var(--size-12); padding-block:var(--size-13) }
:where(.sdes-page) .sdes-inconsistent-set>span:nth-child(3) { border-radius:0; background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-illustration-739582); color:var(--color-heading); font-size:var(--size-9); text-transform:uppercase }
:where(.sdes-page) .sdes-consistency-arrow { font-size:var(--size-12); line-height:var(--line-height-1-7); color:var(--color-text-muted); text-align:center; padding:var(--size-22) 0 }
:where(.sdes-page) .sdes-consistency-figure p { font:var(--size-10)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-text-muted); margin:var(--size-20) 0 0; text-align:center }
:where(.sdes-page) .sdes-split-list { display:grid; gap:var(--size-20) }
:where(.sdes-page) .sdes-split-list__item { padding:var(--size-28); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-14) }
:where(.sdes-page) .sdes-split-list__title { font-size:var(--size-19); margin:0 0 var(--size-12) }
:where(.sdes-page) .sdes-split-list__body { font-size:var(--size-15); line-height:var(--line-height-relaxed); margin:0 }
:where(.sdes-page) .sdes-pull { background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-14); padding:var(--size-28); margin-top:var(--size-38) }
:where(.sdes-page) .sdes-pull__title { font-size:var(--size-19); margin-bottom:var(--size-12); color:var(--color-heading) }
:where(.sdes-page) .sdes-pull__body { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
/* Exact comparison text with readable mobile labels. */
:where(.sdes-page) .sdes-compare { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-14); overflow-x:auto }
:where(.sdes-page) .sdes-compare-table { border-collapse:collapse; width:100%; min-width:var(--size-850); table-layout:fixed }
:where(.sdes-page) .sdes-compare-table th { padding:var(--size-22); text-align:left; vertical-align:top; border-right:var(--size-1) var(--border-style) var(--color-border); border-bottom:var(--size-1) var(--border-style) var(--color-border); font-size:var(--size-14); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sdes-page) .sdes-compare-table td { padding:var(--size-22); text-align:left; vertical-align:top; border-right:var(--size-1) var(--border-style) var(--color-border); border-bottom:var(--size-1) var(--border-style) var(--color-border); font-size:var(--size-14); line-height:var(--line-height-relaxed); color:var(--color-text-muted) }
:where(.sdes-page) .sdes-compare-table thead th { background:var(--color-surface-secondary); color:var(--color-heading); font-size:var(--size-13); font-weight:var(--font-weight-bold) }
:where(.sdes-page) .sdes-compare-table th:first-child { width:21% }
:where(.sdes-page) .sdes-compare-table tbody th { font-weight:var(--font-weight-bold); color:var(--color-heading) }
:where(.sdes-page) .sdes-compare-table tr>*:last-child { border-right:0 }
:where(.sdes-page) .sdes-compare-table tr:last-child>* { border-bottom:0 }
:where(.sdes-page) .sdes-compare-table .is-ours { background:var(--color-primary); color:var(--color-white); border-right-color:var(--color-illustration-72998b); border-bottom-color:var(--color-illustration-72998b) }
:where(.sdes-page) .sdes-compare-note { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin-top:var(--size-28) }
:where(.sdes-page) .sdes-reuse-chart { display:grid; grid-template-columns:.85fr 1.15fr; gap:7%; align-items:center; padding:var(--size-32); background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-16); margin-top:var(--size-38) }
:where(.sdes-page) .sdes-figure-label { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-08em); color:var(--color-heading) }
:where(.sdes-page) .sdes-reuse-chart h3 { font:var(--font-weight-regular) var(--size-30)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); margin:var(--size-15) 0; color:var(--color-heading) }
:where(.sdes-page) .sdes-reuse-chart p { font-size:var(--size-15); line-height:var(--line-height-relaxed) }
:where(.sdes-page) .sdes-reuse-chart figcaption { font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdes-page) .sdes-reuse-plot svg { width:100%; height:auto; display:block; max-height:var(--size-260) }
:where(.sdes-page) .sdes-reuse-legend { display:flex; flex-wrap:wrap; gap:var(--size-14); font-size:var(--size-11); line-height:var(--line-height-1-6); margin-top:var(--size-12) }
:where(.sdes-page) .sdes-reuse-legend>span { display:flex; align-items:center; gap:var(--size-8); color:var(--color-text-muted); font-weight:var(--font-weight-regular) }
:where(.sdes-page) .sdes-reuse-legend>strong { display:flex; align-items:center; gap:var(--size-8); color:var(--color-text-muted); font-weight:var(--font-weight-regular) }
:where(.sdes-page) .sdes-reuse-legend>strong { color:var(--color-heading); font-weight:var(--font-weight-medium) }
:where(.sdes-page) .sdes-reuse-legend>span:before { content:''; width:var(--size-20); border-top:var(--size-2) dashed var(--color-illustration-687e70) }
:where(.sdes-page) .sdes-reuse-legend>strong:before { content:''; width:var(--size-20); border-top:var(--size-2) dashed var(--color-illustration-687e70) }
:where(.sdes-page) .sdes-reuse-legend>strong:before { border-top:var(--size-3) var(--border-style) var(--color-primary) }
/* Case studies use illustrative UI, without fabricated numerical outcomes. */
:where(.sdes-page) .sdes-case-placeholder { display:block; overflow:hidden }
:where(.sdes-page) .sdes-card__eyebrow { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); text-transform:uppercase; letter-spacing:var(--letter-spacing-07em); color:var(--color-heading); margin:0 0 var(--size-14) }
:where(.sdes-page) .sdes-case-placeholder .card__title { font:var(--font-weight-regular) var(--size-28)/var(--line-height-1-2) var(--font-family-display); letter-spacing:var(--letter-spacing-negative-025em); color:var(--color-heading); margin-bottom:var(--size-20) }
:where(.sdes-page) .sdes-case-placeholder .sdes-card__foot { display:flex; gap:var(--size-8); flex-wrap:wrap; margin-top:var(--size-24); border:0; padding:0 }
:where(.sdes-page) .sdes-case-placeholder .sdes-tag { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); padding:var(--size-7) var(--size-9); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5); color:var(--color-heading) }
:where(.sdes-page) .sdes-case-preview { margin:var(--space-px-negative-28) var(--space-px-negative-28) var(--size-28); background:var(--color-surface-secondary); min-width:0; overflow:hidden }
:where(.sdes-page) .sdes-case-chrome { display:flex; align-items:center; justify-content:space-between; gap:var(--size-12); padding:var(--size-17) var(--size-22); background:var(--color-surface-accent) }
:where(.sdes-page) .sdes-case-chrome b { font-size:var(--size-14); font-weight:var(--font-weight-bold); color:var(--color-heading); letter-spacing:var(--letter-spacing-negative-025em) }
:where(.sdes-page) .sdes-case-chrome>span { font:var(--size-9) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdes-page) .sdes-case-panel { display:grid; grid-template-columns:var(--size-36) minmax(0,1fr); margin:var(--size-20) var(--size-25) 0; border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); overflow:hidden; background:var(--color-surface) }
:where(.sdes-page) .sdes-case-panel-nav { background:var(--color-background); display:flex; flex-direction:column; align-items:center; gap:var(--size-15); padding:var(--size-19) var(--size-7) }
:where(.sdes-page) .sdes-case-panel-nav i { width:var(--size-14); height:var(--size-14); border:var(--size-1) var(--border-style) var(--color-illustration-739582); border-radius:var(--size-3) }
:where(.sdes-page) .sdes-case-panel-main { padding:var(--size-22); min-width:0 }
:where(.sdes-page) .sdes-case-panel-main>strong { font:var(--font-weight-regular) var(--size-26)/var(--line-height-1-15) var(--font-family-display); color:var(--color-heading); letter-spacing:var(--letter-spacing-negative-025em) }
:where(.sdes-page) .sdes-case-module-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-8); margin-top:var(--size-20) }
:where(.sdes-page) .sdes-case-module-row span { background:var(--color-surface-secondary); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-5); padding:var(--size-13) var(--size-6); text-align:center; font-size:var(--size-10); color:var(--color-heading) }
:where(.sdes-page) .sdes-case-lines { display:grid; gap:var(--size-7); margin-top:var(--size-17) }
:where(.sdes-page) .sdes-case-lines i { height:var(--size-5); width:80%; background:var(--color-surface-accent); border-radius:var(--size-2) }
:where(.sdes-page) .sdes-case-lines i:last-child { width:60% }
:where(.sdes-page) .sdes-case-preview figcaption { padding:var(--size-15) var(--size-22); font:var(--size-9)/var(--line-height-1-6) var(--font-family-mono); color:var(--color-text-muted) }
:where(.sdes-page) .sdes-art-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-15); margin:var(--size-20) var(--size-25) 0; padding:var(--size-20); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-8); min-height:var(--size-210); align-items:center }
:where(.sdes-page) .sdes-art-gallery>div { min-width:0 }
:where(.sdes-page) .sdes-artwork { height:var(--size-115); position:relative; overflow:hidden; border-radius:var(--size-3); background:var(--color-surface-accent) }
:where(.sdes-page) .sdes-art-one:before { content:''; position:absolute; inset:20% 17% -15%; border-radius:var(--size-70) var(--size-70) 0 0; background:var(--color-primary); transform:rotate(-15deg) }
:where(.sdes-page) .sdes-art-two { background:var(--color-primary) }
:where(.sdes-page) .sdes-art-two:before { content:''; position:absolute; width:var(--size-80); height:var(--size-80); top:16%; left:26%; border:var(--size-16) var(--border-style) var(--color-highlight); border-radius:50% }
:where(.sdes-page) .sdes-art-three { background:var(--color-highlight) }
:where(.sdes-page) .sdes-art-three:before { content:''; position:absolute; inset:25% -25% 15% 5%; background:var(--color-accent); transform:rotate(-38deg) }
:where(.sdes-page) .sdes-art-gallery>div>span { display:block; width:70%; height:var(--size-5); background:var(--color-border-strong); margin-top:var(--size-12); border-radius:var(--size-2) }
:where(.sdes-page) .sdes-art-gallery>div>i { display:block; width:50%; height:var(--size-4); background:var(--color-surface-accent); margin-top:var(--size-7); border-radius:var(--size-2) }
/* Living system: release and feedback overview, then six distinct process cards. */
:where(.sdes-page) .sdes-governance { background:var(--color-primary); color:var(--color-white); border-radius:var(--size-18); padding:var(--size-32); margin:0 0 var(--size-32) }
:where(.sdes-page) .sdes-governance>figcaption { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-09em); color:var(--color-highlight); margin-bottom:var(--size-26) }
:where(.sdes-page) .sdes-governance-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-26) }
:where(.sdes-page) .sdes-governance-flow>div { background:var(--color-surface); border-radius:var(--size-10); padding:var(--size-24); position:relative; min-width:0 }
:where(.sdes-page) .sdes-governance-flow>div:not(:last-child):after { content:'→'; position:absolute; right:var(--length-px-negative-22); top:43%; color:var(--color-highlight); font-size:var(--size-19); line-height:var(--line-height-art-1) }
:where(.sdes-page) .sdes-governance-flow .sdes-system-icon { margin-bottom:var(--size-18) }
:where(.sdes-page) .sdes-governance-flow b { display:block; font-size:var(--size-15); font-weight:var(--font-weight-bold); line-height:var(--line-height-label); color:var(--color-heading) }
:where(.sdes-page) .sdes-governance-flow small { display:block; font-size:var(--size-11); line-height:var(--line-height-1-7); color:var(--color-text-muted); margin-top:var(--size-8) }
:where(.sdes-page) .sdes-governance-feedback { margin-top:var(--size-22); padding:var(--size-14) var(--size-18); border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-7); text-align:center; font:var(--size-11)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-illustration-d9eade) }
:where(.sdes-page) .sdes-process { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-24) }
:where(.sdes-page) .sdes-process__step { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); gap:var(--size-22); padding:var(--size-28); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-14); background:var(--color-surface) }
:where(.sdes-page) .sdes-process__rail { margin:0; display:block }
:where(.sdes-page) .sdes-process__node { display:grid; place-items:center; width:var(--size-44); height:var(--size-44); background:var(--color-primary); color:var(--color-highlight); border:0; border-radius:var(--size-10); font:var(--size-12) var(--font-family-mono) }
:where(.sdes-page) .sdes-process__body h3 { font-size:var(--size-19); margin:0 0 var(--size-12) }
:where(.sdes-page) .sdes-process__body p { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:0 }
:where(.sdes-page) .sdes-system-why { margin-top:var(--size-44) }
:where(.sdes-page) .sdes-system-why>.card__title { font-size:var(--size-19); margin-bottom:var(--size-25) }
:where(.sdes-page) .sdes-system-why-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-24) }
:where(.sdes-page) .sdes-why-item { background:var(--color-surface-secondary); border-radius:var(--size-14); padding:var(--size-26); min-width:0 }
:where(.sdes-page) .sdes-why-item h4 { font-size:var(--size-18); margin:0 0 var(--size-12) }
:where(.sdes-page) .sdes-why-item p { font-size:var(--size-15); line-height:var(--line-height-relaxed); margin:0 }
/* The discovery step keeps a tangible visual after the service scope. */
:where(.sdes-page) #ilk-adim>.container { display:grid; grid-template-columns:1.15fr .85fr; gap:7%; align-items:center }
:where(.sdes-page) #ilk-adim .sdes-split--cta { display:block }
:where(.sdes-page) #ilk-adim .section-head { margin-bottom:var(--size-24) }
:where(.sdes-page) #ilk-adim .sdes-cta-band__aside>div { margin-top:var(--size-26) }
:where(.sdes-page) .sdes-discovery-system { padding:var(--size-28); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-16); box-shadow:var(--size-7) var(--size-7) 0 var(--color-illustration-bdd7c5) }
:where(.sdes-page) .sdes-discovery-system>figcaption { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-08em); color:var(--color-heading); margin-bottom:var(--size-24) }
:where(.sdes-page) .sdes-discovery-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-10) }
:where(.sdes-page) .sdes-discovery-inputs>span { padding:var(--size-12) var(--size-7); border:var(--size-1) var(--border-style) var(--color-border-strong); background:var(--color-surface-secondary); border-radius:var(--size-6); text-align:center; font-size:var(--size-12); font-weight:var(--font-weight-medium); color:var(--color-heading) }
:where(.sdes-page) .sdes-discovery-result { position:relative; display:flex; align-items:center; gap:var(--size-14); border-radius:var(--size-8); background:var(--color-primary); color:var(--color-white); padding:var(--size-18); margin-top:var(--size-30) }
:where(.sdes-page) .sdes-discovery-result:before { content:''; position:absolute; height:var(--size-30); top:var(--length-px-negative-30); left:50%; border-left:var(--size-1) var(--border-style) var(--color-illustration-739582) }
:where(.sdes-page) .sdes-discovery-result .sdes-system-icon { margin:0; background:var(--color-illustration-194e3e); border-color:var(--color-illustration-72998b); color:var(--color-highlight) }
:where(.sdes-page) .sdes-discovery-result strong { font-size:var(--size-14); font-weight:var(--font-weight-medium); line-height:var(--line-height-label) }
/* FAQ groups retain their source order and answer content. */
:where(.sdes-page) #sss .split { display:grid; grid-template-columns:.75fr 1.25fr; gap:8%; align-items:start }
:where(.sdes-page) #sss .section-head { position:sticky; top:var(--anchor-offset) }
:where(.sdes-page) #sss .sdes-accordion--eyebrow { font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-5) var(--font-family-mono); color:var(--color-heading); margin:0 0 var(--size-12); letter-spacing:var(--letter-spacing-07em); scroll-margin-top:var(--anchor-offset) }
:where(.sdes-page) .accordion { display:grid; gap:var(--size-14); margin-bottom:var(--size-32) }
:where(.sdes-page) .sdes-accordion__item { padding:0 var(--size-22); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); overflow:hidden }
:where(.sdes-page) .sdes-accordion__item[open] { background:var(--color-surface-muted) }
:where(.sdes-page) .sdes-accordion__item summary { font:var(--font-weight-medium) var(--size-16)/var(--line-height-1-6) var(--font-family-body); color:var(--color-heading); padding:var(--size-22) 0; display:flex; align-items:center; justify-content:space-between; gap:var(--size-18) }
:where(.sdes-page) .sdes-accordion__ico { width:var(--size-18); height:var(--size-18); position:relative; color:var(--color-heading); flex:none }
:where(.sdes-page) .sdes-accordion__ico:before { content:''; position:absolute; left:var(--size-2); top:var(--size-8); width:var(--size-14); height:var(--size-1); background:currentColor }
:where(.sdes-page) .sdes-accordion__ico:after { content:''; position:absolute; left:var(--size-2); top:var(--size-8); width:var(--size-14); height:var(--size-1); background:currentColor }
:where(.sdes-page) .sdes-accordion__ico:after { transform:rotate(90deg) }
:where(.sdes-page) details[open] .sdes-accordion__ico:after { transform:none }
:where(.sdes-page) .sdes-accordion__panel { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); padding:0 0 var(--size-22) }
:where(.sdes-page) .sdes-system-faq-topics { display:grid; gap:0; margin-top:var(--size-26) }
:where(.sdes-page) .sdes-system-faq-topics>a { padding:var(--size-12) 0; border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); font-size:var(--size-13); color:var(--color-text) }
:where(.sdes-page) .sdes-system-faq-topics>a:hover { color:var(--color-accent) }
/* Closing section uses the same high-contrast palette as approved pages. */
:where(.sdes-page) #baslayalim .sdes-split--cta { display:block; max-width:var(--size-1050) }
:where(.sdes-page) #baslayalim .section-head { margin:0 }
:where(.sdes-page) #baslayalim h2 { color:var(--color-white); font-size:var(--font-size-closing); max-width:var(--size-980) }
:where(.sdes-page) #baslayalim p { color:var(--color-illustration-e0eee5); max-width:var(--size-940); font-size:var(--size-17); line-height:var(--line-height-relaxed) }
:where(.sdes-page) #baslayalim .eyebrow { color:var(--color-highlight) }
:where(.sdes-page) .sdes-state-strip { padding:var(--size-24) var(--size-26); border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-12); margin-top:var(--size-38); background:var(--color-illustration-194e3e); max-width:var(--size-900) }
:where(.sdes-page) .sdes-state-strip>figcaption { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-07em); color:var(--color-illustration-c9dfd1); margin-bottom:var(--size-20) }
:where(.sdes-page) .sdes-state-strip>div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--size-18); align-items:center }
:where(.sdes-page) .sdes-state-strip span { display:flex; align-items:center; justify-content:center; min-height:var(--size-42); padding:var(--size-10) var(--size-12); background:var(--color-highlight); color:var(--color-heading); border-radius:var(--size-6); text-align:center; font-size:var(--size-12); line-height:var(--line-height-label); font-weight:var(--font-weight-medium) }
:where(.sdes-page) .sdes-state-strip .sdes-state-focus { outline:var(--size-2) var(--border-style) var(--color-white); outline-offset:var(--size-3) }
:where(.sdes-page) .sdes-state-strip .sdes-state-loading { background:var(--color-surface-secondary); color:var(--color-text) }
:where(.sdes-page) .sdes-state-strip .sdes-state-disabled { background:var(--color-surface-accent); color:var(--color-heading) }
@media(max-width:1200px) {
:where(.sdes-page) .hero-grid { gap:4% }
:where(.sdes-page) .sdes-system-map { padding:var(--size-24) }
:where(.sdes-page) .sdes-card-grid--4 { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sdes-page) .sdes-system-why-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sdes-page) .sdes-governance-flow { gap:var(--size-20) }
:where(.sdes-page) .sdes-governance-flow>div { padding:var(--size-22) var(--size-18) }
:where(.sdes-page) .sdes-governance-flow>div:not(:last-child):after { right:var(--length-px-negative-18); font-size:var(--size-17) }
:where(.sdes-page) .sdes-lab-surfaces { gap:var(--size-16) }
:where(.sdes-page) .sdes-lab-surface { padding:var(--size-20) }
:where(.sdes-page) .sdes-case-panel-main { padding:var(--size-20) }
:where(.sdes-page) .sdes-art-gallery { gap:var(--size-12); padding:var(--size-17) }
}
@media(max-width:1000px) {
:where(.sdes-page) .hero-grid { grid-template-columns:1fr }
:where(.sdes-page) .sdes-system-map { margin:var(--size-30) auto 0; max-width:var(--size-470) }
:where(.sdes-page) h1 { max-width:var(--size-800) }
:where(.sdes-page) .sdes-card-grid--3 { grid-template-columns:repeat(2,minmax(0,1fr)) }
:where(.sdes-page) #yaklasim .card:last-child { grid-column:1/-1 }
:where(.sdes-page) #problem .split { grid-template-columns:1fr; gap:var(--size-30) }
:where(.sdes-page) .sdes-consistency-figure { max-width:var(--size-530) }
:where(.sdes-page) #problem .section-head { max-width:var(--size-860) }
:where(.sdes-page) .sdes-lab-surfaces { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-14) }
:where(.sdes-page) .sdes-lab-surface { padding:var(--size-18) var(--size-14) }
:where(.sdes-page) .sdes-example-web { padding:var(--size-14) }
:where(.sdes-page) .sdes-example-panel { padding:var(--size-14) }
:where(.sdes-page) .sdes-example-web>strong { font-size:var(--size-21) }
:where(.sdes-page) .sdes-example-nav b { font-size:var(--size-21) }
:where(.sdes-page) #ilk-adim>.container { grid-template-columns:1fr; gap:var(--size-35) }
:where(.sdes-page) .sdes-discovery-system { max-width:var(--size-530); width:100% }
:where(.sdes-page) .sdes-reuse-chart { gap:5%; padding:var(--size-28) }
:where(.sdes-page) .sdes-case-module-row { gap:var(--size-6) }
:where(.sdes-page) .sdes-case-module-row span { font-size:var(--size-9) }
:where(.sdes-page) .sdes-case-panel { margin-inline:var(--size-20) }
:where(.sdes-page) .sdes-art-gallery { margin-inline:var(--size-20) }
:where(.sdes-page) .sdes-case-chrome>span { font-size:var(--size-8) }
:where(.sdes-page) .sdes-case-panel-main>strong { font-size:var(--size-23) }
}
@media(max-width:800px) {
:where(.sdes-page) .sdes-system-section { padding:var(--size-70) 0 }
:where(.sdes-page) .hero-section { padding:var(--size-45) 0 }
:where(.sdes-page) .sdes-card-grid--2 { grid-template-columns:1fr }
:where(.sdes-page) #sss .split { grid-template-columns:1fr; gap:var(--size-28) }
:where(.sdes-page) #sss .section-head { position:static; margin-bottom:0 }
:where(.sdes-page) .sdes-system-faq-topics { display:flex; gap:var(--size-10); flex-wrap:wrap }
:where(.sdes-page) .sdes-system-faq-topics>a { border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-6); padding:var(--size-9) var(--size-12); font-size:var(--size-11) }
:where(.sdes-page) .sdes-process { grid-template-columns:1fr }
:where(.sdes-page) .sdes-governance-flow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-20) }
:where(.sdes-page) .sdes-governance-flow>div:nth-child(2):after { display:none }
:where(.sdes-page) .sdes-governance-flow>div:not(:last-child):after { right:var(--length-px-negative-18) }
:where(.sdes-page) .sdes-lab-surfaces { grid-template-columns:1fr; gap:var(--size-18) }
:where(.sdes-page) .sdes-lab-surface { min-height:0; padding:var(--size-22); display:grid; grid-template-columns:var(--size-125) minmax(0,1fr); gap:var(--size-20); align-items:center }
:where(.sdes-page) .sdes-surface-label { margin:0; align-self:center; font-size:var(--size-11) }
:where(.sdes-page) .sdes-example-phone { margin:0; justify-self:start }
:where(.sdes-page) .sdes-example-web { max-width:var(--size-380); min-height:var(--size-180) }
:where(.sdes-page) .sdes-example-panel { max-width:var(--size-380); min-height:var(--size-180) }
:where(.sdes-page) .sdes-token-lab { padding:var(--size-28) }
:where(.sdes-page) .sdes-lab-header { gap:var(--size-20) }
:where(.sdes-page) .sdes-reuse-chart { grid-template-columns:1fr; gap:var(--size-22) }
:where(.sdes-page) .sdes-reuse-chart h3 br { display:none }
:where(.sdes-page) .sdes-reuse-plot { max-width:var(--size-550); width:100%; margin:auto }
:where(.sdes-page) .sdes-case-preview { max-height:none }
:where(.sdes-page) .sdes-case-panel-main>strong { font-size:var(--size-26) }
:where(.sdes-page) .sdes-art-gallery { min-height:var(--size-220) }
:where(.sdes-page) .sdes-artwork { height:var(--size-140) }
:where(.sdes-page) .section-nav-label { display:none }
:where(.sdes-page) .section-nav-links { gap:var(--size-24); white-space:nowrap }
:where(.sdes-page) .section-nav .container { justify-content:flex-start }
:where(.sdes-page) #baslayalim h2 { max-width:var(--size-900) }
}
@media(max-width:520px) {
:where(.sdes-page) .sdes-system-section { padding:var(--size-58) 0 }
:where(.sdes-page) .hero-section { padding:var(--size-42) 0 }
:where(.sdes-page) h1 { font-size:var(--size-44) }
:where(.sdes-page) h2 { font-size:var(--size-34) }
:where(.sdes-page) .hero-lead { font-size:var(--size-16) }
:where(.sdes-page) .section-head { margin-bottom:var(--size-30) }
:where(.sdes-page) .eyebrow { font-size:var(--size-10) }
:where(.sdes-page) .hero-content>.eyebrow { display:flex; flex-wrap:wrap; gap:var(--size-8) }
:where(.sdes-page) .action-group { gap:var(--size-18) }
:where(.sdes-page) .sdes-system-map { padding:var(--size-24) var(--size-20); box-shadow:var(--size-5) var(--size-5) 0 var(--color-surface-accent) }
:where(.sdes-page) .sdes-system-map>figcaption { font-size:var(--size-9); gap:var(--size-10) }
:where(.sdes-page) .sdes-map-token { gap:var(--size-12); padding:var(--size-20) var(--size-14) }
:where(.sdes-page) .sdes-map-token strong { font-size:var(--size-24) }
:where(.sdes-page) .sdes-map-token small { font-size:var(--size-9) }
:where(.sdes-page) .sdes-map-libraries { gap:var(--size-11) }
:where(.sdes-page) .sdes-map-libraries>div { padding:var(--size-16) var(--size-8) }
:where(.sdes-page) .sdes-map-libraries strong { font-size:var(--size-12) }
:where(.sdes-page) .sdes-map-libraries small { font-size:var(--size-9) }
:where(.sdes-page) .sdes-map-products { gap:var(--size-11) }
:where(.sdes-page) .sdes-map-products>div { font-size:var(--size-11) }
:where(.sdes-page) .sdes-map-foot { font-size:var(--size-8); gap:var(--size-6) }
:where(.sdes-page) .sdes-card-grid--3 { grid-template-columns:1fr }
:where(.sdes-page) .sdes-card-grid--4 { grid-template-columns:1fr }
:where(.sdes-page) #yaklasim .card:last-child { grid-column:auto }
:where(.sdes-page) .card { padding:var(--size-26) }
:where(.sdes-page) .sdes-token-lab { padding:var(--size-25) var(--size-18) }
:where(.sdes-page) .sdes-lab-header { display:block }
:where(.sdes-page) .sdes-lab-header h3 { font-size:var(--size-28) }
:where(.sdes-page) .sdes-lab-play { margin-top:var(--size-20); font-size:var(--size-11) }
:where(.sdes-page) .sdes-lab-controls { gap:var(--size-8) }
:where(.sdes-page) .sdes-lab-controls>span { width:100%; font-size:var(--size-10) }
:where(.sdes-page) .sdes-color-choice { font-size:var(--size-10); padding:var(--size-9) var(--size-10); min-height:var(--size-37) }
:where(.sdes-page) .sdes-color-choice>i { width:var(--size-12); height:var(--size-12) }
:where(.sdes-page) .sdes-lab-surface { display:flex; flex-direction:column; align-items:center; gap:0; padding:var(--size-22) }
:where(.sdes-page) .sdes-surface-label { align-self:flex-start; font-size:var(--size-10); margin-bottom:var(--size-20) }
:where(.sdes-page) .sdes-example-web { max-width:none }
:where(.sdes-page) .sdes-example-panel { max-width:none }
:where(.sdes-page) .sdes-example-phone { align-self:center; margin:0 }
:where(.sdes-page) .sdes-lab-status { font-size:var(--size-9); gap:var(--size-8) }
:where(.sdes-page) .sdes-lab-note { font-size:var(--size-9) }
:where(.sdes-page) .sdes-split-list__item { padding:var(--size-26) }
:where(.sdes-page) .sdes-consistency-figure { padding:var(--size-24) var(--size-18) }
:where(.sdes-page) .sdes-inconsistent-set { gap:var(--size-8) }
:where(.sdes-page) .sdes-consistent-set { gap:var(--size-8) }
:where(.sdes-page) .sdes-consistency-figure figcaption { font-size:var(--size-9) }
:where(.sdes-page) .sdes-inconsistent-set>span { font-size:var(--size-9); padding:var(--size-10) var(--size-5) }
:where(.sdes-page) .sdes-consistent-set>span { font-size:var(--size-9); padding:var(--size-10) var(--size-5) }
:where(.sdes-page) .sdes-inconsistent-set>span:nth-child(2) { font-size:var(--size-10) }
:where(.sdes-page) .sdes-inconsistent-set>span:nth-child(3) { font-size:var(--size-8) }
:where(.sdes-page) .sdes-pull { padding:var(--size-26) }
:where(.sdes-page) .sdes-compare-table { min-width:var(--size-780) }
:where(.sdes-page) .sdes-compare-table th { padding:var(--size-18); font-size:var(--size-13) }
:where(.sdes-page) .sdes-compare-table td { padding:var(--size-18); font-size:var(--size-13) }
:where(.sdes-page) .sdes-reuse-chart { padding:var(--size-26) var(--size-20) }
:where(.sdes-page) .sdes-reuse-chart h3 { font-size:var(--size-28) }
:where(.sdes-page) .sdes-reuse-chart figcaption { font-size:var(--size-9) }
:where(.sdes-page) .sdes-reuse-legend { font-size:var(--size-10); gap:var(--size-10) }
:where(.sdes-page) .sdes-case-preview { margin:var(--space-px-negative-26) var(--space-px-negative-26) var(--size-26) }
:where(.sdes-page) .sdes-case-chrome { padding:var(--size-16) var(--size-18); flex-wrap:wrap; gap:var(--size-7) }
:where(.sdes-page) .sdes-case-chrome>span { font-size:var(--size-8) }
:where(.sdes-page) .sdes-case-panel { grid-template-columns:1fr; margin:var(--size-18) var(--size-18) 0 }
:where(.sdes-page) .sdes-case-panel-nav { display:none }
:where(.sdes-page) .sdes-case-panel-main { padding:var(--size-20) }
:where(.sdes-page) .sdes-case-panel-main>strong { font-size:var(--size-25) }
:where(.sdes-page) .sdes-case-module-row span { font-size:var(--size-9); padding:var(--size-12) var(--size-5) }
:where(.sdes-page) .sdes-case-preview figcaption { font-size:var(--size-8); padding:var(--size-13) var(--size-18) }
:where(.sdes-page) .sdes-art-gallery { gap:var(--size-10); padding:var(--size-15); margin:var(--size-18) var(--size-18) 0; min-height:var(--size-175) }
:where(.sdes-page) .sdes-artwork { height:var(--size-105) }
:where(.sdes-page) .sdes-art-two:before { width:var(--size-65); height:var(--size-65); border-width:var(--size-13) }
:where(.sdes-page) .sdes-case-placeholder .card__title { font-size:var(--size-26) }
:where(.sdes-page) .sdes-case-placeholder .sdes-tag { font-size:var(--size-9); padding:var(--size-6) var(--size-8) }
:where(.sdes-page) .sdes-governance { padding:var(--size-25) var(--size-18) }
:where(.sdes-page) .sdes-governance>figcaption { font-size:var(--size-9) }
:where(.sdes-page) .sdes-governance-flow { gap:var(--size-14) }
:where(.sdes-page) .sdes-governance-flow>div { padding:var(--size-20) var(--size-14) }
:where(.sdes-page) .sdes-governance-flow b { font-size:var(--size-13) }
:where(.sdes-page) .sdes-governance-flow small { font-size:var(--size-10) }
:where(.sdes-page) .sdes-governance-flow>div:not(:last-child):after { right:var(--length-px-negative-13); font-size:var(--size-14) }
:where(.sdes-page) .sdes-governance-feedback { font-size:var(--size-9); padding:var(--size-13) }
:where(.sdes-page) .sdes-process__step { padding:var(--size-24) var(--size-18); grid-template-columns:var(--size-39) minmax(0,1fr); gap:var(--size-15) }
:where(.sdes-page) .sdes-process__node { width:var(--size-39); height:var(--size-39); font-size:var(--size-11) }
:where(.sdes-page) .sdes-process__body h3 { font-size:var(--size-18) }
:where(.sdes-page) .sdes-process__body p { font-size:var(--size-15) }
:where(.sdes-page) .sdes-system-why-grid { grid-template-columns:1fr; gap:var(--size-20) }
:where(.sdes-page) .sdes-why-item { padding:var(--size-26) }
:where(.sdes-page) .sdes-discovery-system { padding:var(--size-24) var(--size-20) }
:where(.sdes-page) .sdes-discovery-system>figcaption { font-size:var(--size-9) }
:where(.sdes-page) .sdes-discovery-inputs { gap:var(--size-8) }
:where(.sdes-page) .sdes-discovery-inputs>span { font-size:var(--size-10); padding:var(--size-12) var(--size-5) }
:where(.sdes-page) .sdes-discovery-result { gap:var(--size-12); padding:var(--size-17) var(--size-14) }
:where(.sdes-page) .sdes-discovery-result strong { font-size:var(--size-13) }
:where(.sdes-page) .sdes-accordion__item { padding:0 var(--size-19) }
:where(.sdes-page) .sdes-accordion__item summary { font-size:var(--size-15) }
:where(.sdes-page) .sdes-accordion--eyebrow { font-size:var(--size-10) }
:where(.sdes-page) #baslayalim h2 { font-size:var(--size-38) }
:where(.sdes-page) #baslayalim p { font-size:var(--size-16) }
:where(.sdes-page) .sdes-state-strip { padding:var(--size-24) var(--size-20) }
:where(.sdes-page) .sdes-state-strip>figcaption { font-size:var(--size-9) }
:where(.sdes-page) .sdes-state-strip>div { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-18) }
:where(.sdes-page) .sdes-state-strip span { font-size:var(--size-11) }
}
@media(max-width:360px) {
:where(.sdes-page) h1 { font-size:var(--size-41) }
:where(.sdes-page) .sdes-map-libraries strong { font-size:var(--size-11) }
:where(.sdes-page) .sdes-map-token { gap:var(--size-10) }
:where(.sdes-page) .sdes-map-token strong { font-size:var(--size-22) }
:where(.sdes-page) .sdes-map-products>div { font-size:var(--size-10) }
}
@media(prefers-reduced-motion:reduce) {
:where(.sdes-page) .sdes-token-button { transition:none }
:where(.sdes-page) .sdes-panel-row i { transition:none }
}
@media print {
:where(.sdes-page) .section-nav { display:none }
:where(.sdes-page) .sdes-lab-play { display:none }
:where(.sdes-page) .sdes-lab-controls { display:none }
:where(.sdes-page) .sdes-system-section { padding:var(--size-28) 0 }
:where(.sdes-page) .card { break-inside:avoid }
:where(.sdes-page) .sdes-process__step { break-inside:avoid }
:where(.sdes-page) .sdes-token-lab { break-inside:avoid }
:where(.sdes-page) .sdes-governance { break-inside:avoid }
:where(.sdes-page) .sdes-system-map { box-shadow:none }
:where(.sdes-page) .sdes-discovery-system { box-shadow:none }
:where(.sdes-page) .sdes-token-lab { print-color-adjust:exact }
:where(.sdes-page) .sdes-governance { print-color-adjust:exact }
:where(.sdes-page) #baslayalim { print-color-adjust:exact }
}
:where(.sdes-page) .sdes-system-map .sdes-map-token { align-items:center; padding:var(--size-22) var(--size-18) }
:where(.sdes-page) .sdes-system-map .sdes-map-token strong { font-size:var(--size-24); line-height:var(--line-height-1-2); max-width:13ch }
:where(.sdes-page) .sdes-system-map .sdes-map-token small { font:var(--size-10)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-illustration-d9eade); margin-top:var(--size-10) }
:where(.sdes-page) .sdes-system-map .sdes-map-libraries strong { font-size:var(--size-14); line-height:var(--line-height-art-1-4); max-width:13ch }
:where(.sdes-page) .sdes-system-map .sdes-map-libraries small { font:var(--size-10)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-8) }
:where(.sdes-page) .sdes-system-map .sdes-map-products>div { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:var(--size-14) var(--size-10) }
:where(.sdes-page) .sdes-system-map .sdes-map-products b { font-size:var(--size-14); line-height:var(--line-height-label); font-weight:var(--font-weight-bold) }
:where(.sdes-page) .sdes-system-map .sdes-map-products small { font:var(--size-10)/var(--line-height-1-7) var(--font-family-mono) }
:where(.sdes-page) .sdes-map-explainer { font:var(--size-10)/var(--line-height-1-7) var(--font-family-mono); color:var(--color-text-muted); margin:var(--size-20) 0 0 }
:where(.sdes-page) #kapsam .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-24) }
:where(.sdes-page) #kapsam .card { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); column-gap:var(--size-20); row-gap:0; align-content:start; align-items:start; padding:var(--size-28) }
:where(.sdes-page) #kapsam .card>.sdes-system-icon { grid-column:1; grid-row:1/3; margin:0 }
:where(.sdes-page) #kapsam .card>.card__title { grid-column:2; margin:0 0 var(--size-12) }
:where(.sdes-page) #kapsam .card>.card__description { grid-column:2 }
:where(.sdes-page) .sdes-lab-status { padding:var(--size-16) var(--size-18); border:var(--size-1) var(--border-style) var(--color-illustration-72998b); border-radius:var(--size-7); align-items:center }
:where(.sdes-page) .sdes-lab-updated { display:inline-flex; align-items:center; gap:var(--size-8); color:var(--color-illustration-e0eee5); font-size:var(--size-11); line-height:var(--line-height-1-7) }
:where(.sdes-page) .sdes-lab-updated:before { content:'✓'; display:grid; place-items:center; flex:none; width:var(--size-20); height:var(--size-20); border-radius:50%; background:var(--color-highlight); color:var(--color-heading); font-size:var(--size-12) }
:where(.sdes-page) .sdes-lab-surfaces .sdes-surface-label { font-size:var(--size-11); font-weight:var(--font-weight-medium); letter-spacing:var(--letter-spacing-08em) }
:where(.sdes-page) .sdes-system-why-grid { gap:var(--size-24) }
:where(.sdes-page) .sdes-why-item { border:0 }
:where(.sdes-page) .sdes-system-icon { display:inline-grid; place-items:center; padding:0; line-height:var(--line-height-art-1) }
:where(.sdes-page) .sdes-system-icon>svg { display:block; position:static; align-self:center; justify-self:center; margin:0 }
@media(max-width:800px) {
:where(.sdes-page) #kapsam .card-grid { grid-template-columns:1fr }
:where(.sdes-page) #kapsam .card { padding:var(--size-28) }
}
@media(max-width:520px) {
:where(.sdes-page) #kapsam .card { padding:var(--size-26); column-gap:var(--size-16) }
:where(.sdes-page) .sdes-system-map .sdes-map-token strong { font-size:var(--size-22) }
:where(.sdes-page) .sdes-system-map .sdes-map-libraries strong { font-size:var(--size-13) }
:where(.sdes-page) .sdes-system-map .sdes-map-libraries small { font-size:var(--size-9) }
:where(.sdes-page) .sdes-system-map .sdes-map-products small { font-size:var(--size-9) }
:where(.sdes-page) .sdes-system-map .sdes-map-products b { font-size:var(--size-12) }
:where(.sdes-page) .sdes-map-explainer { font-size:var(--size-9) }
:where(.sdes-page) .sdes-lab-status { display:grid; gap:var(--size-10); padding:var(--size-14) }
:where(.sdes-page) .sdes-lab-updated { font-size:var(--size-10) }
}
:where(.sdes-page) .sdes-component-lab { padding:var(--size-32); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-18); background:var(--color-surface-secondary); margin-top:var(--size-40); color:var(--color-heading) }
:where(.sdes-page) .sdes-component-lab__header { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--size-24); margin-bottom:var(--size-24) }
:where(.sdes-page) .sdes-component-lab__kicker { font:var(--size-10)/var(--line-height-1-6) var(--font-family-mono); letter-spacing:var(--letter-spacing-09em); color:var(--color-heading) }
:where(.sdes-page) .sdes-component-lab__header h3 { font:var(--font-weight-regular) var(--size-30)/var(--line-height-1-2) var(--font-family-display); color:var(--color-heading); letter-spacing:var(--letter-spacing-negative-025em); margin:var(--size-14) 0 var(--size-16); max-width:var(--size-700) }
:where(.sdes-page) .sdes-component-lab__header p { font-size:var(--size-15); line-height:var(--line-height-relaxed); color:var(--color-text-muted); max-width:var(--size-850); margin:0 }
:where(.sdes-page) .sdes-component-lab__play { font-size:var(--size-12); line-height:var(--line-height-label); padding:var(--size-10) var(--size-14); border:var(--size-1) var(--border-style) var(--color-illustration-739582); border-radius:var(--size-6); background:var(--color-surface); color:var(--color-heading); white-space:nowrap }
:where(.sdes-page) .sdes-component-lab__controls { display:flex; gap:var(--size-10); flex-wrap:wrap; margin-bottom:var(--size-28) }
:where(.sdes-page) .sdes-component-lab__controls button { display:flex; align-items:center; gap:var(--size-9); padding:var(--size-12) var(--size-16); min-height:var(--size-44); font-size:var(--size-13); line-height:var(--line-height-label); font-weight:var(--font-weight-medium); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-illustration-739582); border-radius:var(--size-6); color:var(--color-heading) }
:where(.sdes-page) .sdes-component-lab__controls button[aria-selected="true"] { background:var(--color-primary); border-color:var(--color-primary); color:var(--color-white) }
:where(.sdes-page) .sdes-component-lab__controls button>span { font:var(--size-10) var(--font-family-mono); opacity:.85 }
:where(.sdes-page) .sdes-component-lab__source { display:flex; align-items:center; justify-content:center; gap:var(--size-18); padding:var(--size-22) var(--size-24); border-radius:var(--size-10); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); max-width:var(--size-650); margin:0 auto var(--size-20); position:relative; min-height:var(--size-98) }
:where(.sdes-page) .sdes-component-lab__source:after { content:''; position:absolute; height:var(--size-21); bottom:var(--length-px-negative-21); left:50%; border-left:var(--size-1) var(--border-style) var(--color-illustration-739582) }
:where(.sdes-page) .sdes-component-lab__source-copy { min-width:0 }
:where(.sdes-page) .sdes-component-lab__source-copy>strong { display:block; font-size:var(--size-16); line-height:var(--line-height-label); color:var(--color-heading); font-weight:var(--font-weight-bold) }
:where(.sdes-page) .sdes-component-lab__source-copy>small { display:block; font-size:var(--size-12); line-height:var(--line-height-1-7); color:var(--color-text-muted); margin-top:var(--size-4) }
:where(.sdes-page) .sdes-component-lab__source .sdes-system-icon { margin:0; flex:0 0 var(--size-44) }
:where(.sdes-page) .sdes-shared-preview-button { display:inline-flex; align-items:center; justify-content:center; min-height:var(--size-44); padding:var(--size-10) var(--size-19); background:var(--color-primary); border:var(--size-1) var(--border-style) var(--color-primary); border-radius:var(--size-6); color:var(--color-white); font:var(--font-weight-medium) var(--size-13)/var(--line-height-1-5) var(--font-family-body); white-space:nowrap }
:where(.sdes-page) .sdes-component-lab__source>.sdes-shared-preview-button { margin-left:auto }
:where(.sdes-page) .sdes-component-lab__branches { height:var(--size-36); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-24); position:relative }
:where(.sdes-page) .sdes-component-lab__branches:before { content:''; position:absolute; left:calc((100% - var(--size-48))/6); right:calc((100% - var(--size-48))/6); top:0; border-top:var(--size-1) var(--border-style) var(--color-illustration-739582) }
:where(.sdes-page) .sdes-component-lab__branches i { display:block; justify-self:center; width:var(--size-1); height:var(--size-36); background:var(--color-illustration-739582) }
:where(.sdes-page) .sdes-component-lab__products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-24) }
:where(.sdes-page) .sdes-component-product { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:0; padding:var(--size-26); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-10); text-align:center }
:where(.sdes-page) .sdes-component-product h4 { font-size:var(--size-17); line-height:var(--line-height-art-1-4); font-weight:var(--font-weight-bold); margin:0 0 var(--size-18); color:var(--color-heading) }
:where(.sdes-page) .sdes-component-product>.sdes-shared-preview-button { min-width:var(--size-145) }
:where(.sdes-page) .sdes-component-product small { display:block; font-size:var(--size-11); line-height:var(--line-height-1-7); color:var(--color-text-muted); margin-top:var(--size-14) }
:where(.sdes-page) .sdes-component-lab__result { display:flex; align-items:flex-start; gap:var(--size-12); background:var(--color-primary); color:var(--color-illustration-e0eee5); border-radius:var(--size-8); padding:var(--size-18) var(--size-22); margin-top:var(--size-24) }
:where(.sdes-page) .sdes-component-lab__result:before { content:'✓'; flex:none; color:var(--color-highlight); font-size:var(--size-17); line-height:var(--line-height-1-7) }
:where(.sdes-page) .sdes-component-lab__result>span { font-size:var(--size-14); line-height:var(--line-height-relaxed) }
:where(.sdes-page) .sdes-component-lab__note { display:block; font:var(--size-10)/var(--line-height-1-65) var(--font-family-mono); color:var(--color-text-muted); margin-top:var(--size-16) }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-lab__branches { visibility:hidden }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-lab__source:after { display:none }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-lab__source { border-style:dashed }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-lab__source>.sdes-shared-preview-button { display:inline-flex; background:var(--color-surface-secondary); border-color:var(--color-illustration-739582); border-style:dashed; color:var(--color-text) }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-product:nth-child(1)>.sdes-shared-preview-button { background:var(--color-surface); border-color:var(--color-accent); color:var(--color-heading); border-radius:var(--size-26); font-size:var(--size-13) }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-product:nth-child(2)>.sdes-shared-preview-button { background:var(--color-surface-accent); border-color:var(--color-illustration-739582); color:var(--color-heading); border-radius:0; font-size:var(--size-11); font-weight:var(--font-weight-bold) }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-product:nth-child(3)>.sdes-shared-preview-button { background:var(--color-accent); border-color:var(--color-accent); border-radius:var(--size-12); font-size:var(--size-14) }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-lab__result { background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); color:var(--color-text) }
:where(.sdes-page) .sdes-component-lab[data-state="separate"] .sdes-component-lab__result:before { content:'!'; color:var(--color-heading); font-weight:var(--font-weight-bold) }
/* Keep the header-to-body rule visible in the highlighted column. */
:where(.sdes-page) .sdes-compare-table thead th { border-bottom:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdes-page) .sdes-compare-table thead th.is-ours { border-bottom:var(--size-2) var(--border-style) var(--color-border) }
:where(.sdes-page) .sdes-compare-table tbody td.is-ours { border-bottom:var(--size-1) var(--border-style) var(--color-border) }
:where(.sdes-page) .sdes-compare-table tbody tr:last-child td.is-ours { border-bottom:0 }
/* Separate scope and methodology with a clear background transition. */
:where(.sdes-page) #surec .sdes-process__step { background:var(--color-background) }
/* Three inputs merge, rather than a single stem from the middle input. */
:where(.sdes-page) .sdes-discovery-join { height:var(--size-38); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--size-10); position:relative }
:where(.sdes-page) .sdes-discovery-join>i { display:block; height:var(--size-19); width:var(--size-1); background:var(--color-illustration-739582); justify-self:center }
:where(.sdes-page) .sdes-discovery-join:before { content:''; position:absolute; left:calc((100% - var(--size-20))/6); right:calc((100% - var(--size-20))/6); top:var(--size-18); border-top:var(--size-1) var(--border-style) var(--color-illustration-739582) }
:where(.sdes-page) .sdes-discovery-join:after { content:''; position:absolute; top:var(--size-18); bottom:0; left:50%; border-left:var(--size-1) var(--border-style) var(--color-illustration-739582) }
:where(.sdes-page) .sdes-discovery-result { margin-top:0 }
:where(.sdes-page) .sdes-discovery-result:before { content:none }
:where(.sdes-page) .sdes-discovery-caption { font-size:var(--size-12); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:var(--size-18) 0 0 }
/* FAQ: plain questions, separators and no background switch on expansion. */
:where(.sdes-page) #sss .accordion { display:block; gap:0; margin-bottom:var(--size-32) }
:where(.sdes-page) #sss .sdes-accordion__item { padding:0; background:transparent; border:0; border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:0; overflow:visible; box-shadow:none }
:where(.sdes-page) #sss .sdes-accordion__item[open] { padding:0; background:transparent; border:0; border-bottom:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:0; overflow:visible; box-shadow:none }
:where(.sdes-page) #sss .sdes-accordion__item summary { padding:var(--size-22) 0; font:var(--font-weight-medium) var(--size-16)/var(--line-height-1-6) var(--font-family-body); color:var(--color-heading) }
:where(.sdes-page) #sss .sdes-accordion__panel { background:transparent; padding:0 var(--size-25) var(--size-22) 0 }
/* The state example sits beside the copy, on a white high-contrast surface. */
:where(.sdes-page) #baslayalim>.container { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:7%; align-items:center }
:where(.sdes-page) #baslayalim .sdes-split--cta { min-width:0; max-width:none }
:where(.sdes-page) #baslayalim h2 { font-size:var(--font-size-section-sm); line-height:var(--line-height-display); max-width:var(--size-780) }
:where(.sdes-page) #baslayalim p { font-size:var(--size-16); line-height:var(--line-height-relaxed); color:var(--color-illustration-e0eee5) }
:where(.sdes-page) #baslayalim .sdes-state-strip { width:100%; max-width:none; min-width:0; margin:0; padding:var(--size-28); background:var(--color-surface); border:var(--size-1) var(--border-style) var(--color-border-strong); border-radius:var(--size-14); box-shadow:none }
:where(.sdes-page) #baslayalim .sdes-state-strip>figcaption { font:var(--font-weight-medium) var(--size-11)/var(--line-height-1-7) var(--font-family-mono); letter-spacing:var(--letter-spacing-05em); color:var(--color-heading); margin-bottom:var(--size-22) }
:where(.sdes-page) #baslayalim .sdes-state-strip>div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--size-22) var(--size-18) }
:where(.sdes-page) #baslayalim .sdes-state-strip span { min-height:var(--size-46); padding:var(--size-12) var(--size-8); border-radius:var(--size-6); background:var(--color-primary); color:var(--color-white); font:var(--font-weight-medium) var(--size-12)/var(--line-height-1-5) var(--font-family-body) }
:where(.sdes-page) #baslayalim .sdes-state-strip .sdes-state-focus { background:var(--color-primary); color:var(--color-white); outline:var(--size-2) var(--border-style) var(--color-accent); outline-offset:var(--size-3) }
:where(.sdes-page) #baslayalim .sdes-state-strip .sdes-state-loading { background:var(--color-surface-secondary); color:var(--color-text); border:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdes-page) #baslayalim .sdes-state-strip .sdes-state-disabled { background:var(--color-surface-secondary); color:var(--color-text-muted); border:var(--size-1) var(--border-style) var(--color-border-strong) }
:where(.sdes-page) #baslayalim .sdes-state-explainer { font-size:var(--size-12); line-height:var(--line-height-relaxed); color:var(--color-text-muted); margin:var(--size-22) 0 0 }
@media(max-width:1100px) {
:where(.sdes-page) #baslayalim>.container { gap:5%; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) }
:where(.sdes-page) .sdes-component-product { padding:var(--size-24) var(--size-18) }
:where(.sdes-page) .sdes-component-product>.sdes-shared-preview-button { min-width:var(--size-130) }
}
@media(max-width:800px) {
:where(.sdes-page) .sdes-component-lab { padding:var(--size-28) }
:where(.sdes-page) .sdes-component-lab__source { max-width:100%; padding:var(--size-22) }
:where(.sdes-page) .sdes-component-lab__products { grid-template-columns:1fr; gap:var(--size-16) }
:where(.sdes-page) .sdes-component-lab__branches { display:none }
:where(.sdes-page) .sdes-component-lab__source:after { display:none }
:where(.sdes-page) .sdes-component-product { display:grid; grid-template-columns:1fr auto; gap:var(--size-10) var(--size-20); align-items:center; text-align:left }
:where(.sdes-page) .sdes-component-product h4 { margin:0; font-size:var(--size-16) }
:where(.sdes-page) .sdes-component-product>.sdes-shared-preview-button { grid-column:2; grid-row:1/3; min-width:var(--size-140) }
:where(.sdes-page) .sdes-component-product small { margin:0; grid-column:1; grid-row:2 }
:where(.sdes-page) #baslayalim>.container { grid-template-columns:1fr; gap:var(--size-38) }
:where(.sdes-page) #baslayalim .sdes-state-strip { max-width:var(--size-520); justify-self:start }
:where(.sdes-page) #baslayalim h2 { max-width:var(--size-900) }
}
@media(max-width:520px) {
:where(.sdes-page) .sdes-component-lab { padding:var(--size-25) var(--size-18) }
:where(.sdes-page) .sdes-component-lab__header { display:block }
:where(.sdes-page) .sdes-component-lab__header h3 { font-size:var(--size-27) }
:where(.sdes-page) .sdes-component-lab__play { margin-top:var(--size-20); font-size:var(--size-11) }
:where(.sdes-page) .sdes-component-lab__controls { gap:var(--size-8) }
:where(.sdes-page) .sdes-component-lab__controls button { font-size:var(--size-11); padding:var(--size-10) var(--size-12); min-height:var(--size-42) }
:where(.sdes-page) .sdes-component-lab__source { display:grid; grid-template-columns:var(--size-44) minmax(0,1fr); padding:var(--size-20) var(--size-18); gap:var(--size-14) }
:where(.sdes-page) .sdes-component-lab__source>.sdes-shared-preview-button { grid-column:1/-1; margin:0; justify-self:stretch }
:where(.sdes-page) .sdes-component-lab__source-copy>strong { font-size:var(--size-15) }
:where(.sdes-page) .sdes-component-lab__source-copy>small { font-size:var(--size-11) }
:where(.sdes-page) .sdes-component-product { padding:var(--size-22) var(--size-16); gap:var(--size-9) var(--size-14) }
:where(.sdes-page) .sdes-component-product h4 { font-size:var(--size-15) }
:where(.sdes-page) .sdes-component-product>.sdes-shared-preview-button { min-width:var(--size-107); padding:var(--size-10); font-size:var(--size-11) }
:where(.sdes-page) .sdes-component-product small { font-size:var(--size-10) }
:where(.sdes-page) .sdes-component-lab__result { padding:var(--size-16) }
:where(.sdes-page) .sdes-component-lab__result>span { font-size:var(--size-13) }
:where(.sdes-page) .sdes-component-lab__note { font-size:var(--size-9) }
:where(.sdes-page) .sdes-discovery-join { gap:var(--size-8) }
:where(.sdes-page) .sdes-discovery-join:before { left:calc((100% - var(--size-16))/6); right:calc((100% - var(--size-16))/6) }
:where(.sdes-page) .sdes-discovery-caption { font-size:var(--size-11) }
:where(.sdes-page) #sss .sdes-accordion__item summary { font-size:var(--size-15) }
:where(.sdes-page) #baslayalim h2 { font-size:var(--size-34) }
:where(.sdes-page) #baslayalim .sdes-state-strip { padding:var(--size-26) var(--size-23) }
:where(.sdes-page) #baslayalim .sdes-state-strip>figcaption { font-size:var(--size-10) }
:where(.sdes-page) #baslayalim .sdes-state-strip>div { gap:var(--size-22) var(--size-16) }
:where(.sdes-page) #baslayalim .sdes-state-strip span { font-size:var(--size-11) }
}
:where(.sdes-page) .feature-grid { border: none; overflow: visible; }