.sandpack{color-scheme:normal;-webkit-font-smoothing:antialiased;--sp-space-1:4px;--sp-space-2:8px;--sp-space-3:12px;--sp-space-4:16px;--sp-space-5:20px;--sp-space-6:24px;--sp-space-7:28px;--sp-space-8:32px;--sp-space-9:36px;--sp-space-10:40px;--sp-space-11:44px;--sp-border-radius:4px;--sp-layout-height:300px;--sp-layout-headerHeight:40px;--sp-transitions-default:.15s ease;--sp-zIndices-base:1;--sp-zIndices-overlay:2;--sp-zIndices-top:3;--sp-font-body:Optimistic Display,-apple-system,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--sp-font-mono:Source Code Pro,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;--sp-font-size:calc(1em - 20%);--sp-font-lineHeight:24px}html .sandpack{--sp-colors-accent:#087ea4;--sp-colors-clickable:#959da5;--sp-colors-disabled:#24292e;--sp-colors-error:#811e18;--sp-colors-error-surface:#ffcdca;--sp-colors-surface1:#fff;--sp-colors-surface2:#e4e7eb;--sp-syntax-color-plain:#24292e;--sp-syntax-color-comment:#6a737d;--sp-syntax-color-keyword:#d73a49;--sp-syntax-color-tag:#22863a;--sp-syntax-color-punctuation:#24292e;--sp-syntax-color-definition:#6f42c1;--sp-syntax-color-property:#005cc5;--sp-syntax-color-static:#032f62;--sp-syntax-color-string:#032f62}html.dark .sp-wrapper{--sp-colors-accent:#58c4dc;--sp-colors-clickable:#999;--sp-colors-disabled:#fff;--sp-colors-error:#811e18;--sp-colors-error-surface:#ffcdca;--sp-colors-surface1:#16181d;--sp-colors-surface2:#343a46;--sp-syntax-color-plain:#fff;--sp-syntax-color-comment:#757575;--sp-syntax-color-keyword:#77b7d7;--sp-syntax-color-tag:#dfab5c;--sp-syntax-color-punctuation:#fff;--sp-syntax-color-definition:#86d9ca;--sp-syntax-color-property:#77b7d7;--sp-syntax-color-static:#c64640;--sp-syntax-color-string:#977cdc}.sandpack .sp-wrapper{width:100%;font-size:var(--sp-font-size);font-family:var(--sp-font-body);line-height:var(--sp-font-lineHeight)}.sandpack .sp-layout{background-color:var(--sp-colors-surface2);-webkit-mask-image:-webkit-radial-gradient(var(--sp-colors-surface1),var(--sp-colors-surface1));overflow:initial;border-bottom-right-radius:.5rem;border-bottom-left-radius:.5rem;flex-wrap:wrap;align-items:stretch;gap:1px;display:flex}.sandpack .sp-stack{flex-direction:column;width:100%;display:flex;position:relative}@media screen and (max-width:768px){.sandpack .sp-layout>.sp-stack{height:auto;min-width:100%!important}}.sandpack .sp-layout>.sp-stack{height:var(--sp-layout-height);flex:1 1 0}.sandpack--playground .sp-tab-button{transition:none}.sandpack--playground .sp-tab-button:focus{outline:revert}.sandpack--playground .sp-tab-button:focus-visible{box-shadow:none}.sandpack .sp-cm:focus-visible{outline:none;height:100%;box-shadow:inset 0 0 0 4px #149eca66}.sandpack .sp-tabs-scrollable-container{flex-wrap:nowrap;align-items:stretch;min-height:40px;margin-bottom:-1px;display:flex;overflow:auto}.sp-tabs .sp-tab-button{border-bottom:2px solid #0000;padding:0 6px}@media (min-width:768px){.sp-tabs .sp-tab-button{margin:0 12px 0 0}}.sp-tabs .sp-tab-button,.sp-tabs .sp-tab-button:hover:not(:disabled,[data-active=true]),.sp-tabs .sp-tab-button[data-active=true]{color:var(--sp-colors-accent)}.sp-tabs .sp-tab-button[data-active=true]{border-bottom:2px solid var(--sp-colors-accent)}.cm-line{padding-left:var(--sp-space-5)}.sandpack .sp-code-editor{background:var(--sp-colors-surface1);flex:1;position:relative;overflow:auto}.sandpack .sp-code-editor .cm-editor{background-color:#0000}.sandpack .sp-code-editor .cm-content,.sandpack .sp-code-editor .cm-gutters,.sandpack .sp-code-editor .cm-gutterElement{-webkit-font-smoothing:auto;padding:0}.sandpack .sp-code-editor .cm-content{padding-bottom:18px}.sandpack--playground .sp-code-editor .cm-line{padding:0 var(--sp-space-3);width:max-content}.sandpack--playground .sp-code-editor .cm-lineNumbers{padding-left:var(--sp-space-3);padding-right:var(--sp-space-1);font-size:13.6px}.sandpack--playground .sp-code-editor .cm-line.cm-errorLine{background-color:#f871711a;min-width:100%;padding-right:2em;display:inline-block;position:relative}.sp-code-editor .cm-errorLine:after{color:#ef4444;content:"⚠";font-size:22px;line-height:20px;position:absolute;top:0;right:8px}.sp-code-editor .cm-tooltip{border:0;max-width:200px}.sandpack .sp-cm{outline:none;height:100%;margin:0}.sp-code-editor .sp-cm .cm-scroller{padding-top:18px}.sandpack .sp-syntax-string{color:var(--sp-syntax-color-string)}.sandpack .sp-syntax-plain{color:var(--sp-syntax-color-plain)}.sandpack .sp-syntax-comment{color:var(--sp-syntax-color-comment)}.sandpack .sp-syntax-keyword{color:var(--sp-syntax-color-keyword)}.sandpack .sp-syntax-definition{color:var(--sp-syntax-color-definition)}.sandpack .sp-syntax-punctuation{color:var(--sp-syntax-color-punctuation)}.sandpack .sp-syntax-property{color:var(--sp-syntax-color-property)}.sandpack .sp-syntax-tag{color:var(--sp-syntax-color-tag)}.sandpack .sp-syntax-static{color:var(--sp-syntax-color-static)}.sandpack .sp-cube-wrapper{background-color:var(--sp-colors-surface1);right:var(--sp-space-2);bottom:var(--sp-space-2);z-index:var(--sp-zIndices-top);border-radius:var(--sp-border-radius);width:32px;height:32px;position:absolute}.sandpack .sp-button{align-items:center;width:100%;height:100%;margin:auto;display:flex}.sandpack .sp-button svg{min-width:var(--sp-space-5);width:var(--sp-space-5);height:var(--sp-space-5);margin:auto}.sandpack .sp-cube-wrapper .sp-cube{display:flex}.sandpack .sp-cube-wrapper .sp-button{display:none}.sandpack .sp-cube-wrapper:hover .sp-button{display:block}.sandpack .sp-cube-wrapper:hover .sp-cube{display:none}.sandpack .sp-cube{transform:translate(-4px,9px)scale(.13)}.sandpack .sp-cube *{width:96px;height:96px;position:absolute}@keyframes cubeRotate{0%{transform:rotateX(-25.5deg)rotateY(45deg)}to{transform:rotateX(-25.5deg)rotateY(405deg)}}.sandpack .sp-sides{transform-style:preserve-3d;animation:1s linear infinite forwards cubeRotate;transform:rotateX(-25.5deg)rotateY(45deg)}.sandpack .sp-sides *{border:10px solid var(--sp-colors-clickable);background:var(--sp-colors-surface1);border-radius:8px}.sandpack .sp-sides .top{transform-origin:50%;transform:rotateX(90deg)translateZ(44px)}.sandpack .sp-sides .bottom{transform-origin:50%;transform:rotateX(-90deg)translateZ(44px)}.sandpack .sp-sides .front{transform-origin:50%;transform:rotateY(0)translateZ(44px)}.sandpack .sp-sides .back{transform-origin:50%;transform:rotateY(-180deg)translateZ(44px)}.sandpack .sp-sides .left{transform-origin:50%;transform:rotateY(-90deg)translateZ(44px)}.sandpack .sp-sides .right{transform-origin:50%;transform:rotateY(90deg)translateZ(44px)}.sandpack .sp-overlay{background-color:hsl(var(--card,0 0% 100%));z-index:var(--sp-zIndices-top);position:absolute;inset:0}.sandpack .sp-error{padding:var(--sp-space-4);white-space:pre-wrap;font-family:var(--sp-font-mono);background-color:var(--sp-colors-error-surface)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.sandpack .sp-error-message{color:var(--sp-colors-error);animation:.15s fadeIn}.sandpack .sp-code-editor .sp-pre-placeholder{-webkit-font-smoothing:auto;padding:18px 0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:13.6px;line-height:24px}.sandpack--playground .sp-code-editor .sp-pre-placeholder{margin-left:0!important;padding-left:48px!important}.text-xl .sp-pre-placeholder{font-size:16px!important;line-height:24px!important}.sandpack .sp-layout{min-height:216px}.sandpack .sp-layout>.sp-stack:first-child{min-width:431px;max-height:40vh}.sandpack .sp-layout>.sp-stack:nth-child(2){min-width:431px;min-height:40vh;max-height:40vh}.sandpack .sp-layout.sp-layout-expanded>.sp-stack:first-child,.sandpack .sp-layout.sp-layout-expanded>.sp-stack:nth-child(2){max-height:unset;height:auto}@media (min-width:1280px){.sandpack .sp-layout>.sp-stack:first-child,.sandpack .sp-layout>.sp-stack:nth-child(2){height:auto;min-height:unset;max-height:406px}.sandpack .sp-layout.sp-layout-expanded>.sp-stack:first-child,.sandpack .sp-layout.sp-layout-expanded>.sp-stack:nth-child(2){max-height:unset}}.sandpack .sp-layout .sandpack-expand{border-left:none;margin-left:0}.expandable-callout .sp-stack:nth-child(2){min-width:431px;min-height:40vh;max-height:40vh}.sandpack .console .sp-cm,.sandpack .console .sp-cm .cm-scroller,.sandpack .console .sp-cm .cm-line{padding:0!important}.sandpack .sp-code-editor .cm-diagnostic{color:hsl(var(--secondary-foreground,240 5.9% 10%))}.sandpack .sp-devtools>div{--color-background:var(--sp-colors-surface1)!important;--color-background-inactive:var(--sp-colors-surface2)!important;--color-background-selected:var(--sp-colors-accent)!important;--color-background-hover:transparent!important;--color-modal-background:#ffffffd2!important;--color-tab-selected-border:#087ea4!important;--color-component-name:var(--sp-syntax-color-definition)!important;--color-attribute-name:var(--sp-syntax-color-property)!important;--color-attribute-value:var(--sp-syntax-color-string)!important;--color-attribute-editable-value:var(--sp-syntax-color-property)!important;--color-attribute-name-not-editable:var(--sp-colors-clickable)!important;--color-button-background-focus:var(--sp-colors-surface2)!important;--color-button-active:var(--sp-colors-accent)!important;--color-button-background:transparent!important;--color-button:var(--sp-colors-clickable)!important;--color-button-hover:var(--sp-colors-disabled)!important;--color-border:var(--sp-colors-surface2)!important;--color-text:#23272f!important}html.dark .sp-devtools>div{--color-text:var(--sp-colors-clickable)!important;--color-modal-background:#16181de0!important}.sandpack .sp-devtools table td{border:1px solid var(--sp-colors-surface2)}.sandpack .sp-cm{-webkit-text-size-adjust:none}@media screen and (max-width:768px){@supports (-webkit-overflow-scrolling:touch){.sandpack--playground .cm-content,.sandpack--playground .sp-code-editor .sp-pre-placeholder,.DocSearch-Input{font-size:initial}}}.sp-loading .sp-icon-standalone span,.sp-bridge-frame{display:none}