@import url('./ui/styles.css');
@import url('./tokens.css');
@import url('./base.css');
@import url('./style-layouts.css');

/* Shared controls. Package controls inherit the same semantic scale. */
a,button,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,.button { min-height:var(--control-height); display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--color-control-border); border-radius:var(--radius-input); box-shadow:var(--shadow-control); padding:5px 12px; color:var(--color-ink); background:var(--color-surface); font:500 0.875rem/1.4286 var(--font-body); text-decoration:none; cursor:pointer; }
button:hover,.button:hover { background:var(--color-paper-2); }
button:active,.button:active { transform:translateY(1px); }
button:disabled,input:disabled,[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.primary { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); }
.primary:hover { background:var(--color-accent-deep); border-color:var(--color-accent-deep); color:var(--color-accent-ink); }
input,select,textarea { min-width:0; min-height:var(--control-height); border:1px solid var(--color-rule-strong); border-radius:var(--radius-input); padding:5px 10px; background:var(--color-field); color:var(--color-ink); font:400 0.875rem/1.4286 var(--font-body); }
input[type=checkbox],input[type=radio] { min-height:0; width:18px; height:18px; margin:0; accent-color:var(--color-accent); }
input::placeholder,textarea::placeholder { color:var(--color-muted); opacity:1; }
label { font-size:0.875rem; line-height:1.375rem; }
small,.english,.muted { color:var(--color-muted); font-size:0.75rem; line-height:1.125rem; }
code,pre,kbd { font-family:var(--font-outlier); font-size:0.8125rem; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.3125rem; }
.skip { position:fixed; z-index:1000; top:-80px; left:20px; padding:12px 20px; border-radius:8px; background:var(--color-surface); }
.skip:focus-visible { top:12px; }

/* All page titles share one site display role; package typography stays independent. */
.catalog-intro h1,.detail-heading h1,.icons-heading h1,.playground-heading h1,.prose-main h1,.compare-main h1,.research-main h1 { font-size:var(--site-display); line-height:var(--site-display-line); font-weight:var(--site-display-weight,600); }

/* A quiet global frame; the directory is the main content, not a landing page. */
.topbar { max-width:var(--container); position:sticky; z-index:var(--z-sticky-nav); top:0; display:flex; align-items:center; gap:32px; min-height:var(--site-header-height,72px); border-bottom:1px solid var(--color-rule); background:color-mix(in srgb,var(--color-paper) 94%,transparent); backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:600; font-size:1rem; white-space:nowrap; }
.brand small { margin-left:8px; font-weight:400; font-size:0.75rem; }
.wordmark { display:grid; place-items:center; width:28px; height:28px; border-radius:7px; color:var(--color-paper); background:var(--color-ink); font-size:1.125rem; font-weight:600; letter-spacing:-.06em; }
.topbar nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:0 8px; margin-left:auto; min-width:0; }
.topbar nav a { position:relative; display:flex; align-items:center; min-height:32px; padding:6px 10px; border-radius:6px; font-size:0.8125rem; font-weight:500; text-decoration:none; color:var(--color-muted); white-space:nowrap; }
.topbar nav a:hover,.topbar nav a[aria-current] { color:var(--color-ink); }
.topbar nav a[aria-current] { background:transparent; }
.topbar nav a[aria-current]::after { content:""; position:absolute; height:2px; inset:auto 10px 0; background:var(--color-ink); border-radius:1px; }
.theme-toggle { width:var(--target-size); padding:7px; border-color:transparent; background:transparent; box-shadow:none; }
.eyebrow { font:500 0.75rem/1.5 var(--font-body); color:var(--color-muted); letter-spacing:0; }
.eyebrow span { display:inline-block; margin-left:8px; padding:2px 7px; border:1px solid var(--color-rule); border-radius:6px; font:400 0.75rem/1.3333 var(--font-outlier); letter-spacing:0; }
.catalog-shell,.docs-shell { display:grid; grid-template-columns:var(--site-rail-width,216px) minmax(0,1fr); gap:0; padding:0; max-width:var(--container); }
.catalog-main,.detail-main { padding:var(--site-content-padding,40px); width:100%; max-width:1320px; margin-inline:auto; background:var(--color-surface); }
.sidebar,.docs-navigation { padding:48px 20px; background:var(--color-paper); min-height:calc(100dvh - 72px); }
.sidebar,.docs-navigation,.catalog-main,.detail-main { min-width:0; }
.filter-disclosure,.docs-disclosure { position:sticky; top:96px; }
.filter-disclosure > summary,.docs-disclosure > summary { display:flex; align-items:center; justify-content:space-between; min-height:32px; padding:0 12px 12px; font-size:0.75rem; color:var(--color-muted); cursor:pointer; }
.filter-disclosure > summary::after,.docs-disclosure > summary::after { content:'⌄'; font-size:0.875rem; }
.sidebar nav { display:flex; flex-direction:column; gap:4px; }
.sidebar nav a { display:flex; align-items:center; gap:10px; min-height:32px; padding:6px 10px; color:var(--color-ink-2); text-decoration:none; border-radius:6px; font-size:0.875rem; line-height:1.5rem; }
.sidebar nav a small { margin-left:auto; font-size:0.75rem; font-variant-numeric:tabular-nums; }
.sidebar nav a svg { width:16px; height:16px; }
.sidebar nav a[aria-current] { color:var(--color-ink); background:var(--color-preview); font-weight:600; }
.sidebar nav a:hover,.docs-navigation nav a:hover { background:var(--color-paper-3); }
.sidebar-note { display:flex; flex-direction:column; gap:14px; margin-top:48px; padding:0 10px; }
.sidebar-note a { font-size:0.8125rem; text-decoration:none; color:var(--color-muted); }
.catalog-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:28px; }
.catalog-intro h1 { margin-top:20px; }
.catalog-intro p:not(.eyebrow) { color:var(--color-ink-2); font-size:var(--site-lead); line-height:1.85; margin-top:16px; max-width:38ic; }
.intro-link { display:inline-flex; align-items:center; gap:16px; min-height:40px; padding:8px 16px; border:1px solid var(--color-ink); border-radius:var(--radius-pill); color:var(--color-paper); background:var(--color-ink); font-size:0.875rem; text-decoration:none; white-space:nowrap; }
.intro-link:hover { text-decoration:underline; }

/* Search is immediate. Research filters are an explicit secondary disclosure. */
.filterbar { display:flex; align-items:stretch; gap:12px; position:relative; }
.search-field { display:flex; align-items:center; gap:12px; flex:1; min-width:0; padding:0 16px; border:1px solid var(--color-rule); border-radius:var(--radius-input); background:var(--color-field); color:var(--color-muted); min-height:max(44px,var(--control-height)); }
.search-field svg,.theme-toggle svg { width:16px; height:16px; }
.search-field input { min-height:calc(var(--control-height) - 2px); border:0; border-radius:0; background:transparent; padding-inline:0; flex:1; width:100%; font-size:0.875rem; }
.search-field:focus-within { outline:2px solid var(--color-focus); outline-offset:3px; }
.search-field input:focus-visible { outline:none; }
kbd { border:1px solid var(--color-rule); padding:1px 6px; border-radius:5px; font-size:0.75rem; line-height:1.25rem; }
.advanced-filters { flex:0 0 80px; }
.advanced-filters > summary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:var(--control-height); height:100%; border:1px solid var(--color-rule); border-radius:var(--radius-input); background:var(--color-surface); font-size:0.875rem; cursor:pointer; }
.advanced-filters > summary:hover,.advanced-filters[open] > summary { background:var(--color-paper-2); }
[data-filter-count] { display:grid; place-items:center; min-width:20px; height:20px; border-radius:10px; font-size:0.75rem; color:var(--color-accent-ink); background:var(--color-accent); }
.advanced-filter-fields { position:absolute; inset:calc(100% + 12px) 0 auto; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding:20px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-surface); z-index:var(--z-dropdown); box-shadow:var(--shadow-card); }
.filter-select { display:flex; flex-direction:column; gap:8px; }
.filter-select > span { color:var(--color-muted); font-size:0.75rem; }
.filter-select select { width:100%; }
.noscript-submit { display:none; }
.results-heading { display:flex; align-items:center; justify-content:space-between; margin:20px 0 16px; padding-top:16px; border-top:1px solid var(--color-rule); gap:16px; }
.results-heading > div:first-child { display:flex; align-items:baseline; gap:12px; }
.results-heading h2 { font-size:1rem; line-height:1.5rem; }
.results-heading p { font-size:0.75rem; line-height:1.125rem; color:var(--color-muted); }
.ui-component.catalog-view-control { background:var(--color-paper-2); padding:3px; border-radius:9px; }
.catalog-view-control .ga-choices fieldset { display:block; }
.catalog-view-control legend { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.catalog-view-control .ga-choice-list { display:flex; gap:2px; }
.catalog-view-control label { position:relative; padding:4px 10px; min-height:28px; border:1px solid transparent; border-radius:7px; cursor:pointer; font-size:0.75rem; color:var(--color-muted); }
.catalog-view-control label:has(:checked) { background:var(--color-surface); color:var(--color-ink); box-shadow:0 1px 3px #00000012; }
.catalog-view-control label:focus-within { outline:2px solid var(--color-focus); outline-offset:2px; }
.catalog-view-control input { position:absolute; inset:0; width:100% !important; height:100% !important; opacity:0; clip-path:none; cursor:pointer; margin:0; z-index:1; }

/* Categories create reading landmarks within the live specimen collection. */
.catalog-group { grid-column:1/-1; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-top:32px; border-top:1px solid var(--color-rule); }
.catalog-group:first-child { padding-top:0; border-top:0; }
.catalog-group h2 { font-size:var(--site-section); line-height:1.5; font-weight:600; }
.catalog-group p { color:var(--color-muted); font-size:.75rem; line-height:1.5; }
@media(max-width:40rem) { .catalog-group p { display:none; } }

/* Previews lead. Names and guidance follow the operable specimen. */
.component-grid { display:grid; grid-template-columns:repeat(var(--site-gallery-columns,2),minmax(0,1fr)); gap:var(--site-card-gap,32px); align-items:start; }
.component-card { position:relative; display:flex; flex-direction:column; min-width:0; border:0; border-radius:0; background:transparent; padding-bottom:0; }
.component-card:is(:hover,:focus-within) .card-preview { border-color:color-mix(in srgb,var(--color-ink) 16%,var(--color-rule)); }
.card-preview { position:relative; margin:0; border:1px solid var(--color-rule); border-radius:var(--site-frame-radius,16px); background:var(--color-preview); overflow:hidden; transition:border-color var(--dur-short); }
.card-title { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:18px 0 0; }
.card-title h2 { font-size:var(--site-card-title,1.125rem); line-height:1.625rem; font-weight:600; }
.card-title .english { margin-top:3px; }
.card-title a { text-decoration:none; }
.card-title a:hover { color:var(--color-accent); }
.compare-check { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-height:var(--target-size); padding:6px 8px; color:var(--color-muted); font-size:0.75rem; line-height:1.125rem; white-space:nowrap; cursor:pointer; border-radius:7px; }
.compare-check:hover { background:var(--color-paper-2); }
.compare-check:has(:checked) { color:var(--color-accent); background:var(--color-accent-soft); }
.compare-check:has(:disabled) { opacity:.45; cursor:not-allowed; }
.compare-check input { width:16px; height:16px; }
.card-title .compare-check { margin-right:-8px; opacity:0; transition:opacity var(--dur-micro); }
.component-card:is(:hover,:focus-within) .compare-check,.card-title .compare-check:has(:checked) { opacity:1; }
@media(hover:none) { .card-title .compare-check { opacity:1; } }
.card-description { color:var(--color-ink-2); font-size:0.875rem; line-height:1.5rem; margin:8px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:0; }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px 12px; margin:8px 0 0; padding:0; font-size:0.75rem; line-height:1.125rem; color:var(--color-muted); }
.card-meta a { text-decoration:none; color:var(--color-muted); }
.card-meta a:hover { color:var(--color-accent); }
.card-meta span:last-child { font-size:0.75rem; }
.scope-note { margin-top:24px; color:var(--color-muted); font-size:0.75rem; line-height:1.375rem; }
.no-results { padding:64px 24px; text-align:center; border:1px dashed var(--color-rule); border-radius:var(--site-frame-radius,16px); }
.no-results h2 { margin-bottom:12px; }
.no-results p { margin:0 auto 24px; color:var(--color-muted); }
.component-grid[data-view=list] { grid-template-columns:1fr; gap:0; }
.component-grid[data-view=list] .catalog-group { margin-top:28px; }
.component-grid[data-view=list] .component-card { display:grid; grid-template-columns:minmax(200px,1fr) minmax(0,2fr); align-items:center; gap:8px 32px; padding:20px 0; border:0; border-bottom:1px solid var(--color-rule); border-radius:0; background:transparent; }
.component-grid[data-view=list] .card-preview { display:none; }
.component-grid[data-view=list] .card-title { margin:0; grid-column:1; grid-row:1; }
.component-grid[data-view=list] .card-description { grid-column:2; grid-row:1; margin:0; }
.component-grid[data-view=list] .card-meta { grid-column:1/-1; margin:0; padding:0; justify-content:flex-start; }

/* Documentation: predictable navigation, real preview, code, then reference. */
.docs-disclosure { max-height:calc(100dvh - 104px); overflow:auto; scrollbar-width:thin; padding-right:8px; }
.docs-overview { display:flex; align-items:center; min-height:40px; margin:0 0 16px; color:var(--color-muted); font-size:0.875rem; text-decoration:none; }
.docs-search { display:flex; flex-direction:column; gap:8px; color:var(--color-muted); font-size:0.75rem; }
.docs-search input { width:100%; font-size:0.875rem; }
.docs-navigation nav { margin-top:24px; }
.docs-navigation nav details { margin-bottom:12px; }
.docs-navigation nav summary { display:list-item; padding:8px 0; min-height:40px; font-size:0.8125rem; font-weight:600; cursor:pointer; }
.docs-navigation nav a { display:flex; align-items:center; text-decoration:none; min-height:40px; padding:8px 12px; border-radius:8px; color:var(--color-ink-2); font-size:0.875rem; line-height:1.5rem; }
.docs-navigation nav a[aria-current] { color:var(--color-accent); background:var(--color-accent-soft); font-weight:500; }
.docs-search ~ p { font-size:0.8125rem; margin-top:20px; }
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 24px; color:var(--color-muted); font-size:0.8125rem; line-height:1.5rem; }
.breadcrumb a { text-decoration:none; }
.breadcrumb a:hover { color:var(--color-accent); }
.detail-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:var(--site-heading-gap); }
.detail-heading > div { min-width:0; }
.detail-heading .english { overflow-wrap:anywhere; }
.detail-heading .english { margin-top:8px; font:400 0.875rem/1.4286 var(--font-body); }
.detail-description { margin-top:16px; color:var(--color-ink-2); max-width:42ic; line-height:1.75rem; font-size:1rem; }
.playground-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.component-stage { border:1px solid var(--color-rule); border-radius:var(--site-frame-radius,16px); overflow:hidden; background:var(--color-preview); }
.component-stage,.usage-preview { min-width:0; }
.component-stage > header,.usage-preview > header { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:10px 16px; border-bottom:1px solid var(--color-rule); font-size:0.75rem; color:var(--color-ink-2); }
.usage-preview { border:1px solid var(--color-rule); border-radius:var(--site-frame-radius,16px); overflow:hidden; background:var(--color-paper); }
.usage-preview > header a { font-size:0.75rem; text-decoration:none; color:var(--color-accent); }
.live-indicator { display:flex; align-items:center; gap:6px; color:var(--color-success); font-size:0.75rem; }
.live-indicator::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.detail-preview { margin:0; }
.detail-preview .preview-host > .ui-component.demo { display:flex; flex-direction:column; justify-content:safe center; min-height:400px; padding:40px; border-radius:0; background:var(--color-preview); }
.detail-preview .preview-host > .demo > * { width:100%; max-width:560px; margin-inline:auto; }
.detail-preview figcaption { padding:10px 16px; border-top:1px solid var(--color-rule); font-size:0.75rem; line-height:1.25rem; color:var(--color-muted); background:var(--color-surface); }
.usage-preview [data-preview-code] > .ui-component.demo { background:transparent; border-radius:0; padding:24px; }
.usage-preview pre { font-size:0.8125rem; line-height:1.375rem; margin-top:24px; }
.usage-preview .sample-row small { font-size:0.75rem; }
.usage-preview button { font-size:0.75rem; min-height:var(--control-height); padding:6px 12px; }
.page-sections { display:flex; gap:32px; padding:16px 0; border-bottom:1px solid var(--color-rule); margin-bottom:32px; overflow:auto; }
.page-sections a { display:flex; align-items:center; min-height:32px; font-size:0.875rem; white-space:nowrap; text-decoration:none; color:var(--color-muted); }
.page-sections a:hover { color:var(--color-accent); }
.use-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.use-grid section { padding:0 0 0 16px; border-left:2px solid var(--color-rule); }
.use-grid h2,.detail-section h2 { font-size:1.375rem; line-height:2rem; margin-bottom:16px; }
.use-grid h2 { font-size:1rem; line-height:1.5rem; margin-bottom:8px; }
.use-grid p,.detail-section p,.detail-section li { font-size:1rem; color:var(--color-ink-2); line-height:1.75rem; }
.use-grid p { font-size:0.875rem; line-height:1.5rem; }
.detail-section { margin-top:48px; }
.detail-section .eyebrow { margin-bottom:8px; font-size:0.75rem; line-height:1.25rem; }
.detail-section ul { padding-left:24px; }
.detail-section li + li { margin-top:8px; }
.detail-section h3 { font-size:1rem; margin:24px 0 12px; }
.detail-section p + p { margin-top:16px; }
.api-table-wrap { overflow:auto; border:1px solid var(--color-rule); border-radius:12px; margin-top:24px; }
.api-table { width:100%; border-collapse:collapse; text-align:left; font-size:0.875rem; line-height:1.5rem; }
.api-table th { background:var(--color-paper-2); font-weight:500; color:var(--color-muted); padding:12px 16px; }
.api-table td { padding:12px 16px; border-top:1px solid var(--color-rule); min-width:120px; overflow-wrap:anywhere; }
.api-table td:last-child { color:var(--color-ink-2); max-width:600px; }
.api-event { display:inline-block; border:1px solid var(--color-rule); border-radius:6px; padding:4px 8px; background:var(--color-paper-2); }
.mapping-row { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:16px; padding:24px 0; border-bottom:1px solid var(--color-rule); }
.mapping-row > div { display:flex; flex-wrap:wrap; gap:12px; font-size:0.875rem; }
.mapping-row > span { color:var(--color-muted); font-size:0.75rem; }
.mapping-row p { grid-column:1/-1; margin-top:12px; font-size:0.875rem; line-height:1.5rem; }
.component-context { display:grid; grid-template-columns:2fr 1fr; gap:32px; padding:32px 0; border-top:1px solid var(--color-rule); }
.component-context > div:last-child a { display:flex; justify-content:space-between; min-height:40px; align-items:center; font-size:0.875rem; text-decoration:none; }
.state-tags { display:flex; flex-wrap:wrap; gap:8px; }
.state-tags span { padding:4px 10px; border:1px solid var(--color-rule); border-radius:6px; font-size:0.75rem; line-height:1.25rem; }

/* Long-form pages use a Chinese reading measure, not the full desktop width. */
.prose-main { max-width:1040px; padding-top:64px; }
.prose-main h1,.compare-main h1,.research-main h1 { max-width:24ic; }
.prose-main > .eyebrow { margin-bottom:12px; }
.page-intro { margin:16px 0 32px; color:var(--color-ink-2); font-size:1.125rem; line-height:2rem; max-width:42ic; }
.prose-main > p,.research-main > p { max-width:42ic; line-height:1.75rem; color:var(--color-ink-2); }
.prose-main pre { background:var(--color-paper-2); border:1px solid var(--color-rule); border-radius:12px; padding:24px; margin-block:20px; }
.prose-main .detail-section > .ui-component { margin-top:24px; }
.system-index { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.system-index a { display:flex; flex-direction:column; gap:8px; padding:16px; border:1px solid var(--color-rule); border-radius:10px; text-decoration:none; overflow-wrap:anywhere; }
.system-index a:hover { background:var(--color-paper-2); }
.system-index small { font-size:0.75rem; }
.token-swatches { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 16px; }
.token-swatches > div { display:flex; flex-direction:column; gap:8px; font-size:0.875rem; min-width:0; }
.token-swatches span { height:96px; border:1px solid var(--color-rule); border-radius:12px; }
.token-swatches code { color:var(--color-muted); font-size:0.75rem; overflow-wrap:anywhere; }
.type-specimen { padding:32px; border:1px solid var(--color-rule); border-radius:12px; }
.type-specimen > strong { display:block; font-size:2rem; line-height:2.75rem; font-weight:600; margin-bottom:16px; }
.type-specimen code { display:block; color:var(--color-muted); font-size:0.75rem; margin-top:24px; }
.spacing-specimen { display:flex; flex-wrap:wrap; align-items:flex-end; gap:24px; margin:24px 0; }
.spacing-specimen > div { display:flex; flex-direction:column; align-items:center; gap:12px; }
.spacing-specimen i { display:block; height:24px; background:var(--color-accent); border-radius:4px; }
.spacing-specimen code { color:var(--color-muted); font-size:0.75rem; }
.library-list section { padding:32px 0; border-bottom:1px solid var(--color-rule); }
.library-list h2 { font-size:1.375rem; margin-bottom:16px; }
.library-list dl { display:grid; grid-template-columns:100px minmax(0,1fr); gap:16px; margin:24px 0; }
dt { color:var(--color-muted); font-size:0.875rem; margin-top:24px; }
dd { margin:8px 0 0; font-size:1rem; line-height:1.75rem; }
.library-list dt,.library-list dd { margin:0; }
.inline-link { margin-left:16px; }
.compare-main { padding-top:48px; }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
.comparison-column { min-width:0; }
.comparison-column > h2 { font-size:1.5rem; line-height:2.25rem; }
.comparison-column dd { min-height:3em; }
.comparison-column h3 { margin-top:32px; }
.comparison-column .card-preview { border:1px solid var(--color-rule); border-radius:var(--site-frame-radius,16px); overflow:hidden; margin:24px 0; }
.site-footer { display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; margin-top:80px; padding-block:32px; border-top:1px solid var(--color-rule); color:var(--color-muted); font-size:0.75rem; line-height:1.25rem; margin-bottom:96px; }
.site-footer a { text-decoration:none; }
.site-footer time { margin-left:auto; }
.compare-tray { position:fixed; z-index:var(--z-sticky); bottom:24px; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; align-items:center; gap:24px; width:min(680px,calc(100% - 32px)); padding:16px 20px; border:1px solid var(--color-rule); border-radius:var(--site-frame-radius,16px); background:var(--color-surface); box-shadow:var(--shadow-overlay); }
.compare-tray p { font-size:0.875rem; line-height:1.375rem; }
.compare-tray > div { display:flex; gap:8px; flex-shrink:0; }
.source-filter { display:flex; gap:24px; margin-top:32px; }
.source-filter label { display:flex; flex-direction:column; gap:8px; flex:1; color:var(--color-muted); font-size:0.875rem; }
.source-filter input,.source-filter select { width:100%; }
.source-ecosystems { font-size:0.8125rem; line-height:1.375rem; color:var(--color-muted); margin-top:12px; }
.library-list h2 a { text-decoration:none; }
.library-list h2 a:hover { color:var(--color-accent); }
.library-list details { margin:20px 0; }
.library-list summary { min-height:32px; font-size:0.875rem; cursor:pointer; }
.source-evidence { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; font-size:0.75rem; line-height:1.375rem; color:var(--color-muted); }
.research-main { max-width:1100px; padding-top:64px; }
.research-main .detail-section > p { max-width:42ic; }
.discovery-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
.discovery-list article { min-width:0; padding:24px 0; border-bottom:1px solid var(--color-rule); }
.discovery-list h3 { margin:0 0 12px; font-size:1rem; line-height:1.625rem; }
.discovery-list h3 a { text-decoration:none; }
.discovery-list h3 a:hover { color:var(--color-accent); }
.discovery-list p { font-size:0.875rem; line-height:1.5rem; margin-top:12px; }
.coverage-matrix { overflow-x:auto; margin-top:24px; border:1px solid var(--color-rule); border-radius:12px; }
.coverage-matrix table { width:100%; min-width:960px; border-collapse:collapse; font-size:0.8125rem; line-height:1.375rem; }
.coverage-matrix th,.coverage-matrix td { text-align:center; padding:16px 12px; border-bottom:1px solid var(--color-rule); }
.coverage-matrix th { font-weight:500; }
.coverage-matrix th:first-child { text-align:left; position:sticky; left:0; background:var(--color-paper); min-width:160px; }
.coverage-matrix thead th { color:var(--color-muted); background:var(--color-paper-2); white-space:nowrap; }

@media(max-width:74rem) {
  .catalog-main,.detail-main { padding:32px; }
  .playground-grid { grid-template-columns:1fr; }
}
@media(max-width:60rem) {
  .catalog-shell,.docs-shell { grid-template-columns:minmax(0,1fr); padding:0; gap:0; }
  .sidebar,.docs-navigation { min-height:0; padding:20px 24px 0; border:0; background:transparent; }
  .catalog-main,.detail-main { padding:24px; }
  .filter-disclosure,.docs-disclosure { position:static; max-height:none; }
  .filter-disclosure > summary,.docs-disclosure > summary { min-height:32px; padding:6px 10px; border:1px solid var(--color-rule); border-radius:10px; font-size:0.875rem; color:var(--color-ink); }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; padding-top:12px; }
  .sidebar nav a svg { display:none; }
  .sidebar-note { display:none; }
  .catalog-intro { padding-bottom:24px; }
  .docs-disclosure[open] { padding-bottom:20px; border-bottom:1px solid var(--color-rule); }
  .docs-disclosure[open] > summary { margin-bottom:20px; }
  .docs-navigation nav { max-height:50dvh; overflow:auto; }
  .topbar nav { gap:4px; }
  .brand small { display:none; }
}
@media(max-width:40rem) {
  .topbar { min-height:56px; gap:8px; }
  .topbar nav { gap:2px; }
  .topbar nav a { min-height:40px; padding:6px; }
  .topbar nav a { font-size:0.8125rem; }
  .brand > span:last-child { display:none; }
  .wordmark { width:26px; height:26px; font-size:1rem; border-radius:6px; }
  .theme-toggle { flex-shrink:0; min-height:44px; width:var(--target-size); padding:8px; }
  .catalog-intro { display:block; }
  .catalog-intro h1 { margin-top:16px; }
  .intro-link { display:none; }
  .search-field { padding-inline:12px; gap:8px; }
  .search-field kbd { display:none; }
  .search-field input { font-size:1rem; }
  .advanced-filters { flex-basis:84px; }
  .advanced-filter-fields { grid-template-columns:1fr; padding:20px; }
  .filter-select select { font-size:1rem; }
  .results-heading { margin-top:24px; gap:8px; }
  .results-heading > div:first-child { gap:8px; }
  .results-heading h2 { font-size:0.875rem; }
  .component-grid { grid-template-columns:1fr; gap:20px; }
  .component-grid[data-view=list] .component-card { grid-template-columns:1fr; gap:12px; }
  .component-grid[data-view=list] .card-description { grid-column:1; grid-row:2; }
  .component-grid[data-view=list] .card-meta { grid-row:3; }
  .breadcrumb { margin-bottom:20px; }
  .detail-heading { gap:12px; }
  .detail-heading .english { font-size:0.8125rem; }
  .detail-description { font-size:1rem; }
  .detail-preview .preview-host > .ui-component.demo { min-height:280px; padding:24px 20px; }
  .detail-preview:has(.ga-calendar) .preview-host > .ui-component.demo { padding-inline:12px; }
  .usage-preview [data-preview-code] > .ui-component.demo { padding:20px; }
  .use-grid,.component-context,.comparison-grid { grid-template-columns:1fr; gap:20px; }
  .page-sections { gap:24px; }
  .prose-main,.research-main,.compare-main { padding-top:32px; }
  .page-intro { font-size:1rem; line-height:1.75rem; }
  .system-index { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .token-swatches { grid-template-columns:1fr 1fr; }
  .type-specimen { padding:24px; }
  .type-specimen > strong { font-size:1.5rem; line-height:2.25rem; }
  .library-list dl { grid-template-columns:1fr; }
  .library-list dt { margin-top:12px; }
  .source-filter { flex-direction:column; gap:16px; }
  .discovery-list { grid-template-columns:1fr; }
  .site-footer time { width:100%; margin-left:0; }
  .compare-tray { flex-wrap:wrap; gap:12px; padding:16px; bottom:16px; }
  .compare-tray > div { width:100%; }
  .compare-tray > div > * { flex:1; }
  .compare-tray p { width:100%; }
}
@media(pointer:coarse) {
  input,select,textarea { font-size:1rem; }
  .catalog-view-control label,.compare-check,.page-sections a { min-height:44px; }
  .sidebar nav a,.docs-navigation nav a { min-height:48px; }
}
.type-roles { display:grid; gap:16px; margin-top:24px; }
.type-roles strong { display:block; margin-bottom:4px; font-size:.875rem; }
.type-specimen .type-roles p:nth-child(2) { font-size:.875rem; line-height:1.375rem; }
.type-specimen .type-roles p:nth-child(3) { font-size:.75rem; line-height:1.125rem; }
.control-specimen { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:16px; margin-top:24px; }
.control-specimen > .ui-component { padding:20px; }
@media(max-width:40rem) { .control-specimen { grid-template-columns:1fr; } }

/* The lab is a composed product surface, built from the same public components. */
.playground-main { max-width:1280px; padding-top:64px; }
.playground-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:var(--site-heading-gap); }
.playground-heading h1 { margin-top:20px; }
.playground-heading h1 > span { display:inline-block; max-width:100%; }
.playground-heading p:not(.eyebrow) { color:var(--color-ink-2); margin-top:16px; font-size:1rem; line-height:1.75; }
.lab-local { display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--color-muted); font-size:.75rem; }
.lab-local i { width:6px; height:6px; background:var(--color-success); border-radius:50%; }
.workspace { border:1px solid var(--color-rule); border-radius:var(--site-frame-radius,16px); overflow:hidden; background:var(--color-surface); box-shadow:var(--shadow-card); }
.workspace-bar { min-height:52px; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:12px 20px; border-bottom:1px solid var(--color-rule); font-size:.875rem; }
.workspace-bar > div { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.workspace-bar strong { font-weight:500; }
.workspace-mark { width:28px; height:28px; display:grid; place-items:center; background:var(--color-accent-soft); color:var(--color-accent); font-weight:600; border-radius:8px; }
.workspace-divider,.workspace-bar > div > span:last-child,.workspace-session { color:var(--color-muted); }
.workspace-session { font-size:.75rem; }
.workspace-body { display:grid; grid-template-columns:300px minmax(0,1fr); }
.workspace-files { padding:28px 20px; border-right:1px solid var(--color-rule); background:var(--color-paper-2); }
.workspace-section-label { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:20px; }
.workspace-section-label h2,.workspace-section-label h3 { font-size:.875rem; font-weight:500; }
.workspace-section-label > span { color:var(--color-muted); font-size:.75rem; letter-spacing:.1em; }
.workspace .ui-component { background:transparent; padding:0; border-radius:0; }
.workspace-files .history-sample > p { display:none; }
.workspace-files .history-sample > label { font-size:.75rem; color:var(--color-muted); }
.workspace-files .history-sample input { background:var(--color-surface); }
.workspace-files .history-sample li { border-bottom:0; border-radius:10px; padding:8px; margin:4px -8px; }
.workspace-files .history-sample li:has([aria-current]),.workspace-files .history-sample li:hover { background:var(--color-surface); }
.workspace-files .history-sample li > small { display:none; }
.workspace-hint { display:flex; align-items:flex-start; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--color-rule); color:var(--color-muted); }
.workspace-hint > span { color:var(--color-accent); }
.workspace-hint p { font-size:.75rem; line-height:1.8; }
.workspace-document { min-width:0; padding:32px 40px; }
.document-meta { display:flex; justify-content:space-between; gap:16px; margin-bottom:24px; color:var(--color-muted); font-size:.75rem; line-height:1.5; }
.document-meta > span:first-child { letter-spacing:.08em; }
.workspace-document > h2 { font-size:1.75rem; line-height:1.5; }
.document-deck { color:var(--color-muted); font-size:.875rem; margin-top:8px; margin-bottom:28px; }
.workspace-document .message-actions-demo > p { max-width:40ic; font-size:1rem; line-height:1.9; }
.workspace-document .sample-actions { margin-top:24px; margin-bottom:0; }
.workspace-document [data-ai-feedback] { color:var(--color-success); }
.document-rule { height:1px; margin-block:32px; background:var(--color-rule); }
.workspace-document .ga-tags { margin-bottom:20px; }
.document-footer { display:flex; align-items:center; gap:12px; margin-top:36px; padding-top:24px; border-top:1px solid var(--color-rule); }
.document-avatar { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--color-paper-2); color:var(--color-muted); font-size:.875rem; }
.document-footer strong { font-size:.75rem; font-weight:500; }
.document-footer p { color:var(--color-muted); font-size:.75rem; line-height:1.5; margin-top:4px; }
.lab-explainer { display:flex; justify-content:space-between; align-items:flex-start; gap:32px; margin-top:24px; color:var(--color-muted); font-size:.75rem; line-height:1.8; }
.lab-explainer strong { font-weight:500; color:var(--color-ink-2); }
.lab-explainer a { color:var(--color-accent); white-space:nowrap; text-decoration:none; }
.component-stage { display:flex; flex-direction:column; }
.component-stage .detail-preview { display:flex; flex-direction:column; flex:1; }
.component-stage .detail-preview > .preview-host { flex:1; display:flex; flex-direction:column; }
.component-stage .preview-host > .demo { flex:1; }
.component-card.is-entering { animation:ui-reveal 200ms var(--ease-out); }
.advanced-filter-fields { animation:ui-reveal 160ms var(--ease-out); }
@media(max-width:60rem) {
  .workspace-body { grid-template-columns:280px minmax(0,1fr); }
  .workspace-document { padding:32px 28px; }
  .playground-heading { align-items:flex-start; }
}
@media(max-width:40rem) {
  .topbar nav { gap:0 2px; }
  .playground-main { padding-top:32px; }
  .playground-heading { display:block; }
  .lab-local { margin-top:16px; }
  .workspace-body { grid-template-columns:1fr; }
  .workspace-files { border-right:0; border-bottom:1px solid var(--color-rule); padding:24px 20px; }
  .workspace-hint { display:none; }
  .workspace-document { padding:28px 20px; }
  .workspace-bar { padding:16px 20px; }
  .workspace-session { display:none; }
  .workspace-section-label > span { font-size:.75rem; }
  .lab-explainer { flex-direction:column; gap:12px; }
}

/* Every specimen is operable. Fixed gallery windows scroll instead of clipping. */
.preview-host { min-width:0; }
.card-preview .preview-host { height:var(--site-preview-content,248px); overflow:auto; scrollbar-width:thin; }
.card-preview[data-preview-layout=control] .preview-host { height:var(--site-preview-control,192px); }
.card-preview[data-preview-layout=panel] .preview-host { height:var(--site-preview-panel,320px); }
.card-preview:has(.ui-undo-strip:not([hidden]),.history-undo:not([hidden])) .preview-host { height:auto; min-height:var(--site-preview-content,248px); max-height:560px; }
.card-preview .preview-host > .ui-component { display:flex; flex-direction:column; justify-content:safe center; min-height:100%; padding:28px; border-radius:0; background:transparent; }
.card-preview .preview-host > .ui-component > * { flex-shrink:0; width:100%; margin-inline:auto; }
:is(.card-preview,.detail-preview) .preview-host > .ui-component > svg.ui-icon { width:auto; max-width:100%; align-self:center; }
.card-preview[data-preview-layout=control] .preview-host > .ui-component > * { max-width:272px; }
.preview-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 16px; background:var(--color-preview); border-top:1px solid var(--color-rule); }
.preview-states { display:flex; flex-wrap:wrap; gap:2px; min-width:0; }
.preview-toolbar button { box-shadow:none; min-height:28px; padding:4px 8px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--color-muted); font-size:.75rem; line-height:1.5; transition:color var(--dur-micro),background var(--dur-micro); }
.preview-toolbar button[aria-pressed=true] { color:var(--color-ink); background:transparent; border-bottom-color:var(--color-ink); border-radius:0; }
.preview-toolbar button:hover { color:var(--color-ink); background:var(--color-paper-2); }
.preview-toolbar .preview-reset { width:28px; flex:0 0 28px; padding:6px; }
.card-preview figcaption { padding:0 24px 16px; font-size:.75rem; line-height:1.5; color:var(--color-muted); background:var(--color-preview); }
.detail-preview figcaption { border-top:0; }
.preview-host .ui-component .history-sample li { gap:6px; }
.preview-host .history-row-actions { gap:0; }
.preview-host .history-row-main { flex-basis:100px; }
@media(pointer:coarse) {
  .preview-toolbar button { min-height:44px; }
  .preview-toolbar .preview-reset { width:44px; flex-basis:44px; }
  .topbar nav a { min-height:48px; }
}
@media(max-width:40rem) {
  .catalog-main,.detail-main { padding:24px 20px; }
  .sidebar,.docs-navigation { padding:16px 20px 0; }
  .card-preview .preview-host > .ui-component { padding:16px; }
}

.preview-host .preview-changed { animation:ui-reveal 160ms var(--ease-out); }

/* The icon library uses the same surfaces, type and actual SVG geometry. */
.icons-main { max-width:1440px; padding-top:64px; }
.icons-heading { padding-bottom:var(--site-heading-gap); }
.icons-heading h1 { margin-top:20px; }
.icons-heading > p:last-child { color:var(--color-ink-2); font-size:var(--site-lead); line-height:1.85; margin-top:20px; max-width:38ic; }
.icons-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:32px; align-items:start; }
.icons-browser { min-width:0; grid-column:1; grid-row:1; }
.icons-search { max-width:calc(100% - 332px); display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px 16px; margin-bottom:20px; }
.icons-search label { grid-column:1/-1; font-size:.75rem; color:var(--color-muted); }
.icons-search input { width:100%; min-height:max(44px,var(--control-height)); }
.icons-search p { color:var(--color-muted); font-size:.75rem; white-space:nowrap; }
.icons-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
.icon-tile { display:flex; flex-direction:column; justify-content:center; gap:16px; min-width:0; min-height:112px; padding:16px 8px; border:1px solid transparent; border-radius:12px; background:var(--color-preview); box-shadow:none; content-visibility:auto; contain-intrinsic-size:auto 112px; }
.icon-tile span { width:100%; color:var(--color-muted); font:400 .75rem/1.5 var(--font-outlier); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.icon-tile[aria-pressed=true] { border-color:var(--color-accent); background:var(--color-accent-soft); color:var(--color-accent); }
.icon-tile:focus-visible { position:relative; z-index:1; outline-offset:-3px; }
.icon-inspector { grid-column:2; grid-row:1; position:sticky; top:88px; min-width:0; padding:20px; border:1px solid var(--color-rule); border-radius:12px; background:var(--color-surface); box-shadow:var(--shadow-card); }
.icon-inspector-title { display:flex; justify-content:space-between; gap:12px; color:var(--color-muted); font-size:.75rem; }
.icon-inspector-title a,.icon-api-link { text-decoration:none; }
.icon-stage { display:grid; place-items:center; height:160px; margin-block:20px; border:1px solid var(--color-rule); border-radius:8px; background:var(--color-preview); }
.icon-inspector h2 { font:500 .875rem/1.5 var(--font-outlier); overflow-wrap:anywhere; }
.icon-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.icon-settings label { display:flex; flex-direction:column; gap:6px; color:var(--color-muted); font-size:.75rem; }
.icon-usage { margin:20px 0; padding:12px; border-radius:6px; background:var(--color-preview); font-size:.75rem; }
.icon-copy { width:100%; }
[data-icon-copy-status] { min-height:1.5rem; font-size:.75rem; color:var(--color-muted); margin-top:8px; }
.icon-accessibility { padding-top:16px; margin-top:8px; border-top:1px solid var(--color-rule); color:var(--color-muted); font-size:.75rem; line-height:1.8; }
.icon-accessibility code { font-size:inherit; }
.icon-api-link { display:inline-flex; align-items:center; min-height:32px; margin-top:12px; color:var(--color-accent); font-size:.75rem; }
.icons-empty { padding:48px 20px; color:var(--color-muted); font-size:.875rem; text-align:center; }
@media(max-width:60rem) { .icons-search { max-width:calc(100% - 284px); } .icons-layout { grid-template-columns:minmax(0,1fr) 260px; gap:24px; } }
@media(max-width:40rem) {
 .icons-main { padding-top:24px; }
 .icons-layout { display:flex; flex-direction:column; }
 .icons-search { max-width:none; }
 .icon-inspector { order:-1; position:static; width:100%; display:grid; grid-template-columns:80px minmax(0,1fr); gap:12px; }
 .icon-inspector-title { grid-column:1/-1; }
 .icon-stage { grid-column:1; grid-row:2/4; height:100%; min-height:96px; margin:0; }
 .icon-inspector h2 { grid-column:2; align-self:end; }
 .icon-settings { grid-column:2; margin:0; gap:8px; }
 .icon-copy,[data-icon-copy-status],.icon-api-link { grid-column:1/-1; }
 .icon-api-link { margin:0; }
 [data-icon-copy-status] { margin:0; }

 .icon-usage,.icon-accessibility { display:none; }
 .icons-browser { width:100%; }
 .icons-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .icon-tile { min-height:100px; }
 .topbar nav a[data-nav='system'],.topbar nav a[data-nav='foundations'] { display:none; }
}
@media(max-width:22rem) { .icon-settings { grid-template-columns:1fr; } }