/* Coded motion graphics: the live plan (two windows editing one plan), the
   sealed row (encrypted on the way through the cloud) and the key chain.
   Drawn in HTML and driven by assets/js/motion.js; without JavaScript, or
   with reduced motion, each shows its finished state. Colours are the app's
   own: slate, teal, plum and the critical red. */

.m-figure {
  --m-surface: var(--surface);
  --m-chrome: var(--chrome);
  --m-ink: var(--ink);
  --m-ink-2: var(--ink-2);
  --m-ink-3: var(--ink-3);
  --m-rule: var(--rule);
  --m-fill: var(--fill);
  --m-slate: #3F6E8C;
  --m-teal: #2A8478;
  --m-plum: #6B5F8C;
  --m-red: #D7322A;
  --m-mono: ui-monospace, "SF Mono", Menlo, monospace;
  margin: 0;
  font-family: inherit;
}
@media (prefers-color-scheme: dark) {
  .m-figure { --m-slate: #6B9BBA; --m-teal: #4FB3A5; --m-plum: #9A8FC0; --m-red: #FF5A4E; }
}
/* On a dark band the figure always uses the dark palette. */
.m-dark, .m-dark .m-figure {
  --m-surface: #111419;
  --m-chrome: #0D1015;
  --m-ink: #EDF0F4;
  --m-ink-2: #A6AEBB;
  --m-ink-3: #8C95A3;
  --m-rule: rgba(255, 255, 255, 0.09);
  --m-fill: rgba(255, 255, 255, 0.06);
  --m-slate: #6B9BBA;
  --m-teal: #4FB3A5;
  --m-plum: #9A8FC0;
  --m-red: #FF5A4E;
}

/* ---------- App windows: sized in em, so on a device screen they scale with it ---------- */

.m-win { position: relative; background: var(--m-surface); overflow: hidden; font-size: 13.5px; color: var(--m-ink); }
.dv-screen > .m-win { position: absolute; inset: 0; display: flex; flex-direction: column; }
.dv-macbook .dv-screen > .m-win { font-size: 2.3cqw; }
.dv-ipad .dv-screen > .m-win { font-size: 2.9cqw; }
.dv-screen > .m-win .m-rows { flex: 1; }
.m-head { display: flex; align-items: center; gap: .75em; padding: .75em .9em; background: var(--m-chrome); border-bottom: 1px solid var(--m-rule); }
.dv-macbook .m-head { padding-top: 1.4em; }
.m-dots { display: flex; gap: .38em; }
.m-dots i { width: .68em; height: .68em; border-radius: 50%; background: var(--m-rule); box-shadow: inset 0 0 0 1px var(--m-rule); }
.m-title { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-title small { display: block; font-weight: 400; font-size: .8em; color: var(--m-ink-3); }
.m-faces { display: flex; gap: .3em; }
.m-faces i {
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7em; width: 2.6em; height: 2.6em; font-weight: 600; font-style: normal; line-height: 1; color: #fff;
  background: var(--c); box-shadow: 0 0 0 2px var(--m-chrome);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s;
}
.m-faces i.out { transform: scale(.4); opacity: 0; }

.m-rows { position: relative; padding: .3em 0 .45em; }
.m-row { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) 1.4fr; align-items: center; height: 2.5em; }
.m-row::before { content: ""; position: absolute; inset: 1px .45em; border-radius: .45em; background: transparent; transition: background .4s, box-shadow .4s; }
.m-row.sel-self::before { background: color-mix(in srgb, var(--m-slate) 14%, transparent); }
.m-row.sel-peer::before { box-shadow: inset 0 0 0 1.5px var(--peer); }
.m-name { position: relative; padding-left: 1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--m-ink); }
.m-row.sum .m-name { font-weight: 600; padding-left: .75em; }
.m-row.sub .m-name { padding-left: 1.8em; }
.m-track { position: relative; height: 100%; border-left: 1px solid var(--m-rule); margin-right: .75em; }
.m-bar {
  position: absolute; top: 50%; height: .75em; margin-top: -.375em; border-radius: .375em;
  background: color-mix(in srgb, var(--m-teal) 32%, transparent);
  overflow: hidden;
  transition: left .9s cubic-bezier(.65,0,.25,1), width .9s cubic-bezier(.65,0,.25,1);
}
.m-bar b { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--m-teal); border-radius: .375em; transition: width .9s cubic-bezier(.65,0,.25,1); }
.m-row.sum .m-bar { height: .38em; margin-top: -.19em; background: var(--m-ink); border-radius: 1px; }
.m-row.sum .m-bar b { display: none; }
.m-ms { position: absolute; top: 50%; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; background: var(--m-red); border-radius: 2px; transform: rotate(45deg); transition: left .9s cubic-bezier(.65,0,.25,1); }
.m-date { position: absolute; top: 50%; transform: translate(-100%, -50%); padding-right: .9em; font-weight: 600; font-size: .82em; white-space: nowrap; transition: left .9s cubic-bezier(.65,0,.25,1); }
.m-date.flash { color: var(--m-red); }
.m-tag {
  position: absolute; z-index: 2; transform: translateY(-50%);
  padding: .15em .55em; border-radius: .45em;
  font-size: .75em; font-weight: 600; color: #fff; background: var(--peer);
  white-space: nowrap; pointer-events: none;
  transition: opacity .35s, top .5s cubic-bezier(.65,0,.25,1);
}
.m-foot { display: flex; justify-content: space-between; gap: .75em; padding: .6em .9em; border-top: 1px solid var(--m-rule); background: var(--m-chrome); font-size: .85em; color: var(--m-ink-3); white-space: nowrap; }
.m-foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.m-note { transition: opacity .35s; }
.m-note b { color: var(--m-ink); font-weight: 600; }

/* ---------- The live plan: a MacBook and an iPad on one plan ---------- */

.m-live { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0 5%; align-items: end; padding: 0 2%; }
@media (max-width: 760px) { .m-live { grid-template-columns: 1fr; gap: 28px; } .m-live .dv-ipad { width: 86%; margin-left: auto; } }

/* ---------- The sealed row: plain on each device, ciphertext between ---------- */

.m-seal { display: grid; gap: 22px; color: var(--m-ink); }
.m-row3 { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr; align-items: center; }
@media (max-width: 760px) { .m-row3 { grid-template-columns: 1fr; } .m-row3 .dv { width: 80%; margin: 0 auto; } }
.m-node { position: relative; z-index: 1; background: var(--m-surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--m-rule); padding: 16px; min-width: 0; }
.m-node h4 { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--m-ink-2); letter-spacing: 0; }
.m-node h4 small { display: block; margin-top: 2px; font-weight: 400; color: var(--m-ink-3); font-size: 11px; }
.dv-screen > .m-plainwin { position: absolute; inset: 0; background: var(--m-surface); padding: 1.2em 1.3em; font-size: 4.6cqw; color: var(--m-ink); }
.dv-macbook .dv-screen > .m-plainwin { padding-top: 1.7em; }
.m-plainwin h4 { margin: 0 0 .8em; font-size: .8em; font-weight: 600; color: var(--m-ink-2); letter-spacing: 0; }
.m-plainwin h4 small { display: block; font-weight: 400; color: var(--m-ink-3); }
.m-plain { line-height: 1.45; }
.m-plain span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-plain span:first-child { font-weight: 600; }
.m-plain .x { font-family: var(--m-mono); font-size: .85em; color: var(--m-ink-3); font-weight: 400; }
.m-cipher { font-family: var(--m-mono); font-size: 11.5px; line-height: 1.75; color: var(--m-ink-3); height: calc(1.75em * 6); overflow: hidden; }
.m-cipher div { white-space: nowrap; overflow: hidden; transition: color .8s; }
.m-cipher div.new { color: var(--m-ink); }
.m-pipe { position: relative; height: 2px; margin: 0 -2px; background: repeating-linear-gradient(90deg, var(--m-rule) 0 6px, transparent 6px 11px); }
@media (max-width: 760px) { .m-pipe { width: 2px; height: 28px; margin: 6px auto; background: repeating-linear-gradient(180deg, var(--m-rule) 0 6px, transparent 6px 11px); } }
.m-packet { position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; background: var(--m-teal); opacity: 0; }
@media (max-width: 760px) { .m-packet { left: 50%; top: 0; } }
.m-keys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 0; margin: 0; list-style: none; font-size: 12.5px; color: var(--m-ink-2); }
.m-keys li { border: 1px solid var(--m-rule); border-radius: 999px; padding: 6px 12px; }
.m-keys code { font-family: var(--m-mono); font-size: 11.5px; color: var(--m-ink); }

/* ---------- The key chain: Secure Enclave → account keys → plan key → rows ---------- */

.m-chain { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: k; }
@media (max-width: 760px) { .m-chain { grid-template-columns: 1fr 1fr; } }
.m-chain li { position: relative; background: var(--m-surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--m-rule); padding: 16px 16px 18px; min-width: 0; transition: box-shadow .5s; }
.m-chain li::before { counter-increment: k; content: counter(k); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--m-fill); color: var(--m-ink-2); font-size: 12px; font-weight: 600; transition: background .5s, color .5s; }
.m-chain li.on { box-shadow: 0 0 0 1.5px var(--m-teal); }
.m-chain li.on::before { background: var(--m-teal); color: #fff; }
.m-chain b { display: block; margin-top: 12px; font-size: 15px; letter-spacing: -0.01em; }
.m-chain span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--m-ink-2); }
.m-chain code { display: inline-block; margin-top: 10px; font-family: var(--m-mono); font-size: 11px; color: var(--m-ink-3); }
.m-chip { position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid var(--m-ink-3); }
.m-chip::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: var(--m-ink-3); }
.m-chain li.on .m-chip { border-color: var(--m-teal); }
.m-chain li.on .m-chip::after { background: var(--m-teal); }

@media (prefers-reduced-motion: reduce) {
  .m-bar, .m-bar b, .m-ms, .m-date, .m-tag, .m-faces i, .m-row::before, .m-chain li { transition: none; }
}

/* Without JavaScript the animated figures are left out; the text says it all. */
html:not(.js) [data-motion] { display: none; }

/* Inside a guide page's prose */
.prose .m-chain { display: grid; padding: 0; }
.prose .m-keys { flex-direction: row; padding: 0; gap: 8px; }
.prose figure .m-figure { margin: 0; }

/* ---------- Shared: baselines and critical bars ---------- */

.m-row .m-bar.crit { background: color-mix(in srgb, var(--m-red) 30%, transparent); }
.m-row .m-bar.crit b { background: var(--m-red); }
.m-row .m-bar.alt { background: color-mix(in srgb, var(--m-slate) 30%, transparent); }
.m-row .m-bar.alt b { background: var(--m-slate); }
.m-base { position: absolute; top: 50%; height: .3em; margin-top: .52em; border-radius: .15em; background: var(--m-ink-3); opacity: .55; transform-origin: left; transform: scaleX(0); transition: transform .7s cubic-bezier(.65,0,.25,1); }
.m-base.on { transform: scaleX(1); }
.m-row.tall { height: 2.8em; }
.m-foot .late { color: var(--m-red); font-weight: 600; }
.m-dark .m-row .m-bar.crit { background: color-mix(in srgb, var(--m-red) 55%, transparent); }

/* ---------- The agent: a request, a tool call, the plan moving ---------- */

.m-agent { color: var(--m-ink); }
.m-split { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; font-size: 2.05cqw; background: var(--m-chrome); }
.m-split .m-chat { display: grid; align-content: start; gap: .7em; padding: 2em 1em 1em; overflow: hidden; line-height: 1.4; }
.m-split .m-win { display: flex; flex-direction: column; border-left: 1px solid var(--m-rule); font-size: 1em; }
.m-split .m-win .m-head { padding-top: 2em; }
.m-split .m-win .m-rows { flex: 1; }
.m-split .m-name { padding-left: .8em !important; }
.m-msg { max-width: 92%; padding: .6em .8em; border-radius: .8em; opacity: 0; transform: translateY(.4em); transition: opacity .35s, transform .35s; }
.m-msg.on { opacity: 1; transform: none; }
.m-msg.me { justify-self: end; background: var(--m-slate); color: #fff; border-bottom-right-radius: .25em; }
.m-msg.ai { background: var(--m-fill); border-bottom-left-radius: .25em; }
.m-msg small { display: block; font-size: .78em; opacity: .7; margin-bottom: .15em; font-weight: 600; }
.m-msg .rest { visibility: hidden; }
.m-call { font-family: var(--m-mono); font-size: .8em; color: var(--m-ink-2); padding: .55em .7em; border-radius: .55em; box-shadow: inset 0 0 0 1px var(--m-rule); opacity: 0; transition: opacity .35s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-call.on { opacity: 1; }
.m-call em { font-style: normal; color: var(--m-teal); }
.m-call .ok { color: var(--m-teal); }

/* ---------- Feature cards: small looping vignettes ---------- */

.h-viz { position: relative; height: 112px; margin: -6px -6px 18px; border-radius: 12px; background: var(--fill); overflow: hidden; --v-red: #D7322A; --v-teal: #2A8478; --v-slate: #3F6E8C; --v-plum: #6B5F8C; --v-ink: var(--ink); --v-ink-3: var(--ink-3); --v-surface: var(--surface); }
@media (prefers-color-scheme: dark) { .h-viz { --v-red: #FF5A4E; --v-teal: #4FB3A5; --v-slate: #6B9BBA; --v-plum: #9A8FC0; } }
.h-viz * { animation-play-state: paused !important; }
.h-viz.play * { animation-play-state: running !important; }
.h-viz { font-size: 11px; color: var(--v-ink); }

/* Inspector */
.v-insp { position: absolute; inset: 14px 18px; display: grid; gap: 6px; }
.v-insp > div { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; border-radius: 6px; background: var(--v-surface); box-shadow: 0 0 0 1px var(--rule); }
.v-insp span { color: var(--v-ink-3); }
.v-insp b { position: relative; font-weight: 600; min-width: 46px; text-align: right; }
.v-insp .v-focus { animation: v-focus 6s infinite; }
.v-swap { display: inline-block; height: 1.4em; vertical-align: middle; }
.v-swap i { position: absolute; right: 0; top: 0; line-height: 1.4em; font-style: normal; }
.v-swap i:first-child { animation: v-out 6s infinite; }
.v-swap i:last-child { opacity: 0; color: var(--v-teal); animation: v-in 6s infinite; }
.v-meter { display: inline-block; width: 46px; height: 6px; border-radius: 3px; background: var(--fill); overflow: hidden; vertical-align: middle; }
.v-meter i { display: block; height: 100%; width: 0; background: var(--v-teal); animation: v-meter 6s infinite; }
@keyframes v-focus { 0%, 20% { box-shadow: 0 0 0 1px var(--rule); } 25%, 60% { box-shadow: 0 0 0 1.5px var(--v-slate); } 65%, 100% { box-shadow: 0 0 0 1px var(--rule); } }
@keyframes v-out { 0%, 35% { opacity: 1; transform: none; } 42%, 92% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
@keyframes v-in { 0%, 35% { opacity: 0; transform: translateY(6px); } 42%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes v-meter { 0%, 55% { width: 0; } 75%, 92% { width: 60%; } 100% { width: 0; } }

/* Resources */
.v-res { position: absolute; inset: 16px 18px; display: grid; gap: 9px; }
.v-res > div { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; }
.v-res span { color: var(--v-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-res u { position: relative; height: 8px; border-radius: 4px; background: var(--rule); text-decoration: none; }
.v-res u::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 75%; border-left: 1.5px dashed var(--v-ink-3); opacity: .6; }
.v-res u i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--v-teal); }
.v-res u i.grow { animation: v-load 6s infinite; }
.h-viz > em { position: absolute; right: 12px; top: 6px; font-style: normal; font-weight: 600; color: var(--v-red); opacity: 0; animation: v-flag 6s infinite; }
@keyframes v-load { 0%, 15% { width: 40%; background: var(--v-teal); } 45% { width: 74%; background: var(--v-teal); } 55%, 90% { width: 92%; background: var(--v-red); } 100% { width: 40%; background: var(--v-teal); } }
@keyframes v-flag { 0%, 52% { opacity: 0; } 58%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* Print on one page */
.v-page { position: absolute; left: 50%; top: 12px; width: 124px; height: 88px; margin-left: -62px; border-radius: 3px; background: var(--v-surface); box-shadow: 0 0 0 1px var(--rule), 0 8px 16px -10px rgba(0,0,0,.4); }
.v-sheet { position: absolute; left: 50%; top: 18px; width: 300px; margin-left: -62px; transform-origin: 0 0; display: grid; gap: 8px; padding: 8px; animation: v-fit 6s infinite cubic-bezier(.65,0,.25,1); }
.v-sheet i { display: block; height: 10px; border-radius: 3px; background: var(--v-slate); margin-left: var(--x); width: var(--w); }
.v-sheet i.c { background: var(--v-red); }
.v-fitlabel { position: absolute; right: 12px; bottom: 6px; z-index: 1; font-weight: 600; color: var(--v-ink-3); padding: 1px 6px; border-radius: 5px; background: var(--fill); }
@keyframes v-fit { 0%, 20% { transform: translateX(-60px) scale(1); } 45%, 88% { transform: translateX(0) scale(.41); } 100% { transform: translateX(-60px) scale(1); } }

/* Metal-fast Gantt: zoom and scroll */
/* The chart is widened, not scaled, so bars keep their height and rounded ends. */
.v-zoom { position: absolute; top: 14px; bottom: 14px; left: 0; width: 100%; animation: v-zoom 6s infinite cubic-bezier(.65,0,.25,1); }
.v-zoom i { position: absolute; height: 8px; border-radius: 4px; left: var(--x); width: var(--w); top: var(--y); background: var(--v-teal); }
.v-zoom i.c { background: var(--v-red); }
.v-zoom i.p { background: var(--v-plum); }
.v-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 28px); animation: v-ticks 6s infinite cubic-bezier(.65,0,.25,1); }
.v-scale { position: absolute; left: 10px; bottom: 6px; z-index: 1; width: 54px; height: 18px; border-radius: 5px; background: var(--fill); font-weight: 600; color: var(--v-ink-3); }
.v-scale b { top: 2px; left: 6px; }
.v-scale b { position: absolute; white-space: nowrap; font-weight: 600; }
.v-scale b:nth-child(1) { animation: v-s1 6s infinite; }
.v-scale b:nth-child(2) { opacity: 0; animation: v-s2 6s infinite; }
@keyframes v-zoom { 0%, 12% { width: 100%; transform: translateX(0); } 45%, 60% { width: 260%; transform: translateX(-16%); } 88%, 100% { width: 100%; transform: translateX(0); } }
@keyframes v-ticks { 0%, 12% { background-size: 28px 100%; } 45%, 60% { background-size: 72px 100%; } 88%, 100% { background-size: 28px 100%; } }
@keyframes v-s1 { 0%, 25% { opacity: 1; } 32%, 75% { opacity: 0; } 82%, 100% { opacity: 1; } }
@keyframes v-s2 { 0%, 25% { opacity: 0; } 32%, 75% { opacity: 1; } 82%, 100% { opacity: 0; } }

/* Apple Pencil: a stroke marks the bar done */
.v-pencil { position: absolute; inset: 0; }
.v-pencil .track { position: absolute; left: 24px; right: 24px; top: 48px; height: 14px; border-radius: 7px; background: color-mix(in srgb, var(--v-teal) 28%, transparent); overflow: hidden; }
.v-pencil .track i { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--v-teal); border-radius: 7px; animation: v-done 6s infinite; }
.v-pencil svg { position: absolute; left: 24px; top: 36px; width: calc(100% - 48px); height: 40px; overflow: visible; }
.v-pencil path { fill: none; stroke: var(--v-ink); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: v-draw 6s infinite; }
.v-pencil b { position: absolute; right: 24px; top: 74px; font-weight: 600; color: var(--v-teal); opacity: 0; animation: v-flag 6s infinite; }
@keyframes v-draw { 0%, 10% { stroke-dashoffset: 400; opacity: 1; } 45% { stroke-dashoffset: 0; opacity: 1; } 60%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes v-done { 0%, 45% { width: 30%; } 58%, 90% { width: 100%; } 100% { width: 30%; } }

/* Any window size: the chart gives way to the table */
.v-win { position: absolute; left: 16px; top: 14px; bottom: 14px; width: calc(100% - 32px); border-radius: 8px; background: var(--v-surface); box-shadow: 0 0 0 1px var(--rule); display: flex; overflow: hidden; container-type: inline-size; animation: v-resize 6s infinite cubic-bezier(.65,0,.25,1); }
.v-win .tbl { flex: 0 0 96px; border-right: 1px solid var(--rule); padding: 8px; display: grid; gap: 6px; align-content: start; }
.v-win .tbl i { height: 5px; border-radius: 3px; background: var(--rule); }
.v-win .tbl i:nth-child(odd) { width: 70%; }
.v-win .gnt { flex: 1; position: relative; }
.v-win .gnt i { position: absolute; height: 6px; border-radius: 3px; left: var(--x); width: var(--w); top: var(--y); background: var(--v-teal); }
@container (max-width: 150px) { .v-win .gnt { display: none; } .v-win .tbl { flex: 1; border-right: 0; } }
@keyframes v-resize { 0%, 15% { width: calc(100% - 32px); } 45%, 70% { width: 120px; } 95%, 100% { width: calc(100% - 32px); } }

/* Hero: devices arrive one after another */
@keyframes m-arrive { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.js .h-devices > * { animation: m-arrive .9s cubic-bezier(.2,.7,.2,1) both; }
.js .h-devices > .h-dev-macbook { animation-delay: .35s; }
.js .h-devices > .h-dev-ipad { animation-delay: .55s; }

@media (prefers-reduced-motion: reduce) {
  .h-viz *, .js .h-devices > * { animation: none !important; }
  .m-base, .m-msg, .m-call { transition: none; }
}
@media (prefers-color-scheme: dark) {
  .m-row .m-bar.crit { background: color-mix(in srgb, var(--m-red) 55%, transparent); }
  .m-row .m-bar.alt { background: color-mix(in srgb, var(--m-slate) 50%, transparent); }
}

/* ---------- Devices: Apple's Studio Display, MacBook Pro and iPad Pro ----------
   Each device is one flattened image (Apple's bezel with a screenshot on its screen),
   never the bare bezel. Live figures lay .dv-screen exactly over the screen opening;
   it's a size container, so what's on it scales with the device like a real screen. */

.dv { position: relative; }
.dv-img { display: block; width: 100%; height: auto; }
.dv > picture { display: block; }
.dv > .dv-screen { position: absolute; overflow: hidden; background: #000; container-type: inline-size; }
.dv-macbook > .dv-screen { left: 9.437%; top: 10.669%; width: 81.127%; height: 78.662%; border-radius: 1.07% / 1.66%; }
/* The camera notch stays on top of whatever the screen shows */
.dv-macbook > .dv-screen::after { content: ""; position: absolute; z-index: 5; left: 44.65%; top: 0; width: 10.71%; height: 2.86%; background: #000; border-radius: 0 0 1cqw 1cqw; }
.dv-ipad > .dv-screen { left: 4.167%; top: 5.638%; width: 91.667%; height: 88.723%; border-radius: 2.4% / 3.48%; }

/* Apple's MacBook image has room around the base; let it overhang so the screen keeps its size */
.m-agent .dv-macbook { margin-inline: -8%; }