/* Interactive guides (guides/<slug>.html, js/guide.js, scripts/build-guides.mjs).
   One look for every guide: the bar with the topic picker and the section
   tabs, the hero, then Learn (chapters with animated figures), the dry lab,
   Check, Downloads and Teacher resources. Figures are drawn for paper (ink on white) in
   either theme, like the revision maps' sheets.

   The look is a notebook's, not an app's: sections are ruled (a line across
   the top, coloured where it means something: pink to predict, yellow to
   remember) rather than boxed; choices are words, the chosen one underlined;
   corners are small (2 to 4 px) and nothing is a pill; one filled button
   where there is a main thing to do, the rest as underlined words; no offset
   shadows (a soft one only on what floats). The colour lives in the figures. */

.gd-page { max-width: 1180px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 32px) 40px; }
.gd-page *, .gd-page *::before, .gd-page *::after { box-sizing: border-box; }

/* ── The bar: topic picker and section tabs ─────────────────── */
.gd-bar { position: sticky; top: var(--gd-top, 64px); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 22px; padding: 6px 2px; background: var(--paper); border: 0; border-radius: 0; border-bottom: 1.5px solid var(--ink); }
.gd-pick { position: relative; }
.gd-pick-btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 4px; border: 0; border-radius: 0; background: none; color: var(--ink); font: inherit; font-family: var(--font-display); font-size: 16px; font-weight: 650; cursor: pointer; }
.gd-pick-btn small { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .06em; opacity: 1; color: var(--riso-pink-deep); }
.gd-pick-btn:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.gd-pick-btn svg { width: 12px; height: 12px; flex: none; }
.gd-pick-pop { position: absolute; left: 0; top: calc(100% + 8px); z-index: 30; width: min(760px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow: auto; padding: 14px; background: var(--paper-white); border: 1px solid var(--ink); border-radius: 4px; box-shadow: 0 10px 30px rgba(17, 30, 24, .16); }
.gd-pick-pop[hidden] { display: none; }
.gd-pick-cs { display: inline-flex; gap: 14px; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; }
.gd-pick-cs button { padding: 5px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-dim); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gd-pick-cs button[aria-selected="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2.5px 0 var(--riso-green); }
.gd-pick-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 18px; }
.gd-pick-gh { margin: 0 0 4px; font-family: var(--font-display); font-size: 13.5px; font-weight: 700; }
.gd-pick-gh b { margin-right: 5px; font-family: var(--font-mono); font-weight: 500; color: var(--riso-pink-deep); }
.gd-pick-g ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; }
.gd-pick-i { display: grid; grid-template-columns: 3.4em minmax(0, 1fr) auto; align-items: baseline; gap: 0 4px; padding: 3px 6px; border-radius: 2px; color: var(--ink); font-size: 13.5px; line-height: 1.3; text-decoration: none; }
a.gd-pick-i:hover { background: var(--paper); }
.gd-pick-i .c { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.gd-pick-i i { font-family: var(--font-mono); font-size: 12px; font-style: normal; color: var(--riso-pink-deep); }
.gd-pick-i.soon { color: var(--ink-faint); }
.gd-pick-i.soon small { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
.gd-pick-i.here { background: var(--riso-green); color: var(--on-brand); font-weight: 650; }
.gd-pick-i.here .c { color: inherit; }
a.gd-pick-i .t { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.gd-pick-all { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.gd-pick-wait { margin: 6px; color: var(--ink-dim); font-size: 14px; }
.gd-tabs { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: auto; }
.gd-tabs a { position: relative; padding: 6px 8px 6px 18px; border-radius: 0; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.gd-tabs a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border: 0; border-radius: 50%; background: var(--line-strong); }
.gd-tabs a.seen::before { background: var(--riso-green); border-color: var(--riso-green-deep); }
.gd-tabs a.on { background: none; box-shadow: inset 0 -2.5px 0 var(--ink); }
.gd-tabs a:hover { background: none; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
@media (max-width: 760px) {
  /* One slim row on a phone: the topic as its code, the sections beside it. */
  .gd-bar { top: var(--gd-top, 56px); flex-wrap: nowrap; gap: 6px; margin-bottom: 16px; padding: 4px 0; }
  .gd-pick-btn { flex: none; gap: 5px; font-size: 14px; }
  .gd-pick-btn .t { display: none; }
  .gd-pick-pop { position: fixed; left: 12px; right: 12px; top: calc(var(--gd-stick, 120px) + 6px); width: auto; max-height: calc(100vh - var(--gd-stick, 120px) - 24px); }
  .gd-tabs { flex: 1; min-width: 0; margin: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .gd-tabs::-webkit-scrollbar { display: none; }
  .gd-tabs a { flex: none; font-size: 13px; }
  .gd-level { flex: none; }
}

/* ── Hero ───────────────────────────────────────────────────── */
.gd-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; margin: 0 0 40px; }
.gd-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--ink-dim); }
.gd-hero h1 { margin: 8px 0 12px; font-family: var(--font-display); font-size: clamp(36px, 5.4vw, 64px); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.gd-hero h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-pink-deep); }
.gd-lede { margin: 0 0 14px; max-width: 54ch; color: var(--ink-dim); font-size: 17.5px; line-height: 1.5; }
.gd-chips { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 18px; }
.gd-chip { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); }
.gd-chip + .gd-chip::before { content: ""; width: 4px; height: 4px; margin: 0 10px 0 10px; background: var(--line-strong); }
.gd-chip.ink { background: none; color: var(--ink); font-weight: 600; }
.gd-goals { display: grid; gap: 0; margin: 0; padding: 10px 0 0; list-style: none; background: none; border: 0; border-radius: 0; border-top: 1.5px solid var(--ink); }
.gd-goals > p { margin: 0 0 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-dim); margin-bottom: 4px; }
.gd-goals li { position: relative; font-size: 15px; line-height: 1.45; padding: 7px 0 7px 22px; border-bottom: 1px solid var(--line); }
.gd-goals li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 10px; height: 2px; border: 0; border-radius: 0; background: var(--riso-green-deep); }
.gd-goals li code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.gd-go { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.gd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper-white); color: var(--ink); font-size: 15px; font-weight: 650; text-decoration: none; transition: transform .12s, box-shadow .12s; }
.gd-btn:hover { background: var(--paper); }
.gd-btn.primary { background: var(--riso-green); color: var(--on-brand); border-color: var(--riso-green-deep); }
.gd-btn.primary:hover { border-color: var(--riso-green-deep); background: var(--riso-green-deep); }
.gd-go .gd-btn:not(.primary) { padding-left: 6px; padding-right: 6px; border-color: transparent; background: none; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--line-strong); text-underline-offset: 5px; }
.gd-go .gd-btn:not(.primary)::after { content: "\2192"; text-decoration: none; }
.gd-go .gd-btn:not(.primary):hover { text-decoration-color: var(--ink); }
.gd-hero-fig { min-width: 0; }
.gd-hero-fig > .gd-fig { box-shadow: none; }
.gd-goals.wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 28px; margin: -14px 0 44px; }
.gd-goals.wide > p { grid-column: 1 / -1; }
.gd-pick-static { cursor: default; }
@media (max-width: 860px) { .gd-hero { grid-template-columns: minmax(0, 1fr); } .gd-goals.wide { margin-top: 0; } }

/* ── Sections ───────────────────────────────────────────────── */
/* How this was made: a ruled note at the foot of the page, for everyone. */
.gd-made { max-width: 78ch; margin: 8px 0 0; padding: 14px 0 0; border-top: 1.5px solid var(--line-strong, var(--line)); color: var(--ink-dim); font-size: 13px; line-height: 1.55; }
.gd-made b { color: var(--ink); font-weight: 650; }
.gd-sec { margin: 0 0 56px; scroll-margin-top: calc(var(--gd-top, 64px) + 70px); }
.gd-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); }
.gd-h h2 { margin: 0; font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.01em; }
.gd-h h2 b { margin-right: 10px; font-family: var(--font-mono); font-size: .45em; font-weight: 500; letter-spacing: .08em; color: var(--riso-pink-deep); vertical-align: .35em; }
.gd-h h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-pink-deep); }
.gd-h p { margin: 0; flex: 1 1 340px; color: var(--ink-dim); font-size: 15.5px; line-height: 1.5; }

/* ── Learn: the chapters, listed, then each in turn ──────────── */
.gd-toc { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0 0 30px; padding: 0; list-style: none; counter-reset: none; border-top: 1px solid var(--line); }
.gd-toc a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.gd-toc a span { display: inline-grid; place-items: center; width: auto; height: auto; border-radius: 0; background: none; color: var(--riso-pink-deep); font-family: var(--font-mono); font-size: 12px; }
.gd-toc a:hover { text-decoration: underline; text-underline-offset: 4px; }

.gd-ch { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 22px 34px; align-items: start; margin: 0 0 46px; scroll-margin-top: calc(var(--gd-top, 64px) + 70px); }
.gd-ch.flip > .gd-fig { order: -1; }
.gd-ch.wide { grid-template-columns: minmax(0, 1fr); }
.gd-ch.wide > .gd-fig.gd-el { justify-self: center; width: 100%; max-width: 880px; }   /* a tool keeps the scene band's measure */
.gd-ch-text { min-width: 0; }
.gd-code { display: inline-block; margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-dim); }
.gd-code b { margin-right: 6px; padding: 0 6px; border: 1px solid var(--ink); border-radius: 2px; font-weight: 500; color: var(--ink); }
.gd-code b.hl { background: var(--riso-pink); border-color: var(--ink); color: var(--on-brand); }
.gd-ch h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.12; letter-spacing: -.01em; }
.gd-ch h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-green-deep); }
.gd-ch p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
/* a tool placed in a wide chapter keeps its own type: no chapter paragraphs inside it */
.gd-ch:where(.wide) :where(.gd-el-live) p { margin: 0; font-size: inherit; line-height: inherit; }
.gd-keys { display: grid; gap: 6px; margin: 4px 0 12px; padding: 0; list-style: none; }
.gd-keys li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.5; }
.gd-keys li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 10px; height: 2px; background: var(--riso-green-deep); border: 0; border-radius: 0; }
.gd-myth { margin: 12px 0; padding: 2px 0 2px 16px; border: 0; border-radius: 0; background: none; font-size: 14.5px; line-height: 1.5; border-left: 3px solid var(--riso-pink); }
.gd-myth > b:first-child { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--riso-pink-deep); }
.gd-eg { margin: 12px 0; padding: 2px 0 2px 16px; border: 0; border-radius: 0; font-size: 14.5px; line-height: 1.5; border-left: 3px dotted var(--riso-green-deep); }
.gd-eg > b:first-child { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--riso-green-deep); }
dfn[data-def] { font-style: normal; font-weight: 650; text-decoration: underline dotted var(--riso-green-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: help; }
dfn[data-def]:focus-visible { outline: 2px solid var(--riso-pink-deep); outline-offset: 2px; border-radius: 3px; }
.gd-tip { position: absolute; z-index: 60; max-width: 300px; padding: 9px 12px; background: var(--ink); color: var(--paper-white); border-radius: 4px; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(17, 30, 24, .22); }
.gd-tip b { color: var(--riso-yellow); }
.gd-tip[hidden] { display: none; }
@media (min-width: 861px) {
  /* Two figures on one chapter stack in the figure column beside the text, so no gap opens up beside a long text */
  .gd-ch:not(.wide):has(> .gd-fig ~ .gd-fig:not(.gd-scene)) > .gd-ch-text { grid-column: 1; grid-row: 1 / span 2; }
  .gd-ch:not(.wide):has(> .gd-fig ~ .gd-fig:not(.gd-scene)) > .gd-fig { grid-column: 2; }
  .gd-ch.flip:not(.wide):has(> .gd-fig ~ .gd-fig:not(.gd-scene)) > .gd-ch-text { grid-column: 2; }
  .gd-ch.flip:not(.wide):has(> .gd-fig ~ .gd-fig:not(.gd-scene)) > .gd-fig { grid-column: 1; }
  /* The 16px gap above a pinned figure is paper-coloured, so the text scrolling past does not show through it */
  .gd-ch > .gd-fig.gd-stick { position: sticky; top: calc(var(--gd-stick, 120px) + 16px); box-shadow: 0 -16px 0 0 var(--paper); }
  .gd-ch > .gd-fig.gd-squeeze > svg, .gd-ch > .gd-fig.gd-squeeze .gd-svg { width: auto; max-width: 100%; max-height: var(--gd-svg-max); margin: 0 auto; }
}
@media (max-width: 860px) {
  .gd-ch { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The text's parts join the chapter's one column, so the figure can come
     straight after the opening paragraph instead of after every box. */
  .gd-ch > .gd-ch-text { display: contents; }
  .gd-ch > .gd-ch-text > * { order: 3; }
  .gd-ch > .gd-ch-text > .gd-code, .gd-ch > .gd-ch-text > h3 { order: 0; }
  .gd-ch > .gd-ch-text > h3 + p { order: 1; }
  .gd-ch > .gd-fig, .gd-ch.flip > .gd-fig { order: 2; margin: 6px 0 16px; }
  .gd-ch > .gd-fig ~ .gd-fig { order: 4; }
  .gd-ch > .gd-fig ~ .gd-fig ~ .gd-ch-text > * { order: 5; }
}

/* ── Figures: drawn for paper in either theme ───────────────── */
.gd-fig { --ink-p: #1a3a2a; --dim-p: #263b2f; --pink-p: #ff7eb6; --pinkd-p: #e3589c; --green-p: #2db876; --greend-p: #1a8a55; --tint-p: #e8f6ee; margin: 0; min-width: 0; padding: 12px 12px 10px; background: #fbfdfb; color: #1a3a2a; border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: none; }
.gd-fig.pink { box-shadow: none; border: 1px solid var(--line-strong); border-radius: 4px; }
.gd-fig > svg, .gd-fig .gd-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gd-fig svg text { font-family: var(--font-display); }
.gd-fig svg .mono { font-family: var(--font-mono); }
.gd-fig figcaption { margin: 8px 2px 0; color: #263b2f; font-size: 13.5px; line-height: 1.45; }
/* Moving parts ease into place; hidden ones fade. */
.gd-anim [data-at], .gd-anim [data-only], .gd-anim [data-on], .gd-anim [data-tr], .gd-anim [data-op] {
  transition: opacity .55s ease, transform .95s cubic-bezier(.3, .75, .2, 1); transform-box: fill-box; transform-origin: center; }
.gd-fig .gd-off { pointer-events: none; }
.gd-anim.gd-calm [data-at], .gd-anim.gd-calm [data-only], .gd-anim.gd-calm [data-on], .gd-anim.gd-calm [data-tr], .gd-anim.gd-calm [data-op] { transition: none; }
.gd-play { display: flex; align-items: center; gap: 6px; margin: 10px 2px 2px; }
.gd-pb { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1.5px solid #1a3a2a; border-radius: 4px; background: #fff; color: #1a3a2a; cursor: pointer; }
.gd-pb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.gd-pp { width: 40px; height: 40px; background: #1a3a2a; color: #fff; }
.gd-pp svg { width: 17px; height: 17px; }
.gd-pp .i-play { fill: currentColor; stroke: none; }
.gd-pp .i-pause, .gd-pp .i-again, .gd-play.playing .gd-pp .i-play, .gd-play.end .gd-pp .i-play { display: none; }
.gd-play.playing .gd-pp .i-pause { display: block; }
.gd-play.end .gd-pp .i-again { display: block; }
.gd-pb:focus-visible { outline: 2.5px solid #e3589c; outline-offset: 2px; }
.gd-dots { display: inline-flex; gap: 5px; margin-left: 4px; }
.gd-dot { width: 24px; height: 16px; padding: 0; border: 0; border-radius: 0; background: linear-gradient(#cfe2d7, #cfe2d7) center / 100% 4px no-repeat; cursor: pointer; }
.gd-dot.done { background-image: linear-gradient(#5fbf8f, #5fbf8f); }
.gd-dot.on { background-image: linear-gradient(#e3589c, #e3589c); background-size: 100% 6px; }
.gd-stepn { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: #263b2f; }
.gd-cap { position: relative; margin: 6px 2px 0; padding: 0; list-style: none; min-height: 3.2em; }
.gd-cap li { display: none; font-size: 14.5px; line-height: 1.45; color: #1a3a2a; }
.gd-cap li.on { display: block; animation: gd-cap .45s ease; }
.gd-cap li b { color: #1a8a55; }
@keyframes gd-cap { from { opacity: 0; transform: translateY(4px); } }
.gd-calm .gd-cap li { display: block; margin-bottom: 4px; }
/* Things that keep moving: molecules jostle, bubbles rise. */
.gd-jig { animation: gd-jig 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.gd-jig.b { animation-duration: 2.3s; animation-delay: -.7s; }
.gd-jig.c { animation-duration: 1.5s; animation-delay: -1.1s; }
@keyframes gd-jig { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(2px, -2px) rotate(3deg); } 50% { transform: translate(-1px, 2px) rotate(-2deg); } 75% { transform: translate(-2px, -1px) rotate(2deg); } }
.gd-float { animation: gd-float 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes gd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.gd-rise { animation: gd-rise 2.6s linear infinite; transform-box: fill-box; }
@keyframes gd-rise { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-70px); opacity: 0; } }
.gd-pulse { animation: gd-pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.gd-spin { animation: gd-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gd-spin { to { transform: rotate(360deg); } }
.gd-dash { stroke-dasharray: 6 6; animation: gd-dash 1.2s linear infinite; }
@keyframes gd-dash { to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) { .gd-jig, .gd-float, .gd-rise, .gd-pulse, .gd-spin, .gd-dash { animation: none !important; } }
/* A figure you explore: tap a part, it lights and the rest fade. */
.gd-explore [data-part] { cursor: pointer; transition: opacity .3s; }
.gd-explore.picked [data-part]:not(.lit) { opacity: .25; }
.gd-readout { min-height: 3em; margin: 8px 2px 0; padding: 8px 10px; border-radius: 2px; background: #e8f6ee; color: #1a3a2a; font-size: 14.5px; line-height: 1.45; box-shadow: inset 3px 0 0 #2db876; }
.gd-readout b { color: #1a8a55; }
.gd-seg { display: inline-flex; flex-wrap: wrap; gap: 2px 16px; margin: 8px 2px 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -1px 0 #c3dccf; }
.gd-seg button { padding: 6px 0; border: 0; border-radius: 0; background: transparent; color: #263b2f; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.gd-seg button[aria-pressed="true"] { background: none; color: #1a3a2a; box-shadow: inset 0 -3px 0 #2db876; }
.gd-fig [data-when] { transition: opacity .45s ease; }
.gd-explore [data-part]:focus { outline: none; }
.gd-explore [data-part]:focus-visible { outline: 2.5px solid #e3589c; outline-offset: 2px; }
.gd-explore [data-part].lit { filter: drop-shadow(0 0 3px rgba(227, 88, 156, .55)); }
.gd-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 2px 0; color: #1a3a2a; font-size: 14px; font-weight: 600; }
.gd-range { flex: 1 1 180px; accent-color: #1a8a55; min-height: 28px; }
.gd-ctl output, .gd-ctl [data-val] { font-family: var(--font-mono); font-size: 13px; }

/* ── Games: a game after a chapter, ruled like a section ─────── */
.gd-game { max-width: 980px; margin: 0 auto; padding-top: 10px; border-top: 3px solid var(--riso-green); }
.gd-game-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.gd-game-h p { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 750; letter-spacing: -.01em; }
.gd-game-h p b { margin-right: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--riso-green-deep); vertical-align: .2em; }
.gd-game.gd-lab-wait .gd-game-body { min-height: 420px; border: 1px dashed var(--line-strong); border-radius: 4px; }
/* A dry lab placed in Learn (a second bench) gets a game's head, ruled the same way. */
.gd-lab-h { max-width: 980px; margin: 0 auto 10px; padding-top: 10px; border-top: 3px solid var(--riso-green); }
/* A game's or a lab's still (the build bakes it from the module's still()): it shows until the
   live one starts, then steps aside; print shows it again in place of the live one. */
.gd-game > .gd-still { margin: 0 0 4px; }
/* css-pair-ok: gd-still-on is set by js/guide.js */
.gd-still-on > .gd-still { display: none; }
@media print {
  .gd-still-on > .gd-still { display: block !important; }
  .gd-game.gd-still-on > .gd-game-body, .gd-lab.gd-still-on > :not(.gd-still) { display: none !important; }
  .gd-still .gd-off { display: none !important; }
}

/* ── Elements: shared interactives (guides/elements/) ─────────── */
/* A still the build wrote (an animated figure), and over it, once the module
   loads, the live element: a head, its host, its live line. The plate is
   paper in both themes, so everything inside uses the paper colours. */
.gd-el-h { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #263b2f; }
.gd-el-h > span { flex: 1; min-width: 0; }
.gd-el-h b { margin-right: 8px; font-weight: 600; color: #1a8a55; }
.gd-el-h i { font-style: normal; color: #1a8a55; white-space: nowrap; }
.gd-el-h .gd-max-btn { color: #1a3a2a; font-family: var(--font-display); letter-spacing: 0; text-transform: none; }
.gd-el-h .gd-max-btn:focus-visible { outline-color: #e3589c; }
.gd-el-h .gd-sw { width: 26px; height: 40px; }
@media (max-width: 600px) { .gd-el-h { flex-wrap: wrap; row-gap: 2px; } .gd-el-h > span { flex: 1 1 60%; } .gd-el-h i { order: 3; flex-basis: 100%; } }
/* css-pair-ok: gd-el-on and gd-max are set by js/guide.js */
.gd-el.gd-el-on > .gd-el-still, .gd-el.gd-el-on > .gd-play, .gd-el.gd-el-on > .gd-cap { display: none; }
.gd-el-say { min-height: 2.9em; margin: 8px 2px 0; color: #1a3a2a; font-size: 14.5px; line-height: 1.45; }
.gd-el-say b { color: #1a8a55; }
/* a bare element (a hero) has no controls to speak of, so no room for a line */
.gd-el.gd-bare .gd-el-say:empty { display: none; }
/* full screen; position and inset beat pin()'s sticky class and inline top */
.gd-fig.gd-el.gd-max { position: fixed !important; inset: 0 !important; z-index: 300; width: auto; max-width: none !important; margin: 0 !important; padding: calc(var(--gd-bar, 50px) + 8px) max(16px, 3vw) 20px; overflow: auto; border: 0; border-radius: 0; background: #fbfdfb; }
.gd-el.gd-max .gd-el-h .gd-max-btn { display: none; }
.gd-el.gd-max .gd-svg { max-height: none; }
@media (prefers-reduced-motion: reduce) { .gd-el-live *, .gd-el-live *::before, .gd-el-live *::after { transition: none !important; animation: none !important; } }
@media print {
  .gd-el .gd-el-live, .gd-el .gd-el-h, .gd-el .gd-el-say { display: none !important; }
  .gd-el.gd-el-on > .gd-el-still, .gd-el.gd-el-on > .gd-cap { display: block !important; }
  .gd-el .gd-el-still .gd-off { display: none !important; }
}

/* ── Remember it: mnemonic tiles ────────────────────────────── */
.gd-mnem { margin: 14px 0 0; padding: 10px 0 0; background: none; border: 0; border-radius: 0; border-top: 3px solid var(--riso-yellow); }
.gd-mnem .gd-mnem-h { margin: 0 0 10px; font-size: 15px; line-height: 1.45; }
.gd-mnem-h > b:first-child { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: color-mix(in srgb, var(--riso-yellow) 55%, var(--ink)); text-transform: uppercase; }
.gd-mnem-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 62px), 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.gd-tile { position: relative; display: block; width: 100%; min-height: 104px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; perspective: 600px; }
.gd-tile > .f, .gd-tile > .k { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 8px 4px; border: 1px solid transparent; border-radius: 3px; text-align: center; backface-visibility: hidden; transition: transform .5s cubic-bezier(.3, .75, .2, 1), opacity .3s; }
.gd-tile > .f { background: var(--riso-yellow); color: #1a3a2a; }
.gd-tile > .k { background: var(--paper); transform: rotateY(180deg); border-color: var(--line-strong); }
.gd-tile[aria-pressed="true"] > .f { transform: rotateY(-180deg); }
.gd-tile[aria-pressed="true"] > .k { transform: rotateY(0); }
.gd-tile .l { font-family: var(--font-display); font-size: 38px; font-weight: 800; line-height: 1; }
.gd-tile .f .w { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.gd-tile .t { max-width: 100%; font-family: var(--font-display); font-size: 14px; font-weight: 750; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; letter-spacing: -.01em; }
.gd-tile .t::first-letter { color: var(--riso-pink-deep); }
.gd-tile .d { font-size: 12px; line-height: 1.3; color: var(--ink-dim); }
@media (max-width: 480px) { .gd-tile { min-height: 96px; } .gd-tile .l { font-size: 32px; } .gd-tile .f .w { font-size: 12.5px; } .gd-tile .t { font-size: 12px; } .gd-tile .d { font-size: 12px; } }
.gd-tile:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 3px; border-radius: 3px; }
.gd-mnem .gd-mnem-go { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; font-size: 13.5px; color: var(--ink-dim); }
.gd-mnem-go button { padding: 6px 2px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .gd-tile > .f, .gd-tile > .k { transition: opacity .2s; transform: none !important; }
  .gd-tile > .k { opacity: 0; } .gd-tile[aria-pressed="true"] > .k { opacity: 1; } .gd-tile[aria-pressed="true"] > .f { opacity: 0; }
}

/* ── Scenes: films that play in view ────────────────────────── */
/* A scene after a chapter's own figure takes the chapter's full width. */
.gd-ch > .gd-fig ~ .gd-fig.gd-scene { order: 5; grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 880px; margin-top: 6px; }
.gd-ch-scene { max-width: 880px; margin: -18px auto 46px; }
.gd-scene { display: grid; gap: 8px; }
.gd-scene-wait { min-height: 260px; background: repeating-linear-gradient(-45deg, #fbfdfb 0 10px, #eef6f1 10px 11px); }
.gd-scene-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #263b2f; }
.gd-scene-h b { font-weight: 600; color: #1a8a55; text-align: right; white-space: nowrap; }
.gd-scene-stage { position: relative; width: 100%; overflow: hidden; border-radius: 2px; background: #fbfdfb; border: 1px solid #b9d3c5; }
.gd-scene-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* A film drawn in SVG (api.svg()): the same plate, with parts that can be tapped. */
.gd-scene-stage > .gd-scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.gd-scene-cap { min-height: 2.9em; margin: 0 2px; font-size: 15px; line-height: 1.45; color: #1a3a2a; }
.gd-scene-cap b { color: #1a8a55; }
.gd-scene-ctl { display: flex; align-items: center; gap: 8px; margin: 0 2px; }
/* On a phone, and in full screen's side column, a film's row (play, again, the scrubber, Show me how, Full screen)
   is too narrow for the tour's words: the tour keeps its icon, and its words stay for a screen reader. */
.gd-scene.gd-max-side .gd-scene-ctl .gd-tour-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 480px) { .gd-scene-ctl .gd-tour-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.gd-scene.gd-max-side .gd-scene-ctl .gd-tour-btn { min-width: 36px; min-height: 36px; justify-content: center; }
@media (max-width: 480px) { .gd-scene-ctl .gd-tour-btn { min-width: 36px; min-height: 36px; justify-content: center; } }
.gd-scene .gd-pp .i-pause { display: none; }
.gd-scene.playing .gd-pp .i-play { display: none; }
.gd-scene.playing .gd-pp .i-pause { display: block; }
/* The scrubber: the slim pink-on-grey bar is the slider's track; the whole
   row's height is its hit area (44 px on touch), and its knob is the film's
   moment. Dragged, it shows the time above the knob. --p is the film's
   place, 0 to 1 (js/guide.js). */
.gd-scene-prog { --p: 0; position: relative; flex: 1; min-width: 64px; height: 28px; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; outline: none; }
.gd-scene-prog[hidden] { display: none; }
.gd-scene-prog::before, .gd-scene-prog i { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; }
.gd-scene-prog::before { right: 0; background: #dcebe2; }
.gd-scene-prog i { width: calc(var(--p) * 100%); background: #ff7eb6; }
.gd-scene-prog b { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 2px solid #1a3a2a; border-radius: 50%; background: #ff7eb6; box-sizing: border-box; transition: transform .12s ease; }
.gd-scene-prog:hover b, .gd-scene-prog.gd-drag b, .gd-scene-prog:focus-visible:not(.gd-ptr) b { transform: scale(1.3); }
.gd-scene-prog:focus-visible:not(.gd-ptr)::before { box-shadow: 0 0 0 2px #fbfdfb, 0 0 0 4.5px #e3589c; }
.gd-scene-prog.gd-drag::after { content: attr(data-t); position: absolute; bottom: calc(50% + 12px); left: calc(var(--p) * 100%); transform: translateX(-50%); padding: 2px 6px; border-radius: 2px; background: #1a3a2a; color: #fbfdfb; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; }
.gd-scene-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px 16px; margin: 2px 2px 0; color: #1a3a2a; }
.gd-scene-opts:empty { display: none; }
.gd-scene-c { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; font-size: 14px; font-weight: 600; }
.gd-scene-c input[type="range"] { width: 100%; min-height: 32px; accent-color: #1a8a55; }
.gd-scene-c output { min-width: 3.6em; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; text-align: right; }
.gd-scene-toggle button { grid-column: 1 / -1; justify-self: start; padding: 7px 0 7px 26px; position: relative; border: 0; border-radius: 0; background: none; color: #1a3a2a; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gd-scene-toggle button::before { content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 1.5px solid #1a3a2a; border-radius: 2px; background: #fff; }
.gd-scene-toggle button[aria-pressed="true"]::before { background: #2db876; box-shadow: inset 0 0 0 3px #fff; }
.gd-scene-choice { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); }
.gd-scene-choice .gd-seg { margin: 0; justify-self: start; }
@media (max-width: 480px) { .gd-scene-c { grid-template-columns: minmax(0, 1fr) auto; } .gd-scene-c input[type="range"] { grid-column: 1 / -1; grid-row: 2; } .gd-scene-cap { font-size: 14px; } .gd-scene-choice { grid-template-columns: minmax(0, 1fr); } .gd-scene-choice .gd-seg { grid-column: 1; } }

/* ── A figure, full screen on a phone ──────────────────────── */
.gd-fig { position: relative; }
.gd-zoom-btn { display: grid; place-items: center; position: absolute; top: 4px; right: 4px; z-index: 2; width: 34px; height: 44px; padding: 0; border: 0; border-radius: 3px; background: none; cursor: pointer; }
.gd-zoom-btn:focus-visible { outline: 2.5px solid #e3589c; outline-offset: 1px; }
.gd-zoom-btn .gd-sw { width: 26px; height: 38px; }
@media (max-width: 700px) { .gd-zoom-btn { width: 38px; height: 48px; } }
.gd-zoom { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #fbfdfb; color: #1a3a2a; }
.gd-zoom[hidden] { display: none; }
.gd-zoom-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1.5px solid #1a3a2a; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; }
.gd-zoom-top .gd-max-btn { color: #1a3a2a; font-family: var(--font-display); letter-spacing: 0; }
.gd-zoom-say { flex: 1; min-width: 0; }
.gd-zoom-more { padding: 6px 2px; border: 0; background: none; color: #1a3a2a; font-family: var(--font-display); font-size: 14px; font-weight: 650; letter-spacing: 0; text-decoration: underline; text-decoration-color: #2db876; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.gd-zoom-more[hidden] { display: none; }
.gd-zoom-more:focus-visible { outline: 2.5px solid #e3589c; outline-offset: 2px; }
/* Fitted (js zoomFit sizes the drawing to the room left by its player and caption), centred */
.gd-zoom-body { flex: 1; display: grid; place-items: center; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
.gd-zoom-body > .gd-fig { width: min(100%, 1240px); margin: 0; border: 0; box-shadow: none; padding: 0; background: transparent; }
/* Zoom in: the drawing at its reading size, dragged around */
.gd-zoom.gd-zoom-in .gd-zoom-body { place-items: start; }
.gd-zoom.gd-zoom-in .gd-zoom-body > .gd-fig { width: auto; }
.gd-zoom.gd-zoom-in .gd-zoom-body > .gd-fig > svg, .gd-zoom.gd-zoom-in .gd-zoom-body > .gd-fig .gd-svg { width: max(calc(100vw - 24px), 760px); max-width: none; height: auto; }
@media (max-height: 520px) { .gd-zoom-top { padding: 2px 12px; } .gd-zoom-body { padding: 6px 12px; } }
.gd-zoom-body > .gd-fig .gd-zoom-btn { display: none; }
/* Beside (a wide, short window): the drawing on the left at the window's
   height, its player, caption and buttons in a column of their own. */
.gd-zoom-body > .gd-fig.gd-zoom-beside { display: flex; align-items: center; justify-content: center; gap: 24px; width: 100%; }
.gd-zoom-beside > svg, .gd-zoom-beside > .gd-svg { flex: none; }
.gd-zoom-side { flex: 0 1 var(--gd-zs, 300px); min-width: 0; max-height: var(--gd-zh, 100%); overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.gd-zoom-side > *, .gd-scene-side > * { flex-shrink: 0; }
.gd-zoom-side > :first-child { margin-top: auto; }
.gd-zoom-side > :last-child { margin-bottom: auto; }
/* More below: a full-screen box or side column that scrolls says so at its
   foot while there is more under it (gd-below, set by js/guide.js). */
.gd-below::after { content: "More below \2193"; content: "More below \2193" / ""; position: sticky; bottom: 0; z-index: 3; display: block; flex: none; grid-column: 1 / -1; align-self: stretch; margin: -44px 0 0; height: 44px; padding-top: 24px; box-sizing: border-box; text-align: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: #1a3a2a; background: linear-gradient(transparent, var(--gd-fade, #fbfdfb) 62%); pointer-events: none; }
.gd-game.gd-max, .gd-lab.gd-max { --gd-fade: var(--paper); }
html.gd-zoomed, html.gd-zoomed body { overflow: hidden; }

/* ── Full screen: a lab or a scene takes the window ────────── */
/* The control is a light switch: a cream plate with two screws and a lever
   that flicks down, its pilot light glowing when on. The plate stays cream in
   either theme, like the real thing on a wall. */
.gd-max-btn { display: inline-flex; align-items: center; gap: 10px; padding: 2px 2px; border: 0; border-radius: 3px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.gd-max-btn:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 3px; }
.gd-sw { position: relative; flex: none; width: 30px; height: 46px; border: 1px solid rgba(26, 58, 42, .38); border-radius: 5px; background: linear-gradient(160deg, #ffffff 0%, #eef3ef 70%, #e3ebe5 100%); box-shadow: 0 1px 2px rgba(26, 58, 42, .22), inset 0 -1px 0 rgba(26, 58, 42, .08); transition: box-shadow .3s; }
.gd-sw::before, .gd-sw::after { content: ""; position: absolute; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9d6cd, #7d9586); }
.gd-sw::before { top: 3px; }
.gd-sw::after { bottom: 3px; }
/* the slot the lever runs in, and the lever: up is off, down is on, and it
   overshoots a little as it snaps over */
.gd-sw b { position: absolute; left: 34%; right: 34%; top: 22%; bottom: 22%; border-radius: 3px; background: linear-gradient(#1f3128, #3f5447); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }
.gd-sw i { position: absolute; z-index: 1; left: 23%; right: 23%; top: 15%; height: 36%; border: 1px solid rgba(26, 58, 42, .6); border-radius: 3px; background: linear-gradient(#ffffff, #cfdcd3); box-shadow: 0 4px 0 -1px rgba(26, 58, 42, .3); transform: perspective(60px) rotateX(24deg); transition: top .26s cubic-bezier(.3, 1.7, .45, 1), transform .26s cubic-bezier(.3, 1.7, .45, 1), background .2s, box-shadow .2s; }
.gd-sw i::after { content: ""; position: absolute; left: 50%; bottom: 22%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #b6c6bc; transition: background .2s .12s, box-shadow .2s .12s; }
.gd-max-btn:not([aria-checked="true"]):hover .gd-sw i, .gd-zoom-btn:not([aria-checked="true"]):hover .gd-sw i { top: 19%; }
.gd-max-btn:not([aria-checked="true"]):active .gd-sw i, .gd-zoom-btn:not([aria-checked="true"]):active .gd-sw i { top: 25%; transform: perspective(60px) rotateX(12deg); }
.gd-max-btn[aria-checked="true"] .gd-sw i, .gd-zoom-btn[aria-checked="true"] .gd-sw i { top: 49%; transform: perspective(60px) rotateX(-24deg); background: linear-gradient(#cfdcd3, #ffffff); box-shadow: 0 -4px 0 -1px rgba(26, 58, 42, .3); }
.gd-max-btn[aria-checked="true"] .gd-sw i::after, .gd-zoom-btn[aria-checked="true"] .gd-sw i::after { background: #ffcb45; box-shadow: 0 0 5px 1px rgba(255, 186, 40, .95), 0 0 12px 2px rgba(255, 200, 70, .55); }
.gd-max-btn[aria-checked="true"] .gd-sw, .gd-zoom-btn[aria-checked="true"] .gd-sw { box-shadow: 0 1px 2px rgba(26, 58, 42, .22), 0 0 14px 2px rgba(255, 190, 40, .45); }
/* A yellow pulse behind every full-screen switch (a figure's, a film's, a lab's or a game's) invites the
   press; each stops once it has been pressed (guide.js adds .gd-clicked). */
:is(.gd-max-btn, .gd-zoom-btn):not([aria-checked="true"]):not(.gd-clicked) .gd-sw { animation: gd-sw-call 2.2s ease-in-out infinite; }
@keyframes gd-sw-call { 0%, 100% { box-shadow: 0 1px 2px rgba(26, 58, 42, .22), 0 0 0 0 rgba(255, 190, 40, 0); } 50% { box-shadow: 0 1px 2px rgba(26, 58, 42, .22), 0 0 0 5px rgba(255, 200, 60, .45), 0 0 18px 6px rgba(255, 190, 40, .6); } }
@media (prefers-reduced-motion: reduce) { :is(.gd-max-btn, .gd-zoom-btn):not([aria-checked="true"]):not(.gd-clicked) .gd-sw { animation: none; box-shadow: 0 1px 2px rgba(26, 58, 42, .22), 0 0 10px 3px rgba(255, 190, 40, .55); } }
.gd-h .gd-max-btn { margin-left: auto; align-self: center; }
.gd-scene .gd-max-btn { margin-left: 6px; color: #1a3a2a; font-size: 13px; }
.gd-scene .gd-sw, .gd-max-bar .gd-sw, .gd-zoom-top .gd-sw { width: 26px; height: 40px; }
.gd-scene-ctl .gd-max-btn span { white-space: nowrap; }
.gd-lab.gd-max, .gd-scene.gd-max, .gd-game.gd-max { position: fixed; inset: 0; z-index: 300; width: auto; max-width: none !important; margin: 0 !important; padding: calc(var(--gd-bar, 50px) + 8px) max(16px, 3vw) 20px; overflow: auto; border: 0; border-radius: 0; }
.gd-lab.gd-max, .gd-game.gd-max { background: var(--paper); }
.gd-game.gd-max .gd-game-h .gd-max-btn { display: none; }
.gd-scene.gd-max .gd-scene-ctl .gd-max-btn { display: none; }
/* A film, full screen (js fitScene): the stage gets its own width (its height
   follows its shape), letterboxed in the window, in a centred column (--gd-col) with its title,
   caption, controls and settings, or (gd-max-side) with the caption and
   settings in a column beside it (--gd-side). On a tall, narrow screen
   (gd-max-long) the settings sit below, a scroll away. */
.gd-scene.gd-max { padding: var(--gd-top, 58px) var(--gd-x, 24px) var(--gd-bot, 18px); background: #fbfdfb; grid-template-columns: var(--gd-col, 100%); grid-auto-rows: max-content; justify-content: center; align-content: center; }
.gd-scene.gd-max.gd-max-long { align-content: start; }
@supports (align-content: safe center) { .gd-scene.gd-max { align-content: safe center; } .gd-scene.gd-max.gd-max-long { align-content: start; } }
.gd-scene.gd-max > .gd-scene-stage { justify-self: center; max-width: none; }
.gd-scene.gd-max .gd-scene-cap { min-height: var(--gd-cap, 2.9em) !important; }
/* beside: the film and its controls centred in the window's height, the column the window's whole height */
.gd-scene.gd-max.gd-max-side { grid-template-columns: var(--gd-col) var(--gd-side); grid-template-rows: minmax(0, 1fr) max-content max-content minmax(0, 1fr); row-gap: 0; column-gap: 28px; align-content: stretch; }
.gd-scene.gd-max-side > .gd-scene-stage { grid-column: 1; grid-row: 2; }
.gd-scene.gd-max-side > .gd-scene-ctl { grid-column: 1; grid-row: 3; margin-top: 8px; }
/* the side column takes no height of its own (the rows are the window's) and scrolls if it must */
.gd-scene-side { grid-column: 2; grid-row: 1 / -1; height: 0; min-height: 100%; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.gd-scene-side > .gd-scene-h { flex-wrap: wrap; row-gap: 2px; }
.gd-scene-side > :first-child { margin-top: auto; }
.gd-scene-side > :last-child { margin-bottom: auto; }
.gd-scene-side > .gd-scene-cap { margin: 0 2px; font-size: 16px; }
.gd-scene-side > .gd-scene-opts { grid-template-columns: minmax(0, 1fr); }
/* (a choice whose options would wrap beside its label goes under it: gd-choice-stack, set where shorter) */
.gd-scene-side .gd-scene-choice.gd-choice-stack { grid-template-columns: minmax(0, 1fr); }
.gd-scene-side .gd-scene-choice.gd-choice-stack .gd-seg { grid-column: 1; }
.gd-scene-side > figcaption { margin: 0 2px; }
/* Touch screens: every shared control a full 44 px to tap. The look stays the same; the
   step dots keep their thin bar and gain height, the tabs gain height and a minimum width. */
@media (pointer: coarse) {
  .gd-pb, .gd-pp { flex: none; width: 44px; height: 44px; }
  .gd-dots { gap: 3px; }
  .gd-dot { height: 44px; }
  .gd-seg button { min-height: 44px; min-width: 44px; padding: 0 4px; text-align: center; }
  .gd-scene-toggle button, .gd-scene-choice button { min-height: 44px; }
  .gd-scene-c input[type="range"], .gd-ctl input[type="range"] { min-height: 44px; }
  .gd-max-btn { min-height: 44px; }
  .gd-scene-prog { height: 44px; }
  .gd-scene-prog b { width: 16px; height: 16px; margin: -8px 0 0 -8px; }
}
/* While something is full screen the page's own layers step aside (main > *
   has z-index 1, and the page's view-transition-name makes it a layer of its
   own), so it sits over the site's bar and the dimmer. */
html.gd-zoomed .gd-page { z-index: auto; view-transition-name: none; animation: none; }
html.gd-zoomed .gd-page > .gd-sec { z-index: auto; }
/* (main's paper-settle fade fills forwards, which kept it a layer of its own
   under the page's fixed buttons) and the page's own buttons step out */
html.gd-zoomed .gd-back, html.gd-zoomed .a11y-controls, html.gd-zoomed .aud-share, html.gd-zoomed .scroll-ribosome { visibility: hidden; }
/* the room goes dark behind the lab as it lights up */
.gd-dim { position: fixed; inset: 0; z-index: 299; background: rgba(6, 14, 10, .66); pointer-events: none; }
.gd-max-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 301; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 14px; background: #1a3a2a; color: #fbfdfb; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; animation: gd-cap .35s .25s both; }
.gd-max-bar[hidden] { display: none; }
.gd-max-t { display: none; }
/* A short window (a phone on its side): a slimmer bar, a game's title in it
   in place of its own title row, and less margin round a game or an element,
   so its drawing and what goes with it have the room. */
@media (max-height: 520px) {
  .gd-max-bar { padding: 1px 12px; }
  .gd-max-bar .gd-sw { width: 24px; height: 36px; }
  .gd-max-bar.gd-max-titled > span:first-child { display: none; }
  .gd-max-bar.gd-max-titled > .gd-max-t { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 0; }
  .gd-game.gd-max > .gd-game-h { display: none; }
  .gd-game.gd-max, .gd-fig.gd-el.gd-max { padding-top: calc(var(--gd-bar, 40px) + 4px); padding-bottom: 8px; }
}
.gd-max-bar .gd-max-btn { color: #fbfdfb; font-family: var(--font-display); letter-spacing: 0; }
@media (max-width: 600px) { .gd-max-bar > span { font-size: 12px; } .gd-max-btn > span:last-child { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .gd-sw, .gd-sw i, .gd-sw i::after { transition: none; } .gd-max-bar { animation: none; } .gd-sw, .gd-bz, .gd-bz::before { animation: none !important; transition: none; } }

/* The book view: a link in the bar where the guide has one (not on a phone) */
.gd-booklink { display: inline-flex; align-items: center; gap: 6px; padding: 4px 2px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.gd-booklink svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.gd-booklink:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
@media (max-width: 760px) { .gd-booklink { display: none; } }

/* ── SL or HL ───────────────────────────────────────────────── */
html[data-gd-level="sl"] .gd-hl { display: none !important; }
.gd-hlb { display: inline-block; margin: 0 2px; padding: 0 5px; border: 0; border-radius: 2px; background: var(--riso-pink); color: var(--on-brand); font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.5; letter-spacing: .04em; vertical-align: .12em; }
.gd-level { display: inline-flex; gap: 10px; padding: 0 2px; border: 0; border-radius: 0; }
.gd-level button { padding: 4px 0; border: 0; border-radius: 0; background: transparent; color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; font-weight: 600; cursor: pointer; }
.gd-level button[aria-pressed="true"] { background: none; color: var(--ink); box-shadow: inset 0 -2.5px 0 var(--ink); }
.gd-level button[data-level="hl"][aria-pressed="true"] { background: none; color: var(--riso-pink-deep); box-shadow: inset 0 -2.5px 0 var(--riso-pink); }

/* ── The goals: the contents ────────────────────────────────── */
.gd-goals, .gd-fig[id], .gd-game[id], .gd-lab[id] { scroll-margin-top: calc(var(--gd-stick, 120px) + 16px); }
.gd-goals > p span { margin-left: 8px; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.gd-goal a { color: inherit; text-decoration: none; }
.gd-goal a:hover { text-decoration: underline; text-decoration-color: var(--riso-green); text-underline-offset: 3px; }
.gd-goal-go { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: var(--riso-pink-deep); }
/* Back: at the end of each chapter, and a pill after a jump */
.gd-up { margin: 14px 0 0; }
.gd-up a { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-dim); text-decoration: none; }
.gd-up a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gd-back { position: fixed; left: 14px; bottom: 14px; z-index: 40; max-width: calc(100vw - 28px); padding: 8px 14px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper-white); font: inherit; font-size: 14px; font-weight: 650; box-shadow: 0 8px 26px rgba(17, 30, 24, .28); cursor: pointer; animation: gd-cap .3s ease; }
.gd-back[hidden] { display: none; }

/* ── Predict, then reveal ───────────────────────────────────── */
.gd-predict { margin: 14px 0 0; padding: 10px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 3px solid var(--riso-pink); }
.gd-predict > p:first-child { margin: 0 0 8px; font-weight: 650; font-size: 15.5px; line-height: 1.45; }
.gd-predict > p:first-child::before { content: "Predict"; display: block; margin-bottom: 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--riso-pink-deep); }
.gd-opts { display: grid; gap: 0; margin: 0 0 8px; margin-bottom: 10px; border-top: 1px solid var(--line); }
.gd-opt { display: block; width: 100%; padding: 9px 6px 9px 30px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.4; text-align: left; cursor: pointer; position: relative; border-bottom: 1px solid var(--line); }
.gd-opt::before { content: ""; position: absolute; left: 4px; top: 11px; width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 50%; }
.gd-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--paper-white) 60%, transparent); }
.gd-opt[aria-pressed="true"] { background: none; }
.gd-opt[aria-pressed="true"]::before { border-color: var(--ink); background: var(--ink); box-shadow: inset 0 0 0 3px var(--paper); }
.gd-opt.right { background: color-mix(in srgb, var(--riso-green) 16%, transparent); }
.gd-opt.right::before { border-color: var(--riso-green-deep); background: var(--riso-green-deep); box-shadow: inset 0 0 0 3px var(--paper); }
.gd-opt:disabled { cursor: default; }
.gd-reveal { padding: 7px 14px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--ink); color: var(--paper-white); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
.gd-reveal:disabled { opacity: .45; cursor: not-allowed; }
/* The buzzer: a domed arcade button for the moments a student commits (show the answer, run
   the lab, start the round). Grey until it can be pressed, then lit and softly pulsing. */
.gd-buzz, html .gd-buzz.gd-buzz { display: inline-flex; flex: 0 0 auto; width: auto; min-width: 0; justify-content: flex-start; align-items: center; gap: 11px; min-height: 44px; padding: 0 6px 0 0; border: 0; border-radius: 26px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gd-bz { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(circle at 50% 58%, #33463b 0 60%, #142019 62% 100%); box-shadow: 0 2px 0 rgba(26, 58, 42, .3); }
.gd-bz::before { content: ""; position: absolute; left: 6px; right: 6px; top: 4px; bottom: 8px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #ffe1ee 0 7%, #ff8fc0 26%, #e9579c 66%, #b33a74 100%); box-shadow: 0 4px 0 #87295a, 0 5px 3px rgba(0, 0, 0, .28); transition: transform .07s ease-out, box-shadow .07s ease-out, filter .25s; }
html .gd-buzz.gd-buzz:hover, html .gd-buzz.gd-buzz:active, html .gd-buzz.gd-buzz:disabled { border: 0; background: none; color: var(--ink); box-shadow: none; text-decoration: none; }
.gd-buzz svg { display: none; }
.gd-buzz:hover:not(:disabled) .gd-bz::before { filter: brightness(1.06); }
.gd-buzz:active:not(:disabled) .gd-bz::before, .gd-buzz.hit .gd-bz::before { transform: translateY(3px); box-shadow: 0 1px 0 #87295a, 0 1px 2px rgba(0, 0, 0, .3); }
html .gd-buzz.gd-buzz:disabled, html .gd-buzz.gd-buzz[aria-disabled="true"] { opacity: 1; color: #6f8a7c; cursor: not-allowed; }
.gd-buzz:disabled .gd-bz::before, .gd-buzz[aria-disabled="true"] .gd-bz::before { filter: grayscale(1) brightness(1.12) contrast(.85); }
.gd-buzz:not(:disabled):not([aria-disabled="true"]) .gd-bz { animation: gd-bz-call 2.2s ease-in-out infinite; }
.gd-buzz:focus-visible { outline: 2.5px solid #e3589c; outline-offset: 3px; }
@keyframes gd-bz-call { 0%, 100% { box-shadow: 0 2px 0 rgba(26, 58, 42, .3), 0 0 0 0 rgba(233, 87, 156, 0); } 50% { box-shadow: 0 2px 0 rgba(26, 58, 42, .3), 0 0 0 5px rgba(233, 87, 156, .14), 0 0 16px 4px rgba(233, 87, 156, .3); } }
.gd-answer { margin: 4px 0 0; font-size: 15px; line-height: 1.55; }
.gd-answer::before { content: "What happens"; display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--riso-green-deep); }

/* ── Dry lab ────────────────────────────────────────────────── */
.gd-lab-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px; margin: 0 0 16px; }
.gd-lab-intro > div { padding: 10px 0 0; border: 0; border-radius: 0; background: none; font-size: 14.5px; line-height: 1.5; border-top: 1.5px solid var(--ink); }
.gd-lab-intro b { display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-dim); }
.gd-lab-wait { min-height: 420px; border: 1.5px dashed var(--line-strong); border-radius: 4px; background: repeating-linear-gradient(-45deg, transparent 0 10px, var(--line) 10px 11px); }
.gd-lab-err { padding: 30px; text-align: center; color: var(--ink-dim); }

/* ── Check: the exam practice link ─────────────────────────── */
.gd-next { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 14px 24px; align-items: center; margin: 24px 0 0; padding: 18px 20px; background: var(--ink); color: var(--paper-white); border-radius: 4px; }
.gd-next .k { margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--riso-yellow); }
.gd-next h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 22px; }
.gd-next p { margin: 0; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--paper-white) 82%, transparent); }
.gd-next .gd-go { margin: 0; justify-content: flex-end; }
.gd-next .gd-btn:not(.primary) { background: transparent; color: var(--paper-white); border-color: transparent; text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 5px; }
@media (max-width: 760px) { .gd-next { grid-template-columns: minmax(0, 1fr); } .gd-next .gd-go { justify-content: flex-start; } }
.gd-more { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 18px 0 0; }
.gd-more a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.gd-more a::after { content: "\2192"; }
.gd-more a:hover { text-decoration-color: var(--ink); }

/* ── Teacher resources ───────────────────────────────────────
   The guide is the students'; this block at its foot is the teacher's: a
   row a lesson in a ruled table (its codes, its focus, the chapters it uses,
   its lesson plan PDF and its slides), the teacher's downloads once, and the
   Practise and revise card. The timed plans are in the PDFs and the decks. On
   a phone each row stacks, the two downloads on the right. */
.gd-lessons-wrap { margin: 0 0 22px; }
.gd-lessons { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.45; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
.gd-lessons thead th { padding: 9px 14px 7px 0; border-bottom: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); text-align: left; }
.gd-lessons tbody th, .gd-lessons td { padding: 13px 16px 13px 0; vertical-align: top; text-align: left; font-weight: 400; }
.gd-lessons tbody tr + tr > * { border-top: 1px solid var(--line); }
.gd-lessons tbody th { width: 30%; font-family: var(--font-display); font-size: 16px; font-weight: 650; line-height: 1.3; }
.gd-lessons tbody th .n { display: inline-block; min-width: 1.5em; font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--riso-pink-deep); }
.gd-lessons .cv { width: 15%; font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.gd-lessons small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.gd-lessons .fo { color: var(--ink-dim); }
.gd-lessons .ch { width: 10%; font-family: var(--font-mono); font-size: 13px; }
.gd-lessons .pl { width: 1%; padding-right: 18px; white-space: nowrap; }
.gd-lessons .pl.sd { padding-right: 0; }
.gd-lessons .pl a { font-weight: 650; }
.gd-lessons .ch a { white-space: nowrap; }
.gd-lessons a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--riso-green-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gd-lessons a:hover { text-decoration-color: var(--ink); }
.gd-teach-dls { margin: 0 0 6px; }
.gd-teach-more { margin: 0 0 26px; color: var(--ink-dim); font-size: 14.5px; }
.gd-teach-more a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 760px) {
  .gd-lessons thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .gd-lessons, .gd-lessons tbody { display: block; }
  .gd-lessons tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 13px 0; }
  .gd-lessons tbody tr + tr { border-top: 1px solid var(--line); }
  .gd-lessons tbody tr > * { padding: 0; border: 0 !important; }
  .gd-lessons tbody th, .gd-lessons tbody .cv, .gd-lessons tbody .ch, .gd-lessons tbody .pl { width: auto; }
  .gd-lessons tbody th { grid-column: 1 / -1; }
  .gd-lessons .cv { grid-column: 1; }
  .gd-lessons .cv small { display: inline; margin-left: 8px; }
  .gd-lessons .pl { grid-column: 2; grid-row: 2; align-self: start; text-align: right; }
  .gd-lessons .pl.sd { grid-row: 3 / span 2; }
  .gd-lessons .fo, .gd-lessons .ch { grid-column: 1; }
  .gd-lessons .ch:not(:empty)::before { content: attr(data-l) " "; color: var(--ink-faint); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
}

/* The activity cards (the Practise and revise card, and a dry lab's tasks). */
.gd-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 26px 28px; margin: 0 0 22px; }
.gd-act { display: grid; align-content: start; gap: 6px; padding: 12px 0 0; background: none; border: 0; border-radius: 0; box-shadow: none; border-top: 1.5px solid var(--ink); }
.gd-act-pic { display: block; width: 100%; height: auto; max-height: 120px; margin: 0 0 4px; padding: 6px; background: #fbfdfb; border: 1px solid var(--line-strong); border-radius: 4px; }
.gd-act.gd-practise { grid-column: 1 / -1; }
.gd-practise-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 6px 32px; }
.gd-practise-cols ul { margin: 4px 0 0; }
.gd-practise-cols .need { margin: 6px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.gd-act .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--riso-pink-deep); text-transform: uppercase; }
.gd-act h4 { margin: 0; font-family: var(--font-display); font-size: 18px; }
.gd-act p, .gd-act li { margin: 0; font-size: 14.5px; line-height: 1.5; }
.gd-act ul, .gd-act ol { margin: 0; padding-left: 1.2em; display: grid; gap: 3px; }
.gd-act .need { color: var(--ink-dim); font-size: 13.5px; }
.gd-act a, .gd-box a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--riso-green-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.gd-act a:hover, .gd-box a:hover { text-decoration-color: var(--ink); }
.gd-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 26px 28px; }
.gd-box { padding: 12px 0 0; background: none; border: 0; border-radius: 0; border-top: 1.5px solid var(--ink); }
.gd-box h4 { margin: 0 0 8px; font-family: var(--font-display); font-size: 17px; }
.gd-box ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; }
.gd-box li b { font-weight: 650; }

/* ── Downloads ──────────────────────────────────────────────── */
.gd-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 28px; }
.gd-dl { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 0; background: none; border: 0; border-radius: 0; color: var(--ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s; border-top: 1px solid var(--line-strong); }
.gd-dl:hover b { text-decoration: underline; text-underline-offset: 4px; }
.gd-dl .ico { display: grid; place-items: center; width: 46px; height: 56px; border: 1px solid var(--ink); border-radius: 2px 10px 2px 2px; background: var(--riso-green); color: var(--on-brand); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.gd-dl.pink .ico { background: var(--riso-pink); }
.gd-dl.yellow .ico { background: var(--riso-yellow); }
.gd-dl b { display: block; font-family: var(--font-display); font-size: 17px; }
.gd-dl small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.gd-whole { margin: 14px 0 0; font-size: 15px; }
.gd-whole a { font-weight: 650; color: var(--ink); text-underline-offset: 3px; }
.gd-dl span { display: block; margin-top: 2px; color: var(--ink-dim); font-size: 14px; line-height: 1.45; }

/* ── The guides hub (/guides) ───────────────────────────────── */
.gd-hub-h { margin: 6px 0 22px; }
.gd-hub-h h1 { margin: 6px 0 10px; font-family: var(--font-display); font-size: clamp(36px, 5.4vw, 62px); line-height: 1; letter-spacing: -.01em; }
.gd-hub-h h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-pink-deep); }
.gd-hub-h p { max-width: 66ch; color: var(--ink-dim); font-size: 17px; line-height: 1.55; }
.gd-hub { display: grid; gap: 26px; }
.gd-hub-c h2 { margin: 0 0 10px; font-family: var(--font-display); font-size: 26px; }
.gd-hub-gs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.gd-hub-g { padding: 10px 0 0; background: none; border: 0; border-radius: 0; border-top: 1.5px solid var(--ink); }
.gd-hub-g h3 { margin: 0 0 6px; font-family: var(--font-display); font-size: 15px; }
.gd-hub-g h3 b { margin-right: 5px; font-family: var(--font-mono); font-weight: 500; color: var(--riso-pink-deep); }
.gd-hub-g ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.gd-hub-g li a, .gd-hub-g li span { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); gap: 4px; padding: 2px 0; font-size: 14px; line-height: 1.35; color: var(--ink); }
.gd-hub-g li span { color: var(--ink-faint); }
.gd-hub-g li a .t { text-decoration: underline; text-decoration-color: var(--riso-green); text-underline-offset: 3px; font-weight: 650; }
.gd-hub-g li .c { font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim); }
.gd-hub-g li i { font-family: var(--font-mono); font-size: 12px; font-style: normal; color: var(--riso-pink-deep); }

/* The hub's demo: what a guide does, beside a scene playing */
.gd-hub-demo { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 20px 34px; align-items: start; margin: 0 0 34px; }
.gd-hub-demo h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 26px; }
.gd-hub-demo p { margin: 0 0 10px; color: var(--ink-dim); font-size: 15.5px; line-height: 1.55; }
.gd-hub-demo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.gd-hub-demo li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; }
.gd-hub-demo li::before { content: ""; position: absolute; left: 3px; top: .75em; width: 10px; height: 2px; background: var(--riso-pink-deep); border: 0; border-radius: 0; }
.gd-hub-demo .gd-go { margin-top: 14px; }
@media (max-width: 860px) { .gd-hub-demo { grid-template-columns: minmax(0, 1fr); } }

/* ── The IA coach's planning sheet (the still; UNIT4_SHARED.md 1.11) ── */
.gd-coach { max-width: 980px; margin: 28px auto 0; }
.gd-coach-still { padding-top: 10px; border-top: 3px solid var(--riso-yellow); font-size: 14.5px; line-height: 1.5; }
.gd-coach-still .gd-coach-k { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--riso-green-deep); }
.gd-coach-still .gd-coach-h { margin: 2px 0 6px; font-size: 20px; }
.gd-coach-crit { margin: 12px 0; padding-top: 8px; border-top: 1px solid var(--line-strong); break-inside: avoid; }
.gd-coach-crit h4, .gd-coach-th { margin: 0 0 4px; font-size: 15.5px; }
.gd-coach-crit h4 b { margin-right: 6px; color: var(--riso-pink-deep); font-family: var(--font-mono); font-weight: 500; }
.gd-coach-crit > p { margin: 0 0 6px; color: var(--ink-dim); }
.gd-coach-ticks { margin: 0; padding: 0; list-style: none; columns: 2 18em; column-gap: 24px; }
.gd-coach-ticks li { position: relative; margin: 0 0 4px; padding-left: 24px; break-inside: avoid; }
.gd-coach-ticks li::before { content: ""; position: absolute; left: 0; top: .25em; width: 13px; height: 13px; border: 1.5px solid var(--ink); border-radius: 2px; }
.gd-coach-th { margin-top: 14px; }
.gd-coach-blank { width: 100%; margin: 4px 0 8px; border-collapse: collapse; font-size: 13.5px; }
.gd-coach-blank th, .gd-coach-blank td { height: 30px; padding: 4px 6px; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.gd-coach-blank thead th { height: auto; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink-dim); }
.gd-coach-blank tbody th { width: 34%; font-weight: 600; }
.gd-coach-foot { margin: 8px 0 0; font-size: 13px; color: var(--ink-dim); }
@media (max-width: 600px) { .gd-coach-blank { display: block; overflow-x: auto; } }

/* ── Print: the notes, every step of every figure ───────────── */
@media print {
  .gd-max-btn, .gd-up, .gd-back, .gd-goal-go, .gd-zoom-btn, .gd-scene-ctl, .gd-scene-opts, .gd-bar, .gd-play, .gd-predict .gd-reveal, #lab > :not(.gd-coach), #check, #downloads, .gd-more, .gd-tip, .gd-toc, .gd-go { display: none !important; }
  /* the IA coach: the write-up once something is written (coach.css), else its planning sheet */
  .gd-coach.gd-coach-on:not(.cch-has) > .gd-coach-still { display: block !important; }
  .gd-coach-still { break-before: page; }
  .gd-predict .gd-answer { display: block !important; }
  .gd-mnem-go { display: none !important; }
  .gd-tile { min-height: 0; perspective: none; }
  .gd-tile > .f, .gd-tile > .k { position: static; transform: none !important; opacity: 1 !important; backface-visibility: visible; }
  .gd-tile > .k { margin-top: 4px; }
  .gd-anim [data-at], .gd-anim [data-only], .gd-anim [data-on] { opacity: 1 !important; }
  .gd-cap li { display: block !important; }
  /* a game's or an element's still prints one step, so only that step's caption */
  .gd-still .gd-cap li:not(.on), .gd-el .gd-cap li:not(.on) { display: none !important; }
  .gd-ch, .gd-fig, .gd-act { break-inside: avoid; }
  .gd-fig, .gd-act, .gd-predict { box-shadow: none !important; }
}

/* Nudge: a pink pulse on what a student has to touch (handles, tokens, hotspots, switches, the play and
   Show me buttons), until that figure, lab, game or question has been used once (guide.js adds .gd-used).
   A still glow if motion is reduced. */
@keyframes gd-nudge-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(227, 88, 156, 0)); transform: scale(1); } 50% { filter: drop-shadow(0 0 3px #e3589c) drop-shadow(0 0 9px rgba(227, 88, 156, .85)); transform: scale(1.14); } }
@keyframes gd-nudge-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(227, 88, 156, 0); } 50% { box-shadow: 0 0 0 4px rgba(227, 88, 156, .75), 0 0 14px 4px rgba(227, 88, 156, .45); } }
:is(.gd-fig, .gd-lab, .gd-game):not(.gd-used) svg :is([role="slider"], [role="button"], [role="checkbox"], [role="switch"], [draggable="true"]) { transform-box: fill-box; transform-origin: center; animation: gd-nudge-glow 1.8s ease-in-out infinite; }
:is(.gd-fig, .gd-lab, .gd-game, .gd-predict):not(.gd-used) :is(div, span, li, label, p)[role="button"], :is(.gd-fig, .gd-lab, .gd-game):not(.gd-used) :is(div, span, li)[role="slider"], :is(.gd-fig, .gd-lab, .gd-game):not(.gd-used) [draggable="true"]:not(svg *), :is(.gd-fig, .gd-lab, .gd-game, .gd-predict):not(.gd-used) :is(.gd-reveal:not(:disabled), .gd-play) { border-radius: 4px; animation: gd-nudge-ring 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  :is(.gd-fig, .gd-lab, .gd-game):not(.gd-used) svg :is([role="slider"], [role="button"], [role="checkbox"], [role="switch"], [draggable="true"]) { animation: none; filter: drop-shadow(0 0 4px rgba(227, 88, 156, .9)); }
  :is(.gd-fig, .gd-lab, .gd-game, .gd-predict):not(.gd-used) :is(div, span, li, label, p)[role="button"], :is(.gd-fig, .gd-lab, .gd-game):not(.gd-used) [draggable="true"]:not(svg *), :is(.gd-fig, .gd-lab, .gd-game, .gd-predict):not(.gd-used) :is(.gd-reveal:not(:disabled), .gd-play) { animation: none; box-shadow: 0 0 0 3px rgba(227, 88, 156, .5); }
}
@media print { .gd-fig *, .gd-lab *, .gd-game * { animation: none !important; filter: none !important; } }

/* Sims directory: index cards */
.sm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 22px; }
.sm-filters .sm-sep { width: 1.5px; align-self: stretch; margin: 0 6px; background: var(--ink); opacity: .25; }
.sm-q { flex: 1 1 100%; max-width: 360px; padding: 7px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.sm-f { padding: 5px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sm-f[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.sm-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 34px 16px 14px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--ink); background-image: repeating-linear-gradient(transparent 0 25px, rgba(45, 184, 118, .16) 25px 26px); background-position: 0 30px; background-repeat: no-repeat; background-size: 100% calc(100% - 30px); }
.sm-card::before { content: ""; position: absolute; left: 0; right: 0; top: 26px; height: 2px; background: var(--riso-pink-deep); }
.sm-card[hidden] { display: none; }
.sm-k { position: absolute; top: 7px; left: 16px; margin: 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.sm-card h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.sm-b { margin: 0; font-size: 14px; line-height: 1.45; }
.sm-t { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.sm-t span { padding: 1px 7px; border-radius: 2px; background: var(--paper); font-family: var(--font-mono); font-size: 11.5px; }
.sm-w { margin-top: auto; padding-top: 6px; border-top: 1px dashed var(--ink-dim); font-size: 13px; }
.sm-w p { margin: 0 0 3px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-dim); }
.sm-w a { display: block; padding: 2px 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--riso-green); text-underline-offset: 2px; }
.sm-w a b { font-family: var(--font-mono); font-size: 12px; }
.sm-w a:first-of-type::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.sm-w a:not(:first-of-type) { position: relative; z-index: 2; }
.sm-share { position: absolute; z-index: 3; top: 5px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px; border: 0; border-radius: 3px; background: none; color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.sm-share svg, .gd-share-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.sm-share:hover span, .gd-share-btn:hover span { text-decoration: underline; text-underline-offset: 4px; }
.sm-share:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 2px; }
.sm-share.gd-share-done, .gd-share-btn.gd-share-done { color: var(--riso-green-deep, #1f7a52); }
.gd-share-btn { margin-left: 14px; }
.gd-h .gd-share-btn { margin-left: 14px; }
.gd-max-bar .gd-share-btn { order: 1; margin-left: 12px; }
.gd-max-bar .gd-share-btn.gd-share-done { color: #fbfdfb; }
@media print { .sm-share, .gd-share-btn { display: none !important; } }
.sm-card:hover { box-shadow: 5px 5px 0 var(--ink); }
.sm-card:focus-within { outline: 2px solid var(--riso-green); outline-offset: 2px; }
.sm-none { padding: 24px 0; color: var(--ink-dim); }

/* Check yourself: the questions at the end of a sim's full screen (js/guide.js, scripts/guides/REVIEW.md) */
.gd-max-bar .gd-rv-btn { order: 1; margin-left: auto; padding: 5px 12px; border: 1.5px solid #fbfdfb; border-radius: 4px; background: transparent; color: #fbfdfb; font: inherit; font-family: var(--font-display); font-size: 13px; font-weight: 650; letter-spacing: 0; cursor: pointer; }
.gd-max-bar .gd-rv-btn:hover { background: #fbfdfb; color: #1a3a2a; }
.gd-max-bar .gd-rv-btn[aria-expanded="true"] { background: var(--riso-pink); border-color: var(--riso-pink); color: #1a3a2a; }
.gd-max-bar .gd-rv-btn:focus-visible { outline: 2.5px solid var(--riso-pink); outline-offset: 3px; }
.gd-max-bar .gd-max-btn { order: 2; margin-left: 14px; }
.gd-rv { position: fixed; left: 0; right: 0; bottom: 0; top: var(--gd-bar, 50px); z-index: 302; overflow: auto; background: var(--paper); color: var(--ink); -webkit-overflow-scrolling: touch; }
.gd-rv[hidden] { display: none; }
.gd-rv-in { max-width: 760px; margin: 0 auto; padding: 28px 20px 56px; font-size: 16px; line-height: 1.5; }
.gd-rv-in h2 { margin: 2px 0 6px; font-size: 28px; line-height: 1.15; outline: none; }
.gd-rv-k { margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--riso-pink-deep); }
.gd-rv-lede { margin: 0 0 18px; color: var(--ink-dim); font-size: 14.5px; }
.gd-rv-qs { list-style: none; display: grid; gap: 18px; margin: 0 0 8px; padding: 0; }
.gd-rv-q { padding-top: 10px; border-top: 3px solid var(--riso-pink); }
.gd-rv-qt { margin: 0 0 8px; font-weight: 650; }
.gd-rv-opts { display: grid; gap: 6px; }
.gd-rv-opt { display: flex; gap: 10px; align-items: baseline; width: 100%; padding: 9px 12px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper-white); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; text-align: left; cursor: pointer; }
.gd-rv-opt b { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }
.gd-rv-opt:hover:not(:disabled) { border-color: var(--ink); }
.gd-rv-opt:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 2px; }
.gd-rv-opt:disabled { cursor: default; }
.gd-rv-opt.right { border-color: var(--riso-green-deep); background: color-mix(in srgb, var(--riso-green) 16%, var(--paper-white)); }
.gd-rv-opt.wrong { border-color: var(--riso-pink-deep); background: color-mix(in srgb, var(--riso-pink) 22%, var(--paper-white)); }
.gd-rv-why { margin: 8px 0 0; font-size: 14.5px; }
.gd-rv-why.ok b { color: var(--riso-green-deep); }
.gd-rv-why.no b { color: var(--riso-pink-deep); }
.gd-rv-score { margin: 6px 0 0; font-weight: 650; font-size: 14.5px; }
.gd-rv-x { margin-top: 30px; padding: 16px 18px 18px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper-white); box-shadow: 3px 3px 0 var(--riso-pink); }
.gd-rv-stem { margin: 8px 0 12px; }
.gd-rv-tw { overflow-x: auto; margin: 0 0 6px; }
.gd-rv-table { border-collapse: collapse; font-size: 14px; }
.gd-rv-table th, .gd-rv-table td { padding: 5px 12px; border: 1px solid var(--line-strong); text-align: left; }
.gd-rv-table thead th { background: color-mix(in srgb, var(--riso-green) 14%, var(--paper-white)); }
.gd-rv-note { margin: 4px 0 12px; color: var(--ink-faint); font-size: 13px; }
.gd-rv-part { margin: 14px 0 0; }
.gd-rv-pq { margin: 0 0 6px; }
.gd-rv-m { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; }
.gd-rv-part textarea { display: block; width: 100%; padding: 8px 10px; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.45; resize: vertical; }
.gd-rv-part textarea:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 1px; }
.gd-rv-ms { margin: 8px 0 0; padding: 8px 12px; border-left: 4px solid var(--riso-green-deep); background: color-mix(in srgb, var(--riso-green) 10%, var(--paper-white)); }
.gd-rv-ms[hidden], .gd-rv-total[hidden], .gd-rv-show[hidden], .gd-rv-why[hidden] { display: none; }
.gd-rv-msh { margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--riso-green-deep); }
.gd-rv-ms ul { list-style: none; margin: 0; padding: 0; }
.gd-rv-ms li { margin: 3px 0; font-size: 14.5px; }
.gd-rv-ms label { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.gd-rv-ms input { flex: none; accent-color: var(--riso-green-deep); }
.gd-rv-show, .gd-rv-back { margin: 16px 0 0; padding: 9px 16px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--paper-white); font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; box-shadow: 2px 2px 0 var(--riso-pink); }
.gd-rv-show:focus-visible, .gd-rv-back:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 3px; }
.gd-rv-back { display: block; margin-top: 26px; background: transparent; color: var(--ink); box-shadow: none; }
.gd-rv-total { margin: 12px 0 0; font-weight: 650; font-size: 14.5px; }
@media (max-width: 600px) { .gd-rv-in { padding: 20px 14px 48px; } .gd-rv-in h2 { font-size: 23px; } .gd-max-bar .gd-rv-btn { padding: 4px 9px; font-size: 12px; } .gd-max-bar .gd-max-btn { margin-left: 8px; } .gd-rv-x { padding: 12px 12px 14px; } }
@media print { .gd-rv, .gd-rv-btn { display: none !important; } }

/* Show me how: the guided first run of a sim (js/guide.js, scripts/guides/TOUR.md) */
.gd-tour-btn { display: inline-flex; align-items: center; gap: 7px; padding: 2px 2px; border: 0; border-radius: 3px; background: none; color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; }
.gd-tour-btn svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.gd-tour-btn:hover span, .gd-tour-btn[aria-pressed="true"] span { text-decoration: underline; text-underline-offset: 4px; }
.gd-tour-btn:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 3px; }
.gd-tour-btn.gd-tour-new svg { color: var(--riso-pink-deep); }
.gd-tour-btn.gd-tour-new { animation: gd-tour-nudge 2.4s ease-in-out 3; }
.gd-h .gd-tour-btn { margin-left: auto; align-self: center; }
.gd-tour-btn + .gd-max-btn { margin-left: 14px !important; }
.gd-max-bar .gd-tour-bar { order: 1; margin-left: auto; padding: 5px 4px; color: #fbfdfb; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.gd-max-bar .gd-tour-bar:focus-visible { outline-color: var(--riso-pink); }
.gd-max-bar .gd-tour-bar + .gd-rv-btn { margin-left: 12px; }
.gd-max-bar .gd-tour-bar ~ .gd-max-btn { order: 3; }
.gd-tour-ring { position: fixed; z-index: 309; box-sizing: border-box; border: 3px solid var(--riso-pink); border-radius: 8px; background: rgba(255, 126, 182, .08); box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 0 22px 6px rgba(255, 126, 182, .55); pointer-events: none; animation: gd-tour-glow 1.8s ease-in-out infinite; }
.gd-tour-ring[hidden] { display: none; }
.gd-tour-pop { position: fixed; z-index: 310; box-sizing: border-box; width: min(340px, calc(100vw - 24px)); padding: 14px 16px 12px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper-white); color: var(--ink); font-size: 15px; line-height: 1.45; box-shadow: 0 10px 30px rgba(17, 30, 24, .28); }
.gd-tour-pop.gd-tour-dock { left: 50%; right: auto; top: auto; bottom: 12px; transform: translateX(-50%); }
.gd-tour-n { margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--riso-pink-deep); }
.gd-tour-pop h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 18px; line-height: 1.2; }
.gd-tour-t { margin: 0; }
.gd-tour-do { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-dim); }
.gd-tour-btns { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.gd-tour-btns button { padding: 6px 2px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.gd-tour-btns .gd-tour-skip { margin-right: auto; font-weight: 500; color: var(--ink-dim); }
.gd-tour-btns .gd-tour-next { padding: 7px 16px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper-white); text-decoration: none; }
.gd-tour-btns button:focus-visible { outline: 2.5px solid var(--riso-pink-deep); outline-offset: 3px; }
@keyframes gd-tour-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 0 14px 3px rgba(255, 126, 182, .4); } 50% { box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 0 28px 9px rgba(255, 126, 182, .75); } }
@keyframes gd-tour-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .gd-tour-ring, .gd-tour-btn.gd-tour-new { animation: none; } }
@media print { .gd-tour-btn, .gd-tour-ring, .gd-tour-pop { display: none !important; } }