:root {
  --panel-bg: rgba(18, 18, 18, 0.92);
  --panel-border: #2a2a2a;
  --text: #eee;
  --text-dim: #999;
  --accent: #ff3b3b;
}

/* Declared as real @font-face rules (rather than relying on p5's loadFont)
   so the standard document.fonts.load() API can be used to reliably wait
   for the font to be ready before the sketch draws with it - p5's own
   readiness detection has a known race in Safari that let the first paint
   (and therefore the point-sampling raster) silently fall back to a system
   font, producing different artwork than Chromium for the same input. */
@font-face {
  font-family: "TT Commons Pro Bold";
  src: url("fonts/tt-commons-pro-bold.otf") format("opentype");
  font-display: block;
}

@font-face {
  font-family: "Fortuna Dot";
  src: url("fonts/fortuna-dot.ttf") format("truetype");
  font-display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  overflow: hidden;
}

canvas {
  display: block;
  /* Without this, a touch-drag on the canvas gets intercepted by the
     browser for page scrolling/zooming before our touch handlers see it. */
  touch-action: none;
}

#panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100%;
  background: var(--panel-bg);
  border-left: 1px solid var(--panel-border);
  color: var(--text);
  overflow-y: auto;
  padding: 60px 16px 16px 16px;
  z-index: 10;
  transition: transform 0.2s ease;
}

#panel.hidden {
  transform: translateX(100%);
}

#panel h1 {
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 16px;
  color: var(--accent);
}

#panel h2 {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 20px 0 8px;
  border-top: 1px solid var(--panel-border);
  padding-top: 12px;
}

#panel section:first-of-type h2 {
  border-top: none;
  padding-top: 0;
}

.field {
  margin-bottom: 10px;
}

.field label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.field label span.value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

textarea, select, input[type="range"], input[type="number"], input[type="text"] {
  width: 100%;
  background: #000;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  padding: 6px;
}

textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.4;
}

input[type="range"] {
  padding: 0;
  height: 20px;
}

input[type="color"] {
  width: 100%;
  height: 28px;
  background: #000;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 2px;
}

.color-row {
  display: flex;
  gap: 8px;
}

.color-row .field {
  flex: 1;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 10px;
}

button {
  width: 100%;
  background: #1a1a1a;
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 4px;
  padding: 9px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s ease;
}

button:hover {
  background: #2a2a2a;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

button.primary:hover {
  background: #ff5b5b;
}

.export-row {
  display: flex;
  gap: 8px;
}

.export-row button {
  margin-bottom: 0;
}

#panelToggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: auto;
  padding: 8px 12px;
  margin: 0;
}

#panel.hidden ~ #panelToggle {
  right: 16px;
}