.demo-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:var(--surface);color:var(--fg)}.demo-header{display:flex;align-items:center;gap:.5rem;height:64px;min-height:64px;padding:0 1rem;border-bottom:1px solid var(--edge);background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:30}.demo-header-logo{display:flex;align-items:center;gap:.375rem;font-size:.9375rem;font-weight:700;color:var(--fg);user-select:none}.demo-search{display:flex;align-items:center;gap:.5rem;border:1px solid var(--edge);background:var(--surface-alt);border-radius:.5rem;padding:.375rem .75rem;font-size:.8125rem;color:var(--fg-faint);cursor:pointer;transition:border-color .15s}.demo-search:hover{border-color:var(--edge-soft)}.demo-search kbd{font-size:.625rem;padding:.125rem .375rem;border:1px solid var(--edge);border-radius:.25rem;background:var(--surface-inset);font-family:inherit}.demo-status-dot{width:.5rem;height:.5rem;border-radius:50%;background:#16a34a;animation:demo-pulse 2s ease-in-out infinite}.demo-avatar{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--color-brand-500);color:#fff;font-size:.6875rem;font-weight:600;user-select:none}.demo-body{display:flex;flex:1;min-height:0}.demo-sidebar{width:260px;min-width:260px;display:flex;flex-direction:column;border-right:1px solid var(--edge);background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:.75rem .625rem;overflow-y:auto;z-index:20}.demo-nav-item{display:flex;align-items:center;gap:.625rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.8125rem;color:var(--fg-muted);cursor:pointer;transition:background .15s,color .15s;user-select:none;border:none;background:none;width:100%;text-align:left;font-family:inherit}.demo-nav-item:hover{background:var(--surface-inset)}.demo-nav-item.active{background:color-mix(in srgb,var(--color-brand-500) 12%,transparent);color:var(--color-brand-500);font-weight:500}@media(prefers-color-scheme:dark){.demo-nav-item.active{color:var(--color-cyan-400)}}.demo-nav-item.disabled{opacity:.4;cursor:not-allowed}.demo-nav-item.disabled:hover{background:none}.demo-nav-section{padding:.5rem .75rem .25rem;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);margin-top:.25rem}.demo-nav-divider{height:1px;background:var(--edge);margin:.375rem 0}.demo-content{flex:1;overflow-y:auto;padding:1.5rem;min-width:0}.demo-card{border-radius:.75rem;border:1px solid var(--edge);background:var(--surface);padding:1rem;transition:box-shadow .2s,transform .2s}.demo-card:hover{box-shadow:0 4px 12px #0000000f}.demo-card-metric{composes:demo-card}.demo-card-metric .label{font-size:.6875rem;color:var(--fg-faint)}.demo-card-metric .value{font-size:1.5rem;font-weight:700;margin-top:.25rem;font-variant-numeric:tabular-nums}.demo-card-metric .change{font-size:.6875rem;margin-top:.25rem}.demo-table{width:100%;border-collapse:collapse;font-size:.8125rem}.demo-table thead th{text-align:left;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);padding:.625rem .75rem;background:var(--surface-inset);border-bottom:1px solid var(--edge)}.demo-table tbody td{padding:.5rem .75rem;border-bottom:1px solid var(--edge);vertical-align:middle}.demo-table tbody tr:last-child td{border-bottom:none}.demo-table tbody tr:hover{background:var(--surface-inset)}.demo-table tbody tr.demo-new-row{animation:demo-new-row 2s ease-out}.demo-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:9999px;font-size:.6875rem;font-weight:500;white-space:nowrap}.demo-chip-success{background:#16a34a1a;color:#15803d}.demo-chip-warning{background:#d977061a;color:#b45309}.demo-chip-error{background:#dc26261a;color:#dc2626}.demo-chip-info{background:#2563eb1a;color:#2563eb}.demo-chip-neutral{background:var(--surface-inset);color:var(--fg-muted)}.demo-chip-brand{background:color-mix(in srgb,var(--color-brand-500) 12%,transparent);color:var(--color-brand-500)}.demo-chip-indigo{background:#6366f11a;color:#6366f1}.demo-chip-amber{background:#d977061a;color:#d97706}.demo-chip-slate{background:var(--surface-inset);color:var(--fg-muted)}@media(prefers-color-scheme:dark){.demo-chip-success{color:#4ade80}.demo-chip-warning{color:#fbbf24}.demo-chip-error{color:#f87171}.demo-chip-info{color:#60a5fa}.demo-chip-brand{color:var(--color-cyan-400)}.demo-chip-indigo{color:#818cf8}.demo-chip-amber{color:#fbbf24}}.demo-toggle{position:relative;width:2.75rem;height:1.5rem;border-radius:9999px;background:var(--edge-soft);border:none;cursor:pointer;transition:background .2s;padding:0;flex-shrink:0}.demo-toggle.active{background:var(--color-brand-500)}.demo-toggle:after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:1.125rem;height:1.125rem;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px #00000026}.demo-toggle.active:after{transform:translate(1.25rem)}.demo-input,.demo-select{width:100%;padding:.5rem .75rem;border:1px solid var(--edge);border-radius:.5rem;background:var(--surface);color:var(--fg);font-size:.8125rem;font-family:inherit;transition:border-color .15s}.demo-input:focus,.demo-select:focus{outline:none;border-color:var(--color-brand-500);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-brand-500) 20%,transparent)}.demo-select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.25rem;padding-right:2.25rem}.demo-tabs{display:flex;gap:0;border-bottom:1px solid var(--edge);margin-bottom:1.25rem}.demo-tab{padding:.625rem 1rem;font-size:.8125rem;font-weight:500;color:var(--fg-muted);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;font-family:inherit}.demo-tab:hover{color:var(--fg)}.demo-tab.active{color:var(--color-brand-500);border-bottom-color:var(--color-brand-500)}@media(prefers-color-scheme:dark){.demo-tab.active{color:var(--color-cyan-400);border-bottom-color:var(--color-cyan-400)}}.demo-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s;border:none;font-family:inherit}.demo-btn-primary{background:var(--color-brand-500);color:#fff}.demo-btn-primary:hover{background:var(--color-brand-600)}.demo-btn-outlined{background:transparent;border:1px solid var(--edge);color:var(--fg-muted)}.demo-btn-outlined:hover{border-color:var(--edge-soft);color:var(--fg)}.demo-btn-text{background:none;color:var(--fg-muted);padding:.5rem .625rem}.demo-btn-text:hover{color:var(--fg)}.demo-toast{position:fixed;top:1rem;right:1rem;display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:.5rem;border:1px solid var(--edge);background:var(--surface);color:var(--fg);font-size:.8125rem;box-shadow:0 8px 24px #0000001f;z-index:100;animation:demo-slide-in .3s ease-out;max-width:320px}.demo-banner{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.75rem 1rem;background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:2px solid;border-image:linear-gradient(to right,var(--color-brand-500),var(--color-cyan-400)) 1;z-index:50;font-size:.8125rem}.demo-banner a{color:var(--color-brand-500);font-weight:500;text-decoration:none}.demo-banner a:hover{text-decoration:underline}.demo-fab{position:fixed;bottom:5rem;right:1.5rem;width:3rem;height:3rem;border-radius:50%;background:var(--color-brand-500);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #007d884d;transition:transform .2s,box-shadow .2s;z-index:40}.demo-fab:hover{transform:scale(1.1);box-shadow:0 6px 16px #007d8866}.demo-tooltip-wrapper{position:relative}.demo-tooltip-wrapper .demo-tooltip{display:none;position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:.5rem;padding:.25rem .5rem;border-radius:.375rem;background:var(--fg);color:var(--surface);font-size:.6875rem;white-space:nowrap;z-index:60;pointer-events:none}.demo-tooltip-wrapper:hover .demo-tooltip{display:block}.demo-status-online{width:.5rem;height:.5rem;border-radius:50%;background:#16a34a;animation:demo-pulse 2s ease-in-out infinite}.demo-status-offline{width:.5rem;height:.5rem;border-radius:50%;background:#94a3b8}.demo-status-checking{width:.5rem;height:.5rem;border-radius:50%;background:#d97706;animation:demo-pulse 1.5s ease-in-out infinite}.demo-section-header{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.demo-section-subheader{font-size:.8125rem;color:var(--fg-muted);margin-bottom:1rem}.demo-grid-2,.demo-grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media(min-width:1024px){.demo-grid-4{grid-template-columns:repeat(4,1fr)}}.demo-filter-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;border:1px solid var(--edge);background:transparent;color:var(--fg-muted);cursor:pointer;transition:all .15s;font-family:inherit}.demo-filter-chip:hover{border-color:var(--edge-soft)}.demo-filter-chip.active{background:color-mix(in srgb,var(--color-brand-500) 12%,transparent);border-color:var(--color-brand-500);color:var(--color-brand-500)}@media(prefers-color-scheme:dark){.demo-filter-chip.active{color:var(--color-cyan-400);border-color:var(--color-cyan-400)}}.demo-pagination{display:flex;align-items:center;justify-content:center;gap:.25rem;margin-top:1rem}.demo-page-btn{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.375rem;border:1px solid var(--edge);background:transparent;color:var(--fg-muted);font-size:.75rem;cursor:pointer;font-family:inherit;transition:all .15s}.demo-page-btn:hover{border-color:var(--edge-soft);color:var(--fg)}.demo-page-btn.active{background:var(--color-brand-500);border-color:var(--color-brand-500);color:#fff}@keyframes demo-fade-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes demo-slide-in{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes demo-pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes demo-new-row{0%{background:color-mix(in srgb,var(--color-brand-500) 20%,transparent)}to{background:transparent}}@keyframes demo-bar-grow{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes demo-donut-draw{0%{stroke-dashoffset:var(--circumference)}to{stroke-dashoffset:var(--target-offset)}}@keyframes demo-counter{0%{opacity:.3}to{opacity:1}}.demo-stagger>*{opacity:0;animation:demo-fade-in .4s ease-out forwards}.demo-stagger>*:nth-child(1){animation-delay:0ms}.demo-stagger>*:nth-child(2){animation-delay:80ms}.demo-stagger>*:nth-child(3){animation-delay:.16s}.demo-stagger>*:nth-child(4){animation-delay:.24s}.demo-stagger>*:nth-child(5){animation-delay:.32s}.demo-stagger>*:nth-child(6){animation-delay:.4s}.demo-stagger>*:nth-child(7){animation-delay:.48s}.demo-stagger>*:nth-child(8){animation-delay:.56s}.demo-heatmap{overflow-x:auto}.demo-heatmap table{border-collapse:collapse;font-size:.6875rem}.demo-heatmap th{padding:.375rem .5rem;font-weight:600;white-space:nowrap;color:var(--fg-faint);text-align:left}.demo-heatmap td{padding:0;width:1.75rem;height:1.75rem;text-align:center;font-size:.625rem;color:var(--fg-muted);cursor:default;position:relative}.demo-heatmap-cell{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:.1875rem;transition:transform .15s}.demo-heatmap-cell:hover{transform:scale(1.2);z-index:1}.demo-hamburger{display:none;border:none;background:none;padding:.375rem;cursor:pointer;color:var(--fg)}.demo-mobile-card{border:1px solid var(--edge);border-radius:.75rem;padding:.75rem;background:var(--surface);margin-bottom:.75rem}@media(max-width:767px){.demo-hamburger{display:flex}.demo-sidebar{position:fixed;top:64px;left:0;bottom:0;width:280px;transform:translate(-100%);transition:transform .25s ease;z-index:40;background:var(--surface)}.demo-sidebar.open{transform:translate(0);box-shadow:4px 0 24px #00000026}.demo-sidebar-overlay{display:none;position:fixed;inset:64px 0 0;background:#0000004d;z-index:35}.demo-sidebar-overlay.open{display:block}.demo-content{padding:1rem}.demo-grid-4{grid-template-columns:repeat(2,1fr)}.demo-search{display:none}.demo-banner{flex-wrap:wrap;font-size:.75rem;gap:.5rem}.demo-table-desktop{display:none}.demo-cards-mobile{display:block}}@media(min-width:768px){.demo-sidebar-overlay{display:none!important}.demo-cards-mobile{display:none}.demo-table-desktop{display:block}}@media(prefers-reduced-motion:reduce){.demo-stagger>*{animation:none;opacity:1}.demo-status-online,.demo-status-checking,.demo-status-dot,.demo-toast,.demo-new-row{animation:none}}.demo-chart-tooltip{position:absolute;padding:.375rem .625rem;border-radius:.375rem;background:var(--fg);color:var(--surface);font-size:.6875rem;white-space:nowrap;pointer-events:none;z-index:60;transform:translate(-50%,-100%);margin-top:-.5rem}.demo-form-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--edge);gap:1rem}.demo-form-row:last-child{border-bottom:none}.demo-form-label{font-size:.8125rem;font-weight:500}.demo-form-desc{font-size:.6875rem;color:var(--fg-muted);margin-top:.125rem}.demo-spinner{width:1rem;height:1rem;border:2px solid var(--edge);border-top-color:var(--color-brand-500);border-radius:50%;animation:demo-spin .6s linear infinite}@keyframes demo-spin{to{transform:rotate(360deg)}}