/* Review-only panel. No rules affect the page unless preview mode is enabled. */
.preview-settings {
  position:fixed;
  left:max(12px, env(safe-area-inset-left));
  bottom:max(12px, env(safe-area-inset-bottom));
  z-index:2147483647;
  width:min(320px, calc(100vw - 24px));
  color:#f5f5f2;
  font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  color-scheme:dark;
  pointer-events:none;
}
.preview-settings[data-side="right"] { left:auto; right:max(12px, env(safe-area-inset-right)); }
.preview-settings__panel, .preview-settings__toggle { pointer-events:auto; }
.preview-settings *, .preview-settings *::before, .preview-settings *::after { box-sizing:border-box; }
.preview-settings [hidden] { display:none; }
.preview-settings__panel {
  margin-bottom:8px;
  max-height:min(680px, calc(100dvh - 92px));
  overflow:auto;
  overscroll-behavior:contain;
  border:1px solid #484a43;
  border-radius:18px;
  padding:16px;
  background:#252722;
  box-shadow:0 12px 44px #0005;
}
.preview-settings__header, .preview-settings__row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.preview-settings__header h2 { margin:0; font:600 16px/1.4 system-ui,sans-serif; letter-spacing:-.3px; color:#f5f5f2; }
.preview-settings button, .preview-settings select { font:inherit; color:inherit; cursor:pointer; }
.preview-settings button { border:1px solid #575a50; border-radius:10px; background:#35382f; min-height:44px; padding:8px 12px; }
.preview-settings button:hover { background:#44483c; }
.preview-settings__toggle { box-shadow:0 4px 20px #0003; }
.preview-settings .preview-settings__close { font-size:23px; min-width:44px; padding:0; background:transparent; border-color:transparent; }
.preview-settings .preview-settings__move { margin-left:auto; font-size:20px; min-width:44px; padding:0; background:transparent; border-color:transparent; }
.preview-settings__note { margin:4px 0 14px; color:#c4c7bc; font:400 12px/1.5 system-ui,sans-serif; text-wrap:pretty; }
.preview-settings__field { display:flex; flex-direction:column; gap:6px; margin:0 0 14px; color:#f5f5f2; }
.preview-settings select { width:100%; min-width:0; min-height:44px; padding:8px; border:1px solid #575a50; border-radius:8px; background:#35382f; font-size:16px; }
.preview-settings input[type="range"] { width:100%; min-height:32px; margin:0; accent-color:#ff8580; cursor:ew-resize; }
.preview-settings output { color:#c4c7bc; font-variant-numeric:tabular-nums; white-space:nowrap; }
.preview-settings__group { border:0; border-top:1px solid #484a43; margin:0; padding:0; }
.preview-settings summary { min-height:44px; padding:12px 0; cursor:pointer; font-weight:600; }
.preview-settings__reset { width:100%; margin-top:8px; }
.preview-settings :is(button,select,input,summary):focus-visible { outline:2px solid #ffaaa6; outline-offset:3px; }
@media (pointer:coarse) { .preview-settings input[type="range"] { min-height:44px; } }
@media print { .preview-settings { display:none; } }
/* Keep the close control available while the fields scroll. */
.preview-settings__header { position:sticky; top:-16px; z-index:1; background:#252722; padding-block:4px; }
.preview-settings__experiment { padding-bottom:14px; }
.preview-settings__check { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; font-weight:550; }
.preview-settings input[type="checkbox"] { width:20px; height:20px; accent-color:#ff8580; flex:none; }
.preview-settings__experiment .preview-settings__note { margin:0 0 8px; }
.preview-settings button:disabled { opacity:.45; cursor:default; }
.preview-settings button:disabled:hover { background:#35382f; }