:root {
  --studio: #140c08;
  --teak: #7a4520;
  --teak_dark: #3e2212;
  --teak_mid: #8d5328;
  --teak_light: #b06a34;
  --oxide: #5a2c12;
  --oxide_hot: #8a4420;
  --leader: #f4efe4;
  --leader_dim: #d9d0c0;
  --brass: #c4a35a;
  --brass_deep: #8a6e32;
  --steel: #7a7468;
  --ink: #f4efe4;
  --muted: #cbb79a;
  --vu_face: #d7c49a;
  --vu_red: #9a1c1c;
  --focus: #e8d5a3;
  --error: #f0c4a8;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background-color: var(--studio);
  background-image:
    radial-gradient(ellipse at 50% -20%, #3a2214 0%, transparent 52%),
    repeating-linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.18) 0 1px,
      transparent 1px 7px
    );
  color: var(--ink);
  font-family: Candara, Calibri, "Lucida Sans", "Lucida Sans Unicode", sans-serif;
  line-height: 1.45;
}

[hidden] {
  display: none !important;
}

.bay {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3.5rem;
}

.nameplate {
  position: relative;
  padding: 1.15rem 1.25rem 1.2rem 1.55rem;
  margin-bottom: 1.1rem;
  background:
    linear-gradient(90deg, #b08a3e 0%, var(--brass) 18%, #efe0b0 48%, var(--brass) 82%, #8a6e32 100%);
  color: #2a1a0c;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 210, 0.7),
    0 0 0 3px #2a160c,
    0 8px 0 #1a0e08;
}

.nameplate::before,
.nameplate::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #efe0b0, #6a5220);
  box-shadow: inset 0 0 0 1px #3a2810;
}

.nameplate::before {
  left: 0.45rem;
}

.nameplate::after {
  right: 0.45rem;
  top: auto;
  bottom: 0.85rem;
}

.kicker {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass_deep);
}

h1 {
  margin: 0.2rem 0 0;
  font-family: Rockwell, "Rockwell Extra Bold", "Courier New", serif;
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.02em;
  line-height: 1;
}

.lede {
  max-width: 40rem;
  margin: 0.65rem 0 0;
  color: #4a3418;
}

.status_message {
  margin: 0 0 1rem;
  padding: 0.7rem 0.85rem;
  background: var(--error);
  color: #2a140c;
  border-left: 6px solid var(--oxide_hot);
}

.file_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.deck {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 132px;
  gap: 0.85rem;
  align-items: stretch;
  padding: 1.1rem;
  background-color: var(--teak);
  background-image:
    repeating-linear-gradient(
      90deg,
      rgba(40, 18, 8, 0.18) 0 2px,
      rgba(255, 210, 150, 0.07) 3px,
      transparent 6px,
      rgba(20, 8, 4, 0.22) 11px,
      transparent 16px
    ),
    linear-gradient(180deg, var(--teak_light) 0%, var(--teak_mid) 42%, var(--teak_dark) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 210, 160, 0.28),
    inset 0 -8px 18px rgba(20, 8, 4, 0.45),
    0 0 0 4px #24140c;
}

.reel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.reel_platter {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      #3a1c0c 0deg 8deg,
      #241008 8deg 12deg,
      #4a2410 12deg 18deg
    );
  box-shadow:
    inset 0 0 0 7px #2a160c,
    inset 0 0 0 9px var(--brass_deep),
    0 6px 0 #1a0c08;
}

.reel_spoke {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 18deg,
      transparent 0 28deg,
      #c4a35a 28deg 34deg,
      transparent 34deg 88deg,
      #c4a35a 88deg 94deg,
      transparent 94deg 148deg,
      #c4a35a 148deg 154deg,
      transparent 154deg 208deg,
      #c4a35a 208deg 214deg,
      transparent 214deg 268deg,
      #c4a35a 268deg 274deg,
      transparent 274deg 328deg,
      #c4a35a 328deg 334deg,
      transparent 334deg 360deg
    );
}

.reel_hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 32% 32%, #efe0b0, var(--brass) 45%, #6a5220);
  box-shadow: inset 0 0 0 2px #3a2810;
}

.deck.is_rolling .reel_platter {
  animation: reel_spin 1.8s linear infinite;
}

.reel_takeup .reel_platter {
  animation-duration: 2.4s;
}

@keyframes reel_spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.reel_caption {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leader_dim);
}

.splice_block {
  position: relative;
  min-height: 16.5rem;
  background: linear-gradient(180deg, #9a9388 0%, #6e685e 48%, #4e4840 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.25),
    inset 0 -10px 16px rgba(20, 12, 8, 0.45);
  cursor: pointer;
}

.splice_block.is_dragging {
  outline: 3px dashed var(--leader);
  outline-offset: -8px;
}

.leader_edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--leader) 0 18px,
    var(--leader_dim) 18px 20px
  );
  box-shadow: 0 1px 0 #2a1a10;
}

.drop_copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 16.5rem;
  padding: 2rem 1.25rem 1.4rem;
}

.drop_title {
  margin: 0;
  font-family: Rockwell, "Courier New", serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--leader);
}

.drop_hint {
  margin: 0.4rem 0 1rem;
  color: #ece6d8;
}

.choose_file_button,
.play_button,
.download_button,
.unload_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  border: 0;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.choose_file_button {
  background: var(--leader);
  color: #2a160c;
}

.choose_file_button:hover,
.play_button:hover:not(:disabled),
.download_button:hover:not(:disabled) {
  filter: brightness(1.08);
}

.trim_stage {
  position: relative;
  z-index: 1;
  padding: 1.35rem 0.7rem 0.7rem;
}

.waveform_label {
  margin: 0 0 0.4rem 0.2rem;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leader);
}

.tape_path {
  position: relative;
  height: 12.5rem;
  background: #140c08;
  box-shadow: inset 0 0 0 1px #2a160c;
  overflow: visible;
}

.waveform_canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--brass);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 2;
}

.splice_handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  cursor: ew-resize;
  z-index: 3;
  touch-action: none;
}

.splice_handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 12px;
  transform: translateX(-50%);
  background: var(--leader);
  box-shadow: 0 0 0 1px #2a160c;
}

.handle_tab {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  min-width: 2.4rem;
  padding: 0.15rem 0.28rem;
  background: var(--leader);
  color: #2a160c;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 1px 0 #2a160c;
}

.transport {
  margin-top: 0.9rem;
  padding: 1rem 1rem 1.15rem;
  background: #24140c;
  box-shadow: inset 0 1px 0 rgba(196, 163, 90, 0.25);
}

.vu_pair {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.95rem;
}

.vu_meter {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.vu_caption {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--brass);
}

.vu_face {
  position: relative;
  flex: 1;
  height: 4.4rem;
  background: radial-gradient(ellipse at 50% 120%, #eee0b8, var(--vu_face) 55%, #a89260);
  border-radius: 4.4rem 4.4rem 0.4rem 0.4rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 2px #3a2810;
}

.vu_scale {
  position: absolute;
  inset: 0.2rem 0.4rem 0;
  width: calc(100% - 0.8rem);
  height: calc(100% - 0.2rem);
}

.vu_needle {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 2px;
  height: 3.1rem;
  background: #2a1208;
  transform-origin: bottom center;
  transform: rotate(-46deg);
}

.readout_row,
.cut_row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.readout {
  min-width: 0;
  padding: 0.45rem 0.55rem;
  background: #140c08;
  border-top: 2px solid var(--brass_deep);
}

.readout_label,
.field_label {
  display: block;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.readout_value,
.timecode,
.length_value {
  display: block;
  margin: 0.2rem 0 0;
  font-family: "Courier New", "Lucida Console", monospace;
  font-size: 0.95rem;
  color: var(--leader);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field {
  min-width: 0;
}

.field_controls {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.field input {
  width: 6.2rem;
  min-height: 2.4rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--brass_deep);
  background: #140c08;
  color: var(--leader);
  font: inherit;
  font-family: "Courier New", "Lucida Console", monospace;
}

.length_value {
  margin-top: 0.55rem;
  font-size: 1.15rem;
}

.button_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.play_button {
  background: var(--leader);
  color: #2a160c;
}

.download_button {
  background: var(--oxide_hot);
  color: var(--leader);
}

.unload_button {
  background: transparent;
  color: var(--leader);
  box-shadow: inset 0 0 0 2px var(--brass_deep);
}

.play_button:disabled,
.download_button:disabled,
.unload_button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.field_note {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .deck {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "supply takeup"
      "splice splice";
  }

  .reel_supply {
    grid-area: supply;
  }

  .reel_takeup {
    grid-area: takeup;
  }

  .splice_block {
    grid-area: splice;
  }

  .reel_platter {
    width: 84px;
    height: 84px;
  }

  .readout_row,
  .cut_row {
    grid-template-columns: 1fr 1fr;
  }

  .vu_pair {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .readout_row,
  .cut_row {
    grid-template-columns: 1fr;
  }

  .button_row {
    flex-direction: column;
  }

  .button_row button {
    width: 100%;
  }

  .tape_path {
    height: 10.5rem;
  }
}