/* Self-hosted Roboto from Google Fonts v51; license in static/fonts/OFL.txt.
   The current Web/3P/Static font tokens select this family. */
@font-face { font-family:Roboto; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Roboto; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/roboto-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Values come from /theme.css. App-specific choices: content widths,
   breakpoint, stacking order, column proportions and identifier monospace.
   Structural 0/1px rules and viewport sizing are not design tokens. */
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); font-family:var(--md-sys-typescale-body-large-font); font-size:var(--md-sys-typescale-body-large-size); line-height:var(--md-sys-typescale-body-large-line-height); font-weight:var(--Z); letter-spacing:var(--X); }
p { margin:0; }
.tokens-body { display:flex; flex-direction:column; }
a { color:inherit; }
button, input, select { font:inherit; color:inherit; }
button:not(:disabled), [role=button]:not([aria-disabled=true]) { cursor:pointer; }
:root[data-pointer-focus] :is(button,a,summary,dialog):focus-visible:not([data-component-state="focused"],[data-button-state="focused"]) { outline:none; }
:focus-visible { outline:var(--y) solid var(--md-sys-color-primary); outline-offset:var(--G); }

.tokens-main { display:flex; width:100%; max-width:var(--sa); flex:1; margin:0 auto; flex-direction:column; gap:var(--cl); padding:var(--sE) var(--mP); }
.tokens-section { display:flex; flex-direction:column; gap:var(--m); }
.md-typescale-headline-medium { margin:0; font-family:var(--rW); font-size:var(--rY); line-height:var(--rX); font-weight:var(--r0); letter-spacing:var(--rZ); }
.md-typescale-title-medium { margin:0; font-family:var(--e_); font-size:var(--fa); line-height:var(--e-); font-weight:var(--fc); letter-spacing:var(--fb); }
.md-typescale-label-large { margin:0; font-family:var(---); font-size:var(--aa); line-height:var(--4); font-weight:var(--_); letter-spacing:var(--af); }
.md-typescale-body-large { margin:0; font-family:var(--md-sys-typescale-body-large-font); font-size:var(--md-sys-typescale-body-large-size); line-height:var(--md-sys-typescale-body-large-line-height); font-weight:var(--Z); letter-spacing:var(--X); }
.md-typescale-body-medium { margin:0; font-family:var(--eb); font-size:var(--cm); line-height:var(--bz); font-weight:var(--d7); letter-spacing:var(--d6); }
.md-typescale-body-small { margin:0; font-family:var(--cZ); font-size:var(--aZ); line-height:var(--a9); font-weight:var(--c1); letter-spacing:var(--c0); }
.tokens-metadata { margin:0; color:var(--md-sys-color-on-surface-variant); font-size:var(--aZ); line-height:var(--a9); }
.md-typescale-body-small { color:var(--md-sys-color-on-surface-variant); }
.tokens-code, .tokens-token-name { font-family:ui-monospace, monospace; font-size:var(--cm); }
.tokens-code { padding:var(--ay) var(--md-sys-measurement-space50); border-radius:var(--mR); background:var(--md-sys-color-surface-container); overflow-wrap:anywhere; }
.tokens-link { color:var(--md-sys-color-primary); text-decoration:none; }
.tokens-link:hover { text-decoration:underline; }
.tokens-card-grid { --m1:4; list-style:none; margin:0; padding:0; }
.tokens-card { display:block; height:100%; color:var(--md-sys-color-on-surface); text-decoration:none; }
.tokens-card small { display:block; margin-top:var(--md-sys-measurement-space50); color:var(--md-sys-color-on-surface-variant); }
.tokens-search-form { display:flex; flex-direction:column; gap:var(--md-sys-measurement-space100); max-width:36rem; }
.tokens-search-input { width:100%; min-height:var(--md-comp-outlined-text-field-container-height); padding:var(--md-sys-measurement-space200);    }
.tokens-source-list, .tokens-subject-list { list-style:none; margin:0; padding:0; }
.tokens-list-item { flex-wrap:wrap; display:flex; align-items:baseline; gap:var(--md-sys-measurement-space100); padding:var(--md-sys-measurement-space100) 0; border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-list-item:last-child { border:0; }
.tokens-actions { margin:0; }
.tokens-change-card + .tokens-change-card { margin-top:var(--md-sys-measurement-space200); }
.tokens-pagination { display:flex; align-items:center; justify-content:center; gap:var(--md-sys-measurement-space200); padding:var(--md-sys-measurement-space200) 0; }


.tokens-audience-grid, .tokens-handoff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); gap:var(--md-sys-measurement-space100); }
/* Layout belongs to the page; appearance belongs to the Material variant. */
.tokens-card-content { display:flex; min-width:0; flex-direction:column; align-items:flex-start; gap:var(--m); }
/* Tool destinations use the same tiles as component and style listings. */
.tokens-tools { gap:var(--o); }
.tokens-tools-heading { display:grid; gap:var(--m); }
/* Two feature destinations retain catalog tile anatomy at a larger scale. */
.tokens-tools .tokens-card-grid { --m1:var(--rK); }
.tokens-tools .tokens-component-tile-link { padding:var(--o); gap:var(--m); }
.tokens-tool-image { display:block; inline-size:100%; block-size:100%; object-fit:contain; }
.tokens-code-block { width:100%; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; padding:var(--m); font:inherit; line-height:var(--bz); }
.tokens-copy-status { min-height:var(--bz); color:var(--md-sys-color-on-surface-variant); }

.tokens-handoff-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr)); }
.tokens-handoff-grid > :first-child { grid-column:1 / -1; }

.md-card.tokens-secondary-option { --cn:var(--E); color:var(--a); }
.tokens-secondary-option > .tokens-copy-status { color:inherit; }

.tokens-gallery-filters { display:flex; flex-wrap:wrap; align-items:end; gap:var(--md-sys-measurement-space200); margin-block:var(--o); }
.tokens-gallery-filters > label { display:flex; flex-direction:column; min-inline-size:min(100%,8rem); gap:var(--md-sys-measurement-space50); }

.tokens-theme-controls .md-icon-button { flex:none; }

.tokens-component-example {margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--md-sys-measurement-space200);padding:var(--md-sys-measurement-space200);}
.tokens-component-example > :is(.md-card,.md-menu,.md-dialog,.md-outlined-text-field,.md-filled-text-field,.md-outlined-select,.md-filled-select,.md-outlined-autocomplete,.md-filled-autocomplete) {width:100%;}
.tokens-component-example > .md-card {text-decoration:none;}
.tokens-component-example .md-dialog footer {display:flex;justify-content:flex-end;gap:var(--md-sys-measurement-space100);margin-top:var(--md-sys-measurement-space200);}

/* Preview artwork: surface and outline follow the theme; dot geometry is a presentation choice. */
.tokens-preview-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); border-radius:var(--e9); background-color:var(--md-sys-color-surface); background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--md-sys-color-outline) 30%,transparent) 0.7px,transparent 0.8px); background-size:var(--md-sys-measurement-space100) var(--md-sys-measurement-space100); padding:var(--md-sys-measurement-space200); gap:var(--o); }
.tokens-preview-grid > .tokens-component-example { justify-content:center; min-height:12rem; }
/* Card specimens use the supplemental 8dp maximum inter-card spacing. */
.tokens-preview-grid:has(> figure > .md-card) { gap:var(--md-sys-measurement-space100); }
.tokens-preview-grid > figure:has(> .md-card) { padding-inline:0; }

.tokens-preview-grid:has(> figure > .md-button), .tokens-preview-grid:has(> figure > .md-icon-button), .tokens-preview-grid:has(> figure > .md-filter-chip), .tokens-preview-grid:has(> figure > .md-radio-choice) { grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr)); }

/* Catalog preview cards retain their own color and shape interaction. */
.tokens-component-tile { position:relative;overflow:hidden;display:flex;flex-direction:column;min-width:0;border-radius:var(--gW);--r4:var(--md-sys-color-surface-container);isolation:isolate;color:var(--md-sys-color-on-surface);transition:background-color var(--rN) var(--md-sys-motion-easing-standard),color var(--rN) var(--md-sys-motion-easing-standard),border-radius var(--rN) var(--md-sys-motion-easing-standard); }
.tokens-component-tile::before { content:"";position:absolute;inset:var(--rO) 0 0;z-index:-1;background:var(--r4);transition:background-color var(--rN) var(--md-sys-motion-easing-standard); }
.tokens-component-tile:hover { --r4:color-mix(in srgb,var(--E),var(--a) calc(var(--c) * 100%));color:var(--a); }
.tokens-component-tile:has(.tokens-component-tile-link:focus-visible) { border-radius:var(--rO); --r4:color-mix(in srgb,var(--E),var(--a) calc(var(--d) * 100%)); color:var(--a); }
.tokens-component-tile:has(.tokens-component-tile-link:active) { --r4:color-mix(in srgb,var(--E),var(--a) calc(var(--e) * 100%)); color:var(--a); border-radius:var(--rO); }
#subject-list { margin-block-start:var(--o); }
.tokens-component-thumbnail { position:relative;display:flex; align-items:center; justify-content:center; aspect-ratio:8 / 5; flex:none; overflow:hidden; border-radius:var(--iZ) var(--iZ) var(--gW) var(--gW); background:var(--E); color:var(--a); pointer-events:none; }
.tokens-component-thumbnail > span { color:inherit; }
/* Keep unfinished specimen geometry indistinct without moving the card or label. */
@media (scripting: enabled) {
  .tokens-component-thumbnail:not([data-preview-ready]) .tokens-component-thumbnail-scene { filter:blur(18px); opacity:.65; }
}
.tokens-component-thumbnail[data-preview-error] .tokens-component-thumbnail-scene { visibility:hidden; }
.tokens-component-thumbnail[data-preview-error]::after { content:"Preview unavailable"; font-family:var(--cZ); font-size:var(--aZ); line-height:var(--a9); font-weight:var(--c1); letter-spacing:var(--c0); }
.tokens-component-thumbnail-scene { transition:filter 160ms ease-out,opacity 160ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .tokens-component-thumbnail-scene { transition:none; }
}

/* Thumbnail dimensions and app frames are illustration layout. Component
   dimensions, colors and states continue to use Forge's generated styles. */
.tokens-component-thumbnail-scene { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--_thumbnail-scale,1)); display:flex; align-items:center; justify-content:center; width:360px; height:225px; flex:none; pointer-events:none; color:var(--a); }
.tokens-thumbnail-content h3,.tokens-thumbnail-paper > h3,.tokens-thumbnail-card h3 { margin:0; font-family:var(--e_); font-size:var(--fa); line-height:var(--e-); font-weight:var(--fc); letter-spacing:var(--fb); }
.tokens-thumbnail-content p,.tokens-thumbnail-card p { font-family:var(--eb); font-size:var(--cm); line-height:var(--bz); font-weight:var(--d7); letter-spacing:var(--d6); }
.tokens-component-thumbnail-scene :is(button,input,dialog) { pointer-events:none; }
.tokens-component-thumbnail-scene output:empty { display:none; }
.tokens-component-thumbnail-scene * { animation-play-state:paused !important; }
/* Illustrations have no interaction transitions, including while returning from history. */
.tokens-component-thumbnail-scene *,
.tokens-component-thumbnail-scene *::before,
.tokens-component-thumbnail-scene *::after { transition:none !important; }
.tokens-thumbnail-phone,.tokens-thumbnail-window,.tokens-thumbnail-desktop { position:absolute; box-sizing:border-box; overflow:hidden; background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); border:var(--md-sys-measurement-space50) solid var(--md-sys-color-outline-variant); border-radius:var(--gW); }
.tokens-thumbnail-phone { width:320px; height:440px; left:20px; }
.tokens-thumbnail-top { top:30px; }
.tokens-thumbnail-bottom { bottom:28px; }
.tokens-thumbnail-window { width:324px; height:200px; left:18px; top:30px; }
.tokens-thumbnail-content { padding:var(--md-sys-measurement-space200); }
.tokens-thumbnail-content h3 { margin-block-end:var(--md-sys-measurement-space200); }
.tokens-thumbnail-document { display:grid; gap:var(--m); }
.tokens-thumbnail-document span { height:var(--md-sys-measurement-space100); border-radius:calc(var(--md-sys-measurement-space100) / 2); background:var(--md-sys-color-surface-container-high); }
.tokens-thumbnail-document span:nth-child(2) { width:78%; }
.tokens-thumbnail-document span:last-child { width:60%; }
.tokens-thumbnail-badges { display:flex; gap:var(--s); }
.tokens-thumbnail-badges > div { display:grid; justify-items:center; gap:var(--m); }
.tokens-thumbnail-buttons { display:grid; justify-items:center; gap:var(--md-sys-measurement-space200); }
.tokens-thumbnail-button-group { width:300px; flex:none; }
.tokens-thumbnail-buttons > div,.tokens-thumbnail-icons,.tokens-thumbnail-chips { display:flex; align-items:center; justify-content:center; gap:var(--m); }
.tokens-thumbnail-chips { width:280px; flex-wrap:wrap; }
.md-card.tokens-thumbnail-card { width:264px; padding:0; overflow:hidden; }
.tokens-thumbnail-card > .tokens-thumbnail-landscape { height:72px; }
.tokens-thumbnail-card > div { padding:var(--md-sys-measurement-space200); }
.tokens-thumbnail-card p { margin:var(--md-sys-measurement-space50) 0; }
.tokens-thumbnail-card .md-button { margin-block-start:var(--md-sys-measurement-space100); }
.tokens-thumbnail-landscape { display:block; width:100%; height:100px; object-fit:cover; }
.tokens-thumbnail-carousel { width:340px; margin-inline-start:30px; }
.tokens-thumbnail-carousel .md-carousel-item { background:var(--md-sys-color-tertiary-container); }
.tokens-thumbnail-options { display:grid; gap:var(--md-sys-measurement-space100); width:270px; }
.tokens-thumbnail-options > div { display:flex; align-items:center; gap:var(--m); }
.tokens-thumbnail-switches > div { justify-content:space-between; }
.tokens-thumbnail-calendar { width:360px; flex:none; transform:scale(.45); }
.tokens-thumbnail-dialog-context { top:14px; height:200px; }
.tokens-thumbnail-scrim { position:absolute; inset:0; background:color-mix(in srgb,var(--gU) 24%,transparent); }
.tokens-thumbnail-dialog { position:absolute; width:360px; inset:50% auto auto 50%; transform:translate(-50%,-50%) scale(.72); }
.tokens-thumbnail-settings { width:300px; border-radius:var(--e9); background:var(--md-sys-color-surface-container-low); color:var(--md-sys-color-on-surface); padding-block:var(--md-sys-measurement-space100); }
.tokens-thumbnail-settings > div { display:flex; align-items:center; gap:var(--md-sys-measurement-space200); padding:var(--m) var(--md-sys-measurement-space200); }
.tokens-thumbnail-settings > div > span:last-child { margin-inline-start:auto; }
.tokens-thumbnail-settings hr[data-inset] { margin-inline-start:var(--s); }
.tokens-thumbnail-fab-menu { position:absolute; right:16px; bottom:16px; transform:scale(.8); transform-origin:bottom right; }
.tokens-thumbnail-list { width:320px; transform:scale(.85); }
.tokens-thumbnail-menu { width:260px; transform:scale(.8); }
.tokens-thumbnail-nav-bottom { position:absolute; inset:auto 0 0; }
.tokens-thumbnail-desktop { display:flex; width:560px; height:360px; top:28px; left:28px; }
.tokens-thumbnail-navigation { flex:none; }
.tokens-thumbnail-navigation > .md-navigation { height:100%; }
.tokens-thumbnail-desktop > .tokens-thumbnail-content { flex:1; background:var(--md-sys-color-surface-container-low); margin:var(--md-sys-measurement-space100); border-radius:var(--e9); }
.tokens-thumbnail-desktop:has(.md-navigation-drawer) { transform:scale(.75); transform-origin:top left; }
.tokens-thumbnail-side-sheet { left:-120px; width:500px; height:280px; transform:scale(.85); transform-origin:top right; }
.tokens-thumbnail-side-sheet > .tokens-thumbnail-content { width:160px; flex:none; }
.tokens-thumbnail-side-sheet .md-side-sheet { position:relative; flex:none; }
.tokens-thumbnail-progress { width:280px; display:grid; gap:var(--md-sys-measurement-space200); }
.tokens-thumbnail-progress > div:first-child { display:flex; flex-direction:column; gap:var(--md-sys-measurement-space50); }
.tokens-thumbnail-progress-circular { display:flex; align-items:center; gap:var(--md-sys-measurement-space200); }
.tokens-thumbnail-search-results { display:grid; gap:var(--md-sys-measurement-space200); padding-block:var(--md-sys-measurement-space200); }
.tokens-thumbnail-search-results > div { display:flex; align-items:center; gap:var(--md-sys-measurement-space100); }
.tokens-thumbnail-sliders { display:grid; width:280px; gap:var(--m); }
.tokens-thumbnail-snackbar { position:absolute; bottom:20px; left:12px; width:360px; transform:scale(.8); transform-origin:bottom left; }
.tokens-thumbnail-fields { width:280px; display:grid; gap:var(--cl); }
/* Scale the complete clock in one coordinate space, including its inherited
   dial lengths. CSS zoom changes layout and needlessly adds another size space. */
.tokens-component-thumbnail-scene:has(.tokens-thumbnail-clock) { width:720px;height:450px;transform:translate(-50%,-50%) scale(calc(var(--_thumbnail-scale,1) * .5)); }
.tokens-thumbnail-clock { width:584px; flex:none; }
.tokens-thumbnail-toolbar { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); }
.tokens-thumbnail-tooltip { display:grid; justify-items:center; gap:var(--md-sys-measurement-space100); }
.tokens-component-tile-link { display:flex; flex:1; min-block-size:6rem; flex-direction:column; gap:var(--md-sys-measurement-space50); padding:var(--md-sys-measurement-space200); text-decoration:none; border-radius:inherit; }
.tokens-component-tile-link::after { content:""; position:absolute; inset:0; border-radius:inherit; }
.tokens-component-tile-link small { color:inherit; }
.tokens-component-tile:has(.tokens-component-tile-link:focus-visible) { outline:var(--y) solid var(--md-sys-color-primary); outline-offset:var(--G); }
.tokens-component-tile-link:focus-visible { outline:none; }
@media (prefers-reduced-motion:reduce) { .tokens-component-tile, .tokens-component-tile::before { transition:none; } }

.tokens-preview-grid:has(> figure > .md-button) { display:flex; flex-wrap:wrap; overflow-x:auto; }
.tokens-preview-grid > figure:has(> .md-button) { flex:1 1 12rem; min-inline-size:max-content; }
.tokens-component-example > button.md-card { display:flex; flex-direction:column; align-items:flex-start; gap:var(--md-sys-measurement-space100); }

.tokens-preview-grid:has(> figure > .md-snackbar) { display:flex; flex-wrap:wrap; overflow-x:auto; }
.tokens-preview-grid > figure:has(> .md-snackbar) { flex:1 1 20rem; min-inline-size:max-content; }

.tokens-preview-grid > figure:has(> .md-navigation) { min-inline-size:0; }
.tokens-preview-grid:has(.md-navigation-bar) { grid-template-columns:1fr; }
.tokens-preview-grid:has(.md-navigation-drawer) { grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); }
.tokens-preview-grid .md-navigation-bar { min-inline-size:0; }

.tokens-preview-grid:has(.md-tabs-example,.md-segmented-buttons) { grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr)); }
.md-tabs-example > [role="tabpanel"] { padding:var(--md-sys-measurement-space200); }

.tokens-preview-grid:has(.md-slider) { grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }
.tokens-preview-grid > figure:has(.md-slider) { padding-block:var(--cl); }
.tokens-component-example > .md-slider { margin-block-start:var(--s); }

.tokens-preview-grid:has(.md-slider[data-size="xlarge"][data-orientation="horizontal"]) { grid-template-columns:repeat(auto-fit,minmax(min(100%,32rem),1fr)); }
.tokens-preview-grid:has(.md-appbar-demo,.md-toolbar-demo) { grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr)); }
.tokens-preview-grid > figure:has(.md-toolbar-scene) { min-inline-size:0; }
.tokens-preview-grid:has(.md-sheet-demo) { grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr)); }

.tokens-preview-grid:has(.md-split-button) { grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr)); }
.tokens-preview-grid > figure:has(.md-split-button) { min-inline-size:0; overflow:auto; }
.tokens-preview-grid:has(.md-button-group) { grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr)); }
.tokens-preview-grid > figure:has(.md-button-group) { min-inline-size:0; overflow:auto; }

.tokens-preview-grid:has(.md-list) { grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); }
.tokens-preview-grid:has(.md-carousel) { grid-template-columns:repeat(auto-fit,minmax(min(100%,40rem),1fr)); }
.tokens-preview-grid:has(.md-search-demo) { grid-template-columns:repeat(auto-fit,minmax(min(100%,32rem),1fr)); }
.tokens-preview-grid:has(.md-date-demo) { grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); }
.tokens-preview-grid:has(.md-time-demo) { grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); }
.tokens-preview-grid:has(.md-time-panel[data-orientation="landscape"]) { grid-template-columns:repeat(auto-fit,minmax(min(100%,40rem),1fr)); }

.tokens-preview-grid:has(.md-full-screen-dialog) { grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr)); }
.tokens-preview-grid:has(.md-dialog-demo):not(:has(.md-full-screen-dialog)) { grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr)); }

.tokens-preview-grid:has(.md-menu [data-menu-static]:not([hidden])) { grid-template-columns:repeat(auto-fit,minmax(min(100%,34rem),1fr)); }

.tokens-preview-grid:has(.md-menu[data-orientation="horizontal"]) { grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); }

.tokens-thumbnail-bottom > .tokens-thumbnail-content { position:absolute; inset:auto 0 108px; }
.tokens-thumbnail-bottom:has(.md-bottom-sheet) { transform:scale(.8); transform-origin:bottom left; bottom:16px; left:52px; }
.tokens-thumbnail-bottom:has(.md-bottom-sheet) > .tokens-thumbnail-content { bottom:250px; }

/* Form controls need a page surface; floating actions use the shared blue backdrop. */
.tokens-thumbnail-paper { box-sizing:border-box; padding:var(--md-sys-measurement-space200); border-radius:var(--e9); background:var(--md-sys-color-surface-container-low); color:var(--md-sys-color-on-surface); }
.tokens-thumbnail-view { width:300px; display:grid; gap:var(--md-sys-measurement-space200); }
.tokens-thumbnail-sliders.tokens-thumbnail-paper { width:320px; gap:var(--md-sys-measurement-space100); transform:scale(.9); }
.tokens-thumbnail-sliders .md-slider { margin-block:var(--md-sys-measurement-space50); }

.tokens-thumbnail-plain-tooltip { position:absolute; left:22px; top:52px; }
.tokens-thumbnail-rich-tooltip { position:absolute; left:135px; top:25px; transform:scale(.8); transform-origin:top left; }
.tokens-thumbnail-rich-tooltip > .md-tooltip { width:240px; }

.tokens-thumbnail-toolbar-phone { left:20px; }
.tokens-thumbnail-toolbar-phone .tokens-thumbnail-toolbar { bottom:24px; }
.tokens-thumbnail-home-indicator { position:absolute; left:50%; bottom:var(--md-sys-measurement-space100); transform:translateX(-50%); width:40%; height:var(--md-sys-measurement-space50); border-radius:calc(var(--md-sys-measurement-space50) / 2); background:var(--md-sys-color-on-surface); }

.tokens-preview-grid:has(.md-rail-frame) { grid-template-columns:repeat(auto-fit,minmax(min(100%,32rem),1fr)); }

.tokens-preview-grid:has(.md-search-demo) { grid-template-columns:repeat(auto-fit,minmax(min(100%,32rem),1fr)); }

/* Style illustrations use shared typography, surfaces, shapes and spacing. */
.tokens-style-elevation { position:relative;inline-size:280px;block-size:160px; }
.tokens-style-elevation > .md-card { position:absolute;inline-size:180px;block-size:100px;box-sizing:border-box; }
.tokens-style-elevation > :first-child { inset:0 auto auto 0; }
.tokens-style-elevation > :nth-child(2) { inset:40px auto auto 55px; }
.tokens-style-elevation > .md-fab { position:absolute;inset:auto 0 0 auto; }
.tokens-style-shapes { display:grid;grid-template-columns:repeat(2,72px);gap:var(--md-sys-measurement-space200); }
.tokens-style-shapes > span { block-size:72px;background:var(--a);border-radius:var(--gQ); }
.tokens-style-shapes > :nth-child(2) { border-radius:var(--e9);background:transparent;outline:3px solid var(--a);outline-offset:-3px; }
.tokens-style-shapes > :nth-child(3) { border-radius:var(--gW) var(--gQ);background:transparent;outline:3px solid var(--a);outline-offset:-3px; }
.tokens-style-shapes > :nth-child(4) { border-radius:var(--gW); }
.tokens-style-type { display:grid;gap:var(--md-sys-measurement-space100);inline-size:290px;color:var(--a); }
.tokens-style-type > :nth-child(3) { color:inherit; }
.tokens-style-motion { display:grid;justify-items:center;gap:var(--m); }
.tokens-style-motion > svg { inline-size:260px;block-size:130px;overflow:visible;fill:var(--a); }
.tokens-style-motion path { fill:none;stroke:var(--a);stroke-width:3; }
.tokens-style-motion .tokens-style-motion-grid { stroke:var(--a);stroke-width:1; }
/* This illustration demonstrates motion; other thumbnail state changes stay frozen. */
.tokens-style-motion circle { offset-path:path("M10 120C20 120 30 10 250 10"); offset-distance:60%; offset-rotate:0deg; transition:offset-distance var(--md-sys-motion-duration-medium2) var(--sr) !important; }
.tokens-component-tile:is(:hover,:focus-within) .tokens-style-motion circle { offset-distance:85%; }
@media(prefers-reduced-motion:reduce) { .tokens-style-motion circle { transition:none !important; } }
.tokens-style-spacing { display:grid;gap:var(--md-sys-measurement-space200); }
.tokens-style-spacing > div { display:flex;align-items:center;gap:var(--md-sys-measurement-space200); }
.tokens-style-spacing > div > span { inline-size:24px; }
.tokens-style-space { display:flex;gap:var(--md-sys-measurement-space100); }
.tokens-style-space-16 { gap:var(--md-sys-measurement-space200); }
.tokens-style-space-24 { gap:var(--o); }
.tokens-style-space > i { display:block;inline-size:48px;block-size:32px;border-radius:var(--gQ);background:var(--a); }

.md-typescale-display-small { font-family:var(--sv); font-size:var(--sx); line-height:var(--sw); font-weight:var(--sz); letter-spacing:var(--sy); }
.md-typescale-title-large { font-family:var(--da); font-size:var(--c5); line-height:var(--db); font-weight:var(--c6); letter-spacing:var(--d8); }
/* Bound the full shared rail composition so its destinations remain in view. */
.tokens-thumbnail-desktop:has(.md-rail-frame) { inline-size:520px;block-size:400px;left:20px;top:16px;transform:scale(.65);transform-origin:top left; }
.tokens-thumbnail-navigation:has(> .md-rail-frame) { inline-size:520px; }
.tokens-thumbnail-navigation > .md-rail-frame { block-size:400px; }

/* Primary navigation is a disclosure on compact windows, with one shared DOM. */
.tokens-catalog-select { inline-size:100%;min-inline-size:0; }
.tokens-catalog-select > input[readonly] { cursor:pointer;text-overflow:ellipsis; }
.tokens-catalog-select > input[type="hidden"] { display:none; }
.tokens-gallery-filters { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));align-items:center;gap:var(--md-sys-measurement-space200); }
.tokens-gallery-filters > input[type="hidden"] { display:none; }
.tokens-gallery-filters > button { justify-self:start; }
.tokens-export-dialog .tokens-export-fields { display:grid;gap:var(--o);margin-block:var(--o); }
.tokens-export-dialog .md-dialog-content { padding:var(--md-sys-measurement-space50); }
.tokens-export-dialog .md-typescale-body-small { margin-block-end:var(--m); }

.tokens-handoff-grid .md-button { align-self:flex-start; inline-size:fit-content; }

.tokens-thumbnail-loading .md-loading { --m0:var(--md-sys-color-surface); --jf:var(--md-sys-color-primary); }

.tokens-gallery-filters { display:flex;flex-wrap:wrap;align-items:center;gap:var(--md-sys-measurement-space100); }
.tokens-preview-comparison { display:flex;flex-direction:column;align-items:flex-start;gap:var(--md-sys-measurement-space100);inline-size:100%;min-inline-size:0; }
.tokens-preview-comparison > .md-button-group[data-control="connected"] { box-sizing:border-box;inline-size:max-content;max-inline-size:100%;overflow-x:auto;overflow-y:hidden;padding:var(--md-sys-measurement-space100); }
.tokens-preview-comparison > .md-button-group[data-control="connected"] > .md-button { flex:1 0 auto; }

.tokens-landing-hero { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--md-sys-measurement-space100); }
.tokens-landing-copy { display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--o);padding:var(--md-sys-measurement-space500) var(--cl);border-radius:var(--gW);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface); }
.tokens-landing-hero h1 { max-inline-size:22ch;margin:0;text-wrap:balance; }
.tokens-landing-copy > p { margin:0;max-inline-size:45ch; }
.tokens-landing-actions { display:flex;flex-wrap:wrap;align-items:center;gap:var(--md-sys-measurement-space100);margin-block-start:var(--md-sys-measurement-space100); }
.tokens-landing-art { position:relative;overflow:hidden;isolation:isolate;min-inline-size:0;min-block-size:28rem;border-radius:var(--gW);background:var(--md-sys-color-surface); }
.tokens-art-mosaic { position:absolute;inset:var(--md-sys-measurement-space200);display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:8px;--_art-spring-damping:var(--ss);--_art-spring-stiffness:var(--st);--_art-turn-duration:var(--md-sys-motion-duration-medium2);--_art-turn-easing:var(--md-sys-motion-easing-standard);--_art-shape-damping:var(--aJ);--_art-shape-stiffness:var(--aK);--_art-corner-small:var(--gQ);--_art-corner-large:var(--e9);--_art-corner-base:var(--gW);--_art-corner-soft:var(--rO); }
.tokens-art-column { display:grid;min-inline-size:0;min-block-size:0;gap:8px; }
.tokens-art-column-0 { grid-template-rows:1.3fr .7fr 1fr; }
.tokens-art-column-1 { grid-template-rows:.7fr 1.5fr .8fr; }
.tokens-art-column-2 { grid-template-rows:1fr .7fr 1.3fr; }
.tokens-art-tile { position:relative;min-inline-size:0;min-block-size:0;overflow:visible;border-radius:var(--gW);container-type:size; }
@property --_art-radius-tl { syntax:"<length>";inherits:true;initial-value:0px; }
@property --_art-radius-tr { syntax:"<length>";inherits:true;initial-value:0px; }
@property --_art-radius-br { syntax:"<length>";inherits:true;initial-value:0px; }
@property --_art-radius-bl { syntax:"<length>";inherits:true;initial-value:0px; }
.tokens-art-tile { --_art-radius-tl:var(--_art-corner-base);--_art-radius-tr:var(--_art-corner-base);--_art-radius-br:var(--_art-corner-base);--_art-radius-bl:var(--_art-corner-base); }
@property --_art-angle { syntax:"<angle>";inherits:false;initial-value:0deg; }
.tokens-art-surface { position:absolute;inset:0;border-radius:var(--_art-radius-tl) var(--_art-radius-tr) var(--_art-radius-br) var(--_art-radius-bl);overflow:hidden; }
/* The inverse-rotated tile bounds cover every corner, including spring overshoot.
   At quarter turns the rotor matches the tile exactly, preserving equal thirds. */
.tokens-art-sections { --sb:max(cos(var(--_art-angle)),calc(-1*cos(var(--_art-angle))));--sc:max(sin(var(--_art-angle)),calc(-1*sin(var(--_art-angle))));position:absolute;inset:50% auto auto 50%;inline-size:calc(100cqw*var(--sb) + 100cqh*var(--sc));block-size:calc(100cqw*var(--sc) + 100cqh*var(--sb));transform:translate(-50%,-50%) rotate(var(--_art-angle));background:linear-gradient(125deg,transparent,color-mix(in srgb,white,transparent 84%)),linear-gradient(90deg,var(--art-a) 0 33.333%,var(--art-b) 33.333% 66.667%,var(--art-c) 66.667%); }
.tokens-art-palette-0 { --art-a:var(--r5);--art-b:color-mix(in srgb,var(--r5),white 55%);--art-c:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary); }
.tokens-art-palette-1 { --art-a:var(--md-sys-color-primary-container);--art-b:var(--md-sys-color-primary);--art-c:var(--rJ);color:var(--b); }
.tokens-art-palette-2 { --art-a:var(--r-);--art-b:color-mix(in srgb,var(--r-),white 40%);--art-c:var(--rJ);color:var(--a); }
.tokens-art-palette-3 { --art-a:var(--E);--art-b:color-mix(in srgb,var(--md-sys-color-primary-container),white 35%);--art-c:var(--md-sys-color-primary-container);color:var(--md-sys-color-primary); }
.tokens-art-palette-4 { --art-a:var(--rJ);--art-b:color-mix(in srgb,var(--rJ),white 55%);--art-c:var(--r5);color:var(--a); }
.tokens-landing-art .tokens-art-pause { position:absolute;inset:auto var(--md-sys-measurement-space200) var(--md-sys-measurement-space200) auto;background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface); }
.tokens-art-toggle-face { display:flex;align-items:center;justify-content:center; }
.tokens-art-pause:has(input:focus-visible) { outline:var(--y) solid var(--md-sys-color-primary);outline-offset:var(--G); }
.tokens-art-pause svg { inline-size:20px;block-size:20px;fill:currentColor; }
.tokens-art-pause .tokens-art-play-icon { display:none; }
.tokens-art-pause:has(input:checked) .tokens-art-pause-icon { display:none; }
.tokens-art-pause:has(input:checked) .tokens-art-play-icon { display:block; }
@media(prefers-reduced-motion:reduce) { .tokens-landing-art .tokens-art-pause { display:none; } }
.tokens-landing-workflows { margin-block-start:var(--cl);gap:var(--md-sys-measurement-space200); }
.tokens-landing-samples { display:grid;gap:var(--md-sys-measurement-space500); }

.tokens-landing-view-all { align-self:flex-end; }
.tokens-landing-section-heading { display:flex;align-items:baseline;justify-content:space-between;gap:var(--md-sys-measurement-space200);margin-block-end:var(--md-sys-measurement-space100); }
@media(max-width:48rem) { .tokens-landing-hero { grid-template-columns:1fr; }.tokens-landing-copy { padding:var(--cl) var(--o); }.tokens-landing-art { min-block-size:0;block-size:18rem; } }

.tokens-art-canvas { position:absolute;inset:0;inline-size:100%;block-size:100%;visibility:hidden; }
[data-canvas-ready] > .tokens-art-canvas { visibility:visible; }
[data-canvas-ready] > .tokens-art-column { display:none; }

/* Give calendars their available width before clamping their token width. */
.tokens-preview-grid > .tokens-component-example:has(> .md-date-demo) { padding-inline:0; }
@media (max-width:600px) {
  .tokens-preview-grid:has(.md-date-demo) { padding-inline:0; }
}

.tokens-selection-example { display:inline-flex; align-items:center; gap:var(--md-sys-measurement-space200); }
.tokens-selection-example > label:last-child { cursor:pointer; }

/* The page uses compact table typography; the export form has its own hierarchy. */
.tokens-export-dialog :is(.md-dialog-content, .tokens-export-fields) {
 display:flex; flex-direction:column; gap:var(--md-sys-measurement-space200);
 font-family:var(--eb); font-size:var(--cm);
 line-height:var(--bz); font-weight:var(--d7);
 letter-spacing:var(--d6);
}
.tokens-export-dialog :is(.md-dialog-content, .tokens-export-fields) > * { flex-shrink:0; }
.tokens-export-dialog :is(.md-dialog-content, .tokens-export-fields) > p { margin:0; }
.tokens-export-dialog :is(.md-dialog-content, .tokens-export-fields) > input[type="hidden"] { display:none; }
.tokens-export-primary { display:grid; gap:var(--md-sys-measurement-space200); }
.tokens-export-choices { border:0; padding:0; margin:0; min-inline-size:0; }
.tokens-export-choices legend, .tokens-export-title {
 color:var(--md-sys-color-on-surface); font-family:var(--e_);
 font-size:var(--fa); line-height:var(--e-);
 font-weight:var(--fc); letter-spacing:var(--fb);
}
.tokens-export-choices legend { display:flex; align-items:center; gap:var(--md-sys-measurement-space100); margin-block-end:var(--md-sys-measurement-space100); }
.tokens-export-choices > div { display:flex; flex-wrap:wrap; align-items:center; gap:0 var(--md-sys-measurement-space200); }
.tokens-export-choices .md-radio-choice { min-block-size:var(--s); }
.tokens-export-choices:has(.md-filter-chip) > div { gap:var(--md-sys-measurement-space100); padding-block:var(--md-sys-measurement-space50); }
.tokens-export-disclosure { box-sizing:border-box; border:1px solid var(--md-sys-color-outline); border-radius:var(--co); }
.tokens-export-disclosure > summary {
 display:flex; align-items:center; gap:var(--md-sys-measurement-space200); list-style:none; cursor:pointer; border:0; background:transparent;
 padding:var(--md-sys-measurement-space200); min-block-size:var(--d4);
}
.tokens-export-disclosure > summary::-webkit-details-marker { display:none; }
.tokens-export-disclosure-label { display:grid; flex:1; min-inline-size:0; gap:var(--md-sys-measurement-space50); }
.tokens-export-disclosure-label > span:last-child { color:var(--md-sys-color-on-surface-variant); }
.tokens-export-chevron { display:flex; flex:none; color:var(--md-sys-color-on-surface-variant); }
.tokens-export-chevron svg { transition:transform var(--_motion-fast-spatial-duration) var(--_motion-fast-spatial-easing); inline-size:var(--o); block-size:var(--o); }
.tokens-export-disclosure[open]:not([data-expanding="false"]) > summary .tokens-export-chevron svg { transform:rotate(180deg); }
.tokens-export-disclosure > fieldset, .tokens-export-context-heading, .tokens-export-context-options { margin:0; padding:0 var(--md-sys-measurement-space200) var(--md-sys-measurement-space200); }
.tokens-export-include > fieldset > legend { position:absolute; clip-path:inset(50%); inline-size:1px; block-size:1px; overflow:hidden; }
.tokens-export-context-heading { display:flex; align-items:flex-start; gap:var(--md-sys-measurement-space100); }
.tokens-export-context-heading > p { margin:0; flex:1; }
.tokens-export-context-heading .md-tooltip-demo { inline-size:auto; flex:none; }
.tokens-export-context-heading .md-tooltip > p + p { margin-block-start:var(--md-sys-measurement-space100); }
.tokens-export-context-options { display:grid; gap:var(--md-sys-measurement-space200); }
.tokens-export-context-options legend {
 font-size:var(--d_); line-height:var(--d9);
 font-weight:var(--ea); letter-spacing:var(--d-);
}

.tokens-download-split { justify-self:end; }
.tokens-context-status:empty { display:none; }
.tokens-export-disclosure[data-expanding] { overflow:hidden; }

.tokens-context-help .md-tooltip > span { display:block; }
.tokens-context-help .md-tooltip > span + span { margin-block-start:var(--md-sys-measurement-space200); }

@media (prefers-reduced-motion:reduce) { .tokens-export-chevron svg { transition:none; } }

.tokens-subject-illustration { margin:0; overflow:hidden; border-radius:var(--gW); }
.tokens-subject-illustration picture, .tokens-subject-illustration img { display:block; inline-size:100%; }
.tokens-subject-illustration img { block-size:auto; aspect-ratio:1200 / 630; }



.md-list-leading.md-list-image > img { width:100%; height:100%; object-fit:cover; }

/* Playground framing is owned by the catalog, not the component surface. */
.md-sheet-demo {
  --_sheet-peek-height: 56px;
  --_sheet-expanded-height: min(24rem, 85svh);
  --_sheet-drag-distance: 56px;
  --_sheet-drag-velocity: 125;
  --_sheet-scrim-color: var(--gU);
  --_sheet-scrim-opacity: 0.32;
  inline-size: 28rem;
  max-inline-size: 100%;
  display: grid;
  gap: var(--md-sys-measurement-space200);
}
.md-sheet-frame {
  position: relative;
  inline-size: 100%;
  block-size: min(28rem, 70svh);
  overflow: hidden;
  background: var(--md-sys-color-surface-container-high);
}
.md-sheet-page-label {
  display: block;
  padding: var(--md-sys-measurement-space200);
  color: var(--md-sys-color-on-surface);
}
.md-appbar-demo {
  inline-size: 28rem;
  max-inline-size: 100%;
}

.tokens-thumbnail-card > .tokens-thumbnail-landscape { border-radius:var(--c7); }

.tokens-component-example > .md-card:has(.md-card-media) { max-inline-size:360px; }
.tokens-component-thumbnail > .tokens-subject-illustration { display:block; width:100%; margin:0; border-radius:var(--iZ); }
.tokens-component-thumbnail > .tokens-subject-illustration img { width:100%; height:100%; aspect-ratio:8/5; object-fit:cover; }
.tokens-thumbnail-image { position:relative;display:block;width:100%;height:100%;isolation:isolate;--_thumbnail-placeholder:var(--_thumbnail-light-default,none); }
.tokens-thumbnail-image::before { content:"";position:absolute;inset:-8%;z-index:-1;background:var(--_thumbnail-placeholder) center/cover;filter:blur(var(--_thumbnail-blur,10px)); }
.tokens-thumbnail-image img { display:block;width:100%;height:100%;object-fit:cover;transition:opacity 280ms ease-out,filter 280ms ease-out; }
.tokens-thumbnail-image[data-image-loading] img { opacity:0;filter:blur(8px); }
:root[data-theme="dark"] .tokens-thumbnail-image { --_thumbnail-placeholder:var(--_thumbnail-dark-default,none); }
:root[data-theme="light"][data-contrast="medium"] .tokens-thumbnail-image { --_thumbnail-placeholder:var(--_thumbnail-light-medium,none); }
:root[data-theme="light"][data-contrast="high"] .tokens-thumbnail-image { --_thumbnail-placeholder:var(--_thumbnail-light-high,none); }
:root[data-theme="dark"][data-contrast="medium"] .tokens-thumbnail-image { --_thumbnail-placeholder:var(--_thumbnail-dark-medium,none); }
:root[data-theme="dark"][data-contrast="high"] .tokens-thumbnail-image { --_thumbnail-placeholder:var(--_thumbnail-dark-high,none); }
@media(prefers-reduced-motion:reduce) { .tokens-thumbnail-image img { transition:none; } }
.tokens-style-colors { display:flex;gap:var(--md-sys-measurement-space100);width:296px;height:152px; }
.tokens-style-colors > div { display:flex;flex:1;flex-direction:column;border-radius:var(--e9);overflow:hidden; }
.tokens-style-colors strong,.tokens-style-colors span { display:grid;place-items:center;flex:1;font-family:var(--da);font-size:var(--c5);font-weight:var(--c6);line-height:var(--db); }
.tokens-style-colors [data-color-family="primary"] { background:var(--md-sys-color-primary);color:var(--b); }
.tokens-style-colors [data-color-family="primary"] span { background:var(--md-sys-color-primary-container);color:var(--g); }
.tokens-style-colors [data-color-family="secondary"] { background:var(--k);color:var(--l); }
.tokens-style-colors [data-color-family="secondary"] span { background:var(--E);color:var(--a); }
.tokens-style-colors [data-color-family="tertiary"] { background:var(--md-sys-color-tertiary);color:var(--p); }
.tokens-style-colors [data-color-family="tertiary"] span { background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container); }
.tokens-style-colors [data-color-family="error"] { background:var(--f);color:var(--9); }
.tokens-style-colors [data-color-family="error"] span { background:var(--gH);color:var(--2); }

/* Card count is a content decision; cards span the shared region grid. */
@container tokens-layout (min-width:840px) {
 .tokens-card-grid { --m1:2; }
 .tokens-tools .tokens-card-grid { --m1:4; }
}
@container tokens-layout (min-width:1200px) {
 .tokens-card-grid { --m1:3; }
 .tokens-tools .tokens-card-grid { --m1:6; }
}

.md-typescale-display-medium { font-family:var(--rR); font-size:var(--rT); line-height:var(--rS); font-weight:var(--rV); letter-spacing:var(--rU); }

.md-typescale-headline-large { font-family:var(--mT); font-size:var(--mV); line-height:var(--mU); font-weight:var(--mX); letter-spacing:var(--mW); }

.md-typescale-headline-small { font-family:var(--i5); font-size:var(--i7); line-height:var(--i6); font-weight:var(--i9); letter-spacing:var(--i8); }

.md-typescale-label-small { font-family:var(--i-); font-size:var(--jb); line-height:var(--ja); font-weight:var(--jd); letter-spacing:var(--jc); }

.md-typescale-label-medium { font-family:var(--gK); font-size:var(--gM); line-height:var(--gL); font-weight:var(--gO); letter-spacing:var(--gN); }
.tokens-badge-example[data-badge-placement="trailing"] { inline-size:auto; display:inline-flex; gap:8px; padding-inline:12px; }
.tokens-badge-example[data-badge-placement="trailing"] > span:not(.md-badge-anchor):not(.md-badge):not(.md-button-ripple) { display:inline; }
.tokens-badge-example.md-icon-button { overflow:visible; }
.tokens-badge-example[data-badge-placement="trailing"] { font:inherit; }

.tokens-navbar-preview { inline-size:min(100%,var(--nav-preview-width,100%)); margin-inline:auto; }

.tokens-navbar-screen { background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); border:1px solid var(--md-sys-color-outline-variant); border-block-end:0; text-align:start; }
.tokens-navbar-screen > [data-navbar-page] { block-size:208px; overflow:auto; padding:16px; }
.tokens-navbar-screen h3 { margin:0 0 8px; }
.tokens-navbar-screen p { margin:0 0 12px; color:var(--md-sys-color-on-surface-variant); }
.tokens-navbar-screen ul { margin:0; padding:0; list-style:none; }
.tokens-navbar-screen li { padding-block:12px; border-block-end:1px solid var(--md-sys-color-outline-variant); }

/* A bottom bar represents the window edge; nested specimen padding must not
   consume its destination touch targets at compact widths. */
@media (max-width:599px) {
 .tokens-preview-grid:has(.md-navigation-bar) { padding-inline:0; margin-inline:calc(-1 * var(--mP)); inline-size:calc(100% + 2 * var(--mP)); }
 .tokens-component-example:has(.md-navigation-bar) { padding-inline:0; }
}

/* Example viewport and panel content belong to Catalog, not the tabs primitive. */
.tokens-component-example > .md-tabs-example[data-tabs-demo] { inline-size:min(100%,360px); margin-inline:auto; }
.tokens-component-example > .md-tabs-example > [role="tabpanel"] { min-block-size:120px; padding:16px; background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); text-align:start; }
.tokens-preview-grid:has(.md-tabs) { grid-template-columns:minmax(0,1fr); }

@media (max-width:599px) {
 .tokens-preview-grid:has(.md-tabs) { padding-inline:0; margin-inline:calc(-1 * var(--mP)); inline-size:calc(100% + 2 * var(--mP)); }
 .tokens-component-example:has(.md-tabs) { padding-inline:0; }
}

.tokens-export-actions { flex-direction:column; align-items:stretch; }
.tokens-export-footer-actions { display:flex; justify-content:flex-end; align-items:center; gap:var(--md-sys-measurement-space100); }
.tokens-export-submit-pending, .tokens-export-confirmation { display:inline-grid; border:0; padding:0; margin:0; min-inline-size:0; }
#tokens-export-summary { display:grid; gap:var(--m); min-block-size:calc(2lh + var(--m)); }
#tokens-export-summary > p { margin:0; }
#tokens-export-summary [data-export-counts]:empty { display:none; }

@media (scripting: none) {
 .tokens-preview-comparison > .md-button-group,
 .tokens-download-split,.tokens-export > button,
 .tokens-token-tools,.tokens-context-button,
 .tokens-context-dialog > header,.tokens-context-dialog > footer { display:none !important; }
 .tokens-context-dialog { margin:0; padding:var(--md-sys-measurement-space200); inline-size:100%; max-inline-size:100%; border:0; box-shadow:none; }
 .tokens-token-filters > noscript { display:block; padding:var(--md-sys-measurement-space200); }
 .tokens-native-downloads { display:flex; flex-wrap:wrap; align-items:center; gap:var(--m); }
 .tokens-native-downloads a { display:inline-block; padding-block:var(--md-sys-measurement-space100); }
 .tokens-download-page { display:grid; gap:var(--md-sys-measurement-space200); max-inline-size:48rem; }
 .tokens-download-page form { display:grid; gap:var(--md-sys-measurement-space200); }
}

.tokens-native-set { display:none; }
@media (scripting: none) {
 .tokens-native-set { display:grid; gap:var(--md-sys-measurement-space50); padding:var(--md-sys-measurement-space100); }
 .tokens-token-set-host { display:none !important; }
}

.tokens-download-page { display:grid; gap:var(--md-sys-measurement-space200); max-inline-size:48rem; }
.tokens-download-page form { display:grid; gap:var(--md-sys-measurement-space200); }
.tokens-download-page fieldset { display:flex; flex-wrap:wrap; gap:var(--m); border:1px solid var(--md-sys-color-outline-variant); border-radius:var(--gQ); }
.tokens-download-page label { display:inline-flex; align-items:center; gap:.5rem; }

@media (scripting: none) {
 .tokens-token-browser .tokens-context-dialog:not([open]) { display:block !important; position:static; }
}

@media (scripting: none) { .md-list-demo[data-native-selection="true"] > .md-list { display:none; } }

/* Context choices are an inline form region when the modal controller is absent. */
@media (scripting: none) {
 .tokens-token-browser .tokens-context-dialog:not([open]) {
  --_elevation-level:var(--r);
  box-sizing:border-box; inset:auto; margin:0; padding:var(--o);
  inline-size:100%; max-inline-size:none; min-inline-size:0; block-size:auto; max-block-size:none;
  border:0; border-radius:var(--iZ); box-shadow:none; background:transparent; color:var(--md-sys-color-on-surface);
 }
 .tokens-context-dialog > .md-dialog-content { padding:0; margin:0; overflow:visible; }
 .tokens-context-dialog .tokens-context-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr)); gap:var(--o); }
 .tokens-context-fields > .tokens-context-advanced { grid-column:1/-1; }
 .tokens-token-filters > noscript { padding-block-start:0; padding-inline:var(--o); }
 .tokens-native-set { padding:0; min-inline-size:0; max-inline-size:24rem; font:var(--ec); color:var(--md-sys-color-on-surface-variant); }
 .tokens-native-set > select { inline-size:100%; }
 .tokens-token-toolbar:has(.tokens-native-set) { align-items:end; }
 .tokens-native-downloads a { color:var(--md-sys-color-primary); font:var(--ec); }
}