:root{color-scheme:light;--demo-bg: #eef2f7;--demo-surface: #ffffff;--demo-surface-muted: #f8fafc;--demo-border: #cbd5e1;--demo-border-strong: #94a3b8;--demo-text: #0f172a;--demo-text-muted: #475569;--demo-accent: #1d4ed8;--demo-accent-hover: #1e40af;--demo-accent-soft: #dbeafe;--demo-danger: #b91c1c;--demo-radius: 8px;--demo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--demo-mono: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace}html,body{margin:0;background:var(--demo-bg);color:var(--demo-text);font-family:var(--demo-font);font-size:15px;line-height:1.5;text-align:left}.demo{box-sizing:border-box;max-width:820px;margin:0 auto;padding:24px 16px 64px}.demo--wide{max-width:1240px}.demo *,.demo *:before,.demo *:after{box-sizing:border-box}.demo h1{margin:0 0 8px;font-size:22px;line-height:1.3;font-weight:700}.demo h2,.demo h3{margin:0 0 8px;font-size:15px;font-weight:600}.demo code{padding:1px 5px;border-radius:4px;background:#e2e8f0;font-family:var(--demo-mono);font-size:.9em}.demo-intro{margin:0 0 20px;color:var(--demo-text-muted)}.demo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.demo-card{padding:20px;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:12px;box-shadow:0 1px 2px #0f172a0f}.demo-split{display:grid;gap:20px;align-items:start;grid-template-columns:minmax(0,1fr)}@media(min-width:900px){.demo-split--code{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.demo-nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:20px;padding:6px;background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:10px}.demo-tab{padding:7px 12px;border:0;border-radius:6px;background:transparent;color:var(--demo-text-muted);font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}.demo-tab:hover{background:var(--demo-surface-muted);color:var(--demo-text)}.demo-tab[aria-current=page],.demo-tab--active{background:var(--demo-accent-soft);color:var(--demo-accent);font-weight:600}.field{display:block;min-width:0;margin:0}.field__label{display:block;margin-bottom:6px;font-size:14px;font-weight:600;color:var(--demo-text)}.field__control,.demo input:not([type=checkbox],[type=radio],[type=range]),.demo select,.demo textarea{display:block;width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--demo-border-strong);border-radius:var(--demo-radius);background:var(--demo-surface);color:var(--demo-text);font:inherit}.demo input::placeholder,.demo textarea::placeholder{color:#94a3b8}.demo input:focus-visible,.demo select:focus-visible,.demo textarea:focus-visible,.demo button:focus-visible,.demo a:focus-visible{outline:2px solid var(--demo-accent);outline-offset:2px}.demo input:disabled,.demo select:disabled,.demo textarea:disabled{background:#e2e8f0;color:var(--demo-text-muted);cursor:not-allowed}.demo input[readonly]{background:var(--demo-surface-muted)}.demo .field--invalid .field__control,.demo [aria-invalid=true]{border-color:var(--demo-danger)}.field__error,.dfk-field-error{display:block;margin-top:4px;color:var(--demo-danger);font-size:13px}.field__hint{display:block;margin-top:4px;color:var(--demo-text-muted);font-size:13px}.field--inline{display:flex;align-items:center;gap:10px;min-height:40px;font-weight:500}.demo input[type=checkbox],.demo input[type=radio]{width:18px;height:18px;margin:0;accent-color:var(--demo-accent)}.demo input[type=range]{width:100%;accent-color:var(--demo-accent)}.field__options,.dfk-radio-group{display:flex;flex-wrap:wrap;gap:8px 18px;min-height:40px;align-items:center}.field__options label,.dfk-radio-group label{display:inline-flex;align-items:center;gap:6px}.field__range{display:flex;align-items:center;gap:12px;min-height:40px}.field__range output{min-width:2ch;font-variant-numeric:tabular-nums;font-weight:600}.demo-group{grid-column:1 / -1;padding:14px;border:1px dashed var(--demo-border-strong);border-radius:var(--demo-radius);background:var(--demo-surface-muted)}.demo-group>div:not([style]){display:block;margin-bottom:8px;font-size:14px;font-weight:600}.demo-group>div[style]{margin-bottom:10px;align-items:flex-end!important}.demo-group .field{margin-bottom:8px}.btn,.demo-group button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 14px;border:1px solid var(--demo-border-strong);border-radius:var(--demo-radius);background:var(--demo-surface);color:var(--demo-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}.btn:hover,.demo-group button:hover{background:var(--demo-surface-muted);border-color:var(--demo-text-muted)}.btn--primary{border-color:var(--demo-accent);background:var(--demo-accent);color:#fff}.btn--primary:hover{border-color:var(--demo-accent-hover);background:var(--demo-accent-hover)}.btn:disabled,.demo-group button:disabled{border-color:var(--demo-border);background:#e2e8f0;color:#94a3b8;cursor:not-allowed}.demo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}.demo-panel{margin-top:20px;padding:14px 16px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface-muted)}.demo-panel pre,pre.demo-panel{margin:0;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--demo-mono);font-size:13px;line-height:1.55}.demo-panel--warn{border-color:#f59e0b;background:#fffbeb}.demo-panel--danger{border-color:#fca5a5;background:#fef2f2;color:var(--demo-danger)}.demo-notice{margin:0 0 16px;padding:10px 14px;border:1px solid #6ee7b7;border-radius:var(--demo-radius);background:#ecfdf5;font-size:14px}.demo-note{margin:14px 0 0;color:var(--demo-text-muted);font-size:14px}.demo-code{min-width:0;overflow:hidden;border:1px solid #23324a;border-radius:10px;background:#0f172a}.demo-code__bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #23324a;background:#16213a;color:#cbd5e1;font-family:var(--demo-mono);font-size:12px}.demo-code__bar button{padding:4px 10px;border:1px solid #475569;border-radius:6px;background:transparent;color:#e2e8f0;font:inherit;cursor:pointer}.demo-code pre{margin:0;padding:14px;max-height:75vh;overflow:auto;color:#e2e8f0;font-family:var(--demo-mono);font-size:12px;line-height:1.55;white-space:pre}.demo-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:0 0 20px;padding:0;list-style:none}.demo-step{padding:9px 12px;border:1px solid var(--demo-border);border-radius:var(--demo-radius);background:var(--demo-surface-muted);color:var(--demo-text-muted);font-size:14px}.demo-step--current{border-color:var(--demo-accent);background:var(--demo-accent-soft);color:var(--demo-accent);font-weight:600}.demo-step--done{border-color:#6ee7b7;background:#ecfdf5;color:#047857}fieldset.field{min-width:0;margin:0;padding:0;border:0}fieldset.field legend{padding:0}.demo-lang{display:inline-flex;margin-left:auto;border:1px solid var(--demo-border);border-radius:6px;overflow:hidden}.demo-lang button{padding:5px 9px;border:0;background:transparent;color:var(--demo-text-muted);font:inherit;font-size:12px;font-weight:600;cursor:pointer}.demo-lang button[aria-pressed=true]{background:var(--demo-accent);color:#fff}