.ds-copy-prompt{white-space:nowrap;align-items:center;gap:7px;min-height:32px;display:inline-flex;position:static}.ds-shape-card-link{display:block}.ds-shape-card:focus-within{border-color:#fff5}.ds-shape-prompt{border-top:1px solid #ffffff0b;padding:8px 22px}.ds-shape-prompt .ds-copy-prompt{color:#888893;font-size:12px}.ds-shape-prompt .ds-copy-prompt:hover{color:#fff}.ds-material-footer{flex-wrap:wrap;gap:0 12px}.ds-material-footer .ds-copy-prompt{flex-shrink:0;font-size:12px}.ds-demo-code-header>div{flex-wrap:wrap;row-gap:8px}.ds-demo-code-header .ds-copy-prompt{color:#e1e1e7;border-left:1px solid #ffffff20;padding-inline-start:14px}.ds-composition-agent{justify-content:flex-end;margin:12px 0 24px;display:flex}.ds-copy-dialog{color:#eee;background:#111114;border:1px solid #ffffff30;border-radius:14px;width:min(720px,100vw - 32px);max-height:85dvh;margin:auto;padding:24px;position:fixed;inset:0;box-shadow:0 30px 100px #0008}.ds-copy-dialog::backdrop{background:#000a}.ds-copy-dialog>div{justify-content:space-between;align-items:center;gap:20px;display:flex}.ds-copy-dialog h2{font-size:20px;font-weight:500}.ds-copy-dialog>div button{padding:8px}.ds-copy-dialog p{color:#a7a7b1;margin:16px 0;font-size:14px;line-height:1.6}.ds-copy-dialog textarea{resize:vertical;color:#eee;width:100%;height:min(440px,50dvh);font:12px/1.8 var(--font-mono);background:#080809;border:1px solid #ffffff26;border-radius:8px;padding:16px}@media (max-width:980px){.ds-header .ds-menu-button{display:inline-flex}.ds-header .ds-nav{border-bottom:1px solid var(--line);background:#0a0a0a;flex-direction:column;align-items:flex-start;gap:6px;max-height:calc(100dvh - 90px);padding:16px 24px;display:none;position:absolute;top:100%;left:0;right:0;overflow-y:auto}.ds-header .ds-nav.is-open{display:flex}.ds-header .ds-nav>a{width:100%;min-height:44px;font-size:15px}}@media (max-width:480px){.ds-material-footer{gap:0 8px}.ds-material-footer>a{padding-inline:12px}.ds-material-footer .ds-material-replay,.ds-shape-prompt{padding-inline:16px}}
.ds-tier-short,.ds-family-select,.ds-studio-mobile-tabs{display:none}.ds-demo-code-header>div{flex-shrink:1;min-width:0;max-width:100%}.ds-studio-center{min-width:0}.ds-auth-status{text-align:center;color:#a1a1aa;max-width:360px;padding:28px;line-height:1.7}.ds-auth-status p{margin-bottom:20px}.ds-auth-status a{color:#eee;margin-top:16px;display:block}@media (max-width:980px){.ds-header .ds-nav{overscroll-behavior:contain}.ds-header-actions{gap:8px}.ds-header .ds-menu-button{flex-shrink:0;width:44px;height:44px}}@media (max-width:900px),(max-height:740px){.ds-shape-sticky{height:calc(100svh - 88px);min-height:0;position:sticky}.ds-shape-sticky .ds-demo-code-disclosure{z-index:5;margin-top:12px;position:relative}.ds-shape-sticky .ds-demo-code-disclosure summary{min-height:44px;margin:0}.ds-shape-sticky .ds-demo-code-disclosure>.ds-demo-code{background:#090909;max-height:min(430px,65svh);position:absolute;bottom:48px;left:0;right:0;overflow-y:auto;box-shadow:0 10px 60px #000d}}@media (min-width:681px) and (max-width:900px){.ds-shape-sticky{height:calc(100svh - 74px)}.ds-shape-sticky .ds-shape-cinema{height:min(46svh,400px)}}@media (max-width:680px){.ds-header-inner{gap:8px;padding-inline:16px}.ds-header .ds-brand{gap:8px;font-size:29px}.ds-header-actions .ds-button{min-height:40px;padding-inline:11px}.ds-header-actions .ds-button-ghost{font-size:12px}.ds-container{width:calc(100% - 32px)}.ds-page-intro{padding-block:40px 28px}.ds-library .ds-library-intro{padding-block:36px 24px}.ds-library-intro h1{font-size:36px}.ds-library-welcome{gap:8px 16px;font-size:14px}.ds-library-toolbar{gap:12px;padding-block:12px}.ds-library .ds-filter-tabs{gap:6px;width:100%;display:flex}.ds-library .ds-filter-tabs>button{flex:1;justify-content:center;min-height:44px;padding:8px 10px}.ds-tier-label{display:none}.ds-tier-short{display:inline}.ds-library-search{width:100%}.ds-library-search input{flex:1;min-width:0;font-size:16px}.ds-family-select{color:#a1a1aa;align-items:center;gap:12px;padding-block:12px;font-size:13px;display:flex}.ds-family-select select{color:#eee;background-color:#111;border:1px solid #ffffff24;border-radius:8px;flex:1;min-width:0;min-height:44px;padding:8px 32px 8px 12px;font-size:16px}.ds-navigation-filters[aria-label=Shape\ families]{display:none}.ds-navigation-filters[aria-label=Navigation\ categories]{flex-wrap:nowrap;overflow-x:auto}.ds-navigation-filters button{flex-shrink:0;min-height:44px}.ds-library-count{margin-block:16px}.ds-library-grid{gap:12px}.ds-library .ds-card-canvas{height:160px}.ds-card-bottom{padding-inline:12px}.ds-card-bottom h3{font-size:14px}.ds-shape-prompt{padding:4px 12px}.ds-shape-prompt .ds-copy-prompt{min-height:44px}.ds-home .ds-shape-sticky{grid-template-rows:auto minmax(100px,1fr) auto auto;grid-template-columns:minmax(0,1fr);align-content:stretch;align-items:stretch;gap:10px;height:calc(100svh - 68px);min-height:0;padding-block:12px}.ds-shape-sticky .ds-engine-copy{display:contents}.ds-shape-sticky .ds-engine-copy>.ds-eyebrow,.ds-shape-sticky .ds-engine-copy>p,.ds-shape-sticky .ds-engine-copy>.ds-text-link{display:none}.ds-home .ds-shape-sticky h2{order:0;margin:0;font-size:clamp(26px,7vw,34px);line-height:1.1}.ds-shape-sticky .ds-shape-cinema{order:1;height:100%;min-height:0}.ds-shape-sticky .ds-shape-states{order:2;justify-content:space-between;width:100%;margin:0}.ds-shape-states>button{flex:1;justify-content:center;min-height:40px;padding:6px;font-size:12px}.ds-shape-sticky .ds-demo-code-disclosure{order:3;margin:0}.ds-shape-sticky .ds-demo-code-disclosure summary{justify-content:center;width:100%}.ds-stage-label{font-size:8px;inset-inline:12px}.ds-demo-code-header>div{justify-content:space-between;gap:6px;width:100%}.ds-demo-code-header :is(.ds-copy,.ds-copy-prompt,a),.ds-demo-code-footer button{min-height:40px}.ds-hero-code{max-width:calc(100% - 32px);right:16px}.ds-hero-code .ds-demo-code{max-height:calc(100svh - 160px);overflow:auto}.ds-demo-code-disclosure summary{min-height:44px}.ds-home-motion-toggle{right:12px;bottom:max(12px, env(safe-area-inset-bottom));width:44px;height:44px}.ds-capability-page{padding-top:32px}.ds-capability-heading{margin-bottom:24px}.ds-material-intro{flex-wrap:wrap;gap:12px;margin-block:20px}.ds-material-stage{height:260px;min-height:0}.ds-material-footer{grid-template-columns:1fr 1fr;gap:0;display:grid}.ds-material-footer .ds-material-replay{border-bottom:1px solid #ffffff12;border-right:0;grid-column:1/-1;justify-content:center}.ds-material-footer :is(button,a){justify-content:center;min-height:44px;padding:8px 12px}.ds-experience-caption{gap:14px;padding:18px}.ds-experience-caption .ds-button{white-space:normal}.ds-touch-experience{min-height:480px}.ds-studio-page{padding:24px 16px}.ds-studio-titlebar{gap:16px}.ds-studio-titlebar>div:first-child,.ds-studio-titlebar>.ds-actions{width:100%}.ds-studio-titlebar>.ds-actions .ds-button{flex:1;min-height:44px}.ds-studio-titlebar input{width:100%;font-size:22px}.ds-cloud-projects{gap:8px}.ds-cloud-projects select{flex-basis:100%;width:100%;min-width:0}.ds-studio-layout{flex-direction:column;display:flex}.ds-studio-center{order:0;width:100%}.ds-studio-mobile-tabs{border-block:1px solid #ffffff20;order:1;gap:8px;padding:8px;display:flex}.ds-studio-mobile-tabs button{border-radius:6px;flex:1;min-height:44px;font-size:13px}.ds-studio-mobile-tabs button[aria-pressed=true]{color:#fff;background:#ffffff14}.ds-studio-left,.ds-studio-right{border:0;order:2;width:100%;padding:16px;display:block}.ds-studio-layout[data-mobile-panel=appearance] .ds-studio-left,.ds-studio-layout[data-mobile-panel=library] .ds-studio-right{display:none}.ds-studio-left .ds-segmented{flex-wrap:nowrap;gap:2px}.ds-studio-left .ds-segmented>button{flex:1;gap:6px;min-width:0;min-height:44px;padding-inline:8px}.ds-studio-left .ds-segmented>button span{font-size:10px}.ds-studio-left .ds-preset-list,.ds-studio-left .ds-shape-list,.ds-studio-left .ds-ui-picker{max-height:360px;overflow-y:auto}.ds-studio-right .ds-panel-divider,.ds-studio-right .ds-panel-note{display:block}.ds-workspace{height:clamp(240px,44svh,360px);min-height:0}.ds-workspace-top{inset:12px 12px auto}.ds-workspace-top>.ds-mono{font-size:9px}.ds-workspace-bottom>span{display:none}.ds-workspace-bottom{justify-content:flex-end}.ds-studio-foot{flex-wrap:wrap;gap:12px;line-height:1.7}.ds-swatches{flex-wrap:wrap;gap:8px}.ds-swatches button{width:32px;height:32px}.ds-control input[type=range]{height:32px;margin-top:8px}.ds-switch-control{min-height:44px}.ds-switch-control input{width:36px;height:22px}.ds-switch-control input:checked:after{transform:translate(14px)}.ds-studio-page :is(input:not([type=range]):not([type=color]):not([type=checkbox]),select,textarea),.ds-copy-dialog textarea,.ds-library-search input{font-size:16px}.ds-footer{padding-bottom:max(32px, env(safe-area-inset-bottom));gap:28px}}@media (max-height:480px) and (max-width:900px){.ds-home .ds-shape-sticky{grid-template-rows:auto 1fr auto;grid-template-columns:1fr 1fr;gap:8px 16px;padding-block:10px}.ds-home .ds-shape-sticky h2{grid-column:1;font-size:24px}.ds-shape-sticky .ds-shape-cinema{grid-area:1/2/-1}.ds-shape-sticky .ds-shape-states{flex-wrap:wrap;grid-column:1;align-self:end}.ds-shape-sticky .ds-demo-code-disclosure{grid-column:1}.ds-gravity-intro h1{font-size:32px}.ds-gravity-intro p{display:none}}@media (prefers-reduced-motion:reduce){.ds-home .ds-shape-sticky{position:relative}}@media (max-width:680px){.ds-header-inner{gap:6px;width:100%;padding-inline:12px}.ds-header .ds-brand{gap:0;font-size:28px}.ds-header .ds-mark{margin-right:8px}.ds-header-actions{gap:5px;margin-left:auto}.ds-header-actions .ds-button{padding-inline:8px}.ds-studio-titlebar .ds-button-ghost{gap:8px;font-size:13px}.ds-timeline-toolbar button,.ds-timeline-inspector button{min-width:44px;min-height:44px}.ds-timeline-inspector input[type=number]{min-height:44px}.ds-timeline-scrub{min-height:32px}}.ds-engine-copy,.ds-transition-visual,.ds-avatar-playground{min-width:0}.ds-motion-properties{flex-wrap:wrap}.ds-motion-scrubber{max-width:100%}@media (max-width:680px){.ds-home .ds-transition-chapter,.ds-home .ds-avatar-chapter{grid-template-columns:minmax(0,1fr)}}.ds-touch-experience{touch-action:pan-y}@media (max-width:680px){.ds-library .ds-library-intro{margin-top:0;padding-block:24px 16px}.ds-library .ds-library-intro h1{margin-block:0 12px}.ds-library-welcome{margin-top:0}.ds-shape-sticky .ds-demo-code-disclosure summary{padding-right:48px}}@media (max-height:480px) and (max-width:900px){.ds-shape-sticky .ds-engine-copy{display:contents}.ds-shape-sticky .ds-engine-copy>:is(.ds-eyebrow,p,.ds-text-link){display:none}.ds-home .ds-shape-sticky h2,.ds-shape-sticky .ds-demo-code-disclosure,.ds-shape-sticky .ds-demo-code-disclosure summary{margin:0}.ds-shape-sticky .ds-shape-cinema{height:100%;min-height:0}.ds-gravity-helix{width:40%;height:80%;top:2%;left:24%}.ds-gravity-intro{text-align:left;top:18%;left:47%;right:5%}.ds-gravity-intro h1{font-size:36px}.ds-gravity-intro .ds-eyebrow{display:none}.ds-gravity-action{width:220px;height:48px;top:55%;left:70%}.ds-gravity-footer{bottom:10px;left:24px;right:68px}.ds-gravity-caption{display:none}.ds-gravity-footer{pointer-events:none}.ds-gravity-footer :is(a,button){pointer-events:auto}}
.ds-example-browser{grid-template-columns:248px minmax(0,1fr);gap:56px;min-height:calc(100dvh - 220px);padding-top:40px;padding-bottom:80px;display:grid}.ds-browser-sidebar{flex-direction:column;align-self:start;max-height:calc(100dvh - 128px);display:flex;position:sticky;top:102px}.ds-browser-label{justify-content:space-between;align-items:center;padding:0 12px 22px;font-weight:550;display:flex}.ds-browser-label .ds-mono{letter-spacing:1.5px;color:#686870;font-size:9px}.ds-browser-navigation{flex-direction:column;min-height:0;display:flex}.ds-browser-navigation>input{color:#eee;background:#0c0c0e;border:1px solid #ffffff16;border-radius:7px;width:100%;margin-bottom:18px;padding:10px 12px;font-size:12px}.ds-browser-navigation nav{overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:16px;padding-right:6px;overflow:auto}.ds-browser-navigation ul{margin:0;padding:0;list-style:none}.ds-browser-navigation ul ul{border-left:1px solid #ffffff12;margin:3px 0 10px 12px;padding-left:9px}.ds-browser-navigation summary{cursor:pointer;color:#c4c4cc;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:10px 8px;font-size:12px;list-style:none;display:flex}.ds-browser-navigation summary::-webkit-details-marker{display:none}.ds-browser-navigation summary:before{content:"›";color:#6d6d75;transform:rotate(0)}.ds-browser-navigation details[open]>summary:before{transform:rotate(90deg)}.ds-browser-navigation summary>span{font:9px var(--font-mono);color:#5e5e66;margin-left:auto}.ds-browser-navigation a{color:#898992;border-radius:5px;justify-content:space-between;align-items:center;gap:8px;padding:9px 10px;font-size:12px;display:flex}.ds-browser-navigation a:hover{color:#eee;background:#ffffff06}.ds-browser-navigation a[aria-current=page]{color:#fff;background:#ffffff0d}.ds-browser-navigation small{letter-spacing:.7px;color:#747480;font-size:8px}.ds-browser-empty{color:#888;padding:12px;font-size:12px}.ds-browser-toggle{display:none}.ds-browser-content{min-width:0}.ds-browser-heading{padding:2px 0 30px}.ds-browser-heading .ds-eyebrow{letter-spacing:1.7px;font-size:9px}.ds-browser-heading h1{font-family:var(--font-display);letter-spacing:-1.7px;margin:14px 0 12px;font-size:clamp(30px,3vw,46px);font-weight:550;line-height:1.16}.ds-browser-heading h1>span{color:#5f5f68}.ds-browser-heading p{color:#8c8c95;max-width:610px;margin:0;font-size:14px;line-height:1.7}.ds-browser-shape{background:radial-gradient(#111115,#060607 70%);border:1px solid #ffffff15;border-radius:14px;height:clamp(330px,52dvh,560px);position:relative;overflow:hidden}.ds-browser-tier{color:#65656e;font:9px var(--font-mono);letter-spacing:1.5px;position:absolute;bottom:22px;left:24px}.ds-browser-toolbar{flex-wrap:wrap;align-items:center;gap:18px;padding-top:20px;display:flex}.ds-browser-toolbar .ds-text-link{margin-left:auto;font-size:12px}.ds-browser-content .ds-material-stage{height:clamp(350px,53dvh,580px)}.ds-browser-content .ds-material-text .ds-material-control{width:min(540px,100%)}.ds-browser-content .ds-experience{min-height:520px}.ds-browser-content .ds-avatar-experience{min-height:570px}.ds-browser-content .ds-avatar-wardrobe{flex-wrap:wrap}.ds-browser-content .ds-material-title h3{font-size:12px}.ds-browser-navigation :focus-visible,.ds-browser-toggle:focus-visible{outline-offset:2px;outline:2px solid #aaa}@media (max-width:980px){.ds-example-browser{grid-template-columns:210px minmax(0,1fr);gap:28px}.ds-browser-sidebar{top:88px}}@media (max-width:700px){.ds-example-browser{padding-top:22px;padding-bottom:48px;display:block}.ds-browser-sidebar{max-height:none;margin-bottom:30px;position:relative;top:0}.ds-browser-label{padding:0 0 12px}.ds-browser-toggle{background:#0c0c0f;border:1px solid #ffffff20;border-radius:7px;justify-content:space-between;align-items:center;width:100%;padding:13px 15px;font-size:13px;display:flex}.ds-browser-navigation{border:1px solid #ffffff18;border-radius:7px;margin-top:8px;padding:14px;display:none}.ds-browser-navigation.is-open{display:flex}.ds-browser-navigation nav{max-height:45dvh}.ds-browser-heading{padding-bottom:22px}.ds-browser-heading h1{letter-spacing:-1px}.ds-browser-heading p{font-size:13px}.ds-browser-content .ds-material-stage{height:430px}.ds-browser-toolbar{gap:12px}}.ds-browser-image-stage{padding:clamp(18px,3vw,40px)}.ds-browser-image-stage .swarm-image{max-height:480px}.ds-material-image-reveal .ds-material-footer{justify-content:flex-end;padding-left:20px}.swarm-primitive-host:has(.swarm-image-demo){width:min(560px,100%)}.ds-browser-content :is(.ds-material-checkbox,.ds-material-switch,.ds-material-accordion,.ds-material-tabs,.ds-material-toast) .ds-material-control{width:min(440px,100%)}.ds-material-control .swarm-demo-panel .swarm-checkbox{--swarm-ui-accent:#18181b;color:#fff}.ds-material-control .swarm-demo-panel .swarm-switch{--swarm-ui-accent:#18181b}.ds-material-control .swarm-demo-panel .swarm-switch-thumb{background:#fff}.ds-material-control .swarm-demo-panel .swarm-tabs-list{margin:0}.ds-material-control .swarm-demo-panel .swarm-tabs-content{text-align:left}.ds-material-control .swarm-demo-panel .swarm-accordion-trigger{font-size:13px}@media (max-width:700px){.ds-browser-content .ds-material-accordion .ds-material-stage{height:530px}.ds-browser-content .swarm-demo-panel{padding:20px}}