.preview-banner{position:relative;z-index:50;padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--u-violet-soft);color:var(--u-ink);font:13px/1.5 var(--u-font-ui);border-bottom:1px solid var(--u-rule)}
.preview-banner summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:650;white-space:nowrap}
.preview-options{position:absolute;right:20px;top:60px;width:min(360px,calc(100% - 40px));padding:24px;background:var(--u-page);border:1px solid var(--u-rule);border-radius:var(--u-radius-md);box-shadow:var(--u-shadow-2)}
.preview-options label{display:block;margin-bottom:14px}.preview-options select{width:100%;display:block;min-height:44px;margin-top:6px;background:var(--u-page);color:var(--u-ink);border:1px solid var(--u-field);padding:10px;font:14px var(--u-font-ui)}
.preview-options button{display:block;min-height:44px;width:100%;padding:10px;margin-top:12px;border:1px solid var(--u-field);background:var(--u-page);color:var(--u-ink);border-radius:var(--u-radius-sm);font:14px var(--u-font-ui);cursor:pointer}
.preview-options #preview-open{background:var(--u-violet);color:var(--u-on-violet);border-color:var(--u-violet)}
.preview-options p{font-size:12px;line-height:1.6}
@media(max-width:600px){.preview-banner{padding:8px 18px;align-items:start;gap:12px;font-size:12px}.preview-banner>span{max-width:190px}.preview-banner summary{white-space:normal;max-width:100px}}