.pg-mode-tabs{display:flex;gap:.25rem;margin-bottom:1rem}.pg-mode-tab{padding:.5rem 1rem;font-size:.8rem;font-weight:600;color:#6b7280;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;transition:all .14s ease;font-family:inherit}.pg-mode-tab:hover{color:#9ca3af;background:#ffffff14}.pg-mode-tab.active{color:#3ac530;background:#3ac5301f;border-color:#3ac53059}.pg-split{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;width:100%;height:calc(100vh - 240px);min-height:500px}@media(max-width:900px){.pg-split{grid-template-columns:1fr;height:auto;min-height:auto}}.pg-code-panel{background:#0006;border:1px solid rgba(255,255,255,.08);border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.pg-code-header{display:flex;align-items:center;justify-content:space-between;padding:0;border-bottom:1px solid rgba(255,255,255,.06);background:#ffffff05}.pg-fw-tabs{display:flex;align-items:stretch;gap:0;overflow-x:auto;flex:1}.pg-fw-tab{padding:.65rem .9rem;font-size:.78rem;font-weight:600;color:#5c6370;background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .14s ease;font-family:inherit;white-space:nowrap}.pg-fw-tab:hover{color:#9ca3af}.pg-fw-tab.active{color:#3ac530;border-bottom-color:#3ac530}.pg-fw-label{font-size:.78rem;font-weight:600;color:#5c6370;padding:0 .25rem}.pg-copy-btn{padding:.5rem .75rem;font-size:.72rem;font-weight:600;color:#8b919a;background:none;border:none;border-left:1px solid rgba(255,255,255,.06);cursor:pointer;transition:all .14s ease;font-family:inherit;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.pg-copy-btn:hover{color:#fff;background:#ffffff0a}.pg-copy-btn.copied{color:#3ac530}.pg-code-body{flex:1;padding:1rem 1.25rem;overflow:auto}.pg-code-body pre{margin:0;font-family:JetBrains Mono,Fira Code,SF Mono,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.6;color:#c8cdd5;white-space:pre;tab-size:2}.pg-preview-panel{border:1px solid rgba(255,255,255,.08);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;position:relative}.pg-preview-header{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);background:#ffffff05}.pg-preview-tab{font-size:.78rem;font-weight:600;color:#8b919a;text-transform:uppercase;letter-spacing:.05em}.pg-preview-viewport{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:background .2s ease;transform:translateZ(0)}.pg-preview-grid{position:absolute;inset:0;opacity:.03;background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}.pg-preview-placeholder{text-align:center;z-index:1}.pg-preview-placeholder-icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.3}.pg-preview-placeholder-text{font-size:.85rem;font-weight:500;opacity:.4}.pg-notch-pill-icon{font-size:.9rem;opacity:.9}.pg-notch-content{padding:.5rem 1rem;font-size:.85rem;color:inherit}.pg-menu-wrap{display:flex;align-items:center;justify-content:center;width:100%;z-index:1}.pg-menu-wrap-pill{min-height:120px}.pg-tab-layout{position:absolute;inset:0;display:grid;grid-template-columns:auto 1fr;z-index:1}.pg-tab-layout-horizontal{grid-template-columns:1fr;grid-template-rows:auto 1fr}.pg-tab-sidebar{display:flex;flex-direction:column;justify-content:center;min-width:120px;overflow:hidden;padding:1rem .65rem}.pg-tab-layout-horizontal .pg-tab-sidebar{padding:.65rem 1rem}.pg-tab-sidebar [data-fluix-menu]{background:transparent;padding:0}.pg-tab-sidebar [data-fluix-menu][data-variant=tab]{display:flex;width:100%;flex:1}.pg-tab-sidebar [data-fluix-menu][data-variant=tab] [data-fluix-menu-list],.pg-tab-sidebar [data-fluix-menu][data-variant=tab] [data-fluix-menu-item]{width:100%}.pg-tab-sidebar:has([data-fluix-menu][data-variant=tab]){justify-content:flex-start;padding-top:1rem}.pg-tab-sidebar [data-fluix-menu-item][data-state=active]{color:var(--pg-tab-active-color, #fff)}.pg-tab-content{padding:1.5rem;overflow:auto}.pg-tab-breadcrumb{font-size:.72rem;font-family:JetBrains Mono,Fira Code,monospace;margin-bottom:.75rem;opacity:.6}.pg-tab-title{font-size:1.1rem;font-weight:700;margin:0 0 .5rem}.pg-tab-desc{font-size:.82rem;line-height:1.5;margin:0;max-width:280px}.pg-orient-icon{display:block;border-radius:999px;border:1px solid rgba(255,255,255,.18);position:relative;background:#0f172ae6}.pg-orient-icon:before{content:"";position:absolute;inset:3px;border-radius:inherit;background:#77c46f}.pg-orient-horizontal{width:28px;height:14px}.pg-orient-vertical{width:14px;height:28px}.pg-controls{border-top:1px solid rgba(255,255,255,.06);padding:.75rem 1rem;background:#0000004d;display:flex;flex-direction:column;gap:.6rem;position:relative}.pg-ctrl-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.pg-ctrl-label{font-size:.68rem;font-weight:700;color:#5c6370;text-transform:uppercase;letter-spacing:.06em;width:52px;flex-shrink:0}.pg-chip{border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:.25rem .55rem;font-size:.72rem;font-weight:600;cursor:pointer;background:#ffffff0a;color:#8b919a;transition:all .12s ease;font-family:inherit}.pg-chip:hover{color:#c8cdd5;background:#ffffff14}.pg-chip.active{background:#3ac53026;color:#3ac530;border-color:#3ac5304d}.pg-ctrl-divider{width:1px;height:16px;background:#ffffff14;margin:0 .25rem;flex-shrink:0}.pg-fire-btn{border:1px solid oklch(.723 .219 142.136 / .3);border-radius:8px;padding:.3rem .7rem;font-size:.72rem;font-weight:700;cursor:pointer;background:#3ac5301a;color:#3ac530;transition:all .12s ease;font-family:inherit}.pg-fire-btn:hover{background:#3ac53033;border-color:#3ac53080}.pg-fire-btn.active{background:#3ac530;color:#07090d;border-color:#3ac530}.pg-clear-btn{border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:.3rem .7rem;font-size:.72rem;font-weight:600;cursor:pointer;background:#ffffff0a;color:#6b7280;transition:all .12s ease;font-family:inherit}.pg-clear-btn:hover{color:#ef4444;border-color:#ef44444d}.pg-kw{color:oklch(.75 .15 280)}.pg-str{color:#77d16e}.pg-fn{color:oklch(.82 .14 220)}.pg-cm{color:#5c6370;font-style:italic}.pg-dec{color:#f6ab6b}.pg-tag{color:#f98691}.playground-body{--playground-bg: #07090d;--playground-text: #e5e7eb;--playground-muted: #9ca3af;min-height:100vh;margin:0;background:radial-gradient(ellipse 60% 50% at 15% 20%,rgba(99,102,241,.35),transparent 70%),radial-gradient(ellipse 50% 40% at 80% 75%,rgba(236,72,153,.3),transparent 70%),radial-gradient(ellipse 45% 35% at 60% 10%,rgba(56,189,248,.25),transparent 70%),radial-gradient(ellipse 40% 30% at 40% 85%,rgba(16,185,129,.2),transparent 70%),var(--playground-bg);color:var(--playground-text);font-family:Inter,system-ui,-apple-system,sans-serif}.playground-page:where(.astro-5wq3ak55){display:flex;flex-direction:column;min-height:100vh}.playground-nav:where(.astro-5wq3ak55){display:flex;align-items:center;justify-content:space-between;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.06)}.playground-nav-logo:where(.astro-5wq3ak55){font-size:1.3rem;font-weight:700;color:var(--playground-text);text-decoration:none;letter-spacing:-.02em}.playground-nav-links:where(.astro-5wq3ak55){display:flex;gap:2rem;align-items:center}.playground-nav-links:where(.astro-5wq3ak55) a:where(.astro-5wq3ak55){color:var(--playground-muted);text-decoration:none;font-size:.95rem;font-weight:500;transition:color .15s}.playground-nav-links:where(.astro-5wq3ak55) a:where(.astro-5wq3ak55):hover{color:var(--playground-text)}.playground-content:where(.astro-5wq3ak55){flex:1;display:flex;flex-direction:column;align-items:stretch!important;justify-content:flex-start!important;padding:1.5rem 2rem 3rem!important;max-width:1200px;margin:0 auto;width:100%}.playground-title:where(.astro-5wq3ak55){font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem;text-align:center}.playground-subtitle:where(.astro-5wq3ak55){color:var(--playground-muted);font-size:1rem;margin:0 0 1rem;text-align:center}.playground-widget:where(.astro-5wq3ak55){width:100%!important;position:relative;z-index:1;margin-top:0!important;display:block!important;overflow:visible!important;min-height:380px}@media(max-width:640px){.playground-content:where(.astro-5wq3ak55){padding:1.5rem}.playground-nav-links:where(.astro-5wq3ak55){gap:1rem}}