:root {
  --brand:#f04444;
  --brand-hover:#dc3038;
  --brand-tint:#fff0f0;
  --app-background:#f6f7fa;
  --app-surface:#fff;
  --app-text:#202332;
  --app-muted:#858998;
  --app-border:#eceef2;
}
:root:not([data-theme="dark"]) {
  --paper:var(--app-background); --bg:var(--app-background); --surface:var(--app-surface);
  --ink:var(--app-text); --muted:var(--app-muted); --line:var(--app-border);
  --accent:var(--brand); --accent-strong:var(--brand-hover); --accent-soft:var(--brand-tint);
}
.preview-banner { display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px var(--page-gutter,24px);background:var(--accent-soft);color:var(--accent-strong);font-size:12px; }
.preview-banner a { color:inherit;text-decoration:none;font-weight:700;white-space:nowrap; }
body:has(.preview-banner) .workspace>.topbar { top:54px; }
@media(max-width:760px) { .preview-banner { font-size:10px;min-height:44px; }.preview-banner span{max-width:220px}body:has(.preview-banner) .workspace>.topbar{top:62px} }