.panel {
  left: 12px;
  bottom: 12px;
  width: min(340px, calc(100vw - 24px));
  max-height: 52vh;
  overflow-y: auto;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 60px rgba(18, 50, 70, 0.16);
}

header { margin-bottom: 12px; }

.panel-toggle {
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
}

.eyebrow {
  margin-bottom: 3px;
  font-size: 0.64rem;
}

h1 {
  font-size: clamp(1.65rem, 8vw, 2.05rem);
  line-height: 0.95;
}

.lede { display: none; }

.controls { gap: 9px; }

.range-row {
  grid-template-columns: 62px 1fr 34px;
  gap: 8px;
  font-size: 0.96rem;
  font-weight: 800;
}

input[type="range"] { min-height: 30px; }

fieldset {
  gap: 7px 10px;
  margin-top: 2px;
  padding: 8px 10px 10px;
  border-radius: 18px;
}

fieldset label {
  gap: 7px;
  font-size: 0.94rem;
  font-weight: 800;
}

@media (min-width: 561px) {
  .panel {
    width: min(360px, calc(100vw - 24px));
    max-height: 62vh;
    padding: 16px;
    border-radius: 24px;
  }
}