:root{color-scheme:light dark;--demo-max-width: 1180px;--demo-radius: var(--agil-radius-lg, 20px);--demo-font: var(--agil-font-family, "Inter", "Segoe UI", system-ui, sans-serif)}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--demo-font);font-size:var(--agil-font-size-base, 14px);line-height:var(--agil-line-height, 1.45);color:var(--agil-color-text, #0f172a);background:var(--agil-bg-gradient, linear-gradient(160deg, #f3f6fb, #e8edf6));background-attachment:fixed}a{color:var(--agil-color-primary, #2563eb);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,p{margin-top:0}.demo{display:flex;flex-direction:column;min-height:100vh}.demo-header{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:14px clamp(16px,4vw,40px);background:color-mix(in srgb,var(--agil-color-surface, #ffffff) 82%,transparent);border-bottom:1px solid var(--agil-color-divider, #e2e8f0);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.demo-brand{display:flex;align-items:center;gap:10px;font-weight:var(--agil-heading-weight, 650);font-size:1.05em}.demo-logo{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;overflow:hidden;color:var(--agil-color-on-primary, #fff);background:var(--agil-color-primary, #2563eb)}.demo-logo img{display:block;width:100%;height:100%;object-fit:contain}.demo-nav{display:flex;gap:16px;margin-inline-start:12px;flex-wrap:wrap;font-size:.92em}.demo-header-status{display:flex;align-items:center;gap:14px;margin-inline-start:auto;flex-wrap:wrap}.demo-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;border:1px solid var(--agil-color-border, #d5dde9);background:var(--agil-color-surface-elevated, #fff);color:var(--agil-color-text-secondary, #475569);font-size:.82em;white-space:nowrap}.demo-pill[data-state=online]{color:var(--agil-color-success, #15803d);border-color:color-mix(in srgb,var(--agil-color-success, #15803d) 45%,transparent)}.demo-pill[data-state=offline]{color:var(--agil-color-warning, #b45309);border-color:color-mix(in srgb,var(--agil-color-warning, #b45309) 45%,transparent)}.demo-inline-field{display:inline-flex;align-items:center;gap:6px;font-size:.82em;color:var(--agil-color-text-secondary, #475569)}.demo-main{flex:1;width:min(var(--demo-max-width),100%);margin:0 auto;padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px) 40px;display:flex;flex-direction:column;gap:26px}.demo-hero{max-width:780px}.demo-hero h1{font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.16;letter-spacing:-.01em;margin-bottom:12px}.demo-hero p{color:var(--agil-color-text-secondary, #475569);font-size:1.02em;margin-bottom:0}.demo-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}.demo-card{display:flex;flex-direction:column;gap:14px;padding:clamp(16px,2.6vw,26px);border-radius:var(--demo-radius);border:1px solid var(--agil-color-border, #d5dde9);background:color-mix(in srgb,var(--agil-color-surface, #fff) 92%,transparent);box-shadow:var(--agil-shadow-md, 0 12px 32px rgba(15, 23, 42, .12));backdrop-filter:blur(10px)}.demo-card h2{margin:0 0 4px;font-size:1.08em;font-weight:var(--agil-heading-weight, 650)}.demo-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.demo-form{display:flex;flex-direction:column;gap:12px}.demo-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.demo-field{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:.84em;color:var(--agil-color-text-secondary, #475569)}.demo-input,.demo-select{width:100%;min-height:40px;padding:0 11px;border-radius:var(--agil-radius-sm, 8px);border:1px solid var(--agil-color-border, #d5dde9);background:var(--agil-color-surface-elevated, #fff);color:var(--agil-color-text, #0f172a);font:inherit}.demo-input:focus,.demo-select:focus{outline:2px solid var(--agil-color-focus-ring, rgba(37, 99, 235, .6));outline-offset:1px}.demo-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.demo-btn{min-height:42px;padding:0 16px;border-radius:var(--agil-radius-md, 12px);border:1px solid transparent;font:inherit;font-weight:var(--agil-font-weight-medium, 500);cursor:pointer;transition:background .12s ease,transform .12s ease}.demo-btn:active{transform:translateY(1px)}.demo-btn-primary{background:var(--agil-color-primary, #2563eb);color:var(--agil-color-on-primary, #fff)}.demo-btn-primary:hover{background:var(--agil-color-primary-hover, #1d4ed8)}.demo-btn-secondary{background:var(--agil-color-control-bg, #fff);color:var(--agil-color-control-text, #0f172a);border-color:var(--agil-color-border, #d5dde9)}.demo-btn-secondary:hover{background:var(--agil-color-control-hover, #eef2f9)}.demo-btn-ghost{background:transparent;color:var(--agil-color-primary, #2563eb);border-color:transparent}.demo-btn-ghost:hover{background:var(--agil-color-control-hover, #eef2f9)}.demo-status{margin:0;padding:9px 12px;border-radius:var(--agil-radius-sm, 8px);font-size:.85em;border:1px solid var(--agil-color-border, #d5dde9);background:var(--agil-color-surface-elevated, #fff);color:var(--agil-color-text-secondary, #475569)}.demo-status[data-kind=error]{color:var(--agil-color-danger, #dc2626);border-color:color-mix(in srgb,var(--agil-color-danger, #dc2626) 45%,transparent)}.demo-status[data-kind=success]{color:var(--agil-color-success, #15803d);border-color:color-mix(in srgb,var(--agil-color-success, #15803d) 45%,transparent)}.demo-hint{margin:0;font-size:.79em;color:var(--agil-color-text-muted, #64748b)}.demo-pre{margin:0;max-height:420px;overflow:auto;padding:14px;border-radius:var(--agil-radius-md, 12px);background:color-mix(in srgb,var(--agil-color-tile-bg, #0f172a) 94%,transparent);color:#e2e8f0;font-family:var(--agil-font-family-mono, monospace);font-size:.78em;line-height:1.55;white-space:pre-wrap;word-break:break-word}.demo-links{display:flex;gap:14px;flex-wrap:wrap;font-size:.86em}.demo-call{display:flex;flex-direction:column;gap:12px}.demo-call-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.demo-call-head h2{margin:0;font-size:1.15em}.demo-call-container{height:min(640px,74vh);border-radius:var(--demo-radius);overflow:hidden;border:1px solid var(--agil-color-border, #d5dde9);background:var(--agil-color-tile-bg, #0f172a);box-shadow:var(--agil-shadow-md, 0 12px 32px rgba(15, 23, 42, .24))}.demo-call-container iframe{display:block;width:100%;height:100%;border:0}.demo-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}.demo-feature{padding:16px 18px;border-radius:var(--agil-radius-md, 12px);border:1px solid var(--agil-color-border, #d5dde9);background:color-mix(in srgb,var(--agil-color-surface, #fff) 78%,transparent)}.demo-feature h3{margin:0 0 6px;font-size:.98em}.demo-feature p{margin:0;font-size:.86em;color:var(--agil-color-text-secondary, #475569)}.demo-feature code{font-family:var(--agil-font-family-mono, monospace);font-size:.9em}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px clamp(16px,4vw,40px);border-top:1px solid var(--agil-color-divider, #e2e8f0);color:var(--agil-color-text-muted, #64748b);font-size:.82em}.demo-footer-links{display:flex;gap:14px}@media(max-width:640px){.demo-row{grid-template-columns:minmax(0,1fr)}.demo-header{gap:10px}.demo-nav{order:3;width:100%;margin-inline-start:0}.demo-header-status{margin-inline-start:0}.demo-call-container{height:68vh}}@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important}}body{font-size:15px}.demo-nav a,.demo-link,.demo-feature p,.demo-hero p,.demo-card h2,.demo-muted{font-size:14px}.demo-pill,.demo-inline-field,.demo-field,.demo-hint,.demo-footer,.demo-status{font-size:13px}.demo-input,.demo-select,.demo-btn{font-size:14px}.demo-pre{font-size:13px;line-height:1.6;white-space:pre;word-break:normal;overflow-wrap:normal;overflow:auto}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}.demo-card{height:100%}.demo-feature h3{font-size:15px}.gf{font-family:var(--gf-font)}.demo-card-head{flex-wrap:wrap}@media(max-width:900px){.demo-grid{grid-template-columns:minmax(0,1fr)}}@media(max-width:520px){.demo-pre{max-width:100%}.demo-card-head{gap:8px}}[hidden]{display:none!important}.demo-call-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;padding:24px;text-align:center;color:var(--agil-color-text-secondary, #475569);background:var(--agil-color-surface, #ffffff)}.demo-call-empty strong{font-size:16px}.demo-call-empty span{font-size:14px;max-width:420px}