@layer components{.DemoRoot{background-color:var(--color-content);border:1px solid var(--color-gray-200);border-radius:var(--radius-md);margin-bottom:calc(var(--spacing) * 6)}.DemoPlaygroundExternalLink{position:absolute;top:.75rem;right:1.125rem}.DemoCopyIconWrap{display:flex;width:.875rem;height:.875rem;align-items:center;justify-content:center}.DemoPlayground{position:relative;background-color:var(--color-content);border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md);overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:thin;&:focus-visible{outline:2px solid var(--color-blue);outline-offset:-1px;z-index:1}}.DemoPlaygroundInner{padding:2rem 1.5rem;min-height:8rem;min-width:fit-content;display:flex;justify-content:center;align-items:center;@media (min-width:32rem){padding-left:1.5rem;padding-bottom:3rem;padding-right:1.5rem;padding-top:3rem;min-height:11.25rem}}.DemoToolbar{font-size:var(--text-xs);line-height:var(--text-xs--line-height);white-space:nowrap;color:var(--color-gray);background-color:var(--color-gray-50);background-clip:padding-box;border-block:1px solid var(--color-gray-200);display:flex;align-items:center;gap:2rem;height:2.25rem;padding:0 0 0 .75rem;user-select:none;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:none;&::-webkit-scrollbar{display:none}&:focus-visible{position:relative;outline:2px solid var(--color-blue);outline-offset:-1px;z-index:1}}.DemoToolbarActions{position:relative;@media (min-width:48rem){position:sticky;padding-left:1rem}right:0;display:flex;align-items:center;gap:1rem;margin-left:auto;padding-right:.75rem;background-color:var(--color-gray-50);height:100%;&:before{content:"";position:absolute;top:0;left:-24px;width:24px;height:100%;background:linear-gradient(to right,transparent,var(--color-gray-50));pointer-events:none}}.DemoFilename{font-family:var(--font-mono);color:var(--color-foreground);font-weight:700;user-select:text}.DemoFilename:hover{text-decoration:underline}.DemoTabsList{display:flex;gap:1rem}.DemoTab{font-family:var(--font-mono);cursor:default;position:relative;z-index:0;outline:0;@media (hover:hover){&:hover{&:before{background-color:var(--color-gray-100)}}}&:after,&:before{content:"";position:absolute;z-index:-1}&:before{inset:-.125rem -.375rem;border-radius:var(--radius-sm)}&:after{inset:-.375rem -.5rem}&[data-active]{color:var(--color-foreground);font-weight:700;&:before{background-color:white;outline:1px solid var(--color-gray-300);outline-offset:-1px;box-shadow:0 2px 3px -2px var(--color-gray-300),inset 0 -1px 1px var(--color-gray-200)}@media (prefers-color-scheme:dark){&:before{outline:none;background-color:var(--color-gray-50);box-shadow:0 0 3px 0 var(--color-gray-300),inset 0 0 0 1px var(--color-gray-400)}}}&:focus-visible:before{outline:2px solid var(--color-blue);outline-offset:-1px}}.DemoCodeBlockRoot{display:flex;flex-direction:column;position:relative;outline:0;&[data-closed]{&:before{content:"";position:absolute;pointer-events:none;height:7.5rem;bottom:0;left:0;right:0;background:linear-gradient(180deg,rgb(255 255 255/0),rgb(255 255 255/60%))}@media (prefers-color-scheme:dark){&:before{background:linear-gradient(180deg,rgb(0 0 0/0),rgb(0 0 0/60%))}}}}.DemoCodeBlockViewport{overscroll-behavior-x:contain;&[data-closed]{overflow:hidden;max-height:calc(8.75lh + .5rem)}}.DemoSourceBrowser{font-size:var(--text-xs);line-height:var(--text-xs--line-height);letter-spacing:var(--text-xs--letter-spacing);cursor:text;display:flex;& pre{display:flex;flex-grow:1}& code{padding:.5rem 0}& code .frame{display:block;padding-left:.75rem;padding-right:.75rem}& code .frame[data-lined]{display:block;white-space:normal;padding-left:0;padding-right:0}* code .frame[data-lined] .line{display:block;white-space:pre;padding-left:.75rem;padding-right:.75rem}}.DemoCollapseButton{font-size:var(--text-xs);line-height:var(--text-xs--line-height);background-color:var(--color-gray-50);cursor:default;width:100%;color:var(--color-gray);height:2.25rem;border-top:1px solid var(--color-gray-200);border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem;border-bottom:1px solid transparent;background-clip:padding-box;margin-bottom:-1px;user-select:none;&[data-sticky]{position:sticky;bottom:-1px;z-index:1}@media (hover:hover){&:hover{background-color:var(--color-gray-75)}}&:active{background-color:color-mix(in oklch,var(--color-gray-75),var(--color-gray-600) 5%)}&:focus-visible{outline:2px solid var(--color-blue);outline-offset:-1px;z-index:1}}}
/*# sourceMappingURL=257410ef00f94d9a.css.map*/