.DemoRoot{border:1px solid var(--gray-c2);border-radius:var(--radius-6);margin-bottom:1.5rem}.DemoPlayground,.DemoRoot{background-color:var(--color-content)}.DemoPlayground{position:relative;border-top-left-radius:var(--radius-6);border-top-right-radius:var(--radius-6);overflow:auto hidden;overscroll-behavior-x:contain}.DemoPlaygroundInner{padding:2rem 1.5rem;min-height:8rem;min-width:-moz-fit-content;min-width:fit-content;display:flex;justify-content:center;align-items:center}@media (min-width:32rem){.DemoPlaygroundInner{padding:3rem 1.5rem;min-height:11.25rem}}.DemoToolbar{font-size:var(--font-size-13);line-height:1.25rem;white-space:nowrap;color:var(--gray-t2);background-color:var(--gray-s2);background-clip:padding-box;border-block:1px solid var(--gray-c2);display:flex;align-items:center;gap:2rem;height:2.25rem;padding:0;-webkit-padding-start:.75rem;padding-inline-start:.75rem;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:auto hidden;overscroll-behavior-x:contain;scrollbar-width:none}.DemoToolbar::-webkit-scrollbar{display:none}.DemoFileSelector{display:flex;align-items:center}.DemoFilename{font-family:var(--font-mono);color:var(--color-foreground);font-weight:700}.DemoTabsList{display:flex;gap:2px;-webkit-margin-start:-.5rem;margin-inline-start:-.5rem}.DemoTab{font-family:var(--font-mono);font-size:inherit;cursor:default;position:relative;z-index:0;outline:0;border:none;background:none;color:inherit;height:1.75rem;padding-inline:.5rem;border-radius:var(--radius-8);display:inline-flex;align-items:center;justify-content:center;line-height:1}@media (hover:hover){.DemoTab:hover{background-color:var(--gray-c2)}}.DemoTab[data-active]{color:var(--color-foreground);font-weight:var(--font-weight-700);background-color:white}@media (prefers-color-scheme:light){.DemoTab[data-active]{box-shadow:0 0 1px var(--blackA-4),0 .5px 1px var(--blackA-3),0 1px 3px var(--blackA-1),0 2px 4px -1px var(--blackA-1)}}@media (prefers-color-scheme:dark){.DemoTab[data-active]{background-color:var(--gray-c2)}}.DemoToolbarActions{position:relative;right:0;display:flex;align-items:center;margin-left:auto;padding-right:.5rem;background-color:var(--gray-s2);height:100%;gap:.25rem}@media (min-width:48rem){.DemoToolbarActions{position:-webkit-sticky;position:sticky;padding-left:1rem}.DemoToolbarActions:before{content:"";position:absolute;top:0;left:-24px;width:24px;height:100%;background:linear-gradient(to right,transparent,var(--gray-s2));pointer-events:none}}.DemoActionButton{display:flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:none;background:none;color:var(--gray-t1);font-family:var(--font-sans);font-size:var(--font-size-13);cursor:pointer;border-radius:var(--radius-4)}@media (hover:hover){.DemoActionButton:hover{background-color:var(--gray-c1);color:var(--gray-t2)}}.DemoCodeBlockRoot{display:flex;flex-direction:column;position:relative;outline:0}.DemoCodeBlockRoot[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%));z-index:1}@media (prefers-color-scheme:dark){.DemoCodeBlockRoot[data-closed]:before{background:linear-gradient(180deg,rgb(0 0 0/0),rgb(0 0 0/60%))}}.DemoCodeBlockViewport{overscroll-behavior-x:contain;overflow-x:auto}.DemoCodeBlockViewport[data-closed]{overflow:hidden;max-height:11.25rem}.DemoSourceBrowser{font-size:var(--font-size-13);line-height:1.25rem;cursor:text;display:flex}.DemoSourceBrowser pre{display:flex;flex-grow:1;margin:0}.DemoSourceBrowser code{display:block;padding:.5rem .75rem;white-space:pre;font-family:var(--font-mono);color:var(--color-foreground)}.DemoCollapseButton{font-family:var(--font-sans);font-size:var(--font-size-13);line-height:1.25rem;background-color:var(--gray-s2);cursor:default;width:100%;color:var(--gray-t2);height:2.25rem;border-top:1px solid var(--gray-c2);border-bottom-left-radius:var(--radius-6);border-bottom-right-radius:var(--radius-6);border-bottom:1px solid transparent;border-left:none;border-right:none;background-clip:padding-box;margin-bottom:-1px;-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (hover:hover){.DemoCollapseButton:hover{background-color:var(--gray-c1)}}.DemoCollapseButton:active{background-color:color-mix(in oklch,var(--gray-c1),var(--gray-t2) 5%)}.FrameworkCardsGrid{display:grid;grid-template-columns:1fr;grid-gap:.75rem;gap:.75rem;margin-bottom:1.5rem}@media (min-width:32rem){.FrameworkCardsGrid{grid-template-columns:repeat(2,1fr)}}@media (min-width:48rem){.FrameworkCardsGrid{grid-template-columns:repeat(3,1fr)}}.FrameworkCard{display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;background-color:var(--color-content);border:1px solid var(--gray-c2);border-radius:var(--radius-6);cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:border-color .15s}@media (hover:hover){.FrameworkCard:hover{border-color:var(--gray-c3);background-color:var(--gray-s2)}}.FrameworkCard:focus-visible{outline:2px solid var(--color-blue);outline-offset:-1px}.FrameworkCardBody{display:flex;flex-direction:column;gap:.125rem;flex-grow:1;min-width:0}.FrameworkCardName{font-size:var(--font-size-15);font-weight:var(--font-weight-700);line-height:1.375rem}.FrameworkCardDesc{font-size:var(--font-size-14);line-height:1.25rem;color:var(--gray-t1)}.FrameworkCardArrow{flex-shrink:0;color:var(--gray-p1)}@media (hover:hover){.FrameworkCard:hover .FrameworkCardArrow{color:var(--gray-t2)}}