/* ==========================================================================
   SHOWCASE: phone stack, live app screens, worked solution, Venn diagram,
   hand-drawn arrows, medicine strip. Everything animates with transform,
   opacity and stroke offsets only, and only while it is on screen.
   ========================================================================== */

:root {
  --c-a: #0B7D70;   /* maths part colours, light page */
  --c-b: #B26A00;
  --c-c: #C2412D;
  --c-y: #0B7D70;
  --stage-bg: var(--card);
  --stage-ink: var(--text);
  --stage-grid: rgba(23, 24, 28, .05);
  --s-a: var(--c-a);   /* the stage follows the page theme */
  --s-b: var(--c-b);
  --s-c: var(--c-c);
  --s-y: var(--c-y);
}
:root[data-theme="dark"] {
  --stage-grid: rgba(233, 236, 241, .045);
  --c-a: #5FD3C1;
  --c-b: #FFC24D;
  --c-c: #FF9C85;
  --c-y: #5FD3C1;
}

/* ---- Maths (pre-rendered TeX paths) ------------------------------------ */
.texbox { display: inline-block; line-height: 0; color: inherit; }
.texbox svg { display: block; overflow: visible; }
.texbox .ca { fill: var(--c-a); stroke: var(--c-a); }
.texbox .cb { fill: var(--c-b); stroke: var(--c-b); }
.texbox .cc { fill: var(--c-c); stroke: var(--c-c); }
.texbox .cy { fill: var(--c-y); stroke: var(--c-y); }

/* writing: each glyph is traced, then filled (stroke widths in TeX units) */
.writing .tex path,
.writing .tex rect {
  stroke-width: 22px;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  fill-opacity: 0;
  animation: tex-write .95s cubic-bezier(.35, .1, .25, 1) forwards;
  animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes tex-write {
  0%   { stroke-dashoffset: 1; fill-opacity: 0; stroke-width: 22px; }
  62%  { stroke-dashoffset: 0; fill-opacity: 0; stroke-width: 22px; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
}
.waiting .tex { visibility: hidden; }

/* ---- Hero phone stack --------------------------------------------------- */
.stack {
  position: relative;
  margin: 0 auto;
  width: min(100%, 520px);
  height: min(118vw, 600px);
}
.stack .phone {
  position: absolute;
  left: 50%;
  top: 4%;
  width: min(232px, 50vw);
  margin-left: calc(min(232px, 50vw) / -2);
  transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease;
  will-change: transform;
}
.stack .p-left  { transform: translate(-6%, 3%) rotate(-2deg) scale(.9); }
.stack .p-right { transform: translate(6%, 3%) rotate(2deg) scale(.9); }
.stack .p-front { transform: translateY(0); z-index: 2; }
.stack.fanned .p-left  { transform: translate(-42%, 8%) rotate(-7deg) scale(.82); }
.stack.fanned .p-right { transform: translate(42%, 8%) rotate(7deg) scale(.82); }
@media (min-width: 960px) {
  .stack.fanned .p-left  { transform: translate(-58%, 7%) rotate(-8deg) scale(.86); }
  .stack.fanned .p-right { transform: translate(58%, 7%) rotate(8deg) scale(.86); }
}
.stack.fanned .p-front { transform: translateY(-2%); }
.stack .p-left, .stack .p-right { filter: none; }

@media (min-width: 960px) {
  .stack { height: 600px; }
  .stack .phone { width: 250px; margin-left: -125px; }
}

/* ---- Hand-drawn arrows -------------------------------------------------- */
.squiggle {
  position: absolute;
  width: 112px;
  height: auto;
  fill: none;
  stroke: var(--text);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.squiggle path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
}
.squiggle .sq-head { stroke-dasharray: 40; stroke-dashoffset: 40; }
.drawn .squiggle .sq-line { animation: sq-draw 1s ease forwards; animation-delay: var(--sqd, 0s); }
.drawn .squiggle .sq-head { animation: sq-draw .35s ease forwards; animation-delay: calc(var(--sqd, 0s) + .9s); }
@keyframes sq-draw { to { stroke-dashoffset: 0; } }

.sq-label {
  position: absolute;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -0.01em;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--sqd, 0s);
}
.drawn .sq-label { opacity: 1; transform: none; }

.stack .sq-1 { left: -4%; top: 2%; --sqd: 1.1s; transform: scaleX(-1); }
.stack .sq-l1 { left: -8%; top: -3%; --sqd: 1.4s; }
.stack .sq-2 { right: -2%; bottom: 6%; --sqd: 1.6s; }
.stack .sq-l2 { right: -6%; bottom: 1%; --sqd: 1.9s; }

@media (max-width: 959px) {
  .stack .squiggle, .stack .sq-label { display: none; }
}

/* ---- Live app screens (sized from the phone width: 1em = 16px at 360) --- */
.phone-screen { container-type: inline-size; position: relative; }
.app {
  --a-bg: #F6F4EF;
  --a-card: #FFFFFF;
  --a-line: #E7E3DB;
  --a-text: #17181C;
  --a-muted: #6B6C72;
  --a-teal: #0B7D70;
  font-size: 4.444cqw;
  height: 100%;
  padding: 0 1em;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--body);
  line-height: 1.35;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .75em;
}
:root[data-theme="dark"] .app {
  --a-bg: #0E1116;
  --a-card: #1B1F29;
  --a-line: #2A2F3B;
  --a-text: #E6E8EC;
  --a-muted: #9AA0AB;
  --a-teal: #2BB8A5;
}
.app p { margin: 0; }
.app .texbox { color: var(--a-text); font-size: 1.05em; }

.sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72em;
  font-weight: 650;
  padding: 1.5em .5em 0;
}
.sb-i { display: flex; gap: .3em; align-items: center; }
.sb-i i { width: .9em; height: .6em; border-radius: .15em; background: currentColor; opacity: .7; }
.sb-i b { width: 1.6em; height: .75em; border-radius: .25em; border: .12em solid currentColor; }

.h-sec { font-family: var(--display); font-weight: 650; font-size: .95em; margin-top: .2em; }

/* home */
.h-top { display: flex; align-items: center; gap: .6em; }
.h-av {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  display: grid; place-items: center;
  background: #17181C; color: #F3ECDD;
  font-family: var(--display); font-weight: 700;
}
:root[data-theme="dark"] .h-av { background: #F3ECDD; color: #17181C; }
.h-who { flex: 1; }
.h-hi { font-size: .78em; color: var(--a-muted); }
.h-name { font-family: var(--display); font-weight: 700; font-size: 1.15em; }
.h-streak {
  display: inline-flex; align-items: center; gap: .35em;
  font-size: .72em; font-weight: 650;
  padding: .45em .7em; border-radius: 99em;
  background: var(--a-card); border: 1px solid var(--a-line);
}
.h-streak i { width: .55em; height: .55em; border-radius: 50%; background: #F59E0B; }
.h-banner {
  border-radius: 1.2em;
  padding: 1em;
  background: linear-gradient(135deg, #0B7D70, #0E3B39 70%, #17181C);
  color: #F3ECDD;
}
.hb-k { font-size: .72em; opacity: .8; }
.hb-t { font-family: var(--display); font-weight: 650; font-size: 1.02em; margin-top: .2em !important; line-height: 1.25; }
.hb-bar { margin-top: .8em; height: .3em; border-radius: 99em; background: rgba(243, 236, 221, .25); overflow: hidden; }
.hb-bar i { display: block; height: 100%; width: 100%; background: #F3ECDD; transform-origin: left; transform: scaleX(.62); }
.h-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.h-tile { border-radius: 1.1em; padding: .85em; min-height: 6.2em; display: flex; flex-direction: column; gap: .1em; color: #17181C; }
.h-tile p { font-family: var(--display); font-weight: 650; font-size: .92em; margin-top: auto !important; }
.h-tile small { font-size: .68em; opacity: .7; }
.t-blue { background: linear-gradient(160deg, #DCE8FF, #B4CDFF); }
.t-amber { background: linear-gradient(160deg, #FFECC8, #FFD28C); }
.ti svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.h-ev {
  display: flex; align-items: center; gap: .7em;
  padding: .6em .7em; border-radius: 1em;
  background: var(--a-card); border: 1px solid var(--a-line);
}
.ev-d { display: grid; place-items: center; width: 2.6em; font-size: .62em; color: var(--a-muted); line-height: 1.1; }
.ev-d b { font-family: var(--display); font-size: 1.7em; color: var(--a-text); }
.ev-t { flex: 1; }
.ev-t p { font-weight: 650; font-size: .84em; }
.ev-t small { font-size: .68em; color: var(--a-muted); }
.ev-n { font-size: .7em; font-weight: 650; color: var(--a-teal); }
.dock {
  margin-top: auto; margin-bottom: 1em; align-self: center;
  display: flex; gap: 1.6em; padding: .8em 1.4em; border-radius: 99em;
  background: var(--a-card); border: 1px solid var(--a-line);
}
.dock i { width: 1.1em; height: 1.1em; border-radius: .35em; background: var(--a-line); }
.dock i.on { background: var(--a-text); }

/* shared heads */
.a-head { display: flex; align-items: center; gap: .6em; }
.a-head p { flex: 1; font-family: var(--display); font-weight: 650; font-size: .9em; }
.a-back { width: 2em; height: 2em; border-radius: 50%; background: var(--a-card); border: 1px solid var(--a-line); position: relative; }
.a-back::after { content: ""; position: absolute; left: 42%; top: 36%; width: .5em; height: .5em; border-left: .12em solid var(--a-text); border-bottom: .12em solid var(--a-text); transform: rotate(45deg); }
.a-pill { font-size: .7em; font-weight: 650; padding: .4em .7em; border-radius: 99em; background: var(--a-card); border: 1px solid var(--a-line); }
.q-stem { font-size: .9em; line-height: 1.45; font-weight: 500; }

/* explanation */
.opts { display: grid; gap: .4em; }
.opt {
  display: flex; align-items: center; gap: .6em;
  padding: .55em .7em; border-radius: .85em;
  background: var(--a-card); border: 1px solid var(--a-line);
  font-size: .82em;
}
.opt b { width: 1.6em; height: 1.6em; border-radius: 50%; display: grid; place-items: center; background: var(--a-bg); font-size: .85em; }
.opt.ok { border-color: #1E8A57; background: color-mix(in srgb, #1E8A57 10%, var(--a-card)); }
.opt.ok b { background: #1E8A57; color: #fff; }
.sol { border-radius: 1em; padding: .8em; background: var(--a-card); border: 1px solid var(--a-line); display: grid; gap: .55em; }
.sol-h { display: flex; justify-content: space-between; align-items: center; font-size: .78em; color: var(--a-muted); }
.try { padding: .35em .7em; border-radius: 99em; background: color-mix(in srgb, var(--a-teal) 14%, transparent); color: var(--a-teal); font-weight: 650; }
.ans { display: block; padding: .5em .8em; border-radius: 99em; background: #1E8A57; color: #fff; font-weight: 650; font-size: .8em; }
.sol-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.sol-steps li { display: grid; gap: .25em; border-left: .15em solid var(--a-teal); padding-left: .6em; }
.sol-steps b { font-size: .7em; color: var(--a-muted); font-weight: 650; }
.sol-steps .texbox { font-size: .78em; }

/* exam */
.clock {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .4em .7em; border-radius: 99em;
  background: color-mix(in srgb, #F59E0B 16%, var(--a-card));
  font-size: .72em; font-weight: 700; font-variant-numeric: tabular-nums;
}
.clock i { width: .7em; height: .7em; border-radius: 50%; border: .14em solid currentColor; }
.e-prog { height: .3em; border-radius: 99em; background: var(--a-line); overflow: hidden; }
.e-prog i { display: block; height: 100%; width: 100%; background: var(--a-teal); transform-origin: left; transform: scaleX(var(--p)); }
.e-num { font-size: .72em; color: var(--a-muted); }
.mtf { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.mtf li {
  display: flex; align-items: center; gap: .6em;
  padding: .55em .7em; border-radius: .85em;
  background: var(--a-card); border: 1px solid var(--a-line);
  font-size: .76em; line-height: 1.35;
}
.mtf span { flex: 1; }
.mtf i {
  flex: 0 0 2em; height: 2em; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-weight: 700;
  border: .12em solid var(--a-line);
}
.mtf i.t { background: color-mix(in srgb, #1E8A57 14%, transparent); border-color: #1E8A57; color: #1E8A57; }
.mtf i.f { background: color-mix(in srgb, #C23B3B 12%, transparent); border-color: #C23B3B; color: #C23B3B; }
.e-bar { margin-top: auto; margin-bottom: 1em; display: flex; justify-content: space-between; align-items: center; font-size: .78em; font-weight: 650; }
.e-submit { padding: .55em 1.3em; border-radius: 99em; background: #C23B3B; color: #fff; }

/* duel */
.d-hero {
  border-radius: 1.2em; padding: 1em;
  background: linear-gradient(135deg, #C9B8FF, #9FE6D6);
  color: #17181C;
}
:root[data-theme="dark"] .d-hero { background: linear-gradient(135deg, #3A2A75, #135C52); color: #F3ECDD; }
.d-k { font-size: .72em; opacity: .75; }
.d-code { font-family: var(--display); font-weight: 750; font-size: 2em; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.d-sub { font-size: .72em; opacity: .8; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.board li {
  display: grid; grid-template-columns: 1.6em 4.6em 1fr 2.6em; align-items: center; gap: .5em;
  padding: .55em .7em; border-radius: .85em;
  background: var(--a-card); border: 1px solid var(--a-line);
  font-size: .78em;
}
.board .r { font-family: var(--display); font-weight: 700; color: var(--a-muted); }
.board li:first-child .r { color: #C98A00; }
.board .nm { font-weight: 650; }
.board b { text-align: right; font-variant-numeric: tabular-nums; }
.board li.me { border-color: var(--a-teal); }
.br { height: .45em; border-radius: 99em; background: var(--a-line); overflow: hidden; }
.br i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--a-teal); transform-origin: left; transform: scaleX(var(--w)); }
.d-foot { font-size: .7em; color: var(--a-muted); text-align: center; margin-top: auto !important; margin-bottom: 1.2em !important; }

/* analytics */
.s-title { font-family: var(--display); font-weight: 700; font-size: 1.3em; }
.s-hero {
  display: flex; align-items: center; gap: 1em;
  padding: 1em; border-radius: 1.2em;
  background: linear-gradient(160deg, #1B2140, #111426);
  color: #F2F4F7;
}
.ring { width: 6em; height: 6em; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring-track { stroke: rgba(255, 255, 255, .1); }
.ring-seg { stroke-linecap: round; stroke-dasharray: var(--len) 100; stroke-dashoffset: calc(var(--off) * -1); }
.ring .s1 { stroke: #5EE6C5; }
.ring .s2 { stroke: #93ABFF; }
.ring .s3 { stroke: #FFC24D; }
.s-big { font-family: var(--display); font-weight: 750; font-size: 2em; line-height: 1; }
.s-small { font-size: .72em; opacity: .75; margin-top: .3em !important; }
.s-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.s-rows li { display: grid; grid-template-columns: 6em 1fr 2.6em; gap: .6em; align-items: center; font-size: .78em; }
.s-rows b { text-align: right; }
.br i.c1 { background: #0B9C7F; }
.br i.c2 { background: #4E6BE0; }
.br i.c3 { background: #D9930C; }
.week { display: flex; align-items: flex-end; gap: .55em; height: 5em; padding: .6em; border-radius: 1em; background: var(--a-card); border: 1px solid var(--a-line); }
.week i { flex: 1; height: 100%; border-radius: .35em; background: var(--a-line); transform-origin: bottom; transform: scaleY(var(--h)); }
.week i.today { background: var(--a-teal); }

/* past questions */
.p-band { border-radius: 1.2em; padding: 1.1em 1em; background: linear-gradient(170deg, #DCE8FF, #B4CDFF); color: #17181C; }
:root[data-theme="dark"] .p-band { background: linear-gradient(170deg, #14264A, #1F3B75); color: #E6E8EC; }
.p-t { font-family: var(--display); font-weight: 750; font-size: 1.35em; }
.p-s { font-size: .76em; opacity: .75; }
.p-tile {
  display: flex; justify-content: space-between; align-items: flex-end; gap: .6em;
  border-radius: 1.1em; padding: .9em; min-height: 4.6em; color: #17181C;
}
.p-tile p { font-family: var(--display); font-weight: 700; font-size: 1em; }
.p-tile small { font-size: .68em; opacity: .7; }
.p-tile span { font-size: .66em; font-weight: 650; padding: .35em .6em; border-radius: 99em; background: rgba(255, 255, 255, .55); white-space: nowrap; }
.f-jade { background: linear-gradient(135deg, #BFF0E0, #86E1C6); }
.f-coral { background: linear-gradient(135deg, #FFD6CC, #FFAE9C); }
.f-mango { background: linear-gradient(135deg, #FFE7A8, #FFC75C); }
.f-peri { background: linear-gradient(135deg, #D3DEFF, #A6BBFF); }

/* bars and rings grow in when their phone comes into view */
.app .br i, .app .e-prog i, .app .hb-bar i { transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.app .week i { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.app .ring-seg { transition: stroke-dasharray 1.3s cubic-bezier(.2, .8, .2, 1); }
.dormant .app .br i, .dormant .app .e-prog i, .dormant .app .hb-bar i { transform: scaleX(0); }
.dormant .app .week i { transform: scaleY(.04); }
.dormant .app .ring-seg { stroke-dasharray: 0 100; }

/* ---- Worked solution stage --------------------------------------------- */
.solve, .sets {
  display: grid;
  gap: 28px;
  padding: 56px 0;
  border-top: 1px solid var(--line);
  align-items: center;
}
.solve h2, .sets h2 {
  font-size: clamp(1.55rem, 4.6vw, 2.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.solve-lede { margin-top: 12px; color: var(--muted); max-width: 48ch; }

.solve-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 4px; }
.solve-steps button {
  width: 100%;
  display: grid;
  gap: 2px;
  text-align: left;
  padding: 10px 14px 10px 18px;
  border: 0;
  border-left: 2px solid var(--line);
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  border-radius: 0 14px 14px 0;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.solve-steps b { font-family: var(--display); font-weight: 600; font-size: .98rem; color: inherit; }
.solve-steps span { font-size: .88rem; display: none; }
.solve-steps li.done button { color: var(--text); border-left-color: var(--teal); }
.solve-steps li.cur button { color: var(--text); border-left-color: var(--teal); background: var(--card); }
.solve-steps li.cur span { display: block; color: var(--muted); }

.stage {
  position: relative;
  border-radius: 28px;
  background: var(--stage-bg);
  color: var(--stage-ink);
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--line);
}
.stage::before {
  /* faint board grid */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--stage-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.stage .texbox .ca { fill: var(--s-a); stroke: var(--s-a); }
.stage .texbox .cb { fill: var(--s-b); stroke: var(--s-b); }
.stage .texbox .cc { fill: var(--s-c); stroke: var(--s-c); }
.stage .texbox .cy { fill: var(--s-y); stroke: var(--s-y); }

.stage-given {
  position: relative;
  padding: 18px 22px 0;
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  color: var(--muted);
}
.stage-given.on { opacity: 1; transform: none; }
.stage-board { position: relative; }
.frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 16px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
  font-size: clamp(14px, 3.6vw, 21px);
}
.frame .texbox.big { font-size: clamp(17px, 4.8vw, 28px); }
.frame.cur { opacity: 1; transform: none; }
.frame.past { opacity: 0; transform: translateY(-26px) scale(.96); }

.boxed { position: relative; padding: .5em .9em; }
.boxed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1.5px solid var(--s-a);
  background: color-mix(in srgb, var(--s-a) 10%, transparent);
  clip-path: inset(0 100% 0 0 round 12px);
}
.frame.cur .boxed::before { animation: box-draw .9s cubic-bezier(.3, .1, .2, 1) forwards; animation-delay: 1.3s; }
@keyframes box-draw { to { clip-path: inset(0 0 0 0 round 12px); } }

.stage-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px 16px 22px;
}
.stage-dots { display: flex; gap: 6px; }
.stage-dots i { width: 22px; height: 4px; border-radius: 2px; background: var(--line); transition: background-color .3s ease; }
.stage-dots i.on { background: var(--s-a); }
.stage-replay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--frame);
  color: var(--text);
  font: 600 .88rem var(--body);
  cursor: pointer;
}
.stage-replay svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stage-replay.light { margin-top: 20px; background: var(--card); }

@media (max-width: 959px) {
  .solve-copy { display: contents; }
  .solve h2 { order: 0; }
  .solve .solve-lede { order: 1; margin-top: -14px; }
  .stage { order: 2; }
  .solve-steps { order: 3; margin-top: 0; }
}
@media (min-width: 960px) {
  .solve { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; padding: 80px 0; }
  .sets { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 56px; padding: 80px 0; }
  .frame { font-size: 23px; }
  .frame .texbox.big { font-size: 30px; }
}

/* ---- Venn diagram ------------------------------------------------------- */
.sets-visual { position: relative; }
.venn { width: 100%; height: auto; overflow: visible; }
.venn .v-u { fill: var(--card); stroke: var(--line); stroke-width: 2; }
.venn .v-a, .venn .v-b { fill: none; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; }
.venn .v-a { stroke: var(--teal-strong); }
.venn .v-b { stroke: #D9930C; }
:root[data-theme="dark"] .venn .v-a { stroke: #5FD3C1; }
:root[data-theme="dark"] .venn .v-b { stroke: #FFC24D; }
.venn .v-lens { fill: var(--teal); opacity: 0; transition: opacity .8s ease; }
.venn .v-tag { font-family: var(--display); font-weight: 700; font-size: 26px; fill: var(--text); opacity: 0; transition: opacity .5s ease; }
.venn .v-n { font-family: var(--display); font-weight: 650; font-size: 30px; fill: var(--text); text-anchor: middle; opacity: 0; }
.venn .v-mid { fill: #fff; }
:root[data-theme="dark"] .venn .v-mid { fill: #0E1116; }

.venn.play .v-a { animation: draw-circle 1.1s ease forwards; }
.venn.play .v-b { animation: draw-circle 1.1s ease forwards .25s; }
@keyframes draw-circle { to { stroke-dashoffset: 0; } }
.venn.play .v-tag { opacity: 1; transition-delay: .9s; }
.venn.play .v-n { animation: drop-in .6s cubic-bezier(.2, .9, .3, 1.2) forwards; animation-delay: calc(1.3s + var(--d) * .28s); }
@keyframes drop-in {
  0% { opacity: 0; transform: translateY(-26px); }
  100% { opacity: 1; transform: none; }
}
.venn .v-n { transform-box: fill-box; transform-origin: center; }
.venn.play .v-lens { opacity: .9; transition-delay: 3s; }

.set-lines { margin-top: 22px; display: grid; gap: 14px; justify-items: start; font-size: 19px; }
.set-lines .texbox { opacity: 0; }
.set-lines .texbox.shown { opacity: 1; }

.sets-visual .sq-3 { left: 51%; top: -9%; --sqd: 3.4s; width: 84px; }
.sets-visual .sq-l3 { left: 62%; top: -13%; --sqd: 3.7s; }
@media (max-width: 600px) {
  .sets-visual { margin-top: 34px; }
  .sets-visual .sq-3 { left: 40%; top: -9%; width: 56px; }
  .sets-visual .sq-l3 { left: auto; right: 2%; top: -17%; font-size: .82rem; }
}

/* ---- Medicine strip ----------------------------------------------------- */
.organs { padding: 56px 0; border-top: 1px solid var(--line); }
.organ-row { display: grid; gap: 18px; }
@media (min-width: 760px) { .organ-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.organ { margin: 0; }
.organ-art {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background:
    radial-gradient(58% 58% at 50% 50%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 72%),
    var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  container-type: inline-size;
}
.organ-art img {
  position: absolute;
  inset: 7%;
  width: 86%;
  height: 86%;
  object-fit: contain;
  opacity: 0;
  transform: translateY(14px) scale(.97);
  transition: opacity .8s ease, transform 1s cubic-bezier(.2, .8, .2, 1);
}
.organ.seen .organ-art img { opacity: 1; transform: none; }

/* labels pinned to the picture, as in an anatomy atlas */
.pin { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.pin::before {
  content: "";
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 2.5px var(--teal-strong);
}
.pin > span {
  position: absolute;
  top: -12px;
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: max(10px, 3.3cqw);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .35);
}
.pin.r > span { left: 14px; }
.pin.l > span { right: 14px; }
.pin.w > span { white-space: normal; width: 6.6em; text-align: right; top: -18px; border-radius: 12px; }
.pin, .pin > span { transition: opacity .45s ease, transform .45s ease; }
.pin { opacity: 0; }
.pin > span { transform: translateX(var(--from, -6px)); }
.pin.l > span { --from: 6px; }
.organ.seen .pin { opacity: 1; transition-delay: calc(.7s + var(--k) * .22s); }
.organ.seen .pin > span { transform: none; transition-delay: calc(.7s + var(--k) * .22s); }
.organ figcaption { margin-top: 12px; display: grid; gap: 2px; }
.organ figcaption b { font-family: var(--display); font-weight: 650; }
.organ figcaption span { font-size: .9rem; color: var(--muted); }

/* ---- Reduced motion: show the final picture, no movement ---------------- */
@media (prefers-reduced-motion: reduce) {
  .writing .tex path, .writing .tex rect { animation: none; stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
  .squiggle path { stroke-dashoffset: 0 !important; }
  .sq-label { opacity: 1; transform: none; }
  .venn .v-a, .venn .v-b { stroke-dashoffset: 0; }
  .venn .v-n, .venn .v-tag { opacity: 1; }
  .venn .v-lens { opacity: .9; }
  .set-lines .texbox { opacity: 1; }
  .organ-art img, .pin { opacity: 1; transform: none; }
  .boxed::before { clip-path: none; }
}