.preview-icon {
  width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(12,14,17,0.78);
  color: #f2f3f5; display: grid; place-items: center; cursor: pointer; box-shadow: none;
}
.preview-icon::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  mask: url('./icons/maximize.svg') center / contain no-repeat;
  -webkit-mask: url('./icons/maximize.svg') center / contain no-repeat;
}
.preview-icon:hover { background: #262a30; }
.preview-icon:focus-visible { outline: 2px solid var(--accent, #55ddb1); outline-offset: 3px; }
.preview-icon:disabled { opacity: 0.45; cursor: default; }
.editor-grid.workbench-ready .workbench-dock:has(> .preview-controls-toolbar) {
  grid-template-rows: 44px auto minmax(0, 1fr);
}
body.minimal-editor .editor-grid.workbench-ready .workbench-dock:has(> .preview-controls-toolbar) {
  grid-template-rows: 44px minmax(0, 1fr) 58px;
}
.preview-controls-toolbar { display: flex; align-items: center; min-width: 0; height: 44px; }
.preview-expand { border: 0; background: transparent; color: var(--text, #f2f3f5); }
.preview-expand::before { width: 20px; height: 20px; }
.preview-expand:hover { background: var(--panel, #262a30); }
.preview-fullscreen {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; border: 0; border-radius: 0; padding: 0; background: #07090b; color: #f2f3f5;
  overflow: hidden; letter-spacing: 0;
}
.preview-fullscreen[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.preview-fullscreen::backdrop { background: #07090b; }
.preview-fullscreen-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left));
}
.preview-fullscreen-name { font-size: 16px; font-weight: 700; }
.preview-collapse::before { mask-image: url('./icons/minimize.svg'); -webkit-mask-image: url('./icons/minimize.svg'); }
.preview-fullscreen-stage { min-height: 0; min-width: 0; display: grid; place-items: center; overflow: hidden; }
body.preview-is-fullscreen .preview-fullscreen .canvas-stack {
  max-width: none; max-height: none; min-width: 0; min-height: 0; margin: 0; border: 0;
  border-radius: 0; box-shadow: none; flex: none;
}
.preview-fullscreen .preview-expand, .preview-fullscreen .text-hitbox-overlay { display: none; }
.preview-fullscreen-controls {
  display: grid; grid-template-columns: 44px 55px minmax(0, 1fr) 55px; align-items: center; gap: 12px;
  padding: 16px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}
.preview-play::before { mask-image: url('./icons/play.svg'); -webkit-mask-image: url('./icons/play.svg'); }
.preview-play.is-playing::before { mask-image: url('./icons/pause.svg'); -webkit-mask-image: url('./icons/pause.svg'); }
.preview-time { font-size: 12px; font-variant-numeric: tabular-nums; color: #c7ccd2; text-align: center; white-space: nowrap; }
.preview-fullscreen input.preview-seek {
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 44px;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
}
.preview-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(to right, #e9edf1 var(--seek-progress, 0%), #454a51 var(--seek-progress, 0%));
}
.preview-seek::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: #f2f3f5; border: 0;
}
.preview-seek::-moz-range-track { height: 4px; background: #454a51; }
.preview-seek::-moz-range-progress { height: 4px; background: #e9edf1; }
.preview-seek::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #f2f3f5; border: 0; }
.preview-seek:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 380px) { .preview-fullscreen-controls { gap: 6px; padding-left: 12px; padding-right: 12px; } }
@media (max-height: 460px) and (orientation: landscape) {
  .preview-fullscreen-header { padding-top: 4px; padding-bottom: 4px; }
  .preview-fullscreen-controls { padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
}