@layer base{*,:before,:after{box-sizing:border-box}html{-moz-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--color-scrollbar) transparent}body{background-color:var(--color-canvas);color:var(--color-ink);font-family:var(--font-sans);font-size:var(--text-body);line-height:var(--text-body--line-height);font-weight:var(--text-body--font-weight);font-synthesis:none;font-kerning:normal;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0}:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}@supports (scrollbar-width:thin){*{scrollbar-width:thin}}}
@layer base{h1,h2,h3,h4,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}code,pre{font-family:var(--font-mono)}[lang]:lang(fa){--font-sans:var(--font-persian), Arial, sans-serif;font-family:var(--font-sans)}:where(em,i):not(:lang(fa),:lang(ar)){font-family:var(--font-sans-italic), var(--font-sans)}}@layer components{.brand{letter-spacing:-.03em;align-items:center;gap:10px;font-size:1.125rem;font-weight:500;display:inline-flex;position:relative}.brand svg{width:26px;height:26px}.brand:after{content:"";position:absolute;inset:-7px}.visually-hidden,.skip-link{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.skip-link:focus{z-index:60;clip-path:none;border-radius:var(--radius-pill);background-color:var(--color-ink);width:auto;height:auto;min-height:40px;color:var(--color-canvas);outline:var(--focus-ring-width) solid var(--color-canvas);outline-offset:-4px;align-items:center;margin:0;padding:0 20px;font-weight:500;display:inline-flex;position:fixed;top:16px;left:16px;overflow:visible}.eyebrow-sep{color:var(--color-taupe)}.chip:focus-visible,.rail-link:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}.button-large{min-height:48px;padding-inline:1.75rem}.chip{border:1px solid var(--color-frame);border-radius:var(--radius-pill);background-color:var(--color-float);min-height:36px;color:var(--color-ink);font-size:var(--text-small);align-items:center;gap:6px;padding:0 1rem;font-weight:500;transition:border-radius .2s;display:inline-flex}.chip:hover{border-color:var(--color-ink)}.chip[href]{position:relative}.chip[href]:before{content:"";position:absolute;inset:-3px 0}.chip-new:after{content:"New";border-radius:var(--radius-micro);background-color:color-mix(in srgb, var(--color-link) 12%, transparent);color:var(--color-link);letter-spacing:.04em;text-transform:uppercase;margin-left:2px;padding:1px 6px;font-size:.75rem;font-weight:700}.input,.segmented-track,.segmented-option,.tab-list,.tab{transition:border-radius .2s}.card{transition:border-radius .2s,background-color .2s}@media not (min-width:768px){:root{--spacing-card:20px}}.stack{gap:var(--spacing-peer);display:grid}.row{align-items:center;gap:var(--spacing-part);flex-wrap:wrap;display:flex}.spread{justify-content:space-between}.tile-row{gap:var(--spacing-peer);grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));width:100%;display:grid}.sample-column{gap:var(--spacing-peer);width:100%;max-width:28rem;display:grid}.touch-only{display:none}@media (hover:none) and (pointer:coarse){.touch-only{display:contents}}.chart-sample{width:100%;max-width:40rem}.setting{justify-content:space-between;align-items:center;gap:1.5rem;padding:.75rem 1rem;display:flex}.settings-list{border:1px solid var(--color-frame);border-radius:var(--radius-surface);transition:border-radius .2s;display:grid}.settings-list .setting+.setting{border-top:1px solid var(--color-divider)}.card :is(.settings-list,.props){border-radius:max(var(--radius-micro), calc(var(--holder-radius) - var(--holder-border) - var(--holder-pad)))}.setting .field{flex:1;grid-template-columns:minmax(0,1fr) auto;gap:0 1.5rem;position:relative}.setting .field-head,.setting .switch{display:contents}.setting .switch-text{font-size:var(--text-h4);line-height:var(--text-h4--line-height);font-weight:var(--text-h4--font-weight);grid-area:1/1}.setting .field-description{grid-area:2/1;padding-inline-start:0}.setting .switch-track{grid-area:1/2/span 2;align-self:center}.code{position:relative}.code pre{transition:border-radius .2s}.icon-button.code-copy{position:absolute;top:11px;right:11px}.density-samples{gap:var(--spacing-peer);grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}@media not (min-width:768px){.density-samples{grid-template-columns:minmax(0,1fr)}}.density-sample{gap:var(--spacing-part);align-content:start;display:grid}.stage-shell{contain:layout;border-radius:var(--radius-surface);background-color:var(--color-canvas);width:100%;height:30rem;position:relative;overflow:hidden}.stage:has(.stage-shell){padding:0}.stage-phone{contain:layout;border-radius:var(--radius-surface);background-color:var(--color-canvas);width:100%;max-width:375px;height:30rem;margin-inline:auto;position:relative;overflow:hidden}.stage:has(.stage-phone){padding:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none}}.stage-phone .tab-bar{display:block}.stage-phone .app-shell[data-has-bottom-bar]{--app-shell-inset-block-end:calc(4rem + env(safe-area-inset-bottom,0px))}.stage-phone .app-shell-workspace{min-height:30rem}