:root{--bpe-color-primary: #00b3a0;--bpe-color-primary-hover: #00a090;--bpe-color-text: #e5e7eb;--bpe-color-text-muted: rgb(113, 113, 122);--bpe-color-text-secondary: #9ca3af;--bpe-color-text-active: white;--bpe-color-text-on-primary: white;--bpe-color-border: rgba(255, 255, 255, .15);--bpe-color-bg-hover: rgba(255, 255, 255, .05);--bpe-color-button-secondary: #64748b;--bpe-color-spinner: var(--bpe-color-primary);--bpe-container-header-background: rgba(24, 24, 27, .8);--bpe-container-header-padding: .5rem;--bpe-container-header-title-color: var(--bpe-color-text-muted);--bpe-container-border-radius: .5rem;--bpe-container-content-min-height: 0;--bpe-color-terminal-bg: rgb(9, 9, 11);--bpe-color-tab-active: rgba(255, 255, 255, .08);--bpe-editor-font-family: "Fira Code", "JetBrains Mono", monospace;--bpe-editor-font-size: .85rem;--bpe-editor-text-color: rgba(255, 255, 255, .9);--bpe-editor-cursor-color: white;--bpe-editor-gutter-bg: rgba(0, 0, 0, .2);--bpe-editor-gutter-border: rgba(255, 255, 255, .15);--bpe-editor-gutter-text: rgba(255, 255, 255, .5);--bpe-editor-active-line-bg: rgba(255, 255, 255, .05);--bpe-editor-active-border: 2px solid var(--bpe-color-primary)}:root{--bpe-color-primary: rgb(16, 185, 129);--bpe-color-primary-hover: rgb(5, 150, 105);--bpe-color-text: rgb(228, 228, 231);--bpe-color-text-muted: rgb(113, 113, 122);--bpe-color-text-secondary: rgb(161, 161, 170);--bpe-color-border: rgba(255, 255, 255, .06);--bpe-color-bg-hover: rgba(255, 255, 255, .04);--bpe-color-panel-header-start: rgba(24, 24, 27, .8);--bpe-color-panel-header-end: rgba(24, 24, 27, .8);--bpe-color-terminal-bg: rgb(9, 9, 11);--bpe-color-tab-active: rgba(255, 255, 255, .04);--bpe-color-button-secondary: rgb(39, 39, 42);--bpe-shadow-panel: none;--bpe-shadow-header: none;--bpe-radius-panel: .5rem;--bpe-editor-font-family: "JetBrains Mono", "Fira Code", monospace;--bpe-editor-font-size: .8rem;--bpe-editor-gutter-bg: #0a0a0a;--bpe-editor-gutter-border: rgba(255, 255, 255, .06);--bpe-editor-gutter-text: rgba(255, 255, 255, .3);--bpe-editor-active-line-bg: rgba(255, 255, 255, .02);--bpe-editor-cursor-color: rgb(16, 185, 129)}.page-header.svelte-1du1zi4{margin-bottom:2rem}.page-header.svelte-1du1zi4 h1:where(.svelte-1du1zi4){font-size:2.25rem;font-weight:600;color:#fff;letter-spacing:-.025em;margin:.75rem 0 .5rem}.subtitle.svelte-1du1zi4{color:#a1a1aa;font-size:1rem;margin:0}.demo-container.svelte-1du1zi4{width:100%;height:calc(100vh - 180px);border-radius:.75rem;position:relative;display:flex;margin:0;overflow:hidden}@media(min-width:640px){.demo-container.svelte-1du1zi4{height:calc(100vh - 160px)}}@media(min-width:768px){.demo-container.svelte-1du1zi4{height:calc(100vh - 140px)}}@media(min-width:1024px){.demo-container.svelte-1du1zi4{height:calc(100vh - 180px)}}.demo-content.svelte-1du1zi4{display:flex;flex-direction:row;gap:.75rem;padding:.75rem;background-color:#ffffff05;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;height:100%;width:100%}.editor-panel.svelte-1du1zi4{display:flex;flex-direction:column;gap:.75rem;height:55%;width:100%;min-width:0}@media(min-width:768px){.editor-panel.svelte-1du1zi4{flex:3;height:100%}}.editor-slot.svelte-1du1zi4{display:flex;flex:1;min-height:0;overflow:hidden}.terminal-slot.svelte-1du1zi4{display:flex;height:30%;min-height:6rem;overflow:hidden}@media(min-width:640px){.terminal-slot.svelte-1du1zi4{min-height:8rem}}@media(min-width:768px){.terminal-slot.svelte-1du1zi4{height:35%}}.preview-panel.svelte-1du1zi4{display:flex;flex-direction:column;width:100%;height:45%;min-width:0}@media(min-width:768px){.preview-panel.svelte-1du1zi4{flex:1.7;height:100%}}.preview-slot.svelte-1du1zi4{display:flex;flex:1;min-height:0;overflow:hidden}.demo-content .panel{background-color:#18181b80}.demo-content .panel-header{background-color:#18181bcc;background-image:none}.terminal-slot .xterm-rows{font-size:.7rem!important}@media(min-width:640px){.terminal-slot .xterm-rows{font-size:.75rem!important}}@media(max-width:639px){:root{--bpe-editor-font-size: .7rem}}
