:root { color-scheme: dark; --line: #23252e; --text: #8d91a0; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { display: flex; flex-direction: column; height: 100dvh; }
iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
#viewer { position: relative; flex: none; aspect-ratio: 16 / 9; max-height: 60dvh; margin-top: env(safe-area-inset-top); }
#controls { flex: 1; min-height: 0; border-top: 1px solid var(--line); }
#tools {
  position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
  pointer-events: none;
}
button, select {
  font: 13px/1 system-ui, "Segoe UI", sans-serif; color: var(--text); background: rgba(12, 13, 18, .72);
  border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 6px 12px; touch-action: manipulation;
  pointer-events: auto;
}
button:focus-visible, select:focus-visible { outline: 2px solid #7486aa; outline-offset: 1px; }
.clean #viewer { flex: 1; aspect-ratio: auto; max-height: none; margin: 0; }
.clean #controls { display: none; }
[hidden] { display: none !important; }
@media (min-width: 900px), (orientation: landscape) {
  body { flex-direction: row; }
  #viewer { flex: 1; min-width: 0; aspect-ratio: auto; max-height: none; margin: 0; padding-left: env(safe-area-inset-left); }
  #controls { flex: none; width: clamp(300px, 32vw, 420px); padding-right: env(safe-area-inset-right); border-top: 0; border-left: 1px solid var(--line); }
}