:root, [data-theme="light"] {
  --bg: #f4f1ec;
  --fg: #1c2321;
  --paper: #ffffff;
  --accent: #2fb8ac;
  --accent-strong: #0e8c81;
  --surface-alt: #e6e1d8;
  --border-fade: color-mix(in srgb, var(--fg) 18%, transparent);
  --nav-bg: color-mix(in srgb, var(--bg) 80%, transparent);
  --nav-border: color-mix(in srgb, var(--fg) 10%, transparent);
  --danger: #b3413a;
  --danger-fg: #fff6f4;
  --checker-a: #e2ded4;
  --checker-b: #cfc9bb;

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --font-rules: "Archivo", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0f14;
    --fg: #e7ece9;
    --paper: #12181d;
    --accent: #4fd1c5;
    --accent-strong: #7fe3d8;
    --surface-alt: #182129;
    --border-fade: color-mix(in srgb, var(--fg) 18%, transparent);
    --nav-bg: color-mix(in srgb, var(--bg) 78%, transparent);
    --nav-border: color-mix(in srgb, var(--fg) 10%, transparent);
    --danger: #e5645c;
    --danger-fg: #1c0908;
    --checker-a: #1a2229;
    --checker-b: #10161b;
  }
}

[data-theme="dark"] {
  --bg: #0b0f14;
  --fg: #e7ece9;
  --paper: #12181d;
  --accent: #4fd1c5;
  --accent-strong: #7fe3d8;
  --surface-alt: #182129;
  --border-fade: color-mix(in srgb, var(--fg) 18%, transparent);
  --nav-bg: color-mix(in srgb, var(--bg) 78%, transparent);
  --nav-border: color-mix(in srgb, var(--fg) 10%, transparent);
  --danger: #e5645c;
  --danger-fg: #1c0908;
  --checker-a: #1a2229;
  --checker-b: #10161b;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-rules);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mono { font-family: var(--font-mono); letter-spacing: 0.02em; }
.small-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }

button, select, input, textarea { font-family: inherit; color: inherit; }

button {
  background: var(--paper);
  border: 1px solid var(--border-fade);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}
button:hover { border-color: var(--accent); }
button:active { transform: scale(0.96); }
button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
button.mini-btn { padding: 0.3rem 0.5rem; }
button.danger-btn { border-color: var(--danger); color: var(--danger); }
button.danger-btn:hover { background: var(--danger); color: var(--danger-fg); }

select, input[type="text"], input[type="password"], textarea {
  background: var(--paper);
  border: 1px solid var(--border-fade);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border-fade);
  background: var(--nav-bg);
  backdrop-filter: blur(12px) saturate(150%);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { color: var(--fg); text-decoration: none; opacity: 0.75; font-size: 0.85rem; }
.brand:hover { opacity: 1; color: var(--accent); }
.brand-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 400;
}
.topbar-spacer { flex: 1; }

/* ---------- layout ---------- */

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr 320px;
  gap: 1px;
  background: var(--border-fade);
  min-height: 0;
}
.toolbar, .chat-panel, .canvas-wrap {
  background: var(--bg);
  overflow: auto;
}

/* ---------- toolbar ---------- */

.toolbar {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.tool-group { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.tool-btn { font-size: 1.1rem; line-height: 1; padding: 0.5rem; }
.tool-btn.active { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 18%, var(--paper)); }

.color-group { flex-direction: column; align-items: stretch; }
#color-picker { width: 100%; height: 2.2rem; padding: 0.2rem; border-radius: 8px; }
/* grid-auto-rows is explicit (not "auto") because implicit rows sized from
   aspect-ratio-only content (empty square buttons, no intrinsic height)
   measure the row as near-zero in some engines, letting the buttons
   overflow past the container's own box instead of growing it */
.palette { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1.4rem; gap: 0.25rem; margin-top: 0.4rem; }
.palette button {
  width: 100%; height: 100%; padding: 0; border-radius: 4px; border: 1px solid var(--border-fade);
}
.palette button:hover { transform: scale(1.12); border-color: var(--fg); }

#grid-size { width: 100%; }
.zoom-group { justify-content: space-between; }
.zoom-group button { padding: 0.3rem 0.7rem; }

.layers-panel { flex-direction: column; align-items: stretch; }
.layers-header { display: flex; justify-content: space-between; align-items: center; }
.layers-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.4rem; }
.layer-row {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; font-size: 0.85rem;
}
.layer-row.active { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, var(--paper)); }
.layer-row .layer-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row button { padding: 0.15rem 0.4rem; font-size: 0.8rem; }

#export-btn { width: 100%; }

/* ---------- canvas ---------- */

.canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.canvas-stage {
  position: relative;
  background-image:
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-a) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-a) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: var(--checker-b);
  box-shadow: 0 0 0 1px var(--border-fade), 0 12px 40px color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 4px;
}
.canvas-stage canvas { display: block; image-rendering: pixelated; }
/* stacking: onion-skin ghost frames sit under the live drawing, which sits
   under the hover-cell outline */
#onion { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#canvas { position: relative; z-index: 2; }
#overlay { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* pulses gently while the AI is actively drawing — this site never gates
   its animations behind prefers-reduced-motion, by design */
.canvas-stage.ai-drawing {
  animation: ai-glow 1.1s ease-in-out infinite;
}
@keyframes ai-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--border-fade), 0 12px 40px color-mix(in srgb, var(--fg) 12%, transparent); }
  50% { box-shadow: 0 0 0 2px var(--accent), 0 0 32px color-mix(in srgb, var(--accent) 55%, transparent); }
}

/* pulses (in a distinct color) while an animation is playing back */
.canvas-stage.playing {
  animation: playing-pulse 0.9s ease-in-out infinite;
}
@keyframes playing-pulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--border-fade), 0 12px 40px color-mix(in srgb, var(--fg) 12%, transparent); }
  50% { box-shadow: 0 0 0 2px var(--accent-strong), 0 0 28px color-mix(in srgb, var(--accent-strong) 45%, transparent); }
}

/* ---------- timeline / frames ---------- */

.canvas-col { display: flex; flex-direction: column; align-items: center; gap: 1rem; max-width: 100%; }

.timeline-panel { width: min(90vw, 560px); display: flex; flex-direction: column; gap: 0.5rem; }
.timeline-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.timeline-toolbar .mini-btn { font-size: 0.85rem; }
.onion-toggle { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; }

.frames-list {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 0.3rem 0.1rem 0.5rem;
}
.frame-row {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem;
  border-radius: 8px;
  border: 1px solid var(--border-fade);
  cursor: pointer;
  background: var(--paper);
}
.frame-row.active { border-color: var(--accent-strong); background: color-mix(in srgb, var(--accent) 14%, var(--paper)); }
.frame-thumb { image-rendering: pixelated; background: var(--checker-b); border-radius: 3px; }
.frame-row-meta { opacity: 0.75; }
.frame-dur { width: 3.4rem; padding: 0.15rem 0.3rem; font-size: 0.7rem; text-align: center; }
.frame-row-actions { display: flex; gap: 0.2rem; }
.frame-row-actions .mini-btn { padding: 0.1rem 0.35rem; font-size: 0.7rem; }

/* ---------- chat panel ---------- */

.chat-panel {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 0;
}
.chat-header { display: flex; justify-content: space-between; align-items: center; }

.key-panel {
  border: 1px solid var(--border-fade);
  border-radius: 8px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--paper);
}
.key-panel[hidden] { display: none; } /* .key-panel's own `display:flex` above
  would otherwise beat the UA [hidden] rule at equal specificity and the
  panel would never actually hide */
.key-panel .hint { font-size: 0.78rem; opacity: 0.75; line-height: 1.4; }
.key-row { display: flex; gap: 0.4rem; }
.key-row input { flex: 1; }
.key-actions { display: flex; gap: 0.4rem; }
.key-status { font-size: 0.72rem; opacity: 0.7; }

.model-row { display: flex; gap: 0.4rem; }
.model-row select { flex: 1; }
.model-row input { flex: 1; }

.chat-log {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  border: 1px solid var(--border-fade);
  border-radius: 8px;
  padding: 0.6rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.chat-empty { font-size: 0.82rem; opacity: 0.6; font-style: italic; }
.chat-msg { font-size: 0.85rem; line-height: 1.45; padding: 0.5rem 0.65rem; border-radius: 8px; }
.chat-msg.user { background: color-mix(in srgb, var(--accent) 16%, var(--paper)); align-self: flex-end; }
.chat-msg.assistant { background: var(--surface-alt); align-self: flex-start; }
.chat-msg.error { background: color-mix(in srgb, var(--danger) 18%, var(--paper)); color: var(--danger); }
.chat-msg.tool {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.75;
  background: transparent;
  border: 1px dashed var(--border-fade);
  align-self: stretch;
}
.stream-caret {
  display: inline-block; width: 0.5em; height: 1em; margin-left: 2px;
  background: var(--accent); vertical-align: text-bottom;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.chat-form { display: flex; flex-direction: column; gap: 0.4rem; }
.chat-form textarea { resize: vertical; min-height: 2.4rem; }
.chat-form-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }

/* ---------- theme toggle (same pattern as the rest of the site) ---------- */

.theme-toggle {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 95;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--nav-border);
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { opacity: 0.9; border-color: color-mix(in srgb, var(--fg) 22%, transparent); }
.theme-toggle svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
.theme-toggle[data-show="sun"] .icon-sun, .theme-toggle[data-show="moon"] .icon-moon { display: block; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .toolbar, .chat-panel { max-height: 40vh; }
}