* { box-sizing: border-box; }

html { scroll-padding-bottom: calc(var(--stage-height) + var(--space-4)); }

body {
  margin: 0;
  padding: 0 var(--space-4) calc(var(--stage-height) + var(--space-4));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
}

body.view-only { padding-bottom: var(--space-5); }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 2rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

.site-header { padding: var(--space-5) 0 var(--space-4); }
.site-header p { color: var(--ink-soft); }
.site-footer { padding: var(--space-5) 0; }
a { color: var(--ink); }

button, select, input[type="text"], input[type="number"], textarea {
  font: inherit;
  color: var(--control-ink);
  background: var(--control);
  border: var(--border) solid var(--line);
  border-radius: 0;
  padding: var(--space-1) var(--space-3);
  min-height: 36px;
}
button { cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button[aria-pressed="true"] { background: var(--pressed); color: var(--pressed-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* These sit on a fixed light colour in both themes, so their ring is fixed too.
   Drawn inside the control, so the ring is always on its own light fill. */
.section-toggle:focus-visible, .preset:focus-visible, .frame:focus-visible { outline-color: #0b3d91; outline-offset: -5px; }
/* The duck can be over anything: a dark ring with a white one inside it. */
.duck:focus-visible { outline: 3px solid #0b3d91; outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }

.skip { position: absolute; left: var(--space-4); top: -100px; z-index: 40; }
.skip:focus { top: var(--space-2); }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--notice-bg);
  color: var(--notice-ink);
  border: var(--border) solid var(--line);
}
.notice p { flex: 1 1 240px; }
.notice-error { background: var(--error-bg); color: var(--error-ink); }

/* ── Maker layout ─────────────────────────────────────────────────────── */

.maker { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.right-column { display: grid; gap: var(--space-4); align-content: start; }

@media (min-width: 1024px) {
  .maker { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); align-items: start; }
}

.panel { background: var(--surface); border: var(--border) solid var(--line); }
.panel > h2 { margin: 0; }
.section-toggle {
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: bold;
  padding: var(--space-2) var(--space-3);
}
.section-toggle::after { content: " \2212"; float: right; }
.section-toggle[aria-expanded="false"]::after { content: " +"; }
.panel-body { padding: var(--space-3); }

.group { border: 2px solid var(--line); margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); min-width: 0; }
.group legend { padding: 0 var(--space-1); font-weight: bold; }
.group label { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-3); min-height: 32px; }
.group:disabled { opacity: 0.5; }

/* ── Editor ───────────────────────────────────────────────────────────── */

.preset-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preset { display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-2); background: var(--water); color: var(--water-ink); }
.preset canvas, .frame canvas, .step canvas, .preview { image-rendering: pixelated; display: block; }

.editor-layout { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-start; }
.grid-column { flex: 0 0 auto; max-width: 100%; }
.side-column { flex: 1 1 220px; min-width: 0; }
.grid { display: block; max-width: 100%; max-height: calc(100vh - var(--stage-height) - 32px); width: auto; height: auto; border: var(--border) solid var(--line); touch-action: none; cursor: crosshair; image-rendering: pixelated; }

.palette { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.palette-item { display: grid; gap: 2px; justify-items: center; }
.swatch { width: 36px; height: 36px; min-height: 0; padding: 0; }
.swatch[aria-pressed="true"] { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatch-transparent {
  background-color: #f4f4f4;
  background-image: linear-gradient(45deg, #d9d9d9 25%, transparent 25%, transparent 75%, #d9d9d9 75%),
    linear-gradient(45deg, #d9d9d9 25%, transparent 25%, transparent 75%, #d9d9d9 75%);
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.palette-item input[type="color"] { width: 36px; height: 24px; padding: 0; border: 2px solid var(--line); background: var(--control); }

.frame-strip { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.frame { display: grid; justify-items: center; padding: var(--space-1); background: var(--water); color: var(--water-ink); min-height: 0; }
.frame[aria-pressed="true"] { background: var(--water); color: var(--water-ink); box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--ink); }

.animations { display: grid; gap: var(--space-3); }
.animation { display: grid; grid-template-columns: auto 72px minmax(0, 1fr); gap: var(--space-3); align-items: start; border-top: 2px solid var(--line); padding-top: var(--space-3); }
.animation:first-child { border-top: 0; padding-top: 0; }
.animation h3 { width: 5.5rem; }
.preview { background: var(--water); border: 2px solid var(--line); }
.steps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.steps-label { font-weight: bold; }
.step { display: flex; align-items: center; gap: var(--space-1); background: var(--water); padding: 2px; border: 2px solid var(--line); }
.step select { min-height: 32px; padding: 0 var(--space-1); }
input[type="number"] { width: 5rem; }

@media (max-width: 760px) {
  .animation { grid-template-columns: 72px minmax(0, 1fr); }
  .animation h3 { grid-column: 1 / -1; width: auto; }
}

/* ── Personality ──────────────────────────────────────────────────────── */

.label-line { font-size: 1.25rem; margin-bottom: var(--space-2); }
.badge { font-size: 0.875rem; background: var(--pressed); color: var(--pressed-ink); padding: 2px var(--space-2); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-3); }
.chips li { border: 2px solid var(--line); padding: 2px var(--space-2); }
.slider { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-2); align-items: center; min-height: 36px; }
.slider input { width: 100%; accent-color: var(--focus); }

#link-field, #viewer-link-field { flex: 1 1 200px; min-width: 0; }

/* ── Stage and duck ───────────────────────────────────────────────────── */

.stage {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--stage-height);
  pointer-events: none; /* only the controls take clicks; the page shows through */
  z-index: 10;
}
.duck-controls { pointer-events: auto; position: absolute; right: var(--space-2); bottom: var(--space-2); display: grid; gap: var(--space-1); justify-items: end; }
.controls-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); order: -1; }
.duck-controls button { min-height: 32px; padding: 0 var(--space-2); font-size: 0.875rem; }
.duck-controls .controls-toggle { min-width: 40px; min-height: 40px; padding: 0; font-size: 1.375rem; line-height: 1; }

#roam label { display: flex; }
.take-home { margin-top: var(--space-3); }
.take-home summary { cursor: pointer; font-weight: bold; min-height: 32px; display: flex; align-items: center; }
.take-home summary::before { content: "+"; margin-right: var(--space-2); }
.take-home[open] summary::before { content: "\2212"; }
.take-home ol { padding-left: var(--space-5); }
.take-home li { margin-bottom: var(--space-1); }
.take-home code { overflow-wrap: anywhere; padding: 0 var(--space-1); border: 1px solid var(--ink-soft); }
.take-home p { margin: var(--space-2) 0; }
.hint { color: var(--ink-soft); font-size: 0.875rem; margin: var(--space-1) 0 0; }
.path-overlay { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0, 0, 0, 0.45); cursor: crosshair; touch-action: none; }
.path-overlay::backdrop { background: transparent; }
.path-overlay canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.path-help { position: absolute; left: 50%; top: var(--space-4); transform: translateX(-50%); display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); background: var(--surface); color: var(--ink); border: var(--border) solid var(--line); cursor: default; }
.path-help p { margin: 0; }

.duck-layer { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.duck {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* the duck can be dragged */
  cursor: grab;
}
.duck.dragging { cursor: grabbing; }
/* No dragging on the laptop: leave scrolling and zooming to the finger. */
.duck.in-viewer { touch-action: manipulation; cursor: pointer; }
.duck canvas { image-rendering: pixelated; display: block; }

.speech {
  position: fixed;
  z-index: 30;
  max-width: min(360px, calc(100vw - 16px));
  padding: var(--space-3);
  background: #ffffff;
  color: #111111;
  margin: 4px;
  /* A pixel border with stepped corners, drawn as four offset shadows. */
  box-shadow: 0 -4px 0 0 #000000, 0 4px 0 0 #000000, -4px 0 0 0 #000000, 4px 0 0 0 #000000;
}
.speech::before, .speech::after {
  content: "";
  position: absolute;
  background: #000000;
  height: 4px;
}
.speech::before { left: calc(var(--tail, 24px) - 6px); width: 12px; bottom: -8px; }
.speech::after { left: calc(var(--tail, 24px) - 2px); width: 4px; bottom: -12px; }
.speech-below::before { bottom: auto; top: -8px; }
.speech-below::after { bottom: auto; top: -12px; }
.speech p { overflow-wrap: anywhere; }
.speech-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }
.speech button { background: #ffffff; color: #111111; border: 3px solid #000000; min-height: 32px; padding: 0 var(--space-2); font-size: 0.875rem; }
.speech :focus-visible { outline-color: #0b57d0; }

/* ── Dialogs ──────────────────────────────────────────────────────────── */

dialog {
  width: min(640px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--ink);
  border: var(--border) solid var(--line);
  padding: var(--space-4);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog label { display: block; margin-top: var(--space-2); }
dialog .row label { margin-top: 0; }
textarea { width: 100%; resize: vertical; }
.privacy { margin: var(--space-2) 0; color: var(--ink-soft); }

/* A short window (for example 200% zoom on a laptop) gets a shorter stage. */
@media (max-height: 520px) {
  :root { --stage-height: 84px; }
  /* Two rows of controls fit the shorter stage when the toggle sits beside them. */
  .duck-controls { grid-auto-flow: column; align-items: end; }
}

/* ── View-only mode ───────────────────────────────────────────────────── */

.viewer { display: grid; gap: var(--space-3); justify-items: start; }
.laptop { position: relative; }
.laptop canvas { display: block; image-rendering: pixelated; }
.laptop-screen { position: absolute; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}