.pane-label{position:absolute;top:var(--space-3);left:var(--space-3);display:inline-flex;align-items:center;height:calc(var(--size-5) + var(--space-0-5));padding:0 var(--space-2);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-pill);background-color:var(--color-surface-default);color:var(--color-text-muted);font-family:var(--font-family-sans);font-size:var(--typography-ui-size);font-weight:var(--font-weight-semibold)}.cp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-bottom:var(--space-8)}.cp-links{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none}.cp-links li+li{margin-top:0}.hero-stage{margin-bottom:var(--space-4);padding:var(--space-2);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-overlay);background-color:var(--color-surface-default);box-shadow:var(--elevation-overlay)}.hero-stage-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-1) var(--space-1) var(--space-2)}.hero-stage-note{margin-right:var(--space-2);color:var(--color-text-muted);font-size:var(--typography-ui-size)}.hero-stage-panes{display:grid;gap:var(--space-2);grid-template-columns:1fr 1fr}.hero-stage[data-view=light] .hero-stage-panes,.hero-stage[data-view=dark] .hero-stage-panes{grid-template-columns:1fr}.hero-stage[data-view=light] [data-pane=dark],.hero-stage[data-view=dark] [data-pane=light]{display:none}.hero-pane{position:relative;display:grid;place-items:center;min-height:calc(var(--size-64) + var(--space-4));padding:calc(var(--space-12) + var(--space-2)) var(--space-8) var(--space-10);border-radius:var(--radius-overlay);overflow:hidden}.hero-pane-inner{display:flex;justify-content:center;width:100%}.cp-page,.cp-layout{display:grid;grid-template-columns:minmax(0,1fr)}@media(min-width:1320px){main:not(.wide):has(.cp-page){max-width:calc(var(--layout-content-max-width) + var(--size-80))}.cp-page{grid-template-columns:minmax(0,1fr) calc(var(--size-40) + var(--size-12));column-gap:var(--space-20)}}.cp-body>section:first-child h2{margin-top:var(--space-12)}.cp-toc{position:sticky;top:calc(var(--layout-header-height) + var(--space-8));align-self:start;font-size:var(--typography-ui-size)}.cp-toc-title{margin:0 0 var(--space-2);color:var(--color-text-default);font-size:var(--typography-ui-size);font-weight:var(--font-weight-semibold)}.cp-toc ul{margin:0;padding:0;border-left:var(--border-width-default) solid var(--color-border-default);list-style:none}.cp-toc li+li{margin-top:0}.cp-toc a{display:block;margin-left:calc(var(--border-width-default) * -1);padding:var(--space-1) 0 var(--space-1) var(--space-3);border-left:var(--border-width-strong) solid transparent;color:var(--color-text-muted);text-decoration:none}.cp-toc a:hover{color:var(--color-text-default)}.cp-toc a[aria-current=true]{border-left-color:var(--color-signal-default);color:var(--color-text-default);font-weight:var(--font-weight-medium)}.usage-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(calc(var(--size-64) + var(--space-4)),1fr))}.usage-col{padding:var(--space-5) var(--space-6);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-container);background-color:var(--color-surface-default)}.usage-col h3{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-3);font-size:var(--typography-ui-size)}.usage-col.is-use h3 .icon{color:var(--color-feedback-success-text)}.usage-col.is-avoid h3 .icon{color:var(--color-feedback-danger-text)}.usage-col ul{margin:0;font-size:var(--typography-ui-size)}.guidance{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(calc(var(--size-72) + var(--size-4)),1fr))}.verdict{display:flex;flex-direction:column;margin:0;overflow:hidden;border:var(--border-width-default) solid var(--color-border-default);border-top:var(--border-width-3) solid var(--color-feedback-success-text);border-radius:var(--radius-container);background-color:var(--color-surface-default);box-shadow:var(--elevation-raised)}.verdict.dont{border-top-color:var(--color-feedback-danger-text)}.verdict .verdict-stage{justify-content:center;min-height:calc(var(--size-40) - var(--space-4));padding:var(--space-7) var(--space-6);border-bottom:var(--border-width-default) solid var(--color-border-default)}.verdict-body{display:grid;justify-items:start;gap:var(--space-2);padding:var(--space-4) var(--space-5) var(--space-5)}.verdict-body h4,.verdict-body .verdict-title{margin:var(--space-1) 0 0}.verdict-body .verdict-title{font-size:var(--typography-ui-size);line-height:var(--typography-ui-line-height)}.verdict-body p,.verdict-body .verdict-text{margin:0;color:var(--color-text-muted);font-size:var(--typography-ui-size)}.a11y-list{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}.a11y-list li{display:flex;gap:var(--space-3);margin:0;padding:var(--space-3) var(--space-4);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-control);background-color:var(--color-surface-default);font-size:var(--typography-ui-size)}.a11y-list .icon{margin-top:var(--space-0-5);color:var(--color-feedback-success-text)}.token-summary{display:flex;flex-wrap:wrap;gap:var(--space-1-5);margin-bottom:var(--space-4)}.anatomy{margin:0 0 var(--space-6);padding:0;overflow:hidden;border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-container);background-color:var(--color-surface-default);box-shadow:var(--elevation-raised);list-style:none}.anatomy-row{display:grid;grid-template-columns:minmax(calc(var(--size-40) + var(--size-8)),var(--size-72)) minmax(0,1fr);gap:var(--space-2) var(--space-6);margin:0;padding:var(--space-3) var(--space-5);border-bottom:var(--border-width-default) solid var(--color-border-default)}.anatomy-row:last-child{border-bottom:0}.anatomy .anatomy-row+.anatomy-row{margin-top:0}.anatomy-part{display:grid;align-content:start;gap:var(--space-1);font-size:var(--typography-ui-size)}.anatomy-sel{justify-self:start;padding:0;background-color:transparent;color:var(--color-text-muted);font-size:var(--typography-ui-size)}.anatomy-tokens{display:flex;flex-wrap:wrap;align-content:start;gap:var(--space-1-5)}.tchip{display:inline-flex;align-items:center;gap:var(--space-1-5);height:calc(var(--size-6) + var(--space-0-5));padding:0 var(--space-2);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-control);background-color:var(--color-bg-default);color:var(--color-text-default);font-family:var(--font-family-mono);font-size:var(--typography-ui-size);text-decoration:none;white-space:nowrap}.tchip:before{content:"";width:var(--space-2);height:var(--space-2);border-radius:var(--radius-inset);background-color:var(--color-chart-series-2)}.tchip.is-semantic:before{border-radius:50%;background-color:var(--color-signal-default)}.tchip.is-unknown{border-color:var(--color-feedback-danger-text);color:var(--color-feedback-danger-text)}.tchip.is-unknown:before{background-color:var(--color-feedback-danger-text)}a.tchip{border-radius:var(--radius-control);color:var(--color-text-default);text-decoration-line:none}a.tchip:hover{color:var(--color-text-default);border-color:var(--color-border-emphasis);background-color:var(--color-surface-default)}.props-table th[scope=row]{white-space:nowrap}.prop-name{background-color:transparent;padding:0;font-weight:var(--font-weight-semibold)}.prop-type{color:var(--color-text-signal)}.motion-table th[scope=row]{white-space:nowrap}.motion-value{display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--space-0-5)}.motion-value code{white-space:nowrap}.motion-note{margin-block-start:var(--space-3)}.pg{display:grid;grid-template-columns:minmax(0,1fr) var(--size-64);overflow:hidden;border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-overlay);background-color:var(--color-surface-default);box-shadow:var(--elevation-overlay)}.pg-stage-wrap{display:flex;flex-direction:column;min-width:0;padding:var(--space-2)}.pg-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:var(--space-2);padding:var(--space-1) var(--space-1) var(--space-2)}.pg-stage{position:relative;display:grid;place-items:center;flex:1;min-height:var(--size-60);padding:var(--space-12) var(--space-6) var(--space-8);border-radius:var(--radius-overlay)}.pg-stage-inner{display:flex;justify-content:center;width:100%;max-width:var(--size-96)}.pg-stage-inner>*{max-width:100%}.pg-code{margin-top:var(--space-2)}.pg-controls{display:grid;align-content:start;gap:var(--space-4);padding:var(--space-5);border-left:var(--border-width-default) solid var(--color-border-default);background-color:var(--color-bg-default)}.pg-field{display:grid;gap:var(--space-1-5);min-width:0;margin:0;padding:0;border:0}.pg-label{padding:0;color:var(--color-text-default);font-size:var(--typography-ui-size);font-weight:var(--font-weight-medium)}.pg-fallback{display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fit,minmax(var(--size-72),1fr));padding:var(--space-2);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-overlay);background-color:var(--color-surface-default);box-shadow:var(--elevation-overlay)}.stories h4{margin-top:var(--space-6)}.gallery-stats{display:flex;flex-wrap:wrap;gap:var(--space-1-5);margin:calc(var(--space-4) * -1) 0 var(--space-8)}.gallery-group h2{margin-top:var(--space-10)}.gallery{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--size-80)),1fr));margin:0;padding:0;list-style:none}.gallery li+li{margin-top:0}.gcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--radius-container);background-color:var(--color-surface-default);box-shadow:var(--elevation-raised);transition:box-shadow var(--motion-duration-moderate) var(--motion-easing-enter),transform var(--motion-duration-moderate) var(--motion-easing-enter)}.gcard:hover{box-shadow:var(--elevation-overlay);transform:translateY(calc(var(--space-0-5) * -1))}.gcard:focus-within{outline:var(--border-width-strong) solid var(--focus-ring-color);outline-offset:var(--border-width-strong)}.gcard-stage{display:grid;place-items:center;height:calc(var(--size-40) + var(--size-8));padding:var(--space-6);overflow:hidden;border-bottom:var(--border-width-default) solid var(--color-border-default)}.gcard-stage>*{max-width:100%;transform:scale(.86)}.gcard-empty{color:var(--color-text-muted);font-size:var(--typography-ui-size)}.gcard-body{display:flex;flex:1;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-5) var(--space-5)}.gcard-title{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.gcard-title h3{margin:0;font-family:var(--font-family-sans);font-size:var(--typography-h3-size);font-weight:var(--font-weight-bold);letter-spacing:var(--font-tracking-tighter)}.gcard-title a{color:var(--color-text-default);text-decoration:none}.gcard-title a:after{content:"";position:absolute;inset:0}.gcard-title a:focus-visible{outline:none}.gcard-body p{display:-webkit-box;margin:0;overflow:hidden;color:var(--color-text-muted);font-size:var(--typography-ui-size);-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3}.gcard-stats{display:flex;gap:var(--space-6);margin:auto 0 0;padding-top:var(--space-3);border-top:var(--border-width-default) solid var(--color-border-default)}.gcard-stats div{display:flex;flex-direction:column-reverse}.gcard-stats dt{color:var(--color-text-muted);font-size:var(--typography-ui-size)}.gcard-stats dd{margin:0;font-family:var(--font-family-sans);font-size:var(--typography-body-size);font-weight:var(--font-weight-semibold)}@media(max-width:1319px){.cp-toc{display:none}}@media(max-width:860px){.pg{grid-template-columns:minmax(0,1fr)}.pg-controls{border-top:var(--border-width-default) solid var(--color-border-default);border-left:0}}@media(max-width:720px){.hero-stage-panes{grid-template-columns:1fr}.hero-stage-note{display:none}.hero-pane{min-height:calc(var(--size-40) + var(--size-12));padding:var(--space-12) var(--space-4) var(--space-6)}.anatomy-row{grid-template-columns:minmax(0,1fr);padding:var(--space-3) var(--space-4)}.verdict .verdict-stage{padding:var(--space-6) var(--space-4)}}@media(prefers-reduced-motion:reduce){.gcard:hover{transform:none}}.hero-pane,.pg-stage{border:var(--border-width-default) solid var(--color-border-default)}.prop-default{white-space:nowrap}.gcard-stage>div{justify-content:center}.gcard-stage{-webkit-mask-image:linear-gradient(to bottom,var(--color-text-default) 72%,transparent);mask-image:linear-gradient(to bottom,var(--color-text-default) 72%,transparent)}.pg-note{margin:0;color:var(--color-text-muted);font-size:var(--typography-ui-size)}.cp-inherited{margin-top:var(--space-8)}.cp-inherited h3{margin:0 0 var(--space-2)}.cp-content-list{display:grid;gap:var(--space-2);max-width:65ch;margin:0;padding-left:var(--space-5)}.hero-pane.hero-pane-frame,.pg-stage.pg-stage-frame{display:block;padding:0}.hero-pane-frame .pane-label,.pg-stage-frame .pane-label{z-index:1}.sb-frame{display:block;width:100%;height:calc(var(--size-64) + var(--space-4));border:0;border-radius:inherit;background-color:transparent}.pg-stage-frame .sb-frame{height:100%;min-height:var(--size-72)}.gcard-frame{width:100%;height:100%;border:0;pointer-events:none}.gcard-stage:has(.gcard-frame){padding:0}.gcard-stage>.gcard-frame{transform:none}.cp-sb-notice{margin-bottom:var(--space-4)}.cp-sb-missing{display:none;gap:var(--space-2);margin-bottom:var(--space-4)}.cp-sb-missing>p{margin:0}.cp-page[data-sb-missing] .cp-sb-missing{display:grid}.cp-page[data-sb-missing] [data-sb-needs-story]{display:none}.cp-filter{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}.cp-filter-status{margin:0;color:var(--color-text-muted);font-size:var(--typography-ui-size)}.cp-ahead{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:0 0 var(--space-4);padding:var(--space-3) var(--space-4);border-radius:var(--radius-container);background:var(--color-bg-subtle)}