/* Deliberately single-theme: the world paints its own sky. */
:root {
  --sky-mid: #b9cfe6; --ink: #2f3b52; --ink-soft: #5d6a82;
  --sheet: rgba(255, 252, 247, 0.93); --accent: #e9a63a;
  --font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
}
/* #sheet sets display:flex, so plain `hidden` would lose to it */
[hidden] { display: none !important; }

/* Stop behaving like a web page: no rubber-band, no pull-to-refresh, no zoom, no
   selection or callout, no long-press menu on the canvas. */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed; inset: 0;
  background: var(--sky-mid); color: var(--ink); font-family: var(--font);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#stage { position: relative; height: 100%; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#hint {
  position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  top: calc(14px + env(safe-area-inset-top, 0px)); text-align: center;
  font-weight: 700; font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgba(47, 59, 82, 0.5);
  pointer-events: none; transition: opacity 0.8s; text-wrap: balance;
}
#hint.faded { opacity: 0; }
#bar {
  position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  display: flex; gap: 8px; justify-content: center;
}
#bar button {
  font: 800 14px var(--font); color: var(--ink); border: 0; border-radius: 999px; padding: 10px 16px; cursor: pointer;
  background: var(--sheet); box-shadow: 0 4px 18px rgba(47, 59, 82, 0.18);
}
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#sheet {
  position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); right: calc(16px + env(safe-area-inset-right, 0px));
  margin-inline: auto; max-width: 420px;
  bottom: calc(70px + env(safe-area-inset-bottom, 0px)); max-height: 62%; overflow-y: auto;
  background: var(--sheet); border-radius: 22px; padding: 16px 18px 14px;
  box-shadow: 0 10px 40px rgba(47, 59, 82, 0.25);
  display: flex; flex-direction: column; gap: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}
#sheet h2 { margin: 0; font-size: 15px; font-weight: 800; }
#where { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
#sliders { display: flex; flex-direction: column; gap: 6px; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: center; }
.row label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.row output { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.row input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); height: 26px; }
#readout, #listenReadout {
  font: 700 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink);
  background: rgba(47, 59, 82, 0.07); border-radius: 10px; padding: 8px 10px;
  -webkit-user-select: text; user-select: text; overflow-wrap: anywhere;
}
.sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sheet-foot span { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
#resetBtn { font: 800 13px var(--font); border: 0; background: transparent; color: var(--ink); text-decoration: underline; cursor: pointer; padding: 6px; }
#envControls { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; margin-top: 2px; border-top: 1px solid rgba(47, 59, 82, 0.12); }
#envControls select {
  grid-column: 1 / -1; font: 700 13px var(--font); color: var(--ink); border-radius: 10px;
  padding: 7px 9px; border: 1px solid rgba(47, 59, 82, 0.18); background: #fff;
}

/* sound: the mute button in the bar, and the Sound block inside the sheet */
#muteBtn { font: 800 14px var(--font); color: var(--ink); border: 0; border-radius: 999px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--sheet);
  box-shadow: 0 4px 18px rgba(47, 59, 82, 0.18); padding: 0; }
#muteBtn[aria-pressed="true"] { color: var(--ink-soft); opacity: 0.6; }
.seg { display: flex; gap: 6px; }
.seg button { flex: 1; font: 800 12px var(--font); color: var(--ink-soft); border: 1.5px solid rgba(93,106,130,0.28);
  background: transparent; border-radius: 999px; padding: 7px 6px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
#soundControls { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(93,106,130,0.18); padding-top: 8px; margin-top: 2px; }
#soundControls h3 { margin: 0; font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }