.demo-launcher-trigger{position:absolute;inset:0;z-index:10;cursor:pointer;background:none;border:none;padding:0;-webkit-tap-highlight-color:transparent}.demo-launcher-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:1rem;background:#0000;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:background .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease}.demo-launcher-trigger:hover .demo-launcher-overlay,.demo-launcher-trigger:focus-visible .demo-launcher-overlay{background:#00000073;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.demo-launcher-pill{display:flex;align-items:center;gap:.625rem;padding:.875rem 1.75rem;border-radius:9999px;background:var(--color-brand-500);color:#fff;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;box-shadow:0 8px 32px #007d8866;opacity:0;transform:scale(.92) translateY(8px);transition:opacity .3s ease,transform .3s ease}.demo-launcher-trigger:hover .demo-launcher-pill,.demo-launcher-trigger:focus-visible .demo-launcher-pill{opacity:1;transform:scale(1) translateY(0)}.demo-launcher-play{width:1.25rem;height:1.25rem;flex-shrink:0}.demo-morph-backdrop{position:fixed;inset:0;z-index:9998;background:#00000080;opacity:0;transition:opacity .4s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.demo-morph-backdrop.open{opacity:1}.demo-morph-surface{position:fixed;inset:0;z-index:9999;background:var(--surface);overflow:hidden;transition:clip-path .6s cubic-bezier(.4,0,.15,1);will-change:clip-path}.demo-morph-close{position:fixed;top:.75rem;right:.75rem;z-index:10000;display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.5rem;border:1px solid var(--edge);background:var(--surface);color:var(--fg-muted);cursor:pointer;box-shadow:0 2px 8px #00000014;transition:color .2s,border-color .2s,background .2s}.demo-morph-close:hover{color:var(--fg);border-color:var(--edge-soft);background:var(--surface-alt)}.demo-morph-close svg{width:1rem;height:1rem}.demo-morph-live{height:100%;opacity:0;transition:opacity .3s ease .1s}.demo-morph-live.ready{opacity:1}.demo-morph-skeleton{display:flex;flex-direction:column;height:100vh;height:100dvh}@keyframes dms-shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.dms-header{display:flex;align-items:center;gap:.75rem;height:64px;min-height:64px;padding:0 1rem;border-bottom:1px solid var(--edge)}.dms-bar{height:.75rem;border-radius:.375rem;background:linear-gradient(90deg,var(--surface-inset) 25%,var(--surface-alt) 50%,var(--surface-inset) 75%);background-size:200% 100%;animation:dms-shimmer 1.5s ease-in-out infinite}.dms-w24{width:6rem}.dms-w28{width:7rem}.dms-w32{width:8rem}.dms-w36{width:9rem}.dms-w40{width:10rem}.dms-w48{width:12rem}.dms-h6{height:1.5rem;border-radius:.5rem}.dms-mt{margin-top:1.5rem}.dms-circle{width:1.75rem;height:1.75rem;border-radius:9999px;background:linear-gradient(90deg,var(--surface-inset) 25%,var(--surface-alt) 50%,var(--surface-inset) 75%);background-size:200% 100%;animation:dms-shimmer 1.5s ease-in-out infinite;flex-shrink:0}.dms-body{display:flex;flex:1;overflow:hidden}.dms-sidebar{display:none;flex-direction:column;gap:.875rem;width:200px;min-width:200px;padding:1.25rem .75rem;border-right:1px solid var(--edge)}@media(min-width:768px){.dms-sidebar{display:flex}}.dms-content{flex:1;padding:1.5rem}.dms-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1rem}@media(min-width:1024px){.dms-cards{grid-template-columns:repeat(4,1fr)}}.dms-card{height:5rem;border-radius:.75rem;background:linear-gradient(90deg,var(--surface-inset) 25%,var(--surface-alt) 50%,var(--surface-inset) 75%);background-size:200% 100%;animation:dms-shimmer 1.5s ease-in-out infinite}.dms-table-placeholder{height:12rem;border-radius:.75rem;margin-top:.75rem;background:linear-gradient(90deg,var(--surface-inset) 25%,var(--surface-alt) 50%,var(--surface-inset) 75%);background-size:200% 100%;animation:dms-shimmer 1.5s ease-in-out infinite}@media(prefers-reduced-motion:reduce){.demo-morph-surface,.demo-morph-backdrop,.demo-launcher-pill,.demo-launcher-overlay{transition:none!important}.dms-bar,.dms-circle,.dms-card,.dms-table-placeholder{animation:none!important}}.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-logo-icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:.25rem;background:var(--color-brand-500);color:#fff;font-size:.5rem;font-weight:700;letter-spacing:-.025em}.demo-logo-accent{color:var(--color-cyan-700, #0e7490)}@media(prefers-color-scheme:dark){.demo-logo-accent{color:var(--color-cyan-400, #22d3ee)}}.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)}}.demo-palette-overlay{position:fixed;inset:0;z-index:200;background:#00000080;backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding-top:15vh}.demo-palette{width:100%;max-width:560px;max-height:70vh;background:var(--surface);border-radius:.75rem;border:1px solid var(--edge);box-shadow:0 25px 50px -12px #00000040;overflow:hidden;display:flex;flex-direction:column;animation:demo-palette-in .15s ease-out}.demo-palette-input{display:flex;flex-direction:row;align-items:center;gap:.5rem;padding:1rem;border-bottom:1px solid var(--edge);font-size:.875rem}.demo-palette-input input{flex:1;border:none;background:transparent;outline:none;font-size:.875rem;color:var(--fg)}.demo-palette-results{flex:1;overflow-y:auto;padding:.5rem}.demo-palette-section{text-transform:uppercase;font-size:.625rem;font-weight:600;color:var(--fg-faint);padding:.5rem .75rem}.demo-palette-item{display:flex;flex-direction:row;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:.5rem;font-size:.8125rem;cursor:pointer;transition:background .1s}.demo-palette-item:hover{background:var(--surface-inset)}.demo-palette-item.active{background:var(--surface-inset);color:var(--fg)}.demo-palette-footer{padding:.5rem 1rem;border-top:1px solid var(--edge);font-size:.6875rem;color:var(--fg-faint);display:flex;align-items:center;gap:1rem}.demo-palette-kbd{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .375rem;border:1px solid var(--edge);border-radius:.25rem;background:var(--surface-inset);font-size:.625rem;font-family:inherit}@keyframes demo-palette-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.demo-dialog-overlay{position:fixed;inset:0;z-index:150;background:#00000080;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.demo-dialog{max-width:440px;width:calc(100% - 2rem);background:var(--surface);border-radius:.75rem;border:1px solid var(--edge);box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;max-height:80vh;animation:demo-dialog-in .2s ease-out}.demo-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;border-bottom:1px solid var(--edge);font-weight:600;font-size:.9375rem}.demo-dialog-body{padding:1.25rem;overflow-y:auto;flex:1}.demo-dialog-actions{display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--edge)}@keyframes demo-dialog-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.demo-detail-overlay{position:fixed;inset:0;background:#0000004d;z-index:45;display:none}.demo-detail-overlay.open{display:block}.demo-detail-panel{position:fixed;top:64px;right:0;bottom:0;width:420px;background:var(--surface);border-left:1px solid var(--edge);z-index:50;transform:translate(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;box-shadow:-4px 0 24px #0000001a}.demo-detail-panel.open{transform:translate(0)}.demo-detail-header{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem;border-bottom:1px solid var(--edge);min-height:3.5rem}.demo-detail-body{flex:1;overflow-y:auto;padding:1.25rem}.demo-detail-section{margin-bottom:1.5rem}.demo-detail-section h3{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);margin-bottom:.75rem}.demo-detail-kv{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--edge);font-size:.8125rem}.demo-detail-kv-label{color:var(--fg-muted)}.demo-detail-kv-value{font-weight:500;text-align:right}.demo-detail-page-header{margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--edge)}.demo-breadcrumbs{display:flex;align-items:center;gap:.375rem;margin-top:.25rem;font-size:.6875rem;color:var(--fg-faint)}.demo-breadcrumb-sep{color:var(--edge-soft)}.demo-view-transition{animation:demo-view-enter .25s ease-out}@keyframes demo-view-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.demo-health-card{background:var(--surface);border:1px solid var(--edge);border-radius:.75rem;padding:1.25rem}.demo-health-bar{height:6px;border-radius:3px;background:var(--surface-inset);overflow:hidden;margin-top:.5rem}.demo-health-bar-fill{height:100%;border-radius:3px;transition:width .5s ease-out}.demo-health-overall{padding:.75rem 1rem;border-radius:.5rem;margin-bottom:1.25rem;font-size:.8125rem;font-weight:500;display:flex;align-items:center;gap:.5rem}.demo-notification-card{background:var(--surface);border:1px solid var(--edge);border-radius:.75rem;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem}.demo-notification-type-icon{width:2.5rem;height:2.5rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background:var(--surface-inset)}.demo-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.125rem;height:1.125rem;border-radius:9999px;background:#dc2626;color:#fff;font-size:.5625rem;font-weight:600;padding:0 .25rem;margin-left:auto}.demo-input.error{border-color:#dc2626;box-shadow:0 0 0 2px #dc262633}.demo-form-error{font-size:.6875rem;color:#dc2626;margin-top:.25rem}.demo-form-group{display:flex;flex-direction:column;gap:.375rem;margin-bottom:1rem}.demo-form-group label{font-size:.8125rem;font-weight:500}.demo-shortcuts-overlay{position:fixed;inset:0;z-index:150;background:#00000080;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.demo-shortcuts-dialog{max-width:560px;width:calc(100% - 2rem);background:var(--surface);border-radius:.75rem;border:1px solid var(--edge);box-shadow:0 25px 50px -12px #00000040;display:flex;flex-direction:column;max-height:80vh;animation:demo-dialog-in .2s ease-out}.demo-shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 2rem}.demo-shortcuts-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.demo-shortcuts-key{display:inline-flex;align-items:center;justify-content:center;padding:.125rem .375rem;border:1px solid var(--edge);border-radius:.25rem;background:var(--surface-inset);font-size:.625rem;font-family:inherit}.demo-shortcuts-desc{font-size:.8125rem;color:var(--fg-muted)}@keyframes demo-sync-pulse{0%,to{opacity:1}50%{opacity:.6;transform:scale(1.05)}}.demo-sync-active{animation:demo-sync-pulse 1.5s ease-in-out infinite}.demo-btn-danger{background:#dc2626;color:#fff}.demo-btn-danger:hover{background:#b91c1c}.demo-table tbody tr.clickable{cursor:pointer}.demo-table tbody tr.clickable:hover{background:color-mix(in srgb,var(--color-brand-500) 6%,transparent)}@media(max-width:767px){.demo-detail-panel{width:100%}.demo-detail-overlay.open{display:block}.demo-palette{max-width:100%;width:calc(100% - 1rem)}.demo-dialog{max-width:calc(100% - 1rem)}}@media(prefers-reduced-motion:reduce){.demo-view-transition,.demo-palette,.demo-dialog{animation:none}.demo-detail-panel{animation:none;transition:none}}