/* Particle Rose — the flower fills the frame, so the chrome stays out of its way. */

main { max-width: 940px; }
.lede { color: var(--soft); font-size: .95rem; }

.panel {
  background: #0b060f;
  border: 1px solid #2a1a2c;
  border-radius: var(--radius);
  box-shadow: 0 10px 34px rgba(40, 10, 35, .22);
  padding: 10px 10px 4px;
  margin-bottom: var(--gap);
}
canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 9px;
  background: #0b060f;
  touch-action: none;
  cursor: grab;
}
canvas.dragging { cursor: grabbing; }

.readout {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 9px 6px 8px;
  color: #9c8a9c;
  font-size: .85rem;
}
.readout b { color: #ffb9cf; font-weight: 600; }

.controls { justify-content: center; flex-wrap: wrap; margin-bottom: var(--gap); }

/* The three columns are sized for the English labels, not the Chinese ones this was
   translated from: "Petal curl" is twice as wide as 花瓣卷曲, and the widest value the
   right column ever holds is "White rose". Narrow these and the words wrap mid-row. */
.knobs label {
  display: grid;
  grid-template-columns: 5.8em 1fr 7em;
  align-items: center;
  gap: 12px;
  margin-bottom: 13px;
  color: var(--ink);
  font-size: .92rem;
}
.knobs label:last-child { margin-bottom: 0; }
.knobs .k { color: var(--ink); }
.knobs input[type=range] { padding: 0; border: none; background: transparent; box-shadow: none; accent-color: var(--accent); }
.knobs span:last-child { color: var(--soft); font-size: .85rem; text-align: right; }

@media (max-width: 600px) {
  .knobs label { grid-template-columns: 5.2em 1fr 6.2em; gap: 8px; font-size: .86rem; }
  .readout { gap: 12px; font-size: .8rem; }
}