.demo-preview,.demo-stage{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-preview svg,.demo-stage svg{vertical-align:initial}.demo-preview-frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid #E5E7EB;background:#f4f5f7;box-shadow:0 18px 48px #1b2d4f29;transition:transform .25s ease,box-shadow .25s ease}.demo-preview-frame:hover{transform:translateY(-4px);box-shadow:0 26px 60px #1b2d4f38}.demo-preview-fade{position:absolute;inset:auto 0 0 0;height:160px;background:linear-gradient(to bottom,#f4f5f700,#f4f5f7f7 78%);pointer-events:none}.demo-live-dot{width:7px;height:7px;border-radius:50%;background:#10b981;animation:demoPulse 2s ease-in-out infinite}@keyframes demoPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}.demo-topbar{background:linear-gradient(90deg,#16264a,#1b2d4f 45%,#223a67)}.demo-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff1f;overflow:hidden}.demo-progress-fill{height:100%;transition:width 1s linear,background .4s ease}.demo-progress-fill--normal{background:linear-gradient(90deg,#f7931e,#ffb457)}.demo-progress-fill--warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.demo-progress-fill--danger{background:linear-gradient(90deg,#dc2626,#f87171)}.demo-countdown{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.2px;border:1px solid transparent;transition:background .3s ease,color .3s ease,border-color .3s ease;flex-shrink:0}.demo-countdown--normal{background:#ffffff1a;color:#ffffffd9;border-color:#ffffff24}.demo-countdown--warn{background:#f59e0b2e;color:#fcd34d;border-color:#f59e0b73}.demo-countdown--danger{background:#dc262638;color:#fca5a5;border-color:#dc26268c;animation:demoCountdownPulse 1s ease-in-out infinite}@keyframes demoCountdownPulse{0%,to{opacity:1}50%{opacity:.55}}.demo-expiry{position:absolute;top:0;right:0;bottom:0;left:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:16px;background:#1018288c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.demo-expiry-card{width:100%;max-width:380px;padding:28px 24px 20px;border-radius:20px;background:rgb(var(--surface-rgb));border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 64px #10182847;text-align:center}.demo-expiry-icon{width:56px;height:56px;margin:0 auto 14px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#6c63ff,#4f46e5);box-shadow:0 8px 20px #6c63ff59}.demo-expiry-title{font-size:18px;font-weight:700;color:rgb(var(--text-rgb));letter-spacing:-.2px}.demo-expiry-text{margin-top:8px;font-size:13px;line-height:1.6;color:rgb(var(--text3-rgb))}.demo-expiry-actions{margin-top:18px;display:flex;flex-direction:column;gap:8px}.demo-expiry-primary{height:44px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,#6c63ff,#4f46e5);box-shadow:0 6px 16px #6c63ff52;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .15s ease,box-shadow .15s ease}.demo-expiry-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px #6c63ff6b}.demo-expiry-secondary-row{display:flex;gap:8px}.demo-expiry-secondary{flex:1;height:38px;border-radius:10px;border:1px solid rgb(var(--border-rgb));background:rgb(var(--surface-rgb));cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:rgb(var(--text3-rgb));display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s ease,color .15s ease,border-color .15s ease}.demo-expiry-secondary:hover{background:rgb(var(--surface2-rgb));color:rgb(var(--text-rgb));border-color:rgb(var(--border2-rgb))}.demo-expiry-foot{margin-top:14px;font-size:11.5px;color:#9ca3af}.dark .demo-expiry{background:#0009}.dark .demo-expiry-card{border-color:rgb(var(--border-rgb));box-shadow:0 24px 64px #0000008c}.dark .demo-expiry-foot{color:rgb(var(--text3-rgb))}.demo-expiry-card-enter{animation:demoExpiryIn .28s cubic-bezier(.22,1,.36,1)}@keyframes demoExpiryIn{0%{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.demo-highlight{position:relative;animation:demoHighlight 1.9s ease-in-out infinite;outline:2px dashed #6C63FF;outline-offset:-2px;border-radius:8px}@keyframes demoHighlight{0%,to{background-color:#6c63ff12}50%{background-color:#6c63ff30}}.demo-highlight-ring{animation:demoHighlightRing 1.9s ease-in-out infinite;outline:2px dashed #6C63FF;outline-offset:3px}@keyframes demoHighlightRing{0%,to{outline-color:#6c63ff73}50%{outline-color:#6c63ff}}.demo-stage-enter{animation:demoStageIn .22s ease-out}@keyframes demoStageIn{0%{opacity:0;transform:scale(.985)}to{opacity:1;transform:scale(1)}}.demo-toast-enter{animation:demoToastIn .2s ease-out}@keyframes demoToastIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.demo-preview-frame{transition:none}.demo-preview-frame:hover{transform:none}.demo-live-dot,.demo-highlight,.demo-highlight-ring,.demo-stage-enter,.demo-toast-enter,.demo-countdown--danger,.demo-expiry-card-enter{animation:none}.demo-highlight{background-color:#6c63ff24}.demo-highlight-ring{outline-color:#6c63ff}.demo-progress-fill,.demo-expiry-primary{transition:none}.demo-expiry-primary:hover{transform:none}}