/* Island — page chrome. The scene fills the panel; base.css handles everything else. */

main { max-width: 940px; }
.lede { color: var(--soft); margin-bottom: 20px; }

.panel {
  background: #d8dde3;              /* same as the sky, so the canvas edge disappears */
  border-radius: var(--radius);
  padding: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}

canvas {
  width: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}
canvas:active { cursor: grabbing; }

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 10px 14px 12px;
  font-size: 13px;
  color: #4d565f;
  background: #c8ced6;
}
.readout b { color: #252b31; font-variant-numeric: tabular-nums; font-weight: 600; margin-left: 4px; }

.controls { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 10px; }

.knobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 22px; }
.knobs label {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 10px;
  font-size: 14px;
  color: var(--soft);
}
.knobs input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.knobs span { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.note { font-size: 13px; margin-top: 18px; }

.tip { color: #6b747d; }