.desktop-demo{background:var(--bg);color:var(--text);text-align:left;--demo-muted:var(--muted);--demo-line:var(--line);--demo-surface:var(--bg-soft);container-type:inline-size}.demo-app{height:68cqw;font-size:1.15cqw;line-height:1.5;font-family:var(--font-sans), sans-serif;grid-template-rows:minmax(0,1fr);grid-template-columns:19% 81%;display:grid;overflow:hidden}.demo-sidebar{border-right:1px solid var(--demo-line);flex-direction:column;min-height:0;padding:2cqw 1.2cqw;display:flex;overflow-y:auto}.demo-brand{white-space:nowrap;align-items:center;gap:.6cqw;margin-bottom:2.2cqw;font-size:1.5cqw;font-weight:650;display:flex}.demo-brand>span{color:#fff;background:#ff6800;border-radius:.5cqw;place-items:center;width:2.5cqw;height:2.5cqw;font-size:1.8cqw;font-weight:700;display:grid}.demo-sidebar nav{flex-direction:column;gap:.6cqw;display:flex}.demo-sidebar nav>button,.demo-nav-item{color:var(--demo-muted);text-align:left;white-space:nowrap;border-radius:.5cqw;align-items:center;gap:.7cqw;padding:.9cqw .65cqw;font-size:1.05cqw;display:flex}.demo-sidebar svg{flex-shrink:0;width:1.4cqw;height:1.4cqw}.demo-sidebar nav>button[aria-pressed=true]{color:var(--accent);background:color-mix(in srgb, var(--accent) 9%, transparent);box-shadow:inset 2px 0 var(--accent)}.demo-nav-caption{letter-spacing:.1em;text-transform:uppercase;color:var(--demo-muted);margin:1cqw .65cqw .1cqw;font-size:.72cqw}.demo-fiction{color:var(--demo-muted);margin-top:auto;padding:.8cqw .65cqw 0;font-size:.85cqw}.demo-content{scrollbar-gutter:stable;background:color-mix(in srgb, var(--bg-soft) 28%, var(--bg));min-height:0;padding:2.6cqw 3cqw;overflow-y:auto}.demo-masthead{justify-content:space-between;align-items:center;margin-bottom:2cqw;display:flex}.demo-masthead p{color:var(--demo-muted);margin-bottom:.5cqw;font-size:.95cqw}.demo-masthead .demo-greeting{letter-spacing:-.055em;font-size:2.6cqw;font-weight:650;line-height:1.2}.demo-masthead .demo-greeting span{color:var(--accent)}.demo-avatar{border:1px solid var(--demo-line);width:3.2cqw;height:3.2cqw;color:var(--demo-muted);border-radius:50%;place-items:center;font-size:1.2cqw;display:grid}.demo-toolbar{color:var(--demo-muted);align-items:center;gap:.8cqw;margin-bottom:1.8cqw;font-size:1cqw;display:flex}.demo-toolbar>span:first-child,.demo-toolbar select{border:1px solid var(--demo-line);background:var(--bg);color:var(--text);border-radius:.5cqw;align-items:center;gap:.6cqw;padding:.6cqw .85cqw;display:flex}.demo-toolbar svg{width:1.2cqw;height:1.2cqw}.demo-toolbar select{font:inherit;cursor:pointer}.demo-toolbar-note{margin-left:auto;font-size:.85cqw}.demo-panel{border:1px solid var(--demo-line);background:var(--bg);border-radius:1cqw;padding:1.8cqw}.demo-panel-title{justify-content:space-between;align-items:center;gap:1cqw;display:flex}.demo-panel .demo-panel-heading{letter-spacing:-.025em;align-items:center;gap:.6cqw;font-size:1.4cqw;font-weight:600;display:flex}.demo-panel .demo-panel-heading svg{width:1.6cqw;height:1.6cqw;color:var(--accent)}.demo-panel p{color:var(--demo-muted);margin-top:.35cqw;font-size:.9cqw}.desktop-demo .demo-panel-title button{color:var(--accent);align-items:center;gap:.6cqw;font-size:1cqw;display:flex}.demo-panel-title button svg{width:1.3cqw;height:1.3cqw}.demo-totals{border-bottom:1px solid var(--demo-line);align-items:center;gap:3cqw;margin-bottom:1.4cqw;padding:1.8cqw 0;display:flex}.demo-totals>div{flex-direction:column;display:flex}.demo-totals strong{letter-spacing:-.06em;font-size:3.2cqw;font-weight:550;line-height:1.2}.demo-totals span{color:var(--demo-muted);font-size:.9cqw}.demo-totals>p{text-align:right;margin-left:auto;line-height:1.6}.demo-blocks{gap:1cqw;display:grid}.demo-blocks>div{grid-template-columns:5.5cqw 1fr 7cqw;align-items:center;gap:1.2cqw;display:grid}.demo-blocks strong{text-align:right;font-size:1cqw;font-weight:500}.demo-blocks small{color:var(--demo-muted)}.demo-bar{border-radius:.25cqw;gap:2px;height:.7cqw;display:flex;overflow:hidden}.demo-bar i:first-child{background:var(--accent)}.demo-bar i:nth-child(2){background:#a59b91}.demo-bar i:nth-child(3){background:#7eabb5}.demo-bottom{grid-template-columns:1.2fr 1fr;gap:1.4cqw;margin-top:1.4cqw;display:grid}.demo-panel table{border-collapse:collapse;width:100%;margin-top:1cqw;font-size:1cqw}.demo-panel th{text-align:left;color:var(--demo-muted);background:var(--demo-surface);font-size:.85cqw;font-weight:450}.demo-panel th,.demo-panel td{border-bottom:1px solid var(--demo-line);padding:.8cqw .7cqw}.demo-panel tbody tr:last-child td{border-bottom:0}.demo-attention>div{border-bottom:1px solid var(--demo-line);justify-content:space-between;align-items:center;padding:1cqw 0;font-size:1cqw;display:flex}.demo-attention>div strong{color:var(--accent);font-size:1.6cqw;font-weight:500}.demo-attention>p{margin-top:1cqw}.demo-search{border:1px solid var(--demo-line);background:var(--demo-surface);border-radius:.5cqw;align-items:center;gap:.7cqw;max-width:30cqw;margin:1.2cqw 0;padding:.7cqw 1cqw;display:flex}.demo-search svg{width:1.3cqw;height:1.3cqw;color:var(--demo-muted)}.demo-search input{outline-offset:3px;background:0 0;width:100%;font-size:1cqw}.demo-records td{padding:1.2cqw .7cqw}.demo-records td small{color:var(--demo-muted);font-size:.8cqw;display:block}.demo-records td strong{margin-top:.3cqw;font-weight:550;display:block}.demo-punch{color:var(--accent)}.demo-method{align-items:center;gap:.4cqw;display:flex}.demo-method svg{width:1.3cqw;height:1.3cqw}.demo-panel .demo-record-count{margin:1.3cqw 0 0}.demo-empty{text-align:center;padding:3cqw}@container (max-width:500px){.demo-app{grid-template-columns:1fr;height:130cqw;font-size:2.5cqw}.demo-sidebar{display:none}.demo-content{padding:4cqw}.demo-masthead .demo-greeting{font-size:4.5cqw}.demo-masthead p{font-size:2cqw}.demo-avatar{width:6cqw;height:6cqw;font-size:2.5cqw}.demo-toolbar{gap:2cqw;margin:3cqw 0;font-size:2.4cqw}.demo-toolbar>span:first-child,.demo-toolbar select{padding:1cqw 1.5cqw}.demo-toolbar svg{width:3cqw;height:3cqw}.demo-toolbar-note{display:none}.demo-panel{border-radius:2cqw;padding:3cqw}.demo-panel .demo-panel-heading{font-size:3cqw}.demo-panel .demo-panel-heading svg{width:3cqw;height:3cqw}.demo-panel p{font-size:2cqw}.desktop-demo .demo-panel-title button{font-size:2.2cqw}.demo-panel-title button svg{width:2.5cqw;height:2.5cqw}.demo-totals{gap:6cqw;margin-bottom:3cqw;padding:3cqw 0}.demo-totals strong{font-size:6cqw}.demo-totals span{font-size:2cqw}.demo-blocks{gap:2cqw}.demo-blocks>div{grid-template-columns:12cqw 1fr 16cqw;gap:2cqw}.demo-blocks strong{font-size:2.2cqw}.demo-bar{height:1.4cqw}.demo-bottom{gap:2cqw;margin-top:2cqw}.demo-panel table{font-size:2cqw}.demo-panel th{font-size:1.8cqw}.demo-panel td,.demo-panel th{padding:1.4cqw 1cqw}.demo-attention>div{padding:2cqw 0;font-size:2cqw}.demo-attention>div strong{font-size:3cqw}.demo-search{max-width:none;margin:3cqw 0;padding:2cqw}.demo-search input{font-size:2.7cqw}.demo-search svg{width:3cqw;height:3cqw}.demo-records td{padding:2.5cqw 1cqw}.demo-records td small{font-size:1.8cqw}.demo-method svg{width:2.5cqw;height:2.5cqw}.demo-record-count{font-size:2cqw}}.desktop-demo{--bg:#fff;--bg-soft:#f1f5f9;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--accent:#ea580c}:root[data-theme=dark] .desktop-demo{--bg:#0f172a;--bg-soft:#1e293b;--text:#f8fafc;--muted:#94a3b8;--line:#263449;--accent:#ff6800}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .desktop-demo{--bg:#0f172a;--bg-soft:#1e293b;--text:#f8fafc;--muted:#94a3b8;--line:#263449;--accent:#ff6800}}.demo-brand .logo{width:12cqw;height:auto}.demo-expand{width:100%;color:var(--accent);border-top:1px solid var(--line);justify-content:center;align-items:center;gap:1cqw;padding:.7cqw;font-size:.85cqw;display:flex}.demo-expand>span{color:#fff;background:#ea580c;border-radius:2cqw;padding:0 1.4cqw}.demo-totals>div:first-child strong{color:#059669}.demo-totals>div:nth-child(2) strong{color:#e11d48}.demo-totals>div:nth-child(3) strong{color:#d97706}.demo-breakdown td:nth-child(2){color:#059669}.demo-breakdown td:nth-child(3){color:#e11d48}.demo-breakdown td:nth-child(4){color:#d97706}.demo-sidebar{background:var(--bg)}.demo-empty{display:block}@container (max-width:500px){.demo-expand{padding:1.5cqw;font-size:2.2cqw}}.demo-mobile-nav{display:none}@container (max-width:500px){.demo-mobile-nav{border-bottom:1px solid var(--line);align-items:center;gap:3cqw;margin-bottom:4cqw;padding-bottom:2cqw;display:flex}.demo-mobile-nav .logo{width:24cqw;height:auto;margin-right:auto}.demo-mobile-nav button{border-bottom:2px solid #0000;padding:2cqw 0;font-size:2.3cqw}.demo-mobile-nav button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}}.warden-screen:empty{aspect-ratio:100/68}.demo-source-summary>p{color:var(--text);order:-1;margin-left:0;margin-right:auto;font-size:2.7cqw;font-weight:800}.demo-source-summary>div{background:#10b98112;border-radius:.8cqw;padding:.6cqw 1.2cqw}.demo-source-summary>div:nth-child(2){background:#f43f5e12}.demo-source-summary>div:nth-child(3){background:#f59e0b12}@container (max-width:500px){.demo-source-summary{flex-wrap:wrap;gap:2cqw}.demo-source-summary>p{font-size:5cqw}}.demo-scroll-hint{display:none}@media (max-width:600px){.preview-dialog--desktop[open] .demo-app{grid-template-columns:minmax(0,1fr);font-size:14px}.preview-dialog--desktop[open] .demo-sidebar{display:none}.preview-dialog--desktop[open] .demo-content{min-width:0;padding:16px}.preview-dialog--desktop[open] .demo-mobile-nav{flex-wrap:wrap;gap:16px;margin-bottom:20px;padding-bottom:12px;display:flex}.preview-dialog--desktop[open] .demo-mobile-nav .logo{width:108px;height:auto;margin-right:auto}.preview-dialog--desktop[open] .demo-mobile-nav button{min-height:44px;padding:10px 0;font-size:13px}.preview-dialog--desktop[open] .demo-masthead{gap:12px;margin-bottom:20px}.preview-dialog--desktop[open] .demo-masthead p{margin-bottom:8px;font-size:11px;line-height:1.5}.preview-dialog--desktop[open] .demo-masthead .demo-greeting{font-size:27px;line-height:1.1}.preview-dialog--desktop[open] .demo-avatar{flex-shrink:0;width:34px;height:34px;font-size:13px}.preview-dialog--desktop[open] .demo-toolbar{flex-wrap:wrap;gap:8px;margin:0 0 20px;font-size:13px}.preview-dialog--desktop[open] .demo-toolbar>span:first-child,.preview-dialog--desktop[open] .demo-toolbar select{border-radius:6px;min-height:44px;padding:10px}.preview-dialog--desktop[open] .demo-toolbar svg{width:16px;height:16px}.preview-dialog--desktop[open] .demo-toolbar-note{display:none}.preview-dialog--desktop[open] .demo-panel{border-radius:12px;min-width:0;padding:16px}.preview-dialog--desktop[open] .demo-panel-title{flex-wrap:wrap;gap:12px}.preview-dialog--desktop[open] .demo-panel .demo-panel-heading{gap:8px;font-size:18px}.preview-dialog--desktop[open] .demo-panel .demo-panel-heading svg,.preview-dialog--desktop[open] .demo-panel-title button svg{width:18px;height:18px}.preview-dialog--desktop[open] .demo-panel p{margin-top:6px;font-size:12px;line-height:1.5}.preview-dialog--desktop[open] .desktop-demo .demo-panel-title button{min-height:40px;font-size:13px}.preview-dialog--desktop[open] .demo-totals{flex-wrap:wrap;gap:12px;margin-bottom:12px;padding:18px 0}.preview-dialog--desktop[open] .demo-source-summary>p{flex-basis:100%;margin:0;font-size:28px}.preview-dialog--desktop[open] .demo-source-summary>div{border-radius:8px;flex:1;padding:10px 8px}.preview-dialog--desktop[open] .demo-totals strong{font-size:24px}.preview-dialog--desktop[open] .demo-totals span{font-size:11px}.preview-dialog--desktop[open] .demo-expand{gap:8px;min-height:44px;padding:10px 0;font-size:12px}.preview-dialog--desktop[open] .demo-expand>span{border-radius:12px;padding:0 12px}.preview-dialog--desktop[open] .demo-bottom{grid-template-columns:1fr;gap:14px;margin-top:14px}.preview-dialog--desktop[open] .demo-panel table{font-size:12px}.preview-dialog--desktop[open] .demo-panel th{white-space:nowrap;font-size:11px}.preview-dialog--desktop[open] .demo-panel td,.preview-dialog--desktop[open] .demo-panel th{padding:12px 7px}.preview-dialog--desktop[open] .demo-breakdown td:first-child{overflow-wrap:anywhere}.preview-dialog--desktop[open] .demo-attention>div{padding:12px 0;font-size:13px}.preview-dialog--desktop[open] .demo-attention>div strong{font-size:22px}.preview-dialog--desktop[open] .demo-search{border-radius:6px;gap:8px;max-width:none;margin:18px 0 10px;padding:12px}.preview-dialog--desktop[open] .demo-search input{min-width:0;font-size:16px}.preview-dialog--desktop[open] .demo-search svg{flex-shrink:0;width:18px;height:18px}.preview-dialog--desktop[open] .demo-table-scroll{overscroll-behavior-x:contain;overflow-x:auto}.preview-dialog--desktop[open] .demo-records table{min-width:510px;font-size:14px}.preview-dialog--desktop[open] .demo-records td{padding:16px 12px}.preview-dialog--desktop[open] .demo-records td small{margin-bottom:5px;font-size:11px}.preview-dialog--desktop[open] .demo-records td strong{font-size:14px}.preview-dialog--desktop[open] .demo-records th:first-child,.preview-dialog--desktop[open] .demo-records td:first-child{background:var(--bg);border-right:1px solid var(--demo-line);min-width:160px;position:sticky;left:0}.preview-dialog--desktop[open] .demo-method{gap:5px}.preview-dialog--desktop[open] .demo-method svg{width:16px;height:16px}.preview-dialog--desktop[open] .demo-panel .demo-record-count{margin-top:16px;font-size:12px}.preview-dialog--desktop[open] .demo-scroll-hint{color:var(--demo-muted);margin:0 0 12px;font-size:11px;display:block}}