.demo-preview{margin:0;font:15px/1.4 system-ui;color:var(--brand-dark);background:var(--brand-cream);height:100dvh;overflow:hidden}.preview-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:14px;padding:14px 20px;background:var(--brand-surface,#fff);border-bottom:2px solid var(--brand-orange);position:relative;z-index:2}.preview-toolbar>div{display:flex;gap:6px;flex-wrap:wrap}.preview-toolbar button,.preview-toolbar a{font:inherit;color:var(--brand-blue);background:var(--brand-surface,#fff);border:1px solid var(--brand-border);border-radius:9px;padding:9px 14px;cursor:pointer;text-decoration:none}.preview-toolbar button[aria-pressed=true]{background:var(--brand-blue-pale);border-color:var(--brand-blue);font-weight:650}.preview-toolbar button:disabled{opacity:.45;cursor:default}.preview-toolbar>a{margin-left:auto}.preview-toolbar details>p{position:absolute;background:var(--brand-surface,#fff);border:1px solid var(--brand-border);padding:16px;border-radius:12px;max-width:320px;right:20px;box-shadow:0 8px 24px #0002}.preview-toolbar summary{cursor:pointer;list-style:none}.preview-stage{height:calc(100dvh - var(--preview-toolbar-height,80px));display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--brand-blue-pale)}.preview-device{flex:none;transform:scale(var(--preview-scale,1));transform-origin:center;box-sizing:content-box;box-shadow:0 16px 50px #0003;background:#17212f;border:12px solid #17212f;border-radius:14px;overflow:hidden}.preview-device[data-device-frame=tablet]{border-width:20px;border-radius:32px}.preview-device[data-device-frame=phone]{border-width:12px;border-radius:40px}.preview-device iframe{border:0;display:block;width:100%;height:100%;background:#fff}.demo-preview:not(.has-device-controls) .preview-toolbar{display:none}.demo-preview:not(.has-device-controls) .preview-stage{height:100dvh}.demo-preview:not(.has-device-controls) .preview-device{border:0;border-radius:0;box-shadow:none}