.jd-demo{--jd-page: var(--surface-page,#f6f5fa);--jd-card: var(--surface-card,#ffffff);--jd-soft: var(--surface-soft,#f7f5fb);--jd-sunken: var(--surface-sunken,#efebf5);--jd-border: var(--border,#e4dfec);--jd-border-strong: var(--border-strong,#cfc5dd);--jd-text: var(--text,#1d1530);--jd-muted: var(--text-muted,#5f5973);--jd-subtle: var(--text-subtle,#69627e);--jd-brand: var(--brand,#4b286d);--jd-brand-strong: var(--brand-strong,#32164a);--jd-brand-tint: var(--brand-tint,#f2ecf8);--jd-on-brand: var(--text-on-brand,#ffffff);--jd-ring: var(--focus-ring,#6f3ca0);--jd-ring-offset: var(--focus-ring-offset,#ffffff);--jd-ok: #1f7a4d;--jd-ok-tint: #e3f4ea;--jd-warn: #8a5a00;--jd-warn-tint: #fdf1d8;--jd-bad: #b3261e;--jd-bad-tint: #fbe4e2;--jd-font: var(--font-body,"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif);--jd-font-display: var(--font-display,"Sora","Inter",ui-sans-serif,system-ui,"Segoe UI",sans-serif);--jd-mono: var(--font-mono,ui-monospace,SFMono-Regular,"Cascadia Mono",Consolas,monospace);--jd-r-sm: var(--r-sm,8px);--jd-r-md: var(--r-md,12px);--jd-r-lg: var(--r-lg,16px);--jd-r-pill: 999px;--jd-tap: var(--tap,44px);--jd-fast: var(--dur-fast,120ms);--jd-base: var(--dur-base,180ms);--jd-ease: var(--ease-out,cubic-bezier(.2,.8,.3,1));--jd-shadow: 0 1px 2px rgba(29,21,48,.06),0 8px 24px rgba(29,21,48,.08);font-family: var(--jd-font);color: var(--jd-text);font-size: 15px;line-height: 1.5;-webkit-font-smoothing: antialiased;}[data-theme="dark"] .jd-demo{--jd-ok: #5fd39a;--jd-ok-tint: rgba(95,211,154,.14);--jd-warn: #f2c063;--jd-warn-tint: rgba(242,192,99,.14);--jd-bad: #ff8a84;--jd-bad-tint: rgba(255,138,132,.14);--jd-shadow: 0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);}.jd-demo *,.jd-demo *::before,.jd-demo *::after{box-sizing: border-box;}.jd-frame{background: var(--jd-card);border: 1px solid var(--jd-border);border-radius: var(--jd-r-lg);box-shadow: var(--jd-shadow);overflow: hidden;}.jd-bar{display: flex;align-items: center;gap: 12px;padding: 10px 16px;border-bottom: 1px solid var(--jd-border);background: var(--jd-soft);font-size: 13px;color: var(--jd-muted);}.jd-bar-title{font-weight: 600;color: var(--jd-text);}.jd-bar-spacer{flex: 1;}.jd-body{padding: 20px;}@media (max-width: 560px){.jd-body{padding: 14px;}}.jd-h{font-family: var(--jd-font-display);font-weight: 600;letter-spacing: -0.01em;margin: 0;}.jd-muted{color: var(--jd-muted);}.jd-mono{font-family: var(--jd-mono);font-size: .92em;}.jd-visually-hidden{position: absolute !important;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0 0 0 0);white-space: nowrap;border: 0;}.jd-btn{display: inline-flex;align-items: center;justify-content: center;gap: 8px;min-height: 40px;padding: 0 16px;font: inherit;font-weight: 600;font-size: 14px;border-radius: var(--jd-r-sm);border: 1px solid var(--jd-border-strong);background: var(--jd-card);color: var(--jd-text);cursor: pointer;transition: background var(--jd-fast) var(--jd-ease),border-color var(--jd-fast) var(--jd-ease),transform var(--jd-fast) var(--jd-ease);}.jd-btn:hover{background: var(--jd-soft);}.jd-btn:active{transform: translateY(1px);}.jd-btn[disabled]{opacity: .55;cursor: not-allowed;transform: none;}.jd-btn-primary{background: var(--jd-brand);border-color: var(--jd-brand);color: var(--jd-on-brand);}.jd-btn-primary:hover{background: var(--jd-brand-strong);border-color: var(--jd-brand-strong);}.jd-btn-ghost{background: transparent;border-color: transparent;color: var(--jd-muted);}.jd-btn-ghost:hover{background: var(--jd-sunken);color: var(--jd-text);}.jd-btn-sm{min-height: 32px;padding: 0 10px;font-size: 13px;}.jd-field{display: grid;gap: 6px;}.jd-label{font-size: 13px;font-weight: 600;}.jd-hint{font-size: 12.5px;color: var(--jd-muted);}.jd-input{width: 100%;min-height: 42px;padding: 8px 12px;font: inherit;color: var(--jd-text);background: var(--jd-card);border: 1px solid var(--jd-border-strong);border-radius: var(--jd-r-sm);}.jd-input::placeholder{color: var(--jd-subtle);}.jd-pill{display: inline-flex;align-items: center;gap: 6px;padding: 2px 10px;border-radius: var(--jd-r-pill);font-size: 12px;font-weight: 600;line-height: 1.6;background: var(--jd-sunken);color: var(--jd-muted);border: 1px solid transparent;}.jd-pill-ok{background: var(--jd-ok-tint);color: var(--jd-ok);}.jd-pill-warn{background: var(--jd-warn-tint);color: var(--jd-warn);}.jd-pill-bad{background: var(--jd-bad-tint);color: var(--jd-bad);}.jd-pill-brand{background: var(--jd-brand-tint);color: var(--jd-brand);}.jd-demo :focus-visible{outline: 2px solid var(--jd-ring);outline-offset: 2px;border-radius: 6px;}.jd-fallback{padding: 20px;color: var(--jd-muted);font-size: 14px;}@media (prefers-reduced-motion: reduce){.jd-demo *,.jd-demo *::before,.jd-demo *::after{animation: none !important;transition: none !important;}}.jd-demo:has(> .jd-fallback)[data-jd-demo="payments-sync"]{min-height: 1701px;}.jd-demo:has(> .jd-fallback)[data-jd-demo="secure-dashboard"]{min-height: 535px;}.jd-demo:has(> .jd-fallback)[data-jd-demo="help-assistant"]{min-height: 885px;}@media (max-width: 1023px){.jd-demo:has(> .jd-fallback)[data-jd-demo="payments-sync"]{min-height: 2261px;}.jd-demo:has(> .jd-fallback)[data-jd-demo="secure-dashboard"]{min-height: 840px;}.jd-demo:has(> .jd-fallback)[data-jd-demo="help-assistant"]{min-height: 1444px;}}@media (max-width: 560px){.jd-demo:has(> .jd-fallback)[data-jd-demo="payments-sync"]{min-height: 2855px;}.jd-demo:has(> .jd-fallback)[data-jd-demo="secure-dashboard"]{min-height: 1038px;}.jd-demo:has(> .jd-fallback)[data-jd-demo="help-assistant"]{min-height: 1675px;}}