:root {
  --bg: #ffffff;
  --fg: #1d1d1f;
  --muted: #5b5b66;
  --link: #0b57d0;
  --rule: #d9d9e0;
  --surface: #f5f5f7;
  --checker: #e6e6eb;
  --error: #b3261e;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16171a; --fg: #e8e8ec; --muted: #a2a2ad; --link: #8ab4f8; --rule: #33343a; --surface: #202126; --checker: #2b2c33; --error: #ffb4ab; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { background: var(--bg); color: var(--fg); font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif; margin: 0; }
main { max-width: 86rem; margin: 0 auto; padding: 2rem 16px 4rem; }
header { max-width: 52rem; margin-bottom: 1rem; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; letter-spacing: -.03em; margin: .25rem 0 .6rem; }
h2 { font-size: 1rem; margin: 0; }
p { margin: .5rem 0; }
a { color: var(--link); text-underline-offset: .2em; }
.eyebrow { font-size: .8rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.muted, .hint, footer { color: var(--muted); }
.hint { font-size: .8rem; line-height: 1.5; }
button, select, input, textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--rule); border-radius: 5px; }
button, select { min-height: 2.4rem; padding: .35rem .65rem; font-size: .85rem; }
button { cursor: pointer; font-weight: 550; }
button:hover:not(:disabled) { border-color: var(--link); background: var(--surface); }
button:disabled, select:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
label, .control-label { font-size: .85rem; }
select { max-width: 100%; min-width: 0; }
.toolbar { border-block: 1px solid var(--rule); padding: .8rem 0; margin-bottom: .5rem; }
.control-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.share-row { display: flex; align-items: center; gap: .6rem; margin-top: .8rem; }
.share-row input { min-width: 0; flex: 1; padding: .4rem .6rem; font-size: .8rem; }
.downloads { margin-top: .8rem; }
.pair { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.share-error { color: var(--error); font-size: .85rem; overflow-wrap: anywhere; }
#show-error { margin-top: .4rem; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.editor-panel, .preview-panel { min-width: 0; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 3rem; font-size: .8rem; }
.panel-heading > label:first-child { font-weight: 650; }
textarea { display: block; width: 100%; min-height: 26rem; height: 58vh; resize: vertical; padding: 1rem; tab-size: 2; font: .8rem/1.6 Consolas, 'Courier New', monospace; }
.artboard { height: 58vh; min-height: 26rem; width: 100%; overflow: auto; display: grid; border: 1px solid var(--rule); border-radius: 5px; padding: 1rem; background: conic-gradient(var(--surface) 25%, var(--checker) 0 50%, var(--surface) 0 75%, var(--checker) 0) 0 0 / 16px 16px; }
canvas { display: block; image-rendering: pixelated; margin: auto; grid-area: 1 / 1; }
#empty-preview { grid-area: 1 / 1; margin: auto; background: var(--bg); padding: .4rem .8rem; border-radius: 4px; }
body[data-state='error'] canvas, body[data-state='rendering'] canvas, body[data-state='loading'] canvas { opacity: .4; }
.playback { margin-top: .8rem; }
#frame-counter { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
#error { color: var(--error); border-left: 3px solid var(--error); padding: .5rem .75rem; font-size: .85rem; overflow-wrap: anywhere; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: .5rem 0 1rem; font-size: .85rem; min-height: 2.4rem; }
.status-row p { flex: 1; min-width: 12rem; overflow-wrap: anywhere; }
.notice { padding: .7rem 1rem; border: 1px solid var(--rule); background: var(--surface); font-size: .85rem; overflow-wrap: anywhere; }
details { border-block: 1px solid var(--rule); padding: .8rem 0; }
summary { cursor: pointer; font-weight: 600; font-size: .9rem; }
dl { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .4rem 1rem; font-size: .85rem; }
dt { color: var(--muted); }
dd { margin: 0; overflow-wrap: anywhere; white-space: pre-line; }
#digest { font-size: .8rem; }
#download-links { margin-bottom: 1rem; font-size: .85rem; }
footer { margin-top: 1.5rem; max-width: 64rem; font-size: .8rem; }
body.dragging main { outline: 3px dashed var(--link); outline-offset: -6px; }
@media (max-width: 760px) {
  main { padding-top: 1.25rem; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  /* On a phone the art comes first, then the recipe that makes it. */
  .preview-panel { order: -1; }
  textarea { height: 22rem; min-height: 14rem; }
  .artboard { height: 22rem; min-height: 16rem; }
  #examples { flex: 1 1 100%; }
  .pair { white-space: normal; flex-wrap: wrap; }
  dl { grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto; } }