.blog-copy-button{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;padding:0;background:var(--blog-code-chrome-bg, rgba(0, 0, 0, .04));color:var(--blog-code-chrome-text-hover, var(--blog-text, currentColor));border:1px solid var(--blog-code-chrome-divider, var(--blog-border, currentColor));border-radius:var(--blog-radius-sm, 4px);cursor:pointer;font:inherit;transition:color var(--blog-transition-fast, .15s) var(--blog-easing, ease),border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease),opacity var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-copy-button:focus-visible{outline:2px solid var(--blog-accent, currentColor);outline-offset:2px}.blog-copy-button[data-state=copied]{color:var(--blog-tip, currentColor);border-color:var(--blog-tip, currentColor)}.blog-copy-button[data-state=error]{color:var(--blog-danger, currentColor);border-color:var(--blog-danger, currentColor)}.blog-control{display:flex;flex-direction:column;gap:var(--blog-space-xs, .25rem);margin-block:var(--blog-space-sm, .5rem);font-family:var(--blog-font-body, inherit);font-size:.875rem;min-width:0}.blog-control-label{display:flex;align-items:center;justify-content:space-between;gap:var(--blog-space-sm, .5rem);color:var(--blog-text, currentColor);font-weight:500;cursor:pointer;line-height:1.3}.blog-control-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.blog-control-value{color:var(--blog-text-muted, currentColor);font-family:var(--blog-font-mono, monospace);font-weight:500;font-size:.8125rem;font-variant-numeric:tabular-nums;background:var(--blog-bg-elevated, rgba(0, 0, 0, .04));border-radius:var(--blog-radius-sm, 4px);padding:.0625rem .375rem;flex-shrink:0}.blog-control-description{margin:0;color:var(--blog-text-muted, currentColor);font-size:.75rem;line-height:1.4}.blog-control-col-span-2{grid-column:span 2}.blog-control-col-span-3{grid-column:span 3}.blog-control-col-span-4{grid-column:span 4}.blog-control-col-span-5{grid-column:span 5}.blog-control-col-span-6{grid-column:span 6}.blog-control-row-span-2{grid-row:span 2}.blog-control-row-span-3{grid-row:span 3}.blog-control-row-span-4{grid-row:span 4}.blog-control-row-span-5{grid-row:span 5}.blog-control-row-span-6{grid-row:span 6}.blog-control input:focus-visible,.blog-control select:focus-visible,.blog-control textarea:focus-visible,.blog-control button:focus-visible,.blog-control [role=slider]:focus-visible,.blog-control [tabindex]:focus-visible{outline:2px solid var(--blog-accent, currentColor);outline-offset:2px}.blog-control-slider input[type=range]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;height:1.5rem;margin:0;padding:0;background:transparent;border:none;cursor:pointer}.blog-control-slider input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(to right,var(--blog-accent, currentColor) 0%,var(--blog-accent, currentColor) var(--slider-pct, 0%),var(--blog-border, rgba(0, 0, 0, .12)) var(--slider-pct, 0%),var(--blog-border, rgba(0, 0, 0, .12)) 100%);border-radius:999px;border:none}.blog-control-slider input[type=range]::-moz-range-track{height:6px;background:var(--blog-border, rgba(0, 0, 0, .12));border-radius:999px;border:none}.blog-control-slider input[type=range]::-moz-range-progress{height:6px;background:var(--blog-accent, currentColor);border-radius:999px}.blog-control-slider input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-6px;width:18px;height:18px;background:var(--blog-accent, currentColor);border:2px solid var(--blog-bg, #fff);border-radius:50%;box-shadow:0 1px 3px #0000002e;cursor:grab;-webkit-transition:transform var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease);transition:transform var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-slider input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--blog-accent, currentColor);border:2px solid var(--blog-bg, #fff);border-radius:50%;box-shadow:0 1px 3px #0000002e;cursor:grab;-moz-transition:transform var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease);transition:transform var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 2px 6px #00000038}.blog-control-slider input[type=range]:hover::-moz-range-thumb{box-shadow:0 2px 6px #00000038}.blog-control-slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}.blog-control-slider input[type=range]:active::-moz-range-thumb{cursor:grabbing;transform:scale(1.08)}.blog-control-toggle input[type=checkbox]{-moz-appearance:none;appearance:none;-webkit-appearance:none;position:relative;width:2.25rem;height:1.25rem;margin:0;padding:0;background:var(--blog-border, rgba(0, 0, 0, .18));border:none;border-radius:999px;cursor:pointer;transition:background-color var(--blog-transition-fast, .15s) var(--blog-easing, ease);align-self:flex-start}.blog-control-toggle input[type=checkbox]:before{content:"";position:absolute;top:2px;left:2px;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);background:var(--blog-bg, #fff);border-radius:50%;box-shadow:0 1px 2px #00000040;transition:transform var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-toggle input[type=checkbox]:checked{background:var(--blog-accent, currentColor)}.blog-control-toggle input[type=checkbox]:checked:before{transform:translate(1rem)}.blog-control-toggle input[type=checkbox]:hover{background:color-mix(in srgb,var(--blog-border, rgba(0, 0, 0, .18)) 70%,var(--blog-text, currentColor))}.blog-control-toggle input[type=checkbox]:checked:hover{background:color-mix(in srgb,var(--blog-accent, currentColor) 80%,var(--blog-text, currentColor))}.blog-control-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--blog-space-sm, .5rem);width:100%;font:inherit;color:var(--blog-text, currentColor);background:var(--blog-bg, #fff);border:1px solid var(--blog-border, rgba(0, 0, 0, .15));border-radius:var(--blog-radius-sm, 6px);padding:.4rem .625rem;cursor:pointer;text-align:start;transition:border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-select-trigger:hover{border-color:color-mix(in srgb,var(--blog-border, rgba(0, 0, 0, .15)) 50%,var(--blog-text, currentColor))}.blog-control-select-trigger:focus-visible{outline:none;border-color:var(--blog-accent, currentColor);box-shadow:0 0 0 3px #0000000f}.blog-control-select-trigger-open{border-color:var(--blog-accent, currentColor);box-shadow:0 0 0 3px #0000000f}.blog-control-select-trigger-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;font-family:var(--blog-font-mono, monospace);font-size:.875rem}.blog-control-select-chevron{display:inline-flex;align-items:center;justify-content:center;color:var(--blog-text-muted, currentColor);flex-shrink:0;transition:transform var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-select-trigger-open .blog-control-select-chevron{transform:rotate(180deg);color:var(--blog-accent, currentColor)}.blog-control-select-listbox{position:fixed;z-index:1000;margin:0;padding:.25rem;list-style:none;background:var(--blog-bg, #fff);border:1px solid var(--blog-border, rgba(0, 0, 0, .15));border-radius:var(--blog-radius-sm, 6px);box-shadow:0 4px 12px #00000014,0 1px 3px #0000000f;max-height:16rem;overflow-y:auto;scroll-behavior:smooth;outline:none;transform-origin:top center;animation:blog-control-select-pop var(--blog-transition-fast, .15s) var(--blog-easing, ease)}@keyframes blog-control-select-pop{0%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.blog-control-select-option{display:flex;align-items:center;justify-content:space-between;gap:var(--blog-space-sm, .5rem);padding:.4rem .625rem;border-radius:calc(var(--blog-radius-sm, 6px) - 2px);cursor:pointer;font-family:var(--blog-font-mono, monospace);font-size:.875rem;color:var(--blog-text, currentColor);-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:background-color 80ms ease}.blog-control-select-option-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.blog-control-select-option-highlighted{background:var(--blog-bg-elevated, rgba(0, 0, 0, .05))}.blog-control-select-option-selected{font-weight:600;color:var(--blog-accent, currentColor)}.blog-control-select-option-selected.blog-control-select-option-highlighted{background:color-mix(in srgb,var(--blog-accent, currentColor) 8%,transparent)}.blog-control-select-check{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blog-accent, currentColor)}.blog-control-radio-group{display:flex;flex-wrap:wrap;gap:var(--blog-space-sm, .5rem) var(--blog-space-md, 1rem);margin:0;padding:0;border:0}.blog-control-radio-option{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;font-weight:400;color:var(--blog-text, currentColor)}.blog-control-radio input[type=radio]{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;background:var(--blog-bg, #fff);border:1.5px solid var(--blog-border, rgba(0, 0, 0, .25));border-radius:50%;cursor:pointer;position:relative;transition:border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-radio input[type=radio]:hover{border-color:color-mix(in srgb,var(--blog-border, rgba(0, 0, 0, .25)) 40%,var(--blog-accent, currentColor))}.blog-control-radio input[type=radio]:checked{border-color:var(--blog-accent, currentColor)}.blog-control-radio input[type=radio]:checked:after{content:"";position:absolute;inset:3px;background:var(--blog-accent, currentColor);border-radius:50%}.blog-control-color-swatch{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:1.5rem;background-color:var(--blog-bg-elevated, rgba(0, 0, 0, .04));border:1px solid var(--blog-border, rgba(0, 0, 0, .15));border-radius:var(--blog-radius-md, 8px);cursor:pointer;overflow:hidden;transition:border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-color-swatch:hover{border-color:color-mix(in srgb,var(--blog-border, rgba(0, 0, 0, .15)) 30%,var(--blog-text, currentColor))}.blog-control-color-picker{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;opacity:0;cursor:pointer;-moz-appearance:none;appearance:none;-webkit-appearance:none;z-index:1}.blog-control-color-picker::-webkit-color-swatch-wrapper{padding:0}.blog-control-color-picker::-webkit-color-swatch{border:none}.blog-control-color-picker::-moz-color-swatch{border:none}.blog-control-color-hex{position:relative;z-index:2;box-sizing:content-box;width:9ch;margin:0;padding:.375rem .625rem;background:transparent;border:0;border-radius:var(--blog-radius-sm, 4px);font:inherit;font-family:var(--blog-font-mono, monospace);font-weight:500;font-variant-numeric:tabular-nums;text-align:center;color:inherit;cursor:text;outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none}.blog-control-color-hex::-moz-selection{background-color:#ffffff59}.blog-control-color-hex::selection{background-color:#ffffff59}.blog-control-color-hex:focus-visible{outline:2px solid currentColor;outline-offset:2px}.blog-control-color-swatch[data-tone=dark]{color:#1a1a1a}.blog-control-color-swatch[data-tone=light]{color:#fff}.blog-control-color-swatch[data-tone=light] .blog-control-color-hex::-moz-selection{background-color:#00000040}.blog-control-color-swatch[data-tone=light] .blog-control-color-hex::selection{background-color:#00000040}.blog-control-text input[type=text],.blog-control-numeric input[type=number],.blog-control-textarea textarea{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:100%;font:inherit;font-family:var(--blog-font-mono, monospace);font-size:.875rem;color:var(--blog-text, currentColor);background:var(--blog-bg, #fff);border:1px solid var(--blog-border, rgba(0, 0, 0, .15));border-radius:var(--blog-radius-sm, 6px);padding:.4rem .625rem;transition:border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease),box-shadow var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-text input[type=text]:hover,.blog-control-numeric input[type=number]:hover,.blog-control-textarea textarea:hover{border-color:color-mix(in srgb,var(--blog-border, rgba(0, 0, 0, .15)) 50%,var(--blog-text, currentColor))}.blog-control-text input[type=text]:focus-visible,.blog-control-numeric input[type=number]:focus-visible,.blog-control-textarea textarea:focus-visible{outline:none;border-color:var(--blog-accent, currentColor);box-shadow:0 0 0 3px #0000000f}.blog-control-textarea textarea{font-family:var(--blog-font-body, inherit);min-height:5rem;resize:vertical;line-height:1.5}.blog-control-numeric input[type=number]::-webkit-outer-spin-button,.blog-control-numeric input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.blog-control-numeric input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield}.blog-control-numeric-shell{display:flex;align-items:stretch;width:100%}.blog-control-numeric-shell .blog-control-numeric-step{display:inline-flex;align-items:center;justify-content:center;width:2rem;flex-shrink:0;padding:0;background:var(--blog-bg-elevated, rgba(0, 0, 0, .04));color:var(--blog-text, currentColor);border:1px solid var(--blog-border, rgba(0, 0, 0, .15));cursor:pointer;transition:background-color var(--blog-transition-fast, .15s) var(--blog-easing, ease),color var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-control-numeric-shell .blog-control-numeric-step:first-child{border-radius:var(--blog-radius-sm, 6px) 0 0 var(--blog-radius-sm, 6px);border-right:0}.blog-control-numeric-shell .blog-control-numeric-step:last-child{border-radius:0 var(--blog-radius-sm, 6px) var(--blog-radius-sm, 6px) 0;border-left:0}.blog-control-numeric-shell .blog-control-numeric-step:hover:not(:disabled){background:color-mix(in srgb,var(--blog-bg-elevated, rgba(0, 0, 0, .04)) 60%,var(--blog-text, currentColor));color:var(--blog-bg, #fff)}.blog-control-numeric-shell .blog-control-numeric-step:active:not(:disabled){background:var(--blog-accent, currentColor);color:var(--blog-bg, #fff)}.blog-control-numeric-shell .blog-control-numeric-step:disabled{opacity:.4;cursor:not-allowed}.blog-control-numeric-shell input[type=number]{flex:1 1 auto;min-width:0;border-radius:0;text-align:center}.blog-key-capture-button{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:var(--blog-space-xs, .25rem) var(--blog-space-sm, .5rem);background:var(--blog-bg-elevated, rgba(0, 0, 0, .04));color:var(--blog-text, currentColor);border:1px solid var(--blog-border, currentColor);border-bottom-width:2px;border-radius:var(--blog-radius-sm, 4px);font-family:var(--blog-font-mono, monospace);font-size:.8125rem;cursor:pointer;transition:background var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-key-capture-button:hover{background:var(--blog-bg, transparent)}.blog-key-capture-button[data-listening=true]{background:var(--blog-accent-muted, rgba(0, 120, 220, .15));border-color:var(--blog-accent, currentColor);color:var(--blog-accent, currentColor)}.blog-key-capture-placeholder{color:var(--blog-text-muted, currentColor);font-style:italic}.blog-control-xypad{--blog-xy-x: 50%;--blog-xy-y: 50%}.blog-control-xypad{align-items:center}.blog-xypad-surface{position:relative;width:100%;aspect-ratio:1 / 1;max-width:16rem;background:var(--blog-bg-elevated, rgba(0, 0, 0, .04));border:1px solid var(--blog-border, currentColor);border-radius:var(--blog-radius-md, 8px);touch-action:none;cursor:crosshair;overflow:hidden}.blog-xypad-thumb{position:absolute;left:var(--blog-xy-x);top:var(--blog-xy-y);z-index:3;width:1.25rem;height:1.25rem;margin-left:-.625rem;margin-top:-.625rem;background:var(--blog-accent, currentColor);border:2px solid var(--blog-bg, #fff);border-radius:50%;pointer-events:none;box-shadow:var(--blog-shadow-md, 0 4px 12px rgb(0 0 0 / .18));transition:transform 80ms ease-out}.blog-xypad-surface:focus-visible{outline:2px solid var(--blog-accent, currentColor);outline-offset:2px}.blog-xypad-surface:before,.blog-xypad-surface:after{content:"";position:absolute;z-index:1;pointer-events:none}.blog-xypad-surface:before{left:0;right:0;top:var(--blog-xy-y);height:1px;background:repeating-linear-gradient(to right,var(--blog-text-muted, rgba(0, 0, 0, .45)) 0 5px,transparent 5px 9px)}.blog-xypad-surface:after{top:0;bottom:0;left:var(--blog-xy-x);width:1px;background:repeating-linear-gradient(to bottom,var(--blog-text-muted, rgba(0, 0, 0, .45)) 0 5px,transparent 5px 9px)}.blog-xypad-readout{position:absolute;top:.375rem;right:.375rem;z-index:2;padding:.0625rem .375rem;font-family:var(--blog-font-mono, monospace);font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--blog-text, currentColor);background:var(--blog-bg, #fff);border:1px solid var(--blog-border, rgba(0, 0, 0, .12));border-radius:var(--blog-radius-sm, 4px);box-shadow:0 1px 2px #0000000d;pointer-events:none;white-space:nowrap}.blog-playground{--blog-playground-control-cols: 1;--blog-playground-side-width: minmax(16rem, 1fr);position:relative;display:block;margin-block:var(--blog-space-md, 1rem);background:transparent}.blog-playground-body{display:flex;flex-direction:column;min-width:0;border:1px solid var(--blog-border, currentColor);border-radius:var(--blog-radius-md, 8px);overflow:hidden;background:var(--blog-bg, #ffffff)}.blog-playground-slot-middle{display:flex;flex-direction:row;align-items:stretch;min-width:0;min-height:0}.blog-playground-slot-center{flex:1 1 auto;min-width:0;min-height:6rem;background:var(--blog-bg, #ffffff);overflow:hidden;display:flex;flex-direction:column}.blog-playground-slot-left,.blog-playground-slot-right{display:flex;flex-direction:column;flex:0 0 auto;min-width:14rem;max-width:50%;min-height:0}.blog-playground-slot-left{border-inline-end:1px solid var(--blog-border, currentColor)}.blog-playground-slot-right{border-inline-start:1px solid var(--blog-border, currentColor)}.blog-playground-slot-middle:has(.blog-playground-slot-left-code)>.blog-playground-slot-left,.blog-playground-slot-middle:has(.blog-playground-slot-right-code)>.blog-playground-slot-right{flex-grow:var(--blog-playground-code-fraction, .5);flex-shrink:1;flex-basis:0;min-width:0;max-width:none}.blog-playground-slot-middle:has(.blog-playground-slot-left-code)>.blog-playground-slot-center,.blog-playground-slot-middle:has(.blog-playground-slot-right-code)>.blog-playground-slot-center{flex-grow:calc(1 - var(--blog-playground-code-fraction, .5));flex-shrink:1;flex-basis:0;min-width:0}.blog-playground-slot-left-code,.blog-playground-slot-right-code{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.blog-playground-resizer{flex:0 0 1px;align-self:stretch;cursor:ew-resize;background:var(--blog-border, currentColor);position:relative;touch-action:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.blog-playground-resizer:after{content:"";position:absolute;inset-block:0;inset-inline:-6px}.blog-playground-resizer-grip{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px;border-radius:var(--blog-radius-sm, 4px);background:transparent;z-index:2;transition:background-color var(--blog-transition-fast, .15s) var(--blog-easing, ease);cursor:inherit}.blog-playground-resizer-grip>span{width:4px;height:4px;border-radius:50%;background:#0000004d}.blog-playground-resizer:hover .blog-playground-resizer-grip,.blog-playground-resizer:focus-visible .blog-playground-resizer-grip{background:#00000024}.blog-playground-resizer:focus-visible{outline:2px solid var(--blog-accent, currentColor);outline-offset:-1px}.blog-playground-slot-top,.blog-playground-slot-bottom{display:flex;flex-direction:column}.blog-playground-slot-top{border-block-end:1px solid var(--blog-border, currentColor)}.blog-playground-slot-bottom{border-block-start:1px solid var(--blog-border, currentColor)}.blog-playground-slot-top>*+*,.blog-playground-slot-bottom>*+*,.blog-playground-slot-left>*+*,.blog-playground-slot-right>*+*{border-block-start:1px solid var(--blog-border, currentColor)}@media(max-width:700px){.blog-playground-slot-middle{flex-direction:column}.blog-playground-resizer{display:none}.blog-playground-slot-left,.blog-playground-slot-right{min-width:0;max-width:none;border-inline:none}.blog-playground-slot-left{border-block-end:1px solid var(--blog-border, currentColor)}.blog-playground-slot-right{border-block-start:1px solid var(--blog-border, currentColor)}.blog-playground-slot-middle:has(.blog-playground-slot-left-code)>.blog-playground-slot-left,.blog-playground-slot-middle:has(.blog-playground-slot-right-code)>.blog-playground-slot-right{flex-grow:0;flex-shrink:1;flex-basis:auto;max-width:none}.blog-playground-slot-middle:has(.blog-playground-slot-left-code)>.blog-playground-slot-center,.blog-playground-slot-middle:has(.blog-playground-slot-right-code)>.blog-playground-slot-center{flex-grow:0;flex-basis:auto}.blog-playground-slot-left .blog-playground-code,.blog-playground-slot-right .blog-playground-code{height:auto}.blog-playground-sandpack .sp-layout>.sp-file-explorer{flex-basis:100%;min-width:100%}}.blog-playground-controls{padding:var(--blog-space-md, 1rem);background:var(--blog-bg-elevated, #f6f6f6);display:grid;grid-template-columns:repeat(var(--blog-playground-control-cols, 1),minmax(0,1fr));gap:var(--blog-space-sm, .5rem) var(--blog-space-md, 1rem);align-content:start;min-height:0}.blog-playground-slot-left .blog-playground-controls,.blog-playground-slot-right .blog-playground-controls{flex:1 1 auto}.blog-playground-code{background:var(--blog-code-surface, #0f0f0f);padding:0;min-height:0;display:flex;flex-direction:column;position:relative}.blog-playground-code-copy{position:absolute;top:var(--blog-space-xs, .25rem);inset-inline-end:var(--blog-space-xs, .25rem);z-index:2;opacity:0}.blog-playground-code:hover .blog-playground-code-copy,.blog-playground-code-copy:focus-visible{opacity:1}.blog-playground-slot-left .blog-playground-code,.blog-playground-slot-right .blog-playground-code{flex:1 1 auto;height:100%}.blog-playground-slot-left .blog-playground-code-panel,.blog-playground-slot-right .blog-playground-code-panel{min-height:0}.blog-playground-code-file{margin:0;padding:0;display:flex;flex-direction:column;min-height:0;flex:1 1 auto}.blog-playground-code-file+.blog-playground-code-file{border-block-start:1px solid var(--blog-code-chrome-divider, rgba(255, 255, 255, .08))}.blog-playground-code-title{padding:var(--blog-code-chrome-padding, .5rem 1rem);padding-inline-end:2.75rem;background:var(--blog-code-chrome-bg, rgba(255, 255, 255, .04));color:var(--blog-code-chrome-text, rgba(255, 255, 255, .6));font-family:var(--blog-font-mono, monospace);font-size:var(--blog-code-chrome-font-size, .8rem);border-bottom:1px solid var(--blog-code-chrome-divider, rgba(255, 255, 255, .08));flex:0 0 auto}.blog-playground-edit-hint{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:1.25rem;height:100%;padding-inline:.125rem;color:var(--blog-code-chrome-text, rgba(255, 255, 255, .5));pointer-events:none}.blog-playground-code-tabs{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}.blog-playground-code-tablist{display:flex;flex-wrap:nowrap;gap:0;padding-inline-start:var(--blog-space-sm, .5rem);padding-inline-end:2.75rem;background:var(--blog-code-chrome-bg, rgba(255, 255, 255, .04));border-block-end:1px solid var(--blog-code-chrome-divider, rgba(255, 255, 255, .08));overflow-x:auto;overflow-y:hidden;flex:0 0 auto}.blog-playground-code-tab{margin:0;padding:var(--blog-code-chrome-padding, .5rem 1rem);background:transparent;border:none;border-block-end:2px solid transparent;color:var(--blog-code-chrome-text, rgba(255, 255, 255, .6));font-family:var(--blog-font-mono, monospace);font-size:var(--blog-code-chrome-font-size, .8rem);cursor:pointer;flex:0 0 auto;white-space:nowrap;transition:color var(--blog-transition-fast, .15s) var(--blog-easing, ease),border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-playground-code-tab:hover{color:var(--blog-code-chrome-text-hover, rgba(255, 255, 255, .85))}.blog-playground-code-tab-active{color:var(--blog-code-chrome-text-active, #ffffff);border-block-end-color:var(--blog-code-chrome-text-active, #ffffff)}.blog-playground-code-tab:focus-visible{outline:2px solid var(--blog-code-chrome-text-active, #ffffff);outline-offset:-2px}.blog-playground-code-panel{min-height:14rem;overflow:auto;flex:1 1 auto;max-height:var(--blog-playground-max-height, 80vh)}.blog-playground-code-body{min-height:100%}.blog-playground-code-body pre{margin:0;padding:var(--blog-space-md, 1rem);overflow-x:auto;font-family:var(--blog-font-mono, monospace);font-size:var(--blog-code-body-font-size, .875rem);line-height:var(--blog-code-body-line-height, 1.6);background:transparent!important}.blog-playground-code-body pre>code{display:grid;width:-moz-fit-content;width:fit-content;min-width:100%}.blog-playground-reset{position:absolute;top:var(--blog-space-xs, .25rem);inset-inline-end:var(--blog-space-xs, .25rem);z-index:2;width:1.75rem;height:1.75rem;display:inline-flex;align-items:center;justify-content:center;padding:0;background:var(--blog-bg-elevated, rgba(255, 255, 255, .9));color:var(--blog-text-muted, currentColor);border:1px solid var(--blog-border, currentColor);border-radius:var(--blog-radius-sm, 4px);cursor:pointer;opacity:0;transition:opacity var(--blog-transition-fast, .15s) var(--blog-easing, ease),color var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-playground-reset:hover{color:var(--blog-text, currentColor)}.blog-playground:hover .blog-playground-reset,.blog-playground-reset:focus-visible{opacity:1}.blog-playground-reset:focus-visible{outline:2px solid var(--blog-accent, currentColor);outline-offset:2px}.blog-playground-caption{margin:var(--blog-space-sm, .5rem) 0 0;padding:0;background:transparent;border:0;color:var(--blog-text-muted, currentColor);font-size:.8125rem;line-height:1.5;font-style:italic;text-align:center}.blog-playground-static,.blog-playground-vanilla{display:flex;flex-direction:column;flex:1 1 auto;background:var(--blog-bg, #ffffff);min-height:6rem;overflow:auto}.blog-playground-sandpack{display:flex;flex-direction:column;flex:1 1 auto;min-height:12rem}.blog-playground-sandpack .sp-wrapper,.blog-playground-sandpack .sp-layout{width:100%;flex:1 1 auto;border:0;border-radius:0}.blog-playground-sandpack .sp-preview-container,.blog-playground-sandpack .sp-preview-iframe{background:var(--blog-bg, #ffffff)!important}.blog-playground-sandpack-row{display:flex;flex-direction:row;flex:1 1 0;min-width:0;min-height:0;height:300px}.blog-playground-sandpack-code,.blog-playground-sandpack-preview{display:flex;flex-direction:column;flex-shrink:1;flex-basis:0;min-width:0;min-height:0}.blog-playground-sandpack-code{flex-grow:var(--blog-playground-code-fraction, .5);position:relative}.blog-playground-sandpack-preview{flex-grow:calc(1 - var(--blog-playground-code-fraction, .5))}.blog-playground-sandpack-copy{position:absolute;top:.375rem;inset-inline-end:var(--blog-space-xs, .25rem);z-index:2;opacity:0}.blog-playground-sandpack-code:hover .blog-playground-sandpack-copy,.blog-playground-sandpack-copy:focus-visible{opacity:1}.blog-playground-sandpack .sp-tab-container{outline:none!important}.blog-playground-sandpack .sp-tab-container:has(.sp-tab-button:focus-visible){outline:2px solid var(--blog-accent, currentColor);outline-offset:-2px;border-radius:var(--blog-radius-sm, 4px)}.blog-playground-sandpack .sp-tabs{padding-inline-end:2.75rem;padding-inline-start:1.5rem}.blog-playground-sandpack-edit-hint{position:absolute;top:.625rem;inset-inline-start:.375rem;z-index:2;width:1rem;height:auto;padding-inline:0}.blog-playground-sandpack .sp-tabs-scrollable-container{scrollbar-width:none}.blog-playground-sandpack .sp-tabs-scrollable-container::-webkit-scrollbar{display:none}.blog-playground-sandpack .sp-file-explorer{border-inline-end:1px solid var(--blog-border, currentColor)}.blog-playground-sandpack .sp-tabs{border-block-end:1px solid var(--blog-border, currentColor)}.blog-playground-sandpack .sp-tab-button{border-block-end:2px solid transparent}.blog-playground-sandpack .sp-tab-button[data-active=true]{font-weight:600;border-block-end-color:var(--blog-accent, #111111)}.blog-playground-sandpack .cm-editor.cm-focused,.blog-playground-sandpack .cm-content{outline:none}.blog-playground-sandpack .cm-scroller{overflow-x:hidden}.blog-playground-sandpack .cm-content{min-width:100%}.blog-playground-sandpack-code .sp-stack,.blog-playground-sandpack-code .sp-code-editor,.blog-playground-sandpack-preview .sp-stack,.blog-playground-sandpack-preview .sp-preview-container{flex:1 1 auto;min-height:0;width:100%}@media(max-width:700px){.blog-playground-sandpack-row{flex-direction:column;height:auto}.blog-playground-sandpack-code,.blog-playground-sandpack-preview{flex-grow:0;flex-basis:auto;min-width:0;width:100%}}.blog-playground-sandpack .sp-close-button{display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-inline-start:var(--blog-space-xs, .25rem);padding:0;background:transparent;border:0;border-radius:var(--blog-radius-sm, 4px);color:var(--blog-code-chrome-text, currentColor);cursor:pointer;opacity:.6;transition:opacity var(--blog-transition-fast, .15s) var(--blog-easing, ease),background-color var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-playground-sandpack .sp-close-button:hover,.blog-playground-sandpack .sp-close-button:focus-visible{opacity:1;background:var(--blog-code-chrome-bg, rgba(0, 0, 0, .06));color:var(--blog-code-chrome-text-hover, currentColor)}.blog-playground-sandpack .sp-close-button svg{width:.7rem;height:.7rem}.blog-playground-sandpack-loading{display:flex;align-items:center;justify-content:center;min-height:12rem;padding:var(--blog-space-md, 1rem);color:var(--blog-text-muted, currentColor);font-family:var(--blog-font-mono, monospace);font-size:.8125rem}.blog-playground-preview-stage{padding:var(--blog-space-md, 1rem)}.blog-playground-live{display:flex;flex-direction:column;flex:0 0 auto}.blog-playground-live-row{display:flex;flex-direction:row;flex:0 0 auto;min-width:0;min-height:0;height:var(--blog-playground-height, 320px)}.blog-playground-live-editor{display:flex;flex-direction:column;flex-grow:var(--blog-playground-code-fraction, .5);flex-shrink:1;flex-basis:0;min-width:0;min-height:0;position:relative;background:var(--blog-code-surface, #0f0f0f)}.blog-playground-live-preview{display:flex;flex-direction:column;flex-grow:calc(1 - var(--blog-playground-code-fraction, .5));flex-shrink:1;flex-basis:0;min-width:0;min-height:0;background:var(--blog-bg, #ffffff)}.blog-playground-live-tablist{display:flex;flex-wrap:nowrap;gap:0;padding-inline-start:var(--blog-space-sm, .5rem);padding-inline-end:2.75rem;background:var(--blog-code-chrome-bg, rgba(255, 255, 255, .04));border-block-end:1px solid var(--blog-code-chrome-divider, rgba(255, 255, 255, .08));overflow-x:auto;overflow-y:hidden;flex:0 0 auto}.blog-playground-live-tab{margin:0;padding:var(--blog-code-chrome-padding, .5rem 1rem);background:transparent;border:none;border-block-end:2px solid transparent;color:var(--blog-code-chrome-text, rgba(255, 255, 255, .6));font-family:var(--blog-font-mono, monospace);font-size:var(--blog-code-chrome-font-size, .8rem);cursor:pointer;flex:0 0 auto;white-space:nowrap;transition:color var(--blog-transition-fast, .15s) var(--blog-easing, ease),border-color var(--blog-transition-fast, .15s) var(--blog-easing, ease)}.blog-playground-live-tab:hover{color:var(--blog-code-chrome-text-hover, rgba(255, 255, 255, .85))}.blog-playground-live-tab-active{color:var(--blog-code-chrome-text-active, #ffffff);border-block-end-color:var(--blog-code-chrome-text-active, #ffffff)}.blog-playground-live-tab:focus-visible{outline:2px solid var(--blog-code-chrome-text-active, #ffffff);outline-offset:-2px}.blog-playground-live-panel{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}.blog-playground-live-highlight,.blog-playground-live-textarea,.blog-playground-live-highlight pre{font-family:var(--blog-font-mono, monospace);font-size:var(--blog-code-body-font-size, .875rem);line-height:var(--blog-code-body-line-height, 1.6);white-space:pre;-o-tab-size:2;tab-size:2;-moz-tab-size:2;letter-spacing:0}.blog-playground-live-highlight{position:absolute;inset:0;margin:0;pointer-events:none;overflow:hidden}.blog-playground-live-highlight pre{margin:0;padding:var(--blog-space-md, 1rem);background:transparent!important;min-width:100%;width:-moz-max-content;width:max-content}.blog-playground-live-textarea{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:var(--blog-space-md, 1rem);background:transparent;color:transparent;caret-color:var(--blog-text, #111);border:0;outline:none;resize:none}.blog-playground-live-copy{position:absolute;top:var(--blog-space-xs, .25rem);inset-inline-end:var(--blog-space-xs, .25rem);z-index:2;opacity:0}.blog-playground-live-editor:hover .blog-playground-live-copy,.blog-playground-live-copy:focus-visible{opacity:1}.blog-playground-live-iframe{flex:1 1 auto;width:100%;height:100%;border:0;background:var(--blog-bg, #ffffff)}@media(max-width:700px){.blog-playground-live-row{flex-direction:column;height:auto}.blog-playground-live-editor,.blog-playground-live-preview{flex-grow:0;flex-basis:auto;min-width:0;width:100%}.blog-playground-live-editor{min-height:22rem}.blog-playground-live-panel{min-height:18rem}.blog-playground-live-preview,.blog-playground-live-iframe{min-height:14rem}}.blog-playground-error{margin:0;padding:var(--blog-space-sm, .5rem) var(--blog-space-md, 1rem);background:var(--blog-danger-bg, #e3e3e3);color:var(--blog-danger, #000000);border-left:3px solid var(--blog-danger, #000000);font-family:var(--blog-font-mono, monospace);font-size:.8125rem;white-space:pre-wrap;overflow-x:auto}