.website-workspace{--workspace-reader-width:clamp(360px, 37.222vw, 536px);--workspace-footer-height:calc(64px + env(safe-area-inset-bottom,0px));background:var(--background-primary);height:calc(100dvh + 2px)}.workspace-window-boundary{pointer-events:none;width:1px;height:2px;position:absolute;top:100dvh}.workspace-component-name.ui-button{flex-shrink:1;min-width:0;max-width:200px;height:44px;padding-inline:8px}.workspace-component-name>span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.workspace-slash{color:var(--muted-foreground);padding-inline:4px}.workspace-location.ui-button{flex-shrink:1;gap:8px;min-width:0;max-width:340px;height:44px;padding-inline:4px}.workspace-location>span,.workspace-source-name>span{white-space:nowrap;text-overflow:ellipsis;min-width:0;overflow:hidden}.workspace-location>svg,.workspace-source-name>svg{flex-shrink:0}.website-workspace[data-layout=split] .website-header-start{max-width:calc(var(--workspace-reader-width) - 32px)}.workspace-reader{width:var(--workspace-reader-width);background:var(--background-primary-subtle);border-right:1px solid var(--border);z-index:20;position:fixed;inset:0 auto 0 0}.workspace-reader-surface{flex-direction:column;height:100%;padding-top:64px;display:flex}.workspace-docs-toolbar{flex-shrink:0;justify-content:space-between;align-items:center;height:56px;padding-left:32px;padding-right:24px;font-size:16px;display:flex}.workspace-docs-actions{align-items:center;gap:4px;display:flex}.workspace-reading{scroll-behavior:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:20px 32px 32px;overflow:auto}.workspace-article{min-width:0;max-width:none;font-size:16px;line-height:24px}.workspace-article :is(h1,h2,h3,h4):not(:where(.not-typeset *,[data-not-typeset] *)){color:var(--foreground);scroll-margin-top:20px;font-weight:400}.workspace-article h1:not(:where(.not-typeset *,[data-not-typeset] *)){margin:0 0 16px;font-size:28px;line-height:40px}.workspace-article h2:not(:where(.not-typeset *,[data-not-typeset] *)){margin:40px 0 16px;font-size:24px;line-height:35px}.workspace-article h3:not(:where(.not-typeset *,[data-not-typeset] *)),.workspace-article h4:not(:where(.not-typeset *,[data-not-typeset] *)){margin:32px 0 12px;font-size:20px;line-height:28px}.workspace-article p:not(:where(.not-typeset *,[data-not-typeset] *)){color:var(--muted-foreground);margin:0 0 20px}.workspace-intro{margin-bottom:32px}.workspace-intro-copy{min-height:44px;margin-top:24px}.workspace-example{outline:none;margin:32px 0;scroll-margin-top:20px}.workspace-example .web-preview{font-family:var(--font-sans);background:var(--background-primary);font-size:14px;line-height:20px}.website-workspace[data-layout=split] .workspace-article>:is(h2#preview,h2#preview+.workspace-example){height:0;min-height:0;margin:0;padding:0;overflow:hidden}.website-workspace[data-layout=split] .workspace-article>.workspace-intro{margin-bottom:32px}.website-workspace[data-layout=split] .workspace-article>h2#design-guidance{margin-top:0}.workspace-article h2#design-guidance{font-size:20px;line-height:28px}.workspace-stage{inset:64px 0 var(--workspace-footer-height) var(--workspace-reader-width);background:var(--background-primary);justify-content:center;align-items:center;padding:32px;display:flex;position:fixed;overflow:auto}.workspace-live-demo{flex-direction:column;flex-shrink:0;justify-content:safe center;align-items:center;width:100%;display:flex;overflow:auto}.workspace-stage *{overscroll-behavior:contain}.workspace-utilities{z-index:35;bottom:0;left:var(--workspace-reader-width);height:var(--workspace-footer-height);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--background-primary);border-top:1px solid var(--border);justify-content:center;align-items:center;gap:4px;display:flex;position:fixed;right:0}.workspace-utilities>.ui-button{width:96px;height:44px;padding-inline:8px;font-size:14px}.workspace-utility-divider{background:var(--border);flex-shrink:0;width:1px;height:24px}.website-workspace[data-layout=preview] .workspace-reader{visibility:hidden}.website-workspace[data-layout=preview] :is(.workspace-stage,.workspace-utilities){left:0}.website-workspace[data-layout=docs] .workspace-reader{border-right:none;width:100%}.website-workspace[data-layout=docs] .workspace-reader-surface{padding-left:228px}.website-workspace[data-layout=docs] :is(.workspace-docs-toolbar,.workspace-reading){width:min(100%,760px)}.website-workspace[data-layout=docs] .workspace-utilities{display:none}.workspace-component-rail{width:228px;padding:16px 24px;font-size:14px;position:absolute;top:80px;bottom:0;left:0;overflow:auto}.workspace-component-rail h3,.workspace-browser h3{color:var(--muted-foreground);margin:24px 0 8px;font-size:13px;font-weight:400}.workspace-component-rail a,.workspace-browser a{color:var(--muted-foreground);border-radius:6px;margin-inline:-8px;padding:8px;text-decoration:none;display:block}.workspace-component-rail a:hover,.workspace-browser a:hover{background:var(--background-secondary-hover)}.workspace-component-rail a[aria-current],.workspace-browser a[aria-current]{color:var(--foreground)}.workspace-browser.ui-popover{width:min(340px,100vw - 32px)}.workspace-browser .ui-popover-core{max-height:min(600px,70dvh);overflow:auto}.workspace-outline.ui-popover{width:min(400px,100vw - 32px)}.workspace-outline .ui-popover-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.workspace-outline .ui-popover-core{overscroll-behavior:contain;max-height:min(600px,70dvh);overflow:auto}.workspace-outline-label{align-items:center;gap:8px;min-width:0;font-size:14px;line-height:20px;display:inline-flex}.workspace-outline-label svg{flex-shrink:0}.workspace-drawer-host{pointer-events:none;position:absolute;inset:0}.workspace-drawer-portal{position:absolute;inset:0}.workspace-drawer-viewport.ui-drawer-viewport{pointer-events:none;padding:0;position:absolute;inset:0}.workspace-drawer.ui-drawer{pointer-events:auto;width:calc(100% - 16px);max-width:none;height:100%;max-height:100%;margin:0 8px}.workspace-drawer .ui-drawer-header{align-items:center;gap:8px;padding:12px 23px;display:flex}.workspace-drawer .ui-drawer-header>.ui-title{font-size:20px;font-weight:400;line-height:28px}.workspace-drawer .ui-drawer-header>.ui-button:last-child{margin-left:auto}.workspace-source-name.ui-button{min-width:0;max-width:none;color:var(--muted-foreground);flex:1;justify-content:flex-start;padding-inline:0;font-size:14px}.workspace-drawer .ui-drawer-core{overscroll-behavior:contain;min-height:0;padding:0 23px 24px;overflow:auto}.workspace-drawer .ui-drawer-core:has(.workspace-source){overflow:hidden}.workspace-source.ui-snippet{background:var(--background-primary);border:none;flex-direction:column;height:100%;min-height:0;display:flex}.workspace-source .ui-snippet-header{flex-shrink:0;padding-inline:0}.workspace-source .ui-snippet-body{flex:1;min-height:0}.workspace-source :is(.ui-snippet-scroll,.ui-snippet-viewport){height:100%;max-height:none}.workspace-source .ui-snippet-body{padding-inline:0}.website-workspace[data-utility] .workspace-reader{z-index:50}.website-workspace[data-utility] .workspace-reader-surface,.website-workspace[data-layout=docs][data-utility] .website-header-actions{visibility:hidden}.workspace-article .web-apitable .ui-table{table-layout:fixed;min-width:0}.workspace-article .web-apitable .web-prose-table :is(.ui-table__head,.ui-table__cell){white-space:normal;overflow-wrap:anywhere;width:auto;min-width:0;padding-inline:8px}.workspace-article .web-apitable code{white-space:normal;overflow-wrap:anywhere}.workspace-article .web-apitable--compact .web-api-default{color:var(--muted-foreground);margin-block:8px;display:block}.workspace-article .web-apitable--compact p{margin:8px 0 0}@media (width<=959px){.website-workspace{--workspace-reader-width:100%}.website-workspace[data-layout=docs] .workspace-reader-surface{padding-left:0;padding-bottom:var(--workspace-footer-height)}.website-workspace[data-layout=docs] :is(.workspace-reading,.workspace-docs-toolbar){width:100%}.workspace-docs-toolbar{padding-left:24px;padding-right:16px}.workspace-reading{padding:20px 24px 24px}.website-workspace .workspace-utilities,.website-workspace[data-layout=docs] .workspace-utilities{display:flex;left:0}.workspace-stage{padding:24px;left:0}.workspace-location.ui-button{flex-shrink:1;max-width:100%}.workspace-component-name.ui-button{flex-shrink:0;max-width:124px}.workspace-drawer-host{bottom:var(--workspace-footer-height)}.workspace-drawer .ui-drawer-header,.workspace-drawer .ui-drawer-core{padding-inline:15px}.workspace-utilities{z-index:60}}