:root {
  --theme-base: #f3f3f0;
  --ink: #111111;
}

body {
  min-width: 1024px;
}

.pm-website {
  width: min(100%, var(--sketchbook-content-max));
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
}

.study__heading,
.study__status {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 12px/1 var(--sketchbook-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.study__heading { padding: 0 0 9px; }
.study__status {
  padding: 9px 0;
  border-bottom: 1px solid var(--site-rule);
  color: var(--site-muted);
}

.study__surface {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--theme-base, var(--site-paper));
}

#murmuration {
  display: block;
  width: 100%;
  height: 100%;
}

.controls-panel {
  display: grid;
  align-content: start;
  gap: 8px;
}

.controls-panel label {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  font: 12px/1.25 var(--sketchbook-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.controls-panel output {
  justify-self: end;
  color: var(--site-muted);
}

.controls-panel input[type="range"] { accent-color: var(--site-range); }

.control-help {
  margin: 0 0 4px;
  color: var(--site-muted);
  font: 12px/1.35 var(--sketchbook-sans);
}

#reset-defaults { margin-top: 10px; }

.research-note {
  max-width: 720px;
}