/* Story pieces added after the Nov 5 call. Builds on story-variations.css, which it needs for .sv, the
   tag, the dial and the segmented control. Mobile first. */
.sc-card-h { display: flex; align-items: center; gap: 8px; font: 500 clamp(18px, 2.2vw, 22px)/1.2 var(--font-heading); color: var(--sv-ink); white-space: nowrap; }
.sc-chip { padding: 7px 12px; border-radius: 999px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sc-art { display: block; width: 100%; height: auto; }
/* The real mark, laid flat on a blank top plate of the isometric art. */
.sc-bolt { position: absolute; left: 50%; top: 36%; width: 34%; aspect-ratio: 1; background: var(--theme-accent-contrast); -webkit-mask: url("/img/bolt.svg") center / contain no-repeat; mask: url("/img/bolt.svg") center / contain no-repeat; transform: translate(-50%, -50%) matrix(0.87, 0.5, -0.87, 0.5, 0, 0); }

/* Links between the three hero direction pages. */
/* The variant switcher: pinned to the bottom of the page, equal segments, labels on one line. */
.sc-dirs { position: fixed; z-index: 50; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; width: min(100% - 24px, 560px); padding: 4px; border-radius: 14px; background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line), 0 6px 18px var(--sv-shadow); transform: translateX(-50%); }
body:has(.sc-dirs) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.sc-dirs a { display: grid; place-items: center; min-height: 44px; border-radius: 10px; font: 500 clamp(13px, 4vw, 15px)/1 var(--font-body); color: var(--sv-ink); text-decoration: none; white-space: nowrap; }
.sc-dirs a[aria-current] { background: var(--theme-accent); color: var(--theme-accent-contrast); }
/* The six problem layouts: tabs keep their own width and the row scrolls sideways on phones. */
.sc-dirs.sc-dirs-many { grid-auto-columns: max-content; width: min(100% - 24px, 640px); overflow-x: auto; scrollbar-width: none; }
.sc-dirs.sc-dirs-many a { padding: 0 14px; }
@media (min-width: 640px) { .sc-dirs.sc-dirs-many { grid-auto-columns: minmax(0, 1fr); } }

/* Stories doing the same job, side by side from 960px. Each one becomes a single column in here. */
.sc-group { display: grid; gap: 32px; min-width: 0; }
.sc-group-h { margin: 0; font: 500 clamp(22px, 3vw, 30px)/1.2 var(--font-heading); text-align: center; color: var(--sv-ink); }
.sc-cmp { display: grid; gap: 64px; min-width: 0; }
.sc-cmp > article { grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: stretch; gap: 24px; }
.sc-cmp > article .sv-copy { order: -1; justify-items: start; text-align: left; align-content: start; }
.sc-cmp .sv-h { font-size: clamp(26px, 2.8vw, 34px); }
.sc-cmp .sv-jar-q { justify-content: flex-start; }
.sc-cmp .sv-jar > .sv-lead { text-align: left; }
@media (min-width: 960px) { .sc-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 56px; align-items: start; } }

/* The flow. Phones: tiles run down with the return line up the right. From 768px: across, with the
   return line underneath. One tile lifts at a time, round and round, so the eye follows the loop. */
.fl { position: relative; display: grid; gap: 14px; }
.fl-row { display: grid; gap: 30px; margin: 0; padding: 0 34px 0 0; list-style: none; }
.fl-step { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; }
.fl-step:not(:last-child)::after { content: ""; position: absolute; left: 37px; top: calc(50% + 34px); width: 2px; height: 22px; border-radius: 2px; background: var(--theme-action-green); }
.fl-step:not(:last-child)::before { content: ""; position: absolute; left: 33px; top: calc(50% + 46px); width: 10px; height: 12px; clip-path: polygon(0 0, 28% 0, 100% 50%, 28% 100%, 0 100%, 72% 50%); background: var(--theme-action-green); transform: rotate(90deg); }
.fl-tile { position: relative; display: block; }
.fl-tile img { display: block; width: 100%; height: 66px; object-fit: contain; }
.fl-tile .sc-bolt { top: 37%; width: 26%; }
.fl-t { font: 500 clamp(15px, 4.6vw, 18px)/1.2 var(--font-heading); color: var(--sv-ink); white-space: nowrap; }
.fl-back { position: absolute; top: 33px; right: 0; bottom: 74px; width: 34px; border: 2px solid var(--sv-flowline); border-left: 0; border-radius: 0 12px 12px 0; }
.fl-back::before { content: ""; position: absolute; left: -2px; top: -6px; width: 10px; height: 12px; clip-path: polygon(0 0, 28% 0, 100% 50%, 28% 100%, 0 100%, 72% 50%); background: var(--sv-flowline); transform: rotate(180deg); }
.fl-loop { justify-self: center; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--theme-surface); box-shadow: inset 0 0 0 1px var(--sv-flowline); font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
@media (min-width: 768px) {
  .fl { padding-bottom: 46px; }
  .fl-row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 0; }
  .fl-step { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; text-align: center; }
  .fl-step:not(:last-child)::after { left: calc(50% + min(39%, 85px) + 8px); top: 66px; width: calc(100% - 2 * min(39%, 85px) - 4px); height: 2px; }
  .fl-step:not(:last-child)::before { left: calc(150% - min(39%, 85px) - 7px); top: 61px; transform: none; }
  .fl-t { font-size: clamp(14px, 1.9vw, 20px); }
  .fl-tile { width: min(78%, 170px); }
  .fl-tile img { height: 136px; }
  .fl-back { top: auto; bottom: 0; left: 12.5%; right: 12.5%; width: auto; height: 36px; border: 2px solid var(--sv-flowline); border-top: 0; border-radius: 0 0 14px 14px; }
  .fl-back::before { left: -6px; top: -8px; transform: rotate(-90deg); }
  .fl-loop { position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: no-preference) {
  .fl-tile { animation: fl-lift 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
}
@keyframes fl-lift { 0%, 25%, 100% { transform: none; } 8%, 17% { transform: translateY(-8px); } }

/* codebase. */

/* your team is special. */

/* a school report card, punched for a binder, marked in red pen. */
.sc-rep { position: relative; display: grid; gap: 14px; min-width: 0; padding: 26px 22px 26px 44px; border-radius: 4px; background: var(--palette-greyscale-50); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 26px var(--sv-shadow); color: var(--palette-greyscale-900); transform: rotate(-1deg); }
.sc-rep-holes { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; }
.sc-rep-holes i { width: 14px; height: 14px; border-radius: 50%; background: var(--theme-surface); box-shadow: inset 0 1px 2px var(--sv-shadow); }
.sc-rep-h { margin: 0; font: 500 clamp(26px, 4vw, 34px)/1.1 var(--font-heading); }
.sc-rep-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding-bottom: 12px; border-bottom: 2px solid var(--palette-greyscale-900); font-size: 14px; }
.sc-rep-meta div { display: flex; gap: 6px; white-space: nowrap; }
.sc-rep-meta dt { opacity: 0.65; }
.sc-rep-meta dd { margin: 0; font-weight: 500; }
.sc-rep ul { display: grid; margin: 0; padding: 0; list-style: none; }
.sc-rep li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid color-mix(in srgb, var(--palette-greyscale-900) 18%, transparent); font-size: 16px; }
.sc-rep li b { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font: italic 500 20px/1 var(--font-heading); transform: rotate(-6deg); }
.sc-g-lo { color: var(--palette-red-400); box-shadow: inset 0 0 0 2px var(--palette-red-400); }
.sc-g-hi { color: var(--theme-action-green); }
.sc-rep li .sv-after { opacity: 0; transform: rotate(-6deg) scale(1.4); }
.sc-in.sc-rep li .sv-after { opacity: 1; transform: rotate(-6deg); transition: opacity 200ms ease-out var(--d), transform 200ms cubic-bezier(0.22, 1, 0.36, 1) var(--d); }
.sc-in.sc-rep li .sc-g-lo { opacity: 0.4; transition: opacity 200ms ease-out var(--d); }
.sc-rep-sw { display: grid; }
.sc-rep-sw span { grid-area: 1 / 1; }
.sc-rep-sw span:last-child { opacity: 0; }
.sc-in .sc-rep-sw span:first-child { opacity: 0; transition: opacity 200ms ease-out 1600ms; }
.sc-in .sc-rep-sw span:last-child { opacity: 1; transition: opacity 200ms ease-out 1600ms; }
.sc-rep-c { margin: 0; font: italic 400 16px/1.4 var(--font-body); }
.sc-rep-k { display: block; font: 500 13px/1.3 var(--font-body); opacity: 0.65; white-space: nowrap; }
.sc-rep-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0; padding-top: 6px; font-size: 13px; white-space: nowrap; }
.sc-rep-sign span { opacity: 0.65; }
.sc-rep-sign em { flex: 1; display: flex; justify-content: center; min-width: 0; border-bottom: 1px solid var(--palette-greyscale-900); }
.sc-rep-sign em img { display: block; width: auto; height: 58px; margin-bottom: -8px; }
.sc-rep-sign small { font-size: 13px; opacity: 0.65; }
/* Keep the card inside a phone: the grid column must be allowed to shrink, and the grades get smaller. */
.sc-story .sv-review, .sc-rep { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 479px) { .sc-rep { padding: 22px 16px 22px 36px; } .sc-rep-holes { left: 11px; } .sc-rep li { gap: 8px; font-size: 15px; } .sc-rep li b { width: 34px; height: 34px; font-size: 17px; } }
@media (min-width: 960px) { .sc-rep { padding: 34px 36px 34px 60px; } .sc-rep-holes { left: 22px; } }

/* every label on the swear jar is a bright one. */
.sv-jar .sv-q { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); }
.sv-jar .sv-q-sage { background: var(--palette-holly-300); color: var(--palette-greyscale-900); }
.sv-jar .sv-q-red { background: var(--palette-red-400); color: var(--palette-greyscale-900); }
.sv-jar .sv-q-bright { background: var(--palette-golden-500); color: var(--palette-greyscale-900); }
.sv-jar .sv-q-cream { background: var(--palette-greyscale-50); box-shadow: inset 0 0 0 2px var(--palette-greyscale-900); color: var(--palette-greyscale-900); }
.sv-jar .sv-q-ink { background: var(--palette-greyscale-900); color: var(--theme-accent); }
.sv-jar .sv-q-ink b { background: var(--theme-accent); color: var(--palette-greyscale-900); }
.sv-jar .sv-q b { background: var(--theme-accent-contrast); color: var(--theme-action-green-ink); }

/* the chips clear and light up on the dots' ten second loop. */
.sc-e-chips { display: grid; gap: 8px; width: 100%; }
.sc-e-chips ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sc-e-chips .sc-chip { padding: 5px 10px; font-size: 13px; }
.sc-chip-fr { opacity: 0.35; }
.sc-chip-ta { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); }
@media (prefers-reduced-motion: no-preference) {
  .sv-ready .sc-chip-fr { animation: sc-chip-fr 10s linear infinite both paused; }
  .sv-ready .sc-chip-ta { animation: sc-chip-ta 10s linear infinite both paused; }
  .sv-run .sc-chip-fr, .sv-run .sc-chip-ta { animation-play-state: running; }
}
@keyframes sc-chip-fr { 0%, 34% { opacity: 1; } 48%, 100% { opacity: 0.35; } }
@keyframes sc-chip-ta { 0%, 34% { background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); color: var(--sv-ink); } 48%, 100% { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); } }

/* AI-pilled nonsense: a dark band of loud quotes, then the reader's team, flat and calm. */
.sc-pill { display: grid; justify-items: center; gap: 28px; padding: clamp(24px, 5vw, 64px); border-radius: 20px; background: var(--palette-greyscale-900); }
.sc-pill .sv-copy { justify-items: center; text-align: center; }
.sc-pill .sv-h { color: var(--theme-action-green-ink); }
.sc-pill-you { display: grid; gap: 6px; width: min(100%, 560px); padding: 22px; border-radius: 16px; background: var(--palette-greyscale-50); font-size: 16px; line-height: 1.35; color: var(--palette-greyscale-900); text-align: center; }
.sc-pill-you p { margin: 0; }
.sc-pill-k { font-size: 14px; white-space: nowrap; opacity: 0.7; }
.sc-pill-b { font: 500 clamp(19px, 2.4vw, 24px)/1.2 var(--font-heading); }

/* The dial from Tuesday's directions: fine ticks, one hand, four stops. */
.sc-ring { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 1; }
.sc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sc-ring svg > line { stroke: var(--sv-flowline); stroke-width: 0.5; }
.sc-ring-hand line { stroke: var(--theme-action-green); stroke-width: 0.7; stroke-linecap: round; }
.sc-ring-hand circle { fill: var(--theme-action-green); }
.sc-ring .sc-ring-core { position: absolute; left: 50%; top: 50%; width: 34%; transform: translate(-50%, -50%); animation: none; }
.sc-ring-core img { height: auto; }
.sc-ring-s { position: absolute; z-index: 1; margin: 0; padding: 6px 10px; border-radius: 999px; background: var(--theme-surface); font: 500 13px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; transform: translate(-50%, -50%); }
.sc-ring-t { left: 50%; top: 13%; }
.sc-ring-r { left: 82%; top: 50%; }
.sc-ring-b { left: 50%; top: 87%; }
.sc-ring-l { left: 18%; top: 50%; }
.sc-ring-hand { transform-box: view-box; transform-origin: 50px 50px; }
@media (min-width: 640px) { .sc-ring-s { font-size: 15px; } }
@media (prefers-reduced-motion: no-preference) {
  .sc-ring-hand { animation: sc-hand 12s infinite; }
  .sc-ring-s { animation: sc-stop 12s linear infinite; animation-delay: calc(var(--k) * 3s - 12s); }
}
@keyframes sc-hand {
  0%, 18% { transform: rotate(0deg); }
  25%, 43% { transform: rotate(90deg); }
  50%, 68% { transform: rotate(180deg); }
  75%, 93% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}
@keyframes sc-stop {
  0%, 20% { background: var(--theme-accent); color: var(--theme-accent-contrast); }
  25%, 96% { background: var(--theme-surface); color: var(--sv-ink); }
  100% { background: var(--theme-accent); color: var(--theme-accent-contrast); }
}

/* the memo. */
.sc-t { display: grid; gap: 28px; }
.sc-t .sv-copy { order: -1; }
.sc-t-memo { display: grid; gap: 8px; min-width: 0; padding: 24px; border-radius: 6px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 26px var(--sv-shadow); font-size: 16px; line-height: 1.4; color: var(--sv-ink); transform: rotate(-1deg); }
.sc-t-meta { display: flex; gap: 12px; margin: 0; white-space: nowrap; }
.sc-t-meta span { width: 62px; color: var(--sv-muted); }
.sc-t-body { margin: 0; padding-top: 14px; font: 500 clamp(20px, 2.6vw, 26px)/1.25 var(--font-heading); }
.sc-t-sign { margin: 0; color: var(--sv-muted); }
@media (min-width: 960px) { .sc-t { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sc-t .sv-copy { order: 0; } .sc-t-memo { padding: 36px; } }

/* hidden work, as a window on Dana's laptop. Each row's state flips once to the repo. */
.sc-u { display: grid; gap: 28px; }
.sc-lap { display: grid; justify-items: center; gap: 14px; min-width: 0; }
.sc-lap-art { width: 100%; max-width: 520px; }
.sc-lap-art img { display: block; width: 100%; height: auto; }
.sc-lap-cap { display: grid; margin: 0; padding: 7px 14px; border-radius: 999px; background: var(--theme-sage-surface); font: 500 15px/1.2 var(--font-body); color: var(--sv-ink); text-align: center; white-space: nowrap; }
.sc-lap-st { display: grid; gap: 8px; width: 100%; max-width: 360px; margin: 0; padding: 0; list-style: none; }
.sc-lap-st li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--theme-sage-surface); font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; opacity: 0; transform: translateY(6px); }
.sc-lap-st b { padding: 4px 10px; border-radius: 999px; font-weight: 600; background: var(--theme-accent); color: var(--theme-accent-contrast); }
.sc-in .sc-lap-st li { opacity: 1; transform: none; transition: opacity 240ms ease-out calc(300ms + var(--n, 0) * 160ms), transform 240ms ease-out calc(300ms + var(--n, 0) * 160ms); }
.sc-in .sc-lap-st li:nth-child(2) { --n: 1; }
.sc-in .sc-lap-st li:nth-child(3) { --n: 2; }
@media (prefers-reduced-motion: reduce) { .sc-lap-st li { opacity: 1; transform: none; transition: none; } }
@media (min-width: 960px) { .sc-u { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 72px; } }

/* two bars per habit, one colour each. Outliers stay put in yellow; the team grows in green. */
.sv-bars li { gap: 4px; }
.sv-bars .sv-bar { height: 12px; }
.sv-bars .sv-bar::after { display: none; }
.sv-bars .sv-bar i { background: var(--theme-action-green); }
.sv-bars .sc-bar-out i, .sv-ready .sc-bar-out i, .sv-in .sc-bar-out i { background: var(--theme-accent); transform: scaleX(0.96); transition: none; }
.sv-bars .sv-key-team { background: var(--theme-action-green); }

/* The team as faces, on the same spots and loop as the dots. Red ring while just trying it, sage ring
   once it's daily, real work. */
.sc-faces { --cell: 34px; }
.sc-faces .sv-dot { background: var(--theme-action-green); }
.sc-faces .sv-dot img { display: block; position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; object-fit: cover; }
.sc-faces.sv-ready .sv-dot { animation-name: sc-face; }
.sc-faces.sv-ready .sv-dot-ahead { animation-name: sv-dot-ahead; }
@keyframes sc-face {
  0% { transform: translate(calc(var(--x0) * var(--cell)), calc(var(--y0) * var(--cell) * -1)); background: var(--palette-red-400); opacity: 0; }
  4%, 30% { transform: translate(calc(var(--x0) * var(--cell)), calc(var(--y0) * var(--cell) * -1)); background: var(--palette-red-400); opacity: 1; }
  58%, 92% { transform: translate(var(--x), var(--y)); background: var(--theme-action-green); opacity: 1; }
  98%, 100% { transform: translate(var(--x), var(--y)); background: var(--theme-action-green); opacity: 0; }
}
@media (min-width: 768px) { .sc-faces { --cell: 52px; } }

/* The wavy graph. */
.sc-gap-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.sc-gap-c { display: grid; justify-items: start; align-content: start; gap: 12px; min-width: 0; padding: 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-gap-c p { margin: 0; }
.sc-gap-c ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-gap-h { margin: 0; font: 500 clamp(20px, 2.4vw, 26px)/1.2 var(--font-heading); color: var(--sv-ink); }
.sc-gap-mid { display: grid; place-items: center; margin: 0; }
.sc-gap-mid span { padding: 5px 12px; border-radius: 999px; background: var(--theme-sage-surface); font: 500 13px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
@media (min-width: 768px) { .sc-gap-pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 24px; } .sc-gap-c { padding: 28px; } }
/* Problem page: pioneers and the rest of the team, as two rows of review marks. Same marks as the backlog card. */
.sc-split-card { display: grid; min-width: 0; padding: 4px 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-split-row { display: grid; gap: 12px; min-width: 0; padding-block: 20px; }
.sc-split-row + .sc-split-row { border-top: 1px solid var(--sv-line); }
.sc-split-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0; }
.sc-split-out { font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sc-split-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-split-chips .sc-chip { padding: 5px 10px; font-size: 13px; }
@media (min-width: 768px) { .sc-split-card { padding: 8px 28px; } .sc-split-row { padding-block: 24px; } }
.sc-climb-noise path { fill: none; stroke: var(--sv-flowline); stroke-width: 1; opacity: 0.4; }
.sc-wave { display: grid; gap: 28px; }
.sc-wave-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-wave-state { display: grid; place-items: center; min-height: 2.4em; margin: 0; font: 500 clamp(17px, 2vw, 20px)/1.2 var(--font-heading); text-align: center; text-wrap: balance; color: var(--sv-ink); }
.sc-wave-chart { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-width: 0; }
.sc-wave-main { display: grid; gap: 8px; min-width: 0; }
.sc-wave-y, .sc-wave-x { margin: 0; font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sc-wave-y { align-self: end; margin-bottom: 65px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; }
.sc-wave-x { text-align: right; }
.sc-wave-labels { position: relative; height: 62px; margin-top: -8px; }
.sc-wave-l { position: absolute; bottom: 0; left: 20%; padding: 5px 10px; border-radius: 999px; background: var(--palette-red-400); font: 500 13px/1.2 var(--font-body); color: var(--palette-greyscale-900); white-space: nowrap; transform: translateX(-50%); }
.sc-wave-l-ok { background: var(--palette-holly-300); }
.sc-wave-l-out { bottom: 32px; left: 86%; background: var(--theme-accent); color: var(--theme-accent-contrast); transform: translateX(-80%); }
/* Nov 11: with JS the labels sit on the curve itself: pill, a short line, a dot on the peak (Jaycee). */
.sc-wave-pinned .sc-wave-labels { height: 34px; }
.sc-wave-plot .sc-wave-l { --ax: 50%; bottom: auto; z-index: 1; transform: translate(calc(-1 * var(--ax)), calc(-100% - 18px)); }
.sc-wave-plot .sc-wave-l-out { --ax: 72%; }
.sc-wave-plot .sc-wave-l::before, .sc-wave-plot .sc-wave-l::after { content: ""; position: absolute; left: var(--ax); background: var(--sv-ink); }
.sc-wave-plot .sc-wave-l::before { top: 100%; width: 2px; height: 14px; margin-left: -1px; }
.sc-wave-plot .sc-wave-l::after { top: calc(100% + 13px); width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; }
.sc-wave-plot { position: relative; box-shadow: inset 0 -2px 0 var(--sv-ink), inset 2px 0 0 var(--sv-ink); }
.sc-wave-plot::before, .sc-wave-plot::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--sv-ink); }
.sc-wave-plot::before { top: -6px; left: -4px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sc-wave-plot::after { right: -6px; bottom: -4px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.sc-wave-plot svg { display: block; width: 100%; height: clamp(120px, 22vw, 190px); }
.sc-wave-area { fill: var(--theme-sage-surface); }
.sc-wave-line { fill: none; stroke: var(--theme-action-green); stroke-width: 3; stroke-linejoin: round; }
.sc-wave-ghost { fill: none; stroke: var(--sv-flowline); stroke-width: 2; stroke-dasharray: 4 5; }
@media (min-width: 960px) { .sc-wave { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sc-wave-card { padding: 28px; } }

/* The climb: everyone rises toward the top 10%, who keep rising. */
.sc-climb-plot { margin-top: 8px; }
.sc-climb-top { fill: none; stroke: var(--theme-accent-edge, var(--theme-accent)); stroke-width: 3; stroke-linejoin: round; }
.sc-climb-mark { position: absolute; left: 8px; top: calc(62.5% - 24px); font: 500 12px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; opacity: 0.7; }
.sc-climb-key { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; font: 500 13px/1.2 var(--font-body); color: var(--sv-ink); }
.sc-climb-key li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sc-climb-sw { width: 18px; height: 3px; border-radius: 2px; background: var(--theme-action-green); }
.sc-climb-sw-top { background: var(--theme-accent-edge, var(--theme-accent)); }
.sc-climb-card.sc-ready svg { clip-path: inset(0 100% 0 0); }
.sc-climb-card.sc-ready.sc-in svg { clip-path: inset(0 0 0 0); transition: clip-path 1400ms cubic-bezier(0.22, 1, 0.36, 1) 200ms; }
@media (prefers-reduced-motion: reduce) { .sc-climb-card.sc-ready svg { clip-path: none; } }

/* The backlog, before and after. Rejected PRs loop back onto the pile. */
.sc-jam { display: grid; gap: 28px; }
.sc-jam-pair { display: grid; gap: 16px; min-width: 0; }
.sc-jam-card { display: grid; gap: 12px; min-width: 0; padding: 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-jam-after { background: var(--theme-sage-surface); box-shadow: none; }
.sc-jam-h { margin: 0; font: 500 clamp(17px, 2vw, 20px)/1.2 var(--font-heading); color: var(--sv-ink); white-space: nowrap; }
.sc-jam-flow { position: relative; display: grid; gap: 8px; padding-right: 28px; }
.sc-jam-k { margin: 0; font: 500 13px/1.2 var(--font-body); color: var(--sv-muted); white-space: nowrap; }
.sc-jam-pile, .sc-jam-check { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sc-jam-pile { min-height: 50px; align-content: flex-end; }
.sc-jam-pile li { width: 18px; height: 18px; border-radius: 4px; background: var(--theme-accent); box-shadow: inset 0 -2px 0 var(--theme-accent-edge); }
.sc-jam-check li { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; font: 600 14px/1 var(--font-body); }
.sc-jam-good { background: var(--theme-action-green); color: var(--sv-card); }
.sc-jam-bad { background: var(--palette-red-400); color: var(--palette-greyscale-900); }
/* The loop: a dashed bracket from review back up to the pile. */
.sc-jam-loop { position: absolute; top: 34px; bottom: 14px; right: 4px; width: 16px; border: 2px dashed var(--palette-red-400); border-left: 0; border-radius: 0 12px 12px 0; }
.sc-jam-loop::before { content: ""; position: absolute; top: -6px; left: -8px; border: 5px solid transparent; border-right-color: var(--palette-red-400); }
.sc-jam-after .sc-jam-loop { border-color: var(--sv-flowline); opacity: 0.6; }
.sc-jam-after .sc-jam-loop::before { border-right-color: var(--sv-flowline); border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.sc-jam-note { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 14px/1.3 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sc-jam-arrow { color: var(--palette-red-400); font-size: 18px; }
.sc-jam-after .sc-jam-arrow { color: var(--theme-action-green); }
.sc-jam-out { justify-self: start; margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--sv-line); font: 500 13px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sc-jam-after .sc-jam-out { background: var(--theme-action-green); color: var(--sv-card); }
@media (min-width: 768px) { .sc-jam-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .sc-jam-card { padding: 28px; } }
/* One card beside its copy, for the problem-led story. */
.sc-jam-side .sc-jam-pair { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .sc-jam-side { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 72px; }
  .sc-jam-flipped { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .sc-jam-flipped .sv-copy { order: 1; }
}

/* Expensive outliers. */
.sc-spend { display: grid; gap: 28px; }
.sc-spend .sv-copy { order: -1; }
.sc-spend-card { display: grid; gap: 16px; min-width: 0; padding: 24px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-spend-card ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sc-spend-card li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 16px; color: var(--sv-ink); white-space: nowrap; }
.sc-spend-card b { font-weight: 500; font-variant-numeric: tabular-nums; }
.sc-spend-card i { grid-column: 1 / -1; width: var(--w); height: 14px; border-radius: 999px; background: var(--theme-accent); }
.sc-spend-w i { background: var(--palette-red-400); }
.sc-spend-n i { background: var(--sv-flowline); }
@media (min-width: 960px) { .sc-spend { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sc-spend .sv-copy { order: 0; } .sc-spend-card { padding: 32px; } }

/* Four copies of one skill. */
.sc-dup { display: grid; gap: 28px; }
.sc-dup-list { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sc-dup-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 14px 16px; border-radius: 14px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); color: var(--sv-ink); }
.sc-dup-list span { display: grid; gap: 2px; min-width: 0; font-size: 15px; }
.sc-dup-list b { font-weight: 500; }
.sc-dup-list code { font: 400 13px/1.3 ui-monospace, monospace; color: var(--sv-muted); }
.sc-dup-list em { font: 500 13px/1.2 var(--font-body); color: var(--sv-muted); white-space: nowrap; }
.sc-dup-list .sc-dup-good { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); }
.sc-dup-good code, .sc-dup-good em { color: inherit; }
@media (min-width: 960px) { .sc-dup { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 72px; } }

/* money in, PRs out. Everything rides over one isometric drawing, inside a stage that clips it so
   nothing can cause sideways scroll. */
.sc-pr { position: absolute; left: 0; top: 0; padding: 3px 6px; border-radius: 6px; background: var(--palette-greyscale-50); box-shadow: 0 2px 0 var(--palette-greyscale-900); font: 500 clamp(10px, 1.4vw, 14px)/1.1 var(--font-body); color: var(--palette-greyscale-900); white-space: nowrap; }
.sc-coin { position: absolute; left: 0; top: 0; width: clamp(12px, 2.4%, 20px); aspect-ratio: 1; border-radius: 50%; background: var(--theme-accent); box-shadow: inset 0 0 0 2px var(--theme-accent-edge); }

/* a till receipt with a torn edge. */
.sc-rc { display: grid; gap: 12px; min-width: 0; padding: 26px 22px 34px; background: var(--theme-sage-surface); clip-path: polygon(0 0, 100% 0, 100.00% 100%, 95.83% calc(100% - 8px), 91.67% 100%, 87.50% calc(100% - 8px), 83.33% 100%, 79.17% calc(100% - 8px), 75.00% 100%, 70.83% calc(100% - 8px), 66.67% 100%, 62.50% calc(100% - 8px), 58.33% 100%, 54.17% calc(100% - 8px), 50.00% 100%, 45.83% calc(100% - 8px), 41.67% 100%, 37.50% calc(100% - 8px), 33.33% 100%, 29.17% calc(100% - 8px), 25.00% 100%, 20.83% calc(100% - 8px), 16.67% 100%, 12.50% calc(100% - 8px), 8.33% 100%, 4.17% calc(100% - 8px), 0.00% 100%); font: 400 14px/1.35 ui-monospace, monospace; color: var(--sv-ink); }
.sc-rc-h { margin: 0; font-weight: 500; font-size: 18px; text-align: center; }
.sc-rc-sub { margin: 0; padding-bottom: 10px; border-bottom: 1px dashed var(--sv-ink); text-align: center; }
.sc-rc ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-rc li, .sc-rc-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.sc-rc b { font-weight: 400; font-variant-numeric: tabular-nums; }
.sc-rc-ship { font-weight: 700; }
.sc-rc-ship b { font-weight: 700; }
.sc-rc-total { margin: 0; padding: 10px 0; border-block: 1px dashed var(--sv-ink); font-size: 18px; font-weight: 500; }
.sc-rc-total b { font-weight: 500; }
.sc-rc-foot { margin: 0; text-align: center; }
@media (min-width: 960px) { .sc-rc { padding: 32px 36px 42px; font-size: 15px; transform: rotate(-1.5deg); } }
/* Two receipts: what the agents cost, then what Powerplant fixed. */
.sc-rc-pair { display: grid; gap: 20px; min-width: 0; }
.sc-rc-pair .sc-rc-h { font-size: 16px; white-space: nowrap; }
.sc-rc-fix { background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-rc-fix b { color: var(--theme-action-green); font-weight: 600; }
.sc-rc-fix .sc-rc-total b { color: var(--sv-ink); }
@media (min-width: 600px) { .sc-rc-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
@media (min-width: 960px) { .sc-rc-pair .sc-rc { padding: 28px 24px 38px; font-size: 14px; } .sc-rc-pair .sc-rc-fix { transform: rotate(1.5deg); margin-top: 24px; } }

/* the dark band's list of what got fixed. */
.sc-m-log ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sc-m-log li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sc-m-log b { padding: 3px 10px; border-radius: 999px; background: var(--theme-accent); font: 500 13px/1.3 var(--font-body); color: var(--theme-accent-contrast); white-space: nowrap; }
.sc-m-note { margin: 0; font-weight: 500; }

/* a real bingo card. Marked squares get a round dauber blot. */
/* Bingo, as a printed card after vintage bingo cards on Dribbble: card stock in the accent, a thick ink border,
   ruled cells, small print along the bottom. A tap leaves a dauber mark; a full line inks the cells. */
.sc-bg { display: grid; gap: 10px; min-width: 0; padding: 10px; border: 3px solid var(--palette-greyscale-900); border-radius: 10px; background: var(--theme-accent); box-shadow: 0 1px 1px var(--sv-shadow), 0 14px 28px var(--sv-shadow); color: var(--palette-greyscale-900); }
.sc-bg-h { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; font: 600 clamp(30px, 7vw, 48px)/1 var(--font-heading); text-align: center; }
.sc-bg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: 4px; background: var(--palette-greyscale-900); }
.sc-bg-c { position: relative; isolation: isolate; display: grid; place-items: center; align-content: center; gap: 2px; min-height: 64px; padding: 4px 3px; border: 0; border-radius: 1px; background: var(--palette-greyscale-50); font: 500 10.5px/1.15 var(--font-body); color: var(--palette-greyscale-900); text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.sc-bg-c::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 52px; height: 52px; max-width: 92%; aspect-ratio: 1; border-radius: 50%; background: var(--palette-red-400); opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-8deg); transition: opacity 120ms ease-out, transform 180ms cubic-bezier(0.22, 1, 0.36, 1); }
.sc-bg-c[aria-pressed="true"]::after { opacity: 0.55; transform: translate(-50%, -50%) rotate(-8deg); }
.sc-bg-c:focus-visible { outline: 2px solid var(--theme-action-green); outline-offset: -3px; }
.sc-bg-free { font-weight: 600; cursor: default; }
.sc-bg-free img { width: 18px; height: 18px; }
.sc-bg-free::after { display: none; }
.sc-bg-win { background: var(--palette-greyscale-900); color: var(--theme-accent); }
.sc-bg-win::after { display: none; }
.sc-bg-foot { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-inline: 2px; font: 500 11px/1.2 var(--font-body); white-space: nowrap; }
@media (min-width: 480px) { .sc-bg-c { font-size: 12px; } }
@media (min-width: 640px) { .sc-bg { gap: 12px; padding: 16px; border-width: 4px; } .sc-bg-c { min-height: 88px; padding: 8px; font-size: 13.5px; } .sc-bg-c::after { width: 72px; height: 72px; } .sc-bg-foot { font-size: 12px; } }

/* Nov 11: the card restyled after two bingo cards Jaycee liked: one strong colour with light squares, a title
   plate with a double line, and a ring stamp in a second ink that lands on top of the words. Not a copy of either. */
.sc-bg { --bg-card: var(--palette-golden-600); --bg-light: var(--palette-greyscale-50); --bg-ink: var(--palette-golden-900); --bg-stamp: var(--palette-holly-700); gap: 12px; padding: 14px; border: 0; border-radius: 22px; background: var(--bg-card); box-shadow: inset 0 0 0 5px var(--bg-card), inset 0 0 0 7px var(--palette-golden-300), 0 1px 1px var(--sv-shadow), 0 14px 28px var(--sv-shadow); color: var(--bg-light); }
.sc-bg-h { padding: 10px 6px; border-radius: 12px; background: var(--bg-light); box-shadow: inset 0 0 0 3px var(--bg-light), inset 0 0 0 5px var(--bg-card); font-weight: 700; color: var(--bg-ink); }
.sc-bg-grid { gap: 3px; padding: 0; overflow: hidden; border-radius: 10px; background: var(--bg-card); }
.sc-bg-c { border-radius: 0; background: var(--bg-light); color: var(--bg-ink); }
.sc-bg-c::after { z-index: 1; border: 3px solid var(--bg-stamp); background: transparent; box-shadow: inset 0 0 0 3px transparent, inset 0 0 0 5px var(--bg-stamp); mix-blend-mode: multiply; pointer-events: none; transform: translate(-50%, -50%) scale(1.3) rotate(-12deg); }
.sc-bg-c[aria-pressed="true"]::after { opacity: 0.85; transform: translate(-50%, -50%) rotate(-12deg); }
.sc-bg-c:nth-child(3n)[aria-pressed="true"]::after { transform: translate(-46%, -54%) rotate(9deg); }
.sc-bg-c:focus-visible { outline-color: var(--bg-stamp); }
.sc-bg-win { background: var(--bg-ink); color: var(--palette-golden-300); }
.sc-bg-foot { justify-content: center; gap: 20px; padding-bottom: 2px; font-weight: 600; letter-spacing: 0.04em; }
@media (min-width: 640px) { .sc-bg { gap: 14px; padding: 20px; border-radius: 28px; } .sc-bg-h { padding: 14px 10px; border-radius: 14px; } .sc-bg-grid { gap: 4px; } }

@media (prefers-reduced-motion: reduce) { .sc-lap-cap, .sc-lap-cap span, .sc-bg-c::after { transition: none; } }

/* Leveling up: evolution and the block */
.sc-evo, .sc-block { display: grid; gap: 24px; }
.sc-evo-card { display: flex; align-items: flex-end; min-width: 0; padding: 20px 10px; border-radius: 20px; background: var(--theme-sage-surface); }
.sc-evo-card img { flex: 1 1 0; min-width: 0; height: auto; margin-left: -3%; }
.sc-evo-card img:first-child { margin-left: 0; }
.sc-evo-card.sc-ready img { opacity: 0; transform: translateY(12px); }
.sc-evo-card.sc-ready.sc-in img { opacity: 1; transform: none; transition: opacity 280ms ease-out calc(var(--i) * 220ms), transform 280ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 220ms); }
.sc-block-card { display: grid; justify-items: center; padding: 20px; border-radius: 20px; background: var(--theme-sage-surface); }
.sc-block-scene { position: relative; width: min(100%, 380px); aspect-ratio: 360 / 520; }
.sc-block-scene img { position: absolute; height: auto; }
.sc-block-plate, .sc-block-dev { bottom: 0; left: 14%; width: 72%; }
.sc-block-box { top: 23.5%; left: 27%; width: 46%; }
.sc-block-star { top: 26%; left: 37%; width: 26%; opacity: 0; }
.sc-run .sc-block-dev { animation: sc-dev-jump 3.6s linear infinite; }
.sc-run .sc-block-box { animation: sc-box-hit 3.6s linear infinite; }
.sc-run .sc-block-star { animation: sc-star-out 3.6s linear infinite; }
@keyframes sc-dev-jump {
  0%, 12% { transform: none; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  22% { transform: translateY(-21%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  34%, 100% { transform: none; }
}
@keyframes sc-box-hit {
  0%, 22% { transform: none; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  27% { transform: translateY(-10%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  34%, 100% { transform: none; }
}
@keyframes sc-star-out {
  0%, 22% { opacity: 0; transform: scale(0.7); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  24% { opacity: 1; }
  40% { opacity: 1; transform: translateY(-117%) scale(1.14); animation-timing-function: ease-in-out; }
  50%, 88% { opacity: 1; transform: translateY(-112%); }
  96%, 100% { opacity: 0; transform: translateY(-112%); }
}
@media (prefers-reduced-motion: reduce) {
  .sc-run .sc-block-dev, .sc-run .sc-block-box, .sc-run .sc-block-star { animation: none; }
  .sc-block-star { opacity: 1; transform: translateY(-112%); }
}

/* Headline clippings: real screenshots, cut out and thrown on the band. */
.sc-clips { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; justify-items: center; max-width: 1040px; margin: 0; padding: 0; list-style: none; }
.sc-clips li { display: grid; justify-items: start; gap: 4px; width: min(100%, 420px); min-width: 0; }
.sc-clips li:nth-child(odd) { transform: rotate(-1.6deg); }
.sc-clips li:nth-child(even) { transform: rotate(1.2deg); }
.sc-clips li:nth-child(3n) { transform: rotate(-0.6deg); }
.sc-clips img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px var(--sv-shadow)); }
.sc-clips span { padding-left: 8px; font-size: 13px; color: var(--theme-action-green-ink); opacity: 0.7; white-space: nowrap; }
@media (min-width: 720px) {
  .sc-clips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
  .sc-clips li { width: 440px; }
  .sc-clips li:nth-child(1), .sc-clips li:nth-child(3) { width: 500px; }
  .sc-clips li:nth-child(5), .sc-clips li:nth-child(6) { width: 300px; }
}


.sc-t-sig { display: block; width: auto; height: 72px; margin-top: 2px; }
.sc-t-sent { margin: 4px 0 0; font-size: 13px; color: var(--sv-muted); white-space: nowrap; }

/* Codebase: the dig site. Labels sit on the layers and appear top down. */
.sc-dig { display: grid; gap: 24px; }
.sc-dig-art { position: relative; justify-self: center; width: min(100%, 420px); }
.sc-dig-art img { display: block; width: 100%; height: auto; }
.sc-dig-l { position: absolute; top: var(--y); left: 0; display: flex; gap: 6px; margin: 0; padding: 5px 10px; border-radius: 999px; background: var(--palette-greyscale-50); font: 500 13px/1.2 var(--font-body); color: var(--palette-greyscale-900); white-space: nowrap; box-shadow: 0 2px 6px var(--sv-shadow); }
.sc-dig-l b { font-weight: 500; color: var(--sv-muted); }
.sc-dig-art.sc-ready .sc-dig-l { opacity: 0; transform: translateY(6px); }
.sc-dig-art.sc-ready.sc-in .sc-dig-l { opacity: 1; transform: none; transition: opacity 240ms ease-out calc(var(--i) * 260ms + 200ms), transform 240ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 260ms + 200ms); }

/* One story down the page. One section gap everywhere: see Spacing in CLAUDE.md. */
:root:has(.sc-story) { --section-gap: 72px; }
@media (min-width: 768px) { :root:has(.sc-story) { --section-gap: 96px; } }
@media (min-width: 1100px) { :root:has(.sc-story) { --section-gap: 128px; } }
/* Story headlines are h2s, so hold their own type and colour against .vpage h2. */
.sv .sv-h { font: 500 clamp(28px, 4.2vw, 46px)/1.1 var(--font-heading); }
.sv .sv-h > span { color: inherit; }
.sc-story { gap: var(--section-gap); }
.sc-act { display: contents; }
.sc-sol, .sc-bottom { display: grid; gap: var(--section-gap); min-width: 0; margin: 0; padding: 0; }
.sv.sc-story { margin-block: var(--section-gap) 0; }
.st.sc-bottom { margin-top: var(--section-gap); }
main:has(.sc-story) { padding-bottom: 0; }
main:has(.sc-story) > .fw-extension { margin-top: var(--section-gap); }
.vpage:has(.sc-story) footer.ft { margin-top: var(--section-gap); }
.sc-sol > .st-beat, .sc-bottom > .st-beat { margin: 0; }
.sc-story .sv-flow { margin-top: 0; }
.sc-story .sc-act > article > .sv-copy { order: -1; }
@media (min-width: 960px) {
  .sc-story .sc-act > article:not(.sc-wide) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 72px; }
  .sc-story .sc-act > article:not(.sc-wide) > .sv-copy { justify-items: start; text-align: left; }
  .sc-story .sc-act > article.sc-flip > .sv-copy { order: 2; }
}

/* The machine film in the hero. Multiply drops the film's white page in light mode. */
.sc-hero-film { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; mix-blend-mode: multiply; filter: brightness(1.016); }
:root[data-theme="dark"] .sc-hero-film { mix-blend-mode: normal; border-radius: 20px; }

/* The graph's key: what each hump has, then one line once Powerplant has acted. */
.sc-wave-key { display: grid; min-width: 0; padding-top: 6px; }
.sc-wave-key > * { grid-area: 1 / 1; }
.sc-wave-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-wave-cols > div { display: grid; justify-items: start; align-content: start; gap: 8px; min-width: 0; }
.sc-wave-cols > div:last-child { justify-items: end; text-align: right; }
.sc-wave-cols ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.3; color: var(--sv-ink); white-space: nowrap; }
.sc-wave-kh { margin: 0; padding: 4px 10px; border-radius: 999px; font: 500 13px/1.2 var(--font-body); color: var(--palette-greyscale-900); white-space: nowrap; }
.sc-wave-fr { background: var(--palette-red-400); }
.sc-wave-ta { background: var(--theme-accent); color: var(--theme-accent-contrast); }
.sc-wave-done { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font: 500 clamp(15px, 2vw, 18px)/1.2 var(--font-heading); color: var(--sv-ink); white-space: nowrap; opacity: 0; }

/* People: the messages from the Nov 3 poof. They share one grid cell with the fix they turn into. */
.sc-poof { display: grid; justify-items: center; gap: 28px; }
.sc-poof .sv-copy { justify-items: center; text-align: center; }
.sc-poof-stage { display: grid; width: min(100%, 720px); }
.sc-msgs { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sc-msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 10px; align-items: center; justify-self: start; max-width: 100%; padding: 8px 16px 8px 8px; border-radius: 18px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 6px 16px var(--sv-shadow); text-align: left; }
.sc-msg > img { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.sc-msg span { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--sv-muted); }
.sc-msg b { font-weight: 500; color: var(--sv-ink); }
.sc-msg q { font-size: 16px; line-height: 1.35; color: var(--sv-ink); }
.sc-msg:nth-child(even) { justify-self: end; }
.sc-poof-fix { display: grid; justify-items: start; gap: 12px; width: min(100%, 440px); margin-top: 24px; justify-self: center; padding: 20px 22px; border-radius: 16px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 14px 34px var(--sv-shadow); text-align: left; }
.sc-poof-h { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 16px/1.3 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sc-poof-d { display: none; font: 13px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sv-muted); }
.sc-poof-d ins { color: var(--theme-action-green); text-decoration: none; }
.sc-poof-d del { color: var(--palette-red-400); text-decoration: none; }
.sc-poof-by { margin: 0; font-size: 16px; line-height: 1.45; color: var(--sv-ink); }
.sc-poof-faces { display: flex; margin: 0; }
.sc-poof-faces img { position: relative; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--sv-card); }
.sc-poof-faces img + img { margin-left: -8px; }
.sc-poof-js .sc-msgs, .sc-poof-js .sc-poof-fix { grid-area: 1 / 1; }
.sc-poof-js .sc-poof-fix { align-self: center; margin-top: 0; opacity: 0; transform: scale(0.8); transition: opacity 450ms ease-out 350ms, transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 350ms; }
.sc-poof-js .sc-msg { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 350ms ease-out, transform 500ms cubic-bezier(0.16, 1, 0.3, 1); }
.sc-poof-js .sc-msg.sc-in { opacity: 1; transform: none; }
.sc-poof-js.sc-merge .sc-msg { opacity: 0; filter: blur(6px); transform: translate(var(--dx), var(--dy)) scale(0.3); transition: opacity 500ms ease-out 150ms, filter 500ms ease-out, transform 600ms cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i) * 50ms); }
.sc-poof-js.sc-merge .sc-poof-fix { opacity: 1; transform: none; }
@media (min-width: 360px) { .sc-poof-d { display: inline; } }
@media (min-width: 768px) { .sc-msgs { gap: 14px; } .sc-msg:nth-child(odd) { margin-left: 4%; } .sc-msg:nth-child(even) { margin-right: 4%; } .sc-msg:nth-child(3) { justify-self: center; margin-left: 0; } }

/* These logos are white files, so darken them on the light theme. */
:root:not([data-theme="dark"]) .sc-poof-h img, :root:not([data-theme="dark"]) .sc-msg img[src*="cursor"], :root:not([data-theme="dark"]) .sc-msg img[src*="openai"] { filter: brightness(0); }

/* Codebase: the ending, the same ground with the fossils gone. */
.sc-future { display: grid; gap: 24px; padding: clamp(24px, 5vw, 64px); border-radius: 20px; background: var(--theme-sage-surface); }
.sc-future .sv-copy { order: -1; }
.sc-future-art { width: min(100%, 520px); }
@media (min-width: 960px) { .sc-future { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 56px; } .sc-future-art { justify-self: end; } }

/* The homepage's closing sections under each story. */

/* People: getting ICs on board, as glass stacks. */
.sc-t-sig-wide { height: 56px; }
.sc-stack { display: grid; gap: 24px; }
.sc-stack-art { width: min(100%, 520px); }

/* People: the award. Film festival laurels on a dark band, after FM's award set on Dribbble and Mural's awards card. */
.sc-award { display: grid; gap: 28px; }
.sc-award .sv-copy { justify-items: center; text-align: center; }
.sc-aw-card { display: grid; justify-items: center; gap: 20px; min-width: 0; padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 48px); border-radius: 20px; background: var(--palette-greyscale-900); color: var(--theme-action-green-ink); }
.sc-aws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: 12px; width: 100%; max-width: 980px; }
.sc-aw { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px; width: 100%; max-width: 340px; aspect-ratio: 1; padding: 20%; text-align: center; }
.sc-aw > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-aw p { position: relative; margin: 0; }
.sc-aw-main { grid-column: 1 / -1; order: -1; max-width: 300px; }
.sc-aw-side { padding: 23%; }
.sc-aw-side .sc-aw-k { display: none; }
.sc-aw-side .sc-aw-t { font-size: clamp(12px, 3.6vw, 16px); }
.sc-aw-k { font-size: 12px; white-space: nowrap; color: var(--theme-accent); }
.sc-aw-t { font: 500 clamp(15px, 4.4vw, 18px)/1.1 var(--font-heading); text-wrap: balance; }
.sc-aw-main .sc-aw-t { font-size: clamp(22px, 6.4vw, 30px); }
.sc-aw-n code { font: 500 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--theme-accent); }
.sc-aw-cap { margin: 0; font: 500 clamp(15px, 2vw, 18px)/1.3 var(--font-heading); text-align: center; text-wrap: balance; }
.sc-aw-card.sc-ready .sc-aw { opacity: 0; scale: 0.94; }
.sc-aw-card.sc-ready.sc-in .sc-aw { opacity: 1; scale: 1; transition: opacity 320ms ease-out calc(var(--i) * 260ms), scale 460ms cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 260ms); }
@media (min-width: 768px) {
  .sc-aws { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 0; }
  .sc-aw-main { grid-column: auto; order: 0; max-width: 360px; }
  .sc-aw-side { max-width: 250px; padding: 20%; }
  .sc-aw-side .sc-aw-k { display: block; }
  .sc-aw-side .sc-aw-t { font-size: clamp(14px, 1.6vw, 20px); }
}

/* People: the swear jar again. The swears blur out the way TV bleeps them, the wins stay sharp. */
.sc-red { display: inline-flex; align-items: baseline; gap: 0.4em; }
.sc-red small { font: 500 13px/1 var(--font-body); opacity: 0.75; }
.sv-jar .sc-q-win { background: var(--palette-holly-300); color: var(--palette-greyscale-900); font-size: clamp(18px, 2.4vw, 24px); }
.sc-swear.sc-in .sc-red { filter: blur(0.32em); user-select: none; }
.sc-swear.sc-ready.sc-in .sc-red { transition: filter 420ms ease-out calc(1000ms + var(--i) * 150ms); }
.sc-swear.sc-ready .sc-q-win { opacity: 0; scale: 0.9; }
.sc-swear.sc-ready.sc-in .sc-q-win { opacity: 1; scale: 1; transition: opacity 280ms ease-out calc(1900ms + var(--i) * 180ms), scale 380ms cubic-bezier(0.22, 1, 0.36, 1) calc(1900ms + var(--i) * 180ms); }

/* Problem page: the bounce card. One big number, six PRs through review; the rejected ones hop back once, on
   scroll in. Before is a card on the page, after sits on sage. */
.sc-b { display: grid; gap: 14px; min-width: 0; padding: 24px 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 26px var(--sv-shadow); color: var(--sv-ink); }
.sc-b-after { background: var(--theme-sage-surface); box-shadow: none; }
.sc-b p, .sc-b ul { margin: 0; }
.sc-b-k { font: 500 14px/1.2 var(--font-body); color: var(--sv-muted); white-space: nowrap; }
.sc-b-big { display: grid; gap: 2px; }
.sc-b-big b { font: 500 clamp(48px, 9vw, 72px)/1 var(--font-heading); letter-spacing: -0.02em; white-space: nowrap; }
.sc-b-big span { font: 500 16px/1.2 var(--font-body); white-space: nowrap; }
.sc-b-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 18px 0 4px; list-style: none; }
.sc-b-row li { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 5; border-radius: 8px; background: var(--theme-surface); box-shadow: inset 0 0 0 1.5px var(--palette-greyscale-900); font: 600 13px/1 var(--font-body); }
.sc-b-row i { position: absolute; top: -9px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: normal 600 12px/1 var(--font-body); }
.sc-b-ok i { background: var(--theme-action-green); color: var(--sv-card); }
.sc-b-no { background: color-mix(in srgb, var(--palette-red-400) 22%, var(--theme-surface)); }
.sc-b-no i { background: var(--palette-red-400); color: var(--palette-greyscale-900); }
.sc-b-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--sv-line); font: 500 14px/1.2 var(--font-body); color: var(--sv-muted); white-space: nowrap; }
@media (min-width: 640px) { .sc-b { padding: 28px; } .sc-b-row { gap: 12px; } .sc-b-row li { font-size: 15px; } }
@media (prefers-reduced-motion: no-preference) {
  .sc-in.sc-b .sc-b-no { animation: sc-b-hop 700ms cubic-bezier(0.25, 1, 0.5, 1) both; animation-delay: calc(300ms + var(--i) * 120ms); }
}
@keyframes sc-b-hop { 0% { transform: none; } 45% { transform: translate(-6px, -14px) rotate(-8deg); } 100% { transform: translate(-2px, 0) rotate(-4deg); } }

/* Problem page: one receipt, the after one, with the old prices struck through. After real thermal receipts on
   Dribbble and order summaries on Mobbin: logo, meta, a barcode, a torn edge and a real cast shadow. */
.sc-bill { display: grid; gap: 12px; width: min(100%, 360px); padding: 26px 22px 36px; background: var(--sv-card); clip-path: polygon(0 0, 100% 0, 100% 100%, 95.83% calc(100% - 7px), 91.67% 100%, 87.5% calc(100% - 7px), 83.33% 100%, 79.17% calc(100% - 7px), 75% 100%, 70.83% calc(100% - 7px), 66.67% 100%, 62.5% calc(100% - 7px), 58.33% 100%, 54.17% calc(100% - 7px), 50% 100%, 45.83% calc(100% - 7px), 41.67% 100%, 37.5% calc(100% - 7px), 33.33% 100%, 29.17% calc(100% - 7px), 25% 100%, 20.83% calc(100% - 7px), 16.67% 100%, 12.5% calc(100% - 7px), 8.33% 100%, 4.17% calc(100% - 7px), 0 100%); font: 400 13px/1.35 ui-monospace, "SF Mono", Menlo, monospace; color: var(--palette-greyscale-900); font-variant-numeric: tabular-nums; }
.sc-bill p, .sc-bill ul { margin: 0; }
.sc-bill-logo { display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 20px/1.1 var(--font-heading); white-space: nowrap; }
.sc-bill-meta { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--palette-greyscale-900); opacity: 0.7; white-space: nowrap; }
.sc-bill ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.sc-bill li, .sc-bill-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.sc-bill-p { display: grid; justify-items: end; gap: 1px; white-space: nowrap; }
.sc-bill-p s { font-size: 0.86em; }
.sc-bill s { position: relative; text-decoration: none; opacity: 0.5; }
.sc-bill s::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 1.5px; background: var(--palette-red-400); transform-origin: left; }
.sc-bill b { font-weight: 500; }
.sc-bill-ship, .sc-bill-ship b { font-weight: 700; }
.sc-bill-total { padding-block: 12px; border-block: 1px dashed var(--palette-greyscale-900); font-size: 15px; font-weight: 600; }
.sc-bill-total b { font-weight: 700; }
.sc-bill-saved { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 4px; background: var(--theme-accent); color: var(--theme-accent-contrast); font-weight: 600; white-space: nowrap; }
.sc-bill-foot { text-align: center; }
.sc-bill-bars { display: flex; justify-content: center; align-items: stretch; gap: 2px; height: 40px; }
.sc-bill-bars i { flex: none; width: calc(var(--w) * 1.5px); background: var(--palette-greyscale-900); }
/* The torn edge is a clip-path, which would clip a shadow on the paper itself, so the wrapper casts it:
   a hairline edge, a contact shadow and a soft drop, so the paper lifts off the near-white page. */
.sc-bill-wrap { justify-self: center; width: min(100%, 380px); min-width: 0; filter: drop-shadow(0 0 0.5px color-mix(in srgb, var(--palette-greyscale-900) 35%, transparent)) drop-shadow(0 2px 3px color-mix(in srgb, var(--palette-greyscale-900) 12%, transparent)) drop-shadow(0 18px 28px color-mix(in srgb, var(--palette-greyscale-900) 14%, transparent)); }
.sc-bill-wrap .sc-bill { width: 100%; }
@media (min-width: 960px) { .sc-bill { padding: 32px 30px 42px; font-size: 14px; } .sc-bill-wrap { transform: rotate(-1.5deg); } }
@media (prefers-reduced-motion: no-preference) {
  .sc-ready.sc-bill s::after { transform: scaleX(0); }
  .sc-ready.sc-bill b { opacity: 0; }
  .sc-in.sc-bill s::after { transform: none; transition: transform 260ms cubic-bezier(0.65, 0, 0.35, 1) var(--d); }
  .sc-in.sc-bill li b, .sc-in.sc-bill .sc-bill-total b { opacity: 1; transition: opacity 200ms ease-out calc(var(--d) + 220ms); }
  .sc-in.sc-bill .sc-bill-saved b { opacity: 1; transition: opacity 200ms ease-out 2100ms; }
}
@media (max-width: 959px) { .sc-story .sc-jam { grid-template-columns: minmax(0, 1fr); } }
.sc-bill-a { display: grid; gap: 28px; min-width: 0; }

/* Report card, as a real school card: crest and school line, ruled grade table with before and now columns, pen
   grades, a comment box. Grades in the now column land one by one on scroll in. */
.sc-rep-school { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--palette-greyscale-900); font: 600 13px/1.2 var(--font-body); white-space: nowrap; }
.sc-rep-real .sc-rep-h { text-align: center; }
.sc-rep-real .sc-rep-meta { justify-content: center; border-bottom: 0; padding-bottom: 0; }
.sc-rep-t { width: 100%; border-collapse: collapse; font-size: 15px; }
.sc-rep-t th { padding: 6px 8px; border: 1px solid var(--palette-greyscale-900); background: var(--theme-sage-surface); font: 600 12px/1.2 var(--font-body); text-align: left; white-space: nowrap; }
.sc-rep-t th + th, .sc-rep-t td + td { width: 64px; text-align: center; }
.sc-rep-t td { padding: 6px 8px; border: 1px solid var(--palette-greyscale-900); }
.sc-rep-t b { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: italic 500 18px/1 var(--font-heading); transform: rotate(-6deg); }
.sc-rep-t .sc-g-hi { box-shadow: none; }
.sc-rep-box { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--palette-greyscale-900); }
.sc-rep-box .sc-rep-k, .sc-rep-box .sc-rep-c { margin: 0; }
@media (max-width: 479px) { .sc-rep-t { font-size: 13.5px; } .sc-rep-t td, .sc-rep-t th { padding: 5px 6px; } .sc-rep-t th + th, .sc-rep-t td + td { width: 48px; } .sc-rep-t b { width: 30px; height: 30px; font-size: 15px; } }
.sc-rep-t .sv-after { opacity: 0; transform: rotate(-6deg) scale(1.4); }
.sc-in .sc-rep-t .sv-after { opacity: 1; transform: rotate(-6deg); transition: opacity 200ms ease-out var(--d), transform 220ms cubic-bezier(0.22, 1, 0.36, 1) var(--d); }

/* Go faster: two lanes to merged. The pioneers' PR runs straight through; everyone else's hits the friction and
   bounces back to the start. Plays once on scroll in. */
.sc-lanes { display: grid; gap: 24px; min-width: 0; padding: 22px 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 26px var(--sv-shadow); }
.sc-lane { display: grid; gap: 12px; min-width: 0; }
.sc-lane-k { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.sc-lane-out { font: 500 14px/1.2 var(--font-body); color: var(--sv-muted); white-space: nowrap; }
.sc-lane-track { position: relative; height: 52px; border-radius: 12px; background: var(--theme-surface); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sc-lane-track::before { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; border-top: 2px dashed var(--sv-flowline); }
.sc-lane-pr { position: absolute; z-index: 2; left: 8px; top: 50%; display: grid; place-items: center; width: 44px; height: 36px; border-radius: 8px; background: var(--theme-accent); box-shadow: inset 0 -3px 0 var(--theme-accent-edge); font: 600 13px/1 var(--font-body); color: var(--theme-accent-contrast); transform: translateY(-50%); }
.sc-lane-end { position: absolute; right: 8px; top: 50%; padding: 6px 10px; border-radius: 999px; background: var(--theme-action-green); font: 500 13px/1.2 var(--font-body); color: var(--sv-card); white-space: nowrap; transform: translateY(-50%); }
.sc-lane-bump { position: absolute; z-index: 1; left: var(--x); top: 50%; padding: 5px 9px; border-radius: 6px; background: var(--palette-red-400); font: normal 500 12px/1.2 var(--font-body); color: var(--palette-greyscale-900); white-space: nowrap; transform: translate(-50%, -50%) rotate(-3deg); }
.sc-lane-wide { display: none; }
.sc-lane-team { --hit: calc(52% - 86px); }
.sc-lane-team .sc-lane-bump:first-of-type { left: 52%; }
@media (min-width: 560px) { .sc-lane-team { --hit: calc(30% - 84px); } .sc-lane-wide { display: block; } .sc-lane-team .sc-lane-bump:first-of-type { left: var(--x); } }
@media (min-width: 640px) { .sc-lanes { padding: 28px; gap: 28px; } }
@media (prefers-reduced-motion: no-preference) {
  .sc-in .sc-lane-pi .sc-lane-pr { animation: sc-lane-go 1.6s cubic-bezier(0.65, 0, 0.35, 1) 400ms both; }
  .sc-in .sc-lane-team .sc-lane-pr { animation: sc-lane-back 2s cubic-bezier(0.65, 0, 0.35, 1) 400ms both; }
}
@keyframes sc-lane-go { from { left: 8px; } to { left: calc(100% - 52px - 76px); } }
@keyframes sc-lane-back { 0% { left: 8px; } 45% { left: var(--hit); transform: translateY(-50%); } 55% { transform: translateY(-80%) rotate(-10deg); } 100% { left: 8px; transform: translateY(-50%) rotate(-4deg); } }

/* Flow labels: the long "Powerplant finds the bottleneck" on wider screens, "Finds the bottleneck" on phones. */
.fl-t .fl-narrow { display: none; }
@media (max-width: 399px) { .fl-t .fl-wide { display: none; } .fl-t .fl-narrow { display: inline; } }

/* Nov 11: the bingo as a paper slip, after Jaycee's third reference: zigzag cut top and bottom, on an angle. */
.sc-bg { position: relative; isolation: isolate; padding-block: 24px 22px; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 1px 1px var(--sv-shadow)) drop-shadow(0 14px 22px var(--sv-shadow)); }
.sc-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg-card); clip-path: polygon(0.00% 0, 4.55% 7px, 9.09% 0, 13.64% 7px, 18.18% 0, 22.73% 7px, 27.27% 0, 31.82% 7px, 36.36% 0, 40.91% 7px, 45.45% 0, 50.00% 7px, 54.55% 0, 59.09% 7px, 63.64% 0, 68.18% 7px, 72.73% 0, 77.27% 7px, 81.82% 0, 86.36% 7px, 90.91% 0, 95.45% 7px, 100.00% 0, 100.00% 100%, 95.45% calc(100% - 7px), 90.91% 100%, 86.36% calc(100% - 7px), 81.82% 100%, 77.27% calc(100% - 7px), 72.73% 100%, 68.18% calc(100% - 7px), 63.64% 100%, 59.09% calc(100% - 7px), 54.55% 100%, 50.00% calc(100% - 7px), 45.45% 100%, 40.91% calc(100% - 7px), 36.36% 100%, 31.82% calc(100% - 7px), 27.27% 100%, 22.73% calc(100% - 7px), 18.18% 100%, 13.64% calc(100% - 7px), 9.09% 100%, 4.55% calc(100% - 7px), 0.00% 100%); }
@media (min-width: 640px) { .sc-bg { padding-block: 30px 28px; border-radius: 0; transform: rotate(-2deg); } }

/* Nov 11: the report card after her school report card reference: hand-lettered title (a generated image, the
   words stay in the markup), filled table headers, ruled lines for the name fields. */
.sc-rep-real { --rep-ink: var(--palette-holly-700); --rep-hot: var(--palette-golden-600); }
.sc-rep-real .sc-rep-school { justify-content: flex-start; padding-bottom: 0; border-bottom: 0; color: var(--rep-ink); }
/* Nov 11: Stack Sans only, no script lettering. The title is big and tight, and may run over the name fields. */
.sc-rep-real .sc-rep-h { position: relative; z-index: 1; margin: 0 0 -10px; color: var(--rep-hot); font: 600 clamp(44px, 13vw, 76px)/0.8 var(--font-heading); letter-spacing: -0.03em; text-align: left; white-space: nowrap; }
.sc-rep-real .sc-rep-meta { justify-content: flex-start; gap: 8px 20px; }
.sc-rep-real .sc-rep-meta dt { font-weight: 600; color: var(--rep-hot); opacity: 1; }
.sc-rep-real .sc-rep-meta dd { padding: 0 10px 1px 4px; border-bottom: 2px solid var(--rep-hot); }
.sc-rep-real .sc-rep-t th { padding: 8px; border-color: var(--rep-ink); background: var(--rep-ink); color: var(--palette-greyscale-50); }
.sc-rep-real .sc-rep-t td, .sc-rep-real .sc-rep-box { border-color: var(--rep-ink); }
.sc-rep-real .sc-rep-box .sc-rep-k { font-weight: 600; color: var(--rep-hot); opacity: 1; }

/* Nov 11: the problem opener is a centred headline over a fan of PR cards, each card one pull request (Jaycee,
   after a three-card fan she liked). On phones the three sit in one stack. */
.sc-story .sc-act > .sc-jam-mid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 36px; text-align: center; }
.sc-jam-mid .sv-copy { display: grid; justify-items: center; max-width: 820px; }
.sc-fan { display: grid; justify-items: center; width: 100%; padding: 8px 0 28px; }
.sc-fan-c { grid-area: 1 / 1; display: grid; gap: 12px; width: min(70%, 250px); padding: 16px; border-radius: 18px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 12px 26px var(--sv-shadow); color: var(--sv-ink); text-align: left; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); }
.sc-fan-c:nth-child(1) { --x: -12%; --y: 10px; --r: -7deg; }
.sc-fan-c:nth-child(2) { z-index: 2; --r: -1deg; }
.sc-fan-c:nth-child(3) { --x: 12%; --y: 16px; --r: 6deg; }
.sc-fan-top { display: flex; align-items: center; gap: 8px; margin: 0; font: 500 13px/1 var(--font-body); color: var(--sv-muted); white-space: nowrap; }
.sc-fan-t { margin: 0; font: 500 17px/1.25 var(--font-heading); }
.sc-fan-st { justify-self: start; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--palette-red-400) 32%, var(--sv-card)); font: 600 13px/1.2 var(--font-body); color: var(--palette-greyscale-900); white-space: nowrap; }
.sc-fan-ok .sc-fan-st { background: var(--palette-holly-300); }
/* The Codex and Cursor marks are pale files made for dark pages. On the light theme they get the same darkening
   the "Works in" row uses, or they vanish on the white card. */
[data-theme="light"] .sc-fan-top img:not([src*="claude"]) { filter: brightness(0.2); }
@media (min-width: 720px) {
  .sc-fan { display: flex; justify-content: center; padding-bottom: 40px; }
  .sc-fan-c { width: 260px; margin-inline: -10px; padding: 20px; }
  .sc-fan-c:nth-child(1) { --x: 0px; --y: 26px; }
  .sc-fan-c:nth-child(3) { --x: 0px; --y: 30px; }
  .sc-fan-t { font-size: 19px; }
}

/* Nov 11: the report card is Jaycee's Figma card as one picture. It already sits on an angle, so no extra tilt. */
.sc-rep-img { display: block; width: 100%; max-width: 520px; height: auto; justify-self: center; margin-inline: auto; filter: drop-shadow(0 14px 26px var(--sv-shadow)); }

/* Nov 11: the PR cards in 3D (public/pr-cards-3d.js). The script adds .sc-fan3d once three.js has loaded; the
   still fan stays everywhere else. Each card's result shows only after review has seen it. */
.sc-fan.sc-fan3d { display: block; position: relative; width: 100%; max-width: 900px; margin-inline: auto; }
.sc-fan.sc-fan3d > div { position: absolute; inset: 0; }
.sc-fan.sc-fan3d .sc-fan-c { margin: 0; inset: auto; }
.sc-fan.sc-fan3d .sc-fan-st { opacity: 0; transition: opacity 180ms ease-out; }
.sc-fan.sc-fan3d .is-judged .sc-fan-st { opacity: 1; }
.sc-bill s { display: none; }

/* Nov 11: fewer boxes. On the problem page the graph sits straight on the page, no white card or outline. */
.sc-story:has(.sc-lp) .sc-wave-card { background: transparent; box-shadow: none; }

/* Nov 11: the tappable bingo, dressed like the Figma card: a darker zigzag backing shows as a hard edge below
   and to the right, and from 640px the slip leans the opposite way to the report card. */
.sc-bg-figma { filter: drop-shadow(5px 9px 0 var(--palette-golden-800)); }
@media (min-width: 640px) { .sc-bg.sc-bg-figma { transform: rotate(3deg); } }
/* Nov 11: a soft yellow band behind "They keep getting rejected", faded in only while the section is on screen. */
/* Later Nov 11: stronger yellow, edge to edge, and it melts into the page at the top and bottom. Jaycee asked
   for this fade herself, so it is the one exception to the no-gradients rule. The clip sits on the page wrapper,
   not the story column, so the band is not cut off at the column's edges. */
.vpage:has(.sc-lp) { overflow-x: clip; }
.sc-jam-mid { position: relative; isolation: isolate; }
.sc-jam-mid::before { content: ""; position: absolute; z-index: -1; top: -120px; bottom: -120px; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--palette-golden-200); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 140px, #000 calc(100% - 140px), transparent); opacity: 0; transition: opacity 700ms ease-out; pointer-events: none; }
.sc-jam-mid.is-lit::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sc-jam-mid::before { transition: none; } }
/* Dark theme: solid palette yellow turns muddy on the dark page, so the band is a faint warm tint there. */
[data-theme="dark"] .sc-jam-mid::before { background: color-mix(in srgb, var(--palette-golden-400) 14%, var(--theme-surface)); }
/* Phones (and anything too narrow for the 3D version): the three PR cards cascade down the page, each one
   overlapping the last a little, so all three can be read. The old phone stack hid the first card. */
@media (max-width: 719px) {
  .sc-fan { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; padding-bottom: 12px; }
  .sc-fan .sc-fan-c { grid-area: auto; width: min(88%, 300px); margin: 4px 0 0; padding: 16px; --x: 0px; --y: 0px; }
  .sc-fan .sc-fan-c:nth-child(1) { margin-top: 0; z-index: 1; --r: -3deg; }
  .sc-fan .sc-fan-c:nth-child(2) { z-index: 2; --r: 2deg; }
  .sc-fan .sc-fan-c:nth-child(3) { z-index: 3; --r: -2deg; }
}