:root {
  color-scheme:light;
  --ink:#203e39;
  --muted:#506760;
  --paper:#f4f8f4;
  --line:#bacdc3;
  --accent:#245d58;
  font:16px/1.6 system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper)
}
* {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
body {
  margin:0
}
main {
  max-width:1100px;
  margin:auto;
  padding:28px 30px
}
header {
  display:flex;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px;
  font-size:13px
}
a {
  color:var(--accent);
  text-underline-offset:4px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:11px;
  font-weight:700
}
.intro {
  max-width:760px;
  padding:28px 0 20px
}
.intro h1 {
  font:normal clamp(34px,4.4vw,53px)/1.1 Georgia,serif;
  letter-spacing:-.025em;
  margin:15px 0 22px
}
.intro>p:last-child {
  font-size:18px;
  max-width:650px
}
fieldset {
  border:1px solid var(--line);
  border-radius:5px;
  padding:16px 20px;
  margin:20px 0 28px;
  min-width:0
}
legend {
  font-weight:650;
  padding:0 8px
}
fieldset p {
  margin-top:0
}
.choices,.presets,.playback {
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
button {
  font:inherit;
  min-height:44px;
  padding:9px 15px;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--accent);
  border-radius:4px;
  cursor:pointer
}
button:hover {
  background:#dfece4
}
.primary,button[aria-pressed=true] {
  background:var(--accent);
  color:#fff
}
.primary:hover {
  background:#184944
}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #9e5708;
  outline-offset:4px
}
button:disabled {
  opacity:.5;
  cursor:default
}
.feedback:empty {
  display:none
}
.feedback {
  margin:14px 0 0;
  font-size:14px
}
.lab {
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(270px,1fr);
  gap:30px;
  border-block:1px solid var(--line);
  padding:26px 0
}
.surface {
  min-width:0
}
.surface-heading {
  display:flex;
  justify-content:space-between;
  gap:8px;
  flex-wrap:wrap;
  font-size:12px;
  margin-bottom:14px
}
.surface-heading span {
  color:var(--muted)
}
canvas {
  display:block;
  width:100%;
  height:auto;
  border:1px solid #8daea5;
  border-radius:5px;
  background:#d6e9df
}
.legend {
  display:flex;
  justify-content:center;
  gap:23px;
  padding:12px 0;
  font-size:12px
}
.legend span {
  display:flex;
  align-items:center;
  gap:6px
}
.legend i {
  width:14px;
  height:14px;
  border:1px solid #58766c;
  border-radius:50%
}
.lower {
  background:#12475e
}
.level {
  background:#d6e9df
}
.higher {
  background:#e3ab46
}
.note {
  font-size:12px;
  color:var(--muted);
  line-height:1.6
}
.playback {
  align-items:center;
  margin-top:20px
}
.playback output {
  font:14px ui-monospace,monospace;
  margin-left:auto;
  padding:6px
}
.controls label:not(.check) {
  display:flex;
  justify-content:space-between;
  font-weight:650;
  gap:12px;
  font-size:14px
}
.controls output {
  font-variant-numeric:tabular-nums
}
input[type=range] {
  display:block;
  width:100%;
  height:44px;
  accent-color:var(--accent);
  margin:4px 0 16px
}
.check {
  display:flex;
  align-items:center;
  gap:10px;
  margin:20px 0;
  font-size:14px;
  min-height:44px
}
input[type=checkbox] {
  width:20px;
  height:20px;
  accent-color:var(--accent)
}
.presets button {
  font-size:12px;
  padding:8px 12px
}
.probe {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:16px
}
.probe h2 {
  font:normal 25px Georgia,serif;
  margin:0 0 15px
}
dl {
  margin:0
}
dl>div {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 0
}
dt {
  font-size:13px
}
dd {
  margin:0;
  font:normal 24px Georgia,serif;
  font-variant-numeric:tabular-nums
}
.sum {
  border-top:1px solid var(--line);
  margin-top:5px;
  padding-top:12px
}
#probe-summary {
  min-height:40px
}
.probe>p {
  font-size:13px
}
.probe strong {
  display:block;
  font:normal 28px Georgia,serif;
  margin-top:4px
}
.reading {
  max-width:800px;
  margin:34px 0
}
.reading h2 {
  font:normal 29px Georgia,serif
}
details {
  border-top:1px solid var(--line);
  padding:18px 0
}
summary {
  cursor:pointer;
  min-height:28px;
  font-weight:650
}
li {
  margin:12px 0
}
footer {
  font-size:12px;
  color:var(--muted);
  margin:30px 0 12px
}
.embedded header,.embedded footer {
  display:none
}
.embedded main {
  padding-top:0
}
.embedded .intro {
  padding-top:22px
}
@media(max-width:650px) {
  main {
    padding:20px
  }
  header {
    flex-direction:column;
    gap:5px
  }
  .lab {
    grid-template-columns:1fr;
    gap:20px
  }
  .controls {
    border-top:1px solid var(--line);
    padding-top:22px
  }
  .choices button {
    flex:1 1 auto
  }
  fieldset {
    padding:14px
  }
  .playback button {
    font-size:13px;
    padding:8px 10px
  }
  .playback output {
    font-size:12px
  }
  .legend {
    gap:18px
  }
  .intro>p:last-child {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
canvas { background:#e7ede2 }
.probe dd {font:normal 21px Georgia,serif}
input[type=number] {font:inherit;min-height:44px;width:110px;padding:8px;border:1px solid var(--accent);border-radius:4px;color:var(--ink);background:var(--paper);margin:8px 0}
#seed-value {font-weight:400}
label[for=seed] {margin-top:22px}