@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap');   /* the hand-drawn labels */

/* ============================================================================
   Talk 02 · Vibe-Coding a Light-switch Mascot — styles shared by more than one slide. Loads
   after the theme, so it may override the kit; each slide's own styles are in
   slides/<slug>/slide.css, which load after this file.
   ============================================================================ */

/* ── Hand-drawn pictures: chrome-ai and Why not just…? ──────────────────────
   sketch.js draws every shape as an SVG group of rough.js paths with a tone
   class; .sk (on the picture's container) gives the tones the theme's colours,
   so the drawing follows ☀/☾. Tones: ink the environment, a (turquoise) agent A,
   m (magenta) agent B, y (yellow) only the skill, mute the background, bad and
   good the ✗ and ✓. Groups gated by data-in fade in when they turn .on. Each
   slide sets its own label sizes. */
.sk path { stroke-linecap: round; stroke-linejoin: round; }
.sk [data-in] { transition: opacity .45s ease; }
.sk [data-in]:not(.on) { opacity: 0; }
.sk .ink-ink path { stroke: var(--text-strong); }
.sk .ink-a path { stroke: var(--accent); }
.sk .ink-y path { stroke: var(--accent-2); }
.sk .ink-m path { stroke: var(--lamp-magenta); }
.sk .ink-mute path { stroke: var(--muted); }
.sk .ink-bad path { stroke: var(--bad); }
.sk .ink-good path { stroke: var(--good); }
.sk [class^="f-"] path { opacity: .55; }
.sk .f-a path { stroke: color-mix(in srgb, var(--accent) 60%, transparent); }
.sk .f-y path { stroke: color-mix(in srgb, var(--accent-2) 60%, transparent); }
.sk .f-bad path { stroke: color-mix(in srgb, var(--bad) 45%, transparent); }
.sk .f-mute path { stroke: color-mix(in srgb, var(--muted) 45%, transparent); }
.sk .t { font-family: 'Patrick Hand', var(--font-body); fill: var(--text-strong); }
.sk .t.mute { fill: var(--muted); }
.sk .t.a { fill: var(--accent); }
.sk .t.m { fill: var(--lamp-magenta); }
.sk .t.bad { fill: var(--bad); }
.sk .t.good { fill: var(--good); }
/* the mascot is a grey pencil drawing: lift it on the night ground (the
   theme is dark unless light is chosen, same selector pair as the theme) */
.sk-mascot { filter: brightness(1.25); }
[data-theme="light"] .sk-mascot { filter: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sk-mascot { filter: none; } }

/* ── The lamp stage: the cover and the Live fix ───────────────────────────── */
/* The stage. Its size is the art's: square, as large as the slide allows.
   isolation keeps the lighten blend inside the stage instead of blending with
   the slide behind. The edge fade hides the small mismatch between the
   renders' background and --bg, so the square never shows. */
.lights {
  width: min(92vh, 56vw);
  aspect-ratio: 1 / 1;
  margin-right: clamp(0px, 3vw, 60px);
  isolation: isolate;
  -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 90%, transparent 100%);
}
.lights__set { position: absolute; inset: 0; isolation: isolate; }
.lights__set img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; pointer-events: none;
  transition: opacity 0ms cubic-bezier(0, .83, .61, .99);
}
.lights__layer { opacity: 0; }

/* Show the set that matches the theme — same selector pair as theme.css. */
.lights__set--light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lights__set--dark { display: none; }
  :root:not([data-theme="dark"]) .lights__set--light { display: block; }
}
[data-theme="light"] .lights__set--dark { display: none; }
[data-theme="light"] .lights__set--light { display: block; }

/* Day only: a pool of the renders' own ground around the art. Gemini drew the
   day set on a cool blue-grey (about rgb(193,202,211)), the page is a warm grey,
   and without the pool the art's edge read as a disc. Re-tinting the renders'
   ground instead was tried and dropped: no mask kept the white headphones and the
   floor shadow apart from the wall. --art-pool is drawn in a box 1.5 times the
   art's side, centred on it: solid to 0.55 of the art's radius, gone by 1.25.
   The cover wraps its stage in .lights-pool; the exploded view reuses the
   gradient for its pose 0. */
:root {
  --art-pool: radial-gradient(closest-side, rgb(193, 202, 211) 0 37%,
    rgba(193, 202, 211, .4) 57%, rgba(193, 202, 211, 0) 83%);
}
/* the stage's right margin moves to the wrapper, so the pool centres on the art */
.lights-pool { position: relative; margin-right: clamp(0px, 3vw, 60px); }
.lights-pool > .lights { position: relative; z-index: 1; margin-right: 0; }
.lights-pool::before {
  content: ''; position: absolute; inset: -25%; pointer-events: none;
  background: var(--art-pool); display: none;
}
[data-theme="light"] .lights-pool::before { display: block; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .lights-pool::before { display: block; } }

/* Hit targets: 18% of the stage, centred on each lamp. No :hover look, so the
   audience never sees a ring; the presenter's .is-hot and keyboard focus do. */
.light {
  position: absolute; z-index: 2;
  width: 18%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  margin: 0; padding: 0; border: none; border-radius: 50%;
  background: transparent; cursor: pointer;
}
.light:focus-visible,
.light.is-hot { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 55%, transparent); }

.visually-hidden {
  position: absolute; overflow: hidden; clip: rect(0 0 0 0);
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
}

/* ── Theme-only elements: same selector pair as theme.css, so they follow
   both the toggle and the OS preference. ─────────────────────────────────── */
.only-light { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .only-dark { display: none; }
  :root:not([data-theme="dark"]) .only-light { display: block; }
}
[data-theme="light"] .only-dark { display: none; }
[data-theme="light"] .only-light { display: block; }

/* ── Open questions: the question alone on screen ───────────────────────── */
.slide--ask .display { max-width: 20ch; }

/* Narrow screens: the stage under the title. */
@media (max-width: 760px) {
  .lights { width: min(90vw, 58vh); margin: 0 auto; }
  .lights-pool { width: min(90vw, 58vh); margin: 0 auto; }
}