.demo-lazy{width:100%;min-width:0}.demo-frame{height:var(--demo-h);background:#fafaf9;border:1px solid #d9d7f0;border-radius:16px;overflow:hidden;box-shadow:0 12px 32px #232b4512}.demo-bar{color:#52525b;background:#fff;border-bottom:1px solid #e7e7ea;align-items:center;gap:12px;height:42px;padding:0 14px;font-size:11px;display:flex}.demo-browser-dots{gap:4px;display:flex}.demo-browser-dots i{background:#d4d4d8;border-radius:50%;width:6px;height:6px}.demo-view-label{margin-left:auto;font-size:10px}.demo-surface{--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;color:#0e0e12;height:calc(100% - 42px);font-family:var(--font-sans,system-ui);background:#fafaf9;line-height:1.5}.demo-inner{height:100%;min-height:0;padding:16px}.demo-fit-viewport{width:100%;height:100%}.landing-page .demo-surface a{color:revert-layer}.demo-placeholder{--demo-h:520px;min-height:calc(var(--demo-h) + 196px);color:#646a82;background:#fafaf9;border:1px solid #d9d7f0;border-radius:16px;place-items:center;font-size:14px;display:grid}.demo-surface .text-amber-300{color:#92400e}.demo-surface .dashboard .bg-\[\#1a4a80\],.demo-surface .dashboard .bg-\[\#082448\]{background:#eef2ff}.demo-surface .dashboard button.bg-\[\#175ddc\]{color:#fff!important}@media (max-width:640px){.demo-placeholder{--demo-h:560px}.demo-frame{border-radius:22px}.demo-browser-dots{display:none}.demo-bar{font-size:10px}}