/* Documentation presentation. Product component CSS lives in components.css. */
* { box-sizing:border-box; }
:root { color-scheme:dark; }
body { margin:0; background:#181818; color:#f0f0f0; font:14px/1.6 var(--ap-font-sans); -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; }
button { cursor:pointer; }
:is(a,button,input,select,summary):focus-visible { outline:2px solid #adadad; outline-offset:4px; }
code,pre { font-family:var(--ap-font-mono); }
.ds-skip { position:fixed; top:-100px; left:20px; padding:12px; background:#eee; color:#181818; z-index:300; }
.ds-skip:focus { top:12px; }
/* @sidebar — rail at 761px and up, drawer under a bar at 760px and down. Grid: pill 12 / ink 24 / text 52 / trailing W-24. Rhythm 4px. Behaviour: nav.js. Registry: nav-model.js. */
@property --nav-fade-top { syntax:'<length>'; inherits:false; initial-value:0px; }
@property --nav-fade-bottom { syntax:'<length>'; inherits:false; initial-value:0px; }
:root { --ds-nav-w:232px; --ds-bar-h:0px; scroll-padding-top:var(--ds-bar-h); } /* jumps and focus land below the phone bar */
.ds-content { margin-left:var(--ds-nav-w); }
.ds-sidebar { --nav-bg:var(--ap-color-page); --nav-hover:#202020; --nav-current:#262626; --nav-press:#2a2a2a; --nav-row:32px; --nav-line:16px; --nav-gap:4px; --nav-label-top:20px; --nav-head-top:24px; --nav-head-bottom:20px; --nav-end:16px; --nav-leave-delay:60ms;
  position:fixed; inset:0 auto 0 0; z-index:20; width:var(--ds-nav-w); display:flex; flex-direction:column; background:var(--nav-bg);
  transition:transform var(--ap-duration-enter) var(--ap-ease-enter), opacity var(--ap-duration-enter) linear, visibility 0s; }
.ds-nav-head { position:relative; flex:none; padding:var(--nav-head-top) 24px var(--nav-head-bottom); }
.ds-brand { position:relative; display:flex; width:fit-content; align-items:center; gap:8px; height:24px; border-radius:6px; color:var(--ap-color-text); font:500 20px/24px var(--ap-font-sans); letter-spacing:-.035em; }
.ds-brand::after { content:''; position:absolute; inset:-10px -8px; }
.ds-brand img { display:block; position:relative; top:1px; }
.ds-brand-word>span { font-weight:300; color:var(--ap-color-muted); }
.ds-nav-desc { display:flex; justify-content:space-between; align-items:baseline; height:16px; margin:4px 0 0 28px; font:400 11px/16px var(--ap-font-sans); letter-spacing:.01em; color:var(--ap-color-soft); }
.ds-nav-version,.ds-nav-count { font:400 10px/16px var(--ap-font-mono); font-variant-numeric:tabular-nums; letter-spacing:0; }
.ds-nav { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; padding:8px 0 var(--nav-end); scroll-padding-block:28px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-top,0px),#000 calc(100% - var(--nav-fade-bottom,0px)),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--nav-fade-top,0px),#000 calc(100% - var(--nav-fade-bottom,0px)),transparent 100%);
  transition:--nav-fade-top var(--ap-duration-feedback), --nav-fade-bottom var(--ap-duration-feedback); }
.ds-nav::-webkit-scrollbar { display:none; }
.ds-nav[data-clip~='top'] { --nav-fade-top:24px; }
.ds-nav[data-clip~='bottom'] { --nav-fade-bottom:24px; }
.ds-nav-track { position:relative; } /* ul and li stay unpositioned, so the pills measure against the track */
.ds-nav ul { display:grid; row-gap:var(--nav-gap); margin:0; padding:0; list-style:none; }
.ds-nav-label { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:baseline; height:16px; margin:var(--nav-label-top) 24px 8px; font:500 11px/16px var(--ap-font-sans); letter-spacing:.01em; color:var(--ap-color-soft); }
:is(.ds-nav,.ds-nav-foot) a { position:relative; z-index:1; display:flex; align-items:center; gap:14px; min-height:var(--nav-row); margin:0 12px; padding:calc((var(--nav-row) - var(--nav-line)) / 2) 12px calc((var(--nav-row) - var(--nav-line)) / 2) 10px; border-radius:8px; color:var(--ap-color-muted); font:400 13px/var(--nav-line) var(--ap-font-sans); -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:color var(--ap-duration-feedback), background-color var(--ap-duration-press); }
:is(.ds-nav,.ds-nav-foot) a::before { content:''; position:absolute; inset:-2px 0; } /* targets tile with no dead gaps */
.ds-nav-ico { flex:none; width:16px; height:16px; color:var(--ap-color-soft); transition:color var(--ap-duration-feedback); }
.ds-nav-ico>svg { display:block; }
.ds-nav-text { min-width:0; overflow-wrap:anywhere; }
:is(.ds-nav,.ds-nav-foot) a:focus-visible, .ds-nav a[aria-current='page'] { color:var(--ap-color-text); }
:is(.ds-nav,.ds-nav-foot) a:focus-visible .ds-nav-ico, .ds-nav a[aria-current='page'] .ds-nav-ico { color:var(--ap-color-text); }
.ds-nav a[aria-current='page'] { font-weight:500; }
.ds-nav:not([data-glide]) a[aria-current='page'] { background:var(--nav-current); }
.ds-nav:not([data-glide]) a[aria-current='page']::after { content:''; position:absolute; left:-12px; top:50%; width:2px; height:16px; margin-top:-8px; border-radius:0 2px 2px 0; background:var(--ap-color-action); }
.ds-nav-glide { position:absolute; z-index:0; top:0; left:12px; right:12px; height:var(--h,var(--nav-row)); border-radius:8px; pointer-events:none; transform:translateY(var(--y,0px)); }
.ds-nav-glide[data-kind='hover'] { background:var(--nav-hover); opacity:0; transition:transform var(--ap-duration-feedback) var(--ap-ease-feedback), opacity var(--ap-duration-feedback) var(--ap-ease-feedback) var(--nav-leave-delay), background-color var(--ap-duration-press); }
.ds-nav-glide[data-kind='hover'][data-on] { opacity:1; transition-delay:0s; }
.ds-nav-glide[data-kind='current'] { background:var(--nav-current); transition:transform var(--glide,var(--ap-duration-enter)) var(--ap-ease-enter); }
.ds-nav-glide[data-kind='current']::before { content:''; position:absolute; left:-12px; top:50%; width:2px; height:16px; margin-top:-8px; border-radius:0 2px 2px 0; background:var(--ap-color-action); }
.ds-nav-glide[data-snap] { transition:none; }
.ds-nav[data-pressing] .ds-nav-glide[data-kind='hover'] { background:var(--nav-press); }
.ds-nav-foot { flex:none; padding:8px 0 12px; }
.ds-nav-foot a { transition:color var(--ap-duration-feedback), background-color var(--ap-duration-feedback); }
.ds-sidebar :is(a,button):focus-visible, .ds-navbar :is(a,button):focus-visible { outline:2px solid var(--ap-color-action); outline-offset:-2px; }
.ds-sidebar .ds-brand:focus-visible { outline-offset:4px; }
.ds-navbar,.ds-nav-scrim,.ds-nav-close { display:none; }
.ds-navbar-menu,.ds-nav-close,.ds-navbar-home { place-items:center; flex:none; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:none; color:var(--ap-color-muted); -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:background-color var(--ap-duration-feedback), color var(--ap-duration-feedback); }
.ds-nav-close:active, .ds-navbar :is(a,button):active, .ds-nav-foot a:active { background:var(--nav-press,#2a2a2a); color:var(--ap-color-text); transition-duration:var(--ap-duration-press); }
.ds-nav-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ds-immersive.ds-nav-collapsed .ds-sidebar { opacity:0; transform:translateX(-16px); visibility:hidden; transition:transform var(--ap-duration-feedback) var(--ap-ease-feedback), opacity var(--ap-duration-feedback) linear, visibility 0s linear var(--ap-duration-feedback); }
.ds-immersive.ds-nav-collapsed .ds-content { margin-left:0; padding-left:10px; }
@media(hover:hover) {
  :is(.ds-nav,.ds-nav-foot) a:hover, :is(.ds-nav,.ds-nav-foot) a:hover .ds-nav-ico { color:var(--ap-color-text); }
  .ds-nav:not([data-glide]) a:hover, .ds-nav-foot a:hover { background:var(--nav-hover); }
  .ds-nav-close:hover, .ds-navbar :is(a,button):hover { background:var(--nav-hover,#202020); color:var(--ap-color-text); }
}
@media(hover:none) { :is(.ds-nav,.ds-nav-foot) a:active { background:var(--nav-press); color:var(--ap-color-text); } }
@media(max-width:1050px) { :root { --ds-nav-w:205px; } }
@media(max-height:819px) and (pointer:fine) and (min-width:761px) { .ds-sidebar { --nav-row:28px; --nav-label-top:16px; --nav-head-top:20px; --nav-head-bottom:16px; --nav-end:12px; } }
@media(max-height:480px) { .ds-nav-desc { display:none; } .ds-sidebar { --nav-head-top:16px; --nav-head-bottom:12px; } }
@media(pointer:coarse) { .ds-sidebar { --nav-row:40px; --nav-line:20px; } :is(.ds-nav,.ds-nav-foot) a { font-size:14px; } }
@media(max-width:760px) {
  :root { --ds-nav-w:0px; --ds-bar-h:52px; }
  /* Without the script: a plain list in the flow, labels visible, nothing masked. */
  body:not(.ds-gallery) .ds-sidebar { position:static; width:auto; }
  body:not(.ds-gallery) .ds-nav { overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .ds-gallery .ds-navbar { position:sticky; top:0; z-index:30; display:flex; align-items:center; height:var(--ds-bar-h); padding:0 6px 0 8px; background:var(--ap-color-page); transition:box-shadow var(--ap-duration-feedback); }
  .ds-gallery .ds-navbar[data-scrolled] { box-shadow:0 10px 24px -12px #000a; }
  .ds-gallery .ds-navbar-home,.ds-gallery .ds-navbar-menu { display:grid; }
  .ds-navbar-title { flex:1; min-width:0; display:flex; align-items:baseline; gap:8px; margin:0 8px 0 4px; }
  .ds-navbar-group { flex:none; font:400 12px/16px var(--ap-font-sans); color:var(--ap-color-soft); }
  .ds-navbar-page { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:500 14px/20px var(--ap-font-sans); color:var(--ap-color-text); }
  /* The same element, as a floating sheet. Closed: out of reach and out of sight. */
  .ds-gallery .ds-sidebar { --nav-bg:#1c1c1c; --nav-hover:#242424; --nav-current:#2a2a2a; --nav-press:#2e2e2e; --nav-row:40px; --nav-line:20px; --ds-nav-w:min(296px,calc(100vw - 54px));
    inset:6px auto 6px 6px; z-index:50; border-radius:16px; overflow:hidden; box-shadow:var(--ap-shadow-overlay); visibility:hidden; opacity:0; transform:translateX(-16px); transition:none; }
  html[data-nav-ready] .ds-gallery .ds-sidebar { transition:transform var(--ap-duration-feedback) var(--ap-ease-feedback), opacity var(--ap-duration-feedback) linear, visibility 0s linear var(--ap-duration-feedback); }
  .ds-gallery :is(.ds-nav,.ds-nav-foot) a { font-size:14px; }
  html[data-nav-open] { overflow:hidden; }
  html[data-nav-open] .ds-gallery .ds-sidebar { visibility:visible; opacity:1; transform:none; transition:transform var(--ap-duration-enter) var(--ap-ease-enter), opacity var(--ap-duration-enter) linear, visibility 0s; }
  .ds-gallery .ds-nav-scrim { display:block; position:fixed; inset:0; z-index:40; background:#00000080; touch-action:none; opacity:0; visibility:hidden; }
  html[data-nav-ready] .ds-gallery .ds-nav-scrim { transition:opacity var(--ap-duration-feedback) linear, visibility 0s linear var(--ap-duration-feedback); }
  html[data-nav-open] .ds-nav-scrim { opacity:1; visibility:visible; transition:opacity var(--ap-duration-enter) linear, visibility 0s; }
  .ds-gallery .ds-nav-close { display:grid; position:absolute; right:12px; top:20px; width:32px; height:32px; border-radius:10px; } /* centred on the brand line; its tile ends above the version */
  .ds-gallery .ds-nav-close::after { content:''; position:absolute; inset:-6px; } /* still a 44px target */
  /* Studio stages give the bar its height back. The stage title stays the page's h1, so it is clipped, never removed. */
  .ds-gallery.ds-immersive .ds-content { height:calc(100dvh - var(--ds-bar-h)); margin:0; padding:0 6px 6px; }
  .ds-gallery .ds-studio-toolbar [data-nav-toggle] { display:none; } /* one menu button per screen: the bar owns it here */
}
@media(max-width:760px) and (max-height:480px) { :root { --ds-bar-h:44px; } .ds-gallery .ds-nav-close { top:12px; } }
@media(forced-colors:active) {
  .ds-nav-glide { display:none; }
  .ds-nav a[aria-current='page'] { background:Highlight; color:HighlightText; forced-color-adjust:none; }
  .ds-nav a[aria-current='page'] .ds-nav-ico { color:HighlightText; }
  .ds-sidebar :is(a,button):focus-visible,.ds-navbar :is(a,button):focus-visible { outline-color:CanvasText; }
  .ds-nav { -webkit-mask-image:none; mask-image:none; }
  .ds-sidebar { border-inline-end:1px solid CanvasText; }
  .ds-navbar { border-bottom:1px solid CanvasText; }
  .ds-nav-scrim { forced-color-adjust:none; }
}
@media(prefers-contrast:more) {
  :is(.ds-nav,.ds-nav-foot) a { color:var(--ap-color-text); }
  .ds-nav-label,.ds-nav-desc,.ds-nav-ico,.ds-navbar-group { color:var(--ap-color-muted); }
  .ds-sidebar { --nav-current:#303030; }
}
@media(max-width:760px) and (prefers-contrast:more) { .ds-gallery .ds-sidebar { --nav-current:#343434; } }
@media(prefers-reduced-motion:reduce) { .ds-sidebar,.ds-nav,:is(.ds-nav,.ds-nav-foot) a,.ds-nav-ico,.ds-nav-glide,.ds-nav-scrim,.ds-navbar,.ds-navbar-home,.ds-navbar-menu,.ds-nav-close { transition:none!important; } }
@media print { .ds-sidebar,.ds-navbar,.ds-nav-scrim,.ds-gallery .ds-navbar,.ds-gallery .ds-nav-scrim { display:none; } .ds-content { margin:0; } }
/* @end sidebar */
.ds-topbar { display:flex; align-items:center; justify-content:space-between; min-height:72px; padding:0 44px; border-bottom:0; gap:20px; }
.ds-top-home { font-size:12px; color:#c1c1c1; }
.ds-top-actions { display:flex; align-items:center; gap:24px; }
.ds-export { display:inline-flex; align-items:center; gap:9px; min-height:34px; padding:7px 12px; border:0; border-radius:7px; background:#1a1a1a; color:#d6d6d6; font-size:11px; }
.ds-export:hover {  background:#212121; }
.ds-main { max-width:1220px; margin:0 auto; padding:50px clamp(28px,4.2vw,68px) 0; min-height:calc(100vh - 72px); }
.ds-main:focus { outline:none; } /* focus lands here after a route change on phones; the page itself is the cue */
.ds-section,.ds-overview { padding:0; scroll-margin-top:20px; }
.ds-section-heading { margin:0 0 32px; }
.ds-section-heading h2,.ds-overview h1 { margin:0 0 12px; font-size:clamp(36px,4vw,52px); font-weight:500; letter-spacing:-2px; line-height:1.1; }
.ds-section-heading p,.ds-lead { color:#969696; font-size:13px; margin:0; line-height:1.8; max-width:60ch; }
.ds-overview .ds-code-fold { margin:20px 0; }
.ds-workbench { border:0; border-radius:15px; background:#131313; overflow:visible; margin-bottom:18px; }
.ds-workbench-label { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 22px; color:#9d9d9d; font-size:10px; }
.ds-workbench-label>span:first-child { display:flex; align-items:center; gap:8px; color:#cdcdcd; }
.ds-workbench-label>span:last-child { color:#6e6e6e; }
.ds-live-dot { width:5px; height:5px; border-radius:50%; background:#b8b8b8; }
.ds-example { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; min-height:300px; padding:45px; background:transparent; }
.ds-example[data-example='card'] { min-height:300px; padding:32px; }
.ds-example[data-example='input'] { min-height:300px; }
.ds-controls { display:flex; justify-content:center; gap:22px; padding:18px 22px; border-top:0; flex-wrap:wrap; }
.ds-controls label { display:flex; align-items:center; gap:9px; color:#8a8a8a; font-size:10px; }
.ds-controls select { border:0; border-radius:6px; background:#1d1d1d; padding:7px 9px; color:#d5d5d5; font-size:11px; min-height:33px; }
.ds-token-strip { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:17px 22px; border-top:0; }
.ds-token-strip-label { color:#6d6d6d; font-size:10px; margin-right:5px; }
.ds-token-chip { position:relative; display:inline-flex; border:0; background:#1a1a1a; color:#a5a5a5; padding:5px 8px; font:10px/1.5 var(--ap-font-mono); border-radius:5px; }
.ds-token-chip:hover,.ds-token-chip:focus-visible { color:#d8d8d8;  }
.ds-token-tooltip { position:absolute; z-index:50; left:50%; bottom:calc(100% + 9px); transform:translate(-50%,4px); display:block; width:max-content; max-width:min(310px,80vw); padding:11px 14px; border:0; border-radius:9px; background:#242424; box-shadow:0 10px 30px #0005; color:#dddddd; text-align:left; font:10px/1.6 var(--ap-font-mono); opacity:0; visibility:hidden; pointer-events:none; overflow-wrap:anywhere; transition:opacity .15s,transform .15s; }
.ds-token-tooltip em { display:block; margin-top:3px; font:10px/1.5 var(--ap-font-sans); color:#a5a5a5; white-space:normal; }
:is(.ds-token-chip,.ds-swatch):hover .ds-token-tooltip,:is(.ds-token-chip,.ds-swatch):focus-visible .ds-token-tooltip { visibility:visible; opacity:1; transform:translate(-50%,0); }
.ds-hide-tooltips .ds-token-tooltip { visibility:hidden!important; opacity:0!important; }
.ds-code-fold { margin:0; }
.ds-code-fold>summary,.ds-info-fold>summary { display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; cursor:pointer; color:#b8b8b8; padding:18px 22px; font-size:12px; }
.ds-code-fold>summary::-webkit-details-marker,.ds-info-fold>summary::-webkit-details-marker { display:none; }
.ds-code-fold>summary { border-top:0; border-radius:0 0 15px 15px; }
.ds-code-fold>summary:hover,.ds-info-fold>summary:hover { background:#ffffff03; color:#dadada; }
.ds-code-mark { display:inline-block; font:12px var(--ap-font-mono); color:#888888; margin-right:10px; }
.ds-chevron { color:#787878; font-size:17px; font-weight:300; transition:transform .18s; }
[open]>.ds-chevron,[open]>summary>.ds-chevron { transform:rotate(45deg); }
.ds-code-fold[open]>summary { border-radius:0; }
.ds-source { border-top:0; padding-bottom:6px; border-radius:0 0 15px 15px; overflow:hidden; }
.ds-source-bar { display:flex; align-items:center; justify-content:space-between; padding:12px 18px 2px; gap:15px; }
.ds-code-tabs { display:flex; gap:4px; }
.ds-code-tabs button,.ds-copy { min-height:29px; padding:5px 9px; background:none; border:0; border-radius:5px; color:#838383; font-size:10px; }
.ds-code-tabs button[aria-pressed=true] { color:#c9c9c9; background:#8d8d8d13; }
.ds-copy { color:#a8a8a8; border:0; }
.ds-copy:hover { color:#e0e0e0; background:#ffffff06; }
.ds-source-caption { margin:0; padding:8px 22px 0; font-size:10px; color:#6e6e6e; }
.ds-code { margin:0; padding:18px 22px 22px; max-height:420px; overflow:auto; color:#b7b7b7; font-size:11px; line-height:1.9; tab-size:2; scrollbar-color:#343434 transparent; scrollbar-width:thin; }
.ds-code:focus-visible { outline-offset:-4px; }
.ds-info-fold { margin-top:12px; border:0; border-radius:10px; }
.ds-info-fold>summary { padding:17px 19px; color:#8a8a8a; font-size:11px; }
.ds-info-fold>summary .ds-chevron { font-size:15px; }
.ds-info-fold>.ds-table-wrap,.ds-info-fold>.ds-notes,.ds-info-fold>.ds-rules { padding:0 20px 20px; }
.ds-info-fold[open]>summary { color:#c7c7c7; }
.ds-table-wrap { overflow:auto; }
.ds-table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }
.ds-table th { color:#b3b3b3; font-weight:500; }
.ds-table td,.ds-table th { padding:12px; vertical-align:top; border-bottom:0; }
.ds-table td { color:#949494; line-height:1.9; }
.ds-table td:first-child { color:#bcbcbc; min-width:120px; }
.ds-table tr:last-child td { border-bottom:0; }
.ds-table code,.ds-notes code { font-size:10px; color:#bfbfbf; overflow-wrap:anywhere; }
.ds-notes { color:#989898; font-size:12px; line-height:1.9; }
.ds-notes p { margin:10px 0; }
.ds-notes ul { padding-left:20px; }
.ds-callout { padding:15px; background:#ffffff03; border-radius:8px; font-size:12px; }
.ds-callout strong { color:#c3c3c3; font-weight:500; }
.ds-rules { display:grid; grid-template-columns:1fr 1fr; gap:28px; color:#969696; font-size:12px; line-height:1.9; }
.ds-rules h3 { font-weight:500; color:#c1c1c1; font-size:12px; margin:14px 0; }
.ds-rules ul { padding-left:17px; }
.ds-rules li+li { margin-top:9px; }
.ds-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 20px; margin:36px 0; }
.ds-swatch { display:block; position:relative; background:none; border:0; color:#dcdcdc; padding:0; min-width:0; text-align:left; }
.ds-swatch-color { position:relative; display:block; height:142px; border-radius:12px; border:0; transition:transform .18s var(--ap-ease-feedback),box-shadow .18s; }
.ds-swatch:hover .ds-swatch-color { transform:translateY(-3px); box-shadow:0 8px 30px #0003; }
.ds-swatch-meta { display:flex; justify-content:space-between; align-items:baseline; gap:5px; padding:11px 1px 0; }
.ds-swatch-meta b { font-size:12px; font-weight:400; }
.ds-swatch-meta small { font:9px var(--ap-font-mono); color:#7d7d7d; }
.ds-copy-glyph { position:absolute; top:10px; right:10px; display:grid; place-items:center; width:26px; height:26px; background:#0008; color:#eee; border:0; border-radius:6px; opacity:0; transition:opacity .18s; font-size:18px; }
.ds-swatch:hover .ds-copy-glyph,.ds-swatch:focus-visible .ds-copy-glyph { opacity:1; }
.ds-swatch .ds-token-tooltip { bottom:calc(100% + 8px); }
.ds-swatch:nth-child(4n+1) .ds-token-tooltip { left:0; transform:translate(0,4px); }
.ds-swatch:nth-child(4n) .ds-token-tooltip { left:auto; right:0; transform:translate(0,4px); }
.ds-swatch:nth-child(4n+1):hover .ds-token-tooltip,.ds-swatch:nth-child(4n+1):focus-visible .ds-token-tooltip,.ds-swatch:nth-child(4n):hover .ds-token-tooltip,.ds-swatch:nth-child(4n):focus-visible .ds-token-tooltip { transform:translate(0,0); }
#colors>.ds-info-fold { margin-top:20px; }
#colors>.ds-workbench { margin-top:12px; background:transparent;  border-radius:10px; }
#colors>.ds-workbench>.ds-code-fold>summary { border-top:0; border-radius:10px; }
.ds-type-row { display:grid; grid-template-columns:180px 1fr; gap:22px; align-items:center; padding:28px 0; border-bottom:0; }
.ds-type-row>div { color:#808080; font-size:11px; line-height:1.8; }
.ds-type-row code { font-size:10px; color:#a7a7a7; }
.ds-type-row p { margin:0; }
.ds-type-display { font-size:var(--ap-type-display); line-height:1.2; }
.ds-type-heading { font-size:var(--ap-type-heading); line-height:1.3; }
.ds-type-body { font-size:var(--ap-type-body); line-height:1.7; }
.ds-type-label { font-size:var(--ap-type-label); line-height:1.5; }
.ds-field-preview { width:min(100%,360px); }
.ds-field-preview .ap-field+.ap-field { margin-top:22px; }
.ds-inline-form { display:flex; gap:10px; }
.ds-inline-form>.ap-button { flex:none; }
.ds-doc-example { display:flex; align-items:center; justify-content:space-between; width:min(100%,300px); gap:20px; }
.ds-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; gap:16px; }
.ds-footer { display:flex; justify-content:space-between; gap:20px; color:#5b5b5b; font-size:10px; padding:34px 0; margin-top:25px; }
@media(min-width:1450px) { .ds-main { padding-top:62px; } .ds-swatch-color { height:175px; } .ds-example { min-height:365px; } }
@media(max-width:1050px) { .ds-main { padding-inline:30px; } .ds-topbar { padding-inline:30px; } .ds-swatches { gap:22px 14px; } .ds-swatch-meta { flex-wrap:wrap; } .ds-swatch-color { height:128px; } .ds-token-strip { gap:6px; } .ds-token-chip { font-size:9px; } .ds-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ds-card-grid>.ap-card:last-child { grid-column:1 / -1; } }
@media(max-width:760px) { .ds-topbar { min-height:52px; padding:0 20px; justify-content:flex-end; } .ds-top-home { display:none; } .ds-main { padding:32px 20px 0; } .ds-section-heading h2,.ds-overview h1 { font-size:38px; letter-spacing:-1.4px; } .ds-section-heading { margin-bottom:24px; } .ds-section-heading p { font-size:12px; } .ds-swatches { margin:26px 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px 15px; } .ds-swatch-color { height:132px; } .ds-swatch-meta { flex-wrap:nowrap; } .ds-swatch-meta b { font-size:12px; } .ds-swatch:nth-child(2n+1) .ds-token-tooltip { left:0; right:auto; transform:translate(0,0); } .ds-swatch:nth-child(2n) .ds-token-tooltip { right:0; left:auto; transform:translate(0,0); } .ds-copy-glyph { opacity:.6; } .ds-example { min-height:245px; padding:28px 22px; } .ds-controls { justify-content:flex-start; gap:10px 15px; padding:17px; } .ds-controls label { flex:1 1 100%; justify-content:space-between; } .ds-controls select { min-width:150px; } .ds-token-strip { padding:16px; gap:8px; } .ds-token-chip { font-size:9px; } .ds-token-chip .ds-token-tooltip { max-width:220px; } .ds-token-strip .ds-token-chip:nth-child(2) .ds-token-tooltip { left:0; transform:translate(0,0); } .ds-code-fold>summary { padding:17px; } .ds-code { padding:15px; font-size:10px; } .ds-code-tabs button,.ds-copy { font-size:10px; } .ds-rules { grid-template-columns:1fr; gap:0; } .ds-table td,.ds-table th { padding:10px; } .ds-type-row { grid-template-columns:100px 1fr; gap:15px; } .ds-type-display { font-size:31px; } .ds-type-heading { font-size:24px; } .ds-type-row code { overflow-wrap:anywhere; } .ds-card-grid { grid-template-columns:1fr; } .ds-example[data-example='card'] { padding:22px; } .ds-card-grid>.ap-card:last-child { grid-column:auto; } }
@media(prefers-reduced-motion:reduce) { .ds-page * { scroll-behavior:auto; } .ds-token-tooltip,.ds-swatch-color,.ds-copy-glyph,.ds-chevron { transition:none; } .ds-swatch:hover .ds-swatch-color { transform:none; } }

/* Quiet motion on interaction; no perpetual decoration. */
.ds-export,.ds-copy,.ds-code-tabs button,.ds-token-chip { transition:color 160ms, background-color 160ms, border-color 160ms, transform 220ms var(--ap-ease-enter); }
.ds-workbench { transition:border-color 240ms; }
.ds-workbench:focus-within {  }
.ds-code-fold>summary,.ds-info-fold>summary { transition:background-color 180ms,color 180ms; }
.ds-chevron { transition:transform 240ms var(--ap-ease-enter); }
details[data-motion-open='false']>summary>.ds-chevron { transform:rotate(0); }
details[data-motion-open='true']>summary>.ds-chevron { transform:rotate(45deg); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .ds-export:hover,.ds-token-chip:hover { transform:translateY(-1px); }
}
.ds-export:active,.ds-copy:active,.ds-code-tabs button:active,.ds-token-chip:active { transform:scale(.97); transition-duration:70ms; }
.ds-swatch:active .ds-swatch-color { transform:translateY(0) scale(.985); transition-duration:90ms; }
@media(prefers-reduced-motion:reduce) {
  .ds-export,.ds-copy,.ds-code-tabs button,.ds-token-chip,.ds-workbench,.ds-code-fold>summary,.ds-info-fold>summary,.ds-chevron { transition:none; }
  .ds-export,.ds-copy,.ds-code-tabs button,.ds-token-chip,.ds-swatch .ds-swatch-color { transform:none!important; }
}

/* Graphite surfaces: separation through light and depth, never decorative strokes. */
.ds-workbench { background:#222222; box-shadow:0 12px 32px #0002,inset 0 1px 1px #ffffff04; }
.ds-controls,.ds-token-strip { background:#0000000b; }
.ds-source { background:#00000016; }
.ds-info-fold { background:#202020; box-shadow:inset 0 1px 1px #ffffff03; }
.ds-export,.ds-controls select,.ds-copy,.ds-token-chip { background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-swatch-color { box-shadow:0 5px 16px #0002,inset 0 1px 1px #ffffff06; }
.ds-token-tooltip { background:#292929; }
#colors>.ds-workbench { background:#202020; }
.ds-type-row { padding-inline:16px; margin-inline:-16px; border-radius:14px; transition:background-color 180ms; }
.ds-type-row:hover { background:#ffffff03; }
.ds-table th { background:#ffffff03; }
.ds-table tbody tr:nth-child(even) { background:#ffffff02; }
@media(prefers-reduced-motion:reduce) { .ds-type-row { transition:none; } }

/* The navigation and library use the same product SVG source. */
.ds-icon-toolbar { display:flex; gap:24px; align-items:center; margin-bottom:20px; }
.ds-icon-search { display:flex; align-items:center; gap:12px; flex:1; padding:11px 15px; background:var(--ap-color-inset); box-shadow:var(--ap-shadow-inset); border-radius:10px; color:var(--ap-color-muted); }
.ds-icon-search input { min-width:0; width:100%; padding:0; background:none; color:var(--ap-color-text); border:0; font-size:12px; }
.ds-icon-search:focus-within { outline:2px solid var(--ap-color-action); outline-offset:3px; }
.ds-icon-search input:focus-visible { outline:none; }
.ds-icon-size { display:flex; align-items:center; gap:12px; color:var(--ap-color-muted); font-size:11px; }
.ds-icon-size select { background:var(--ap-surface-raised); color:var(--ap-color-text); box-shadow:var(--ap-shadow-raised); padding:8px; border:0; border-radius:7px; }
.ds-icon-filters { display:flex; align-items:center; gap:6px; margin-bottom:24px; }
.ds-icon-filters button { padding:7px 12px; border:0; border-radius:7px; background:transparent; color:var(--ap-color-muted); font-size:11px; }
.ds-icon-filters button[aria-pressed='true'] { background:var(--ap-color-control); color:var(--ap-color-text); }
#icon-count { margin-left:auto; color:var(--ap-color-soft); font-size:11px; white-space:nowrap; }
.ds-icon-layout { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:28px; align-items:start; }
.ds-icon-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.ds-icon-tile { display:flex; flex-direction:column; gap:18px; align-items:center; justify-content:center; min-width:0; height:104px; border:0; border-radius:12px; color:var(--ap-color-muted); background:transparent; transition:background-color 180ms,color 180ms; }
.ds-icon-tile>span { font-size:10px; }
.ds-icon-tile[aria-pressed='true'] { background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); color:var(--ap-color-text); }
.ds-icon-tile:hover { background:#ffffff05; color:var(--ap-color-text); }
.ds-icon-tile>.ap-icon { transition:transform 220ms var(--ap-ease-enter); }
.ds-icon-tile:active>.ap-icon { transform:scale(.92); }
.ds-icon-inspector { position:sticky; top:26px; padding:24px 18px 18px; border-radius:16px; background:#222222; text-align:center; }
.ds-icon-selected-preview { display:grid; place-items:center; height:108px; color:var(--ap-color-text); }
.ds-icon-inspector>h3 { margin:12px 0 4px; font-size:16px; font-weight:400; }
.ds-icon-inspector>p { font-size:11px; color:var(--ap-color-soft); margin:0 0 24px; }
.ds-icon-inspector>.ap-button { width:100%; font-size:12px; }
.ds-icon-inspector>.ds-info-fold { margin:16px 0 0; text-align:left; box-shadow:none; background:#0000000c; }
.ds-icon-inspector>.ds-info-fold>summary { padding:13px; font-size:10px; }
.ds-icon-code-panel { min-width:0; padding:0 10px 12px; }
.ds-icon-code-panel .ds-code { max-height:270px; padding:14px 0; font-size:10px; text-align:left; }
.ds-icon-code-panel .ds-copy { width:100%; }
.ds-icon-guidelines { margin-top:32px; }
#icon-empty { padding:40px 8px; color:var(--ap-color-muted); font-size:12px; }
@media(min-width:1400px) { .ds-icon-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media(max-width:1050px) { .ds-icon-layout { grid-template-columns:minmax(0,1fr) 200px; gap:16px; } .ds-icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) { .ds-icon-toolbar { gap:12px; } .ds-icon-layout { grid-template-columns:minmax(0,1fr); } .ds-icon-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .ds-icon-inspector { position:static; } .ds-icon-filters { gap:2px; } .ds-icon-filters button { padding-inline:9px; } .ds-icon-size { gap:6px; } }
@media(prefers-reduced-motion:reduce) { .ds-icon-tile,.ds-icon-tile>.ap-icon { transition:none; } .ds-icon-tile:active>.ap-icon { transform:none; } }
@media(max-width:760px) {
  .ds-icon-inspector { order:-1; display:grid; grid-template-columns:60px minmax(0,1fr) auto; gap:3px 14px; padding:16px; text-align:left; align-items:center; }
  .ds-icon-selected-preview { grid-row:1 / 3; height:64px; }
  .ds-icon-inspector>h3 { margin:0; align-self:end; }
  .ds-icon-inspector>p { margin:0; align-self:start; }
  .ds-icon-inspector>.ap-button { grid-column:3; grid-row:1 / 3; width:auto; padding-inline:12px; }
  .ds-icon-inspector>.ds-info-fold { grid-column:1 / -1; margin-top:10px; }
}

/* Soft syntax colors belong to code, not to the product chrome. */
.ds-page {
  --ds-code-text:#ccd0d5;
  --ds-code-comment:#858992;
  --ds-code-tag:#c4b2e6;
  --ds-code-property:#9ec9d4;
  --ds-code-string:#b6cb9f;
  --ds-code-number:#dfba91;
  --ds-code-function:#dfcb9f;
  --ds-code-variable:#c3b4dd;
  --ds-code-punctuation:#8f959f;
}
.ds-code { color:var(--ds-code-text); font-size:12px; line-height:1.85; font-variant-ligatures:none; }
.ds-source { background:#1c1d1f; }
.ds-code code { color:inherit; }
.ds-code ::selection { background:#bbc8e12b; color:#f5f5f5; }
.ds-syntax-comment { color:var(--ds-code-comment); }
.ds-syntax-tag,.ds-syntax-keyword { color:var(--ds-code-tag); }
.ds-syntax-property,.ds-syntax-attribute { color:var(--ds-code-property); }
.ds-syntax-string { color:var(--ds-code-string); }
.ds-syntax-number,.ds-syntax-literal { color:var(--ds-code-number); }
.ds-syntax-function,.ds-syntax-entity { color:var(--ds-code-function); }
.ds-syntax-variable { color:var(--ds-code-variable); }
.ds-syntax-selector { color:#b8c5e2; }
.ds-syntax-punctuation,.ds-syntax-operator { color:var(--ds-code-punctuation); }
.ds-code-tabs button { transition:color 160ms,background-color 160ms; }
.ds-code-tabs button[aria-pressed='true'] { color:#e1e3e7; background:#ffffff0b; }
.ds-icon-code-panel .ds-code { font-size:11px; }
@media(max-width:760px) { .ds-code { font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .ds-code-tabs button { transition:none; } }

/* Immersive stages: the viewport is the canvas, with tools at its edges. */
.ds-immersive { overflow:hidden; }
.ds-immersive .ds-topbar,.ds-immersive .ds-footer { display:none; }
.ds-immersive .ds-content { height:100dvh; padding:10px 10px 10px 0; }
.ds-immersive .ds-main { max-width:none; margin:0; padding:0; height:100%; min-height:0; }
.ds-immersive .ds-main>section:not([hidden]) { height:100%; }
.ds-immersive [data-studio]>.ds-section-heading { display:none; }
.ds-immersive [data-studio]>.ds-workbench { position:relative; height:100%; margin:0; background:#202020; border-radius:24px; box-shadow:none; display:flex; flex-direction:column; overflow:hidden; }
.ds-studio-toolbar { position:absolute; z-index:2; inset:0 0 auto; display:flex; align-items:center; gap:16px; padding:24px; pointer-events:none; }
.ds-studio-toolbar>* { pointer-events:auto; }
.ds-studio-toolbar h1 { font-size:12px; font-weight:400; letter-spacing:0; margin:0; color:#929292; }
.ds-studio-tools { display:flex; align-items:center; gap:4px; margin-left:auto; padding:4px; background:#ffffff03; border-radius:13px; }
.ds-studio-tool,.ds-studio-panel-head button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:36px; min-height:36px; padding:8px 11px; border:0; background:none; color:#adadad; border-radius:9px; font:11px/1.4 var(--ap-font-sans); cursor:pointer; transition:background-color 180ms,color 180ms; }
.ds-studio-tool:hover,.ds-studio-panel-head button:hover { background:#ffffff08; color:#ededed; }
.ds-studio-nav { background:#ffffff04; padding:8px; }
.ds-studio-center { display:flex; flex:1; flex-direction:column; justify-content:center; align-items:center; min-height:0; padding:96px 52px 76px; overflow:auto; }
.ds-studio-center>.ds-example { width:100%; max-width:880px; min-height:0; padding:0; background:none; }
.ds-studio-center .ds-card-grid { max-width:840px; }
.ds-studio-panel { position:fixed; inset:12px 12px 12px auto; margin:0; width:min(520px,calc(100vw - 24px)); height:calc(100dvh - 24px); max-height:none; max-width:none; border:0; border-radius:20px; padding:0; color:var(--ap-color-text); background:#242424; box-shadow:var(--ap-shadow-overlay); overflow:auto; }
.ds-studio-panel::backdrop { background:#0005; }
.ds-studio-panel[open] { animation:ds-panel-enter 220ms var(--ap-ease-enter); }
.ds-studio-panel-head { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; background:#242424; z-index:2; padding:20px 22px; }
.ds-studio-panel-head h2 { font-size:14px; font-weight:400; margin:0; }
.ds-studio-pane { padding:0 22px 24px; }
.ds-studio-pane .ds-code-fold>summary { display:none; }
.ds-studio-pane .ds-code { max-height:calc(100dvh - 200px); min-height:200px; padding:18px; }
.ds-studio-pane .ds-source { border-radius:12px; }
.ds-studio-pane .ds-controls { display:grid; gap:22px; padding:12px 0; background:none; }
.ds-studio-pane .ds-controls label { justify-content:space-between; font-size:12px; }
.ds-studio-pane .ds-controls select { min-width:170px; min-height:38px; }
.ds-studio-pane .ds-token-strip { padding:14px 0 22px; background:none; }
.ds-studio-description { font-size:13px; color:var(--ap-color-muted); margin:0 0 18px; }
.ds-studio-pane .ds-info-fold { background:#ffffff03; }
@keyframes ds-panel-enter { from {opacity:0;transform:translateX(12px);} to {opacity:1;transform:translateX(0);} }
@media(max-width:760px) {
  .ds-immersive [data-studio]>.ds-workbench { border-radius:18px; }
  .ds-studio-toolbar { padding:10px; gap:10px; }
  .ds-studio-toolbar h1 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* the bar above already names the page; this stays the h1 */
  .ds-studio-tool { gap:0; padding:8px; }
  .ds-studio-tool>span { display:none; }
  .ds-studio-tools { gap:2px; padding:3px; }
  .ds-studio-center { padding:64px 24px 50px; }
  .ds-studio-center:has(.ds-card-grid) { justify-content:flex-start; }
  .ds-studio-panel { inset:6px; width:calc(100vw - 12px); height:calc(100dvh - 12px); border-radius:16px; }
  .ds-studio-pane { padding-inline:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .ds-studio-panel[open] { animation:none; }
  .ds-studio-tool,.ds-studio-panel-head button { transition:none; }
}
.ds-studio-notice { position:sticky; bottom:16px; width:max-content; max-width:calc(100% - 32px); margin:0 auto 16px; padding:9px 14px; background:#343434; color:#e0e0e0; border-radius:9px; font-size:12px; box-shadow:0 4px 18px #0003; }
.ds-studio-notice:empty { display:none; }

/* AspenPlay preference: scrolling stays available; scrollbar chrome stays hidden. */
html:has(body.ds-page),
.ds-page,
.ds-page * {
  scrollbar-width:none!important;
  -ms-overflow-style:none;
}
html:has(body.ds-page)::-webkit-scrollbar,
.ds-page::-webkit-scrollbar,
.ds-page *::-webkit-scrollbar {
  display:none!important;
  width:0!important;
  height:0!important;
}
/* Geist: tight, even headings, with a clear medium-weight hierarchy. */
.ds-section-heading h2,.ds-overview h1 { letter-spacing:-.035em; }
.ds-type-display,.ds-type-heading { font-weight:500; letter-spacing:-.025em; }
.ds-type-body { font-weight:400; }
.ds-type-label { font-weight:500; letter-spacing:.01em; }

/* Let the exhibit speak; labels stay available on hover and to assistive tech. */
.ds-studio-tools .ds-studio-tool>span { display:none; }
.ds-studio-tools .ds-studio-tool { padding:9px; }
/* Ambient dot field: two CSS layers, no canvas loop or interaction hit targets. */
.ds-immersive [data-studio]>.ds-workbench {
  --ds-dot-spacing:16px;
  --ds-dot-cycle:28s;
  isolation:isolate;
  background:#171819;
}
.ds-immersive [data-studio]>.ds-workbench::before,
.ds-immersive [data-studio]>.ds-workbench::after {
  content:''; position:absolute; z-index:0; pointer-events:none;
  background-size:var(--ds-dot-spacing) var(--ds-dot-spacing);
  will-change:transform,opacity;
}
.ds-immersive [data-studio]>.ds-workbench::before {
  inset:-24px;
  background-image:radial-gradient(circle,#ffffff22 .75px,transparent 1.2px);
  mask-image:radial-gradient(ellipse at 50% 50%,#000 18%,#0009 60%,transparent 90%);
  animation:ds-dots-drift var(--ds-dot-cycle) ease-in-out infinite alternate;
}
.ds-immersive [data-studio]>.ds-workbench::after {
  inset:-72px;
  background-image:radial-gradient(circle,#ffffff32 .85px,transparent 1.35px);
  mask-image:radial-gradient(ellipse 38% 46% at 35% 48%,#000 0%,#0007 42%,transparent 78%);
  animation:ds-dots-breathe 18s ease-in-out infinite alternate;
}
.ds-studio-center { position:relative; z-index:1; }
@keyframes ds-dots-drift {
  from { transform:translate3d(0,0,0); opacity:.42; }
  to { transform:translate3d(12px,12px,0); opacity:.68; }
}
@keyframes ds-dots-breathe {
  from { transform:translate3d(-12px,0,0); opacity:.12; }
  to { transform:translate3d(36px,-12px,0); opacity:.46; }
}
.ds-ambient-paused [data-studio]>.ds-workbench::before,
.ds-ambient-paused [data-studio]>.ds-workbench::after { animation-play-state:paused; }
@media(max-width:760px) { .ds-immersive [data-studio]>.ds-workbench { --ds-dot-spacing:16px; } }
@media(prefers-reduced-motion:reduce) {
  .ds-immersive [data-studio]>.ds-workbench::before,
  .ds-immersive [data-studio]>.ds-workbench::after { animation:none; transform:none; will-change:auto; }
  .ds-immersive [data-studio]>.ds-workbench::before { opacity:.45; }
  .ds-immersive [data-studio]>.ds-workbench::after { opacity:.15; }
}

/* Give the redesigned covers a calm, evenly spaced shelf. */
.ds-studio-center .ds-card-grid { max-width:850px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.ds-studio-center .ds-card-grid>.ap-card:last-child { grid-column:auto; }
@media(max-width:1050px) and (min-width:761px) {
  .ds-studio-center:has(.ds-card-grid) { padding-inline:30px; }
  .ds-studio-center .ds-card-grid { gap:18px; }
  .ds-studio-center .ds-card-grid .ap-card__mode { inset-block-start:16px; inset-inline-start:16px; }
  .ds-studio-center .ds-card-grid .ap-card__caption { flex-wrap:wrap; gap:4px 12px; }
}
@media(max-width:760px) {
  .ds-studio-center:has(.ds-card-grid) { justify-content:flex-start; padding-top:100px; }
  .ds-studio-center .ds-card-grid { max-width:320px; grid-template-columns:1fr; gap:32px; }
}

/* Getting started is a visual directory; implementation notes live in Integration. */
.ds-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 24px; margin-top:0; }
.ds-overview-tile { display:block; min-width:0; border-radius:14px; }
.ds-overview-preview { display:flex; align-items:center; justify-content:center; height:180px; padding:20px; overflow:hidden; border-radius:14px; background:#222222; pointer-events:none; transition:background-color 200ms; }
.ds-overview-preview>* { flex:none; }
.ds-overview-tile:hover .ds-overview-preview { background:#272727; }
.ds-overview-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 2px 0; font-size:12px; color:#c8c8c8; }
.ds-overview-caption>.ap-icon { opacity:0; transform:translateX(-4px); transition:opacity 180ms,transform 180ms; }
.ds-overview-tile:hover .ds-overview-caption>.ap-icon,.ds-overview-tile:focus-visible .ds-overview-caption>.ap-icon { opacity:.7; transform:none; }
.ds-overview-tile:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:6px; }
.ds-overview-static { pointer-events:none; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-input { display:flex; align-items:center; width:180px; font-size:12px; color:var(--ap-color-soft); }
:is(.ds-overview-preview,.ds-ov-lens) .ap-segmented { max-width:none; transform:scale(.8); }
:is(.ds-overview-preview,.ds-ov-lens) .ap-segmented>span { padding:10px 14px; font-size:12px; color:var(--ap-color-muted); }
:is(.ds-overview-preview,.ds-ov-lens) .ap-segmented>span:first-child { background:var(--ap-surface-raised); color:var(--ap-color-text); border-radius:7px; box-shadow:var(--ap-shadow-raised); }
:is(.ds-overview-preview,.ds-ov-lens) .ap-segmented>span:last-child { opacity:.4; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-card { width:105px; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-card__cover { aspect-ratio:1; background:#2a2a2a; }
:is(.ds-overview-preview,.ds-ov-lens) :is(.ap-card__mode,.ap-card__genre,.ap-card__launch) { display:none; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-card__caption { padding-top:8px; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-card__title { font-size:12px; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-toast { display:block; position:static; transform:none; animation:none; width:auto; max-width:100%; padding:10px 16px; font-size:11px; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-dialog { display:block; position:static; width:270px; max-width:none; margin:0; padding:22px; transform:scale(.62); transform-origin:center; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-dialog>span { display:block; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-dialog .ap-button { font-size:12px; }
:is(.ds-overview-preview,.ds-ov-lens) .ap-loader { min-height:0; }
.ds-overview-icons { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; color:#c2c2c2; }
@media(max-width:1050px) { .ds-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ds-overview-foundations { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px) { .ds-overview-grid { gap:22px 12px; } .ds-overview-preview { height:150px; padding:10px; } .ds-overview-preview .ap-input { width:120px; } .ds-overview-preview .ap-segmented { transform:scale(.58); } .ds-overview-preview .ap-dialog { transform:scale(.46); } .ds-overview-preview .ap-toast { font-size:9px; padding:9px; } .ds-overview-preview .ap-button { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .ds-overview-preview,.ds-overview-caption>.ap-icon { transition:none; } }

/* A quiet swipeable shelf, followed by an editorial Markdown reader. */
.ds-document-shortcuts { display:grid; gap:4px; }
.ds-document-shortcuts>a { display:flex; align-items:center; gap:18px; padding:20px 18px; border-radius:12px; }
.ds-document-shortcuts>a:hover { background:var(--ap-color-inset); }
.ds-document-shortcuts>a>span { flex:1; min-width:0; }
.ds-document-shortcuts strong { display:block; color:var(--ap-color-text); font-size:15px; font-weight:500; }
.ds-document-shortcuts small { display:block; margin-top:5px; color:var(--ap-color-soft); font-size:12px; }
.ds-document-shortcuts .ap-icon { color:var(--ap-color-muted); flex:none; }
.ds-document-shortcuts>a>.ap-icon:last-child { opacity:0; transition:opacity var(--ap-duration-feedback); }
.ds-document-shortcuts>a:hover>.ap-icon:last-child,.ds-document-shortcuts>a:focus-visible>.ap-icon:last-child { opacity:1; }
.ds-guidance-shelf { margin-top:36px; min-width:0; }
.ds-guidance-track { --guidance-card-width:min(430px,82%); display:flex; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; padding:6px 0; cursor:grab; }
.ds-guidance-track::after { content:''; flex:0 0 calc(100% - var(--guidance-card-width) - 16px); }
.ds-guidance-track[data-dragging] { cursor:grabbing; scroll-snap-type:none; user-select:none; }
.ds-guidance-card { flex:0 0 var(--guidance-card-width); scroll-snap-align:start; scroll-snap-stop:always; min-width:0; height:276px; padding:30px; border:0; border-radius:20px; background:#222; color:var(--ap-color-text); text-align:left; font:inherit; cursor:inherit; display:flex; flex-direction:column; justify-content:space-between; transition:background-color 180ms; }
.ds-guidance-card[aria-pressed='true'] { background:#292929; }
.ds-guidance-card:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:-4px; }
.ds-guidance-art { height:96px; display:flex; align-items:center; color:#d2d2d2; pointer-events:none; }
.ds-guidance-type { font-size:72px; line-height:1; font-weight:500; letter-spacing:-5px; display:flex; align-items:flex-end; gap:7px; }
.ds-guidance-type>span { width:17px; height:24px; background:#555; border-radius:4px; }
.ds-guidance-type>span:nth-child(2) { height:36px; background:#858585; }
.ds-guidance-type>span:nth-child(3) { height:48px; background:#b6b6b6; }
.ds-guidance-type>span:first-child { margin-left:22px; }
.ds-guidance-rhythm { display:flex; align-items:center; gap:9px; height:80px; }
.ds-guidance-rhythm i { width:13px; height:24px; background:#929292; border-radius:20px; }
.ds-guidance-rhythm i:nth-child(2),.ds-guidance-rhythm i:nth-child(4) { height:48px; background:#b1b1b1; }
.ds-guidance-rhythm i:nth-child(3) { height:76px; background:#d2d2d2; }
.ds-guidance-code { font:300 70px/1 var(--ap-font-sans); letter-spacing:3px; color:#858585; }
.ds-guidance-code i { font-style:normal; font-size:48px; color:#d2d2d2; letter-spacing:-3px; margin:0 12px; }
.ds-guidance-card-copy { display:grid; gap:8px; pointer-events:none; }
.ds-guidance-card-copy small { font-size:11px; color:#aaa; }
.ds-guidance-card-copy strong { font-weight:500; font-size:clamp(21px,2.4vw,28px); line-height:1.16; letter-spacing:-.7px; }
.ds-guidance-card-copy>span { font-size:12px; color:#a3a3a3; }
.ds-guidance-navigation { display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:16px 0 6px; }
.ds-guidance-position { margin-right:12px; font-size:12px; color:var(--ap-color-soft); font-variant-numeric:tabular-nums; }
.ds-guidance-navigation button { display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; color:#c9c9c9; background:var(--ap-color-inset); cursor:pointer; }
.ds-guidance-navigation button:disabled { opacity:.28; cursor:default; }
.ds-guidance-navigation button:not(:disabled):hover { background:#303030; }
.ds-guidance-reader { padding-top:28px; }
.ds-document-panel { max-width:680px; margin-inline:auto; }
.ds-document-toolbar { display:flex; justify-content:space-between; gap:16px; padding:0 0 40px; }
.ds-document-modes,.ds-document-actions { display:flex; align-items:center; gap:4px; }
.ds-document-toolbar button,.ds-document-toolbar a { display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ap-color-muted); border-radius:8px; min-height:36px; padding:8px 12px; font:inherit; font-size:12px; cursor:pointer; }
.ds-document-toolbar button[aria-pressed='true'] { color:var(--ap-color-text); background:var(--ap-color-control); }
.ds-document-toolbar button:hover,.ds-document-toolbar a:hover { color:var(--ap-color-text); }
.ds-document-prose { color:#b4b4b4; font-size:15px; line-height:1.85; overflow-wrap:anywhere; }
.ds-document-prose h2 { margin:0 0 20px; color:var(--ap-color-text); font-size:clamp(30px,4vw,42px); font-weight:500; line-height:1.13; letter-spacing:-1.4px; }
.ds-document-prose h2+p { font-size:18px; line-height:1.7; color:#c2c2c2; max-width:55ch; }
.ds-document-prose h3 { margin:44px 0 14px; color:var(--ap-color-text); font-size:22px; line-height:1.3; font-weight:500; letter-spacing:-.45px; }
.ds-document-prose h4 { margin:28px 0 12px; color:var(--ap-color-text); font-size:17px; font-weight:500; }
.ds-document-prose p { margin:0 0 20px; }
.ds-document-prose strong { color:#e1e1e1; font-weight:500; }
.ds-document-prose ul { margin:22px 0; padding:0; list-style:none; display:grid; gap:16px; }
.ds-document-prose li { padding-left:18px; position:relative; }
.ds-document-prose li::before { content:''; position:absolute; top:.8em; left:0; width:4px; height:4px; border-radius:50%; background:#777; }
.ds-document-prose blockquote { margin:30px 0; padding:26px 28px; border:0; border-radius:14px; background:#222; color:#d5d5d5; font-size:18px; line-height:1.6; letter-spacing:-.2px; }
.ds-document-prose :not(pre)>code { color:#d9d9d9; font-size:.84em; background:#292929; padding:3px 6px; border-radius:4px; }
.ds-document-example { padding:24px; background:#222; border:0; border-radius:14px; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.9 var(--ap-font-mono); }
.ds-document-raw { margin:0; max-width:100%; white-space:pre-wrap; overflow-wrap:anywhere; color:#bcbcbc; font:12px/1.9 var(--ap-font-mono); tab-size:2; }
.ds-document-raw .ds-md-heading { color:#e2d4bc; }
.ds-document-raw .ds-md-list { color:#b4c7bd; }
.ds-document-raw .ds-md-meta { color:#b9bfd9; }
.ds-document-panel[hidden],.ds-document-prose[hidden],.ds-document-raw[hidden] { display:none; }
.ds-guidance-navigation .ds-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:480px) { .ds-guidance-card { height:260px; padding:24px; } .ds-document-prose { font-size:14px; } .ds-document-prose h2+p { font-size:16px; } .ds-document-prose blockquote { padding:22px; font-size:16px; } .ds-document-shortcuts>a { padding:18px 12px; gap:12px; } .ds-document-example { padding:18px; font-size:11px; } }
@media(prefers-reduced-motion:reduce) { .ds-guidance-card,.ds-document-shortcuts>a>.ap-icon:last-child { transition:none; } }

/* Solid, adjacent tones reveal the palette as a system. */
.ds-color-library { margin:42px 0; }
.ds-color-band-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; font-size:12px; color:#d4d4d4; }
.ds-color-band-caption>span:last-child { color:var(--ap-color-soft); font-size:11px; }
.ds-color-band { display:flex; overflow-x:auto; min-width:0; border-radius:18px; background:var(--ap-color-inset); }
.ds-color-stop { flex:1 0 0; min-width:68px; height:260px; padding:20px 12px; border:0; position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:8px; font:inherit; text-align:left; cursor:pointer; transition:flex-grow 300ms var(--ap-ease-enter); }
.ds-color-stop:hover,.ds-color-stop:focus-visible { flex-grow:1.65; }
.ds-color-stop:focus-visible { outline:2px solid currentColor; outline-offset:-6px; z-index:1; }
.ds-color-stop-mark { position:absolute; top:20px; left:12px; opacity:0; }
.ds-color-stop[aria-pressed='true'] .ds-color-stop-mark { opacity:.7; }
.ds-color-stop-label { font-size:12px; }
.ds-color-stop-value { font:9px/1.4 var(--ap-font-mono); opacity:0; white-space:nowrap; transition:opacity 160ms; }
.ds-color-stop:hover .ds-color-stop-value,.ds-color-stop:focus-visible .ds-color-stop-value,.ds-color-stop[aria-pressed='true'] .ds-color-stop-value { opacity:.7; }
.ds-color-inspector { padding:0; margin:8px 0 36px; }
.ds-color-inspector>summary { display:flex; align-items:center; justify-content:space-between; padding:16px 2px; list-style:none; cursor:pointer; color:var(--ap-color-muted); font-size:12px; }
.ds-color-inspector>summary::-webkit-details-marker { display:none; }
.ds-color-selection,.ds-color-disclose { display:flex; align-items:center; gap:10px; }
.ds-color-selection i { width:14px; height:14px; border-radius:4px; }
.ds-color-disclose>.ap-icon { transition:transform 180ms; }
.ds-color-inspector[open] .ds-color-disclose>.ap-icon { transform:rotate(45deg); }
.ds-color-detail { padding:24px; background:#222; border-radius:14px; }
.ds-color-value { color:var(--ap-color-text); font-size:23px; font-weight:500; letter-spacing:-.5px; }
.ds-color-detail p { margin:8px 0 20px; font-size:13px; color:var(--ap-color-muted); line-height:1.6; }
.ds-color-code-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ds-color-code-row pre { margin:0; min-width:0; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.6 var(--ap-font-mono); }
.ds-color-copy { display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:0; border-radius:8px; color:var(--ap-color-muted); background:#2c2c2c; cursor:pointer; }
.ds-color-contexts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.ds-color-context { min-width:0; }
.ds-color-depth,.ds-color-type,.ds-color-feedback { height:206px; border-radius:16px; background:var(--ap-color-inset); display:flex; align-items:center; justify-content:center; }
.ds-color-depth { padding:28px; background:var(--ap-color-page); }
.ds-color-depth>div { width:100%; height:142px; padding:20px; border-radius:16px; background:var(--ap-color-inset); }
.ds-color-depth>div>div { height:100%; padding:16px; border-radius:12px; background:var(--ap-color-control); display:grid; place-items:center; }
.ds-color-depth span { display:grid; place-items:center; color:var(--ap-color-muted); }
.ds-color-type { flex-direction:column; align-items:flex-start; gap:10px; padding:28px; }
.ds-color-type strong { font-size:46px; font-weight:500; line-height:1; letter-spacing:-2px; color:var(--ap-color-text); }
.ds-color-type>span { color:var(--ap-color-muted); font-size:13px; margin-top:5px; }
.ds-color-type>small { color:var(--ap-color-soft); font-size:11px; }
.ds-color-feedback { flex-direction:column; gap:22px; padding:18px; }
.ds-color-action-sample { display:flex; align-items:center; gap:16px; background:var(--ap-color-action); color:var(--ap-color-on-action); border-radius:var(--ap-radius-control); padding:12px 16px; font-size:12px; white-space:nowrap; }
.ds-color-error-sample { display:flex; align-items:center; gap:7px; color:var(--ap-color-error); background:none; border:0; padding:6px 4px; cursor:pointer; font:12px var(--ap-font-sans); }
.ds-color-context-label { display:block; padding:14px 2px 0; font-size:12px; color:#d4d4d4; }
.ds-color-context-label small { display:block; margin-top:6px; color:var(--ap-color-soft); font-size:11px; }
@media(max-width:1050px) { .ds-color-contexts { gap:14px; } .ds-color-type { padding:20px; } .ds-color-feedback { padding:12px; } .ds-color-action-sample { gap:9px; padding:11px; font-size:11px; } .ds-color-error-sample { font-size:10px; } }
@media(max-width:600px) { .ds-color-library { margin-top:30px; } .ds-color-band-caption>span:last-child { font-size:10px; } .ds-color-stop { height:220px; flex-basis:68px; padding:18px 10px; } .ds-color-stop:hover,.ds-color-stop:focus-visible { flex-grow:1; } .ds-color-stop-value { font-size:8px; } .ds-color-contexts { grid-template-columns:1fr; gap:28px; } .ds-color-depth,.ds-color-type,.ds-color-feedback { height:200px; } .ds-color-depth { padding:24px 42px; } .ds-color-type { padding:30px; } .ds-color-type strong { font-size:58px; } .ds-color-feedback { flex-direction:row; gap:16px; } .ds-color-detail { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .ds-color-stop,.ds-color-stop-value,.ds-color-disclose>.ap-icon { transition:none; } }

/* Typography as a specimen: the type is the page and the controls are tiny and quiet.
 * Structure comes from 2px seams between solid cells, never from lines. Documentation chrome only; nothing here belongs in components.css. */
.ds-page { font-synthesis:none; }
html:has(:is(#typography,#surfaces):not([hidden])) { scroll-padding-top:calc(64px + var(--ds-bar-h,0px)); scroll-padding-bottom:84px; }
.ds-tt,.ds-instrument { --tt-cell:var(--ap-color-inset); --tt-ink:var(--ap-color-text); --tt-ink-2:var(--ap-color-muted); --tt-pill:var(--ap-color-control); --tt-pill-hover:#2f2f2f; --tt-pill-on:var(--ap-button-secondary-hover); --tt-seg-on:#8a8a8a; --tt-seg-ink:#181818; --tt-focus:var(--ap-color-action); --tt-features-sans:normal; --tt-features-mono:normal; }
.ds-tt { margin:38px 0 0; }
.ds-tt-h { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ds-tt-h:focus { outline:none; }
/* Ink: every specimen text. The surface (stage, cell, slide) carries the state; its direct ink children consume it. */
.ds-tt-ink { font-family:var(--ap-font-sans); font-weight:var(--tt-wght,400); letter-spacing:var(--tt-track,0em); font-feature-settings:var(--tt-features-sans); font-variant-ligatures:normal; font-variant-numeric:normal; font-kerning:normal; color:var(--tt-ink); }
[data-family='mono'] > .ds-tt-ink { font-family:var(--ap-font-mono); font-feature-settings:var(--tt-features-mono); }
[data-case='upper'] > .ds-tt-ink { text-transform:uppercase; }
[data-align='center'] > .ds-tt-ink { text-align:center; }
.ds-tt-measure { position:absolute; left:0; top:0; visibility:hidden; pointer-events:none; white-space:pre; font-size:100px; line-height:1; }

/* Masthead */
.ds-tt-mast { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin:0 0 20px; }
.ds-tt-name { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; }
.ds-tt-name strong { color:#e0e0e0; font-size:17px; font-weight:500; letter-spacing:-.3px; }
.ds-tt-name span { color:var(--ap-color-soft); font-size:10px; }
.ds-tt-mast nav { display:flex; flex-wrap:wrap; gap:18px; }
.ds-tt-mast nav button { border:0; padding:6px 0; background:none; color:var(--ap-color-muted); font:400 13px/1.2 var(--ap-font-sans); letter-spacing:.2px; cursor:pointer; border-radius:4px; transition:color var(--ap-duration-feedback); }
.ds-tt-mast nav button:hover,.ds-tt-mast nav button:focus-visible { color:var(--ap-color-text); }
.ds-tt-mast nav button:focus-visible,.ds-tt-scale-row:focus-visible,.ds-tt-copy:focus-visible,.ds-tt-summary button:focus-visible,.ds-tt-source>summary:focus-visible,.ds-tt-facts a:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:2px; }

/* Gallery: the one block in a contrasting tone. It changes only when someone asks. */
.ds-tt-gallery { container-type:inline-size; }
.ds-tt-slab { position:relative; height:clamp(260px,44cqi,460px); border-radius:18px; overflow:hidden; background:var(--tt-cell); cursor:pointer; }
.ds-tt-slide { position:absolute; inset:0; display:grid; place-content:center; text-align:center; opacity:0; visibility:hidden; transition:opacity var(--ap-duration-enter) var(--ap-ease-enter),visibility 0s linear var(--ap-duration-enter); }
.ds-tt-slide[data-current='true'] { opacity:1; visibility:visible; transition-delay:0s; }
.ds-tt-slide > .ds-tt-ink { display:block; font-size:18cqi; line-height:.95; letter-spacing:-.04em; }
.ds-tt-pill.ds-tt-gallery-nav { position:absolute; left:16px; bottom:16px; cursor:default; }

/* Tester: one enormous editable line, straight on the page. */
.ds-tt-tester { container-type:inline-size; margin-top:56px; }
.ds-tt-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 6px; }
.ds-tt-controls-end { display:flex; flex-wrap:wrap; gap:10px 6px; margin-left:auto; }
.ds-tt-stage { position:relative; display:grid; align-content:center; min-height:clamp(300px,46cqi,480px); margin-top:8px; overflow:hidden; }
.ds-tt-word { min-width:0; padding-bottom:.18em; font-size:calc(var(--tt-fit,120px) * var(--tt-scale,1)); line-height:1.05; white-space:pre; color:#dedede; outline:none; }
.ds-tt-stage[data-floor] > .ds-tt-word { white-space:pre-wrap; overflow-wrap:anywhere; }
.ds-tt-word:empty::before,.ds-tt-text:empty::before { content:attr(data-placeholder); opacity:.6; }
.ds-tt-caption { display:flex; justify-content:space-between; gap:8px 20px; flex-wrap:wrap; margin-top:12px; color:var(--ap-color-soft); font:400 10px/1.5 var(--ap-font-mono); }

/* The pill: every control is this one quiet shape around a native element. */
.ds-tt-pill { position:relative; display:inline-flex; align-items:center; gap:6px; flex:none; height:21px; margin:0; padding:0 8px; border:0; border-radius:999px; background:var(--tt-pill); color:var(--tt-ink-2); font:500 10px/1 var(--ap-font-sans); letter-spacing:.025em; font-variant-numeric:tabular-nums; text-transform:none; white-space:nowrap; user-select:none; -webkit-user-select:none; cursor:pointer; transition:background-color var(--ap-duration-feedback) var(--ap-ease-feedback),color var(--ap-duration-feedback) var(--ap-ease-feedback),transform var(--ap-duration-press); }
button.ds-tt-pill::before { content:''; position:absolute; inset:-4px 0; }
@media(hover:hover) { .ds-tt-pill:not([data-kind='group']):hover { background:var(--tt-pill-hover); color:var(--tt-ink); } .ds-tt-pill:hover .ds-tt-range::-webkit-slider-thumb { background:var(--tt-pill-hover); } .ds-tt-pill:hover .ds-tt-range::-moz-range-thumb { background:var(--tt-pill-hover); } .ds-tt-pill[data-kind='group'] button:hover { background:var(--tt-pill-on); color:var(--tt-ink); } }
button.ds-tt-pill:active { transform:scale(.97); }
.ds-tt-pill:disabled { opacity:.45; cursor:not-allowed; }
.ds-tt-pill svg { flex:none; width:11px; height:11px; }
.ds-tt-pill:focus-within { outline:2px solid var(--tt-focus); outline-offset:3px; }
@supports selector(:has(*)) { .ds-tt-pill:focus-within { outline:none; } .ds-tt-pill:not([data-kind='group']):has(:focus-visible),.ds-tt-pill:focus-visible { outline:2px solid var(--tt-focus); outline-offset:3px; } }
.ds-tt-pill[data-kind='group']:focus-within { outline:none; }
.ds-tt-pill input,.ds-tt-pill select { outline:none; }
.ds-tt-pill[aria-pressed='true'] { background:var(--tt-pill-on); color:var(--tt-ink); }
.ds-tt-dot { flex:none; width:5px; height:5px; border-radius:50%; box-shadow:inset 0 0 0 1px currentColor; transition:background-color var(--ap-duration-feedback); }
.ds-tt-pill[aria-pressed='true'] .ds-tt-dot { background:currentColor; }
.ds-tt-note { font-weight:400; }
.ds-tt-pill[data-kind='proof'] { width:21px; padding:0; justify-content:center; }
.ds-tt-pill[data-kind='proof'] svg { width:13px; height:13px; }
/* Slider pill: a 1px line and a hollow knob around a real range input. */
.ds-tt-track { position:relative; display:inline-flex; align-items:center; }
.ds-tt-range { -webkit-appearance:none; appearance:none; width:64px; height:29px; margin:-4px 0; padding:0; border:0; background:none; color:inherit; cursor:ew-resize; touch-action:pan-y; }
.ds-tt-range[data-size='s'] { width:44px; }
.ds-tt-range::-webkit-slider-runnable-track { height:1px; background:currentColor; }
.ds-tt-range::-moz-range-track { height:1px; background:currentColor; }
.ds-tt-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:9px; height:9px; margin-top:-4px; border-radius:50%; background:var(--tt-pill); box-shadow:inset 0 0 0 1px currentColor; }
.ds-tt-range::-moz-range-thumb { width:9px; height:9px; border:0; border-radius:50%; background:var(--tt-pill); box-shadow:inset 0 0 0 1px currentColor; }
.ds-tt-range:active::-webkit-slider-thumb,.ds-tt-range:focus-visible::-webkit-slider-thumb { background:currentColor; }
.ds-tt-range:active::-moz-range-thumb,.ds-tt-range:focus-visible::-moz-range-thumb { background:currentColor; }
.ds-tt-track > i { position:absolute; top:calc(50% + 3px); left:calc(4.5px + var(--p) * (100% - 9px)); width:1px; height:4px; background:var(--ap-color-soft); pointer-events:none; }
.ds-tt-value { min-width:3ch; text-align:right; color:var(--tt-ink); }
.ds-tt-value[data-wide] { min-width:8ch; }
/* Choice and case pills: native radios and a native checkbox. */
.ds-tt-pill[data-kind='choice'],.ds-tt-pill[data-kind='case'],.ds-tt-pill[data-kind='group'] { padding:0 2px; gap:0; }
.ds-tt-pill[data-kind='choice'] > label { position:relative; display:inline-flex; cursor:pointer; }
.ds-tt-pill[data-kind='choice'] input,.ds-tt-pill[data-kind='case'] input { position:absolute; inset:-4px 0; width:100%; height:calc(100% + 8px); margin:0; opacity:0; cursor:pointer; }
.ds-tt-seg { display:inline-flex; align-items:center; justify-content:center; height:17px; min-width:20px; padding:0 7px; border-radius:999px; transition:background-color var(--ap-duration-feedback),color var(--ap-duration-feedback); }
.ds-tt-pill[data-kind='choice'] input:checked + .ds-tt-seg,.ds-tt-pill[data-kind='case'] input:checked ~ .ds-tt-seg[data-on],.ds-tt-pill[data-kind='case'] input:not(:checked) ~ .ds-tt-seg[data-off] { background:var(--tt-seg-on); color:var(--tt-seg-ink); } /* which option is chosen must read without colour: 4.2:1 against the pill */
.ds-tt-pill[data-kind='group'] button { position:relative; width:21px; height:17px; padding:0; border:0; border-radius:999px; background:none; color:inherit; font:inherit; cursor:pointer; }
.ds-tt-pill[data-kind='group'] button::before { content:''; position:absolute; inset:-6px 0; }
.ds-tt-pill[data-kind='group'] button:focus-visible { outline:2px solid var(--tt-focus); outline-offset:-2px; background:var(--tt-pill-on); color:var(--tt-ink); } /* each arrow shows its own focus */
.ds-tt-counter { padding:0 8px; }
/* Select pill: the native select is the hit box; the pill only shows its value. */
.ds-tt-pill[data-kind='select'] select { position:absolute; inset:-4px 0; width:100%; height:calc(100% + 8px); margin:0; border:0; opacity:0; font-size:16px; cursor:pointer; }
.ds-tt-pill[data-kind='select'] svg { width:9px; height:9px; }

/* Samples: a sticky bar of what the font can do, then the bento. */
.ds-tt-samples { margin-top:64px; }
.ds-tt-features { position:sticky; top:var(--ds-bar-h,0px); z-index:5; display:flex; align-items:center; gap:8px; min-height:52px; margin-bottom:2px; background:var(--ap-color-page); }
.ds-tt-toolbar { flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; overscroll-behavior-x:contain; padding:13px 6px; margin-inline:-6px; scrollbar-width:none; }
.ds-tt-toolbar::-webkit-scrollbar { display:none; }
.ds-tt-cluster { display:flex; flex:none; gap:6px; }
.ds-tt-gridwrap { container-type:inline-size; }
.ds-tt-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:clamp(72px,calc(100cqi / 12),88px); gap:2px; border-radius:18px; overflow:hidden; background:var(--ap-color-page); }
.ds-tt-cell { position:relative; grid-column:var(--tt-col); grid-row:var(--tt-row); min-width:0; padding:56px 32px 24px; overflow:hidden; contain:content; background:var(--tt-cell); color:var(--tt-ink); transition:background-color var(--ap-duration-feedback),color var(--ap-duration-feedback); }
.ds-tt-tools { position:absolute; top:16px; left:32px; display:flex; gap:6px; max-width:calc(100% - 40px); }
.ds-tt-tools .ds-tt-pill[data-kind='select'] { flex:0 1 auto; min-width:0; } /* the style name gives way first */
.ds-tt-tools .ds-tt-face { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.ds-tt-text { height:100%; min-width:0; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; font-size:calc(var(--tt-size,17) * 1px); line-height:calc(var(--tt-lead,27) * 1px); outline:none; }
.ds-tt-cell[data-pre] > .ds-tt-text { white-space:pre; }
.ds-tt-cell[data-fit] { display:grid; align-content:center; }
.ds-tt-cell[data-fit] > .ds-tt-text { height:auto; font-size:var(--tt-fit,120px); line-height:1.05; white-space:pre; overflow:visible; }
.ds-tt-cell[data-fit][data-floor] > .ds-tt-text { white-space:pre-wrap; }
.ds-tt-text:focus-visible,.ds-tt-word:focus-visible { outline:2px solid var(--tt-focus); outline-offset:-2px; border-radius:6px; }
.ds-tt-samples[data-proof='light'] .ds-tt-grid { --tt-cell:#d4d4d4; --tt-ink:#242424; --tt-ink-2:#4a4a4a; --tt-pill:#c6c6c6; --tt-pill-hover:#bcbcbc; --tt-pill-on:#b2b2b2; --tt-seg-on:#666666; --tt-seg-ink:#ededed; --tt-focus:#242424; }

/* Interface scale: the spec, not the sketch. Never editable, never touched by the tester. */
.ds-tt-scale { container-type:inline-size; margin-top:72px; }
.ds-tt-scale-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; color:#d4d4d4; font-size:14px; }
.ds-tt-scale-heading small { color:var(--ap-color-soft); font-size:11px; }
.ds-tt-scale-rows { display:grid; gap:2px; border-radius:18px; overflow:hidden; }
.ds-tt-scale-row { display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:20px; align-items:baseline; width:100%; padding:26px 20px; border:0; border-radius:0; background:var(--ap-color-inset); color:var(--ap-color-text); font-family:var(--ap-font-sans); text-align:left; cursor:pointer; transition:background-color var(--ap-duration-feedback); }
.ds-tt-scale-row:hover,.ds-tt-scale-row[aria-pressed='true'] { background:var(--ap-surface-raised); }
.ds-tt-scale-row:focus-visible { outline-offset:-2px; }
.ds-tt-scale-row:is(:hover,[aria-pressed='true']) .ds-tt-role { color:var(--ap-color-muted); }
.ds-tt-role { color:var(--ap-color-soft); font-size:11px; }
.ds-tt-role-text { min-width:0; overflow-wrap:anywhere; }
.ds-tt-role-detail { display:flex; align-items:center; gap:8px; color:var(--ap-color-muted); font-size:10px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.ds-tt-source { margin-top:22px; }
.ds-tt-source > summary { display:flex; align-items:center; justify-content:space-between; padding:18px 0; color:var(--ap-color-muted); font-size:12px; cursor:pointer; list-style:none; border-radius:6px; }
.ds-tt-source > summary::-webkit-details-marker { display:none; }
.ds-tt-source > summary > .ap-icon { transition:transform var(--ap-duration-feedback); }
.ds-tt-source[open] > summary > .ap-icon { transform:rotate(45deg); }
.ds-tt-source-body { padding:24px; border-radius:14px; background:var(--ap-color-inset); }
.ds-tt-source-tools { display:flex; flex-wrap:wrap; gap:10px 6px; margin-bottom:16px; }
.ds-tt-source-description { max-width:64ch; margin:0 0 20px; color:var(--ap-color-muted); font-size:12px; line-height:1.7; }
.ds-tt-source-row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.ds-tt-source-row pre { min-width:0; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:12px/1.85 var(--ap-font-mono); border-radius:6px; }
.ds-tt-source-row pre:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:4px; }
.ds-tt-copy { flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:8px; background:var(--ap-button-secondary-hover); color:#c4c4c4; cursor:pointer; transition:background-color var(--ap-duration-feedback),color var(--ap-duration-feedback); }
.ds-tt-copy:hover { background:#3b3b3b; color:var(--ap-color-text); }

/* About: prose and a fact sheet, laid out as seams. */
.ds-tt-about { container-type:inline-size; margin-top:96px; }
.ds-tt-about > h3 { margin:0 0 20px; color:var(--ap-color-soft); font-size:12px; font-weight:400; }
.ds-tt-about > h3:focus { outline:none; }
.ds-tt-about-grid { display:grid; gap:32px; }
.ds-tt-prose { max-width:46ch; }
.ds-tt-prose p { margin:0 0 16px; color:var(--ap-color-muted); font-size:16px; line-height:1.7; }
.ds-tt-prose p:first-child { color:var(--ap-color-text); }
.ds-tt-facts { display:grid; gap:2px; margin:0; border-radius:14px; overflow:hidden; }
.ds-tt-facts > div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:11px 14px; background:var(--ap-color-inset); font-size:12px; line-height:1.6; }
.ds-tt-facts dt { color:var(--ap-color-soft); }
.ds-tt-facts dd { min-width:0; margin:0; color:var(--ap-color-text); overflow-wrap:anywhere; }
.ds-tt-facts code { font:11px/1.6 var(--ap-font-mono); color:inherit; }
.ds-tt-facts a { color:inherit; text-decoration:underline; text-decoration-color:var(--ap-color-soft); text-underline-offset:3px; border-radius:3px; }
@container (min-width:720px) { .ds-tt-about-grid { grid-template-columns:5fr 7fr; gap:48px; } }

/* Summary: what the tester shows, and one way out with it. Sticky, never fixed: the section itself is transformed while it reveals. */
.ds-tt-summary { position:sticky; bottom:max(12px,env(safe-area-inset-bottom)); z-index:6; display:flex; align-items:center; justify-content:space-between; gap:14px; height:52px; margin-top:40px; padding:0 8px 0 18px; border-radius:16px; background:var(--ap-surface-raised); box-shadow:0 12px 36px #0007; animation:ds-tt-summary-enter var(--ap-duration-enter) var(--ap-ease-enter) both; }
@keyframes ds-tt-summary-enter { from { opacity:0; transform:translateY(8px); } }
.ds-tt-summary-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ap-color-muted); font-size:11px; font-variant-numeric:tabular-nums; }
.ds-tt-summary-actions { display:flex; flex:none; gap:6px; }
.ds-tt-summary button { height:35px; padding:0 16px; border:0; border-radius:17.5px; background:transparent; color:var(--ap-color-text); font:500 11px/1 var(--ap-font-sans); letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:background-color var(--ap-duration-feedback),transform var(--ap-duration-press); }
.ds-tt-summary button:hover { background:#ffffff0a; }
.ds-tt-summary button:active { transform:scale(.97); }
.ds-tt-summary button[data-primary] { background:var(--ap-surface-action); color:var(--ap-color-on-action); }
.ds-tt-summary button[data-primary]:hover { background:var(--ap-color-text); }

/* No JavaScript, or a failure: the scale and the facts, in Geist. */
.ds-tt-static { margin-top:24px; }
.ds-tt-static .ds-tt-facts { margin-top:28px; }
.ds-tt-static-note { max-width:64ch; margin:24px 0 0; color:var(--ap-color-muted); font-size:12px; line-height:1.7; }

@container (min-width:1000px) { .ds-tt-cell { padding:68px 48px 40px; } .ds-tt-tools { top:22px; left:48px; } }
@container (max-width:679px) {
  .ds-tt-slab { height:max(260px,calc(41.8cqi + 108px)); } /* two lines at .95 of 22cqi, the counter pill, and air */
  .ds-tt-slide { padding-bottom:44px; } /* room for the counter pill under the glyphs */
  .ds-tt-slide > .ds-tt-ink { font-size:22cqi; }
  .ds-tt-grid { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; }
  .ds-tt-cell { grid-column:auto; grid-row:auto; block-size:232px; padding:52px 20px 20px; }
  .ds-tt-cell[data-tall] { block-size:400px; }
  .ds-tt-tools { top:14px; left:20px; }
  .ds-tt-text { font-size:calc(var(--tt-size-s,17) * 1px); line-height:calc(var(--tt-lead-s,27) * 1px); }
}
@container (max-width:519px) {
  .ds-tt-controls-end { margin-left:0; flex:1 1 100%; }
  .ds-tt-controls .ds-tt-pill[data-kind='slider'] { flex:1 1 100%; }
  .ds-tt-controls .ds-tt-track,.ds-tt-controls .ds-tt-range { flex:1; width:auto; }
  .ds-tt-caption { flex-direction:column; }
  .ds-tt-scale-row { grid-template-columns:minmax(0,1fr) auto; gap:10px 16px; padding:20px 16px; }
  .ds-tt-role-text { grid-column:1 / -1; grid-row:2; }
  .ds-tt-role-detail { min-width:0; white-space:normal; justify-content:flex-end; text-align:right; }
  .ds-tt-facts > div { grid-template-columns:96px minmax(0,1fr); }
}
@media(max-width:600px) { .ds-tt-cluster [data-tt-reset] > span { display:none; } .ds-tt-summary { padding-left:14px; } .ds-tt-summary button { padding:0 12px; } }
@media(max-height:480px) { .ds-tt-summary { position:static; } }
/* Coarse pointers: the pills visibly grow. A 44px target is never hidden behind a 21px shape. */
@media(pointer:coarse) {
  .ds-tt-pill { height:32px; padding:0 12px; font-size:12px; }
  button.ds-tt-pill::before,.ds-tt-pill[data-kind='group'] button::before { inset:-6px 0; }
  .ds-tt-pill[data-kind='choice'],.ds-tt-pill[data-kind='case'],.ds-tt-pill[data-kind='group'] { padding:0 3px; }
  .ds-tt-seg { height:26px; min-width:44px; }
  .ds-tt-pill[data-kind='group'] button { width:44px; height:26px; }
  .ds-tt-pill[data-kind='choice'] input,.ds-tt-pill[data-kind='case'] input,.ds-tt-pill[data-kind='select'] select { inset:-6px 0; height:calc(100% + 12px); }
  .ds-tt-pill[data-kind='proof'] { width:32px; }
  .ds-tt-range { width:96px; height:44px; margin:-6px 0; }
  .ds-tt-range[data-size='s'] { width:96px; }
  .ds-tt-range::-webkit-slider-thumb { width:13px; height:13px; margin-top:-6px; }
  .ds-tt-range::-moz-range-thumb { width:13px; height:13px; }
  .ds-tt-track > i { left:calc(6.5px + var(--p) * (100% - 13px)); }
  .ds-tt-controls,.ds-tt-controls-end,.ds-tt-source-tools { row-gap:12px; }
  .ds-tt-features { min-height:56px; }
  .ds-tt-toolbar { padding-block:12px; }
  .ds-tt-mast nav { gap:8px; }
  .ds-tt-mast nav button { padding:14px 6px; }
  .ds-tt-summary button,.ds-tt-copy { height:44px; }
  .ds-tt-copy { width:44px; }
  /* Grown pills must still fit one row above the text: on a phone the per-cell case pill steps aside (the tester keeps its own). */
  .ds-tt-cell { padding-top:64px; }
  @container (min-width:1000px) { .ds-tt-cell { padding-top:76px; } } /* the wide cell starts lower, and the pills are taller here */
  @container (max-width:679px) { .ds-tt-slide { padding-bottom:56px; } }
  @container (max-width:679px) { .ds-tt-tools .ds-tt-pill[data-kind='case'] { display:none; } }
}
@media(forced-colors:active) {
  .ds-tt-pill { border:1px solid ButtonText; }
  .ds-tt-range::-webkit-slider-runnable-track,.ds-tt-range::-moz-range-track { background:CanvasText; }
  .ds-tt-range::-webkit-slider-thumb,.ds-tt-range::-moz-range-thumb { forced-color-adjust:none; background:ButtonText; box-shadow:none; }
  .ds-tt-range:focus-visible::-webkit-slider-thumb,.ds-tt-range:focus-visible::-moz-range-thumb { background:Highlight; }
  .ds-tt-pill[aria-pressed='true'],.ds-tt-pill input:checked + .ds-tt-seg { background:Highlight; color:HighlightText; forced-color-adjust:none; }
  .ds-tt-cell,.ds-tt-scale-row,.ds-tt-facts > div { border:1px solid CanvasText; }
}
@media(prefers-contrast:more) { .ds-tt { --tt-ink-2:var(--ap-color-text); } }
@media(prefers-reduced-motion:reduce) {
  .ds-tt-pill,.ds-tt-dot,.ds-tt-seg,.ds-tt-slide,.ds-tt-cell,.ds-tt-scale-row,.ds-tt-copy,.ds-tt-mast nav button,.ds-tt-summary button,.ds-tt-source > summary > .ap-icon { transition:none; }
  button.ds-tt-pill:active,.ds-tt-summary button:active { transform:none; }
  .ds-tt-summary { animation:none; }
}

/* Color science: measured tokens, perceptual spacing and honest contrast. */
.ds-color-choice { display:grid; grid-template-columns:1fr 1fr; gap:38px; align-items:center; padding:4px 0 40px; }
.ds-color-choice>div>span { color:var(--ap-color-soft); font-size:11px; }
.ds-color-choice h3 { margin:12px 0 18px; font-size:clamp(26px,3.2vw,38px); line-height:1.12; font-weight:500; letter-spacing:-1px; color:var(--ap-color-text); }
.ds-color-choice p { margin:0; color:var(--ap-color-muted); font-size:14px; line-height:1.7; }
.ds-color-choice-reasons { display:grid; gap:22px; }
.ds-color-choice-reasons>span { display:grid; grid-template-columns:12px 1fr; gap:5px 12px; align-items:center; }
.ds-color-choice-reasons i { width:7px; height:7px; border-radius:50%; background:#bababa; }
.ds-color-choice-reasons>span:nth-child(2) i { background:#747474; }
.ds-color-choice-reasons>span:last-child i { background:var(--ap-color-error); }
.ds-color-choice-reasons strong { font-size:12px; font-weight:500; color:#d2d2d2; }
.ds-color-choice-reasons small { grid-column:2; font-size:11px; line-height:1.5; color:var(--ap-color-soft); }
.ds-color-science { margin:0 0 40px; }
.ds-science-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin:6px 0 28px; }
.ds-science-heading h3 { margin:0; font-size:20px; font-weight:500; letter-spacing:-.4px; }
.ds-science-heading>span { color:var(--ap-color-soft); font-size:11px; }
.ds-lightness-chart { display:flex; height:215px; gap:18px; }
.ds-lightness-axis { flex:0 0 24px; height:180px; display:flex; flex-direction:column; justify-content:space-between; font-size:9px; color:#737373; font-variant-numeric:tabular-nums; }
.ds-lightness-columns { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; flex:1; min-width:0; }
.ds-lightness-point { display:flex; flex-direction:column; gap:16px; align-items:center; min-width:0; padding:0; background:none; border:0; border-radius:8px; color:var(--ap-color-muted); font:inherit; cursor:pointer; }
.ds-lightness-track { position:relative; height:180px; width:100%; display:flex; align-items:flex-end; justify-content:center; }
.ds-lightness-stem { position:relative; width:2px; height:var(--lightness); background:#444; min-height:1px; }
.ds-lightness-stem i { position:absolute; top:0; left:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; background:#8d8d8d; transition:transform 180ms,background-color 180ms; }
.ds-lightness-stem small { position:absolute; left:50%; bottom:calc(100% + 13px); transform:translateX(-50%); color:var(--ap-color-muted); font-size:10px; font-variant-numeric:tabular-nums; }
.ds-lightness-point[aria-pressed='true'] .ds-lightness-stem { background:#8a8a8a; }
.ds-lightness-point[aria-pressed='true'] .ds-lightness-stem i,.ds-lightness-point:hover .ds-lightness-stem i { transform:translate(-50%,-50%) scale(1.5); background:#ededed; }
.ds-lightness-name { font-size:10px; color:var(--ap-color-soft); }
.ds-lightness-point[aria-pressed='true'] .ds-lightness-name { color:#ededed; }
.ds-lightness-caption { display:flex; justify-content:space-between; gap:12px; margin:16px 0 28px; color:var(--ap-color-soft); font-size:10px; }
.ds-science-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; padding:25px; border-radius:16px; background:#222; margin:26px 0; }
.ds-science-metrics>div { display:flex; flex-direction:column; gap:12px; min-width:0; }
.ds-science-metrics>div>span { font-size:11px; color:var(--ap-color-soft); }
.ds-science-metrics small { margin-left:5px; color:#b2b2b2; }
.ds-science-metrics strong { font-size:26px; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.5px; color:#dedede; }
.ds-contrast-lab { display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; margin:34px 0 24px; }
.ds-contrast-preview { height:270px; padding:30px; border-radius:18px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; }
.ds-contrast-preview>strong { font-size:100px; line-height:1; font-weight:500; letter-spacing:-6px; }
.ds-contrast-preview>span { font-size:16px; font-weight:400; }
.ds-contrast-pair { color:#a5a5a5; font-size:10px; margin-top:20px; }
.ds-contrast-label { font-size:11px; color:var(--ap-color-soft); }
.ds-contrast-score { display:flex; align-items:baseline; gap:5px; margin:12px 0; }
.ds-contrast-score strong { color:#ededed; font-size:clamp(38px,5vw,60px); font-weight:400; line-height:1.1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.ds-contrast-score>span { color:var(--ap-color-soft); font-size:24px; }
.ds-contrast-verdict { font-size:12px; color:var(--ap-color-error); margin:0 0 22px; }
.ds-contrast-verdict[data-pass='true'] { color:#d1d1d1; }
.ds-contrast-surfaces { display:flex; gap:5px; flex-wrap:wrap; }
.ds-contrast-surfaces button { background:none; border:0; padding:10px 12px; border-radius:8px; color:var(--ap-color-soft); font:11px var(--ap-font-sans); cursor:pointer; }
.ds-contrast-surfaces button[aria-pressed='true'] { background:#292929; color:#ededed; }
.ds-contrast-hint { display:block; margin-top:15px; font-size:10px; line-height:1.5; color:var(--ap-color-soft); }
.ds-science-method>summary { display:flex; align-items:center; justify-content:space-between; list-style:none; padding:16px 0; cursor:pointer; color:var(--ap-color-muted); font-size:12px; }
.ds-science-method>summary::-webkit-details-marker { display:none; }
.ds-science-method>div { background:#222; border-radius:14px; padding:24px; }
.ds-science-method p { margin:0 0 16px; max-width:68ch; font-size:12px; line-height:1.8; color:var(--ap-color-muted); }
.ds-science-method p:last-child { margin:0; display:flex; gap:22px; }
.ds-science-method a { color:#d3d3d3; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:600px) { .ds-color-choice { grid-template-columns:1fr; gap:26px; padding-bottom:34px; } .ds-color-choice-reasons { gap:17px; } .ds-science-heading { align-items:flex-start; } .ds-science-heading>span { max-width:110px; text-align:right; line-height:1.5; font-size:10px; } .ds-lightness-chart { gap:8px; } .ds-lightness-columns { gap:3px; } .ds-lightness-name { font-size:8px; } .ds-lightness-caption { flex-direction:column; gap:6px; } .ds-science-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:24px; } .ds-contrast-lab { grid-template-columns:1fr; gap:24px; } .ds-contrast-preview { height:240px; } .ds-contrast-controls { padding:0 10px; } .ds-contrast-score strong { font-size:54px; } }
@media(prefers-reduced-motion:reduce) { .ds-lightness-stem i { transition:none; } }

/* A discrete hue wheel: solid sectors, controlled coordinates, no gradient fills. */
.ds-hue-study { margin:6px 0 52px; padding:32px; background:#202020; border-radius:22px; }
.ds-hue-heading { display:flex; justify-content:space-between; gap:24px; align-items:flex-end; margin-bottom:28px; }
.ds-hue-heading>div>span { font-size:11px; color:var(--ap-color-soft); }
.ds-hue-heading h3 { margin:12px 0 0; font-size:clamp(27px,3.4vw,38px); line-height:1.12; letter-spacing:-1px; font-weight:500; }
.ds-hue-heading>p { color:var(--ap-color-muted); font-size:12px; line-height:1.7; margin:0; }
.ds-hue-main { display:grid; grid-template-columns:1.1fr 1fr; gap:30px; align-items:center; }
.ds-hue-wheel-wrap { min-width:0; }
.ds-hue-wheel { width:100%; overflow:visible; display:block; }
.ds-hue-wheel path { cursor:pointer; transform-origin:170px 170px; transition:opacity 180ms; }
.ds-hue-wheel path:hover { opacity:.75; }
.ds-hue-wheel path[aria-pressed='true'],.ds-hue-wheel path:focus-visible { stroke:#f2f2f2; stroke-width:2; outline:none; }
.ds-hue-axis { fill:#8e8e8e; font-size:9px; font-family:var(--ap-font-sans); }
.ds-hue-center { fill:#ededed; font-size:39px; letter-spacing:-1.5px; font-family:var(--ap-font-sans); }
.ds-hue-center-label { fill:#929292; font-size:11px; font-family:var(--ap-font-sans); }
.ds-hue-wheel-caption { color:var(--ap-color-soft); text-align:center; font-size:10px; margin:6px 0 18px; font-variant-numeric:tabular-nums; }
.ds-hue-reset { display:flex; align-items:center; justify-content:center; gap:9px; background:#292929; color:#cfcfcf; padding:11px 13px; border:0; border-radius:9px; margin:0 auto; cursor:pointer; font:11px var(--ap-font-sans); }
.ds-hue-reset i { width:10px; height:10px; border-radius:50%; }
.ds-hue-reset>span { color:var(--ap-color-soft); font-size:9px; }
.ds-hue-reset[aria-pressed='true'] { background:#303030; }
.ds-hue-insight { min-width:0; }
.ds-hue-mode { color:var(--ap-color-muted); font-size:10px; }
.ds-hue-preview { margin:22px 0; padding:26px 22px; background:var(--ap-color-page); border-radius:16px; }
.ds-hue-preview strong { display:block; font-weight:500; font-size:clamp(24px,2.7vw,32px); line-height:1.15; letter-spacing:-.8px; }
.ds-hue-preview>span { display:block; margin-top:24px; font-size:13px; }
.ds-hue-coordinates { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ds-hue-coordinates>span { display:grid; gap:8px; color:var(--ap-color-soft); font-size:9px; }
.ds-hue-coordinates strong { color:#ddd; font-size:19px; font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:-.5px; }
.ds-hue-contrast { display:flex; gap:12px; align-items:center; margin-top:22px; }
.ds-hue-contrast strong { color:#dadada; font-size:15px; font-weight:500; }
.ds-hue-contrast>span { color:var(--ap-color-muted); font-size:10px; }
.ds-hue-code { display:flex; align-items:center; gap:8px; justify-content:space-between; margin-top:16px; }
.ds-hue-code code { color:#c8b9d8; font:10px/1.7 var(--ap-font-mono); overflow-wrap:anywhere; min-width:0; }
.ds-hue-code button { flex:none; border:0; border-radius:8px; background:#2b2b2b; width:32px; height:32px; display:grid; place-items:center; padding:0; color:#bababa; cursor:pointer; }
.ds-hue-dimensions { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:38px; }
.ds-hue-strip-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px; }
.ds-hue-strip-heading h4 { margin:0; font-weight:500; font-size:13px; color:#d4d4d4; }
.ds-hue-strip-heading>span { font-size:10px; color:var(--ap-color-soft); }
.ds-hue-chroma-strip,.ds-hue-lightness-strip { display:flex; overflow:hidden; border-radius:9px; }
.ds-hue-dimensions button { flex:1; min-width:0; height:48px; padding:0; border:0; cursor:pointer; }
.ds-hue-dimensions button:focus-visible { outline:2px solid #ededed; outline-offset:-4px; }
.ds-hue-dimensions p { font-size:10px; line-height:1.6; color:var(--ap-color-soft); margin:12px 0 0; }
.ds-hue-rationale { display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:36px 0 20px; }
.ds-hue-rationale>div>span { color:var(--ap-color-soft); font-size:10px; }
.ds-hue-rationale h4 { color:#dedede; font-size:18px; letter-spacing:-.3px; line-height:1.3; font-weight:500; margin:10px 0 12px; }
.ds-hue-rationale p { color:var(--ap-color-muted); font-size:12px; line-height:1.8; margin:0; }
.ds-hue-study .ds-science-method>div { background:#282828; }
@media(max-width:1050px) { .ds-hue-study { padding:26px; } .ds-hue-main { gap:20px; } .ds-hue-heading>p { font-size:11px; } .ds-hue-preview { padding:22px 18px; } .ds-hue-coordinates strong { font-size:17px; } }
@media(max-width:650px) { .ds-hue-study { padding:24px 20px; border-radius:18px; } .ds-hue-heading { flex-direction:column; align-items:flex-start; gap:18px; } .ds-hue-heading>p br { display:none; } .ds-hue-main { grid-template-columns:1fr; gap:30px; } .ds-hue-wheel-wrap { max-width:350px; width:100%; margin-inline:auto; } .ds-hue-preview strong { font-size:32px; } .ds-hue-coordinates strong { font-size:22px; } .ds-hue-dimensions,.ds-hue-rationale { grid-template-columns:1fr; gap:26px; } .ds-hue-heading h3 { font-size:30px; } .ds-hue-study .ds-science-method>div { padding:18px; } }
@media(prefers-reduced-motion:reduce) { .ds-hue-wheel path { transition:none; } }

/* A browsable button library inside the immersive canvas. */
#buttons .ds-studio-center { justify-content:flex-start; padding:104px 40px 36px; }
.ds-studio-center > .ds-button-library { display:block; max-width:980px; }
.ds-button-library-nav { display:flex; gap:4px; width:max-content; max-width:100%; padding:4px; border-radius:12px; background:#202020; margin:0 auto 28px; }
.ds-button-library-nav button { border:0; background:transparent; color:var(--ap-color-muted); padding:10px 20px; border-radius:9px; font-size:12px; }
.ds-button-library-nav button[aria-selected='true'] { background:#343434; color:var(--ap-color-text); }
.ds-button-library-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 24px 34px; }
.ds-button-library-hero h2 { font:500 clamp(26px,3vw,38px)/1.15 var(--ap-font-sans); letter-spacing:-.045em; margin:0 0 12px; }
.ds-button-library-hero > div > p { color:var(--ap-color-soft); font-size:11px; margin:0; }
.ds-button-feature { text-align:center; flex:none; }
.ds-button-response { margin:14px 0 0; color:var(--ap-color-muted); font-size:10px; min-height:16px; }
.ds-button-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ds-button-sample:not(.ds-button-feature) { position:relative; display:flex; flex-direction:column; justify-content:space-between; background:#202020; border-radius:18px; min-height:148px; padding:24px 18px 16px; }
.ds-button-sample-body { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; }
.ds-button-sample-caption { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:24px; font-size:11px; color:var(--ap-color-muted); }
.ds-button-sample-caption small { font-size:9px; color:var(--ap-color-soft); }
.ds-button-sample[data-selected='true'] .ds-button-inspect::after { content:''; display:inline-block; width:4px; height:4px; border-radius:50%; margin-left:7px; vertical-align:middle; background:currentColor; }
.ds-button-library-note { font-size:10px; color:var(--ap-color-soft); margin:22px 4px 0; line-height:1.8; }
.ds-button-state-grid .ds-button-sample { min-height:126px; }
.ds-button-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ds-button-corner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ds-button-size-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.ds-button-size-row .ds-button-sample { background:transparent; }
.ds-button-sample .ap-button[data-preview-state='hover'] { background:var(--ap-button-hover); }
.ds-button-sample .ap-button[data-preview-state='pressed'] { transform:translateY(2px) scale(.97); box-shadow:none; }
.ds-button-sample .ap-button[data-preview-state='focus'] { outline:2px solid var(--ap-color-action); outline-offset:5px; }
.ds-button-popover { position:absolute; z-index:3; top:90px; right:20px; padding:6px; border-radius:14px; background:#303030; box-shadow:var(--ap-shadow-overlay); }
.ds-button-popover .ap-button { display:flex; width:100%; background:transparent; box-shadow:none; justify-content:flex-start; }
#buttons[hidden] .ap-button,#buttons[hidden] .ap-button__activity i,
#buttons [role='tabpanel'][hidden] .ap-button,#buttons [role='tabpanel'][hidden] .ap-button__activity i,
.ds-ambient-paused #buttons .ap-button,.ds-ambient-paused #buttons .ap-button__activity i { animation-play-state:paused; }
@media(max-width:1000px) {
  #buttons .ds-studio-center { padding-inline:24px; }
  .ds-button-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ds-button-library-hero { padding-inline:10px; }
  .ds-button-sample-caption { flex-wrap:wrap; }
}
@media(max-width:760px) {
  #buttons .ds-studio-center { padding:86px 16px 28px; }
  .ds-button-library-nav { margin-bottom:22px; }
  .ds-button-library-nav button { padding:10px 16px; }
  .ds-button-library-hero { flex-direction:column; text-align:center; gap:26px; padding:10px 0 28px; }
  .ds-button-library-hero h2 { font-size:32px; }
  .ds-button-library-grid { gap:10px; }
  .ds-button-sample:not(.ds-button-feature) { padding:20px 10px 14px; border-radius:14px; min-height:132px; }
  .ds-button-sample .ap-button-slot { --ap-button-width:142px; }
  .ds-button-feature .ap-button-slot { --ap-button-width:184px; }
  .ds-button-sample .ap-button--morph { font-size:12px; }
  .ds-button-feature .ap-button { font-size:15px; }
  .ds-button-sample-caption { font-size:10px; gap:6px; }
  .ds-button-sample-caption small { font-size:8px; }
  .ds-button-group-grid { grid-template-columns:1fr; }
  .ds-button-size-row { grid-template-columns:1fr; }
  .ds-button-size-row .ds-button-sample { min-height:100px; }
}
@media(max-width:370px) { .ds-button-library-grid { grid-template-columns:1fr; } .ds-button-library-nav button { padding-inline:12px; } }

.ds-button-inspect { display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; background:none; color:inherit; font:inherit; text-align:left; }
.ds-button-inspect > span { display:inline-flex; opacity:0; transition:opacity 160ms; }
.ds-button-inspect svg { width:12px; height:12px; }
.ds-button-sample:hover .ds-button-inspect > span,.ds-button-inspect:focus-visible > span { opacity:1; }
@media(hover:none) { .ds-button-inspect > span { opacity:.6; } }
@media(prefers-reduced-motion:reduce) { .ds-button-inspect > span { transition:none; } }

/* Input library: a composed product board and a separate specimen catalogue. */
#inputs .ds-studio-center { justify-content:flex-start; padding:104px 40px 40px; }
.ds-studio-center > .ds-input-library { display:block; max-width:1040px; }
.ds-input-views { display:flex; width:max-content; margin:0 auto 32px; padding:4px; gap:4px; border-radius:12px; background:#202020; }
.ds-input-views button { border:0; background:none; padding:10px 22px; color:var(--ap-color-muted); font-size:12px; border-radius:9px; }
.ds-input-views button[aria-selected='true'] { background:#343434; color:var(--ap-color-text); }
.ds-input-board-heading,.ds-input-variant-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin:0 6px 30px; }
.ds-input-board-heading h2,.ds-input-variant-heading h2 { margin:0; font:500 clamp(28px,3.5vw,42px)/1.1 var(--ap-font-sans); letter-spacing:-.05em; }
.ds-input-board-heading > span,.ds-input-variant-heading > span { color:var(--ap-color-soft); font-size:10px; }
.ds-input-sample { position:relative; min-width:0; background:#202020; border-radius:20px; padding:24px; }
.ds-input-sample > header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:24px; color:var(--ap-color-muted); font-size:11px; }
.ds-input-sample > header > span { display:inline-flex; align-items:center; gap:10px; }
.ds-input-inspect { display:grid; place-items:center; flex:none; width:28px; height:28px; padding:0; border:0; border-radius:8px; background:none; color:var(--ap-color-muted); opacity:0; transition:opacity 160ms,background-color 160ms; }
.ds-input-sample:hover .ds-input-inspect,.ds-input-inspect:focus-visible { opacity:1; }
.ds-input-inspect:hover { background:var(--ap-color-control); }
.ds-input-sample[data-selected='true'] > header > span::after { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; }
.ds-input-search-scene { padding:22px 28px; margin-bottom:14px; }
.ds-input-search-scene > header { margin-bottom:14px; }
.ds-input-search-scene .ap-input-shell { min-height:56px; }
.ds-input-search-scene .ap-input { font-size:18px; }
.ds-input-search-results { display:flex; gap:10px; margin-top:18px; }
.ds-input-search-results > button { display:flex; flex:1; align-items:center; gap:10px; min-width:0; border:0; border-radius:10px; background:#272727; color:var(--ap-color-muted); padding:12px 14px; font-size:12px; }
.ds-input-search-results > button > svg:last-child { margin-left:auto; }
.ds-input-search-results > button:hover { background:#303030; color:var(--ap-color-text); }
.ds-input-search-status { margin-top:12px; }
.ds-input-board-grid { display:grid; grid-template-columns:1.12fr 1fr; gap:14px; }
.ds-input-room-scene { display:flex; flex-direction:column; padding:28px; }
.ds-input-room-scene h3 { margin:12px 0 40px; font:500 34px/1.1 var(--ap-font-sans); letter-spacing:-1.4px; }
.ds-input-room-scene .ds-input-sample-body { margin-top:auto; }
.ds-input-form-action { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; }
.ds-input-profile-scene form { display:grid; gap:18px; }
.ds-input-profile-scene .ds-input-form-action { margin-top:0; }
.ds-input-profile-mark { display:flex; align-items:center; gap:14px; margin:-4px 0 24px; color:var(--ap-color-text); font-size:36px; letter-spacing:-2px; }
.ds-input-profile-mark > span { font-size:12px; letter-spacing:0; color:var(--ap-color-soft); }
.ds-input-message-scene { grid-column:1 / -1; }
.ds-input-message-scene textarea { min-height:88px; }
.ds-input-message-scene .ap-input-counter { justify-self:end; margin-top:-26px; }
.ds-input-variant-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ds-input-variant-grid .ds-input-sample { padding:18px 22px 24px; }
.ds-input-variant-grid .ds-input-sample > header { margin-bottom:18px; }
.ds-input-section-label { margin:32px 6px 16px; font-size:13px; font-weight:500; color:var(--ap-color-muted); }
.ds-input-size-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:start; }
.ds-input-sample .ap-input[data-preview-state='focus'] { outline:2px solid var(--ap-color-action); outline-offset:3px; }
@media(max-width:1050px) { #inputs .ds-studio-center { padding-inline:24px; } .ds-input-board-heading,.ds-input-variant-heading { align-items:flex-start; flex-direction:column; gap:14px; } .ds-input-board-grid { grid-template-columns:1fr 1fr; } .ds-input-room-scene,.ds-input-profile-scene { padding:22px; } .ds-input-form-action { flex-wrap:wrap; } }
@media(max-width:760px) {
  #inputs .ds-studio-center { padding:88px 16px 28px; }
  .ds-input-views { margin-bottom:26px; }
  .ds-input-board-heading h2,.ds-input-variant-heading h2 { font-size:34px; }
  .ds-input-board-grid,.ds-input-variant-grid,.ds-input-size-grid { grid-template-columns:1fr; }
  .ds-input-search-scene { padding:18px; }
  .ds-input-search-scene .ap-input { font-size:16px; }
  .ds-input-search-results { gap:7px; }
  .ds-input-search-results > button { padding:12px 10px; font-size:11px; gap:8px; }
  .ds-input-search-results > button > svg:last-child { display:none; }
  .ds-input-search-results > button > svg:first-child { width:14px; }
  .ds-input-room-scene h3 { margin-bottom:30px; }
  .ds-input-sample { border-radius:16px; }
  .ds-input-inspect { opacity:.7; }
}
@media(prefers-reduced-motion:reduce) { .ds-input-inspect { transition:none; } }

/* Button shares the Colors documentation frame, rhythm and inline disclosures. */
#buttons.ds-button-document > .ds-workbench { background:transparent; box-shadow:none; border-radius:0; }
#buttons.ds-button-document .ds-button-library { display:block; padding:0; max-width:none; min-height:0; }
.ds-button-choice { margin:42px 0 32px; }
.ds-button-document .ds-button-library-nav { margin:0 0 32px; padding:0; gap:6px; background:none; }
.ds-button-document .ds-button-library-nav button { background:#222; padding:10px 16px; }
.ds-button-document .ds-button-library-nav button:hover { color:var(--ap-color-text); background:#2b2b2b; }
.ds-button-document .ds-button-library-hero { padding:36px; min-height:250px; border-radius:22px; background:#202020; }
.ds-button-document .ds-button-library-hero h3 { font:500 30px/1.15 var(--ap-font-sans); letter-spacing:-.045em; margin:0 0 12px; max-width:260px; }
.ds-button-document .ds-button-library-hero > div > p { max-width:235px; font-size:12px; line-height:1.8; }
.ds-button-document .ds-button-feature { padding:25px 12px; }
.ds-button-timeline { display:flex; align-items:center; gap:9px; margin-top:28px; font-size:10px; color:var(--ap-color-soft); }
.ds-button-timeline i { width:18px; height:1px; background:#404040; }
.ds-button-timeline span { transition:color var(--ap-duration-feedback); }
.ds-button-timeline [data-active='true'] { color:var(--ap-color-text); }
.ds-button-settings { margin:10px 0 40px; background:transparent; }
.ds-button-settings .ds-controls { justify-content:flex-start; background:#222; border-radius:14px 14px 0 0; padding:22px; flex-wrap:wrap; }
.ds-button-settings .ds-token-strip { background:#222; border-radius:0 0 14px 14px; padding:16px 22px 22px; }
.ds-button-document .ds-button-library-panel { margin-top:44px; scroll-margin-top:28px; }
.ds-button-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin:0 2px 20px; }
.ds-button-section-heading h3 { margin:0; font-size:22px; font-weight:500; letter-spacing:-.5px; color:var(--ap-color-text); }
.ds-button-section-heading p { margin:0; font-size:11px; color:var(--ap-color-soft); }
.ds-button-document #button-view-styles .ds-button-library-grid { gap:2px; overflow:hidden; border-radius:18px; }
.ds-button-document #button-view-styles .ds-button-sample { border-radius:0; min-height:176px; padding:28px 18px 18px; }
.ds-button-document #button-view-styles .ds-button-sample:nth-child(2n) { background:#242424; }
.ds-button-document .ds-code-fold { margin:10px 0 36px; background:transparent; scroll-margin-top:24px; }
.ds-button-document .ds-code-fold > summary { padding:16px 2px; }
.ds-button-document .ds-code { max-height:440px; }
.ds-button-document .ds-button-state-grid { gap:20px; }
.ds-button-document .ds-button-state-grid .ds-button-sample { padding:22px 12px 8px; background:transparent; min-height:130px; }
.ds-button-document .ds-button-group-grid .ds-button-sample { min-height:180px; }
.ds-button-document .ds-button-corner-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ds-button-document .ds-button-corner-grid .ds-button-sample { min-height:180px; }
.ds-button-document .ds-button-size-row { align-items:end; margin-top:16px; }
.ds-button-document .ds-button-size-row .ds-button-sample { min-height:120px; }
@media(max-width:1050px) { .ds-button-document .ds-button-library-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .ds-button-document .ds-button-library-hero { padding:28px; } }
@media(max-width:760px) {
  .ds-button-choice { margin-top:32px; }
  .ds-button-document .ds-button-library-hero { padding:28px 22px; gap:4px; }
  .ds-button-document .ds-button-library-hero > div > p { max-width:260px; }
  .ds-button-document .ds-button-library-nav { gap:5px; width:100%; }
  .ds-button-document .ds-button-library-nav button { flex:1; padding:10px 8px; font-size:11px; }
  .ds-button-section-heading { flex-direction:column; gap:8px; }
  .ds-button-document #button-view-styles .ds-button-sample { padding-inline:10px; min-height:155px; }
  .ds-button-document .ds-button-group-grid { grid-template-columns:1fr; }
  .ds-button-document .ds-button-sample .ap-button-slot { --ap-button-width:136px; }
  .ds-button-document .ds-button-feature .ap-button-slot { --ap-button-width:184px; }
  .ds-button-document .ds-button-sample .ap-button-group { gap:5px; }
  .ds-button-document .ds-button-settings .ds-controls label { flex-basis:100%; }
  .ds-button-document .ds-code { font-size:10px; }
}
@media(max-width:370px) { .ds-button-document .ds-button-library-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .ds-button-timeline span { transition:none; } }

.ds-button-choice .ds-color-choice-reasons > span i { background:var(--ap-color-muted); }

/* Switch document: a continuous page, like Button. */
.ds-doc > .ds-workbench { background:transparent; box-shadow:none; border-radius:0; }
.ds-doc-library { display:block; padding:0; }
.ds-doc-choice { margin:42px 0 32px; }
.ds-doc-choice .ds-color-choice-reasons > span i { background:var(--ap-color-muted); }
.ds-doc-hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:36px; min-height:250px; border-radius:22px; background:#202020; }
.ds-doc-hero h3 { font:500 30px/1.15 var(--ap-font-sans); letter-spacing:-.045em; margin:0 0 12px; max-width:260px; color:var(--ap-color-text); }
.ds-doc-hero > div > p { max-width:235px; font-size:12px; line-height:1.8; color:var(--ap-color-soft); margin:0; }
.ds-doc-feature { flex:none; width:min(100%,340px); padding:22px 24px 20px; border-radius:18px; background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-doc-feature .ap-switch-field { width:100%; }
.ds-doc-response { margin:16px 0 0; color:var(--ap-color-muted); font-size:10px; min-height:16px; }
.ds-doc-trail { display:flex; align-items:center; gap:9px; margin-top:12px; font-size:10px; color:var(--ap-color-soft); }
.ds-doc-trail i { width:18px; height:1px; background:#404040; }
.ds-doc-trail span { transition:color var(--ap-duration-feedback); }
.ds-doc-trail [data-active='true'] { color:var(--ap-color-text); }
.ds-doc-settings { margin:10px 0 40px; background:transparent; }
.ds-doc-settings .ds-controls { justify-content:flex-start; background:#222; border-radius:14px 14px 0 0; padding:22px; flex-wrap:wrap; }
.ds-doc-settings .ds-token-strip { background:#222; border-radius:0 0 14px 14px; padding:16px 22px 22px; }
.ds-doc-nav { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 32px; }
.ds-doc-nav button:not(.ds-tt-pill) { border:0; background:#222; color:var(--ap-color-muted); padding:10px 16px; border-radius:9px; font-size:12px; transition:background-color var(--ap-duration-feedback),color var(--ap-duration-feedback); }
.ds-doc-nav button:not(.ds-tt-pill):hover { color:var(--ap-color-text); background:#2b2b2b; }
.ds-doc-panel { margin-top:44px; scroll-margin-top:28px; }
.ds-doc-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin:0 2px 20px; }
.ds-doc-section-heading h3 { margin:0; font-size:22px; font-weight:500; letter-spacing:-.5px; color:var(--ap-color-text); }
.ds-doc-section-heading p { margin:0; font-size:11px; color:var(--ap-color-soft); }
.ds-doc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ds-doc-sample:not(.ds-doc-feature) { position:relative; display:flex; flex-direction:column; justify-content:space-between; background:#202020; border-radius:18px; min-height:150px; padding:24px 22px 16px; }
.ds-doc-sample-body { display:flex; align-items:center; justify-content:center; flex:1; min-width:0; }
.ds-doc-sample-body > .ap-switch-field,.ds-doc-sample-body > .ap-switch-group { width:100%; }
.ds-doc-sample-caption { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:24px; font-size:11px; color:var(--ap-color-muted); }
.ds-doc-sample-caption small { font-size:9px; color:var(--ap-color-soft); }
.ds-doc-inspect { display:inline-flex; align-items:center; gap:6px; padding:4px 0; border:0; background:none; color:inherit; font:inherit; text-align:left; }
.ds-doc-inspect > span { display:inline-flex; opacity:0; transition:opacity 160ms; }
.ds-doc-inspect svg { width:12px; height:12px; }
.ds-doc-sample:hover .ds-doc-inspect > span,.ds-doc-inspect:focus-visible > span { opacity:1; }
.ds-doc-sample[data-selected='true'] .ds-doc-inspect::after { content:''; display:inline-block; width:4px; height:4px; border-radius:50%; margin-left:7px; vertical-align:middle; background:currentColor; }
.ds-doc-subhead { display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin:34px 2px 14px; }
.ds-doc-subhead:first-child { margin-top:0; }
.ds-doc-subhead h4 { margin:0; font-size:14px; font-weight:500; color:var(--ap-color-text); }
.ds-doc-subhead p { margin:0; font-size:11px; color:var(--ap-color-soft); }
.ds-doc-grid--forms { grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; overflow:hidden; border-radius:18px; }
.ds-doc-grid--forms .ds-doc-sample { border-radius:0; min-height:168px; padding:26px 16px 16px; }
.ds-doc-grid--forms .ds-doc-sample:nth-child(2n) { background:#242424; }
.ds-doc-grid--interaction { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ds-doc-grid--interaction .ds-doc-sample { min-height:190px; }
.ds-doc-sample-status { margin:14px 0 0; min-height:16px; font-size:10px; color:var(--ap-color-muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ds-doc-sample-status .ap-button { --ap-button-height:26px; padding:4px 10px; font-size:10px; min-inline-size:0; }
.ds-doc-sample-body { flex-direction:column; align-items:stretch; justify-content:center; }
.ds-doc-sample-body > .ap-switch,.ds-doc-sample-body > .ap-switch-options,.ds-doc-sample-body > .ap-segmented { align-self:center; max-width:100%; }
.ds-doc-sample-body > .ap-field,.ds-doc-sample-body > .ds-doc-scene { width:100%; }
.ds-doc-sample-body > .ap-field > .ap-segmented { max-width:100%; }
.ds-doc-narrow { width:min(100%,250px); align-self:center; }
.ds-doc-sample .ap-segmented > button[data-preview-state='hover'] { color:var(--ap-color-text); background:var(--ap-color-line); }
.ds-doc-sample .ap-segmented > button[data-preview-state='focus'] { outline:2px solid var(--ap-color-action); outline-offset:2px; }
.ds-doc-swatch { width:100%; height:52px; margin-top:14px; border-radius:12px; background:#202020; box-shadow:var(--ap-shadow-inset); transition:background-color var(--ap-duration-feedback); }
.ds-doc-swatch[data-theme='slate'] { background:#303030; }
.ds-doc-swatch[data-theme='ink'] { background:#121212; }
.ds-doc-scene--toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 8px 8px 16px; border-radius:14px; background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-doc-scene-title { font-size:13px; font-weight:500; color:var(--ap-color-text); }
.ds-doc-scene--card { padding:14px 18px 8px; border-radius:16px; background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-doc-scene--card > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; font-size:13px; font-weight:500; color:var(--ap-color-text); }
.ds-doc-scene--card ol { margin:0; padding:0; list-style:none; }
.ds-doc-scene--card li { display:grid; grid-template-columns:18px 1fr auto; gap:10px; padding:8px 0; font-size:12px; color:var(--ap-color-muted); }
.ds-doc-scene--card li > span:first-child { color:var(--ap-color-soft); }
.ds-doc-scene--card li > span:nth-child(2) { color:var(--ap-color-text); }
.ds-doc-scene--card li > span:last-child { font-variant-numeric:tabular-nums; }
.ds-doc-scene--filter { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ds-doc-scene--filter > small { font-size:11px; color:var(--ap-color-soft); }
@media(prefers-reduced-motion:reduce) { .ds-doc-swatch { transition:none; } }
.ds-doc-grid--library { grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; overflow:hidden; border-radius:18px; }
.ds-doc-grid--library .ds-doc-sample { border-radius:0; min-height:176px; padding:28px 18px 18px; }
.ds-doc-grid--library .ds-doc-sample:nth-child(2n) { background:#242424; }
.ds-doc-grid--rows { gap:2px; overflow:hidden; border-radius:18px; }
.ds-doc-grid--rows .ds-doc-sample { border-radius:0; min-height:150px; padding:28px 24px 18px; }
.ds-doc-grid--rows .ds-doc-sample:nth-child(2n) { background:#242424; }
.ds-doc-grid--group { grid-template-columns:1fr; margin-top:12px; }
.ds-doc-grid--group .ds-doc-sample { padding:26px 24px 18px; }
.ap-switch-group { display:grid; gap:10px; }
.ds-doc-grid--states { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.ds-doc-grid--states .ds-doc-sample { background:transparent; padding:22px 12px 8px; min-height:120px; }
.ds-doc-grid--sizes { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; }
.ds-doc-grid--sizes .ds-doc-sample { min-height:140px; }
.ds-doc-grid--layout .ds-doc-sample { min-height:170px; }
.ds-doc-compact { width:auto !important; gap:10px; padding:8px 8px 8px 14px; border-radius:12px; background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-doc-compact .ap-label { font-size:12px; color:var(--ap-color-muted); }
.ds-doc-sample .ap-switch[data-preview-state='hover'] .ap-switch__track { background:var(--ap-button-secondary-hover); }
.ds-doc-sample .ap-switch[data-preview-state='focus'] { outline:2px solid var(--ap-color-action); outline-offset:3px; border-radius:var(--ap-radius-control); }
.ds-doc-note { font-size:10px; color:var(--ap-color-soft); margin:22px 4px 0; line-height:1.8; }
.ds-doc .ds-code-fold { margin:10px 0 36px; background:transparent; scroll-margin-top:24px; }
.ds-doc .ds-code-fold > summary { padding:16px 2px; }
.ds-doc .ds-code { max-height:440px; }
@media(max-width:1050px) { .ds-doc-grid--states,.ds-doc-grid--library,.ds-doc-grid--forms,.ds-doc-grid--interaction { grid-template-columns:repeat(2,minmax(0,1fr)); } .ds-doc-hero { padding:28px; } }
@media(max-width:760px) {
  .ds-doc-choice { margin-top:32px; }
  .ds-doc-hero { flex-direction:column; align-items:stretch; padding:28px 22px; gap:22px; }
  .ds-doc-hero h3 { max-width:none; }
  .ds-doc-feature { width:100%; }
  .ds-doc-nav { gap:5px; width:100%; }
  .ds-doc-nav button:not(.ds-tt-pill) { flex:1; padding:10px 8px; font-size:11px; }
  .ds-doc-section-heading { flex-direction:column; gap:8px; }
  .ds-doc-grid,.ds-doc-grid--sizes { grid-template-columns:minmax(0,1fr); }
  .ds-doc-grid--states { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .ds-doc-grid--library,.ds-doc-grid--interaction { grid-template-columns:minmax(0,1fr); }
  .ds-doc-grid--forms { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #segmented .ds-doc-grid--forms { grid-template-columns:minmax(0,1fr); } /* A segmented control is wider than a switch; one per row keeps every option in view. */
  .ds-doc-grid--forms .ds-doc-sample { min-height:150px; padding-inline:12px; }
  .ds-doc-subhead { flex-direction:column; gap:4px; }
  .ds-doc-grid--library .ds-doc-sample { min-height:150px; padding-inline:14px; }
  .ds-doc-grid--rows .ds-doc-sample { padding-inline:18px; min-height:130px; }
  .ds-doc-settings .ds-controls label { flex-basis:100%; }
  .ds-doc .ds-code { font-size:10px; }
}
@media(hover:none) { .ds-doc-inspect > span { opacity:.6; } }
@media(prefers-reduced-motion:reduce) { .ds-doc-trail span,.ds-doc-inspect > span,.ds-doc-nav button { transition:none; } }

/* Loaders as a document: forms, voices, behaviours, scenes. Documentation chrome only; every component lives in components.css.
 * Structure is 2px seams between solid cells, never lines. Nothing here is fixed: the section is transformed while it reveals. */
:is(#loaders,#voice) .ds-doc-sample .ap-loader:not([data-layout]) { min-height:72px; }
:is(#loaders,#voice) .ds-doc-grid--interaction .ds-doc-sample { min-height:220px; }
#loaders .ds-doc-feature .ap-loader:not([data-layout]) { min-height:160px; }
#voice .ds-doc-sample-body > .ap-voice:not([data-form='wave']) { align-self:center; }
.ds-doc-sample[data-span='2'] { grid-column:span 2; }
#loaders .ds-doc-grid--forms .ap-button-slot { --ap-button-width:min(184px,100%); max-width:100%; } /* a phone cell is narrower than the button's resting width */
.ds-ld-motion { display:inline-flex; align-items:center; gap:10px; margin-left:auto; }
.ds-ld-motion small { font-size:10px; color:var(--ap-color-soft); }
#loaders .ds-doc-trail { flex-wrap:wrap; row-gap:6px; } /* five phases; on a phone they take two lines */
.ds-ld-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin-top:14px; }
.ds-ld-caption { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:12px 4px 0; font-size:10px; color:var(--ap-color-soft); }
.ds-ld-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ds-ld-timeline { display:grid; gap:6px; margin-top:14px; }
.ds-ld-timeline > span { display:flex; gap:2px; height:6px; border-radius:3px; overflow:hidden; }
.ds-ld-timeline i { flex:0 1 0; min-width:0; }
.ds-ld-timeline i[data-seg='hidden'] { background:#2b2b2b; }
.ds-ld-timeline i[data-seg='visible'] { background:var(--ap-color-muted); }
.ds-ld-timeline i[data-seg='held'] { background:var(--ap-color-soft); }
.ds-ld-timeline small,.ds-ld-elapsed { font:400 10px/1.4 var(--ap-font-mono); font-variant-numeric:tabular-nums; color:var(--ap-color-soft); text-align:center; }
.ds-ld-elapsed { min-width:6ch; color:var(--ap-color-muted); }
.ds-ld-rule { margin:10px 0 0; font-size:10px; color:var(--ap-color-soft); text-align:center; }
.ds-ld-rows { width:100%; margin:0; padding:0; list-style:none; }
.ds-ld-rows li { display:grid; grid-template-columns:20px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:36px; font-size:12px; color:var(--ap-color-muted); }
.ds-ld-rows li > span:first-child { color:var(--ap-color-soft); text-align:center; }
.ds-ld-rows li > span:nth-child(2) { color:var(--ap-color-text); }
.ds-ld-rows li > span:last-child { font-family:var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-ld-code { margin:0; font:500 28px/1.2 var(--ap-font-mono); letter-spacing:.02em; color:var(--ap-color-text); text-align:center; }
.ds-ld-avatar { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:var(--ap-color-control); color:var(--ap-color-text); font:500 12px/1 var(--ap-font-sans); }
.ap-voice[data-size='lg'] > .ds-ld-avatar { font-size:16px; }
.ds-ld-room { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.ds-ld-scene { display:flex; justify-content:center; }
.ds-ld-fieldnote { display:block; margin-top:10px; min-height:20px; }
.ds-ld-card { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:14px; width:100%; }
.ds-ld-card > .ap-loader[data-variant='skeleton'] { width:min(100%,300px); }
.ds-ld-cardtext { display:grid; gap:4px; margin:0; font-size:12px; color:var(--ap-color-soft); }
.ds-ld-cardtext strong { font-size:14px; font-weight:500; color:var(--ap-color-text); }
.ds-ld-frame { position:relative; width:100%; border-radius:14px; background:var(--ap-surface-raised); overflow:hidden; }
.ds-ld-page { padding:16px 18px 10px; }
.ds-ld-page header { margin-bottom:8px; font-size:13px; font-weight:500; color:var(--ap-color-text); }
.ds-ld-dock { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:14px 20px; width:100%; padding:14px 18px 26px; border-radius:16px; background:var(--ap-surface-raised); /* room under the mic for its clock */ box-shadow:var(--ap-shadow-raised); }
.ds-ld-dockwords { display:grid; gap:4px; min-width:0; }
.ds-ld-dockwords .ap-loader { justify-items:start; }
.ds-ld-transcript { margin:0; font-size:12px; color:var(--ap-color-text); }
.ds-ld-marks { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:20px; }
.ds-ld-marks + .ap-loader { margin-top:18px; }
.ds-ld-marks[data-stack] { flex-direction:column; gap:16px; }
.ds-ld-inlinetext { display:flex; align-items:center; gap:10px; margin:0; font-size:12px; color:var(--ap-color-muted); }
.ds-ld-score { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; border-radius:18px; overflow:hidden; }
.ds-ld-scorerow { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; padding:20px 22px; background:#202020; }
.ds-ld-scorerow:nth-child(2n) { background:#242424; }
.ds-ld-scorerow h5 { margin:0; font-size:12px; font-weight:500; color:var(--ap-color-text); }
.ds-ld-scorerow > div { display:flex; flex-wrap:wrap; gap:2px; border-radius:10px; overflow:hidden; }
.ds-ld-scorerow > div > span { flex:1 1 0; display:grid; align-content:start; gap:5px; min-width:64px; padding:10px; background:var(--ap-color-control); }
.ds-ld-scorerow strong { font:500 12px/1 var(--ap-font-mono); font-variant-numeric:tabular-nums; color:var(--ap-color-text); }
.ds-ld-scorerow small { font-size:9px; color:var(--ap-color-soft); overflow-wrap:anywhere; }
.ds-ld-scorerow p { margin:0; font-size:10px; line-height:1.7; color:var(--ap-color-soft); }
.ds-ld-glyphs { display:flex; flex-wrap:wrap; justify-content:center; gap:18px; margin:0; padding:28px; list-style:none; border-radius:22px; background:var(--ap-color-inset); color:var(--ap-color-muted); }
.ds-ld-glyphs li { display:grid; justify-items:center; gap:8px; font-size:10px; }
.ds-ld-dots { display:inline-flex; align-items:center; gap:3px; height:18px; }
.ds-ld-dots i { width:3px; height:3px; border-radius:50%; background:currentColor; }
/* Previews that stand for reduced motion are still, whatever the reader's own setting. */
#loaders .ap-loader[data-preview-state='reduced'] .ap-loader-mark :is(i,.ap-loader-spin,.ap-loader-arc) { animation:none; }
#loaders .ap-loader[data-preview-state='reduced'] .ap-loader-mark i { opacity:.5; scale:1; translate:0 0; }
#loaders .ap-loader[data-variant='pulse'][data-preview-state='reduced'] .ap-loader-mark i { opacity:calc(.5 + var(--cell) * .2); }
#loaders .ap-loader[data-variant='orbit'][data-preview-state='reduced'] .ap-loader-arc { stroke-dasharray:75 25; }
#loaders .ap-loader[data-variant='orbit'][data-preview-state='reduced'] .ap-loader-spin { rotate:-90deg; }
:is(#loaders,#voice)[data-playback='paused'] :is(.ap-voice-visual,.ap-voice-button__activity i,.ap-button__activity i),.ds-ambient-paused :is(#loaders,#voice) :is(.ap-loader-mark i,.ap-loader-spin,.ap-loader-arc,.ap-voice-visual) { animation-play-state:paused; }
/* The voice instrument: stage, strip and scope, three solid blocks on 2px seams. The strip wraps; it is not sticky. */
.ds-ld-voice { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; border-radius:22px; overflow:hidden; background:var(--ap-color-page); }
.ds-ld-voicestage { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; align-content:center; gap:14px; min-height:300px; padding:36px 24px 22px; background:var(--ap-color-inset); }
.ds-ld-voicehost { display:grid; place-items:center; width:100%; min-height:130px; }
.ds-ld-voicehost > .ap-voice[data-form='wave'] { width:min(100%,420px); }
.ds-ld-voiceword { min-height:1.5em; margin:0; font-size:13px; color:var(--ap-color-text); text-align:center; }
.ds-ld-voicestage:is([data-state='error'],[data-state='denied']) .ds-ld-voiceword { color:var(--ap-color-error); }
.ds-ld-voicetrail { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; font-size:10px; color:var(--ap-color-soft); }
.ds-ld-voicetrail span { transition:color var(--ap-duration-feedback) var(--ap-ease-feedback); }
.ds-ld-voicetrail [data-active='true'] { color:var(--ap-color-text); }
.ds-ld-facts { margin:0; font-size:10px; color:var(--ap-color-soft); text-align:center; }
.ds-ld-strip { display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; padding:14px 16px; background:#242424; }
.ds-ld-statepick { max-width:100%; }
.ds-ld-micwrap { display:inline-flex; align-items:center; gap:8px; }
.ds-ld-permission { font-size:10px; color:var(--ap-color-soft); }
.ds-tt-pill[data-kind='slider']:has(input:disabled) { opacity:.45; }
.ds-ld-scope { display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; padding:12px 16px; background:var(--ap-color-inset); }
.ds-ld-scope canvas { display:block; flex:1 1 160px; min-width:0; height:40px; }
.ds-tt-pill.ds-ld-readout { cursor:default; }
.ds-ld-micnote { min-height:16px; margin:12px 4px 0; font-size:11px; color:var(--ap-color-muted); }
.ds-ld-panelnote { margin:18px 4px 12px; font-size:12px; color:var(--ap-color-muted); }
.ds-ld-sheet { margin-bottom:8px; border-radius:14px; background:#202020; }
@media(max-width:760px) {
  .ds-doc-sample[data-span='2'] { grid-column:auto; }
  .ds-ld-motion { margin-left:0; flex-wrap:wrap; }
  .ds-ld-statepick { overflow-x:auto; overscroll-behavior-x:contain; padding:4px 3px; margin:-4px -3px; }
  .ds-ld-dock { grid-template-columns:auto minmax(0,1fr); row-gap:28px; padding:14px 14px 18px; }
  .ds-ld-dock > .ap-voice[data-form='bars'] { grid-column:2; grid-row:1; justify-self:start; }
  .ds-ld-dock > .ds-ld-dockwords,.ds-ld-dock > .ds-ld-room { grid-column:1 / -1; }
  .ds-ld-scorerow { padding:18px 14px; }
  .ds-ld-scorerow > div { flex-wrap:wrap; }
  .ds-ld-scorerow > div > span { flex-basis:30%; }
  .ds-ld-voicestage { min-height:260px; padding:28px 14px 18px; }
  .ds-ld-strip { padding:12px; }
}
@media(prefers-reduced-motion:reduce) { .ds-ld-voicetrail span { transition:none; } }
@media(forced-colors:active) { .ds-ld-timeline i,.ds-ld-scorerow > div > span { forced-color-adjust:none; background:GrayText; } .ds-ld-timeline i[data-seg='visible'] { background:CanvasText; } }

/* Getting started: a hero, the system drawn as a map, then type, color and the components.
   The map is an instrument: square marks, mono chips, a registration marker on what is pointed at,
   a readout in the corner and a key along the foot. Everything else stays graphite and still. */
.ds-overview { --ov-gap:88px; --ov-rule:var(--ap-color-line); }
.ds-ov-hero { padding:16px 0 0; }
.ds-ov-kicker { display:flex; align-items:center; gap:10px; margin:0; font:500 11px/16px var(--ap-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ap-color-soft); }
.ds-ov-kicker::before { content:''; width:8px; height:8px; background:var(--ap-color-text); }
.ds-overview .ds-ov-headline { max-width:11ch; margin:24px 0 24px; font:500 clamp(56px,7.4vw,108px)/.94 var(--ap-font-sans); letter-spacing:-.055em; color:var(--ap-color-text); text-wrap:balance; }
.ds-ov-lead { max-width:48ch; margin:0; font-size:17px; line-height:28px; color:var(--ap-color-muted); text-wrap:pretty; }
.ds-ov-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; margin-top:32px; }
.ds-ov-browse { text-decoration:none; }
.ds-ov-textlink { font-size:14px; line-height:20px; color:var(--ap-color-muted); text-decoration:underline; text-decoration-color:var(--ap-color-line); text-underline-offset:4px; transition:color var(--ap-duration-feedback); }
.ds-ov-textlink:hover { color:var(--ap-color-text); }
.ds-ov-block { margin-top:var(--ov-gap); }
.ds-ov-block.ds-ov-map { margin-top:64px; }
.ds-ov-rule { display:flex; align-items:center; gap:16px; margin:0 0 20px; }
.ds-ov-rule h2 { flex:none; margin:0; font:500 11px/16px var(--ap-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ap-color-muted); }
.ds-ov-rule>i { flex:1; height:1px; background:var(--ov-rule); }
.ds-ov-more { flex:none; font:500 11px/16px var(--ap-font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ap-color-soft); transition:color var(--ap-duration-feedback); }
.ds-ov-more::after { content:' →' / ''; }
.ds-ov-more:hover { color:var(--ap-color-text); }
/* The plate */
.ds-ov-plate { position:relative; height:var(--plate-h,520px); overflow:hidden; background-color:var(--ap-color-inset); background-image:radial-gradient(circle at 1px 1px,#ffffff0d 1px,transparent 1.5px); background-size:16px 16px; }
.ds-ov-corner { position:absolute; z-index:3; width:14px; height:14px; pointer-events:none; }
.ds-ov-corner[data-corner='tl'] { top:0; left:0; box-shadow:inset 1px 1px 0 #ffffff47; }
.ds-ov-corner[data-corner='tr'] { top:0; right:0; box-shadow:inset -1px 1px 0 #ffffff47; }
.ds-ov-corner[data-corner='bl'] { bottom:0; left:0; box-shadow:inset 1px -1px 0 #ffffff47; }
.ds-ov-corner[data-corner='br'] { bottom:0; right:0; box-shadow:inset -1px -1px 0 #ffffff47; }
.ds-ov-readout { position:absolute; z-index:2; top:16px; left:16px; max-width:min(380px,calc(100% - 32px)); padding:12px 16px 14px; background:var(--ap-surface-raised); pointer-events:none; }
.ds-ov-eyebrow { margin:0; font:500 11px/16px var(--ap-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ap-color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-ov-title { margin:4px 0 0; font:500 26px/32px var(--ap-font-sans); letter-spacing:-.03em; color:var(--ap-color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-ov-detail { display:-webkit-box; height:40px; margin:4px 0 0; overflow:hidden; font-size:13px; line-height:20px; color:var(--ap-color-muted); -webkit-box-orient:vertical; -webkit-line-clamp:2; } /* two lines, always: the readout is an obstacle of one size; the full list is in each link's description */
.ds-ov-hint { height:16px; margin:8px 0 0; font:500 11px/16px var(--ap-font-mono); letter-spacing:.06em; color:var(--ap-color-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-ov-open { pointer-events:auto; color:var(--ap-color-text); text-decoration:underline; text-decoration-color:#ffffff47; text-underline-offset:3px; transition:text-decoration-color var(--ap-duration-feedback); }
.ds-ov-open::after { content:' →' / ''; }
.ds-ov-open:hover { text-decoration-color:currentColor; }
.ds-ov-open:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:2px; }
.ds-ov-reset { position:absolute; z-index:3; top:16px; right:16px; height:28px; padding:0 12px; border:0; border-radius:6px; background:var(--ap-surface-raised); color:var(--ap-color-muted); font:500 11px/28px var(--ap-font-mono); letter-spacing:.1em; text-transform:uppercase; opacity:0; pointer-events:none; cursor:pointer; transition:opacity var(--ap-duration-feedback), background-color var(--ap-duration-press), color var(--ap-duration-feedback); }
.ds-ov-reset[data-on] { opacity:1; pointer-events:auto; }
.ds-ov-reset:hover { background:var(--ap-color-control); color:var(--ap-color-text); }
.ds-ov-reset:active { background:var(--ap-surface-input-focus); }
.ds-ov-reset:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:2px; }
.ds-ov-node { touch-action:none; -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.ds-ov-plate[data-state='ready'] .ds-ov-node { cursor:grab; }
.ds-ov-plate[data-dragging], .ds-ov-plate[data-dragging] .ds-ov-node { cursor:grabbing; }
.ds-ov-plate[data-dragging] .ds-ov-edge, .ds-ov-plate[data-dragging] .ds-ov-node { transition:none; }
.ds-ov-graph { position:absolute; inset:0; display:block; overflow:visible; }
.ds-ov-edge { stroke:#ffffff; stroke-width:1; stroke-opacity:.12; transition:stroke-opacity var(--ap-duration-feedback) var(--ap-ease-feedback); }
.ds-ov-edge.is-belongs { stroke-opacity:.26; }
.ds-ov-plate[data-state='assembling'] .ds-ov-edge { stroke-opacity:0; transition:none; }
.ds-ov-plate[data-state='waiting'] :is(.ds-ov-nodes,.ds-ov-edges,.ds-ov-marker) { opacity:0; }
.ds-ov-plate[data-pointing] .ds-ov-edge { stroke-opacity:.025; }
.ds-ov-plate[data-pointing] .ds-ov-edge[data-lit] { stroke-opacity:.72; }
.ds-ov-node { outline:none; transition:opacity var(--ap-duration-feedback) var(--ap-ease-feedback); }
.ds-ov-plate[data-pointing] .ds-ov-node:not([data-lit]) { opacity:.16; }
.ds-ov-label { font:400 10px var(--ap-font-mono); letter-spacing:.08em; fill:var(--ap-color-muted); pointer-events:none; }
.is-foundation .ds-ov-box { fill:var(--ap-color-text); }
.is-foundation .ds-ov-label { font-weight:600; fill:var(--ap-color-page); }
.is-token .ds-ov-box { fill:var(--ap-color-inset); stroke:#ffffff3d; stroke-width:1; shape-rendering:crispEdges; }
.is-token[data-lit] .ds-ov-box { stroke:#ffffff99; }
.is-token[data-lit] .ds-ov-label { fill:var(--ap-color-text); }
.is-component .ds-ov-box { fill:var(--ap-color-muted); shape-rendering:crispEdges; }
.is-component .ds-ov-label { font:500 12px var(--ap-font-sans); letter-spacing:-.01em; fill:var(--ap-color-muted); }
.is-component[data-lit] .ds-ov-box, .is-component[data-active] .ds-ov-box { fill:var(--ap-color-text); }
.is-component[data-lit] .ds-ov-label { fill:var(--ap-color-text); }
.ds-ov-marker path { fill:none; stroke:var(--ap-color-action); stroke-width:2; stroke-linecap:square; }
.ds-ov-plate .ds-ov-node[data-active]:focus-visible { outline:none; } /* the registration marker is the ring while it sits on the focused node */
.ds-ov-hit { fill:transparent; }
.ds-ov-marker { opacity:0; transition:opacity var(--ap-duration-press); }
.ds-ov-marker[data-on] { opacity:1; }
.ds-ov-key { position:absolute; z-index:2; left:16px; bottom:14px; right:16px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; font:400 11px/16px var(--ap-font-mono); letter-spacing:.04em; color:var(--ap-color-soft); pointer-events:none; }
.ds-ov-key>span { display:inline-flex; align-items:center; gap:8px; }
.ds-ov-chip { display:inline-block; padding:0 6px; font:400 10px/18px var(--ap-font-mono); letter-spacing:.08em; color:var(--ap-color-muted); box-shadow:inset 0 0 0 1px #ffffff3d; }
.ds-ov-chip.is-foundation { background:var(--ap-color-text); color:var(--ap-color-page); font-weight:600; box-shadow:none; }
.ds-ov-square { width:8px; height:8px; background:var(--ap-color-muted); }
.ds-ov-line { width:20px; height:1px; background:#ffffff1f; }
.ds-ov-line.is-belongs { background:#ffffff42; }
.ds-ov-lens { position:absolute; z-index:2; right:16px; bottom:16px; display:grid; place-items:center; width:260px; height:168px; overflow:hidden; border-radius:var(--ap-radius-card); background:var(--ap-surface-card); box-shadow:var(--ap-shadow-overlay); opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity var(--ap-duration-feedback) var(--ap-ease-feedback), transform var(--ap-duration-enter) var(--ap-ease-enter); }
.ds-ov-plate[data-lens] .ds-ov-lens { opacity:1; transform:none; }
.ds-ov-plate[data-narrow] .ds-ov-lens { display:none; }
.ds-ov-lens>:not(.ap-dialog,.ap-segmented) { flex:none; transform:scale(.86); } /* the gallery rules already scale these two */
/* Type */
.ds-ov-type { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2px; overflow:hidden; border-radius:var(--ap-radius-card); background:var(--ap-color-inset); }
.ds-ov-specimen { position:relative; display:flex; flex-direction:column; min-height:360px; padding:20px 24px 12px; background:var(--ap-surface-card); cursor:ew-resize; touch-action:pan-y; }
.ds-ov-axis { display:flex; justify-content:space-between; margin:0; font:500 11px/16px var(--ap-font-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ap-color-muted); }
.ds-ov-wght { font-variant-numeric:tabular-nums; color:var(--ap-color-muted); }
.ds-ov-aa { margin:auto 0 0; font:500 clamp(150px,17vw,236px)/.82 var(--ap-font-sans); letter-spacing:-.06em; color:var(--ap-color-text); transition:font-weight var(--ap-duration-feedback) var(--ap-ease-feedback); user-select:none; }
.ds-ov-scale { display:grid; gap:2px; margin:0; }
.ds-ov-scale-row { display:grid; grid-template-columns:128px minmax(0,1fr); align-items:baseline; gap:16px; min-width:0; padding:20px 24px; background:var(--ap-surface-card); }
.ds-ov-scale-row dt { display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:20px; color:var(--ap-color-text); }
.ds-ov-scale-row dt code { font:400 11px/16px var(--ap-font-mono); color:var(--ap-color-muted); }
.ds-ov-scale-row dd { min-width:0; margin:0; overflow-wrap:anywhere; text-wrap:balance; color:var(--ap-color-text); }
.ds-ov-scale-row .is-display { font:500 var(--ap-type-display)/1.1 var(--ap-font-sans); letter-spacing:-.045em; }
.ds-ov-scale-row .is-heading { font:500 var(--ap-type-heading)/1.2 var(--ap-font-sans); letter-spacing:-.03em; }
.ds-ov-scale-row .is-body { font:400 var(--ap-type-body)/1.6 var(--ap-font-sans); color:var(--ap-color-muted); }
.ds-ov-scale-row .is-label { font:500 var(--ap-type-label)/1.4 var(--ap-font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ap-color-muted); }
.ds-ov-mono { margin:16px 0 0; font:400 12px/16px var(--ap-font-mono); letter-spacing:.06em; white-space:pre-wrap; color:var(--ap-color-soft); }
/* Color */
.ds-ov-ladder { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); height:224px; margin:0; padding:0; list-style:none; overflow:hidden; border-radius:var(--ap-radius-card) var(--ap-radius-card) 0 0; }
.ds-ov-step { display:flex; flex-direction:column; justify-content:flex-end; gap:4px; min-width:0; padding:16px; background:var(--step); color:var(--ap-color-muted); }
.ds-ov-step-name { font-size:13px; line-height:20px; font-weight:500; color:var(--ap-color-text); }
.ds-ov-step code { font:400 11px/16px var(--ap-font-mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-ov-step[data-light] { color:#181818b3; }
.ds-ov-step[data-light] .ds-ov-step-name { color:var(--ap-color-page); }
.ds-ov-inks { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; overflow:hidden; padding-top:2px; border-radius:0 0 var(--ap-radius-card) var(--ap-radius-card); background:var(--ap-color-inset); }
.ds-ov-ink { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto auto; align-items:end; column-gap:16px; padding:20px 24px; background:var(--ap-color-page); }
.ds-ov-ink-sample { grid-row:1 / 4; align-self:center; font:500 44px/1 var(--ap-font-sans); letter-spacing:-.04em; color:var(--ink); }
.ds-ov-ink-name { font-size:13px; line-height:20px; color:var(--ap-color-text); }
.ds-ov-ink code { font:400 11px/16px var(--ap-font-mono); color:var(--ap-color-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-ov-ink .ds-ov-ratio { color:var(--ap-color-muted); font-variant-numeric:tabular-nums; }
.ds-ov-note { margin:16px 0 0; font:400 12px/16px var(--ap-font-mono); letter-spacing:.06em; color:var(--ap-color-soft); }
@media(max-width:1050px) {
  .ds-overview { --ov-gap:72px; }
  .ds-ov-type { grid-template-columns:minmax(0,1fr); }
  .ds-ov-specimen { min-height:300px; }
  .ds-ov-ladder { grid-template-columns:repeat(4,minmax(0,1fr)); height:auto; }
  .ds-ov-step { min-height:112px; }
  .ds-ov-inks { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .ds-overview { --ov-gap:64px; }
  .ds-overview .ds-ov-headline { font-size:clamp(44px,13vw,64px); margin:20px 0; }
  .ds-ov-lead { font-size:15px; line-height:24px; }
  .ds-ov-readout { top:12px; left:12px; padding:10px 12px 12px; }
  .ds-ov-title { font-size:20px; line-height:26px; }
  .ds-ov-key { left:12px; right:12px; bottom:10px; gap:6px 14px; font-size:10px; }
  .ds-ov-scale-row { grid-template-columns:minmax(0,1fr); gap:8px; padding:16px; }
  .ds-ov-scale-row dt { flex-direction:row; justify-content:space-between; }
  .ds-ov-ladder { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ds-ov-step { min-height:88px; padding:12px; }
  .ds-ov-ink { padding:16px; column-gap:12px; }
  .ds-ov-ink-sample { font-size:32px; }
}
@media(hover:none) { .ds-ov-specimen { cursor:auto; } }
@media(prefers-reduced-motion:reduce) { .ds-ov-edge,.ds-ov-node,.ds-ov-marker,.ds-ov-lens,.ds-ov-aa,.ds-ov-textlink,.ds-ov-more,.ds-ov-reset,.ds-ov-open { transition:none; } }
@media(forced-colors:active) {
  .ds-ov-plate { outline:1px solid CanvasText; background-image:none; }
  .ds-ov-plate .ds-ov-edge { stroke:CanvasText; stroke-opacity:.6; }
  .ds-ov-plate .ds-ov-node .ds-ov-box { fill:Canvas; stroke:CanvasText; }
  .ds-ov-plate .ds-ov-node:is(.is-foundation,.is-component) .ds-ov-box { fill:CanvasText; }
  .ds-ov-plate .ds-ov-node .ds-ov-label { fill:CanvasText; }
  .ds-ov-plate .is-foundation .ds-ov-label { fill:Canvas; }
  .ds-ov-marker path { stroke:Highlight; }
  .ds-ov-key :is(.ds-ov-square,.ds-ov-line,.ds-ov-chip) { forced-color-adjust:none; }
  .ds-ov-key :is(.ds-ov-square,.ds-ov-line) { background:CanvasText; }
  .ds-ov-key .ds-ov-chip { color:CanvasText; background:Canvas; box-shadow:inset 0 0 0 1px CanvasText; }
  .ds-ov-key .ds-ov-chip.is-foundation { color:Canvas; background:CanvasText; }
  .ds-ov-step, .ds-ov-ink { forced-color-adjust:none; }
}

/* Loader gallery: names and useful feedback, without scattered annotations. */
#loaders .ds-doc-sample-caption { font-size:14px; }
#loaders :is(.ds-doc-sample-status,.ds-doc-response,.ds-doc-nav > button,.ds-doc-hero > div > p,.ap-loader-status) { font-size:14px; }
#loaders .ds-doc-trail[hidden] { display:none; }

/* Voice explorer: a full-size stage with a compact six-style control deck. */
#voice > .ds-section-heading { margin-bottom:var(--ap-space-6); }
.ds-voice-stage { background:transparent; border-radius:0; overflow:visible; padding:0; display:flex; flex-direction:column; min-height:min(780px,calc(100svh - 100px)); }
.ds-vs-top { display:flex; justify-content:flex-end; align-items:center; gap:16px; }
.ds-vs-top > span,.ds-vs-caption > span { font:11px var(--ap-font-mono); letter-spacing:.1em; color:var(--ap-color-muted); }
.ds-vs-scene { position:relative; display:grid; place-items:center; flex:1; min-height:420px; isolation:isolate; }
.ds-vs-body { position:relative; width:clamp(220px,32vw,380px); height:clamp(220px,32vw,380px); margin-bottom:80px; }
.ds-vs-body > .ap-voice { position:absolute; inset:0; --ap-voice-orb-lg:100%; width:100%; height:100%; }
.ds-vs-body .ap-voice-visual { width:100%; height:100%; }
.ds-vs-caption { position:absolute; bottom:12px; text-align:center; }
.ds-vs-caption h3 { font-size:32px; font-weight:450; letter-spacing:-.04em; margin:6px 0; }
.ds-vs-caption p { font-size:13px; color:var(--ap-color-muted); margin:0; }
.ds-vs-state { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; min-height:36px; }
.ds-vs-indicator { width:5px; height:5px; border-radius:50%; background:var(--ap-color-text); }
.ds-vs-simulation { color:var(--ap-color-muted); margin-left:8px; font-size:11px; }
.ds-vs-controls { display:flex; justify-content:center; align-items:center; gap:8px; padding:12px 0 24px; }
.ds-vs-states { display:flex; flex-wrap:wrap; justify-content:center; gap:2px; padding:4px; background:var(--ap-color-inset); border-radius:24px; box-shadow:none; }
.ds-vs-states button,.ds-vs-motion { font:inherit; font-size:12px; color:var(--ap-color-muted); background:transparent; border:0; border-radius:20px; padding:8px 12px; cursor:pointer; transition:background var(--ap-duration-feedback),color var(--ap-duration-feedback),transform var(--ap-duration-press); }
.ds-vs-states button[aria-pressed='true'] { background:var(--ap-color-control); color:var(--ap-color-text); }
.ds-vs-motion { display:grid; place-items:center; width:36px; height:36px; padding:0; background:var(--ap-color-inset); box-shadow:none; }
.ds-vs-styles { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; width:min(100%,760px); align-self:center; }
.ds-vs-styles button { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px; text-align:left; min-width:0; padding:12px; border:0; border-radius:var(--ap-radius-button-pill); background:var(--ap-color-inset); box-shadow:none; color:var(--ap-color-muted); font:12px var(--ap-font-sans); cursor:pointer; transition:background var(--ap-duration-feedback),color var(--ap-duration-feedback),transform var(--ap-duration-enter); }
.ds-vs-styles button[aria-pressed='true'] { background:var(--ap-color-control); color:var(--ap-color-text); box-shadow:none; }
.ds-vs-styles small { display:none; }
.ds-vs-symbol { position:relative; height:24px; width:24px; display:block; margin:0; }
.ds-vs-symbol i { position:absolute; inset:0; border-radius:50%; background:currentColor; opacity:.15; transition:transform var(--ap-duration-enter); }
.ds-vs-symbol i:nth-child(2) { inset:4px; opacity:.4; }.ds-vs-symbol i:nth-child(3) { inset:8px; opacity:1; }
.ds-vs-symbol[data-symbol='halo'] i:first-child { background:transparent; border:2px dotted currentColor; opacity:.5; }
.ds-vs-symbol:is([data-symbol='ripple'],[data-symbol='contour']) i { background:transparent; box-shadow:inset 0 0 0 1px currentColor; opacity:.6; }
.ds-vs-symbol[data-symbol='bloom'] i { border-radius:35%; transform:rotate(30deg); }
.ds-vs-symbol[data-symbol='eclipse'] i:nth-child(2) { transform:translateX(5px); }.ds-vs-symbol[data-symbol='contour'] { transform:scaleX(.82) rotate(-25deg); }
.ds-vs-styles button:active,.ds-vs-states button:active { transform:scale(.97); }
@media(hover:hover) { .ds-vs-styles button:hover { color:var(--ap-color-text); transform:translateY(-3px); }.ds-vs-styles button:hover .ds-vs-symbol i { transform:scale(1.08); } }
.ds-voice-stage :is(button):focus-visible { outline:2px solid var(--ap-color-text); outline-offset:3px; }
.ds-voice-stage:fullscreen { border-radius:0; height:100%; overflow-y:auto; padding:32px max(32px,calc((100vw - 1200px)/2)); background:var(--ap-color-page); }
.ds-voice-stage:fullscreen .ds-vs-body { width:min(46vh,480px); height:min(46vh,480px); }
.ds-vs-library { margin-top:32px; }.ds-vs-library > summary { padding:24px 0; cursor:pointer; color:var(--ap-color-muted); font-size:14px; }
@media(max-width:760px) {
 .ds-voice-stage { padding:0; min-height:640px; }.ds-vs-scene { min-height:360px; }.ds-vs-body { width:250px; height:250px; }.ds-vs-caption h3 { font-size:28px; }.ds-vs-caption p { font-size:12px; max-width:260px; }
 .ds-vs-styles { grid-template-columns:repeat(3,minmax(0,1fr)); }.ds-vs-styles button { padding:10px; gap:5px; }.ds-vs-symbol { height:24px; width:24px; margin:0; }.ds-vs-symbol i:nth-child(2) { inset:4px; }.ds-vs-symbol i:nth-child(3) { inset:8px; }
 .ds-vs-states button { padding:8px; font-size:11px; }.ds-vs-controls { gap:4px; }.ds-voice-stage:fullscreen { padding:16px; overflow-y:auto; }.ds-voice-stage:fullscreen .ds-vs-body { width:250px; height:250px; }
}
@media(prefers-reduced-motion:reduce) { .ds-voice-stage *, .ds-voice-stage *::before { animation:none!important; transition:none!important; } }

/* Open Loader stage, sharing the floating Voice controls. */
.ds-ls { display:flex; flex-direction:column; min-height:min(720px,calc(100svh - 120px)); gap:24px; }
.ds-ls-top .ds-vs-states button { font-size:14px; }
.ds-ls-top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ds-ls-scene { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:380px; gap:32px; }
.ds-ls-scene h3 { font-size:28px; font-weight:450; margin:0; letter-spacing:-.03em; }
.ds-ls-body { display:grid; place-items:center; min-height:240px; width:min(100%,440px); }
.ds-ls-body .ap-loader { --ap-loader-lg:160px; --ap-loader-line-width:280px; gap:32px; width:100%; }
.ds-ls-body .ap-loader-mark { max-width:100%; }
.ds-ls-body .ap-loader[data-variant='word'] .ap-loader-mark { font-size:28px; }
.ds-ls-body img { display:block; width:100%; height:auto; border-radius:var(--ap-radius-card); }
.ds-ls-content { padding:48px; text-align:center; }
.ds-ls-actions,.ds-ls-styles { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; }
.ds-ls-actions select,.ds-ls-styles button { font:14px var(--ap-font-sans); color:var(--ap-color-muted); padding:12px 16px; border:0; border-radius:var(--ap-radius-button-pill); background:var(--ap-color-inset); box-shadow:none; cursor:pointer; }
.ds-ls-styles { max-width:800px; align-self:center; margin-top:24px; }
.ds-ls-styles button { position:relative; display:grid; place-items:center; width:56px; height:56px; padding:12px; border-radius:var(--ap-radius-card); transition:transform var(--ap-duration-press),background var(--ap-duration-feedback); }
.ds-ls-styles button > svg { width:28px; height:28px; pointer-events:none; transition:transform var(--ap-duration-feedback); }
.ds-ls-styles button[aria-pressed='true']::after { content:''; position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%; background:var(--ap-color-action); }
.ds-ls-tooltip { position:absolute; z-index:3; bottom:calc(100% + 12px); left:50%; transform:translate(-50%,4px); padding:8px 12px; border-radius:var(--ap-radius-control); background:var(--ap-color-control); color:var(--ap-color-text); box-shadow:none; white-space:nowrap; font-size:14px; opacity:0; visibility:hidden; transition:opacity var(--ap-duration-feedback),transform var(--ap-duration-feedback); }
.ds-ls-tooltip::after { content:''; position:absolute; top:100%; left:0; right:0; height:12px; }
.ds-ls-styles:not([data-tooltip-dismissed]) button:focus-visible .ds-ls-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }
@media(hover:hover) { .ds-ls-styles:not([data-tooltip-dismissed]) button:hover .ds-ls-tooltip { opacity:1; visibility:visible; transform:translate(-50%,0); }.ds-ls-styles button:hover > svg { transform:scale(1.12); } }
@media(max-width:760px) { .ds-ls-styles { max-width:320px; }.ds-ls-styles button { width:48px; height:48px; }.ds-ls-styles button > svg { width:24px; height:24px; } }
.ds-ls-styles button[aria-pressed='true'] { background:var(--ap-color-control);color:var(--ap-color-text); }
.ds-ls-styles button:active { transform:scale(.96); }
.ds-ls :is(button,select):focus-visible { outline:2px solid var(--ap-color-text);outline-offset:3px; }
.ds-ls:fullscreen { background:var(--ap-color-page);padding:32px max(24px,calc((100vw - 1120px)/2));overflow:auto; }
@media(max-width:760px) { .ds-ls { min-height:620px;gap:24px; }.ds-ls-top { gap:8px;flex-wrap:wrap; }.ds-ls-top .ds-vs-states button { font-size:14px; }.ds-ls-scene { min-height:300px; }.ds-ls-body { min-height:200px; }.ds-ls-body .ap-loader { --ap-loader-lg:120px; }.ds-ls-styles button { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .ds-ls * { animation:none!important;transition:none!important; } }

/* Open stages use solid tonal separation, without broad shadows on the dark canvas. */
:is(.ds-voice-stage,.ds-ls,.ds-bs) .ap-button { box-shadow:none; }

/* A continuous matte canvas, not another framed preview container.
 * Static drafting lines and registration marks give the matte canvas a workbench texture. */
body:has(:is(#voice,#loaders,#buttons,#inputs,#segmented):not([hidden]) :is(.ds-voice-stage,.ds-ls,.ds-bs)[data-stage-view='preview']),
:is(.ds-voice-stage,.ds-ls,.ds-bs):fullscreen[data-stage-view='preview'] {
  background-color:var(--ap-color-stage);
  background-image:url('./stage-grain.svg');
  background-size:192px 192px;
}
@media(forced-colors:active) {
  body:has(:is(#voice,#loaders,#buttons,#inputs,#segmented):not([hidden]) :is(.ds-voice-stage,.ds-ls,.ds-bs)[data-stage-view='preview']),
  :is(.ds-voice-stage,.ds-ls,.ds-bs):fullscreen[data-stage-view='preview'] { background-image:none; }
}

/* Component document: view switch on the left, actions on the right. */
.ds-stage-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
.ds-stage-tools { display:flex; gap:8px; align-items:center; margin-left:auto; flex-wrap:wrap; justify-content:flex-end; }
.ds-stage-tabs { display:flex; gap:8px; }
.ds-stage-tabs button { display:inline-flex; align-items:center; gap:8px; border:0; font:14px var(--ap-font-sans); color:var(--ap-color-muted); background:var(--ap-color-inset); padding:12px 16px; border-radius:var(--ap-radius-button); cursor:pointer; }
.ds-stage-tabs button[aria-selected='true'] { background:var(--ap-color-control);color:var(--ap-color-text);box-shadow:none; }
.ds-stage-preview { display:flex; flex:1; min-width:0; flex-direction:column; gap:24px; }
.ds-stage-preview > .ds-vs-states { align-self:flex-start; }
.ds-stage-preview[hidden],.ds-stage-code[hidden],.ds-stage-tools [hidden] { display:none; }
.ds-stage-preview .ds-ls-actions { margin-top:24px; }
.ds-stage-preview .ds-vs-styles { width:100%; }
.ds-stage-code { display:grid; gap:32px; min-width:0; }
.ds-stage-card { min-width:0; border-radius:var(--ap-radius-card); padding:8px; background:var(--ap-color-inset); }
.ds-stage-cardhead { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 12px 20px; }
.ds-stage-cardhead h3 { font-size:16px; font-weight:500; margin:0; }
.ds-stage-cardactions { display:flex; gap:8px; align-items:center; }
.ds-stage-card button,.ds-stage-card select { border:0; font:14px var(--ap-font-sans); color:var(--ap-color-text); background:var(--ap-color-control); padding:10px 12px; border-radius:var(--ap-radius-control);cursor:pointer; }
.ds-stage-card [data-stage-copy] { display:grid; place-items:center; min-height:40px;min-width:40px; }
.ds-stage-card footer { display:flex; justify-content:flex-end; padding:12px 8px 4px; }
.ds-stage-editor { overflow:auto; display:grid; grid-template-columns:auto 1fr; align-content:start; padding:24px 24px 24px 0; min-height:0; max-height:360px; background:var(--ap-color-page); border-radius:12px; tab-size:2; }
.ds-stage-card[data-expanded='true'] .ds-stage-editor { max-height:80svh; }
.ds-stage-card[data-code-card='setup'] .ds-stage-editor { max-height:280px; }
.ds-stage-editor pre { margin:0; font:14px/1.9 var(--ap-font-mono); color:var(--ap-color-text); }
.ds-stage-editor code { font:inherit; }
.ds-stage-editor .ds-stage-lines { position:sticky; left:0; padding:0 20px; color:var(--ap-color-soft); text-align:right; user-select:none; background:var(--ap-color-page); }
.ds-stage-notice { align-self:flex-end; font-size:14px; color:var(--ap-color-text); }
.ds-stage-notice:empty { display:none; }
.ds-stage-editor:focus-visible,.ds-stage-tools button:focus-visible,.ds-stage-tabs button:focus-visible,.ds-stage-card :is(button,select):focus-visible { outline:2px solid var(--ap-color-text);outline-offset:2px; }
@media(max-width:760px) { .ds-stage-header { gap:12px; }.ds-stage-tools { gap:4px; }.ds-stage-tools .ap-button { padding-inline:10px; }.ds-stage-cardhead { gap:8px;padding:8px 8px 16px; }.ds-stage-card select { max-width:170px; }.ds-stage-editor { padding-top:16px; }.ds-stage-editor .ds-stage-lines { padding:0 12px; }.ds-stage-preview .ds-vs-styles { width:100%; }.ds-stage-code { gap:24px; } }

/* Button workbench uses the shared open stage and code document. */
.ds-bs { min-height:min(720px,calc(100svh - 120px)); display:flex; flex-direction:column; }
.ds-bs-scene { flex:1; min-height:380px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:48px; }
.ds-bs-scene h3 { margin:0; font-size:28px; font-weight:450; letter-spacing:-.03em; }
.ds-bs-specimen { min-height:100px; display:grid; place-items:center; }
.ds-bs-status { min-height:24px; margin:0; font-size:14px; color:var(--ap-color-muted); }
.ds-bs-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }
.ds-bs-controls label { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ap-color-muted); }
.ds-bs-controls select { border:0; border-radius:var(--ap-radius-control); padding:var(--ap-space-2) var(--ap-space-3); background:var(--ap-color-inset); color:var(--ap-color-text); font:inherit; }
.ds-bs :is(button,select):focus-visible { outline:2px solid var(--ap-color-text); outline-offset:3px; }
.ds-bs .ds-ls-styles button > svg { width:32px; }
.ds-bs:fullscreen { background:var(--ap-color-page); padding:32px max(24px,calc((100vw - 1120px)/2)); overflow:auto; }
.ds-bs:fullscreen[data-stage-view='preview'] { background:var(--ap-color-stage) url('./stage-grain.svg') repeat; background-size:192px 192px; }
@media(max-width:760px) { .ds-bs { min-height:620px; }.ds-bs-scene { min-height:320px; }.ds-bs-controls { gap:8px; }.ds-bs-controls label { flex-direction:column; align-items:flex-start; gap:4px; } }
@media(forced-colors:active) { .ds-bs:fullscreen[data-stage-view='preview'] { background-image:none; } }
.ds-bs [data-bs-style='accent'] > svg { color:var(--ap-button-accent); }
.ds-bs [data-bs-style='danger'] > svg { color:var(--ap-color-error); }
@media(max-width:760px) { .ds-bs .ds-ls-styles { gap:6px; } }

/* Input previews share the same workbench without exposing typed values in code. */
#inputs > .ds-workbench { background:transparent; box-shadow:none; border-radius:0; }
#inputs .ds-input-library { display:block; padding:0; max-width:none; min-height:0; }
.ds-is .ds-bs-specimen { width:min(100%,380px); min-height:144px; }
.ds-is .ap-field { width:100%; }
.ds-is :is(.ap-label,.ap-hint,.ap-input-counter,.ap-input-action) { font-size:14px; }
.ds-is .ds-ls-styles { max-width:100%; }
@media(max-width:760px) { .ds-is .ds-ls-styles { max-width:232px; }.ds-is .ds-bs-controls { gap:16px; } }

/* Ten voice shapes fit in the shared miniature style dock. */
.ds-vs-styles.ds-ls-styles { display:flex; width:auto; max-width:100%; }
.ds-vs-styles.ds-ls-styles button { grid-template-columns:1fr; justify-items:center; gap:0; }
.ds-vs-symbol[data-symbol='silk'] i { background:transparent; border:1px solid currentColor; transform:scaleX(.55) rotate(35deg); opacity:.65; }
.ds-vs-symbol[data-symbol='orbitals'] i { background:transparent; border:1px solid currentColor; inset:0; transform:scaleY(.4) rotate(30deg); opacity:.7; }
.ds-vs-symbol[data-symbol='orbitals'] i:nth-child(2) { transform:rotate(60deg) scaleY(.4); }.ds-vs-symbol[data-symbol='orbitals'] i:nth-child(3) { transform:rotate(120deg) scaleY(.4); }
.ds-vs-symbol[data-symbol='swarm'] i { background:transparent; border:2px dotted currentColor; opacity:.8; }
.ds-vs-symbol[data-symbol='ribbon'] i { background:transparent; border:1px solid currentColor; border-radius:40%; transform:rotate(-35deg) scaleX(.5); opacity:.8; }
@media(max-width:760px) { .ds-vs-styles.ds-ls-styles { max-width:280px; } }

.ds-ss .ds-bs-specimen { width:min(100%,440px); }
.ds-ss .ap-segmented { width:100%; }
.ds-ss .ap-segmented__hint { font-size:14px; }
.ds-ss .ds-ls-styles { max-width:100%; }
@media(max-width:760px) { .ds-ss .ds-ls-styles { max-width:232px; } }

/* Overview: map first, then a composed component collection. */
body:has(#overview:not([hidden])) .ds-topbar { display:none; }
.ds-overview .ds-ov-map { margin-top:0; }
.ds-overview .ds-ov-map-heading { margin:0 0 28px; font-size:clamp(32px,4vw,48px); letter-spacing:-.04em; }
.ds-overview .ds-overview-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:32px 24px; }
.ds-overview .ds-overview-tile { grid-column:span 4; }
.ds-overview .ds-overview-tile:nth-child(1) { grid-column:span 7; }
.ds-overview .ds-overview-tile:nth-child(2) { grid-column:span 5; }
.ds-overview .ds-overview-tile:nth-child(6) { grid-column:span 5; }
.ds-overview .ds-overview-tile:nth-child(7) { grid-column:span 7; }
.ds-overview .ds-overview-tile:nth-child(n+8) { grid-column:span 6; }
.ds-overview .ds-overview-preview { height:240px; padding:32px; background:var(--ap-color-inset); border-radius:var(--ap-radius-card); transition:background-color var(--ap-duration-feedback); }
.ds-overview .ds-overview-tile:nth-child(-n+2) .ds-overview-preview { height:320px; }
.ds-overview .ds-overview-tile:is(:hover,:focus-visible) .ds-overview-preview { background:var(--ap-surface-card); }
.ds-overview .ds-overview-preview>* { transition:transform var(--ap-duration-enter) var(--ap-ease-enter); }
.ds-overview .ds-overview-caption { padding:16px 2px 0; font-size:18px; color:var(--ap-color-text); }
.ds-overview .ds-ov-rule h2,.ds-overview .ds-ov-more { font-size:14px; }
.ds-overview-orb { display:grid; place-items:center; width:176px; height:176px; }
.ds-overview-orb i { grid-area:1/1; width:100%; height:100%; border-radius:48% 52% 46% 54%; background:var(--ap-color-control); }
.ds-overview-orb i:nth-child(2) { width:74%; height:74%; background:var(--ap-color-soft); transform:rotate(30deg); }
.ds-overview-orb i:nth-child(3) { z-index:1; width:48%; height:48%; background:var(--ap-color-text); }
.ds-overview-tile:is(:hover,:focus-visible) .ds-overview-orb { transform:rotate(8deg) scale(1.04); }
.ds-overview [data-component='buttons'] .ap-button { transform:scale(1.2); }
.ds-overview .ds-overview-preview .ap-input { width:min(100%,220px); font-size:14px; }
.ds-overview .ds-overview-preview .ap-toast { font-size:14px; box-shadow:none; }
.ds-overview .ds-overview-preview .ap-card { width:150px; transform:rotate(-6deg); }
.ds-overview [data-component='cards']:is(:hover,:focus-visible) .ap-card { transform:rotate(0deg) translateY(-4px); }
.ds-overview .ds-overview-preview .ap-dialog { transform:scale(.85); box-shadow:none; }
@media(max-width:1050px) {
 .ds-overview .ds-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .ds-overview .ds-overview-tile:nth-child(n) { grid-column:span 1; }
 .ds-overview .ds-overview-tile:first-child { grid-column:span 2; }
 .ds-overview .ds-overview-tile:nth-child(n) .ds-overview-preview { height:240px; }
}
@media(max-width:600px) {
 .ds-overview .ds-overview-grid { grid-template-columns:1fr; gap:28px; }
 .ds-overview .ds-overview-tile:nth-child(n) { grid-column:1; }
 .ds-overview .ds-overview-tile:first-child .ds-overview-preview { height:280px; }
 .ds-overview .ds-overview-caption { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .ds-overview .ds-overview-preview>* { transition:none; } }

/* Space & surfaces as an inspector: real components measured, the light taken apart.
 * The root carries the Typography root class beside ds-sp, so every pill, row, fold and summary above is reused as written. New here: the redline, the instruments and the static fallback.
 * Structure is 2px seams between solid cells. No lines, no fills that fade, nothing pinned to the viewport: the section is transformed while it reveals. */
.ds-sp-bar { top:var(--ds-bar-h,0px); margin-bottom:8px; } /* below the phone bar, where the shell has one */
.ds-sp-inspector,.ds-sp-light,.ds-sp-space,.ds-sp-shape { container-type:inline-size; }
.ds-sp-light,.ds-sp-space,.ds-sp-shape,.ds-sp > .ds-tt-source { margin-top:72px; }
.ds-sp :is(.ds-sp-light,.ds-sp-space,.ds-sp-shape) > .ds-sp-thesis ~ .ds-tt-scale-heading { margin-top:56px; }
/* One heading per block. The thesis is the block heading of this page: Geist 500 on the heading token, tight as on Getting started. Sub-heads keep the quiet 14px row. */
.ds-sp-kicker { margin:0 0 8px; color:var(--ap-color-soft); font:500 11px/16px var(--ap-font-mono); letter-spacing:.12em; text-transform:uppercase; }
.ds-sp-thesis { margin:0 0 24px; color:var(--ap-color-text); font:500 var(--ap-type-heading)/32px var(--ap-font-sans); letter-spacing:-.03em; text-wrap:balance; }
.ds-sp-thesis:focus { outline:none; } /* a jump target, reached by the Surfaces, Space and Shape links; never tabbed to */
.ds-sp .ds-tt-scale-heading > h4 { min-width:0; margin:0; font:inherit; color:inherit; }
.ds-sp-line { max-width:64ch; margin:16px 0 0; color:var(--ap-color-muted); font-size:12px; line-height:1.7; }
.ds-sp-mono { margin:12px 0 0; color:var(--ap-color-soft); font:400 10px/1.6 var(--ap-font-mono); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* Inspector: shipped components on the bare page. The redline is one ink, drawn outside them and never in their way. */
.ds-sp-stage { position:relative; display:grid; justify-items:center; align-content:start; min-height:420px; margin-top:8px; padding:56px 0 64px; }
.ds-sp-stage[data-compact] { padding:32px 0 40px; }
.ds-sp-subject { inline-size:min(100%,var(--sp-w,360px)); transform:scale(var(--sp-scale,1)); transform-origin:50% 0; margin-bottom:calc(var(--sp-h,0) * (var(--sp-scale,1) - 1) * 1px); }
.ds-sp-stack { display:grid; gap:var(--ap-space-6); }
.ds-sp-subject .ap-dialog { inline-size:100%; max-block-size:none; margin:0; overflow:visible; } /* arrangement only: a dialog standing in the page instead of over it */
.ds-sp-subject .ap-card__launch { opacity:1; transform:none; }
.ds-sp-ink { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.ds-sp-ink,.ds-sp-swatch { color:var(--ap-color-text); } /* the key is drawn in the ink of the marks it names */
.ds-sp-band { fill:currentColor; fill-opacity:.12; stroke:currentColor; stroke-opacity:.45; stroke-width:1; }
.ds-sp-hatch { stroke:currentColor; stroke-opacity:0; stroke-width:1; }
.ds-sp-dash { fill:none; stroke:currentColor; stroke-opacity:.45; stroke-width:1; stroke-dasharray:3 3; }
.ds-sp-dim,.ds-sp-leader,.ds-sp-outline { fill:none; stroke:currentColor; stroke-opacity:.45; stroke-width:1; }
.ds-sp-arc { fill:none; stroke:currentColor; stroke-opacity:.9; stroke-width:1.5; }
.ds-sp-center { fill:currentColor; }
.ds-sp-ink [data-bright] { color:var(--ap-color-on-action); } /* drawn on a light plane (a primary button, the launch circle): dark ink, or it vanishes */
.ds-sp-ink [data-measure],.ds-sp-tag,.ds-sp-marker { transition:opacity var(--ap-duration-feedback); }
.ds-sp-ink [data-hot] .ds-sp-band { fill-opacity:.28; stroke-opacity:.9; }
.ds-sp-ink [data-hot] :is(.ds-sp-hatch,.ds-sp-dash,.ds-sp-dim,.ds-sp-leader,.ds-sp-outline) { stroke-opacity:.9; }
.ds-sp-stage[data-dim] .ds-sp-ink [data-measure]:not([data-hot]) { opacity:.3; }
.ds-sp-stage[data-dim] :is(.ds-sp-tag,.ds-sp-marker):not([data-hot]) { opacity:0; }
.ds-sp-stage[data-enter='run'] :is(.ds-sp-ink,.ds-sp-tags) { animation:ds-sp-enter var(--ap-duration-feedback) var(--ap-ease-feedback) both; }
@keyframes ds-sp-enter { from { opacity:0; } }
.ds-sp-tags { position:absolute; inset:0; pointer-events:none; }
/* Two 13px lines: 26 tall, centered on its leader. placeTags() stacks them at a 30px pitch. */
.ds-sp-tag { position:absolute; display:grid; inline-size:140px; block-size:26px; color:var(--ap-color-text); font:500 10px/13px var(--ap-font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ds-sp-tag > span,.ds-sp-tag > small { overflow:hidden; text-overflow:ellipsis; }
.ds-sp-tag > small { color:var(--ap-color-muted); font-size:inherit; }
.ds-sp-tag[data-side='left'] { text-align:right; }
.ds-sp-tag .ds-tt-dot { display:inline-block; margin-right:4px; vertical-align:1px; }
.ds-sp-tag[data-named] .ds-tt-dot,.ds-sp-row-value[data-named] .ds-tt-dot,.ds-sp-swatch[data-named] .ds-tt-dot { background:currentColor; } /* filled: the component names a token. The words beside it say the same. */
/* An odd diameter has a center pixel, so a marker centers on the point it numbers; placeMarkers() spaces them by the same 15. */
.ds-sp-marker { position:absolute; display:grid; place-items:center; inline-size:15px; block-size:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; background:var(--ap-color-page); box-shadow:0 0 0 1px var(--ap-color-soft); color:var(--ap-color-text); font:500 10px/1 var(--ap-font-mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
/* The key: each swatch is the mark itself, drawn by the stage's own functions with the mark's own class. Mono 11px, as on the Getting started map. */
.ds-sp-marks { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; min-height:16px; color:var(--ap-color-soft); font:400 11px/16px var(--ap-font-mono); letter-spacing:.04em; }
.ds-sp-marks > span { display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.ds-sp-swatch { flex:none; display:inline-grid; place-items:center; inline-size:20px; block-size:12px; overflow:visible; }
.ds-sp-marks .ds-sp-marker { position:static; margin:0; } /* the marker itself, standing in the line instead of on a band */
.ds-sp-stagenote { position:absolute; left:0; top:0; color:var(--ap-color-soft); font:500 10px/13px var(--ap-font-mono); white-space:nowrap; }

/* Folds: Measurements and the owner's decisions, styled like the source fold. */
.ds-sp-legend,.ds-sp-decisions { margin-top:24px; }
.ds-sp-decisions { margin-top:40px; }
.ds-sp-legend > summary,.ds-sp-decisions > summary { display:flex; align-items:center; gap:12px; padding:16px 0; color:var(--ap-color-muted); font-size:12px; line-height:20px; cursor:pointer; list-style:none; border-radius:8px; }
.ds-sp > .ds-tt-source > summary { padding:16px 0; line-height:20px; border-radius:8px; } /* the Typography fold, on this page's 52px summary row */
.ds-sp-legend > summary::-webkit-details-marker,.ds-sp-decisions > summary::-webkit-details-marker { display:none; }
.ds-sp-count { margin-left:auto; color:var(--ap-color-soft); font:500 10px/1 var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-legend > summary > .ap-icon,.ds-sp-decisions > summary > .ap-icon { transition:transform var(--ap-duration-feedback); }
.ds-sp-legend[open] > summary > .ap-icon,.ds-sp-decisions[open] > summary > .ap-icon { transform:rotate(45deg); }
.ds-sp-fold-note,.ds-sp-empty { max-width:64ch; margin:0 0 12px; color:var(--ap-color-muted); font-size:11px; line-height:1.6; }
.ds-sp-rows,.ds-sp-decisionlist { display:grid; gap:2px; margin:0; padding:0; list-style:none; border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-row { position:relative; display:grid; grid-template-columns:28px 72px 112px minmax(0,1fr) auto; gap:12px; align-items:baseline; width:100%; min-height:44px; padding:12px 16px; border:0; border-radius:0; background:var(--ap-color-inset); color:var(--ap-color-text); font:400 12px/20px var(--ap-font-sans); text-align:left; cursor:pointer; transition:background-color var(--ap-duration-feedback); }
.ds-sp-row[aria-pressed='true'] { background:var(--ap-surface-raised); }
.ds-sp-row-n,.ds-sp-row-kind { color:var(--ap-color-soft); }
.ds-sp-row[aria-pressed='true'] :is(.ds-sp-row-n,.ds-sp-row-kind) { color:var(--ap-color-muted); } /* soft ink passes on inset only */
@media(hover:hover) { .ds-sp-row:hover { background:var(--ap-surface-raised); } .ds-sp-row:hover :is(.ds-sp-row-n,.ds-sp-row-kind) { color:var(--ap-color-muted); } } /* a tap leaves :hover behind; only pinned looks pinned */
.ds-sp-row-n,.ds-sp-row-count { font:500 10px/1.9 var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-row-value { display:inline-flex; align-items:baseline; gap:4px; min-width:0; font:500 11px/1.7 var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-row-value .ds-tt-dot { transform:translateY(-1px); }
.ds-sp-row-source,.ds-sp-row-count { min-width:0; color:var(--ap-color-muted); overflow-wrap:anywhere; }
.ds-sp-row-source code { margin-left:4px; font:400 10px/1.6 var(--ap-font-mono); }
.ds-sp-decisionlist { counter-reset:ds-sp-decision; }
.ds-sp-decisionlist > li { display:grid; grid-template-columns:24px 200px minmax(0,1fr); gap:12px; padding:12px 16px; background:var(--ap-color-inset); font-size:12px; line-height:20px; counter-increment:ds-sp-decision; }
.ds-sp-decisionlist > li::before { content:counter(ds-sp-decision); color:var(--ap-color-soft); font:500 10px/1.9 var(--ap-font-mono); }
.ds-sp-decisionlist strong { color:var(--ap-color-text); font-weight:500; }
.ds-sp-decisionlist span { min-width:0; color:var(--ap-color-muted); overflow-wrap:anywhere; }

/* Token rows: the Typography row, with a true-size specimen. Ghost rows are plain text, never buttons. */
.ds-sp .ds-tt-scale-row { grid-template-columns:132px minmax(0,1fr) auto; align-items:center; padding:16px 20px; }
/* Every container on this page takes the card corner, and every list row is 44 tall: 12 + 20 + 12. The Typography rows and facts it reuses follow here. */
.ds-sp :is(.ds-tt-scale-rows,.ds-tt-facts,.ds-tt-source-body),.ds-sp-static .ds-tt-facts { border-radius:var(--ap-radius-card); }
.ds-sp .ds-tt-facts > div,.ds-sp-static .ds-tt-facts > div { padding:12px 16px; line-height:20px; }
.ds-sp .ds-tt-role-text { display:flex; align-items:center; gap:20px; }
.ds-sp-use { min-width:0; color:var(--ap-color-muted); font-size:12px; line-height:20px; }
.ds-sp-use > small { display:block; font:400 10px/16px var(--ap-font-mono); }
.ds-sp-ghost { display:flex; align-items:baseline; gap:8px; min-height:32px; padding:8px 20px; background:var(--ap-color-inset); color:var(--ap-color-muted); font:400 10px/16px var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-ghost > span { min-width:0; overflow-wrap:anywhere; }
.ds-sp-ghost .ds-tt-dot { transform:translateY(-1px); }
/* A drawing, not spacing: the dimension line sits 3px under the blocks and the 4px ruler under it; 5px ticks center on a 1px line. The box is 44, so rows land on the grid. */
.ds-sp-gap { position:relative; flex:none; display:flex; gap:var(--sp-g); inline-size:96px; block-size:44px; color:var(--ap-color-muted); }
.ds-sp-gap > i { flex:none; inline-size:20px; block-size:28px; background:var(--ap-color-soft); }
.ds-sp-gap > b { position:absolute; left:20px; top:31px; inline-size:var(--sp-g); block-size:1px; background:currentColor; }
.ds-sp-gap > b::before,.ds-sp-gap > b::after { content:''; position:absolute; top:-2px; inline-size:1px; block-size:5px; background:currentColor; }
.ds-sp-gap > b::before { left:0; }
.ds-sp-gap > b::after { right:0; }
.ds-sp-gap > .ds-sp-ticks { position:absolute; left:20px; top:37px; color:var(--ap-color-soft); }
.ds-sp-corner { flex:none; inline-size:72px; block-size:32px; margin-right:24px; border-radius:var(--sp-c); background:var(--ap-color-soft); }
.ds-sp-pocket { flex:none; display:grid; place-items:center; padding:var(--ap-space-3); border-radius:calc(var(--ap-radius-control) + var(--ap-space-3)); background:var(--ap-color-page); } /* concentric with the chip: corners nest here too */
.ds-sp-chip { display:block; inline-size:72px; block-size:32px; border-radius:var(--ap-radius-control); background:var(--sp-tone); box-shadow:var(--sp-cast,none); }

/* Light: tone places a surface, light lifts it. The ladder touches on purpose; the slab is true size, so its focus ring is a true 2px. */
.ds-sp-light { --sp-fill-raised:var(--ap-surface-raised); --sp-fill-inset:var(--ap-color-inset); --sp-shadow-raised:var(--ap-shadow-raised); --sp-shadow-inset:var(--ap-shadow-inset); --sp-shadow-button:var(--ap-shadow-button); --sp-shadow-overlay:var(--ap-shadow-overlay); }
.ds-sp-light[data-tone='off'] { --sp-fill-raised:var(--ap-color-page); --sp-fill-inset:var(--ap-color-page); }
.ds-sp-ladder { display:flex; height:200px; border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-step { position:relative; flex:1 0 0; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:16px 12px; border:0; border-radius:0; background:var(--sp-tone); color:var(--ap-color-muted); font:400 11px/1.3 var(--ap-font-sans); text-align:left; overflow-wrap:anywhere; cursor:pointer; transition:color var(--ap-duration-feedback); }
.ds-sp-step[data-bright] { color:var(--ap-color-on-action); }
@media(hover:hover) and (forced-colors:none) { .ds-sp-step:not([data-bright]):not([aria-pressed='true']):hover { color:var(--ap-color-text); } } /* the fill is the specimen, so hover brightens the ink */
.ds-sp-step[aria-pressed='true'] { box-shadow:inset 0 0 0 2px currentColor; }
.ds-sp-step-value { display:grid; gap:2px; font:500 10px/1.3 var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-ratio { position:absolute; left:0; top:12px; z-index:1; display:grid; place-items:center; height:16px; padding:0 8px; border-radius:999px; background:var(--ap-button-secondary-hover); color:var(--ap-color-muted); font:500 10px/1 var(--ap-font-mono); font-variant-numeric:tabular-nums; transform:translateX(-50%); } /* a tone no step has, so the chip reads whole across every seam */
.ds-sp-offladder { margin-top:24px; }
.ds-sp-lightbar { display:flex; align-items:center; gap:8px; min-height:52px; margin-top:40px; }
.ds-sp-grouplabel { align-self:center; padding:0 2px 0 8px; color:var(--ap-color-soft); font:500 10px/1 var(--ap-font-sans); letter-spacing:.025em; white-space:nowrap; }
.ds-sp-slabstage { display:grid; place-items:center; padding:56px 0 72px; }
.ds-sp-light[data-object='dialog'] .ds-sp-slabstage { padding-bottom:120px; } /* room for the 80px blur */
.ds-sp-light:not([data-object='slab']) [data-sp-object='slab'],.ds-sp-light:not([data-object='button']) [data-sp-object='button'],.ds-sp-light:not([data-object='dialog']) [data-sp-object='dialog'] { display:none; }
.ds-sp-slab { inline-size:min(100%,560px); aspect-ratio:5 / 2; padding:var(--ap-space-6); border-radius:var(--ap-radius-dialog); background:var(--sp-fill-raised); box-shadow:var(--sp-shadow-raised); }
.ds-sp-well { block-size:100%; padding:var(--ap-space-1); border-radius:var(--ap-radius-card); background:var(--sp-fill-inset); box-shadow:var(--sp-shadow-inset); }
.ds-sp-key { display:block; inline-size:50%; block-size:100%; padding:0; border:0; border-radius:calc(var(--ap-radius-card) - var(--ap-space-1)); background:var(--sp-fill-raised); box-shadow:var(--sp-shadow-raised); cursor:pointer; }
.ds-sp-key[aria-pressed='true'] { background:var(--sp-fill-inset); box-shadow:var(--sp-shadow-inset); translate:0 1px; } /* the shipped rocker recipe: the same object, light inverted */
.ds-sp-slab,.ds-sp-well,.ds-sp-key,.ds-sp-slabstage .ap-button,.ds-sp-slabstage .ap-dialog { transition:box-shadow var(--ap-duration-feedback) var(--ap-ease-feedback),background-color var(--ap-duration-feedback) var(--ap-ease-feedback),translate var(--ap-duration-feedback) var(--ap-ease-feedback); }
.ds-sp-key[aria-pressed='true'] { transition-duration:var(--ap-duration-press); }
.ds-sp-slabstage .ap-button { box-shadow:var(--sp-shadow-button); }
.ds-sp-slabstage .ap-dialog { inline-size:min(100%,440px); max-block-size:none; margin:0; overflow:visible; box-shadow:var(--sp-shadow-overlay); }
.ds-sp-light[data-tone='off'] .ds-sp-slabstage .ap-button:not([data-variant]) { --ap-button-bg:var(--ap-color-page); }
.ds-sp-light[data-tone='off'] .ds-sp-slabstage .ap-dialog { background:var(--ap-color-page); }
.ds-sp-forced { display:none; }
.ds-sp-edges { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; margin-top:24px; }
.ds-sp-edges figure,.ds-sp-nestgrid figure { min-width:0; margin:0; }
.ds-sp-crop { position:relative; block-size:120px; border-radius:var(--ap-radius-card); overflow:hidden; background:var(--ap-color-page); }
.ds-sp-crop[data-edge^='recess'] { background:var(--sp-fill-raised); }
.ds-sp-crop > i { position:absolute; left:-480px; top:50%; inline-size:200px; block-size:80px; border-radius:var(--ap-radius-card); background:var(--sp-fill-raised); box-shadow:var(--sp-shadow-raised); transform:scale(8); transform-origin:0 0; }
.ds-sp-crop[data-edge^='recess'] > i { background:var(--sp-fill-inset); box-shadow:var(--sp-shadow-inset); }
.ds-sp-crop[data-edge$='bottom'] > i { top:calc(50% - 640px); }
.ds-sp-crop > span { position:absolute; left:12px; top:12px; color:var(--ap-color-muted); font:500 10px/1 var(--ap-font-mono); }
.ds-sp-edges figcaption { display:grid; gap:4px; padding-top:12px; }
.ds-sp-edges figcaption strong { color:var(--ap-color-text); font-size:12px; font-weight:400; }
.ds-sp-edges figcaption span { color:var(--ap-color-soft); font:400 10px/1.6 var(--ap-font-mono); overflow-wrap:anywhere; }
.ds-sp-shadowrows { margin-top:40px; }
.ds-sp-pairs,.ds-sp-built { display:grid; gap:2px; margin:0; border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-pairs > div,.ds-sp-built > div { display:grid; gap:12px; padding:12px 16px; background:var(--ap-color-inset); font-size:12px; line-height:20px; }
.ds-sp-pairs > div { grid-template-columns:88px repeat(3,minmax(0,1fr)) minmax(0,1.3fr); }
.ds-sp-built > div { grid-template-columns:120px 96px minmax(0,1fr); }
.ds-sp-touch { margin-top:24px; }
.ds-sp-touch > div { grid-template-columns:160px minmax(0,1fr); }
.ds-sp-pairs dt,.ds-sp-built dt { color:var(--ap-color-soft); }
.ds-sp-pairs dd,.ds-sp-built dd { min-width:0; margin:0; color:var(--ap-color-text); overflow-wrap:anywhere; }
.ds-sp-pairs dd:not(:last-child),.ds-sp-built:not(.ds-sp-touch) dd:nth-child(2) { font:500 11px/20px var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-built:not(.ds-sp-touch) dd:last-child { color:var(--ap-color-muted); }
.ds-sp-tablewrap { border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-table { width:100%; margin-block:-2px; border-collapse:separate; border-spacing:0 2px; text-align:left; font:500 11px/20px var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-table th,.ds-sp-table td { padding:12px; background:var(--ap-color-inset); color:var(--ap-color-text); font-weight:500; overflow-wrap:anywhere; }
.ds-sp-table th { color:var(--ap-color-soft); font:400 12px/20px var(--ap-font-sans); }
.ds-sp-table small { color:var(--ap-color-muted); font-size:10px; line-height:1; } /* inside the 20px line, not taller than it */

/* Space: the scale above the line, what components write raw below it. */
.ds-sp-ruler { margin:0 0 24px; padding:32px 20px 20px; border-radius:var(--ap-radius-card); background:var(--ap-color-inset); }
.ds-sp-ruler svg { display:block; max-width:100%; height:auto; margin:0 auto; overflow:visible; }
.ds-sp-ruler :is(.ds-sp-ruler-8,.ds-sp-ruler-16) { display:none; } /* three magnifications of one drawing: 5x, 8x and 16x, so the ruler fills the cell it is given */
.ds-sp-ruler text { font:500 10px var(--ap-font-mono); }
.ds-sp-ruler-axis { fill:none; stroke:var(--ap-color-soft); stroke-width:1; }
.ds-sp-ruler-tick { fill:none; stroke:var(--ap-color-text); stroke-width:1; }
.ds-sp-ruler-step { fill:var(--ap-color-text); }
.ds-sp-ruler-px { fill:var(--ap-color-soft); }
.ds-sp-ruler-count { fill:var(--ap-color-muted); }
.ds-sp-ruler-hollow { fill:none; stroke:var(--ap-color-soft); stroke-width:1; }
.ds-sp-ruler-bar { fill:none; stroke:var(--ap-color-muted); stroke-width:1; } /* off the 4px grid: hollow. On it: solid. */
.ds-sp-ruler-bar[data-grid] { fill:var(--ap-color-muted); }
.ds-sp-ruler > .ds-sp-mono { margin-top:20px; }
.ds-sp-ruler figcaption { max-width:64ch; margin-top:8px; color:var(--ap-color-muted); font-size:12px; line-height:1.7; }
.ds-sp-seam { margin-top:56px; }
.ds-sp-seamgrid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:calc(var(--sp-seam,2) * 1px); margin-top:16px; border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-seamgrid > i { grid-column:span 4; block-size:72px; background:var(--ap-color-inset); }
.ds-sp-seamgrid > i:first-child { grid-column:span 8; }
.ds-sp-seam[data-cells='raised'] .ds-sp-seamgrid > i { background:var(--ap-surface-raised); }

/* Shape: two corners at 6:1. Only the nest is magnified; the ink marks and the numbers are true size. */
.ds-sp-nest { --sp-z:6; --sp-r:16; --sp-p:4; --sp-ri:12; --sp-rc:16; --sp-gap-a:4; --sp-gap-b:5.66; }
.ds-sp-nestgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:16px; }
.ds-sp-panel { position:relative; block-size:clamp(220px,34cqi,320px); border-radius:var(--ap-radius-card); overflow:hidden; color:var(--ap-color-text); }
.ds-sp-nestbox { position:absolute; left:24px; top:24px; inline-size:160px; block-size:112px; padding:calc(var(--sp-p) * 1px); border-radius:calc(var(--sp-r) * 1px); background:var(--ap-color-inset); box-shadow:var(--ap-shadow-inset); transform:scale(var(--sp-z)); transform-origin:0 0; }
.ds-sp-nestbox > i { display:block; inline-size:100%; block-size:100%; border-radius:calc(var(--sp-ri) * 1px); background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-sp-panel[data-panel='b'] .ds-sp-nestbox > i { border-radius:calc(var(--sp-rc) * 1px); }
.ds-sp-mark { position:absolute; background:currentColor; }
.ds-sp-mark[data-mark='side'] { left:min(calc(24px + (var(--sp-r) + 6) * var(--sp-z) * 1px), calc(100% - 28px)); top:24px; inline-size:1px; block-size:calc(var(--sp-p) * var(--sp-z) * 1px); }
.ds-sp-mark[data-mark='corner'] { left:calc(24px + var(--sp-r) * .2929 * var(--sp-z) * 1px); top:calc(24px + var(--sp-r) * .2929 * var(--sp-z) * 1px); inline-size:calc(var(--sp-gap-a) * var(--sp-z) * 1px); block-size:1px; transform-origin:0 50%; rotate:45deg; }
.ds-sp-panel[data-panel='b'] .ds-sp-mark[data-mark='corner'] { inline-size:calc(var(--sp-gap-b) * var(--sp-z) * 1px); }
.ds-sp-mark > b { position:absolute; font:500 10px/1 var(--ap-font-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ds-sp-mark[data-mark='side'] > b { left:calc(100% + 8px); top:50%; translate:0 -50%; } /* 8px clear of the mark */
.ds-sp-mark[data-mark='corner'] > b { left:calc(100% + 8px); top:-5px; rotate:-45deg; transform-origin:0 50%; } /* top: the 10px label centered on the 1px mark */
.ds-sp-nestgrid figcaption { display:grid; gap:8px; padding-top:16px; }
.ds-sp-nestgrid figcaption small { color:var(--ap-color-soft); font-size:11px; }
.ds-sp-nestgrid figcaption strong { color:var(--ap-color-text); font:500 clamp(28px,6cqi,56px)/1 var(--ap-font-sans); font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.ds-sp-nestgrid figcaption span { color:var(--ap-color-muted); font-size:12px; line-height:1.6; }
.ds-sp-heights { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; margin-bottom:24px; border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-heights > div { display:grid; align-content:start; gap:24px; min-height:176px; padding:32px 20px 20px; background:var(--ap-color-inset); }
.ds-sp-heightspec { display:grid; place-items:center; min-height:72px; }
.ds-sp-heightspec > span { position:relative; display:inline-flex; color:var(--ap-color-muted); }
.ds-sp-heightspec i { position:absolute; left:calc(100% + 8px); top:0; bottom:0; inline-size:1px; background:currentColor; }
.ds-sp-heightspec i::before,.ds-sp-heightspec i::after { content:''; position:absolute; left:-2px; inline-size:5px; /* centered on the 1px line */ block-size:1px; background:currentColor; }
.ds-sp-heightspec i::before { top:0; }
.ds-sp-heightspec i::after { bottom:0; }
.ds-sp-heightspec small { position:absolute; left:calc(100% + 20px); top:50%; inline-size:72px; translate:0 -50%; color:var(--ap-color-text); font:500 10px/1.3 var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-height { display:grid; gap:4px; width:calc(100% + 24px); min-height:44px; margin:0 -12px -12px; padding:12px; border:0; border-radius:12px; background:transparent; color:var(--ap-color-text); font-family:var(--ap-font-sans); line-height:16px; text-align:left; cursor:pointer; transition:background-color var(--ap-duration-feedback); }
.ds-sp-height[aria-pressed='true'] { background:var(--ap-surface-raised); }
.ds-sp-height[aria-pressed='true'] .ds-tt-role { color:var(--ap-color-muted); }
@media(hover:hover) { .ds-sp-height:hover { background:var(--ap-surface-raised); } .ds-sp-height:hover .ds-tt-role { color:var(--ap-color-muted); } }
.ds-sp-height-detail { font:500 11px/16px var(--ap-font-mono); font-variant-numeric:tabular-nums; }

/* No JavaScript, or a failure: the scale, three tiles and the facts. Nothing moves and nothing is filtered. */
.ds-sp-static { margin-top:24px; }
.ds-sp-static-scale { display:grid; gap:2px; border-radius:var(--ap-radius-card); overflow:hidden; }
.ds-sp-static-scale > div { display:grid; grid-template-columns:96px minmax(0,1fr) auto; gap:20px; align-items:center; padding:16px 20px; background:var(--ap-color-inset); color:var(--ap-color-muted); font-size:12px; }
.ds-sp-static-scale i { grid-column:2; grid-row:1; display:block; block-size:12px; background:var(--ap-color-soft); }
.ds-sp-static-scale span { grid-column:1; grid-row:1; color:var(--ap-color-soft); font-size:11px; }
.ds-sp-static-scale small { grid-column:3; grid-row:1; font:500 10px/1 var(--ap-font-mono); font-variant-numeric:tabular-nums; }
.ds-sp-static-tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.ds-sp-static-tiles > div { display:grid; place-items:center; min-height:120px; border-radius:var(--ap-radius-card); color:var(--ap-color-muted); font-size:12px; }
.ds-sp-static-tiles > [data-tone='page'] { background:var(--ap-color-page); }
.ds-sp-static-tiles > [data-tone='raised'] { background:var(--ap-surface-raised); box-shadow:var(--ap-shadow-raised); }
.ds-sp-static-tiles > [data-tone='inset'] { background:var(--ap-color-inset); box-shadow:var(--ap-shadow-inset); }
.ds-sp-static .ds-tt-facts { margin-top:28px; }

.ds-sp-row:focus-visible,.ds-sp-step:focus-visible,.ds-sp-height:focus-visible,.ds-sp-legend > summary:focus-visible,.ds-sp-decisions > summary:focus-visible,.ds-sp-key:focus-visible { outline:2px solid var(--ap-color-action); outline-offset:-2px; }
.ds-sp-key:focus-visible { outline-offset:3px; } /* the key is never scaled, so this ring is a true 2px */
.ds-sp-step:focus-visible { outline-offset:-6px; } /* inside the 2px pressed ring, so focus and pressed read at once; the ladder clips anything outside */
.ds-sp-step[data-bright]:focus-visible { outline-color:var(--ap-color-on-action); } /* action on the Action step is 1.15:1; on-action is 8.8:1 */
.ds-sp-legend > summary:focus-visible,.ds-sp-decisions > summary:focus-visible { outline-offset:2px; }

@container (min-width:560px) { .ds-sp-ruler .ds-sp-ruler-8 { display:block; } .ds-sp-ruler .ds-sp-ruler-5 { display:none; } }
@container (min-width:900px) { .ds-sp-ruler .ds-sp-ruler-16 { display:block; } .ds-sp-ruler .ds-sp-ruler-8 { display:none; } }
@container (max-width:679px) {
  .ds-sp-step { padding:16px 8px; }
  .ds-sp-edges { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .ds-sp-crop { block-size:96px; }
  .ds-sp-pairs > div { grid-template-columns:88px minmax(0,1fr) minmax(0,1fr); }
  .ds-sp-pairs dt { grid-row:1 / span 2; }
}
@container (max-width:519px) {
  .ds-sp-thesis { font-size:24px; line-height:28px; }
  .ds-sp .ds-tt-scale-row { grid-template-columns:minmax(0,1fr) auto; padding:16px; }
  .ds-sp-row { grid-template-columns:24px auto minmax(0,1fr) auto; }
  .ds-sp-row-source { grid-column:2 / -1; grid-row:2; }
  .ds-sp-row-count { grid-column:4; grid-row:1; }
  .ds-sp-ladder { flex-direction:column; height:auto; }
  .ds-sp-step { flex:none; flex-direction:row; align-items:center; justify-content:space-between; min-height:52px; padding:0 16px; }
  .ds-sp-step-value { display:flex; gap:8px; }
  .ds-sp-ratio { left:auto; right:16px; top:0; transform:translateY(-50%); }
  .ds-sp-lightbar { flex-wrap:wrap; }
  .ds-sp-lightbar > .ds-tt-toolbar { flex-basis:100%; }
  .ds-sp-slab { inline-size:100%; aspect-ratio:3 / 2; }
  .ds-sp-ruler { padding-inline:12px; }
  .ds-sp-ghost { padding-inline:16px; }
  .ds-sp-seamgrid > i,.ds-sp-seamgrid > i:first-child { grid-column:span 12; }
  .ds-sp-seamgrid > i:nth-child(2),.ds-sp-seamgrid > i:nth-child(3) { grid-column:span 6; }
  .ds-sp-nest { --sp-z:4; }
  .ds-sp-nestgrid,.ds-sp-heights { grid-template-columns:minmax(0,1fr); }
  .ds-sp-built > div { grid-template-columns:minmax(0,1fr) auto; }
  .ds-sp-built > div > dd:last-child { grid-column:1 / -1; }
  .ds-sp-touch > div { grid-template-columns:minmax(0,1fr); gap:2px; }
  .ds-sp-table th,.ds-sp-table td { padding:12px 8px; }
  .ds-sp-decisionlist > li { grid-template-columns:24px minmax(0,1fr); }
  .ds-sp-decisionlist > li > span { grid-column:2; }
}
@media(max-width:600px) { .ds-sp-bar [data-sp-reset] > span { display:none; } .ds-sp-static-tiles { grid-template-columns:minmax(0,1fr); } }
@media(max-height:480px) { .ds-sp-bar { position:static; } }
@media(pointer:coarse) { .ds-sp-row,.ds-sp-height { min-height:44px; } .ds-sp-step { min-height:52px; } }
@media(forced-colors:active) {
  .ds-sp-ink [data-hot] :is(.ds-sp-band,.ds-sp-hatch,.ds-sp-dash,.ds-sp-dim,.ds-sp-leader,.ds-sp-outline,.ds-sp-arc) { forced-color-adjust:none; stroke:Highlight; stroke-opacity:1; }
  .ds-sp-row,.ds-sp-step,.ds-sp-height,.ds-sp-ghost,.ds-sp-ruler,.ds-sp-seamgrid > i,.ds-sp-slab,.ds-sp-well,.ds-sp-key,.ds-sp-crop,.ds-sp-crop > i,.ds-sp-nestbox,.ds-sp-nestbox > i,.ds-sp-heights > div,.ds-sp-pairs > div,.ds-sp-built > div,.ds-sp-decisionlist > li,.ds-sp-table th,.ds-sp-table td,.ds-sp-marker,.ds-sp-chip,.ds-sp-static-scale > div,.ds-sp-static-tiles > div { border:1px solid CanvasText; }
  .ds-sp-row[aria-pressed='true'],.ds-sp-step[aria-pressed='true'],.ds-sp-height[aria-pressed='true'],.ds-sp-key[aria-pressed='true'] { forced-color-adjust:none; background:Highlight; color:HighlightText; }
  .ds-sp-gap > i,.ds-sp-corner,.ds-sp-static-scale i,.ds-sp-gap > b,.ds-sp-gap > b::before,.ds-sp-gap > b::after,.ds-sp-mark,.ds-sp-heightspec i,.ds-sp-heightspec i::before,.ds-sp-heightspec i::after { forced-color-adjust:none; background:CanvasText; } /* marks drawn as fills, which forced colors would paint over */
  .ds-sp-mark > b { forced-color-adjust:auto; } /* the number beside a mark is text: let it take the forced text color */
  .ds-sp-ink,.ds-sp-swatch { color:CanvasText; }
  .ds-sp :is(.ds-sp-tag,.ds-sp-row-value,.ds-sp-ghost,.ds-sp-swatch) .ds-tt-dot { forced-color-adjust:none; } /* a dot is a ring or a fill in its text's own color; forced colors would strip the ring */
  .ds-sp-ruler :is(.ds-sp-ruler-axis,.ds-sp-ruler-tick,.ds-sp-ruler-hollow,.ds-sp-ruler-bar) { stroke:CanvasText; }
  .ds-sp-ruler text,.ds-sp-ruler-bar[data-grid] { fill:CanvasText; }
  .ds-sp-forced { display:block; max-width:64ch; margin:12px 0 0; font-size:12px; line-height:1.7; }
}
@media(prefers-contrast:more) { .ds-sp-band,.ds-sp-dash,.ds-sp-dim,.ds-sp-leader,.ds-sp-outline { stroke-opacity:.8; } }
@media(prefers-reduced-motion:reduce) {
  .ds-sp-ink [data-measure],.ds-sp-tag,.ds-sp-marker,.ds-sp-row,.ds-sp-height,.ds-sp-step,.ds-sp-slab,.ds-sp-well,.ds-sp-key,.ds-sp-slabstage .ap-button,.ds-sp-slabstage .ap-dialog,.ds-sp-legend > summary > .ap-icon,.ds-sp-decisions > summary > .ap-icon { transition:none; }
  .ds-sp-stage[data-enter='run'] :is(.ds-sp-ink,.ds-sp-tags) { animation:none; }
  .ds-sp-key[aria-pressed='true'] { translate:none; }
}