.listen {
  --mow-a: var(--page-ground);
  --mow-b: #112818;
  --mow-h: 128px;
  --chalk-line: color-mix(in oklab, var(--cream), transparent 87%);
  --panel-r: clamp(18px, 2vw, 30px);
  --fg: clamp(12px, 2.8vw, 48px);
  --pp: clamp(18px, 3.2vw, 56px);

  --d-w: clamp(180px, 20vw, 300px);
  --d-h: clamp(54px, 6vw, 90px);
}

html:has(body.listen) { background: var(--mow-a); scrollbar-color: var(--pale) var(--mow-a); }

body.listen {
  background-color: var(--mow-a);

  background-image: none;
  color: var(--cream);
}

.listen .lhead { background: transparent; }

.listen .lhead__meter {
  margin-inline: var(--fg);
  padding-inline: max(0px, calc(var(--inset) - var(--fg)));
  border-bottom: 2px solid var(--chalk-line);
}

.listen .desk {
  background: transparent;
  padding-inline: var(--fg);
  padding-block: clamp(28px, 4vw, 56px) 0;
}
.listen .desk__in {
  position: relative;
  z-index: 1;
  max-width: calc(var(--maxw) + 2 * var(--pp));
  margin-inline: auto;
  padding: clamp(28px, 3.6vw, 56px) var(--pp) clamp(28px, 3.6vw, 52px);
  background: var(--cream);
  border-radius: var(--panel-r);
  color: var(--deep);
  --ink: var(--deep);
  --ink-2: var(--moss);
  --rule: var(--rule-light);
  --focus: var(--deep);
}

.listen .desk__in::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--panel-r);
  right: var(--panel-r);
  height: 4px;
  background: var(--gold);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}

.listen .desk::before,
.listen .desk::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.listen .desk::before {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--chalk-line);
}
.listen .desk::after {
  top: 100%;
  left: 50%;
  width: var(--d-w);
  height: var(--d-h);
  border: 2px solid var(--chalk-line);
  border-top: 0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translate(-50%, -2px);
}

.listen .closing {
  background: transparent;
  padding-top: calc(var(--d-h) + clamp(36px, 6vh, 72px));
}
.listen .closing .sec__in { border-inline: 0; }

.listen .foot {
  position: relative;
  background: transparent;
  border-top: 0;
}
.listen .foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--fg);
  right: var(--fg);
  height: 2px;
  background: var(--chalk-line);
}

@media (max-width: 600px) {
  .listen { --mow-h: 96px; --panel-r: 16px; }
}