* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #f0ede8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: 'Courier New', monospace;
  padding: 2rem 1rem;
  gap: 1rem;
}

h1 {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: #888;
  text-transform: uppercase;
}

#drop-zone {
  width: 360px;
  height: 160px;
  border: 2px dashed #bbb;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s;
  color: #999;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  gap: 8px;
}
#drop-zone:hover, #drop-zone.over { border-color: #222; background: #f0ede8; color: #222; }
#drop-zone input { display: none; }
#drop-zone svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* 9:16 preview — scaled down */
#wrap {
  position: relative;
  width: 270px;
  height: 480px;
  border: 1px solid #ccc;
  background: #f8f8f8;
  display: none;
}
#wrap canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.controls { display: none; flex-direction: column; align-items: center; gap: 0.9rem; width: 360px; }
.row { display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.ctrl { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: #666; letter-spacing: 0.08em; text-transform: uppercase; }
.ctrl span { font-size: 13px; color: #222; font-weight: bold; }
input[type=range] { width: 100px; accent-color: #222; cursor: pointer; }

.btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
button {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid #222;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
button:hover { background: #222; color: #f0ede8; }
button.active { background: #222; color: #f0ede8; }

#progress-wrap { width: 360px; height: 3px; background: #ddd; display: none; }
#progress-bar { width: 0%; height: 3px; background: #c00; transition: width 0.2s linear; }
#rec-status { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #888; min-height: 16px; text-align: center; }
#rec-status.recording { color: #c00; }