.control-panel{border-radius:var(--pg-radius-lg);border:1px solid var(--pg-border);background:var(--pg-card);z-index:1;flex-direction:column;gap:16px;padding:24px;display:flex;position:sticky;top:16px}@media (width<=768px){.control-panel{position:static}}.state-panel{z-index:auto;position:static;top:auto}.control-panel-header{justify-content:space-between;align-items:center;display:flex}.control-panel-title{color:var(--pg-fg);font-size:14px;font-weight:500}.control-panel-reset{color:var(--pg-primary-text);cursor:pointer;background:0 0;border:none;align-items:center;gap:4px;padding:0;font-size:12px;font-weight:500;transition:all .15s;display:inline-flex}@keyframes control-panel-reset-spin{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.control-panel-reset svg[data-spinning]{animation:.4s control-panel-reset-spin}@media (prefers-reduced-motion:reduce){.control-panel-reset svg[data-spinning]{animation:none}}.control-panel-reset:hover:not(:disabled){text-decoration:underline}.control-panel-reset:disabled{opacity:.3;cursor:default}.control-panel-body{flex-direction:column;gap:16px;display:flex}.control-group{flex-direction:column;gap:20px;display:flex}.control-group--toggles{grid-template-columns:1fr 1fr;gap:16px 12px;display:grid}.control-group--toggles .control-item[data-full-width]{grid-column:1/-1}@media (width<=640px){.control-group--toggles{grid-template-columns:1fr}}.control-divider{background:var(--pg-border);height:1px;margin:0}.control-item{flex-direction:column;gap:8px;min-width:0;transition:opacity .15s;display:flex}.control-item[data-dimmed]{opacity:.4}.control-item[data-dimmed]:hover,.control-item[data-dimmed]:focus-within{opacity:1}.control-item--full{width:100%}.control-item--full .state-visualizer{background:0 0;border:none;padding:0}.control-description{color:var(--pg-muted-fg);margin:-4px 0 0;font-size:11px;line-height:1.5}.control-item-header{justify-content:space-between;align-items:center;display:flex}.control-label{color:var(--pg-fg);font-family:IBM Plex Mono,monospace;font-size:14px;font-weight:500}.control-number-value{color:var(--pg-muted-fg);font-variant-numeric:tabular-nums;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:500}.control-value{width:100%;display:flex}.control-switch{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:10px;display:inline-flex}.control-switch-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.control-switch-track{background:var(--pg-border);border-radius:999px;width:36px;height:20px;transition:background .15s;display:inline-block;position:relative}.control-switch-thumb{background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px #0003}.control-switch-input:checked~.control-switch-track{background:var(--pg-primary)}.control-switch-input:checked~.control-switch-track .control-switch-thumb{transform:translate(16px)}.control-switch-input:focus-visible~.control-switch-track{box-shadow:0 0 0 2px oklch(from var(--pg-primary) l c h / .5)}.control-switch-label{color:var(--pg-fg);font-size:13px}.control-slider{appearance:none;background:linear-gradient(to right, var(--pg-primary) 0, var(--pg-primary) var(--slider-filled,0%), var(--pg-border) var(--slider-filled,0%), var(--pg-border) 100%);cursor:pointer;border-radius:999px;outline:none;width:100%;height:4px}.control-slider::-webkit-slider-thumb{appearance:none;background:var(--pg-primary);border:2px solid var(--pg-card);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.control-slider::-moz-range-thumb{background:var(--pg-primary);border:2px solid var(--pg-card);cursor:pointer;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0003}.control-slider:focus-visible{box-shadow:0 0 0 2px oklch(from var(--pg-primary) l c h / .25)}.control-input:focus-visible{box-shadow:0 0 0 2px oklch(from var(--pg-primary) l c h / .5);outline:none}.control-input{border:1px solid var(--pg-border);border-radius:var(--pg-radius);background:var(--pg-card);width:100%;color:var(--pg-fg);outline:none;padding:8px 12px;font-family:IBM Plex Mono,monospace;font-size:13px;transition:all .15s}.control-input:focus{border-color:var(--pg-primary);box-shadow:0 0 0 2px oklch(from var(--pg-primary) l c h / .25)}.control-input--number{max-width:120px}.control-code-section{flex-direction:column;gap:0;display:flex}.control-code-bar{justify-content:space-between;align-items:center;padding-top:12px;display:flex}.control-code-toggle{color:var(--pg-fg);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:0;font-size:13px;font-weight:500;display:inline-flex}.control-code-badge{border-radius:var(--pg-radius);background:oklch(from var(--pg-primary) l c h / .12);width:28px;height:28px;color:var(--pg-primary-text);justify-content:center;align-items:center;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;display:inline-flex}.control-code-actions{align-items:center;gap:8px;display:flex}.control-code-copy{border:1px solid var(--pg-border);border-radius:var(--pg-radius);background:var(--pg-card);width:28px;height:28px;color:var(--pg-muted-fg);cursor:pointer;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.control-code-copy:hover{color:var(--pg-fg);border-color:var(--pg-border-hover)}.control-code-section .story-code-chevron{color:var(--pg-muted-fg);cursor:pointer}.control-code-section .code-block{margin-top:12px}.control-code-section .code-block-copy{display:none}.control-icon-source{flex-direction:column;gap:8px;width:100%;display:flex;position:relative}.control-icon-source-trigger{border:1px solid var(--pg-border);border-radius:var(--pg-radius);background:var(--pg-card);width:100%;color:var(--pg-fg);cursor:pointer;outline:none;align-items:center;gap:8px;padding:8px 12px;font-family:IBM Plex Mono,monospace;font-size:13px;transition:all .15s;display:flex}.control-icon-source-trigger:hover{border-color:oklch(from var(--pg-primary) l c h / .5)}.control-icon-source-trigger:focus-visible{border-color:var(--pg-primary);box-shadow:0 0 0 2px oklch(from var(--pg-primary) l c h / .25)}.control-icon-source-avatar{object-fit:cover;background:var(--pg-bg);border-radius:999px;flex:none;width:20px;height:20px}.control-icon-source-avatar--fallback{background:var(--pg-primary);color:#fff;justify-content:center;align-items:center;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;display:inline-flex}.control-icon-source-label{text-overflow:ellipsis;white-space:nowrap;text-align:left;flex:auto;min-width:0;overflow:hidden}.control-icon-source-chevron{color:var(--pg-muted-fg);flex:none;transition:transform .15s}.control-icon-source-chevron.rotated{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.control-icon-source-trigger,.control-icon-source-chevron{transition:none}}.control-icon-source-list{z-index:10;border:1px solid var(--pg-border);border-radius:var(--pg-radius);background:var(--pg-card);margin:0;padding:4px;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;box-shadow:0 6px 16px #00000014}.control-icon-source-option{border-radius:var(--pg-radius);width:100%;color:var(--pg-fg);cursor:pointer;text-align:left;background:0 0;border:none;outline:none;align-items:center;gap:8px;padding:8px 10px;font-family:IBM Plex Mono,monospace;font-size:13px;display:flex}.control-icon-source-option:hover,.control-icon-source-option[data-focused]{background:oklch(from var(--pg-primary) l c h / .08)}.control-icon-source-option:focus-visible{box-shadow:inset 0 0 0 2px var(--pg-primary)}.control-icon-source-check{color:var(--pg-primary-text);flex:none}.control-icon-source-url{border:1px solid var(--pg-border);border-radius:var(--pg-radius);background:var(--pg-card);width:100%;color:var(--pg-fg);outline:none;padding:8px 12px;font-family:IBM Plex Mono,monospace;font-size:13px;transition:all .15s}.control-icon-source-url::placeholder{color:var(--pg-muted-fg)}.control-icon-source-url:focus{border-color:var(--pg-primary);box-shadow:0 0 0 2px oklch(from var(--pg-primary) l c h / .25)}.state-visualizer{border-radius:var(--pg-radius-lg);border:1px solid var(--pg-border);background:var(--pg-muted);align-items:center;gap:8px;padding:16px 12px;display:flex;position:relative}.state-viz-mask{--fade-left:0px;--fade-right:0px;min-width:0;-webkit-mask-image:linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);mask-image:linear-gradient(to right, transparent 0, black var(--fade-left), black calc(100% - var(--fade-right)), transparent 100%);opacity:0;flex:1;transition:--fade-left .2s,--fade-right .2s,opacity .18s}.state-visualizer[data-ready] .state-viz-mask{opacity:1}.state-viz-mask[data-can-prev]{--fade-left:24px}.state-viz-mask[data-can-next]{--fade-right:24px}.state-viz-embla{scrollbar-width:none;padding:6px 0;overflow:auto hidden}.state-viz-embla::-webkit-scrollbar{display:none}.state-viz-track{align-items:center;gap:8px;width:max-content;margin:0;padding:0;list-style:none;display:flex}.state-viz-item{flex:none;align-items:center;list-style:none;display:flex}.state-viz-arrow{border:1px solid var(--pg-border);background:var(--pg-card);width:28px;height:28px;color:var(--pg-fg);cursor:pointer;border-radius:9999px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .15s;display:flex}.state-viz-arrow:hover:not(:disabled){border-color:var(--pg-border-hover)}.state-viz-arrow:disabled{opacity:.3;cursor:default}.state-viz-arrow:focus-visible{outline:2px solid var(--pg-primary);outline-offset:2px}.state-node{border:1px solid var(--pg-border);background:var(--pg-bg);font:inherit;white-space:nowrap;cursor:default;border-radius:9999px;flex-shrink:0;align-items:center;gap:8px;padding:8px 16px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex}.state-node.clickable{cursor:pointer}.state-node.active{border-color:var(--state-color);background:var(--pg-bg);outline:3px solid color-mix(in srgb, var(--state-color) 25%, transparent);outline-offset:0}.state-node.past{border-color:var(--pg-border);background:var(--pg-bg)}.state-node.past:hover{border-color:var(--pg-border-hover)}.state-node.future{opacity:.4;border-color:var(--pg-border);background:var(--pg-bg)}.state-node.future:hover{opacity:.7;border-color:var(--pg-border-hover)}.state-dot{background:oklch(from var(--pg-muted-fg) l c h / .4);border-radius:50%;flex-shrink:0;width:8px;height:8px;transition:background .2s}.state-node.active .state-dot,.state-node.past .state-dot{background:var(--state-color)}.state-label{text-transform:capitalize;color:var(--pg-fg);font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:500}.state-node.active .state-label{color:var(--pg-fg);font-weight:600}.state-node.past .state-label,.state-node.future .state-label{color:var(--pg-muted-fg)}@media (prefers-reduced-motion:reduce){.state-node,.state-dot,.state-viz-arrow{transition:none}}.code-block{border:1px solid var(--pg-border);border-radius:var(--pg-radius-md);background:var(--pg-surface-sunken);position:relative;overflow:hidden}.code-block-copy{z-index:2;border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);background:oklch(from var(--pg-surface-sunken) l c h / .85);width:28px;height:28px;color:var(--pg-muted-fg);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);justify-content:center;align-items:center;padding:0;transition:all .15s;display:flex;position:absolute;top:12px;right:12px}.code-block-copy:hover{color:var(--pg-fg);border-color:var(--pg-border-hover)}.code-block-pre{color:var(--pg-fg);margin:0;padding:16px 48px 16px 20px;font-family:IBM Plex Mono,monospace;font-size:12px;line-height:1.6;overflow-x:auto}.responsive-toggle{background:var(--pg-secondary);border-radius:var(--pg-radius-sm);gap:0;padding:2px;display:flex}.responsive-toggle-btn{border-radius:calc(var(--pg-radius-sm) - 2px);color:var(--pg-muted-fg);cursor:pointer;background:0 0;border:none;padding:4px 8px;font-size:14px;line-height:1;transition:all .15s}.responsive-toggle-btn:hover{color:var(--pg-fg)}.responsive-toggle-btn.active{background:var(--pg-primary);color:var(--pg-primary-fg);box-shadow:0 1px 3px oklch(0% 0 0/.15)}.responsive-toggle-label{margin-left:2px;font-family:IBM Plex Mono,monospace;font-size:10px}.responsive-viewport{margin:0 auto;transition:max-width .3s}.props-table-wrapper{border-radius:var(--pg-radius);border:1px solid var(--pg-border);background:0 0;margin-top:8px;margin-bottom:20px;overflow:hidden}.props-table-header{cursor:pointer;justify-content:space-between;align-items:center;padding:10px 16px;transition:background .15s;display:flex}.props-table-header:hover{background:oklch(from var(--pg-accent) l c h / .3)}.props-table-toggle{color:var(--pg-muted-fg);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;font-size:12px;display:flex}.props-table-chevron{color:var(--pg-muted-fg);flex-shrink:0;transition:transform .2s}.props-table-chevron.expanded{transform:rotate(90deg)}.props-table-title{text-transform:uppercase;letter-spacing:.05em;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600}.props-table-count{border-radius:var(--pg-radius-sm);background:var(--pg-secondary);color:var(--pg-secondary-fg);padding:1px 6px;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:500}.props-table-import{color:var(--pg-muted-fg);cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:2px 8px;font-family:IBM Plex Mono,monospace;font-size:11px;transition:color .15s;display:flex}.props-table-import:hover{color:var(--pg-primary)}.props-table-copy-icon{transition:color .15s}.props-table-copy-icon.copied{color:var(--pg-emerald)}.props-table-required-count{border-radius:var(--pg-radius-sm);background:oklch(from var(--pg-destructive) l c h / .1);color:var(--pg-destructive);padding:1px 6px;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:500}.props-table-row-required td:first-child{border-left:2px solid var(--pg-destructive)}.props-table{border-collapse:collapse;width:100%;font-family:IBM Plex Mono,monospace;font-size:12px}.props-table thead tr{background:oklch(from var(--pg-muted) l c h / .3)}.props-table th{text-align:left;color:var(--pg-muted-fg);border-bottom:1px solid var(--pg-border);text-transform:uppercase;letter-spacing:.05em;padding:10px 16px;font-size:10px;font-weight:600}.props-table td{border-bottom:1px solid var(--pg-border);color:var(--pg-muted-fg);vertical-align:top;padding:12px 16px}.props-table tr:hover td{background:oklch(from var(--pg-accent) l c h / .2)}.props-table tr:last-child td{border-bottom:none}.props-table-name{white-space:nowrap;font-weight:500;color:var(--pg-fg)!important}.props-table-required{color:var(--pg-destructive);margin-left:2px;font-weight:700}.props-table-type{white-space:nowrap;color:var(--pg-violet)!important}.props-table-default{white-space:nowrap}.props-table-desc{font-family:system-ui,sans-serif;font-size:12px;line-height:1.4;color:var(--pg-muted-fg)!important}.search-overlay{z-index:9999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:oklch(0% 0 0/.6);justify-content:center;padding-top:15vh;display:flex;position:fixed;inset:0}.search-modal{border-radius:var(--pg-radius-lg);border:1px solid var(--pg-border);background:var(--pg-card);flex-direction:column;width:500px;max-height:400px;display:flex;overflow:hidden;box-shadow:0 20px 60px oklch(0% 0 0/.4)}.search-input-wrapper{border-bottom:1px solid var(--pg-border);align-items:center;gap:12px;padding:12px 16px;display:flex}.search-icon{opacity:.5;font-size:16px}.search-input{color:var(--pg-fg);background:0 0;border:none;outline:none;flex:1;font-family:system-ui,sans-serif;font-size:15px}.search-input::placeholder{color:var(--pg-muted-fg)}.search-kbd{border:1px solid var(--pg-border);background:var(--pg-muted);color:var(--pg-muted-fg);border-radius:4px;padding:2px 6px;font-family:IBM Plex Mono,monospace;font-size:10px}.search-results{max-height:300px;padding:8px;overflow-y:auto}.search-empty{text-align:center;color:var(--pg-muted-fg);padding:24px;font-size:13px}.search-result{border-radius:var(--pg-radius-sm);width:100%;color:var(--pg-fg);cursor:pointer;text-align:left;background:0 0;border:none;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:8px 12px;font-size:13px;transition:background .1s;display:flex}.search-result.active{background:var(--pg-accent)}.search-result-story{color:var(--pg-primary);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:500}.search-result-badge{border-radius:var(--pg-radius-sm);background:oklch(from var(--pg-primary) l c h / .12);color:var(--pg-primary);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;padding:1px 6px;font-size:10px;font-weight:600;display:inline-block}.search-result-section{font-weight:500}.search-result-desc{width:100%;color:var(--pg-muted-fg);font-size:11px}.search-group{margin-bottom:4px}.search-group-header{text-transform:uppercase;letter-spacing:.05em;color:var(--pg-primary);padding:6px 12px 2px;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:600}.search-group .search-result{padding-left:20px}.search-result-enter{color:var(--pg-muted-fg);flex-shrink:0;margin-left:auto;font-size:12px}.search-footer{border-top:1px solid var(--pg-border);background:oklch(from var(--pg-muted) l c h / .5);align-items:center;gap:16px;padding:8px 16px;display:flex}.search-footer-hint{color:var(--pg-muted-fg);align-items:center;gap:6px;font-size:10px;display:flex}.search-footer-hint kbd{border:1px solid var(--pg-border);background:var(--pg-bg);border-radius:3px;align-items:center;height:16px;padding:0 4px;font-family:IBM Plex Mono,monospace;font-size:10px;display:inline-flex}.search-trigger{border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);color:var(--pg-muted-fg);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:4px 10px;font-size:12px;transition:all .15s;display:flex}.search-trigger:hover{border-color:var(--pg-border-hover)}.search-trigger kbd{border:1px solid var(--pg-border);background:var(--pg-muted);border-radius:3px;padding:1px 4px;font-family:IBM Plex Mono,monospace;font-size:10px}.side-by-side{grid-template-columns:1fr 1fr;gap:16px;display:grid}.side-by-side-pane{border-radius:var(--pg-radius);border:1px solid var(--pg-border);padding:16px}.side-by-side-pane--dark{color:oklch(95% 0 0);background:oklch(14.5% 0 0)}.side-by-side-pane--light{color:oklch(14.5% 0 0);background:oklch(100% 0 0);border-color:oklch(90% 0 0)}.side-by-side-label{text-transform:uppercase;letter-spacing:.05em;color:var(--pg-muted-fg);margin-bottom:8px;font-size:10px;font-weight:500}.playground .tx-root{background:0 0}:root{--pg-bg:oklch(14.5% 0 0);--pg-fg:oklch(95% 0 0);--pg-card:oklch(17.5% 0 0);--pg-card-fg:oklch(95% 0 0);--pg-surface-elevated:oklch(20% 0 0);--pg-surface-sunken:oklch(12% 0 0);--pg-primary:oklch(51.1% .262 276);--pg-primary-text:oklch(72% .18 276);--pg-primary-fg:oklch(100% 0 0);--pg-secondary:oklch(20% 0 0);--pg-secondary-fg:oklch(95% 0 0);--pg-muted:oklch(20% 0 0);--pg-muted-fg:oklch(55% 0 0);--pg-accent:oklch(20% 0 0);--pg-accent-fg:oklch(95% 0 0);--pg-destructive:oklch(50% .2 27);--pg-border:oklch(22% 0 0);--pg-border-hover:oklch(30% 0 0);--pg-input:oklch(18% 0 0);--pg-sidebar:oklch(20% 0 0);--pg-sidebar-fg:oklch(95% 0 0);--pg-sidebar-accent:oklch(25% 0 0);--pg-sidebar-accent-fg:oklch(95% 0 0);--pg-sidebar-border:oklch(22% 0 0);--pg-violet:oklch(58.5% .233 292.717);--pg-indigo:oklch(51.1% .262 276);--pg-emerald:oklch(69.6% .17 162.48);--pg-amber:oklch(82.8% .189 84.429);--pg-radius:.5rem;--pg-radius-sm:calc(var(--pg-radius) - 2px);--pg-radius-md:var(--pg-radius);--pg-radius-lg:calc(var(--pg-radius) + 2px)}.bg-light{--pg-bg:oklch(98.5% 0 0);--pg-fg:oklch(14.5% 0 0);--pg-card:oklch(100% 0 0);--pg-card-fg:oklch(14.5% 0 0);--pg-surface-elevated:oklch(100% 0 0);--pg-surface-sunken:oklch(96% 0 0);--pg-primary:oklch(51.1% .262 276);--pg-primary-text:oklch(51.1% .262 276);--pg-primary-fg:oklch(100% 0 0);--pg-secondary:oklch(96% 0 0);--pg-secondary-fg:oklch(20.5% 0 0);--pg-muted:oklch(96% 0 0);--pg-muted-fg:oklch(45% 0 0);--pg-accent:oklch(96% 0 0);--pg-accent-fg:oklch(20.5% 0 0);--pg-destructive:oklch(57.7% .245 27.325);--pg-border:oklch(90% 0 0);--pg-border-hover:oklch(82% 0 0);--pg-input:oklch(100% 0 0);--pg-sidebar:oklch(96% 0 0);--pg-sidebar-fg:oklch(14.5% 0 0);--pg-sidebar-accent:oklch(92% 0 0);--pg-sidebar-accent-fg:oklch(20.5% 0 0);--pg-sidebar-border:oklch(90% 0 0);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box;margin:0;padding:0}body{color:var(--pg-fg);background:oklch(98.5% 0 0);font-family:system-ui,-apple-system,sans-serif}@media (prefers-color-scheme:dark){body{background:oklch(14.5% 0 0)}}.playground{grid-template-columns:256px 1fr;height:100vh;display:grid;overflow:hidden}.playground-sidebar{background:var(--pg-sidebar);border-right:1px solid var(--pg-sidebar-border);flex-direction:column;height:100vh;display:flex;overflow:hidden}.playground-brand{align-items:center;gap:10px;padding:20px 20px 16px;display:flex}.playground-brand-link{color:inherit;font:inherit;cursor:pointer;border-radius:var(--pg-radius-sm);background:0 0;border:0;flex:1;align-items:center;gap:10px;padding:0;transition:opacity .15s;display:flex}.playground-brand-link:hover{opacity:.7}.playground-brand-icon{border-radius:var(--pg-radius-sm);flex-shrink:0;width:28px;height:28px;display:block}.playground-logo{color:var(--tx-color-primary);letter-spacing:-.01em;font-family:IBM Plex Mono,monospace;font-size:16px;font-weight:700}.playground-nav{flex:1;margin-top:8px;padding:0 12px 16px;overflow-y:auto}.playground-nav-item{border-radius:var(--pg-radius);width:100%;color:var(--pg-sidebar-fg);text-align:left;cursor:pointer;background:0 0;border:none;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;transition:background .15s;display:flex}.playground-nav-item:hover{background:oklch(from var(--pg-sidebar-accent) l c h / .5)}.playground-nav-item.active{background:var(--pg-sidebar-accent);color:var(--pg-sidebar-accent-fg);font-weight:500}.playground-nav-count{color:var(--pg-muted-fg);opacity:.6;font-variant-numeric:tabular-nums;font-family:IBM Plex Mono,monospace;font-size:11px}.playground-nav-item.active .playground-nav-count{color:var(--pg-sidebar-fg);opacity:.6}.playground-nav-sub{opacity:.85;padding-left:28px;font-size:12px}.playground-nav-sub.active{opacity:1}.playground-sidebar-footer{border-top:1px solid var(--pg-sidebar-border);flex-direction:column;gap:8px;padding:16px;display:flex}.playground-sidebar-github{border-radius:var(--pg-radius);color:var(--pg-muted-fg);align-items:center;gap:8px;padding:8px 12px;font-size:13px;text-decoration:none;transition:background .15s,color .15s;display:flex}.playground-sidebar-github:hover{background:oklch(from var(--pg-sidebar-accent) l c h / .5);color:var(--pg-fg)}.playground-sidebar-version{color:var(--pg-muted-fg);padding:0 12px;font-family:IBM Plex Mono,monospace;font-size:11px}.playground-nav-group{flex-direction:column;gap:2px;margin-bottom:12px;display:flex}.playground-nav-group-label{text-transform:uppercase;letter-spacing:.06em;color:var(--pg-muted-fg);padding:4px 12px;font-size:10px;font-weight:600}.playground-breadcrumb{color:var(--pg-muted-fg);align-items:center;gap:6px;margin-bottom:16px;font-size:12px;display:flex}.playground-breadcrumb-link{color:inherit;font:inherit;cursor:pointer;background:0 0;border:0;padding:0;transition:color .15s}.playground-breadcrumb-link:hover{color:var(--pg-fg)}.playground-breadcrumb-sep{opacity:.5}.playground-breadcrumb-current{color:var(--pg-fg);font-weight:500}@media (width<=768px){.playground-breadcrumb{display:none}}.playground-main{background:var(--pg-bg);color:var(--pg-fg);transition:background .2s;position:relative;overflow-y:auto}.playground-toolbar-row{z-index:20;background:var(--pg-bg);border-bottom:1px solid var(--pg-border);align-items:center;gap:12px;margin:0 0 32px;padding:12px 40px;display:flex;position:sticky;top:0}.playground-content{padding:0 40px 32px}.playground-title-row{align-items:center;gap:12px;margin-bottom:24px;display:flex}.playground-title{letter-spacing:-.01em;color:var(--pg-fg);font-size:28px;font-weight:700}.bundle-badges{gap:6px;display:flex}.bundle-badge{border-radius:var(--pg-radius-sm);border:1px solid oklch(from var(--pg-emerald) l c h / .2);background:oklch(from var(--pg-emerald) l c h / .1);color:var(--pg-emerald);padding:4px 8px;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:500}.playground-description{color:var(--pg-muted-fg);flex-direction:column;gap:10px;margin:-16px 0 20px;font-size:14px;line-height:1.5;display:flex}.playground-description-summary{max-width:680px;color:var(--pg-fg);margin:0}.playground-description-features{max-width:680px;color:var(--pg-muted-fg);margin:0;padding-left:18px;list-style:outside}.playground-description-features li{margin:2px 0}.playground-description-when{color:var(--pg-muted-fg);border-left:2px solid var(--pg-primary);background:var(--pg-surface-sunken);border-radius:0 4px 4px 0;margin:0;padding:8px 12px;font-size:13px}.playground-description-when-label{text-transform:uppercase;letter-spacing:.06em;color:var(--pg-primary);margin-right:8px;font-size:11px;font-weight:700;display:inline-block}.playground-docs-link{color:var(--pg-primary);white-space:nowrap;align-items:center;gap:4px;font-weight:500;text-decoration:none;display:inline-flex}.playground-docs-link:hover{text-decoration:underline}.playground-toolbar{flex-wrap:wrap;flex:1;align-items:center;gap:24px;padding:4px 0;display:flex}.playground-toolbar-group{align-items:center;gap:12px;display:flex}.playground-toolbar-divider{background:var(--pg-border);width:1px;height:24px}.playground-toolbar-label{color:var(--pg-muted-fg);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:500}.playground-toolbar-buttons{border-radius:var(--pg-radius);background:var(--pg-muted);gap:0;padding:2px;display:flex}.playground-toolbar-btn{border-radius:calc(var(--pg-radius) - 2px);color:var(--pg-muted-fg);cursor:pointer;text-transform:capitalize;background:0 0;border:none;padding:6px 12px;font-size:12px;font-weight:500;transition:all .15s}.playground-toolbar-btn:hover{color:var(--pg-fg)}.playground-toolbar-btn.active{background:var(--pg-card);color:var(--pg-fg);box-shadow:0 1px 2px oklch(0% 0 0/.08),0 1px 1px oklch(0% 0 0/.06)}.playground-color-buttons{background:0 0;align-items:center;gap:10px;padding:0;display:flex}.playground-color-btn{cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;padding:0;transition:all .15s;display:flex}.playground-color-btn:hover{transform:scale(1.1)}.playground-color-btn.active{box-shadow:0 0 0 2px var(--pg-bg), 0 0 0 4px oklch(51.1% .262 276), 0 0 12px oklch(51.1% .262 276/.3)}.playground-color-dot{border-radius:50%;width:28px;height:28px}.playground-surface{border:1px solid var(--pg-border);border-radius:var(--pg-radius-lg);background:var(--pg-muted);margin-bottom:16px;overflow:hidden}.playground-surface>*+*{border-top:1px solid var(--pg-border)}.playground-surface .state-visualizer,.playground-surface .control-panel{background:0 0;border:none;border-radius:0;margin:0}.playground-stage{background:var(--pg-bg);justify-content:center;align-items:center;min-height:140px;padding:32px;display:flex}.story-section{border-radius:var(--pg-radius-lg);border:1px solid var(--pg-border);background:var(--pg-card);margin:0 0 16px;box-shadow:0 1px 3px oklch(0% 0 0/.04),0 1px 2px oklch(0% 0 0/.02)}.story-section-bar{border-top-left-radius:inherit;border-top-right-radius:inherit;background:0 0;justify-content:space-between;align-items:flex-start;gap:16px;padding:20px 20px 16px;display:flex}.story-section-meta{flex-direction:column;gap:4px;min-width:0;display:flex}.story-section h3{color:var(--pg-fg);margin:0;font-size:16px;font-weight:600}.story-section-title-code{text-transform:none;letter-spacing:0;color:var(--pg-primary);background:color-mix(in oklch, var(--pg-primary) 10%, transparent);vertical-align:baseline;border-radius:4px;padding:1px 6px;font-family:IBM Plex Mono,monospace;font-size:.92em;font-weight:600}.story-section-title[data-linkable]{cursor:pointer}.story-section-anchor{opacity:0;color:var(--pg-primary);margin-left:6px;transition:opacity .15s}.story-section-title[data-linkable]:hover .story-section-anchor{opacity:1}.story-section-desc{color:var(--pg-muted-fg);margin:0;font-size:12px;line-height:1.5}.story-section-use-when{color:var(--pg-muted-fg);margin:0;font-size:12px;font-style:italic;line-height:1.5}.story-section-use-when em{color:var(--pg-fg);font-style:normal;font-weight:600}.story-provider-placeholder{border:1px dashed var(--pg-border);border-radius:var(--pg-radius-md);background:color-mix(in oklch, var(--pg-primary) 4%, transparent);flex-direction:column;align-items:center;gap:12px;padding:24px;display:flex}.story-provider-placeholder-label{color:var(--pg-primary);font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600}.story-provider-placeholder-tree{align-items:center;gap:8px;display:flex}.story-provider-placeholder-step{background:var(--pg-card);border:1px solid var(--pg-border);color:var(--pg-muted-fg);border-radius:999px;padding:4px 10px;font-size:12px}.story-provider-placeholder-tree-vertical{white-space:pre;flex-direction:column;align-items:stretch;gap:4px;font-family:IBM Plex Mono,ui-monospace,Menlo,monospace}.story-provider-placeholder-tree-vertical .story-provider-placeholder-step{border-radius:var(--pg-radius-sm);text-align:left;font-size:12px}.story-file-label{border-radius:var(--pg-radius-sm);background:color-mix(in oklch, var(--pg-primary) 6%, transparent);border:1px solid var(--pg-border);color:var(--pg-fg);align-items:center;gap:8px;margin:16px 0 6px;padding:4px 10px;font-family:IBM Plex Mono,ui-monospace,Menlo,monospace;font-size:12px;display:inline-flex}.story-file-label-runtime{text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:1px 6px;font-size:10px;font-weight:600}.story-file-label-runtime[data-runtime=client]{background:color-mix(in oklch, var(--pg-primary) 14%, transparent);color:var(--pg-primary)}.story-file-label-runtime[data-runtime=server]{background:color-mix(in oklch, currentcolor 10%, transparent);color:var(--pg-muted-fg)}.story-code-toggle{color:var(--pg-primary-text);cursor:pointer;white-space:nowrap;background:0 0;border:none;flex-shrink:0;align-items:center;gap:4px;padding:0;font-size:12px;font-weight:500;transition:color .15s;display:inline-flex}.story-code-toggle:hover{text-decoration:underline}.story-code-chevron{transition:transform .2s}.story-code-chevron.rotated{transform:rotate(180deg)}.story-description{color:var(--pg-muted-fg);margin-bottom:12px;font-size:13px}.story-flow-narrative{color:var(--pg-muted-fg);border-radius:var(--pg-radius);background:var(--pg-card);border:1px solid var(--pg-border);margin:0;padding:8px 12px;font-size:12px;line-height:1.45}.story-section-stage{background:var(--pg-surface-sunken);border:1px solid var(--pg-border);border-radius:var(--pg-radius-md);flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:80px;margin:0 20px;padding:32px 24px;display:flex}.story-section .code-block{margin:16px 20px 20px}.story-section-stage+.code-block{margin-top:16px}.story-section--headless .story-section-stage{background:0 0}.story-card{border-radius:var(--pg-radius-lg);border:1px solid var(--pg-border);background:0 0;padding:24px;transition:border-color .2s}.story-card:hover{border-color:var(--pg-border-hover)}.story-card--headless{border-style:dashed}.story-live-layout{grid-template-columns:1fr;align-items:start;gap:24px;display:grid}@media (width>=1024px){.story-live-layout{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}}.story-live-left{flex-direction:column;gap:16px;min-width:0;display:flex}.story-live-right{min-width:0}.story-live-preview-card{border-radius:var(--pg-radius-lg);border:1px solid var(--pg-border);background:var(--pg-card);justify-content:center;align-items:center;padding:48px 32px;display:flex}.story-live-preview-inner{flex-direction:column;align-items:center;gap:16px;width:100%;max-width:28rem;margin:0 auto;display:flex}.story-live-preview-inner>.tx-txb,.story-live-preview-inner>.tx-fs,.story-live-preview-inner>.tx-fp{align-self:stretch}@media (width>=1024px){.story-live-right .control-panel{position:sticky;top:16px}}.story-tabs{background:var(--pg-muted);border-radius:var(--pg-radius);gap:0;width:fit-content;margin-bottom:12px;padding:2px;display:flex}.story-tab{border-radius:calc(var(--pg-radius) - 2px);color:var(--pg-muted-fg);cursor:pointer;text-transform:capitalize;background:0 0;border:none;padding:6px 14px;font-size:12px;font-weight:500;transition:all .15s}.story-tab:hover{color:var(--pg-fg)}.story-tab.active{background:var(--pg-card);color:var(--pg-fg);box-shadow:0 1px 2px oklch(0% 0 0/.08),0 1px 1px oklch(0% 0 0/.06)}.theme-info{background:var(--tx-color-bg-secondary);color:var(--tx-color-text);border-radius:6px;margin-top:16px;padding:12px;font-family:IBM Plex Mono,monospace;font-size:13px;line-height:1.8}.theme-info-actions{gap:4px;margin-top:8px;display:flex}.theme-info-btn{border:1px solid var(--tx-color-border);color:var(--tx-color-text);cursor:pointer;background:0 0;border-radius:4px;padding:4px 12px;font-size:12px;transition:border-color .15s}.theme-info-btn:hover{border-color:var(--pg-primary)}.headless-wallet-buttons{flex-wrap:wrap;gap:4px;display:flex}.headless-wallet-btn{border-radius:var(--pg-radius-sm);border:1px solid var(--pg-border);color:var(--pg-fg);cursor:pointer;background:0 0;padding:6px 12px;font-size:13px;transition:border-color .15s}.headless-wallet-btn:hover{border-color:var(--pg-primary)}.headless-wallet-info{font-family:IBM Plex Mono,monospace;font-size:14px}.headless-wallet-disconnect{border:1px solid var(--pg-border);border-radius:var(--pg-radius-sm);color:var(--pg-fg);cursor:pointer;background:0 0;margin-top:8px;padding:4px 8px}.headless-tx{flex-direction:column;gap:8px;display:flex}.headless-tx-hash{color:var(--pg-muted-fg);font-family:IBM Plex Mono,monospace;font-size:12px}.headless-tx-error{color:var(--pg-destructive);font-size:13px}.headless-tx-actions{gap:4px;display:flex}.headless-tx-btn{border-radius:var(--pg-radius-sm);border:1px solid var(--pg-primary);background:oklch(from var(--pg-primary) l c h / .1);color:var(--pg-primary);cursor:pointer;padding:6px 14px;font-size:13px;font-weight:500;transition:all .15s}.headless-tx-btn:hover{background:oklch(from var(--pg-primary) l c h / .2)}.headless-tx-btn--retry{background:var(--pg-destructive);border-color:var(--pg-destructive);color:oklch(100% 0 0)}.headless-tx-btn--success{background:var(--pg-emerald);border-color:var(--pg-emerald);color:oklch(100% 0 0)}.headless-tx-link{color:var(--pg-primary);font-size:12px}.custom-render-row{align-items:center;gap:8px;display:flex}.custom-render-address{font-family:IBM Plex Mono,monospace}.custom-render-balance{color:var(--pg-muted-fg)}.custom-render-btn{border-radius:var(--pg-radius);border:1px solid var(--pg-primary);background:oklch(from var(--pg-primary) l c h / .1);color:var(--pg-primary);cursor:pointer;padding:8px 16px;font-size:13px;font-weight:500;transition:all .15s}.custom-render-btn:hover{background:oklch(from var(--pg-primary) l c h / .15)}.custom-render-disconnect{border-radius:var(--pg-radius-sm);border:1px solid var(--pg-border);color:var(--pg-fg);cursor:pointer;background:0 0;padding:4px 8px}.custom-tx-render{border:1px solid var(--pg-border);border-radius:var(--pg-radius);flex-direction:column;gap:8px;padding:16px;display:flex}.custom-tx-hash{color:var(--pg-muted-fg);font-family:IBM Plex Mono,monospace;font-size:12px}.custom-tx-link{color:var(--pg-primary);font-size:12px}.custom-balance{flex-direction:column;gap:4px;display:flex}.custom-balance-amount{font-size:18px;font-weight:600}.custom-balance-fiat{color:var(--pg-muted-fg);font-size:14px}.story-row{gap:16px;display:flex}.story-empty{border-radius:var(--pg-radius-sm);border:1px dashed var(--pg-border);color:var(--pg-muted-fg);align-items:center;gap:8px;padding:12px 16px;font-family:IBM Plex Mono,monospace;font-size:13px;display:flex}.story-empty-dot{background:var(--pg-border-hover);border-radius:50%;flex-shrink:0;width:6px;height:6px}.playground-nav-item:focus-visible,.playground-toolbar-btn:focus-visible,.playground-color-btn:focus-visible,.story-code-toggle:focus-visible,.search-trigger:focus-visible,.headless-wallet-btn:focus-visible,.headless-tx-btn:focus-visible,.custom-render-btn:focus-visible,.custom-render-disconnect:focus-visible,.headless-wallet-disconnect:focus-visible,.theme-info-btn:focus-visible{outline:2px solid var(--pg-primary);outline-offset:2px}.story-info-grid{border-radius:var(--pg-radius-sm);border:1px solid var(--pg-border);background:var(--pg-surface-sunken);grid-template-columns:auto 1fr;gap:4px 12px;padding:12px 16px;font-family:IBM Plex Mono,monospace;font-size:13px;display:grid}.story-info-key{color:var(--pg-muted-fg)}.story-info-value{color:var(--pg-fg);font-weight:500}.playground-sidebar-overlay,.playground-sidebar-close,.playground-mobile-menu{display:none}.search-icon-svg{opacity:.5;font-size:14px}@media (width<=1023px){.playground{grid-template-columns:1fr}.playground-sidebar{z-index:50;width:256px;transition:transform .2s ease-out;position:fixed;top:0;left:0;transform:translate(-100%)}.playground-sidebar.open{transform:translate(0)}.playground-sidebar-overlay{z-index:40;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:oklch(0% 0 0/.5);display:block;position:fixed;inset:0}.playground-sidebar-close{border-radius:var(--pg-radius-sm);width:28px;height:28px;color:var(--pg-sidebar-fg);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin-left:auto;font-size:14px;display:flex}.playground-sidebar-close:hover{background:var(--pg-sidebar-accent)}.playground-mobile-menu{border-radius:var(--pg-radius-sm);width:36px;height:36px;color:var(--pg-fg);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:20px;display:flex}.playground-mobile-menu:hover{background:var(--pg-accent)}.playground-toolbar-row{padding:12px 16px}.playground-content{padding:0 16px 32px}.playground-toolbar-divider{display:none}}.playground-nav::-webkit-scrollbar{width:6px}.playground-main::-webkit-scrollbar{width:6px}.playground-nav::-webkit-scrollbar-track{background:0 0}.playground-main::-webkit-scrollbar-track{background:0 0}.playground-nav::-webkit-scrollbar-thumb{background:var(--pg-border);border-radius:3px}.playground-main::-webkit-scrollbar-thumb{background:var(--pg-border);border-radius:3px}.playground-nav::-webkit-scrollbar-thumb:hover{background:var(--pg-border-hover)}.playground-main::-webkit-scrollbar-thumb:hover{background:var(--pg-border-hover)}@media (prefers-reduced-motion:reduce){.playground-main,.story-card,.story-code-toggle,.playground-nav-item,.playground-toolbar-btn,.custom-render-btn,.headless-tx-btn,.headless-wallet-btn,.responsive-viewport{transition:none}}