html{background:var(--ds-page);color:var(--color-foreground);font:400 13.5px/1.5 var(--track-font-ui);-webkit-font-smoothing:antialiased}body{margin:0}*{box-sizing:border-box}aside{position:fixed;inset:0 auto 0 0;width:280px;display:flex;flex-direction:column;background:var(--color-background-deep)}.brand{height:64px;flex:none}.catalog-search{margin:0 16px 12px!important;width:calc(100% - 32px);justify-content:flex-start!important;color:var(--color-text-tertiary)!important;background:color-mix(in srgb,var(--ds-page),var(--color-foreground) 2%)!important}.catalog-search svg{width:17px;height:17px}.catalog-search.track-button[data-icon-placement=start]{font:400 13.5px/1.5 var(--track-font-ui)!important}aside .catalog-sidebar-scroll.track-scroll-area{flex:1;min-height:0;padding:0;border:0;border-radius:0;background:transparent}aside nav{--track-menu-highlight:#1f242f;position:relative;padding:0 10px 24px}.light aside nav{--track-menu-highlight:#e7e9eb}.nav-caption{color:color-mix(in srgb,var(--color-text-tertiary) 65%,var(--ds-page));font:400 11.5px/1.5 var(--track-font-ui);letter-spacing:.09em;text-transform:uppercase;margin:19px 10px 7px}aside nav a.track-dropdown-item{display:flex;align-items:center;min-height:40px;height:40px;width:100%;padding:0 8px;margin-bottom:1px;color:var(--color-text-tertiary);font:400 13.5px/1.5 var(--track-font-ui);text-decoration:none;border-radius:8px;cursor:pointer}aside nav a.track-dropdown-item[aria-current]{background:var(--track-menu-highlight);color:var(--color-foreground)}aside nav a.track-dropdown-item:hover{color:var(--color-foreground)}aside nav a.track-dropdown-item:focus-visible{color:var(--color-foreground);outline:2px solid #519fff;outline-offset:-2px}aside nav a.track-dropdown-item[data-highlighted]:not([aria-current]){background:transparent}aside footer{padding:12px 16px 20px;border-top:1px solid rgb(255 255 255/8%)}.light aside footer{border-top-color:rgb(0 0 0/9%)}aside footer .track-tabs{display:flex;width:100%}aside footer .track-tabs[data-size=medium] .track-tab{flex:1;min-width:0;padding:0 4px}main{margin:4px 4px 4px 280px;height:calc(100dvh - 8px);padding:0 max(64px,calc((100vw - 1040px) / 2 - 76px)) 80px;border:1px solid color-mix(in srgb,var(--color-background),var(--color-foreground) 6%);border-radius:16px;background:var(--color-background);overflow:auto;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--color-text-tertiary) 20%,transparent) transparent}main[data-page="Introdução"]{padding:0;border:0;border-radius:0;background:transparent;container:intro-content/inline-size;scrollbar-width:none;-ms-overflow-style:none}main[data-page="Introdução"]::-webkit-scrollbar{display:none}.page-head{position:relative;padding:58px 0 32px;margin:0 auto 32px;max-width:720px;border-bottom:1px solid rgb(255 255 255/4%)}.light .page-head{border-bottom-color:rgb(0 0 0/5%)}.page-head h1{font:500 20.5px/1.5 var(--track-font-ui);letter-spacing:-.025em;margin:0}.demo{position:relative;display:grid;place-items:center;width:100%;height:300px;border:1px solid rgb(255 255 255/4%);border-radius:12px;background:var(--ds-page);margin:0 auto 40px;max-width:720px;overflow:hidden}.demo:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(to right,var(--guide-color) 0 2px,transparent 2px 5px),repeating-linear-gradient(to right,var(--guide-color) 0 2px,transparent 2px 5px),repeating-linear-gradient(to bottom,var(--guide-color) 0 2px,transparent 2px 5px),repeating-linear-gradient(to bottom,var(--guide-color) 0 2px,transparent 2px 5px);--guide-color:rgb(255 255 255/4%);background-size:100% 1px,100% 1px,1px 100%,1px 100%;background-repeat:no-repeat;background-position:0 var(--guide-top),0 var(--guide-bottom),var(--guide-left) 0,var(--guide-right) 0}.demo.no-grid:before{display:none}.light .demo{border-color:rgb(0 0 0/5%)}.light .demo:before{--guide-color:rgb(0 0 0/5%)}.preview-component{position:relative;z-index:1;max-width:calc(100% - 48px)}main[data-page=Badges] .demo{container:badge-preview/inline-size}main[data-page=Badges] .demo.badge-zoom:before{display:none}main[data-page=Badges] .demo.badge-zoom>.preview-component{transform:scale(3)}@container badge-preview (max-width: 500px){main[data-page=Badges] .demo.badge-zoom>.preview-component{transform:scale(2)}}@container badge-preview (max-width: 350px){main[data-page=Badges] .demo.badge-zoom>.preview-component{transform:scale(1.5)}}@container badge-preview (max-width: 240px){main[data-page=Badges] .demo.badge-zoom>.preview-component{transform:scale(1)}}.badge-zoom-control{position:absolute;z-index:4;top:12px;right:12px}.badge-state-control{position:absolute;z-index:4;bottom:16px;left:50%;transform:translateX(-50%);width:-moz-max-content;width:max-content;max-width:calc(100% - 32px)}.badge-state-control>.track-tabs{max-width:100%;background:color-mix(in srgb,var(--ds-page),var(--color-foreground) 5.5%)}.badge-spacing-layer{position:absolute;inset:0;z-index:2;border-radius:inherit;overflow:hidden;pointer-events:none}.badge-spacing{display:block;cursor:default}.badge-spacing,.badge-spacing:before{position:absolute;pointer-events:auto}.badge-spacing:before{content:"";background:color-mix(in srgb,var(--track-status-info) 6%,transparent)}.badge-spacing[data-axis=horizontal]:before{left:var(--badge-band-offset-x);width:100cqw;top:0;height:100%}.badge-spacing[data-axis=vertical]:before{top:var(--badge-band-offset-y);height:var(--badge-frame-height);left:0;width:100%}.badge-spacing:focus-visible:before,.badge-spacing:hover:before{background:color-mix(in srgb,var(--track-status-info) 9%,transparent)}.badge-spacing:focus-visible{outline:1px solid var(--track-focus);outline-offset:-1px}.preview-component:has(>.track-checkbox,>.track-radio,>.track-switch){display:flex;align-items:center;justify-content:center}.preview-component:has(.track-code),.preview-component:has(.track-library-feature),.preview-component:has(.track-markdown-disclosure),.preview-component:has(.track-prompt-bar){width:calc(100% - 48px)}.demo:has(.track-markdown-disclosure){height:560px}.example{margin:0 auto 40px;max-width:720px;min-width:0}.example>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.example>header h2{font-size:14.5px;font-weight:500;line-height:20px;margin:0}.example-content{display:flex;align-items:center;gap:24px;min-width:0;flex-wrap:wrap;overflow:visible}.example-content>.track-code,.example-content>.track-library-feature,.example-content>.track-markdown-disclosure,.example-content>.track-prompt-bar{width:100%}main[data-page="Cards de feature"] .example-content>.track-library-feature{width:min(620px,100%)}.track-notification-copy a{color:var(--track-status-info)}.search-results{display:grid;max-height:300px;overflow:auto;margin-top:12px}.search-results button{justify-content:flex-start}main[data-page="Introdução"] .track-ds-introduction{margin:0;max-width:none}@media (max-width:700px){aside{position:relative;width:100%;max-height:240px}.brand{height:64px}aside .catalog-sidebar-scroll.track-scroll-area{flex:none}aside .catalog-sidebar-scroll>.track-scroll-viewport{height:auto}aside nav{display:flex;gap:4px;padding-bottom:12px}aside nav a{white-space:nowrap}.nav-caption{display:none}aside footer{display:block;padding:8px 16px}main{margin:0;height:calc(100dvh - 100px);padding:0 24px 50px;border:0;border-radius:0}main[data-page="Introdução"]{margin:4px}.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:30px;margin-bottom:24px}.page-head h1{min-width:0}.example-content{gap:12px}.radius-grid,.swatches{grid-template-columns:repeat(2,minmax(0,1fr))}.type-section{grid-template-columns:1fr}.type-meta{gap:8px}}main[data-page="Botões"] .example{margin-bottom:82px}.example>header .track-button{color:var(--color-text-tertiary);font-size:12.5px}.example-content>.track-library-release{max-width:100%}main[data-page="Cards de release"] .example-content{padding-block:24px 23px}.preview-component:has(>.track-library-release){width:calc(100% - 48px)}.preview-component>.track-library-release{max-width:100%}.card-state-preview{width:100%;display:grid;place-items:center}.card-state-preview>.track-library-feature{width:min(620px,100%)}.card-state-preview>.track-library-release{justify-self:start}.demo:has(.card-state-preview)>.preview-component{position:static;width:calc(100% - 48px)}main[data-page="Cards de release"] .demo>.preview-component{width:min(650px,calc(100% - 48px))}.card-state-preview>.track-tabs,.card-state-preview>[dir]>.track-tabs{position:absolute;z-index:3;bottom:16px;left:50%;transform:translateX(-50%);background:var(--color-card);max-width:calc(100% - 24px);overflow:auto;white-space:nowrap}main:is([data-page=Cards],[data-page="Cards de feature"],[data-page="Cards de release"]) .card-state-preview>.track-tabs,main:is([data-page=Cards],[data-page="Cards de feature"],[data-page="Cards de release"]) .card-state-preview>[dir]>.track-tabs{background:color-mix(in srgb,var(--ds-page),var(--color-foreground) 5.5%)}.catalog-content-fade{position:fixed;height:32px;z-index:3;pointer-events:none;transition:opacity .15s}.catalog-content-fade-top{border-radius:15px 15px 0 0;background:linear-gradient(to bottom,var(--color-background),transparent)}.catalog-content-fade-bottom{border-radius:0 0 15px 15px;background:linear-gradient(to top,var(--color-background),transparent)}@media (max-width:700px){.catalog-content-fade{border-radius:0}}@media (prefers-reduced-motion:reduce){.catalog-content-fade{transition:none}}.agent-state-preview{display:grid;place-items:center}.demo:has(.agent-state-preview)>.preview-component{position:static}.catalog-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (max-width:700px){#root{display:flex;flex-direction:column;height:100dvh;overflow:hidden}aside{flex:none}main{flex:1;height:auto;min-height:0}}main[data-page="Botões"] .example>header{margin-bottom:46px}main[data-page="Botões"] .example{margin-bottom:68px}.catalog-search{height:34px!important;color:var(--ds-input-muted)!important;background:var(--ds-input-surface)!important;box-shadow:inset 0 0 0 .5px var(--ds-input-edge),var(--ds-input-inset-shadow)!important}.catalog-search:hover{background:var(--ds-input-hover)!important;color:var(--color-text-tertiary)!important}.catalog-search:active:not(:disabled){transform:none}.preview-component .track-multiselect-label{display:none}main:not([data-page="Botões"]):not([data-page=Avatares]) .example>header{margin-bottom:20px}.example>header>.track-button{height:32px}main[data-page=Avatares] .example{margin-bottom:36px}main[data-page=Avatares] .example>header{margin-bottom:8px}main[data-page=Avatares] .example-content{min-height:32px}main[data-page=Avatares] .demo{margin-bottom:36px}main[data-page=Tabs] .example-content>.track-tabs-root:has(.track-tabs[data-variant=line]){width:100%}main[data-page=Tabs] .example-content .track-tabs[data-variant=line]{width:100%;padding-inline:48px}@media (max-width:700px){main{padding-left:24px;padding-right:24px}.demo{grid-template-columns:minmax(0,1fr)}.preview-component{min-width:0}.preview-component>*{min-width:0;max-width:100%}}main:is([data-page=Status],[data-page="Barras de progresso"],[data-page=Breadcrumb],[data-page=Multiselect],[data-page=Menu],[data-page=Switch],[data-page="Notificações"],[data-page=Inbox],[data-page="Cards de feature"],[data-page=Markdown],[data-page="Code snippet"],[data-page="Atividades do agente"],[data-page="Prompt bar"],[data-page=Tooltips],[data-page="Cards de release"],[data-page=Avatares],[data-page="Avatares de agentes"]) .page-head{margin-bottom:var(--catalog-frame-heading-gap,40px)}@media (max-width:700px){main{--catalog-frame-heading-gap:32px}}.demo:has(.track-markdown-disclosure) .preview-component{width:min(440px,calc(100% - 48px))}.light main[data-page=Markdown] .demo{border-color:rgb(0 0 0/5%)}.light main[data-page=Markdown] .demo:before{--guide-color:rgb(0 0 0/5%)}.preview-component:has(.track-prompt-bar){width:min(440px,calc(100% - 48px))}.preview-component:has(.track-code){width:min(460px,calc(100% - 48px))}main[data-page=Markdown] .demo,main[data-page=Markdown] .example{margin-bottom:36px}.preview-component:has(>.track-scroll-area){width:min(360px,calc(100% - 48px))}.avatar-ink-guides,.badge-ink-guides{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.avatar-ink-guide-h,.avatar-ink-guide-v{position:absolute;display:block}.badge-ink-guides .avatar-ink-guide-h{transform:translateY(-.5px)}.badge-ink-guides .avatar-ink-guide-v{transform:translateX(-.5px)}.badge-ink-guides .badge-guide-icon-top{transform:translateY(-1px)}.badge-ink-guides .badge-guide-icon-bottom{transform:translateY(0)}.badge-ink-guides .badge-guide-icon-left{transform:translateX(-1px)}.badge-ink-guides .badge-guide-icon-right{transform:translateX(0)}.avatar-ink-guide-h{left:0;right:0;height:1px;background:repeating-linear-gradient(90deg,rgb(255 255 255/4%) 0 2px,transparent 2px 5px)}.avatar-ink-guide-v{top:0;bottom:0;width:1px;background:repeating-linear-gradient(180deg,rgb(255 255 255/4%) 0 2px,transparent 2px 5px)}.light .avatar-ink-guide-h{background:repeating-linear-gradient(90deg,rgb(0 0 0/5%) 0 2px,transparent 2px 5px)}.light .avatar-ink-guide-v{background:repeating-linear-gradient(180deg,rgb(0 0 0/5%) 0 2px,transparent 2px 5px)}.catalog-card-group{max-width:720px;margin:0 auto 40px}.catalog-card-group>h2{margin:0 0 20px;font:500 14.5px/20px var(--track-font-ui)}.catalog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}.catalog-card-grid>div{min-width:0}.catalog-card-grid .tap-pixel-texture{width:576px;right:auto}.catalog-card-grid .tap-box{overflow:hidden}.catalog-card-grid .tap-box[data-texture-state=neutral] .tap-pixel-texture{color:var(--color-foreground)}@media(max-width:640px){.catalog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}}main[data-page=Sidebar] .demo{height:560px}main[data-page=Sidebar] .demo>.preview-component{width:min(320px,calc(100% - 48px))}main[data-page=Sidebar] .demo .track-double-sidebar{width:100%;height:480px}main[data-page="Gráfico"] .demo:before{display:none}main[data-page="Gráfico"] .demo{height:390px}main[data-page="Gráfico"] .demo>.preview-component{width:calc(100% - 48px);transform:translateY(-28px)}main[data-page="Gráfico"] .example-content>.track-evolution-chart-wrap{max-width:720px}