/* Physiology with Dr. Klaudia: lab notebook theme.
   Squared paper and a red margin line, handwritten headings, pictures taped in like specimens,
   and answers marked the way a tutor would: highlighter, blue-pen ticks on the right answer and red crossings-out.
   The animations keep their own per-scenario colours (the --sc-* tokens). */

:root {
  --paper: #FAFCFE;
  --grid: #D6E5F2;
  --margin: #E0675A;
  --sheet: #FFFFFF;
  --ink: #13213D;
  --ink-2: #46526B;
  --line: #C9D6E3;
  --pen: #2459C9;      /* blue biro: notes and links */
  --red: #C23A2C;      /* red pen: marking */
  --ok: #1D7A4E;
  --highlight: #FFE45C;
  --sticky: #FFF3A6;
  --tape-teal: rgba(43, 181, 168, .5);
  --tape-coral: rgba(244, 124, 107, .5);
  --shadow: 3px 4px 0 rgba(19, 33, 61, .12);

  --hand: "Shantell Sans", "Comic Sans MS", cursive;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;

  --step--1: 0.9375rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 1.953rem;

  --margin-x: 64px;    /* where the red margin line sits */
  color-scheme: light;
}
@media (max-width: 640px) { :root { --margin-x: 30px; } }

/* Scenario environments for the animation stage. */
[data-scenario="everest"]     { --sc-bg1: #CFE2F3; --sc-bg2: #F6FAFD; --sc-ink: #1F3550; --sc-accent: #2B6CB0; --sc-accent2: #C8433E; --sc-soft: #B9D3EA; --sc-ui: #2B6CB0; }
[data-scenario="marathon"]    { --sc-bg1: #FBDDB8; --sc-bg2: #FFF5E8; --sc-ink: #3A2E26; --sc-accent: #A3440B; --sc-accent2: #B23A3A; --sc-soft: #F1C99D; --sc-ui: #D15A14; }
[data-scenario="asthma"]      { --sc-bg1: #F6D3DB; --sc-bg2: #FFF4F6; --sc-ink: #3D2330; --sc-accent: #9E2F57; --sc-accent2: #5D45B0; --sc-soft: #EDBBC9; --sc-ui: #B13A63; }
[data-scenario="haemorrhage"] { --sc-bg1: #F1D3CF; --sc-bg2: #FFF6F4; --sc-ink: #3B1E1E; --sc-accent: #A61E2A; --sc-accent2: #2D5DA8; --sc-soft: #E6B7B1; --sc-ui: #A61E2A; }
[data-scenario="scuba"]       { --sc-bg1: #0B3A4F; --sc-bg2: #125B6B; --sc-ink: #E6F6F8; --sc-accent: #72E2D2; --sc-accent2: #FFD27A; --sc-soft: #2A8396; --sc-ui: #0E7C86; }
[data-scenario="freediving"]  { --sc-bg1: #0E4F6B; --sc-bg2: #1C6A80; --sc-ink: #EAF8FB; --sc-accent: #86ECDD; --sc-accent2: #FFD27A; --sc-soft: #3C9DB3; --sc-ui: #0E7C86; }
[data-scenario="bear"]        { --sc-bg1: #DCEBD2; --sc-bg2: #F6FAF1; --sc-ink: #22301C; --sc-accent: #9A3F24; --sc-accent2: #2F6B3A; --sc-soft: #C2DDB3; --sc-ui: #6B8E3A; }
[data-scenario="football"]    { --sc-bg1: #CFE9C8; --sc-bg2: #F2FAEF; --sc-ink: #1D3020; --sc-accent: #1B62A3; --sc-accent2: #B33224; --sc-soft: #B5DDAA; --sc-ui: #2E8B57; }
[data-scenario="swim"]        { --sc-bg1: #BFE6F2; --sc-bg2: #F2FBFE; --sc-ink: #13324A; --sc-accent: #0A6690; --sc-accent2: #C24A16; --sc-soft: #9BD3E6; --sc-ui: #0B6E99; }
[data-scenario="space"]       { --sc-bg1: #10142F; --sc-bg2: #2B2F69; --sc-ink: #ECEBFF; --sc-accent: #B6A4FF; --sc-accent2: #FF9DB7; --sc-soft: #474C8F; --sc-ui: #6A55D6; }
[data-scenario="heatstroke"]  { --sc-bg1: #FFCDB8; --sc-bg2: #FFF2EA; --sc-ink: #3A1F1A; --sc-accent: #A02A14; --sc-accent2: #1F6FA8; --sc-soft: #F6B9A2; --sc-ui: #C93A1F; }
[data-scenario="dka"]         { --sc-bg1: #D6ECD3; --sc-bg2: #F5FBF3; --sc-ink: #1F3324; --sc-accent: #23744A; --sc-accent2: #B2400E; --sc-soft: #BCDDB8; --sc-ui: #2E8B57; }
[data-scenario="newborn"]     { --sc-bg1: #E3DAF6; --sc-bg2: #FBF8FF; --sc-ink: #2A2340; --sc-accent: #6A41C2; --sc-accent2: #A3264C; --sc-soft: #CFC2EE; --sc-ui: #7A4FD1; }
[data-scenario="exam"]        { --sc-bg1: #E4E6F6; --sc-bg2: #F8F8FE; --sc-ink: #1E2140; --sc-accent: #4A3FB0; --sc-accent2: #B4452A; --sc-soft: #CACDF0; --sc-ui: #5B4FCF; }
[data-scenario="gi"]          { --sc-bg1: #DDEFE6; --sc-bg2: #F5FBF8; --sc-ink: #1C3329; --sc-accent: #2E7D5B; --sc-accent2: #B5482A; --sc-soft: #BFE3D2; --sc-ui: #2E8B6A; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: var(--step-0)/1.6 var(--body);
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) - 1px), var(--margin) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  background-attachment: local;
}
main { flex: 1; outline: none; }
h1, h2, h3 { font-family: var(--hand); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
mark { background: linear-gradient(transparent 58%, var(--highlight) 58%); color: inherit; padding: 0 2px; }

:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 6px; }
.skip-link:focus { top: 12px; }

/* Content starts to the right of the margin line. */
.shell { width: 100%; max-width: 1220px; margin-inline: auto; padding: 0 24px 0 calc(var(--margin-x) + 28px); }
@media (max-width: 640px) { .shell { padding: 0 16px 0 calc(var(--margin-x) + 16px); } }

/* ---------- Top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter: blur(6px); border-bottom: 2px dashed var(--line); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; font: 800 var(--step-1)/1.1 var(--hand); }
.brand-mark { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); flex: none; }
.brand-with { font-weight: 600; }
.nw { white-space: nowrap; }
@media (max-width: 520px) { .brand-name { font-size: var(--step-0); line-height: 1.1; } }
/* During a quiz on a phone, the progress boxes need the room: show just the mascot. */
@media (max-width: 460px) { body.in-quiz .brand-name { display: none; } }

.hud { display: flex; align-items: center; gap: 16px; font: 700 var(--step--1) var(--hand); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hud strong { color: var(--ink); font-size: var(--step-1); }
.hud-points { white-space: nowrap; }
.hud-streak { display: inline-flex; align-items: center; gap: 6px; }
.hud-streak svg { width: 20px; height: 20px; }
.hud-streak.is-hot { color: var(--red); }
@media (max-width: 560px) { .hud { gap: 8px; } .hud-streak { display: none; } .brand-mark { width: 38px; height: 38px; } }

/* Progress: a row of hand-drawn boxes, ticked or crossed as you go. */
.pips { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pip { position: relative; width: 20px; height: 20px; border: 2px solid var(--ink-2); border-radius: 4px; background: #fff; }
.pip.is-current { border-color: var(--pen); box-shadow: 0 0 0 3px rgba(36, 89, 201, .2); }
.pip.is-correct::after { content: ""; position: absolute; left: 4px; top: -3px; width: 7px; height: 14px; border: solid var(--ok); border-width: 0 3px 3px 0; transform: rotate(40deg); }
.pip.is-wrong::before, .pip.is-wrong::after { content: ""; position: absolute; left: 7px; top: 1px; width: 3px; height: 15px; background: var(--red); border-radius: 2px; transform: rotate(45deg); }
.pip.is-wrong::after { transform: rotate(-45deg); }
@media (max-width: 420px) { .pip { width: 15px; height: 15px; } .pips { gap: 4px; } .pip.is-correct::after { left: 3px; top: -4px; } .pip.is-wrong::before, .pip.is-wrong::after { left: 5px; top: 0; height: 13px; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 11px 22px;
  font: 800 var(--step-0)/1.2 var(--hand);
  text-decoration: none; cursor: pointer; touch-action: manipulation;
  border: 2px solid var(--ink); border-radius: 12px 14px 10px 16px;
  transition: transform .1s ease, box-shadow .15s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--pen); }
.btn-primary:hover { box-shadow: 6px 6px 0 var(--pen); }
.btn-primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--pen); }
.btn-quiet { background: #fff; color: var(--ink); box-shadow: 3px 3px 0 rgba(19, 33, 61, .18); }
.btn-quiet:hover:not(:disabled) { box-shadow: 4px 4px 0 rgba(19, 33, 61, .25); }
.btn:disabled { opacity: .5; cursor: default; box-shadow: none; }

/* ---------- Home ---------- */
.hero { display: grid; gap: 40px; align-items: center; padding-block: 40px 70px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.1fr 1fr; padding-block: 56px 90px; } }
.hero-date { font: 700 var(--step--1) var(--hand); color: var(--ink-2); }
.hero-title { font-size: clamp(2.5rem, 5.6vw, 4rem); line-height: 1.03; letter-spacing: -.01em; margin: 8px 0 18px; max-width: 12ch; }
.hero-lede { font-size: var(--step-1); line-height: 1.55; color: var(--ink-2); max-width: 36ch; margin-bottom: 26px; }
.hero .btn { transform: rotate(-1deg); }

.sketch { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1; justify-self: center; color: var(--pen); }
.sketch img { position: absolute; inset: 14%; width: 72%; height: 72%; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink); object-fit: cover; }
.sketch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.note { position: absolute; font: 700 var(--step--1)/1.2 var(--hand); color: var(--pen); max-width: 14ch; }
.note.n1 { left: 0; top: 8%; }
.note.n2 { right: -6%; bottom: 6%; text-align: right; }
.note.n3 { left: -2%; bottom: 6%; }
@media (max-width: 520px) { .note { font-size: 13px; } .note.n2 { right: 0; } }

.section-title { font-size: var(--step-3); }
.section-sub { color: var(--ink-2); margin: 6px 0 30px; }
.scenarios { padding-bottom: 90px; }

/* Scenario pictures taped in like specimens. */
.sc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.sc-tile {
  position: relative; display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  background: var(--sheet); padding: 12px 12px 14px;
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s ease;
}
.sc-grid li:nth-child(3n+1) .sc-tile { transform: rotate(-1.3deg); }
.sc-grid li:nth-child(3n+2) .sc-tile { transform: rotate(.8deg); }
.sc-grid li:nth-child(3n) .sc-tile { transform: rotate(-.4deg); }
/* On hover the card is picked up off the page: it lifts, tilts the other way and casts a deeper shadow,
   the picture zooms in a touch and the tape peels up. */
.sc-grid li .sc-tile:is(:hover, :focus-visible) { transform: translateY(-12px) rotate(1.8deg) scale(1.04); box-shadow: 10px 14px 0 rgba(19, 33, 61, .16); z-index: 2; }
.sc-grid li:nth-child(3n+2) .sc-tile:is(:hover, :focus-visible) { transform: translateY(-12px) rotate(-1.8deg) scale(1.04); }
.sc-window img { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.sc-tile:is(:hover, :focus-visible) .sc-window img { transform: scale(1.08) rotate(-1deg); }
.sc-tile::before { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transform-origin: left center; }
.sc-grid li:nth-child(odd) .sc-tile:is(:hover, :focus-visible)::before { transform: translateX(-50%) rotate(-9deg) translateY(-3px); }
.sc-grid li:nth-child(even) .sc-tile:is(:hover, :focus-visible)::before { transform: translateX(-50%) rotate(10deg) translateY(-3px); }
.sc-tile::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; transform: translateX(-50%) rotate(-3deg); background: var(--tape-teal); }
.sc-grid li:nth-child(even) .sc-tile::before { background: var(--tape-coral); transform: translateX(-50%) rotate(4deg); }
.sc-window { display: block; aspect-ratio: 480 / 220; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.sc-window img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sc-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 2px 0; flex: 1; }
.sc-name { font: 800 var(--step-1)/1.2 var(--hand); }
.sc-domain { color: var(--ink-2); font-size: var(--step--1); }
.sc-status { margin-top: auto; padding-top: 10px; display: inline-flex; align-items: center; gap: 6px; font: 700 var(--step--1) var(--hand); color: var(--pen); }
.sc-status.is-done { color: var(--red); }
.sc-status svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .sc-tile, .sc-tile::before, .sc-window img { transition: none; } .sc-tile:is(:hover, :focus-visible) .sc-window img { transform: none; } }

/* ---------- Quiz ---------- */
.quiz { display: grid; gap: 28px; padding-block: 20px 70px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "q" "fb"; }
.q-head { grid-area: head; }
.q-col { grid-area: q; }
.stage-col { grid-area: stage; }
.feedback { grid-area: fb; }
@media (min-width: 960px) {
  .quiz { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); grid-template-areas: "head stage" "q stage" "fb stage"; grid-template-rows: auto auto 1fr; column-gap: 48px; row-gap: 0; padding-block: 32px 80px; align-items: start; }
  .stage-col { position: sticky; top: 96px; }
  .quiz .feedback { margin-top: 24px; }
}

.back { display: inline-flex; align-items: center; min-height: 44px; font: 700 var(--step--1) var(--hand); color: var(--pen); text-underline-offset: 4px; }
.back::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); }
.q-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 4px; font: 700 var(--step--1) var(--hand); color: var(--red); }
.chip { font: 600 13px var(--body); color: var(--ink-2); padding: 2px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; }
.chip.chip-draft { border-style: dashed; border-color: var(--ink-2); color: var(--ink); background: var(--sticky); }
.q-title { font-size: var(--step-3); margin-top: 10px; outline: none; }
.station-note { margin-top: 10px; max-width: 60ch; font: 600 var(--step--1)/1.5 var(--hand); color: var(--pen); }
.chain-title .chip { vertical-align: middle; margin-left: 6px; }
.case { margin-top: 14px; max-width: 60ch; font: 600 var(--step-0)/1.55 var(--hand); color: var(--ink-2); padding-left: 14px; border-left: 3px solid var(--sc-ui); }

/* The question is set on a sheet of paper. */
.q-col { background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px; padding: 24px 24px 22px; box-shadow: var(--shadow); }
@media (max-width: 520px) { .q-col { padding: 18px 16px; } }
.q-text { font: 700 var(--step-2)/1.35 var(--hand); max-width: 34ch; }
.opts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.opt {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 52px; padding: 10px 12px; text-align: left;
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-radius: 8px; cursor: pointer; touch-action: manipulation;
  transition: background-color .15s ease;
}
.opt:focus-visible { outline-offset: 2px; }
.opt:disabled { cursor: default; }
.opt-key { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border: 2.5px solid var(--ink); border-radius: 5px; font: 800 14px var(--hand); background: #fff; }
.opt-text { font: 600 var(--step-0)/1.45 var(--hand); text-decoration-thickness: 2px; }
.opt-mark svg { width: 24px; height: 24px; display: block; }
.opt.is-correct { background: linear-gradient(transparent 12%, rgba(255, 228, 92, .55) 12%, rgba(255, 228, 92, .55) 88%, transparent 88%); }
.opt.is-correct .opt-key { color: transparent; }
.opt.is-correct .opt-key::after { content: ""; position: absolute; left: 7px; top: -9px; width: 11px; height: 24px; border: solid var(--pen); border-width: 0 5px 5px 0; transform: rotate(40deg); }
.opt.is-correct .opt-mark { display: none; }
.opt.is-wrong .opt-text { text-decoration: line-through var(--red) 2.5px; }
.opt.is-wrong .opt-mark { color: var(--red); }
.opt.is-dim { opacity: .5; }

/* Hover styles. Each question uses one, chosen at random. They show for the mouse and for keyboard
   focus, and only while the question is unanswered, so they never clash with the marking. */
.opts .opt:not(:disabled):is(:hover, :focus-visible) .opt-key { border-color: var(--pen); color: var(--pen); }

/* Pencil underline */
.hover-underline .opt-text { position: relative; }
.hover-underline .opt-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; clip-path: inset(0 100% 0 0); transition: clip-path .4s cubic-bezier(.3,.7,.3,1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='8'%3E%3Cpath d='M0 5 Q6 1 12 5 T24 5' fill='none' stroke='%232459C9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 24px 8px; }
.hover-underline .opt:not(:disabled):is(:hover, :focus-visible) .opt-text::after { clip-path: inset(0 0 0 0); }

/* Pencil loop */
.pen-loop { position: absolute; left: -6px; top: -4px; width: calc(100% + 12px); height: calc(100% + 8px); pointer-events: none; overflow: visible; }
.pen-loop path { fill: none; stroke: var(--pen); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset .5s cubic-bezier(.3,.7,.3,1), opacity .05s; }
.hover-loop .opt { position: relative; }
.hover-loop .opt:not(:disabled):is(:hover, :focus-visible) .pen-loop path { stroke-dashoffset: 0; opacity: 1; }

/* Pencilled-in tick */
.hover-tick .opt:not(:disabled) .opt-key::after { content: ""; position: absolute; left: 8px; top: -6px; width: 10px; height: 20px; border: solid #8A93A6; border-width: 0 4px 4px 0; transform: rotate(40deg) scale(.6); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.3,.7,.3,1); }
.hover-tick .opt:not(:disabled):is(:hover, :focus-visible) { background: #F1F6FB; }
.hover-tick .opt:not(:disabled):is(:hover, :focus-visible) .opt-key { color: transparent; border-color: var(--ink); }
.hover-tick .opt:not(:disabled):is(:hover, :focus-visible) .opt-key::after { opacity: 1; transform: rotate(40deg) scale(1); }

/* Margin arrow */
.hover-arrow { padding-left: 34px; }
.hover-arrow .opt { position: relative; }
.hover-arrow .opt::before { content: ""; position: absolute; left: -34px; top: 50%; width: 30px; height: 18px; margin-top: -9px; opacity: 0; transform: translateX(-8px); transition: opacity .2s, transform .3s cubic-bezier(.3,.7,.3,1);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 18'%3E%3Cpath d='M2 10 C9 6 16 12 26 9 M20 4 L27 9 L20 14' fill='none' stroke='%232459C9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.hover-arrow .opt:not(:disabled):is(:hover, :focus-visible)::before { opacity: 1; transform: none; }
.hover-arrow .opt:not(:disabled):is(:hover, :focus-visible) .opt-text { color: var(--pen); }

/* Paper slip */
.hover-slip .opt { border: 2px solid transparent; transition: transform .2s cubic-bezier(.3,.7,.3,1), box-shadow .2s, border-color .2s, background-color .2s; }
.hover-slip .opt:not(:disabled):is(:hover, :focus-visible) { background: #fff; border-color: var(--ink); transform: rotate(-.6deg) translateY(-2px); box-shadow: 3px 3px 0 var(--pen); }
.hover-slip .opt:not(:disabled):is(:hover, :focus-visible) .opt-key { transform: rotate(4deg); }

.q-actions { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* The hint arrives as a sticky note. */
.hint { flex-basis: 100%; max-width: 46ch; padding: 14px 16px; background: var(--sticky); font: 600 var(--step-0)/1.45 var(--hand); box-shadow: 2px 3px 0 rgba(19, 33, 61, .12); transform: rotate(-1deg); }

/* Feedback is the tutor's note, in red pen. */
.feedback:empty { display: none; }
.feedback { position: relative; padding: 18px 20px 20px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); }
.feedback::before { content: ""; position: absolute; top: -12px; left: 28px; width: 80px; height: 22px; background: var(--tape-coral); transform: rotate(-4deg); }
.fb-head { display: flex; gap: 10px; align-items: flex-start; font: 800 var(--step-1)/1.3 var(--hand); }
.fb-head svg { width: 26px; height: 26px; flex: none; margin-top: 1px; }
.feedback.is-correct .fb-head { color: var(--ok); }
.feedback.is-wrong .fb-head { color: var(--red); }
.fb-body { margin-top: 8px; max-width: 62ch; }
.next-btn { margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .feedback:not(:empty) { animation: fb-in .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes fb-in { from { opacity: 0; transform: translateY(8px) rotate(-1deg); } to { opacity: 1; transform: none; } }
}

/* The animation is a photo taped into the notebook. */
.stage {
  position: relative; aspect-ratio: 480 / 300; overflow: hidden;
  background: linear-gradient(170deg, var(--sc-bg1), var(--sc-bg2));
  border: 1.5px solid var(--ink); border-radius: 3px;
}
.stage svg { display: block; width: 100%; height: 100%; }
.sv-text { font-family: var(--body); }
.quiz .stage-col { position: relative; background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px; padding: 10px 10px 14px; box-shadow: var(--shadow); }
.quiz .stage-col::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; transform: translateX(-50%) rotate(3deg); background: var(--tape-teal); z-index: 1; }
@media (max-width: 560px) { .quiz .stage-col { margin-inline: -8px; } }

.chain-wrap { margin-top: 10px; padding: 0 4px; }
.chain-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 44px; }
.chain-title { font: 800 var(--step-1) var(--hand); }
.stage-controls { display: flex; gap: 8px; }
.stage-replay { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 10px 12px 9px 13px; background: #fff; color: var(--ink); font: 700 var(--step--1)/1 var(--hand); cursor: pointer; box-shadow: 2px 2px 0 rgba(19, 33, 61, .18); }
.stage-replay[hidden] { display: none; }
.stage-replay svg { width: 18px; height: 18px; }
.stage-replay:hover { box-shadow: 3px 3px 0 rgba(19, 33, 61, .25); }

/* Mechanism steps, written out as numbered notes with the scenario colour as a pen stroke. */
.quiz:not(.is-answered) .chain { display: none; }
.chain { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px 10px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); counter-reset: step; }
@media (max-width: 600px) { .chain { grid-auto-flow: row; } }
.chain-step { position: relative; display: flex; flex-direction: column; gap: 6px; font: 600 var(--step--1)/1.3 var(--hand); counter-increment: step; }
.chain-step::before { content: ""; display: block; height: 6px; border-radius: 3px; background: var(--grid); }
.chain-bar { position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: var(--sc-ui); transform: scaleX(0); transform-origin: left center; }
.chain-text { opacity: 0; }
.chain-text::before { content: counter(step) ". "; color: var(--red); }

/* ---------- Summary ---------- */
.summary { max-width: 860px; padding-block: 24px 80px; }
.sum-title { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 8px; outline: none; }
.sum-sub { margin-top: 12px; color: var(--ink-2); font-size: var(--step-1); max-width: 52ch; }
.results { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.res { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 18px; background: var(--sheet); border: 2px solid var(--ink); border-radius: 6px; box-shadow: var(--shadow); }
.res > svg { width: 28px; height: 28px; margin-top: 2px; color: var(--red); }
.res.is-correct > svg { color: var(--ok); }
.res-title { font: 800 var(--step-1)/1.25 var(--hand); }
.res-answer { color: var(--ink-2); }
.res-chain { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 6px; font: 600 var(--step--1)/1.3 var(--hand); color: var(--ink-2); counter-reset: step; }
.res-chain li { flex: 1 1 120px; padding-top: 7px; border-top: 3px solid var(--sc-ui); counter-increment: step; }
.res-chain li::before { content: counter(step) ". "; color: var(--red); }
.sum-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Build the mechanism ---------- */
.b-question { margin-top: 8px; max-width: 52ch; font: 600 var(--step--1)/1.5 var(--hand); color: var(--ink-2); }
.slots { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.slot { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 12px; }
.slot-n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 2.5px solid var(--red); color: var(--red); font: 800 15px var(--hand); background: #fff; }
.slot-text { display: flex; align-items: center; min-height: 50px; padding: 8px 14px; border: 2px dashed var(--line); border-radius: 8px; font: 600 var(--step--1)/1.35 var(--hand); color: var(--ink-2); }
.slot.is-next .slot-text { border-color: var(--pen); background: rgba(36, 89, 201, .05); }
.slot.is-filled .slot-n { background: var(--red); color: #fff; }
.slot.is-filled .slot-text { border-style: solid; border-color: var(--ink); background: #fff; color: var(--ink); font-size: var(--step-0); box-shadow: 2px 2px 0 rgba(19, 33, 61, .12); }
.b-status { min-height: 1.6em; margin: 16px 0 8px; font: 700 var(--step--1) var(--hand); color: var(--pen); }
.b-status.is-wrong { color: var(--red); }

/* Steps to place are slips of paper on the desk. */
.pool { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.step-card {
  max-width: 100%; min-height: 48px; padding: 10px 14px; text-align: left;
  font: 600 var(--step-0)/1.35 var(--hand); color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 6px 8px 5px 9px;
  box-shadow: 3px 3px 0 rgba(19, 33, 61, .18); cursor: pointer; touch-action: manipulation;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, border-color .2s;
}
.step-card:nth-child(odd) { transform: rotate(-1.2deg); }
.step-card:nth-child(even) { transform: rotate(1deg); }
.step-card:is(:hover, :focus-visible) { transform: translateY(-4px) rotate(0); box-shadow: 5px 6px 0 var(--pen); border-color: var(--pen); }
.step-card.nope { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .step-card.nope { animation: nope .45s ease; }
  @keyframes nope { 0%, 100% { translate: 0; } 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }
  .slot.is-filled .slot-text { animation: slot-in .4s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes slot-in { from { transform: translateY(-12px) rotate(-2deg) scale(.95); opacity: .4; } to { transform: none; opacity: 1; } }
}

.stage-wait { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); margin: 0; padding: 6px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; font: 700 var(--step--1) var(--hand); color: var(--ink); }
.stage.is-playing .stage-wait { display: none; }
/* On phones and tablets the animation stays pinned under the top bar while you build, so each step is visible as you place it. */
@media (max-width: 959px) {
  .quiz.build .stage-col { position: sticky; top: 72px; z-index: 5; padding-bottom: 4px; }
  .quiz.build .stage-col::before { display: none; }
  .quiz.build .chain-wrap { margin-top: 4px; }
  .quiz.build .chain-head { min-height: 0; }
  .quiz.build:not(.is-answered) .chain-head { display: none; }
}

.stars { display: inline-flex; gap: 2px; color: var(--ink); flex: none; }
.stars svg { width: 24px; height: 24px; }
.fb-head .stars svg { width: 26px; height: 26px; }
.res > .stars { flex-direction: column; margin-top: 2px; }
.res > .stars svg { width: 22px; height: 22px; }
.res.is-partial { border-left-color: var(--pen); }
.pip.is-partial::after { content: ""; position: absolute; left: 4px; top: -3px; width: 7px; height: 14px; border: solid var(--pen); border-width: 0 3px 3px 0; transform: rotate(40deg); }

/* Home: a notebook contents page linking to each scenario's mechanisms. */
.builder { padding-bottom: 90px; }
.contents { list-style: none; margin: 0; padding: 0; columns: 2 320px; column-gap: 56px; }
.contents li { break-inside: avoid; }
.contents li { display: grid; grid-template-columns: minmax(0, max-content) minmax(20px, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 4px 0; }
.c-links { display: inline-flex; gap: 14px; }
@media (max-width: 560px) { .contents li { grid-template-columns: 1fr; } .contents li .c-dots { display: none; } }
.contents a { display: inline-flex; align-items: center; min-height: 44px; font: 700 var(--step--1) var(--hand); color: var(--pen); text-underline-offset: 4px; white-space: nowrap; }
.contents a:is(:hover, :focus-visible) { background: linear-gradient(transparent 60%, var(--highlight) 60%); }
.modes { display: grid; gap: 6px; margin: 4px 0 26px; max-width: 70ch; }
.modes div { display: flex; flex-wrap: wrap; gap: 0 10px; }
.modes dt { font: 800 var(--step-0) var(--hand); color: var(--pen); }
.modes dd { margin: 0; color: var(--ink-2); }
.c-name { font: 700 var(--step-1)/1.25 var(--hand); }
.c-dots { flex: 1; min-width: 20px; border-bottom: 3px dotted var(--ink-2); opacity: .45; transform: translateY(-6px); }



/* ---------- Spot the error ---------- */
.spot-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.spot-step {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; grid-template-areas: "n t" ". f"; align-items: center; column-gap: 12px;
  min-height: 54px; padding: 9px 12px 9px 10px; text-align: left; font: inherit; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 8px; cursor: pointer; touch-action: manipulation;
  box-shadow: 2px 2px 0 rgba(19, 33, 61, .12);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s, border-color .2s;
}
.spot-step .slot-n { grid-area: n; position: relative; }
.spot-text { grid-area: t; font: 600 var(--step-0)/1.35 var(--hand); }
.spot-fix { grid-area: f; margin-top: 4px; font: 800 var(--step-0)/1.35 var(--hand); color: var(--red); }
.spot-fix:empty { display: none; }
.spot-step:not(:disabled):is(:hover, :focus-visible) { transform: translateX(6px) rotate(-.4deg); border-color: var(--pen); box-shadow: 4px 4px 0 var(--pen); }
.spot-step:disabled { cursor: default; }
/* A step you checked that turned out fine: ticked in blue pen. */
.spot-step.is-fine { border-color: var(--line); box-shadow: none; color: var(--ink-2); }
.spot-step.is-fine .slot-n { border-color: var(--pen); color: transparent; }
.spot-step.is-fine .slot-n::after { content: ""; position: absolute; left: 9px; top: 2px; width: 8px; height: 15px; border: solid var(--pen); border-width: 0 3px 3px 0; transform: rotate(40deg); }
/* The planted mistake: crossed out in red, with the correction written underneath. */
.spot-step.is-error { border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
.spot-step.is-error .spot-text { text-decoration: line-through var(--red) 2.5px; color: var(--ink-2); }
.spot-step.is-error .slot-n { background: var(--red); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .spot-step.is-error { animation: found .5s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes found { from { transform: scale(.97) rotate(-1deg); } 50% { transform: scale(1.03) rotate(.6deg); } to { transform: none; } }
}
.res-chain li.was-wrong s { color: var(--red); text-decoration-thickness: 2px; }
.res-chain li.was-wrong .fix { display: block; color: var(--ink); }

/* ---------- Score ---------- */
/* The end-of-scenario score is marked like a tutor's grade: big, in green pen, circled. */
.score-card { margin: 22px 0 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.score-big {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 10px 34px 14px; color: var(--ok);
  border: 4px solid var(--ok); border-radius: 50% / 46%;
  transform: rotate(-3deg); background: rgba(29, 122, 78, .06);
}
.score-num { font: 800 clamp(4rem, 13vw, 7.5rem)/1 var(--hand); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.score-unit { font: 800 clamp(1.4rem, 3.5vw, 2rem)/1 var(--hand); }
.score-extra { font: 700 var(--step-0)/1.45 var(--hand); color: var(--ok); }
.score-best { display: inline-block; margin-left: 4px; padding: 0 8px; background: var(--highlight); color: var(--ink); transform: rotate(-2deg); }
@media (prefers-reduced-motion: no-preference) {
  .score-big { animation: score-in .6s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes score-in { from { transform: rotate(-3deg) scale(.6); opacity: 0; } to { transform: rotate(-3deg) scale(1); opacity: 1; } }
}

/* Streak bonus note in the feedback, in green pen. */
.streak-bonus { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 800 var(--step-0)/1.3 var(--hand); color: var(--ok); }
.streak-bonus svg { width: 22px; height: 22px; flex: none; }

/* ---------- Gallery ---------- */
.gallery { padding-block: 24px 80px; }
.gallery-note { color: var(--ink-2); margin: 6px 0 24px; }
.gallery-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.gallery-item { display: block; width: 100%; padding: 8px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.gallery-item .stage { display: block; }
.gallery-cap { display: block; margin-top: 8px; font: 600 var(--step--1) var(--hand); color: var(--ink-2); }

/* ---------- Password screen ---------- */
/* While locked, the site sits blurred and untouchable behind a notebook card. */
html.locked body { overflow: hidden; }
html.locked .topbar, html.locked main, html.locked .foot { filter: blur(9px) saturate(.9); pointer-events: none; user-select: none; }
.topbar, main, .foot { transition: filter .45s ease; }
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(250, 252, 254, .35); transition: opacity .45s ease; }
.gate.is-leaving { opacity: 0; pointer-events: none; }
.gate-card {
  position: relative; width: min(100%, 420px); padding: 34px 28px 28px; text-align: center;
  background: var(--sheet); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 6px 8px 0 rgba(19, 33, 61, .18);
  transform: rotate(-.6deg);
}
.gate-card::before { content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: var(--tape-teal); }
.gate-mark { width: 104px; height: 104px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; object-fit: cover; }
.gate-title { margin-top: 14px; font-size: var(--step-2); }
.gate-lede { margin: 8px auto 22px; max-width: 32ch; color: var(--ink-2); }
.gate-label { display: block; text-align: left; font: 800 var(--step-0) var(--hand); margin-bottom: 6px; }
.gate-field { display: flex; align-items: stretch; border: 2px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; }
.gate-field:focus-within { outline: 3px solid var(--pen); outline-offset: 2px; }
.gate-field input { flex: 1; min-width: 0; min-height: 50px; padding: 10px 14px; border: 0; font: 600 var(--step-0) var(--body); color: var(--ink); background: transparent; }
.gate-field input:focus { outline: none; }
.gate-field input[aria-invalid="true"] { background: #FFF5F3; }
.gate-show { flex: none; min-width: 64px; padding: 0 14px; border: 0; border-left: 2px dashed var(--line); background: #fff; color: var(--pen); font: 700 var(--step--1) var(--hand); cursor: pointer; }
.gate-err { min-height: 1.5em; margin: 8px 0 14px; text-align: left; font: 700 var(--step--1)/1.4 var(--hand); color: var(--red); }
.gate-go { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gate-card.nope { animation: gate-nope .45s ease; }
  @keyframes gate-nope { 0%, 100% { translate: 0; } 20% { translate: -10px 0; } 40% { translate: 8px 0; } 60% { translate: -6px 0; } 80% { translate: 3px 0; } }
}
@media (prefers-reduced-motion: reduce) { .topbar, main, .foot, .gate { transition: none; } }

/* ---------- Footer ---------- */
.foot { padding-block: 22px 30px; border-top: 2px dashed var(--line); color: var(--ink-2); font: 600 var(--step--1) var(--hand); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}