*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #0f0f0f;
  --surface: #1a1a1a;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
  --text-primary: #e8e6e0;
  --text-muted: #666;
  --accent: #7f77dd;
  --radius: 8px;
  --canvas-w: 800;
  --canvas-h: 300;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

#root {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Present to a screen reader and to anything parsing the document, absent to
   the eye. Used for the editor's <h1>: the page is an app with no title bar, so
   there is nowhere to put a visible heading without inventing chrome — but a
   document with no h1 is a document nothing can say the subject of.

   NOT the same thing as hiding content to feed crawlers. This states what the
   page IS, which is true and matches what is on it. Putting the type, the
   morph, or anything the canvas draws into hidden markup would be the other
   thing, and is why llms.txt exists instead. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* display */

#display-area {
  position: relative;
  border-radius: 12px;
  border: 0.5px solid var(--border);
  overflow: hidden;
  background: #000;
}

#canvas {
  display: block;
  width: 100%;
  height: auto;
}

#loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  transition: opacity 0.4s ease;
}

#loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#loading-message {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

/* color mode transition on display area */
#display-area {
  transition: background-color 0.4s ease;
}

/* controls */

#controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#controls-top,
#controls-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.label {
  font-size: 12px;
  color: var(--text-muted);
}

/* buttons */

.btn {
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, opacity 0.12s;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: #222;
}

.btn:disabled {
  opacity: 0.35;
  cursor: default;
}

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

.btn.primary:hover:not(:disabled) {
  opacity: 0.88;
}

.btn.on {
  background: rgba(127,119,221,0.18);
  border-color: var(--accent);
  color: var(--accent);
}

.palette-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
  padding: 0;
}

.palette-swatch:hover {
  transform: scale(1.15);
}

.palette-swatch.selected {
  border-color: var(--text-primary);
}

/* input */

#input-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#input-label {
  font-size: 12px;
  color: var(--text-muted);
}

textarea {
  width: 100%;
  min-height: 80px;
  font-size: 14px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text-primary);
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

textarea:focus {
  outline: none;
  border-color: var(--accent);
}

#meta-info {
  font-size: 12px;
  color: var(--text-muted);
  min-height: 16px;
}

.item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border);
  background: var(--surface);
}

.item-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  min-width: 64px;
}

.text-item .item-badge {
  color: var(--accent);
}

.item-content {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 0.5px solid var(--border-strong);
  color: var(--text-primary);
  font-size: 14px;
  padding: 4px 2px;
  /* falls back to Material Icons only for codepoints the default UI font
     can't render (i.e. the PUA icon glyphs) — normal typed text is
     unaffected since the first font in the stack still wins for it */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Material Icons";
}

.item-content:focus {
  outline: none;
  border-color: var(--accent);
}

.item-transition-type {
  flex: 1;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

.item-duration {
  width: 64px;
  padding: 4px 6px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

.item-ms-label {
  font-size: 12px;
  color: var(--text-muted);
}

.item-trigger-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-muted);
  font-style: italic;
}

.trigger-item .item-badge {
  color: #e0b96a;
}

.repeat-item .item-badge {
  color: #8ac4e0;
}

#display-area.awaiting-click {
  cursor: pointer;
  border-color: var(--accent);
}

.item-delete {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

.item-delete:hover {
  color: #e07a7a;
}

.uniform-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uniform-row .label {
  min-width: 80px;
}

.uniform-row input[type=range] {
  flex: 1;
  accent-color: var(--accent);
}

.uniform-row select {
  flex: 1;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

#effect-status {
  font-size: 12px;
  color: var(--text-muted);
}

#effect-status.error {
  color: #e07a7a;
}

#effect-status.success {
  color: #7adb9a;
}

.debug-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.debug-label {
  font-size: 12px;
  color: var(--text-muted);
  min-width: 160px;
}

.debug-range-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.debug-range-wrap input[type=range] {
  flex: 1;
  accent-color: var(--accent);
}

.debug-value {
  font-size: 12px;
  color: var(--text-primary);
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.debug-number {
  width: 80px;
  padding: 4px 6px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

.debug-select {
  flex: 1;
  padding: 4px 8px;
  border-radius: var(--radius);
  border: 0.5px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-primary);
  font-size: 13px;
  font-family: inherit;
}

.debug-checkbox {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}