/* 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-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: min(100% - 24px, 480px); 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 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); }

/* 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; }
@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-in.sc-lap .sc-lap-cap { background: var(--theme-accent); color: var(--theme-accent-contrast); transition: background-color 240ms ease-out 800ms, color 240ms ease-out 800ms; }
.sc-lap-cap span { grid-area: 1 / 1; }
.sc-lap-cap span:last-child { opacity: 0; }
.sc-in .sc-lap-cap span:first-child { opacity: 0; transition: opacity 200ms ease-out 800ms; }
.sc-in .sc-lap-cap span:last-child { opacity: 1; transition: opacity 200ms ease-out 800ms; }
@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-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%); }
.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; } }

/* 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: 500; }
.sc-rc-ship b { font-weight: 500; }
.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); } }

/* 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. */
.sc-bg { display: grid; gap: 6px; min-width: 0; padding: 8px; border-radius: 16px; background: var(--theme-accent); }
.sc-bg-h { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; font: 500 clamp(26px, 5vw, 40px)/1.1 var(--font-heading); text-align: center; color: var(--theme-accent-contrast); }
.sc-bg-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.sc-bg-c { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 66px; padding: 3px; border: 0; border-radius: 6px; background: var(--palette-greyscale-50); font: 500 10.5px/1.15 var(--font-body); color: var(--palette-greyscale-900); overflow-wrap: anywhere; cursor: pointer; }
.sc-bg-c::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 56px; height: 56px; max-width: 94%; border-radius: 50%; background: var(--theme-accent); opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: opacity 120ms ease-out, transform 160ms cubic-bezier(0.22, 1, 0.36, 1); }
.sc-bg-c[aria-pressed="true"]::after { opacity: 1; transform: translate(-50%, -50%); }
.sc-bg-c:focus-visible { outline: 2px solid var(--theme-accent-contrast); outline-offset: 1px; }
.sc-bg-free { font-size: 13px; cursor: default; }
.sc-bg-win { background: var(--palette-greyscale-900); color: var(--theme-accent); }
.sc-bg-win::after { display: none; }
@media (min-width: 480px) { .sc-bg-c { font-size: 12px; } }
@media (min-width: 640px) { .sc-bg { gap: 8px; padding: 14px; } .sc-bg-h, .sc-bg-grid { gap: 6px; } .sc-bg-c { min-height: 92px; padding: 8px; font-size: 14px; } .sc-bg-c::after { width: 76px; height: 76px; } }

@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%, 360px); 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 story per row, the same space between them all. */
.sc-story { gap: clamp(64px, 9vw, 120px); }
.sc-act { display: grid; gap: clamp(64px, 9vw, 120px); min-width: 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; }