.clean-demo-container:where(.astro-3ucfoa3h){font-family:var(--sl-font-system,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);margin:2.5rem 0}.demo-display-title:where(.astro-3ucfoa3h){color:var(--sl-color-text,#1e293b);letter-spacing:-.02em;margin:0 0 1rem!important;font-size:1.5rem!important;font-weight:600!important}.demo-tab-header:where(.astro-3ucfoa3h){justify-content:space-between;align-items:center;height:40px;margin-bottom:.75rem;display:flex}.tab-button-group:where(.astro-3ucfoa3h){align-items:center;gap:.3rem;height:40px;display:flex}.tab-action-btn:where(.astro-3ucfoa3h){text-transform:uppercase;letter-spacing:.05em;color:#64748b;cursor:pointer;box-sizing:border-box;background-color:#eff6ff;border:1px solid #c4cce0;border-radius:6px;justify-content:center;align-items:center;gap:.5rem;height:40px;margin-top:auto;padding:0 1.15rem;font-size:.75rem;font-weight:700;transition:all .15s ease-in-out;display:inline-flex}.tab-action-btn:where(.astro-3ucfoa3h):hover{color:#1d4ed8;background-color:#dbeafe}.tab-action-btn:where(.astro-3ucfoa3h).active{color:#1e3a8a;background-color:#fff;border-color:#2563eb;box-shadow:0 1px 2px #0000000d}.header-controls:where(.astro-3ucfoa3h){align-items:center;gap:5px;margin-top:auto;display:flex}.control-action-btn:where(.astro-3ucfoa3h){color:#64748b;cursor:pointer;box-sizing:border-box;background-color:#f8fafc;border:1px solid #c4cce0;border-radius:6px;justify-content:center;align-items:center;width:40px;height:40px;margin-top:auto;padding:0;transition:all .15s ease-in-out;display:inline-flex}.control-action-btn:where(.astro-3ucfoa3h):hover{color:#0f172a;background-color:#f1f5f9;border-color:#cbd5e1}:where(.astro-3ucfoa3h)[data-theme=dark] .tab-action-btn:where(.astro-3ucfoa3h){color:#93c5fd;background-color:#0f172a}:where(.astro-3ucfoa3h)[data-theme=dark] .tab-action-btn:where(.astro-3ucfoa3h):hover{color:#38bdf8;background-color:#1e293b}:where(.astro-3ucfoa3h)[data-theme=dark] .tab-action-btn:where(.astro-3ucfoa3h).active{color:#38bdf8;background-color:#0b0f19;border-color:#38bdf8}:where(.astro-3ucfoa3h)[data-theme=dark] .control-action-btn:where(.astro-3ucfoa3h){color:#94a3b8;background-color:#0f172a;border-color:#1e293b}:where(.astro-3ucfoa3h)[data-theme=dark] .control-action-btn:where(.astro-3ucfoa3h):hover{color:#fff;background-color:#1e293b;border-color:#475569}.demo-viewport:where(.astro-3ucfoa3h){background-color:#fff;border:1.5px solid #2563eb;border-radius:6px;width:100%;position:relative;overflow:hidden;box-shadow:0 4px 12px #2563eb0a}:where(.astro-3ucfoa3h)[data-theme=dark] .demo-viewport:where(.astro-3ucfoa3h){background-color:#090d16;border-color:#1e3a8a}.panel-content:where(.astro-3ucfoa3h){width:100%;height:100%;margin:0;display:none;overflow:hidden}.panel-content:where(.astro-3ucfoa3h).active{flex-direction:column;display:flex}.panel-content:where(.astro-3ucfoa3h) iframe:where(.astro-3ucfoa3h){border:none;width:100%;height:100%;display:block}.sub-file-bar:where(.astro-3ucfoa3h){background-color:#fafbfc;border-bottom:1px solid #e2e8f0;gap:.35rem;padding:.6rem 1rem;display:flex}:where(.astro-3ucfoa3h)[data-theme=dark] .sub-file-bar:where(.astro-3ucfoa3h){background-color:#0b0f19;border-bottom-color:#1e293b}.sub-file-tab:where(.astro-3ucfoa3h),.modal-sub-file-tab:where(.astro-3ucfoa3h){font-size:.75rem;font-family:var(--sl-font-mono,monospace);color:#64748b;cursor:pointer;background-color:#fff;border:1px solid #e2e8f0;border-radius:4px;padding:.25rem .6rem;font-weight:500;transition:all .15s}.sub-file-tab:where(.astro-3ucfoa3h).active,.modal-sub-file-tab:where(.astro-3ucfoa3h).active{color:#2563eb;background-color:#eff6ff;border-color:#bfdbfe}:where(.astro-3ucfoa3h)[data-theme=dark] .sub-file-tab:where(.astro-3ucfoa3h),:where(.astro-3ucfoa3h)[data-theme=dark] .modal-sub-file-tab:where(.astro-3ucfoa3h){color:#94a3b8;background-color:#1e293b;border-color:#334155}:where(.astro-3ucfoa3h)[data-theme=dark] .sub-file-tab:where(.astro-3ucfoa3h).active,:where(.astro-3ucfoa3h)[data-theme=dark] .modal-sub-file-tab:where(.astro-3ucfoa3h).active{color:#38bdf8;background-color:#38bdf814;border-color:#38bdf840}.code-viewer-container:where(.astro-3ucfoa3h){background-color:#fff;flex:1;width:100%;height:100%}.code-viewer-container:where(.astro-3ucfoa3h) iframe:where(.astro-3ucfoa3h){border:none;width:100%;height:100%;display:block}.demo-modal-overlay:where(.astro-3ucfoa3h){backdrop-filter:blur(8px);z-index:100000;box-sizing:border-box;background-color:#0f172ab3;justify-content:center;align-items:center;padding:2rem;display:none;position:fixed;inset:0}.demo-modal-overlay:where(.astro-3ucfoa3h).active{display:flex}.demo-modal-container:where(.astro-3ucfoa3h){background-color:#fff;border:1px solid #cbd5e1;border-radius:12px;flex-direction:column;width:85%;max-width:1440px;height:85vh;animation:.2s cubic-bezier(.16,1,.3,1) zoomIn;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #00000059}:where(.astro-3ucfoa3h)[data-theme=dark] .demo-modal-container:where(.astro-3ucfoa3h){background-color:#0b0f19;border-color:#1e293b}.demo-modal-header:where(.astro-3ucfoa3h){box-sizing:border-box;background-color:#f8fafc;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;height:56px;padding:.5rem 1rem;display:flex}:where(.astro-3ucfoa3h)[data-theme=dark] .demo-modal-header:where(.astro-3ucfoa3h){background-color:#0f1420;border-bottom-color:#1e293b}.modal-tab-group:where(.astro-3ucfoa3h){align-items:center;gap:.5rem;height:40px;display:flex}.demo-modal-body:where(.astro-3ucfoa3h){background-color:#fff;flex:1;width:100%;overflow:hidden}:where(.astro-3ucfoa3h)[data-theme=dark] .demo-modal-body:where(.astro-3ucfoa3h){background-color:#090d16}.modal-panel-content:where(.astro-3ucfoa3h){width:100%;height:100%;display:none;overflow:hidden}.modal-panel-content:where(.astro-3ucfoa3h).active{flex-direction:column;display:flex}.modal-panel-content:where(.astro-3ucfoa3h) iframe:where(.astro-3ucfoa3h){border:none;width:100%;height:100%;display:block}@keyframes zoomIn{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}