/* Story variations stacked under the hero, each angle with its own design, for the team to compare
   (Jaycee, Nov 5). Mobile first: everything is one column on phones; art sits beside copy from 960px.
   Spacing separates them, not rules. */
.sv { --sv-ink: var(--theme-ink); --sv-muted: var(--theme-ink-muted); --sv-line: var(--theme-line); --sv-card: var(--theme-surface-raised); --sv-shadow: color-mix(in srgb, var(--theme-accent-contrast) 8%, transparent); --sv-gap: clamp(88px, 12vw, 160px); --sv-flowline: color-mix(in srgb, var(--palette-holly-300) 60%, var(--palette-greyscale-300)); display: grid; gap: var(--sv-gap); margin: clamp(56px, 9vw, 112px) 0 clamp(80px, 12vw, 160px); }
.sv-title { margin: 0; text-align: center; }
.sv-copy { display: grid; justify-items: start; align-content: center; gap: 16px; min-width: 0; }
.sv-tag { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sv-h { margin: 0; font: 500 clamp(28px, 4.2vw, 46px)/1.1 var(--font-heading); text-wrap: balance; color: var(--sv-ink); }
.sv-h > span { display: block; }
.sv-lead { margin: 0; max-width: 46ch; font-size: clamp(17px, 2vw, 20px); line-height: 1.45; color: var(--sv-muted); }
.sv p { margin: 0; }
.sv h4 { margin: 0; font: 500 15px/1.2 var(--font-body); white-space: nowrap; }

/* The flow under a story; the tiles are in story-variations-call.css. The margin pulls a flow up to
   the story it belongs to, out of the big gap between stories. */
.sv-flow { display: grid; gap: 20px; min-width: 0; margin-top: calc(var(--sv-gap) * -1 + clamp(32px, 5vw, 56px)); }
.sv .sv-flow-h { font: 500 clamp(20px, 2.4vw, 24px)/1.2 var(--font-heading); text-align: center; color: var(--sv-ink); white-space: normal; }

/* A: centred headline, a heap of the same correction, then one yellow fix. */
.sv-a { display: grid; gap: 28px; }
.sv-a .sv-copy { justify-items: center; text-align: center; }
.sv-a-art { display: grid; gap: 28px; align-items: center; width: 100%; max-width: 1000px; justify-self: center; }
.sv-a-heap { display: grid; justify-items: center; }
.sv-note { display: grid; gap: 4px; width: min(90%, 340px); padding: 16px 18px; border-radius: 14px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 8px 20px var(--sv-shadow); font-size: 16px; line-height: 1.35; color: var(--sv-ink); }
.sv-note small { font-size: 13px; color: var(--sv-muted); white-space: nowrap; }
.sv-note:nth-child(1) { transform: rotate(-3deg) translateX(-4%); }
.sv-note:nth-child(2) { margin-top: -18px; transform: rotate(2deg) translateX(5%); }
.sv-note:nth-child(3) { margin-top: -18px; transform: rotate(-1deg); }
.sv-a-fix { display: grid; gap: 10px; padding: 26px; border-radius: 20px; background: var(--theme-accent); color: var(--theme-accent-contrast); }
.sv-file { justify-self: start; padding: 6px 12px; border-radius: 10px; background: var(--theme-surface); font: 500 14px/1.3 ui-monospace, monospace; color: var(--sv-ink); white-space: nowrap; }
.sv-file b { font-weight: 500; color: var(--theme-action-green); }
.sv-file i { font-style: normal; color: var(--theme-bad); }
.sv-a-fix-t { font: 500 clamp(24px, 3vw, 32px)/1.15 var(--font-heading); }
@media (min-width: 768px) { .sv-a-art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } }

/* B: a dark band, with the question answered in the leader's own agent. */
.sv-b { display: grid; gap: 28px; padding: clamp(24px, 5vw, 64px); border-radius: 20px; background: var(--theme-accent-contrast); }
.sv-b .sv-h { color: var(--theme-action-green-ink); }
.sv-b .sv-lead { color: color-mix(in srgb, var(--theme-action-green-ink) 80%, transparent); }
.sv-chat { display: grid; gap: 12px; min-width: 0; padding: 20px; border-radius: 14px; background: var(--theme-surface); font-size: 16px; line-height: 1.45; color: var(--sv-ink); }
.sv-chat-q { justify-self: end; max-width: 90%; padding: 10px 14px; border-radius: 12px; background: var(--theme-sage-surface); }
.sv-chat-tool { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sv-muted); white-space: nowrap; }
@media (min-width: 960px) { .sv-b { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; } .sv-chat { padding: 26px; } }

/* C: a receipt beside the copy; the art leads on desktop, the headline leads on phones. */
.sv-c { display: grid; gap: 28px; }
.sv-c .sv-copy { order: -1; }
.sv-receipt { min-width: 0; padding: 26px 24px; border-radius: 14px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 26px var(--sv-shadow); font: 400 15px/1.35 ui-monospace, monospace; color: var(--sv-ink); }
.sv-receipt-h { padding-bottom: 14px; font-weight: 500; }
.sv-receipt ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sv-receipt li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sv-keep, .sv-cut { padding: 3px 10px; border-radius: 999px; font: 500 13px/1.3 var(--font-body); white-space: nowrap; }
.sv-keep { background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
.sv-cut { background: var(--theme-bad); color: var(--theme-action-green-ink); }
@media (min-width: 960px) { .sv-c { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sv-c .sv-copy { order: 0; } .sv-receipt { transform: rotate(-1.5deg); } }

/* D: a sage panel, what stays against what changes. */
.sv-d { display: grid; gap: 28px; padding: clamp(24px, 5vw, 64px); border-radius: 20px; background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
.sv-d .sv-copy { justify-items: center; text-align: center; }
.sv-d .sv-tag { background: var(--theme-surface); }
.sv-d-grid { display: grid; gap: 14px; }
.sv-d-card { display: grid; align-content: start; gap: 14px; padding: 24px; border-radius: 16px; background: var(--theme-surface); color: var(--sv-ink); line-height: 1.4; }
.sv-d-card h4 { color: var(--sv-muted); }
.sv-apps { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.sv-apps .works-i { gap: 8px; font-size: 16px; color: var(--sv-ink); white-space: nowrap; }
.sv-d-big { font: 500 clamp(24px, 3vw, 32px)/1.15 var(--font-heading); }
@media (min-width: 768px) { .sv-d-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } }

/* F: each dot is a teammate. Two humps slowly become one, ten seconds a pass, only while on screen.
   Without motion the plot simply shows the end state. */
.sv-f { display: grid; gap: 28px; }
.sv-dist { --cell: 30px; display: grid; justify-items: center; gap: 18px; min-width: 0; padding: 24px 20px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); }
.sv-dist-state { display: grid; justify-items: center; font: 500 clamp(17px, 2vw, 20px)/1.2 var(--font-heading); color: var(--sv-ink); white-space: nowrap; }
.sv-dist-state > span { grid-area: 1 / 1; }
.sv-dist-a { opacity: 0; }
.sv-dist-plot { position: relative; width: calc(var(--cell) * 7); height: calc(var(--cell) * 6); border-bottom: 2px solid var(--sv-flowline); }
.sv-dot { --x: calc(var(--x1) * var(--cell)); --y: calc(var(--y1) * var(--cell) * -1); position: absolute; left: 3px; bottom: 3px; width: calc(var(--cell) - 6px); height: calc(var(--cell) - 6px); border-radius: 50%; background: var(--theme-accent); transform: translate(var(--x), var(--y)); }
.sv-dist-axis { display: flex; justify-content: space-between; gap: 12px; width: calc(var(--cell) * 7 + 24px); font-size: 13px; color: var(--sv-muted); white-space: nowrap; }
@media (min-width: 768px) { .sv-dist { --cell: 42px; padding: 32px; } }
@media (min-width: 960px) { .sv-f { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 72px; } }
@media (prefers-reduced-motion: no-preference) {
  .sv-ready .sv-dot { animation: sv-dot 10s ease-in-out infinite both paused; }
  .sv-ready .sv-dot-ahead { animation-name: sv-dot-ahead; }
  .sv-ready .sv-dist-a { animation: sv-dist-a 10s linear infinite both paused; }
  .sv-ready .sv-dist-b { animation: sv-dist-b 10s linear infinite both paused; }
  .sv-run .sv-dot, .sv-run .sv-dist-a, .sv-run .sv-dist-b { animation-play-state: running; }
}
@keyframes sv-dot {
  0% { transform: translate(calc(var(--x0) * var(--cell)), calc(var(--y0) * var(--cell) * -1)); background: var(--sv-flowline); opacity: 0; }
  4%, 30% { transform: translate(calc(var(--x0) * var(--cell)), calc(var(--y0) * var(--cell) * -1)); background: var(--sv-flowline); opacity: 1; }
  58%, 92% { transform: translate(var(--x), var(--y)); background: var(--theme-accent); opacity: 1; }
  98%, 100% { transform: translate(var(--x), var(--y)); background: var(--theme-accent); opacity: 0; }
}
@keyframes sv-dot-ahead {
  0% { opacity: 0; }
  4%, 92% { opacity: 1; }
  98%, 100% { opacity: 0; }
}
@keyframes sv-dist-a { 0%, 38% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes sv-dist-b { 0%, 42% { opacity: 0; } 48%, 94% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* G: a dark session log where no step leaves a record. */
.sv-g { display: grid; gap: 28px; }
.sv-log { min-width: 0; padding: 24px; border-radius: 16px; background: var(--theme-accent-contrast); font: 400 15px/1.35 ui-monospace, monospace; color: var(--theme-action-green-ink); }
.sv-log-h { padding-bottom: 14px; font-weight: 500; }
.sv-log ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sv-log li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sv-log b { padding: 3px 10px; border-radius: 999px; background: var(--theme-bad); font: 500 13px/1.3 var(--font-body); white-space: nowrap; }
@media (min-width: 960px) { .sv-g { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 72px; } .sv-log { padding: 32px; } }

/* H: a yellow panel of problems, each beside its fix. One column on phones, two from 768px. */
.sv-i { display: grid; gap: 28px; padding: clamp(24px, 5vw, 64px); border-radius: 20px; background: var(--theme-accent); }
.sv-i .sv-copy { justify-items: center; text-align: center; }
.sv-i .sv-h { color: var(--theme-accent-contrast); }
.sv-i .sv-tag { background: var(--theme-surface); box-shadow: none; }
.sv-fixes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sv-fixes li { display: grid; gap: 10px; padding: 16px; border-radius: 14px; background: var(--theme-surface); font-size: 16px; line-height: 1.35; color: var(--sv-ink); }
.sv-fixes p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.sv-found, .sv-fixed { padding: 3px 10px; border-radius: 999px; font: 500 13px/1.3 var(--font-body); color: var(--theme-action-green-ink); white-space: nowrap; }
.sv-found { background: var(--theme-bad); }
.sv-fixed { background: var(--theme-action-green); }
@media (min-width: 768px) { .sv-fixes li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 18px 22px; } .sv-fixes p { flex-wrap: nowrap; } }

/* I: bingo you can play. Squares are tiles, so their text can run over lines. */
.sv-bingo { display: grid; gap: 28px; }
.sv-bingo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.sv-bingo-c { min-height: 96px; padding: 8px; border: 0; border-radius: 12px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); font: 500 13px/1.25 var(--font-body); color: var(--sv-ink); overflow-wrap: anywhere; cursor: pointer; transition: background-color 160ms ease, transform 120ms ease; }
.sv-bingo-c:active { transform: scale(0.97); }
.sv-bingo-c:focus-visible { outline: 2px solid var(--theme-action-green); outline-offset: 2px; }
.sv-bingo-c[aria-pressed="true"] { background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
.sv-bingo-c.sv-bingo-win { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); }
@media (min-width: 640px) { .sv-bingo-grid { gap: 10px; } .sv-bingo-c { min-height: 112px; padding: 14px; font-size: 15px; } }
@media (min-width: 960px) { .sv-bingo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } }

/* J: the swear jar, quotes at the size of how often they came up. */
.sv-jar { display: grid; justify-items: center; gap: 24px; text-align: center; }
.sv-jar .sv-copy { justify-items: center; }
.sv-jar-q { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; max-width: 900px; margin: 0; padding: 0; list-style: none; }
.sv-q { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); font: 500 18px/1.1 var(--font-heading); color: var(--sv-ink); white-space: nowrap; }
.sv-q b { padding: 2px 8px; border-radius: 999px; background: var(--theme-bad); font: 500 13px/1.3 var(--font-body); color: var(--theme-action-green-ink); }
.sv-q:nth-child(odd) { transform: rotate(-2deg); }
.sv-q:nth-child(3n) { transform: rotate(2deg); }
.sv-q-l { font-size: clamp(22px, 3.4vw, 34px); }
.sv-q-xl { font-size: clamp(30px, 6vw, 60px); padding: 14px 20px; }
.sv-q-y { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); }
.sv-q-s { background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
.sv-q-d { background: var(--theme-accent-contrast); box-shadow: none; color: var(--theme-action-green-ink); }

/* K: a review card with grades that flip. */
.sv-review { display: grid; gap: 28px; }
.sv-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); }
.sv-seg button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px; background: none; font: 500 15px/1 var(--font-body); color: var(--sv-ink); white-space: nowrap; cursor: pointer; }
.sv-seg button[aria-pressed="true"] { background: var(--theme-surface); box-shadow: 0 1px 3px var(--sv-shadow); }
.sv-seg button:focus-visible { outline: 2px solid var(--theme-action-green); outline-offset: 2px; }
.sv-card-r { min-width: 0; padding: 26px 24px; border-radius: 16px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line), 0 10px 26px var(--sv-shadow); color: var(--sv-ink); }
.sv-card-r-h { padding-bottom: 16px; font: 500 clamp(20px, 2.4vw, 24px)/1.2 var(--font-heading); }
.sv-card-r ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sv-card-r li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 16px; }
.sv-card-r li b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font: 500 18px/1 var(--font-heading); color: var(--theme-action-green-ink); }
.sv-g-lo { background: var(--theme-bad); }
.sv-g-hi { background: var(--theme-action-green); }
.sv-card-r-c { padding-top: 18px; font: italic 400 16px/1.4 var(--font-body); color: var(--sv-muted); }
.sv-card-r .sv-after { display: none; }
.sv-flip li b:not(.sv-after), .sv-flip .sv-card-r-c span:not(.sv-after) { display: none; }
.sv-flip li b.sv-after { display: grid; }
.sv-flip .sv-card-r-c .sv-after { display: inline; }
@media (min-width: 960px) { .sv-review { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 72px; } .sv-card-r { padding: 32px; transform: rotate(1.5deg); } }

/* L: the agents' group chat. Messages land once, in order, when it scrolls in. */
.sv-gc { display: grid; justify-items: center; gap: 28px; }
.sv-gc .sv-copy { justify-items: center; text-align: center; }
.sv-gc-chat { display: grid; gap: 10px; width: 100%; max-width: 560px; }
.sv-gc-m { display: grid; gap: 3px; justify-self: start; max-width: 85%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--theme-sage-surface); font-size: 16px; line-height: 1.35; color: var(--sv-ink); }
.sv-gc-m small { font-size: 13px; color: var(--sv-muted); white-space: nowrap; }
.sv-gc-me { justify-self: end; border-radius: 16px 16px 4px 16px; background: var(--theme-accent); color: var(--theme-accent-contrast); }
.sv-gc-me small { color: inherit; }
.sv-ready .sv-gc-m { opacity: 0; transform: translateY(8px); }
.sv-in .sv-gc-m { opacity: 1; transform: none; transition: opacity 320ms ease-out, transform 320ms ease-out; }
.sv-in .sv-gc-m:nth-child(2) { transition-delay: 500ms; }
.sv-in .sv-gc-m:nth-child(3) { transition-delay: 1200ms; }
.sv-in .sv-gc-m:nth-child(4) { transition-delay: 1800ms; }
.sv-in .sv-gc-m:nth-child(5) { transition-delay: 2600ms; }

/* I: the team on each habit, growing once toward the outliers' mark at the end of the track. On
   phones the headline comes first. */
.sv-out { display: grid; gap: 28px; }
.sv-out .sv-copy { order: -1; }
.sv-bars { min-width: 0; padding: 24px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); color: var(--sv-ink); }
.sv-bars-key { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 18px; font-size: 13px; color: var(--sv-muted); }
.sv-bars-key span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.sv-key-team, .sv-key-out { width: 12px; height: 12px; border-radius: 4px; background: var(--sv-flowline); }
.sv-key-out { background: var(--theme-accent); }
.sv-bars ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.sv-bars li { display: grid; gap: 6px; font-size: 16px; line-height: 1.3; }
.sv-bar { position: relative; height: 14px; border-radius: 999px; background: var(--theme-sage-surface); overflow: hidden; }
.sv-bar::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 8px; background: var(--theme-accent); }
.sv-bar i { display: block; height: 100%; background: var(--sv-flowline); transform: scaleX(var(--b)); transform-origin: left; }
.sv-ready .sv-bar i { transform: scaleX(var(--a)); }
.sv-in .sv-bar i { transform: scaleX(var(--b)); transition: transform 1200ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms); }
@media (min-width: 960px) { .sv-out { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sv-out .sv-copy { order: 0; } .sv-bars { padding: 32px; } }

/* N: the machine. Coins fall in from above, PRs float out to the right; the script spawns both. The
   stage clips them, so nothing can cause sideways scroll. */
.sv-m { display: grid; gap: 28px; }
.sv-m-card { display: grid; gap: 14px; min-width: 0; padding: 16px; border-radius: 20px; background: var(--sv-card); box-shadow: inset 0 0 0 1px var(--sv-line); color: var(--sv-ink); }
.sv-m-stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--theme-sage-surface); }
.sv-m-img { width: 68%; height: auto; }
.sv-m-coin { position: absolute; top: -30px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--theme-accent); box-shadow: inset 0 0 0 2px var(--theme-accent-edge); font: 500 14px/1 var(--font-body); color: var(--theme-accent-contrast); }
.sv-m-pr { position: absolute; left: 58%; top: 46%; padding: 5px 9px; border-radius: 8px; background: var(--theme-surface); box-shadow: inset 0 0 0 1px var(--sv-line), 0 4px 10px var(--sv-shadow); font: 500 12px/1.2 ui-monospace, monospace; color: var(--sv-ink); white-space: nowrap; }
.sv-m-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.sv-dial { --r: -120deg; position: relative; width: 96px; height: 96px; border-radius: 50%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.sv-dial:active { cursor: grabbing; }
.sv-dial:focus-visible { outline: 2px solid var(--theme-action-green); outline-offset: 2px; }
.sv-dial-tick { position: absolute; inset: 0; transform: rotate(var(--t)); pointer-events: none; }
.sv-dial-tick::before { content: ""; position: absolute; left: calc(50% - 1.5px); top: 2px; width: 3px; height: 7px; border-radius: 2px; background: var(--sv-flowline); }
.sv-dial-knob { position: absolute; inset: 14px; border-radius: 50%; background: var(--theme-accent); box-shadow: inset 0 0 0 2px var(--theme-accent-edge); transform: rotate(var(--r)); transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; }
.sv-dial-knob i { position: absolute; left: calc(50% - 2px); top: 7px; width: 4px; height: 18px; border-radius: 2px; background: var(--theme-accent-contrast); }
.sv-m-read { display: grid; gap: 6px; min-width: 0; }
.sv-m-level { font: 500 18px/1.2 var(--font-heading); white-space: nowrap; }
.sv-m-stat { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; color: var(--sv-muted); white-space: nowrap; }
.sv-m-stat b { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--sv-ink); }
@media (min-width: 960px) { .sv-m { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sv-m-card { padding: 20px; } }
@media (prefers-reduced-motion: no-preference) {
  [data-shake="3"] .sv-m-img { animation: sv-m-shake 240ms linear infinite; }
  [data-shake="4"] .sv-m-img { animation: sv-m-shake 120ms linear infinite; }
}
@keyframes sv-m-shake { 25% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, -1px); } }

/* E: shared fixes adding up, row by row; the newest in each row is yellow. */
.sv-e { display: grid; gap: 28px; }
.sv-weeks { display: grid; gap: 16px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.sv-weeks li { display: grid; gap: 8px; }
.sv-weeks small { font-size: 14px; color: var(--sv-muted); white-space: nowrap; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-chips b { padding: 7px 12px; border-radius: 999px; background: var(--theme-sage-surface); box-shadow: inset 0 0 0 1px var(--theme-sage-line); font: 500 14px/1.2 var(--font-body); color: var(--sv-ink); white-space: nowrap; }
.sv-chips .sv-new { background: var(--theme-accent); box-shadow: none; color: var(--theme-accent-contrast); }
@media (min-width: 960px) { .sv-e { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 72px; } .sv-weeks li { grid-template-columns: 90px minmax(0, 1fr); align-items: center; } }