:root {
  --chassis: #0c0e12;
  --smoke: #171c24;
  --smoke_edge: #2c3440;
  --smoke_glass: #0f1319;
  --aluminum: #c5ccd6;
  --aluminum_dim: #8d96a3;
  --amber: #e8a317;
  --amber_hot: #ffc14d;
  --rec: #d42a2a;
  --rec_hot: #ff4d4d;
  --led_green: #3ad66a;
  --ink: #e6ebf2;
  --muted: #8b95a3;
  --lcd_bg: #15110a;
  --lcd_ink: #e09a1a;
  --focus: #ffc14d;
}

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

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

body {
  background:
    radial-gradient(ellipse at 50% -10%, #2a2418 0%, transparent 42%),
    repeating-linear-gradient(
      90deg,
      #0a0c10 0 2px,
      #0e1014 2px 3px
    );
  background-color: var(--chassis);
  color: var(--ink);
  font-family: "Trebuchet MS", "Gill Sans", "Century Gothic", sans-serif;
  line-height: 1.45;
}

[hidden] {
  display: none !important;
}

.deck_shell {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3.5rem;
}

.faceplate {
  position: relative;
  padding: 1.35rem 1.2rem 1.2rem;
  border: 1px solid var(--smoke_edge);
  border-bottom: 0;
  background:
    linear-gradient(180deg, #222833 0%, var(--smoke) 38%, #12161d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
}

.faceplate::before,
.faceplate::after,
.transport::before,
.transport::after {
  content: "";
  position: absolute;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #eceff3 0 18%, #7d8693 42%, #3a4048 100%);
  box-shadow: 0 0 0 2px #0b0d11;
}

.faceplate::before {
  top: 0.55rem;
  left: 0.55rem;
}

.faceplate::after {
  top: 0.55rem;
  right: 0.55rem;
}

.kicker {
  margin: 0 0 0.45rem;
  font-family: "Arial Narrow", "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--aluminum_dim);
}

h1 {
  margin: 0;
  font-family: "Arial Narrow", "Trebuchet MS", "Century Gothic", sans-serif;
  font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--aluminum);
}

.lede {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  color: var(--muted);
}

.stamp_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.stamp_row li {
  padding: 0.15rem 0.45rem;
  border: 1px solid #5a4630;
  color: var(--amber);
  font-family: "Arial Narrow", "Trebuchet MS", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}

.status_message {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid #6b2a2a;
  background: #2a1515;
  color: #f2c8c8;
}

.file_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.cassette_well {
  position: relative;
  min-height: 18rem;
  padding: 1.25rem 1rem 1.4rem;
  border: 1px solid var(--smoke_edge);
  background:
    linear-gradient(180deg, #0f1218 0%, #1a2028 55%, #10141a 100%);
  cursor: pointer;
}

.cassette_well.is_dragging {
  outline: 2px solid var(--amber);
  outline-offset: -6px;
}

.window_frame {
  max-width: 28rem;
  margin: 0 auto;
  padding: 0.85rem 0.9rem 0.7rem;
  border: 1px solid #3a4250;
  background: linear-gradient(180deg, #2b323e, #161b22);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.cassette_window {
  display: grid;
  grid-template-columns: 4.4rem 1fr 4.4rem;
  align-items: center;
  min-height: 6.2rem;
  padding: 0.55rem 0.7rem;
  background:
    linear-gradient(180deg, rgba(20, 80, 90, 0.18), rgba(8, 10, 14, 0.72)),
    repeating-linear-gradient(
      90deg,
      #1a222c 0 10px,
      #151b23 10px 20px
    );
  border: 1px solid #0a0c10;
}

.reel {
  width: 4.1rem;
  height: 4.1rem;
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      #1c222b 0 18deg,
      #0e1116 18deg 30deg
    );
  border: 3px solid #c9a24a;
  display: grid;
  place-items: center;
}

.hub {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--aluminum);
}

.tape_bridge {
  height: 0.55rem;
  background: linear-gradient(#4a3018, #2a1a0e);
  box-shadow: 0 8px 0 #1a120c;
}

.cassette_window.is_spinning .reel_left {
  animation: spin_reel 2.6s linear infinite;
}

.cassette_window.is_spinning .reel_right {
  animation: spin_reel 2s linear infinite;
}

.cassette_window.is_encoding .reel_left,
.cassette_window.is_encoding .reel_right {
  animation-duration: 0.7s;
}

@keyframes spin_reel {
  to {
    transform: rotate(360deg);
  }
}

.tape_label {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
  padding: 0.35rem 0.5rem;
  background: #d8c7a2;
  color: #2a2116;
  font-family: "Lucida Console", "Menlo", "Consolas", monospace;
  font-size: 0.78rem;
}

.tape_label_mark {
  letter-spacing: 0.12em;
  font-size: 0.68rem;
}

.tape_label_title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 70%;
}

.drop_copy {
  text-align: center;
  padding: 1.1rem 0.5rem 0.2rem;
}

.drop_title {
  margin: 0;
  font-family: "Arial Narrow", "Trebuchet MS", sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.drop_hint {
  margin: 0.4rem 0 1rem;
  color: var(--muted);
}

.choose_file_button {
  display: inline-block;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--aluminum_dim);
  background: #242b35;
  color: var(--aluminum);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}

.transport {
  position: relative;
  padding: 1.2rem 1.1rem 1.4rem;
  border: 1px solid var(--smoke_edge);
  border-top: 0;
  background: linear-gradient(180deg, #151920, #0f1319 70%);
}

.transport::before {
  bottom: 0.55rem;
  left: 0.55rem;
}

.transport::after {
  bottom: 0.55rem;
  right: 0.55rem;
}

.lcd {
  padding: 0.75rem 0.8rem 0.7rem;
  background: var(--lcd_bg);
  color: var(--lcd_ink);
  font-family: "Lucida Console", "Menlo", "Consolas", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 2px #070805;
}

.lcd_row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin-bottom: 0.45rem;
}

.lcd_tag {
  color: #8a6a22;
}

.lcd_progress {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: center;
}

progress {
  width: 100%;
  height: 0.55rem;
  border: 0;
  background: #2a220f;
}

progress::-webkit-progress-bar {
  background: #2a220f;
}

progress::-webkit-progress-value {
  background: var(--lcd_ink);
}

progress::-moz-progress-bar {
  background: var(--lcd_ink);
}

.vu_row {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 0.45rem;
  align-items: center;
  margin: 0.85rem 0 1.1rem;
}

.vu_caption {
  font-family: "Arial Narrow", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.vu_bar {
  height: 0.55rem;
  background: linear-gradient(90deg, #1f7a3a 0%, #c9a024 72%, #d42a2a 100%);
  transform-origin: left center;
  transform: scaleX(0.08);
  box-shadow: 0 0 8px rgba(58, 214, 106, 0.25);
}

.field_header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.field_label {
  font-family: "Arial Narrow", "Trebuchet MS", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--aluminum_dim);
}

.field_value {
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

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

#bitrate_slider {
  width: 100%;
  margin: 0.7rem 0 0;
  accent-color: var(--rec);
}

.preview_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 1.15rem;
}

.preview_block audio {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  height: 2.4rem;
}

.button_row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  margin-top: 1.2rem;
}

.rec_button,
.stop_button {
  font: inherit;
  cursor: pointer;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 2.8rem;
  padding: 0.7rem 1rem;
}

.rec_button {
  border: 0;
  background: radial-gradient(circle at 50% 30%, var(--rec_hot), var(--rec));
  color: #fff4f4;
  box-shadow: 0 0 0 3px #3a1212;
}

.rec_button:disabled {
  opacity: 0.4;
  cursor: wait;
}

.stop_button {
  border: 1px solid var(--aluminum_dim);
  background: #1c222b;
  color: var(--aluminum);
  min-width: 7.5rem;
}

.deck_foot {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.8rem;
}

.choose_file_button:focus-visible,
.rec_button:focus-visible,
.stop_button:focus-visible,
#bitrate_slider:focus-visible,
.file_input:focus-visible,
audio:focus-visible,
body:has(.file_input:focus-visible) .choose_file_button {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .preview_row,
  .button_row {
    grid-template-columns: 1fr;
  }

  .cassette_window {
    grid-template-columns: 3.4rem 1fr 3.4rem;
    min-height: 5.2rem;
  }

  .reel {
    width: 3.2rem;
    height: 3.2rem;
  }

  h1 {
    font-size: clamp(1.8rem, 11vw, 2.6rem);
  }
}