:root { color-scheme: dark; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #0b0b0b; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  background: #0b0b0b;
  color: #f2f2f2;
  overscroll-behavior: none;
}
button, input { font: inherit; }
button, .file {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
button { color: inherit; background: #191919; border: 1px solid #3a3a3a; border-radius: 8px; min-height: 44px; padding: 0 14px; }
button:disabled { opacity: .35; }
button[data-active="true"] { background: #f2f2f2; color: #0b0b0b; border-color: #f2f2f2; }
main { width: min(860px, 100%); min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: auto; padding: 18px; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: clamp(22px, 5vw, 34px); letter-spacing: .04em; }
#status { color: #9d9d9d; font-size: 12px; text-align: right; }
.stage { display: grid; place-items: center; min-height: 0; }
.frame { position: relative; width: min(100%, 68svh); aspect-ratio: 1; background: #111; border: 1px solid #2b2b2b; overflow: hidden; border-radius: 8px; }
canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; pointer-events: none; }
.overlay span { max-width: 28ch; background: color-mix(in srgb, #0b0b0b 78%, transparent); padding: 8px 10px; border-radius: 6px; }
.controls { display: grid; gap: 10px; }
.modes, .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions[data-mode="guess"] { grid-template-columns: 1fr 1fr 1fr; }
.file { position: relative; overflow: hidden; }
.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.meta { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; color: #aaa; font-size: 12px; }
@media (orientation: landscape) and (max-height: 650px) {
  main { grid-template-columns: minmax(0, 1fr) minmax(260px, 36%); grid-template-rows: auto 1fr; }
  header { grid-column: 1 / -1; }
  .controls { align-content: end; }
  .frame { width: min(100%, calc(100svh - 90px)); }
}