:root{--docs-max:1180px}body{background:var(--concrete-canvas)}.siteShell{min-height:100vh}.topbar{z-index:20;border-bottom:1px solid var(--concrete-border-soft);background:color-mix(in oklab, var(--concrete-surface) 94%, transparent);-webkit-backdrop-filter:saturate(1.4)blur(10px);backdrop-filter:saturate(1.4)blur(10px);justify-content:space-between;align-items:center;height:54px;padding:0 22px;display:flex;position:sticky;top:0}.brand{color:var(--concrete-foreground-strong);letter-spacing:0;align-items:center;gap:10px;font-weight:800;display:inline-flex}.nav{gap:4px;display:flex}.nav a{border-radius:var(--concrete-radius-3);height:28px;color:var(--concrete-foreground-muted);letter-spacing:0;align-items:center;padding:0 9px;font-size:12.5px;font-weight:700;display:inline-flex}.nav a:hover{background:var(--concrete-mist);color:var(--concrete-foreground-strong);opacity:1}.navIconLink{justify-content:center;width:28px;padding:0}.navIconLink svg{fill:currentColor;width:15px;height:15px}.main{width:min(var(--docs-max), calc(100vw - 40px));margin:0 auto;padding:54px 0 80px}.hero{grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);align-items:start;gap:48px;min-height:calc(100vh - 116px);padding-bottom:48px;display:grid}.eyebrow{color:var(--concrete-foreground-muted);font:700 11px / 1 var(--concrete-font-mono);letter-spacing:.1em;text-transform:uppercase}.hero h1{max-width:820px;font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;text-wrap:balance;margin-top:16px;font-size:92px;font-weight:300;line-height:.94}.hero h1 em{font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);font-style:italic;font-weight:650}.hero p{max-width:68ch;color:var(--concrete-foreground-muted);margin-top:24px;font-size:17px;line-height:1.65}.heroActions{flex-wrap:wrap;gap:8px;margin-top:26px;display:flex}.actionLink{border:1px solid var(--concrete-ink-9);border-radius:var(--concrete-radius-3);background:var(--concrete-ink-9);color:#fff;letter-spacing:0;justify-content:center;align-items:center;height:28px;padding:0 11px;font-size:12.5px;font-weight:700;display:inline-flex;box-shadow:inset 0 1px #ffffff14,0 1px #0003,0 1px 2px #0a0b0f1a}.actionLinkSecondary{border-color:var(--concrete-border);background:var(--concrete-surface);color:var(--concrete-foreground-strong);box-shadow:0 1px 0 var(--concrete-border)}.panelGrid{grid-template-columns:repeat(12,1fr);gap:12px;display:grid}.panel{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);flex-direction:column;gap:10px;padding:16px;display:flex}.panelWide{grid-column:span 12}.panelHalf{grid-column:span 6}.panelThird{grid-column:span 4}.panel h2,.panel h3{color:var(--concrete-foreground-strong);letter-spacing:0;font-size:15px}.panel p{color:var(--concrete-foreground-muted);font-size:12.5px;line-height:1.55}.section{gap:18px;margin-top:46px;display:grid}.sectionHead{border-bottom:1px solid var(--concrete-border-soft);justify-content:space-between;align-items:end;gap:18px;padding-bottom:12px;display:flex}.sectionHead h1{font-size:42px}.sectionHead p{max-width:62ch;color:var(--concrete-foreground-muted);font-size:14px;line-height:1.6}.grid{grid-template-columns:repeat(12,1fr);gap:12px;display:grid}.primitiveCard{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);flex-direction:column;grid-column:span 4;min-height:220px;display:flex;overflow:hidden}.primitivePreview{border-bottom:1px solid var(--concrete-border-soft);background:var(--concrete-canvas);place-items:center;min-height:138px;padding:18px;display:grid}.primitivePreview:hover{opacity:1}.primitiveMeta{flex-direction:column;flex:1;gap:6px;padding:12px 14px 14px;display:flex}.primitiveMeta h2{font-size:14px}.primitiveMeta p{color:var(--concrete-foreground-muted);font-size:12px;line-height:1.5}.metaRow{flex-wrap:wrap;gap:5px;margin-top:auto;display:flex}.detailHero{grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);align-items:stretch;gap:28px;display:grid}.detailIntro{flex-direction:column;gap:18px;padding-top:4px;display:flex}.detailIntro h1{letter-spacing:0;font-size:82px;font-weight:800;line-height:.9}.detailIntro p{max-width:58ch;color:var(--concrete-foreground-muted);font-size:15px;line-height:1.65}.detailPreview{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-5);background-color:var(--concrete-surface);background-image:linear-gradient(var(--concrete-lattice) 1px, transparent 1px), linear-gradient(90deg, var(--concrete-lattice) 1px, transparent 1px);min-height:360px;box-shadow:var(--concrete-shadow-1);background-size:24px 24px;place-items:center;padding:24px;display:grid}.stateGrid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.playgroundShell{grid-template-columns:minmax(0,1fr) 360px;align-items:stretch;gap:14px;display:grid}.playgroundPreview{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background-color:var(--concrete-surface);background-image:linear-gradient(var(--concrete-lattice) 1px, transparent 1px), linear-gradient(90deg, var(--concrete-lattice) 1px, transparent 1px);min-height:360px;box-shadow:var(--concrete-shadow-1);background-size:24px 24px;place-items:center;padding:28px;display:grid}.playgroundControls{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);box-shadow:var(--concrete-shadow-1);align-content:start;gap:8px;padding:12px;display:grid}.playgroundLoading{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);min-height:220px;color:var(--concrete-foreground-soft);font:800 10px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase;place-items:center;display:grid}.propControl{grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px;display:grid}.propControl span{color:var(--concrete-foreground-soft);font:800 10px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.propControl input,.propControl select{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);width:100%;height:30px;color:var(--concrete-foreground-strong);font:500 12.5px / 1 var(--concrete-font-sans);padding:0 9px}.propControl input:focus,.propControl select:focus{border-color:var(--concrete-sky);box-shadow:var(--concrete-ring-focus);outline:0}.stateCard{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);flex-direction:column;gap:10px;min-height:210px;padding:12px;display:flex}.stateStage{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-sunken);place-items:center;min-height:128px;padding:12px;display:grid}.stateMeta{flex-direction:column;gap:4px;display:flex}.stateMeta b{color:var(--concrete-foreground-strong);letter-spacing:0;font-size:13px}.stateMeta p{color:var(--concrete-foreground-muted);font-size:12px;line-height:1.45}.propsTable{border-collapse:collapse;table-layout:fixed;border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);width:100%;overflow:hidden}.propsTable th,.propsTable td{border-bottom:1px solid var(--concrete-border-soft);text-align:left;vertical-align:top;padding:11px 12px}.propsTable th{color:var(--concrete-foreground-soft);font:700 10px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.propsTable td{color:var(--concrete-foreground-body);font-size:12.5px;line-height:1.45}.propsTable code{color:var(--concrete-foreground-strong);font:600 11.5px / 1.45 var(--concrete-font-mono);overflow-wrap:anywhere}.propsTable tr:last-child td{border-bottom:0}.swatchGrid{grid-template-columns:repeat(9,1fr);gap:5px;display:grid}.swatch{border-radius:var(--concrete-radius-2);color:#fff;min-height:92px;font:700 10px / 1 var(--concrete-font-sans);border:1px solid #0000000d;flex-direction:column;justify-content:space-between;padding:8px;display:flex}.swatchLight{color:var(--concrete-foreground-strong)}.swatch code{font:600 9px / 1 var(--concrete-font-mono);opacity:.82}
.docsHome{width:min(1120px,100vw - 48px);margin:0 auto}.docsChapter{border-bottom:1px solid var(--concrete-border);padding:72px 0;scroll-margin-top:72px}.docsHero{padding-top:64px}.chapterMeta{border-bottom:1px solid var(--concrete-ink-9);color:var(--concrete-foreground-muted);letter-spacing:.08em;text-transform:uppercase;grid-template-columns:auto 1fr auto;align-items:baseline;gap:12px;padding-bottom:20px;font-size:12px;font-weight:800;display:grid}.chapterNumber{color:var(--concrete-sky);font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;text-transform:none;font-size:28px;font-style:italic;font-weight:400;line-height:1}.chapterLabel{color:var(--concrete-foreground-muted)}.docsChapter h1,.docsChapter h2{max-width:820px;color:var(--concrete-foreground-strong);font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;text-wrap:balance;margin-top:24px;font-size:72px;font-weight:400;line-height:.98}.docsChapter h2{max-width:760px;font-size:56px}.docsLead{max-width:760px;color:var(--concrete-foreground-body);margin-top:22px;font-size:17px;line-height:1.6}.heroInstall{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);max-width:100%;box-shadow:var(--concrete-shadow-1);grid-template-columns:auto minmax(0,1fr);align-items:center;margin-top:18px;display:inline-grid;overflow:hidden}.heroInstall span,.heroInstall code{min-width:0;height:34px}.heroInstall span{border-right:1px solid var(--concrete-border-soft);color:var(--concrete-foreground-muted);font:800 11px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase;align-items:center;padding:0 11px;display:inline-flex}.heroInstall code{color:var(--concrete-foreground-strong);font:700 13px / 1 var(--concrete-font-mono);text-overflow:ellipsis;white-space:nowrap;align-items:center;padding:0 12px;display:inline-flex;overflow:hidden}.heroBillboard{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background-color:var(--concrete-surface);background-image:linear-gradient(135deg, color-mix(in oklab, var(--concrete-sky) 10%, transparent), transparent 42%), linear-gradient(90deg, var(--concrete-lattice) 1px, transparent 1px), linear-gradient(var(--concrete-lattice) 1px, transparent 1px);min-height:330px;box-shadow:var(--concrete-shadow-2);background-size:auto,28px 28px,28px 28px;align-content:space-between;margin-top:34px;padding:32px;display:grid;overflow:hidden}.heroKicker,.heroStrip{color:var(--concrete-foreground-muted);font:800 12px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.heroBillboard p{max-width:720px;color:var(--concrete-foreground-strong);font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;margin:0;font-size:72px;font-weight:400;line-height:.94}.heroBillboard em{font-synthesis:none;font-style:italic}.heroStrip{border-top:1px solid var(--concrete-border);flex-wrap:wrap;gap:8px;padding-top:16px;display:flex}.heroStrip span{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-pill);background:color-mix(in oklab, var(--concrete-surface) 68%, transparent);align-items:center;height:24px;padding:0 8px;display:inline-flex}.docsSubhead{grid-template-columns:60px 1fr auto;align-items:baseline;gap:14px;margin:42px 0 16px;display:grid}.docsSubhead span{color:var(--concrete-foreground-soft);font:800 12px / 1 var(--concrete-font-mono);letter-spacing:.08em}.docsSubhead strong{color:var(--concrete-foreground-strong);font-size:15px;font-weight:800}.docsSubhead em{color:var(--concrete-foreground-muted);font-size:13px;font-style:normal}.foundationSplit{grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);gap:16px;display:grid}.typeSpecimen,.typeScaleCompact,.colorFigure,.densityGrid,.foundationTrio,.foundationUtilityGrid,.iconSystem,.homePrimitiveCard,.componentFeatureCard,.apiGrid>*,.apiFooter{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);box-shadow:var(--concrete-shadow-1)}.typeSpecimen{background-image:linear-gradient(90deg, var(--concrete-lattice) 1px, transparent 1px), linear-gradient(var(--concrete-lattice) 1px, transparent 1px);background-size:24px 24px;align-items:center;min-height:370px;padding:40px;display:grid}.typeSpecimen p{color:var(--concrete-foreground-strong);font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;margin:0;font-size:92px;font-weight:400;line-height:.9}.typeSpecimen em{font-style:italic}.typeScaleCompact{align-content:start;display:grid;overflow:hidden}.typeScaleCompact>div{border-bottom:1px solid var(--concrete-border-soft);grid-template-columns:84px minmax(0,1fr);align-items:baseline;gap:14px;min-height:74px;padding:16px;display:grid}.typeScaleCompact>div:last-child{border-bottom:0}.typeScaleCompact span,.typeScaleCompact em{color:var(--concrete-foreground-soft);font:800 11px / 1.2 var(--concrete-font-mono);letter-spacing:.06em;text-transform:uppercase;font-style:normal}.typeScaleCompact strong,.typeScaleCompact p{color:var(--concrete-foreground-strong);margin:0;font-size:32px;font-weight:800;line-height:1.05}.typeScaleCompact em{grid-column:2}.typeScaleCompact p{font-size:15px;font-weight:400;line-height:1.45}.typeScaleCompact .displayRole,.typeScaleCompact .heroRole{font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);font-weight:400}.typeScaleCompact .displayRole{font-size:68px}.typeScaleCompact .heroRole{font-size:46px}.colorFigure{background:var(--concrete-border-soft);gap:1px;display:grid;overflow:hidden}.swatchGridCompact{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:1px;display:grid}.swatchGridCompact span{background:var(--home-swatch);color:#fff;align-content:space-between;min-height:118px;padding:12px;display:grid}.swatchGridCompact .isLight{color:var(--concrete-foreground-strong)}.swatchGridCompact b,.swatchGridCompact i{text-overflow:ellipsis;white-space:nowrap;min-width:0;display:block;overflow:hidden}.swatchGridCompact b{font-size:12px;font-weight:800}.swatchGridCompact i{opacity:.72;align-self:end;font-size:11px;font-style:normal;font-weight:700}.signalGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;display:grid}.signalTile{background:var(--concrete-surface);grid-template-columns:auto 1fr;align-items:center;gap:3px 10px;min-height:78px;padding:14px;display:grid}.signalTile i{border-radius:var(--concrete-radius-pill);width:12px;height:12px;box-shadow:0 0 0 4px color-mix(in oklab, currentColor 8%, transparent);grid-row:span 2}.signalTile b{color:var(--concrete-foreground-strong);text-transform:capitalize;font-size:13px}.signalTile span{color:var(--concrete-foreground-muted);font-size:12px}.densityGrid{grid-template-columns:repeat(4,minmax(0,1fr));display:grid;overflow:hidden}.densityGrid article{border-right:1px solid var(--concrete-border);gap:4px;padding:16px;display:grid}.densityGrid article:last-child{border-right:0}.densityGrid strong{color:var(--concrete-foreground-strong);font-size:15px}.densityGrid span{color:var(--concrete-foreground-muted);font-size:12px;line-height:1.45}.densityGrid i{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background-color:var(--concrete-surface);height:178px;margin-top:12px;display:block}.densityGrid i[data-density=editorial]{background-image:linear-gradient(90deg, color-mix(in oklab, var(--concrete-ultra) 16%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in oklab, var(--concrete-ultra) 10%, transparent) 1px, transparent 1px);background-size:42px 28px}.densityGrid i[data-density=product]{background-image:linear-gradient(90deg, color-mix(in oklab, var(--concrete-sky) 16%, transparent) 1px, transparent 1px), linear-gradient(color-mix(in oklab, var(--concrete-sky) 12%, transparent) 1px, transparent 1px);background-size:14px 14px}.densityGrid i[data-density=generative]{background-image:linear-gradient(color-mix(in oklab, var(--concrete-terminal) 15%, transparent) 1px, transparent 1px);background-size:100% 28px}.densityGrid i[data-density=educational]{background:linear-gradient(var(--concrete-surface), var(--concrete-surface)) center 38px / 72% 26px no-repeat, linear-gradient(var(--concrete-surface), var(--concrete-surface)) center 88px / 58% 26px no-repeat, linear-gradient(var(--concrete-surface), var(--concrete-surface)) center 138px / 66% 26px no-repeat, var(--concrete-sunken)}.foundationTrio{grid-template-columns:minmax(0,1.2fr) minmax(260px,.9fr) minmax(220px,.8fr);gap:0;display:grid;overflow:hidden}.spacingScale{border-right:1px solid var(--concrete-border);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.spacingScale span{border-right:1px solid var(--concrete-border-soft);min-height:118px;color:var(--concrete-foreground-muted);align-content:end;padding:12px;display:grid}.spacingScale span:nth-child(4n){border-right:0}.spacingScale span:before{content:"";width:var(--home-space);height:var(--home-space);border-radius:var(--concrete-radius-2);background:var(--concrete-sky-2);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--concrete-sky) 14%, transparent);margin-bottom:12px;display:block}.spacingScale b,.spacingScale i,.spacingScale em{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.spacingScale b{color:var(--concrete-foreground-strong);text-transform:uppercase;font-size:12px}.spacingScale i{font:800 11px / 1.3 var(--concrete-font-mono);font-style:normal}.spacingScale em{color:var(--concrete-foreground-soft);font-size:11px;font-style:normal;font-weight:700}.radiusGrid{border-right:1px solid var(--concrete-border);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.radiusGrid article{border-right:1px solid var(--concrete-border-soft);border-bottom:1px solid var(--concrete-border-soft);gap:6px;padding:12px;display:grid}.radiusGrid article:nth-child(2n){border-right:0}.radiusGrid i{border:1px solid var(--concrete-border);border-radius:var(--home-radius);background:var(--concrete-sunken);height:44px;display:block}.radiusGrid b{color:var(--concrete-foreground-strong);font:800 11px / 1 var(--concrete-font-mono)}.radiusGrid span{color:var(--concrete-foreground-muted);font-size:11px}.elevationGrid{align-content:stretch;gap:10px;padding:14px;display:grid}.elevationGrid span{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);min-height:48px;color:var(--concrete-foreground-muted);place-items:center;font-size:12px;font-weight:800;display:grid}.elevationGrid span:nth-child(2){box-shadow:var(--concrete-shadow-1)}.elevationGrid span:nth-child(3){box-shadow:var(--concrete-shadow-2)}.elevationGrid span:nth-child(4){box-shadow:var(--concrete-shadow-3)}.foundationUtilityGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;display:grid;overflow:hidden}.motionFigure,.focusFigure,.textureFigure{border-right:1px solid var(--concrete-border);gap:12px;min-height:190px;padding:16px;display:grid}.textureFigure{border-right:0;grid-template-columns:repeat(3,1fr)}.motionFigure span{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-raised);color:var(--concrete-foreground-muted);transition:transform var(--concrete-duration-fast) var(--concrete-ease), background var(--concrete-duration-fast) var(--concrete-ease);place-items:center;font-size:12px;font-weight:800;display:grid}.motionFigure span:hover{background:var(--concrete-surface);transform:translateY(-1px)}.focusFigure{align-content:center}.focusFigure>*{justify-self:start}.homeFocusedButton{outline:3px solid var(--concrete-focus-ring);outline-offset:2px}.textureFigure>div{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);min-height:100%}.iconSystem{grid-template-columns:280px 1fr;gap:0;display:grid;overflow:hidden}.iconRules{border-right:1px solid var(--concrete-border);display:grid}.iconRules span{border-bottom:1px solid var(--concrete-border-soft);justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.iconRules span:last-child{border-bottom:0}.iconRules b{color:var(--concrete-foreground-strong);font-size:12px}.iconRules i{color:var(--concrete-foreground-muted);font:800 11px / 1 var(--concrete-font-mono);font-style:normal}.iconLibrary{grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.iconLibrary span{border-right:1px solid var(--concrete-border-soft);border-bottom:1px solid var(--concrete-border-soft);min-height:48px;color:var(--concrete-foreground-muted);align-items:center;gap:8px;padding:0 14px;font-size:12px;font-weight:800;display:inline-flex}.iconLibrary svg{width:16px;height:16px;color:var(--concrete-foreground-strong)}.homePrimitiveGrid,.componentFeatureGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:32px;display:grid}.homePrimitiveCard,.componentFeatureCard{min-width:0;transition:border-color var(--concrete-duration-fast) var(--concrete-ease), background var(--concrete-duration-fast) var(--concrete-ease);grid-template-rows:auto minmax(150px,auto);gap:12px;padding:16px;display:grid;position:relative}.homePrimitiveCard:hover,.componentFeatureCard:hover{border-color:var(--concrete-border-strong);background:var(--concrete-raised)}.homeCardOverlay{z-index:2;border-radius:inherit;position:absolute;inset:0}.homePrimitiveCard header,.componentFeatureCard header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.homePrimitiveCard strong,.componentFeatureCard strong{color:var(--concrete-foreground-strong);font-size:15px;font-weight:800}.homePrimitiveCard header span,.componentFeatureCard header span{color:var(--concrete-foreground-muted);font-size:12px;font-weight:700}.homePrimitiveStage,.componentFeatureStage{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-sunken);place-items:center;min-width:0;padding:18px;display:grid;position:relative;overflow:hidden}.homePrimitiveStage>*,.componentFeatureStage>*{max-width:100%}.componentFeatureCard{grid-template-rows:auto minmax(252px,auto) auto}.componentFeatureStage{align-items:center;min-height:252px}.componentFeatureCard p{color:var(--concrete-foreground-muted);margin:0;font-size:12px;line-height:1.45}.componentFeatureStage[data-component=area-chart],.componentFeatureStage[data-component=bar-chart],.componentFeatureStage[data-component=command-menu],.componentFeatureStage[data-component=composer],.componentFeatureStage[data-component=chart],.componentFeatureStage[data-component=data-table],.componentFeatureStage[data-component=date-picker],.componentFeatureStage[data-component=date-range-picker],.componentFeatureStage[data-component=diagram-canvas],.componentFeatureStage[data-component=donut-chart],.componentFeatureStage[data-component=file-upload],.componentFeatureStage[data-component=flow-diagram],.componentFeatureStage[data-component=form-dialog],.componentFeatureStage[data-component=form-drawer],.componentFeatureStage[data-component=form-shell],.componentFeatureStage[data-component=heatmap],.componentFeatureStage[data-component=image-upload],.componentFeatureStage[data-component=line-chart],.componentFeatureStage[data-component=meter],.componentFeatureStage[data-component=metric-card],.componentFeatureStage[data-component=multi-select],.componentFeatureStage[data-component=search-bar],.componentFeatureStage[data-component=settings-panel],.componentFeatureStage[data-component=stacked-bar-chart],.componentFeatureStage[data-component=time-picker]{min-height:320px}.componentFeatureStage[data-component=date-picker],.componentFeatureStage[data-component=date-range-picker],.componentFeatureStage[data-component=multi-select],.componentFeatureStage[data-component=time-picker]{align-items:start}.apiGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:32px;display:grid}.apiGrid p{color:var(--concrete-foreground-muted);font-size:13px;line-height:1.55}.apiCodeRows,.apiSmoke{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.apiFooter{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:16px;padding:16px;display:grid}.apiMetrics{grid-template-columns:repeat(2,minmax(0,.5fr)) minmax(120px,.7fr) auto;align-items:center;gap:14px;display:grid}
.specBlock{gap:30px;padding-top:8px;display:grid}.specHeader{border-bottom:1px solid var(--concrete-ink-9);grid-template-columns:1fr auto;align-items:center;gap:16px;padding-bottom:22px;display:grid}.specNumber{color:var(--concrete-sky);font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);font-size:32px;font-style:italic;font-weight:500;line-height:1}.specTitle,.specMeta{color:var(--concrete-foreground-muted);font:800 12px / 1 var(--concrete-font-sans);letter-spacing:.1em;text-transform:uppercase}.typeIntro{max-width:900px}.typeIntro h1{max-width:620px;font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;font-size:86px;font-weight:300;line-height:.94}.typeIntro h1 em{font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);font-style:italic;font-weight:550}.typeIntro p{max-width:78ch;color:var(--concrete-foreground-body);margin-top:24px;font-size:21px;line-height:1.55}.specSubhead{grid-template-columns:76px 1fr auto;align-items:baseline;gap:16px;margin-top:26px;display:grid}.specSubhead code{color:var(--concrete-foreground-soft);font:800 12px / 1 var(--concrete-font-mono);letter-spacing:.08em}.specSubhead h2{letter-spacing:0;font-size:18px}.specSubhead span{color:var(--concrete-foreground-muted);font-size:13px}.displaySpecimen{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-5);background-color:var(--concrete-surface);background-image:linear-gradient(var(--concrete-lattice) 1px, transparent 1px), linear-gradient(90deg, var(--concrete-lattice) 1px, transparent 1px);background-size:24px 24px;align-items:center;min-height:430px;padding:58px 64px;display:grid}.displaySpecimen p{max-width:900px;color:var(--concrete-ink-9);font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;font-size:150px;font-weight:300;line-height:.84}.displaySpecimen p em{font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);font-style:italic;font-weight:650}.typeScale{grid-template-columns:110px minmax(0,1fr) 190px;align-items:stretch;margin-top:18px;display:grid}.typeScaleRow{grid-column:1/-1;grid-template-columns:subgrid;border-top:1px solid var(--concrete-border);align-items:baseline;min-height:62px;display:grid}.typeScaleMetric,.typeScaleRole{color:var(--concrete-foreground-soft);font:800 12px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase;align-items:center;display:flex}.typeScaleSample{min-width:0;color:var(--concrete-foreground-strong);align-items:baseline;padding:12px 0;display:flex}.scaleDisplay{font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;font-size:120px;font-weight:300;line-height:.92}.scaleHero{font-family:var(--concrete-font-display);font-optical-sizing:var(--concrete-font-display-optical-sizing);font-synthesis:none;font-variation-settings:var(--concrete-font-display-settings);letter-spacing:0;font-size:72px;font-weight:400;line-height:.95}.scaleH1{letter-spacing:0;font-size:48px;font-weight:800;line-height:1.05}.scaleH2{letter-spacing:0;font-size:32px;font-weight:700;line-height:1.18}.scaleH3{font-size:20px;font-weight:700;line-height:1.25}.scaleArticle{font-size:17px;line-height:1.55}.scaleBody{font-size:15px;line-height:1.45}.scaleLabel{font-size:13px;font-weight:600;line-height:1.45}.scaleCaps{font:800 11px / 1.5 var(--concrete-font-sans);letter-spacing:.1em;text-transform:uppercase}.foundationRamp{gap:4px;display:grid}.foundationRampInk{grid-template-columns:repeat(9,1fr)}.foundationRampSky{grid-template-columns:repeat(6,1fr)}.foundationRampSurfaces{grid-template-columns:repeat(5,1fr)}.foundationSwatch{border-radius:var(--concrete-radius-2);color:#fff;border:1px solid #0000000d;flex-direction:column;justify-content:space-between;min-height:92px;padding:8px;display:flex}.foundationSwatchLight{color:var(--concrete-foreground-strong)}.foundationSwatch b{font-size:11px}.foundationSwatch span{font:700 9px / 1 var(--concrete-font-mono);opacity:.82}.foundationSignalGrid{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;display:grid}.foundationSignal{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-canvas);grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:10px;display:grid}.foundationSignal i{border-radius:50%;width:10px;height:10px}.foundationSignal span{color:var(--concrete-foreground-body);font-size:12.5px;font-weight:700}.foundationSignal code{color:var(--concrete-foreground-soft);font:700 10px / 1 var(--concrete-font-mono)}.foundationSpaceScale{gap:6px;display:grid}.foundationSpaceRow{grid-template-columns:56px 1fr 36px;align-items:center;gap:14px;min-height:20px;display:grid}.foundationSpaceRow span,.foundationSpaceRow code{color:var(--concrete-foreground-soft);font:700 10.5px / 1 var(--concrete-font-mono)}.foundationSpaceRow i{background:var(--concrete-ink-8);border-radius:2px;height:6px;display:block}.foundationSpaceRow code{color:var(--concrete-foreground-strong);text-align:right}.foundationTokenGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}.foundationElevationGrid{grid-template-columns:repeat(5,minmax(0,1fr))}.foundationToken{text-align:center;justify-items:center;gap:6px;min-width:0;display:grid}.foundationToken i{border:1px solid var(--concrete-border);background:var(--concrete-sunken);width:56px;height:56px;display:block}.foundationToken b{color:var(--concrete-foreground-strong);font:700 10px / 1 var(--concrete-font-mono)}.foundationToken span{color:var(--concrete-foreground-soft);font:600 9.5px / 1 var(--concrete-font-mono)}.motionTrack{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-sunken);height:48px;position:relative;overflow:hidden}.motionTrack i{border-radius:var(--concrete-radius-2);background:var(--concrete-ink-9);width:32px;height:32px;animation:foundationMotion 2.4s var(--concrete-ease) infinite alternate;position:absolute;top:50%;left:6px;transform:translateY(-50%)}@keyframes foundationMotion{to{left:calc(100% - 38px)}}.foundationSpecList{grid-template-columns:max-content 1fr;gap:4px 16px;margin:12px 0 0;font-size:12px;display:grid}.foundationSpecList dt{color:var(--concrete-foreground-soft);font:800 10px / 1.3 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.foundationSpecList dd{color:var(--concrete-foreground-strong);margin:0;font-weight:700}.foundationFocusTokens{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px}.foundationTextureGrid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.foundationTextureTile{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);align-items:end;min-height:138px;display:flex;position:relative;overflow:hidden}.foundationTextureTile>div:last-child{z-index:1;border-top:1px solid var(--concrete-border);background:color-mix(in oklab, var(--concrete-surface) 92%, transparent);justify-content:space-between;align-items:baseline;gap:8px;width:100%;padding:8px 10px;display:flex;position:relative}.foundationTextureTile b{color:var(--concrete-foreground-strong);font-size:11px}.foundationTextureTile span{color:var(--concrete-foreground-muted);font:700 9px / 1 var(--concrete-font-mono)}.foundationTextureFill{position:absolute;inset:0}.foundationLatticeCoarse{background-image:linear-gradient(to right, var(--concrete-grid-line-strong) 1px, transparent 1px), linear-gradient(to bottom, var(--concrete-grid-line-strong) 1px, transparent 1px);background-size:48px 48px}.foundationLatticeFine{background-image:linear-gradient(to right, var(--concrete-lattice) 1px, transparent 1px), linear-gradient(to bottom, var(--concrete-lattice) 1px, transparent 1px);background-size:24px 24px}.foundationScrollPanel{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);scrollbar-color:var(--concrete-ink-3) transparent;scrollbar-width:thin;height:190px;padding:12px;overflow:auto}.foundationScrollPanel::-webkit-scrollbar{width:10px;height:10px}.foundationScrollPanel::-webkit-scrollbar-thumb{border-radius:var(--concrete-radius-pill);background:var(--concrete-ink-3);background-clip:padding-box;border:3px solid #0000}.foundationScrollItem{border-radius:var(--concrete-radius-2);color:var(--concrete-foreground-body);padding:7px 8px;font-size:12.5px}.foundationScrollItem:hover{background:var(--concrete-sunken)}.foundationIconGrid{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-border-soft);grid-template-columns:repeat(12,1fr);gap:1px;display:grid;overflow:hidden}.foundationIconCell{aspect-ratio:1;background:var(--concrete-surface);color:var(--concrete-foreground-strong);place-items:center;display:grid;position:relative}.foundationIconCell svg{width:18px;height:18px}.foundationIconCell span{color:var(--concrete-foreground-soft);font:500 8px / 1 var(--concrete-font-mono);text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity var(--concrete-duration-fast) var(--concrete-ease);padding:0 2px;position:absolute;bottom:4px;left:0;right:0;overflow:hidden}.foundationIconCell:hover{background:var(--concrete-sunken)}.foundationIconCell:hover span{opacity:1}.foundationDataGrid{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.foundationDataGrid>div{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);gap:8px;padding:10px;display:grid}.foundationDataGrid span{color:var(--concrete-foreground-muted);font-size:11.5px;font-weight:700}
.foundationCatalog,.primitiveCatalog{grid-template-columns:repeat(12,1fr);gap:14px;margin-top:44px;display:grid}.foundationCard,.primitiveConceptCard{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);box-shadow:var(--concrete-shadow-1);grid-column:span 6;padding:22px 24px}.primitiveConceptWide{grid-column:span 12}.conceptEyebrowRow{justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:18px;display:flex}.conceptEyebrow{color:var(--concrete-foreground-muted);font:800 13px / 1 var(--concrete-font-sans);letter-spacing:.1em;text-transform:uppercase}.conceptEyebrowSoft{color:var(--concrete-foreground-soft);font-weight:600}.conceptCardLink{color:var(--concrete-foreground-soft);font:800 10px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.conceptCardLink:hover{color:var(--concrete-foreground-strong);opacity:1}.conceptSubhead{color:var(--concrete-foreground-soft);font:800 11px / 1 var(--concrete-font-mono);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 10px}.conceptSubheaderRow{margin-top:6px;margin-bottom:12px}.conceptRow{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.conceptInteractionNote{color:var(--concrete-foreground-soft);font:700 10px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:10px}.conceptStack{gap:8px;display:grid}.conceptStackWide{max-width:620px}.conceptStage{place-items:center;min-height:120px;display:grid}.conceptGridThree{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.conceptSpanAll{grid-column:1/-1}.conceptProse{color:var(--concrete-foreground-body);gap:10px;font-size:14px;line-height:1.5;display:grid}.conceptNav{flex-wrap:wrap;gap:12px;font-size:14px;display:flex}
.primitiveCatalog{align-items:stretch}.primitiveConceptCard{min-width:0}.sparkGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;display:grid}.sparkCell{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);gap:8px;min-width:0;min-height:98px;padding:12px 14px;display:grid}.sparkCell span{color:var(--concrete-foreground-muted);font-size:13px;font-weight:600}.progressList{gap:8px;display:grid}.metricBar{grid-template-columns:130px 1fr 52px;align-items:center;gap:12px;display:grid}.metricBar span{color:var(--concrete-foreground-body);font-size:12.5px;font-weight:600}.metricBar code{color:var(--concrete-foreground-strong);font:700 11.5px / 1 var(--concrete-font-mono);text-align:right}.ringGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-top:4px;display:grid}.ringCell{min-width:0;color:var(--concrete-foreground-muted);font:500 12px / 1.2 var(--concrete-font-sans);letter-spacing:0;text-align:center;flex-direction:column;align-items:center;gap:10px;display:flex}.choiceColumn{flex-direction:column;gap:2px;display:inline-flex}.choiceColumn span{color:var(--concrete-foreground-muted);font-size:11px}.sliderField{gap:6px;max-width:420px;display:grid}.sliderFieldHead,.sliderInline{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.sliderFieldHead span,.sliderInline span{color:var(--concrete-foreground-body);letter-spacing:0;font-size:12.5px;font-weight:500}.sliderFieldHead code,.sliderInline code{min-width:44px;color:var(--concrete-foreground-strong);font:600 12.5px / 1 var(--concrete-font-sans);font-variant-numeric:tabular-nums;text-align:right}.sliderTicks{color:var(--concrete-foreground-soft);font:500 11px / 1 var(--concrete-font-sans);font-variant-numeric:tabular-nums;letter-spacing:0;justify-content:space-between;padding:0 1px;display:flex}.sliderInline{align-items:center;max-width:420px}.sliderInline>span{min-width:78px}.sliderInline input{flex:1}.rangeSlider{height:18px;position:relative}.rangeSliderTrack{border-radius:var(--concrete-radius-pill);background:var(--concrete-ink-1);height:2px;position:absolute;top:50%;left:0;right:0;overflow:hidden;transform:translateY(-50%)}.rangeSliderTrack i{top:0;bottom:0;left:var(--range-a,24%);right:calc(100% - var(--range-b,86%));background:var(--concrete-ink-9);position:absolute}.rangeSlider input{pointer-events:none;position:absolute;inset:0}.rangeSlider input::-webkit-slider-runnable-track{background:0 0}.rangeSlider input::-webkit-slider-thumb{pointer-events:auto}.rangeSlider input::-moz-range-track{background:0 0}.rangeSlider input::-moz-range-progress{background:0 0}.rangeSlider input::-moz-range-thumb{pointer-events:auto}.statBaseline{align-items:baseline;gap:28px}.statGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;display:grid}.tagInputMock{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);flex-wrap:wrap;align-items:center;gap:4px;max-width:420px;min-height:32px;padding:4px 6px;display:flex;box-shadow:inset 0 1px #0a0b0f04}.tagInputMock:focus-within{border-color:var(--concrete-ink-5);box-shadow:0 0 0 3px #1f6fd42e}.tagInputMock input{min-width:100px;color:var(--concrete-foreground-strong);font:500 12.5px / 1 var(--concrete-font-sans);background:0 0;border:0;outline:0;flex:1;padding:4px 6px}.tagInputMock input::placeholder{color:var(--concrete-foreground-soft)}.kbdHint{color:var(--concrete-foreground-muted);align-items:center;gap:6px;font-size:13px;display:inline-flex}.kbdHint span{color:var(--concrete-foreground-faint);font-size:11px}.tooltipDemoRow{gap:28px;padding:4px 0 8px}.tooltipAlwaysRow{gap:48px;padding:24px 0 14px}.demoSelect{gap:3px;max-width:340px;display:grid}.demoSelectLabel{color:var(--concrete-foreground-muted);font-size:11px}.demoSelectWrap{position:relative}.demoSelectTrigger{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);width:100%;height:30px;color:var(--concrete-foreground-strong);cursor:pointer;font:500 12.5px / 1.2 var(--concrete-font-sans);text-align:left;justify-content:space-between;align-items:center;gap:8px;padding:0 8px 0 11px;display:inline-flex;box-shadow:inset 0 1px #0a0b0f04}.demoSelectTrigger:hover{border-color:var(--concrete-border-strong)}.demoSelectTrigger:focus,.demoSelectTriggerOpen{border-color:var(--concrete-sky);box-shadow:var(--concrete-ring-focus);outline:0}.demoSelectTrigger svg{width:14px;height:14px;color:var(--concrete-foreground-muted);transition:transform .16s var(--concrete-ease);flex:none}.demoSelectTriggerOpen svg{transform:rotate(180deg)}.demoSelectMenu{z-index:10;border:1px solid var(--concrete-border);background:var(--concrete-surface);border-radius:8px;max-height:260px;padding:4px;display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 1px 2px #0a0b0f0f,0 8px 24px -8px #0a0b0f2e}.demoSelectOpen .demoSelectMenu{display:block}.demoSelectItem{border-radius:var(--concrete-radius-2);width:100%;height:30px;color:var(--concrete-foreground-body);cursor:pointer;font:500 12.5px / 1.4 var(--concrete-font-sans);text-align:left;background:0 0;border:0;align-items:center;gap:8px;padding:0 8px;display:flex}.demoSelectItem:hover{background:var(--concrete-sunken)}.demoSelectItem[aria-selected=true]{background:var(--concrete-ink-9);color:#fff}.demoSelectItem>svg{opacity:0;stroke-width:2.25px;flex:none;width:12px;height:12px}.demoSelectItem[aria-selected=true]>svg{opacity:1}.demoSelectItem>span:nth-child(2){text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.demoSelectShortcut{flex:none;gap:3px;display:inline-flex}.demoSelectShortcut kbd{min-width:16px;height:16px;box-shadow:none;border-radius:3px;padding:0 4px;font-size:10px}.demoSelectItem[aria-selected=true] .demoSelectShortcut kbd{color:#ffffffd1;box-shadow:none;background:#ffffff1a;border-color:#ffffff2e}.rowsMock{border:1px dashed var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-raised);gap:1px;padding:6px;display:grid}.textureSample{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background-color:var(--concrete-surface);min-height:96px}.scrollMock{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);height:162px;padding:10px}.scrollMock div{border-radius:var(--concrete-radius-2);padding:7px 8px;font-size:12.5px}.scrollMock div:hover{background:var(--concrete-sunken)}.brandGrid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.brandSquare{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);justify-content:center;align-items:center;min-height:110px;padding:18px;display:flex}.brandMarkLarge{width:72px;height:72px}.brandSquareInverse{background:var(--concrete-ink-9);color:#fff}.brandWordmarkInverse{color:#fff}.brandTileInverse,.spinnerInverseDemo{border-radius:var(--concrete-radius-3);background:var(--concrete-ink-9);place-items:center;display:inline-grid}.brandTileInverse{padding:8px}.spinnerInverseDemo{padding:7px 10px}.caretDemoRow{border-radius:var(--concrete-radius-2);width:100%;min-height:32px;color:var(--concrete-foreground-body);cursor:pointer;font:500 13px / 1.25 var(--concrete-font-sans);text-align:left;background:0 0;border:0;grid-template-columns:16px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;display:grid}.caretDemoRow:hover{background:var(--concrete-sunken)}.caretDemoRow code{color:var(--concrete-foreground-soft);font:600 11px / 1 var(--concrete-font-mono)}.iconMiniGrid{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-border-soft);grid-template-columns:repeat(6,1fr);gap:1px;display:grid;overflow:hidden}.iconMiniGrid span{background:var(--concrete-surface);place-items:center;min-height:46px;display:grid}.wordmarkOnly{align-items:center;min-height:72px;display:flex}.emptyCatalog{display:grid}.emptyCatalogRow{border-bottom:1px solid var(--concrete-border-soft);grid-template-columns:56px 1fr;align-items:center;gap:14px;padding:10px 0;display:grid}.emptyCatalogRow:last-child{border-bottom:0}.emptyCatalogRow>span:last-child{flex-direction:column;gap:3px;min-width:0;display:flex}.emptyCatalogRow b{color:var(--concrete-foreground-strong);font-size:13px;font-weight:700;line-height:1.2}.emptyCatalogRow small{color:var(--concrete-foreground-muted);font-size:12px;font-weight:500;line-height:1.45}.emptyCatalogMark{border:1px dashed var(--concrete-ink-3);border-radius:var(--concrete-radius-4);width:48px;height:48px;color:var(--concrete-ink-5);flex:none;justify-content:center;align-items:center;display:inline-flex}.emptyCatalogMark svg{stroke-width:1.25px;width:22px;height:22px}.emptyCatalogMarkSmall{border-radius:8px;width:36px;height:36px}.emptyCatalogMarkSmall svg{stroke-width:1.35px;width:18px;height:18px}.emptyCatalogMarkLarge{border-radius:12px;width:64px;height:64px}.emptyCatalogMarkLarge svg{stroke-width:1.15px;width:28px;height:28px}.emptyCatalogMarkSky{border-color:color-mix(in oklab, var(--concrete-sky) 50%, var(--concrete-border));color:var(--concrete-sky)}.emptySizeRow{gap:18px}.emptyContextGrid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:10px;display:grid}.emptyContextGrid>div{min-width:0;max-width:none}.emptyActionRow{flex-wrap:wrap;justify-content:center;gap:6px;display:flex}.skeletonAtoms{grid-template-columns:repeat(7,minmax(0,1fr));align-items:end;gap:18px;display:grid}.skeletonAtom{flex-direction:column;gap:8px;min-width:0;display:flex}.skeletonAtom>span,.skeletonPattern>span{color:var(--concrete-foreground-muted);font:800 10px / 1 var(--concrete-font-sans);letter-spacing:.08em;text-transform:uppercase}.skeletonAtom>div{flex-direction:column;justify-content:center;gap:6px;min-height:44px;display:flex}.skeletonText{border-radius:3px;height:13px}.skeletonTextSmall{border-radius:3px;height:10px}.skeletonCircle{border-radius:50%}.skeletonPill{border-radius:var(--concrete-radius-pill)}.skeletonBlock{border-radius:8px}.skeletonPatternGrid{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;display:grid}.skeletonPattern{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);flex-direction:column;gap:10px;min-width:0;padding:14px;display:flex}.skeletonPatternFour{grid-column:span 4}.skeletonPatternSix{grid-column:span 6}.skeletonPatternEight{grid-column:span 8}.skeletonPatternTwelve{grid-column:span 12}.skeletonListRow{border-bottom:1px solid var(--concrete-border-soft);align-items:center;gap:12px;padding:8px 0;display:flex}.skeletonListRow:last-child{border-bottom:0}.skeletonListRow>div{flex-direction:column;flex:1;gap:5px;display:flex}.skeletonCardMock,.skeletonFormMock{flex-direction:column;gap:10px;display:flex}.skeletonCardMock>div:first-child,.skeletonCardMock>div:last-child{align-items:center;gap:10px;display:flex}.skeletonCardMock>div:first-child>div{flex-direction:column;flex:1;gap:5px;display:flex}.skeletonCardMock>div:last-child{justify-content:space-between;padding-top:4px}.skeletonChart{height:140px;padding:6px 4px 18px 28px;position:relative}.skeletonYAxis{flex-direction:column;justify-content:space-between;width:24px;display:flex;position:absolute;top:0;bottom:18px;left:0}.skeletonChartCanvas{border-bottom:1px solid var(--concrete-border-soft);border-left:1px solid var(--concrete-border-soft);height:100%;position:relative;overflow:hidden}.skeletonChartCanvas svg{width:100%;height:100%;display:block;overflow:visible}.skeletonChartCanvas path{fill:none;stroke:color-mix(in oklab, var(--concrete-ink-2) 75%, var(--concrete-canvas));stroke-linecap:round;stroke-linejoin:round;stroke-width:8px}.skeletonChartCanvas i,.skeletonDonut:after{background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--concrete-ink-1) 55%, #fff), transparent);content:"";animation:1.6s linear infinite concreteSkeletonSweep;position:absolute;inset:0;transform:translate(-100%)}@keyframes concreteSkeletonSweep{to{transform:translate(100%)}}.skeletonXAxis{justify-content:space-between;gap:8px;display:flex;position:absolute;bottom:0;left:28px;right:4px}.skeletonBars{align-items:flex-end;gap:6px;height:110px;padding-top:4px;display:flex}.skeletonBars>span{border-radius:4px 4px 0 0;flex:1;min-width:12px}.skeletonDonutWrap{align-items:center;gap:16px;display:flex}.skeletonDonut{background:color-mix(in oklab, var(--concrete-ink-2) 75%, var(--concrete-canvas));border-radius:50%;flex:none;width:110px;height:110px;position:relative;overflow:hidden;-webkit-mask:radial-gradient(circle,#0000 28px,#000 29px);mask:radial-gradient(circle,#0000 28px,#000 29px)}.skeletonDonutWrap>div:last-child{flex-direction:column;flex:1;gap:8px;display:flex}.skeletonLegendRow{align-items:center;gap:8px;display:flex}.skeletonTable{flex-direction:column;display:flex}.skeletonTableRow{border-bottom:1px solid var(--concrete-border-soft);grid-template-columns:16px 1.6fr 80px 1fr 60px 20px;align-items:center;gap:12px;padding:10px 0;display:grid}.skeletonTableRow:last-child{border-bottom:0}.skeletonTableHead{border-bottom-color:var(--concrete-border);opacity:.58;padding-top:4px;padding-bottom:8px}.skeletonDashboard{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.skeletonDashboard>div{border-radius:var(--concrete-radius-3);background:var(--concrete-canvas);flex-direction:column;gap:6px;padding:10px 12px;display:flex}.skeletonTokenRows{grid-template-columns:130px 1fr 100px;gap:8px 18px;display:grid}.skeletonTokenRows>div{grid-column:1/-1;grid-template-columns:subgrid;align-items:center;min-width:0;display:grid}.skeletonTokenRows b{color:var(--concrete-foreground-strong);font-size:12px}.skeletonTokenRows span{color:var(--concrete-foreground-muted);font-size:12px}.focusTokenGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.focusToken{gap:7px;min-width:0;display:grid}.focusToken>div{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-surface);height:44px;color:var(--concrete-foreground-strong);place-items:center;font-size:12px;font-weight:700;display:grid}.focusToken code{color:var(--concrete-foreground-soft);font:800 9.5px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.focusToken span{color:var(--concrete-foreground-muted);font-size:11.5px;line-height:1.25}.focusTokenDefault>div{box-shadow:0 0 0 3px var(--concrete-sky-ring)}.focusTokenInk>div{box-shadow:0 0 0 3px #0a0b0f2e}.focusTokenTerminal>div{box-shadow:0 0 0 3px var(--concrete-terminal-ring)}.focusTokenUltra>div{box-shadow:0 0 0 3px var(--concrete-ultra-ring)}.focusTokenError>div{box-shadow:0 0 0 3px var(--concrete-error-ring)}.focusTokenInvert>div{border-color:var(--concrete-ink-9);background:var(--concrete-ink-9);color:#fff;box-shadow:0 0 0 3px #ffffff47}.focusLiveRow{gap:10px}.focusVisibleDemo,.focusDemoInput input{border-color:var(--concrete-border-strong);box-shadow:var(--concrete-ring-focus)}.indicatorGrid{flex-wrap:wrap;align-items:center;gap:14px 20px;display:flex}.indicatorLegendStack{flex-direction:column;align-items:flex-start;gap:7px;display:flex}.legendKey{color:var(--concrete-foreground-body);font-variant-numeric:tabular-nums;align-items:center;gap:6px;font-size:12px;font-weight:500;display:inline-flex}.legendKey i{--legend-color:var(--concrete-ink-9);flex:none;display:inline-block}.legendKey i[data-tone=sky]{--legend-color:var(--concrete-sky)}.legendKey i[data-tone=terminal]{--legend-color:var(--concrete-terminal)}.legendKey i[data-tone=error]{--legend-color:var(--concrete-error)}.legendKey i[data-tone=muted]{--legend-color:var(--concrete-ink-5)}.legendKey i[data-shape=ring]{border:1.5px solid var(--legend-color);border-radius:50%;width:7px;height:7px}.legendKey i[data-shape=line],.legendKey i[data-shape=dash],.legendKey i[data-shape=dot]{background:var(--legend-color);width:16px;height:1px}.legendKey i[data-shape=dash]{border-top:1px dashed var(--concrete-ink-5);background:0 0}.legendKey i[data-shape=dot]{border-top:1px dotted var(--concrete-ink-5);background:0 0}.legendKey i[data-shape=swatch]{background:var(--legend-color);border-radius:2px;width:10px;height:10px}.legendKey>span{color:var(--concrete-foreground-body)}.legendKey small{color:var(--concrete-foreground-soft);margin-left:4px;font-size:12px;font-weight:500}.indicatorBucketRow{color:var(--concrete-foreground-soft);font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;display:flex}.indicatorBucketRow div{align-items:center;gap:2px;display:inline-flex}.indicatorBucketRow i{border:1px solid var(--concrete-border-soft);background:var(--concrete-sky-1);width:22px;height:10px}.indicatorBucketRow i:nth-child(2){background:var(--concrete-sky-2)}.indicatorBucketRow i:nth-child(3){background:var(--concrete-sky-3)}.indicatorBucketRow i:nth-child(4){background:var(--concrete-sky-4)}.indicatorBucketRow i:nth-child(5){background:var(--concrete-sky)}.indicatorBucketRow code{color:var(--concrete-foreground-soft);font:600 11px / 1 var(--concrete-font-sans)}
.componentHero{grid-template-columns:minmax(0,.72fr) minmax(520px,1.28fr);align-items:start;gap:30px;display:grid}.componentCatalogHero{flex-wrap:wrap;align-items:center;gap:6px;margin-top:18px;display:flex}.componentCatalogGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.componentCatalogCard{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-4);background:var(--concrete-surface);min-width:0;box-shadow:var(--concrete-shadow-1);grid-template-rows:auto minmax(252px,auto) auto;gap:10px;padding:16px;display:grid;position:relative}.componentCatalogCard:hover{border-color:var(--concrete-border-strong)}.componentCatalogCard header{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.componentCatalogCard header strong{color:var(--concrete-foreground-strong);letter-spacing:0;font-size:15px;font-weight:800}.componentCatalogCard header span{color:var(--concrete-foreground-muted);font:800 11px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase}.componentCatalogStage{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-3);background:var(--concrete-sunken);place-items:center;min-width:0;min-height:252px;padding:18px;display:grid;overflow:hidden}.componentCatalogStage>*{max-width:100%}.componentCatalogCard footer{gap:8px;display:grid}.componentCatalogCard footer p{color:var(--concrete-foreground-muted);margin:0;font-size:12.5px;line-height:1.45}.componentCatalogMeta{color:var(--concrete-foreground-muted);font:800 10px / 1 var(--concrete-font-mono);letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;gap:6px;display:flex}.componentCatalogMetric{border-top:1px solid var(--concrete-border-soft);padding-top:8px}.componentCatalogStage[data-component=area-chart],.componentCatalogStage[data-component=bar-chart],.componentCatalogStage[data-component=command-menu],.componentCatalogStage[data-component=composer],.componentCatalogStage[data-component=chart],.componentCatalogStage[data-component=data-table],.componentCatalogStage[data-component=date-picker],.componentCatalogStage[data-component=date-range-picker],.componentCatalogStage[data-component=diagram-canvas],.componentCatalogStage[data-component=donut-chart],.componentCatalogStage[data-component=file-upload],.componentCatalogStage[data-component=flow-diagram],.componentCatalogStage[data-component=form-dialog],.componentCatalogStage[data-component=form-drawer],.componentCatalogStage[data-component=form-shell],.componentCatalogStage[data-component=heatmap],.componentCatalogStage[data-component=image-upload],.componentCatalogStage[data-component=line-chart],.componentCatalogStage[data-component=meter],.componentCatalogStage[data-component=metric-card],.componentCatalogStage[data-component=multi-select],.componentCatalogStage[data-component=search-bar],.componentCatalogStage[data-component=settings-panel],.componentCatalogStage[data-component=stacked-bar-chart],.componentCatalogStage[data-component=time-picker]{min-height:320px}.componentCatalogStage[data-component=date-picker],.componentCatalogStage[data-component=date-range-picker],.componentCatalogStage[data-component=multi-select],.componentCatalogStage[data-component=time-picker]{align-items:start}.componentDetailHero{grid-template-columns:minmax(0,.72fr) minmax(520px,1.28fr)}.componentDetailPreview{min-height:430px;overflow:hidden}.componentDetailPreview>*{max-width:100%}.componentPlaygroundShell{grid-template-columns:minmax(0,1fr) 380px}.componentPlaygroundPreview{align-items:center;min-height:460px;overflow:hidden}.componentPlaygroundStage{gap:12px;width:100%;min-width:0;display:grid}.componentPlaygroundStageComposer{max-width:860px}.componentPlaygroundStageCommand{max-width:720px}.componentPlaygroundStageMessage{max-width:680px}.componentPlaygroundStageForm{max-width:420px}.componentPlaygroundStageWide{max-width:760px}.componentPlaygroundStageData{max-width:900px}.componentPlaygroundStageDataGrid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}.componentHero .detailIntro h1{font-size:var(--concrete-type-72);line-height:.92}.componentHero .detailIntro p{font-size:var(--concrete-type-14);line-height:var(--concrete-line-loose)}.componentDemo{gap:12px;min-width:0;display:grid}.componentMetricGrid,.componentBoundaryGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.componentMetric{min-height:118px}.interactionDemo{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:start;gap:14px;display:grid}.interactionPanel,.interactionTranscript{gap:12px;min-width:0;display:grid}.interactionPanel{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-5);background:var(--concrete-surface);box-shadow:var(--concrete-shadow-1);padding:12px}.interactionTranscript{border:1px solid var(--concrete-border-soft);border-radius:var(--concrete-radius-5);background:var(--concrete-canvas);padding:14px}.chatShell{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-5);background:var(--concrete-surface);min-width:0;box-shadow:var(--concrete-shadow-1);gap:14px;padding:16px;display:grid}.chatHeader{border-bottom:1px solid var(--concrete-border-soft);justify-content:space-between;align-items:start;gap:16px;min-width:0;padding-bottom:14px;display:flex}.chatHeader h2{color:var(--concrete-foreground-strong);font-size:var(--concrete-type-24);line-height:var(--concrete-line-tight);margin-top:6px}.chatTranscript{scrollbar-width:thin;scrollbar-color:var(--concrete-border-strong) transparent;gap:12px;min-width:0;max-height:720px;padding:8px 2px 2px;display:grid;overflow-y:auto}.chatTranscript>*{min-width:0}.componentList{color:var(--concrete-foreground-body);gap:8px;margin:0;padding-left:18px;font-size:13px;line-height:1.55;display:grid}.componentStateGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.componentStateCard{min-height:390px}.componentStateStage{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-3);background:var(--concrete-sunken);place-items:center;min-height:252px;padding:14px;display:grid}
.formsDemo{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;display:grid}.formsPanel{border:1px solid var(--concrete-border);border-radius:var(--concrete-radius-5);background:var(--concrete-surface);min-width:0;box-shadow:var(--concrete-shadow-1);gap:18px;padding:20px;display:grid}.formsPanelWide{grid-column:1/-1}.formsPanelPickers{min-height:454px}.formsPanelComposition{background:var(--concrete-surface)}.formsPanelHead{border-bottom:1px solid var(--concrete-border-soft);justify-content:space-between;gap:16px;padding-bottom:12px;display:flex}.formsPanelHead h2{color:var(--concrete-foreground-strong);font-size:var(--concrete-type-20);letter-spacing:0;line-height:var(--concrete-line-snug);margin-top:7px}.formsGrid{align-items:start;gap:18px;display:grid}.formsGridFive{grid-template-columns:repeat(5,minmax(0,1fr))}.formsGridFour{grid-template-columns:repeat(4,minmax(0,1fr))}.formsGridThree{grid-template-columns:repeat(3,minmax(0,1fr))}.formsGridTwo{grid-template-columns:repeat(2,minmax(0,1fr))}.formsChoiceStack{align-content:start;gap:8px;min-width:0;display:grid}.formsChoiceStack>span{color:var(--concrete-foreground-muted);font:700 var(--concrete-type-11) / 1 var(--concrete-font-sans)}.formsCompositionGrid{grid-template-columns:minmax(420px,1.04fr) minmax(360px,.96fr);align-items:start;gap:14px;display:grid}.formsCompositionGrid>:first-child{grid-row:span 2}
.renderShell{background:var(--concrete-canvas);place-items:center;min-height:100vh;padding:28px;display:grid}.renderStage{width:min(720px,100%)}
@media (max-width:860px){.topbar{flex-wrap:wrap;align-items:flex-start;gap:10px 14px;height:auto;padding:12px 16px}.nav{flex-wrap:wrap;justify-content:flex-start;width:100%}.main{width:min(100vw - 40px, var(--docs-max));padding-top:34px}.hero{grid-template-columns:1fr;min-height:auto}.hero h1{font-size:56px}.homeHero{grid-template-columns:1fr;min-height:auto;padding-top:18px}.homeHero h1{font-size:62px}.homeBandCompact,.homePressureGrid,.componentHero,.interactionDemo,.formsDemo,.formsGridFive,.formsGridFour,.formsGridThree,.formsGridTwo,.formsCompositionGrid,.componentMetricGrid,.componentBoundaryGrid,.componentPlaygroundStageDataGrid,.componentCatalogGrid,.componentStateGrid,.foundationCatalog,.primitiveCatalog,.foundationDataGrid{grid-template-columns:1fr}.panelHalf,.panelThird,.detailHero,.stateCard,.primitiveCard,.foundationCard,.primitiveConceptCard,.primitiveConceptWide{grid-column:span 12}.detailHero,.componentDetailHero,.playgroundShell,.componentPlaygroundShell{grid-template-columns:1fr}.playgroundControls{order:-1}.sectionHead{flex-direction:column;align-items:flex-start}.chatHeader{flex-direction:column}.detailIntro h1{font-size:48px}.componentHero .detailIntro h1{font-size:var(--concrete-type-48)}.stateGrid{grid-template-columns:1fr}.swatchGrid,.foundationRampInk,.foundationRampSky,.foundationRampSurfaces{grid-template-columns:repeat(3,1fr)}.foundationSignalGrid,.foundationTokenGrid,.foundationElevationGrid,.foundationTextureGrid,.conceptGridThree,.sparkGrid,.iconMiniGrid,.focusTokenGrid,.emptyContextGrid,.skeletonAtoms,.skeletonDashboard{grid-template-columns:repeat(2,1fr)}.skeletonPatternFour,.skeletonPatternSix,.skeletonPatternEight,.skeletonPatternTwelve{grid-column:1/-1}.skeletonTokenRows,.skeletonTokenRows>div{grid-template-columns:1fr}.skeletonTable{overflow-x:auto}.skeletonTableRow{min-width:620px}.foundationIconGrid{grid-template-columns:repeat(6,1fr)}.metricBar{grid-template-columns:72px 1fr 44px}.specHeader,.specSubhead,.typeScale,.typeScaleRow{grid-template-columns:1fr}.specMeta,.typeScaleRole{display:none}.displaySpecimen{min-height:280px;padding:28px}.typeIntro h1{font-size:56px}.displaySpecimen p{font-size:76px}.scaleDisplay{font-size:68px}.scaleHero{font-size:56px}.scaleH1{font-size:42px}}@media (max-width:420px){.typeIntro h1{font-size:48px}.typeIntro p{font-size:19px}.specSubhead span{font-size:11.5px;line-height:1.4}.displaySpecimen p{font-size:62px}.scaleDisplay{font-size:56px}}@media (max-width:920px){.docsHome{width:min(100vw - 32px,1120px)}.docsChapter{padding:54px 0}.chapterMeta,.docsSubhead{grid-template-columns:auto 1fr}.chapterMeta span:last-child,.docsSubhead em{grid-column:2}.docsChapter h1{font-size:var(--concrete-type-56)}.docsChapter h2{font-size:var(--concrete-type-48)}.foundationSplit,.densityGrid,.foundationTrio,.foundationUtilityGrid,.iconSystem,.homePrimitiveGrid,.componentFeatureGrid,.apiGrid,.apiFooter{grid-template-columns:1fr}.densityGrid article,.spacingScale,.radiusGrid,.motionFigure,.focusFigure,.iconRules{border-right:0;border-bottom:1px solid var(--concrete-border)}.iconLibrary{grid-template-columns:repeat(3,minmax(0,1fr))}.componentFeatureCard{grid-template-rows:auto minmax(220px,auto)}.componentFeatureStage{min-height:220px}.componentCatalogStage[data-component],.componentFeatureStage[data-component]{min-height:260px}.apiMetrics{grid-template-columns:1fr}}@media (max-width:640px){.docsHome{width:min(100vw - 28px,1120px)}.docsChapter{padding:42px 0;scroll-margin-top:96px}.chapterNumber{font-size:var(--concrete-type-24)}.docsChapter h1,.docsChapter h2{max-width:12ch;font-size:var(--concrete-type-40)}.docsLead{max-width:34ch;font-size:var(--concrete-type-15)}.heroBillboard{min-height:245px;padding:20px}.heroBillboard p{font-size:var(--concrete-type-48)}.typeSpecimen{min-height:230px;padding:24px}.typeSpecimen p,.typeScaleCompact .displayRole{font-size:var(--concrete-type-48)}.typeScaleCompact .heroRole,.typeScaleCompact strong{font-size:var(--concrete-type-32)}.typeScaleCompact>div{grid-template-columns:72px minmax(0,1fr)}.signalGrid,.spacingScale,.radiusGrid,.textureFigure,.iconLibrary{grid-template-columns:1fr}.swatchGridCompact{grid-template-columns:repeat(2,minmax(0,1fr))}.homePrimitiveStage,.componentFeatureStage{padding:12px}}.siteShell:has(.renderShell) .topbar{display:none}