/* "Your agent fixes it" (pages/products/agent.ts, assets/products/agent.js): the landing page's parts (site.css: the
   player, note cards, the agent's question on the frame and its "What it does" list) and this page's own, fx-. Every
   state changes in place (opacity and transform over things already laid out), so nothing moves the page. */

/* ---- the page's common parts */
.fx .pl-av {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.fx .ag-head {
  margin: 0;
}
.fx.sc-armed .fx-kg {
  animation: sc-turn 3.2s var(--ease-in-out) infinite;
}
.fx-kg {
  flex: none;
  width: 10px;
  height: 10px;
  color: var(--claude);
}
/* a "What it does" list: as tall as the stylesheet says (--fx-h), at most --keep lines in view, newest on top; at rest
   the last ones stand in it, the older ones wait out of sight (scenes place them when they play) */
.fx-steps {
  --keep: 4;
  justify-content: flex-end;
  height: var(--fx-h, 170px);
}
.fx:not(.sc-armed) .fx-steps li:nth-last-child(n + 5) {
  display: none;
}
.fx.sc-armed .fx-steps li:not(.in) {
  opacity: 0;
}
/* words stacked in one place, one shown: they may wrap, the place is as tall as the tallest */
.fx-stack {
  display: grid;
  min-width: 0;
}
.fx-stack > [data-s] {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.35s;
}
.fx-stack > .on {
  opacity: 1;
}
/* the one agent-facing line at a window's foot */
.fx-foot {
  display: flex;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 9px 14px 10px;
  border-top: 1px solid var(--line);
}
.fx-foot-k {
  flex: none;
  color: var(--faint);
  font: var(--fw-ui) 10px / 1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-foot .mono {
  color: var(--fg-2);
  font-size: 10.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .fx-foot {
    flex-direction: column;
  }
}
/* the agent's question on the frame (site.css .ag-ask), until it is asked and after it is answered */
.fx-q:not(.in) {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
}
.fx-qa {
  display: grid;
}
.fx-qa > [data-s] {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s;
}
.fx-qa > .on {
  opacity: 1;
}
.fx-answered {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}
.fx-answered b {
  color: var(--fg);
}
.fx-answered .ic {
  color: var(--ok);
}

/* ---- the hero: the landing page's player. The note's box and label until the line moves, the key once she sends */
.fx-body {
  position: relative;
}
.fx-hero .pl-agent .fx-name {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.fx-hero [data-fx-mark],
.fx-hero [data-fx-key] {
  transition: opacity 0.35s;
}
.fx-hero [data-fx-mark]:not(.on),
.fx-hero [data-fx-key]:not(.on) {
  opacity: 0;
}
/* the notes panel: Mia's note being written, then sent, in one place */
.fx-pane {
  display: grid;
}
.fx-pane > [data-s] {
  grid-area: 1 / 1;
  align-self: start;
  opacity: 0;
  transition: opacity 0.35s;
}
.fx-pane > .on {
  opacity: 1;
}
.fx-draft {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--fg) 30%, var(--line));
}
.fx-draft p {
  margin: 0;
}
.fx-draft-t {
  color: var(--fg);
  font-size: 12px;
}
.fx-draft-b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fx-draft-b .mono {
  color: var(--muted);
  font-size: 10px;
}
.fx-draft-acts {
  display: flex;
  gap: 6px;
}
.fx-send {
  height: 26px;
  padding-inline: 12px;
  font-size: 11.5px;
}
/* a narrow player: the notes panel under the picture (site.css hides it), the agent's step in a line of its own */
.fx-ph {
  display: none;
}
@container pl (max-width: 780px) {
  .fx-hero .pl-side {
    display: grid;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@container pl (max-width: 640px) {
  .fx-hero .fx-ph {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 9px 14px 10px;
    border-top: 1px solid var(--line);
    color: var(--fg-2);
    font-size: 12px;
  }
  .fx-hero .fx-ph .ag-logo {
    width: 14px;
    height: 14px;
    color: var(--claude);
  }
  .fx-hero .fx-ph b {
    color: var(--fg);
  }
}
@container pl (max-width: 520px) {
  .fx-hero .pl-agent .fx-name {
    display: none;
  }
}

/* ---- the note as data: the frame in Lampo, measured; the agent's rows beside it, each lighting its part */
.fx-data-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.fx-lampo {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}
.fx-frame {
  border-radius: 8px;
  transition: box-shadow 0.35s;
}
.fx-frame.lit {
  box-shadow: 0 0 0 2px var(--brand);
}
.fx-dbox {
  transition: box-shadow 0.35s;
}
.fx-dbox.lit {
  box-shadow: 0 0 0 3px rgb(255 59 92 / 0.35);
}
.fx-ftag,
.fx-rules {
  transition:
    background 0.35s,
    color 0.35s,
    border-color 0.35s;
}
.fx-rules {
  gap: 5px;
}
.fx-rules .kg {
  width: 9px;
  height: 9px;
}
.fx-ftag.lit,
.fx-rules.lit {
  background: var(--brand-deep);
  border-color: transparent;
  color: var(--on-brand);
}
/* the box measured in the video's pixels: from the frame's edges to it, and its own width and height */
.fx-m {
  position: absolute;
  pointer-events: none;
  transition: opacity 0.35s;
}
.fx-m > .mono {
  position: absolute;
  padding: 1px 4px;
  border-radius: 3px;
  background: #ff3b5c;
  color: #fff;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}
.fx-mx {
  left: 0;
  top: calc(var(--y) * 100%);
  width: calc(var(--w) * 100%);
  border-top: 1.5px dashed #ff8a9d;
}
.fx-mx > .mono {
  left: 50%;
  bottom: 3px;
  translate: -50% 0;
}
.fx-my {
  left: calc(var(--x) * 100%);
  top: 0;
  height: calc(var(--h) * 100%);
  border-left: 1.5px dashed #ff8a9d;
}
.fx-my > .mono {
  right: 4px;
  top: 50%;
  translate: 0 -50%;
}
.fx-mw {
  left: calc(var(--x) * 100%);
  top: calc(var(--y) * 100% + 5px);
  width: calc(var(--w) * 100%);
  height: 6px;
  border: 1.5px solid #ff8a9d;
  border-top: 0;
}
.fx-mw > .mono {
  left: 50%;
  top: 8px;
  translate: -50% 0;
}
.fx-mh {
  left: calc(var(--x) * 100% + 5px);
  top: calc(var(--y) * 100%);
  width: 6px;
  height: calc(var(--h) * 100%);
  border: 1.5px solid #ff8a9d;
  border-left: 0;
}
.fx-mh > .mono {
  left: 10px;
  top: 50%;
  translate: 0 -50%;
}
.fx-data.sc-armed [data-fx-m]:not(.on) {
  opacity: 0;
}
.fx-noterow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  color: var(--fg);
  font-size: 12.5px;
}
.fx-noterow b {
  font-weight: var(--fw-strong);
}
.fx-words {
  padding: 1px 5px;
  border-radius: 4px;
  transition: background 0.35s;
}
.fx-words.lit {
  background: color-mix(in srgb, var(--brand) 24%, transparent);
}
.fx-gets {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px 14px 14px 0;
}
.fx-rows {
  margin: 0;
}
.fx-rows > div {
  transition:
    background 0.35s,
    opacity 0.35s;
}
.fx-rows > div.lit {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.fx-data.sc-armed .fx-rows > div:not(.in) {
  opacity: 0;
}
.fx-thumb {
  display: block;
  border-radius: 5px;
}
@media (max-width: 760px) {
  .fx-data-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .fx-gets {
    padding: 0 14px 14px;
  }
}

/* ---- asking: the question on the frame, the agent's list beside it; Compare and pick over both, then its toast */
.fx-ask-body {
  position: relative;
}
.fx-does {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-left: 1px solid var(--line);
}
.fx-does .fx-steps {
  --fx-h: 220px;
}
.fx-dlg {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 16px;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100% - 24px));
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  translate: -50% 0;
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.fx-dlg:not(.in) {
  opacity: 0;
  scale: 0.97;
}
.fx-dlg p {
  margin: 0;
}
.fx-dlg-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
}
.fx-dlg-h b {
  font-size: 14px;
  font-weight: var(--fw-strong);
}
.fx-dlg-h span,
.fx-dlg-level {
  color: var(--muted);
  font-size: 11px;
}
.fx-dlg-q {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-2);
  font-size: 12.5px;
}
.fx-dlg-q b {
  color: var(--fg);
}
.fx-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.fx-group {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.fx-group-h {
  color: var(--faint);
  font: var(--fw-ui) 10px / 1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-take {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 5px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  transition:
    border-color 0.3s,
    background 0.3s;
}
.fx-take.picked {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 9%, var(--panel-2));
}
.fx-take b {
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.fx-play {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r-full);
  background: var(--fg);
  color: var(--page);
  transition: transform 0.12s;
}
.fx-play .ic {
  width: 10px;
  height: 10px;
}
.fx-lvl i {
  background: var(--brand);
}
.fx-take:not(.playing) .fx-lvl {
  opacity: 0.3;
}
.fx-take.playing .fx-lvl i {
  animation: sc-level 0.8s ease-in-out infinite alternate;
}
.fx-pick {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition:
    transform 0.12s,
    background 0.3s,
    color 0.3s;
}
.fx-take.picked .fx-pick {
  border-color: transparent;
  background: var(--raise-sheen), var(--brand-deep);
  color: var(--on-brand);
}
.fx-pick .ic {
  width: 11px;
  height: 11px;
}
.fx-play.press,
.fx-pick.press {
  transform: scale(0.93);
}
.fx-dlg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--float-line);
}
.fx-dlg-foot .mono {
  color: var(--muted);
  font-size: 10.5px;
}
.fx-sendpicks {
  height: 28px;
  font-size: 12px;
}
.fx-toast {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  font-size: 12px;
  white-space: nowrap;
  translate: -50% 0;
  transition:
    opacity 0.3s,
    translate 0.4s var(--ease-out);
}
.fx-toast .ic {
  color: var(--ok);
}
.fx-toast:not(.in) {
  opacity: 0;
  translate: -50% 8px;
}
.fx-heard {
  flex: 1;
}
@media (max-width: 760px) {
  .fx-does {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .fx-dlg {
    top: 10px;
    gap: 8px;
    padding: 12px;
  }
  .fx-groups {
    gap: 8px;
  }
  .fx-take {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
  }
  .fx-take b {
    font-size: 12px;
  }
  .fx-lvl {
    display: none;
  }
}

/* ---- live: the sidebar's Agents, the player's top bar with the agent's button, and the side panel on Agent: the run
   strip (the app's runs.css) and the Agent view (agentview.css). Every state is stacked in its place (.fx-stack), so the
   panel is as tall as its tallest state and nothing moves */
.fx-live-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 340px;
}
.fx-nav {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px 10px;
  border-right: 1px solid var(--line);
}
.fx-nav p {
  margin: 0;
}
.fx-nav-h {
  padding: 0 6px 4px;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-nav-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 8px;
}
.fx-nav-row.on {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
}
.fx-nav-row .ag-logo {
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--claude);
}
.fx-nav-row .fx-off {
  color: var(--faint);
}
.fx-nav-name {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 12px;
}
.fx-nav-name b {
  font-weight: var(--fw-strong);
}
.fx-nav-name > span,
.fx-nav-name .fx-stack > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.fx-live-main {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
}
/* the player's picture on its dark stage, centred in whatever height the panel beside it gives, the timeline under it */
.fx-live-pic {
  display: grid;
  align-content: center;
  background: #0a0a0a;
}
.fx-live-top .pl-agent .ag-logo {
  width: 14px;
  height: 14px;
  color: var(--claude);
}
.fx-live-top .pl-agent .pl-swap {
  color: var(--fg-2);
}
/* the side panel: its tabs, the strip across it, the Agent view */
.fx-side {
  display: grid;
  align-content: start;
  min-width: 0;
  border-left: 1px solid var(--line);
  background: var(--panel);
}
.fx-side p {
  margin: 0;
}
.fx-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 46px;
  padding: 0 12px;
  font-size: 12px;
}
.fx-tabs span {
  padding: 4px 9px;
  border-radius: 7px;
  color: var(--muted);
}
.fx-tabs .on {
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg);
  font-weight: var(--fw-strong);
}
/* a glyph's colour by what the line says (the app's .run-kg) */
.fx-rkg {
  flex: none;
  width: 10px;
  height: 10px;
}
.fx-rkg.live {
  color: var(--claude);
}
.fx-rkg.ask {
  color: var(--claude-2, var(--claude));
}
.fx-rkg.ok {
  color: var(--ok);
}
.fx-rkg.quiet {
  color: var(--muted);
}
.fx.sc-armed .fx-rkg.live {
  animation: sc-turn 3.2s var(--ease-in-out) infinite;
}
.fx-strip {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--ink-1, var(--page));
}
.fx-strip-s > [data-s] {
  display: flex;
  align-items: center;
}
.fx-strip-l {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.35;
}
.fx-strip-l .ag-logo {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--claude);
}
.fx-strip-w {
  flex: 1 1 0;
  min-width: 9em;
}
.fx-strip-w b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.fx-strip-fig {
  flex: none;
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fx-strip-act {
  flex: none;
  height: 26px;
  padding-inline: 10px;
  font-size: 11.5px;
}
/* the 2 px edge along the strip's foot that fills while an upload says how far it is (ink, never the brand's orange) */
.fx-edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--fg-2);
  transform: scaleX(var(--edge, 0));
  transform-origin: left;
}
.fx-av {
  display: grid;
  gap: 8px;
  padding: 12px 12px 14px;
  font-size: 12px;
}
.fx-av-k {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px !important;
  color: var(--faint);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fx-av-k .mono {
  letter-spacing: 0;
  text-transform: none;
}
.fx-av-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.fx-av-kg {
  align-self: center;
}
.fx-av-tc {
  color: var(--muted);
  font-size: 11px;
}
.fx-av-text {
  color: var(--fg);
}
.fx-av-w {
  justify-items: end;
}
.fx-av-word {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.fx-av-word.live {
  color: var(--fg-2);
}
.fx-av-word.ask {
  color: var(--claude-2, var(--claude));
}
.fx-av-word.ok {
  color: var(--ok);
}
.fx-av-now > .fx-stack > [data-s] {
  display: grid;
  gap: 6px;
}
.fx-av-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--fg-2);
}
.fx-av-line .fx-rkg {
  align-self: center;
}
.fx-av-line.quiet {
  color: var(--muted);
}
.fx-av-q {
  padding-left: 10px;
  border-left: 2px solid var(--line-2);
  color: var(--muted);
  font-style: italic;
  quotes: '“' '”';
}
.fx-side .fx-steps {
  --keep: 4;
  --fx-h: 156px;
}
@media (max-width: 960px) {
  .fx-live-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .fx-nav {
    display: none;
  }
  .fx-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 560px) {
  .fx-live-top .pl-agent .pl-swap {
    display: none;
  }
}

/* ---- V2's answers: the picture with what changed, the timeline, the three notes and their answers */
.fx-ans-main {
  display: grid;
  align-content: start;
  min-width: 0;
}
.fx-ans .sc-tl {
  margin: 0 14px;
}
.fx-key.must {
  color: var(--must);
}
.fx-key.should {
  color: var(--should);
}
.fx-key.info {
  color: var(--claude);
}
.fx-chg {
  transition: opacity 0.4s;
}
.fx-ans.sc-armed [data-fx-chg]:not(.on) {
  opacity: 0;
}
.fx-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  margin: 0;
}
.fx-who b {
  margin-right: 2px;
  font-size: 12px;
  font-weight: var(--fw-strong);
}
.fx-ans .sc-diff > .mono {
  font-size: 10px;
}
.fx-notes {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--line);
}
.fx-wont .kg {
  width: 10px;
  height: 10px;
  color: var(--muted);
}
.fx-info {
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.fx-ans.sc-armed .fx-info:not(.on) {
  opacity: 0;
  translate: 0 6px;
}
.fx-stagepill .kg {
  width: 9px;
  height: 9px;
  margin-right: 5px;
}
.fx-short {
  display: none;
}
@media (max-width: 560px) {
  .fx-stagepill .fx-long {
    display: none;
  }
  .fx-stagepill .fx-short {
    display: inline;
  }
}
@media (max-width: 760px) {
  .fx-notes {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Approve it's page (pages/products/approve.ts, assets/products/approve.js): build.ts adds it to the site's stylesheet.
   The player, the phone and the buttons are the home page's (.pl-*, .sc-phone, .sc-btn); the stage's colours are the
   app's status.css: one colour per stage, always beside its glyph and words. */

/* the words a scene isn't showing are hidden, not only faded: they fade out, then hide (and come back at once) */
:is(.apv-hero, .apv-every, .apv-ver, .apv-fin, .apv-board) .pl-swap > span {
  transition:
    opacity 0.35s,
    visibility 0s linear 0.35s;
}
:is(.apv-hero, .apv-every, .apv-ver, .apv-fin, .apv-board) .pl-swap > span:not(.on) {
  visibility: hidden;
}
:is(.apv-hero, .apv-every, .apv-ver, .apv-fin, .apv-board) .pl-swap > span.on {
  transition:
    opacity 0.35s,
    visibility 0s;
}

/* ---- a stage's colour (web/src/styles/status.css), by data-st */
[data-st] {
  --st: var(--fg-2);
  --st-bg: color-mix(in srgb, var(--fg) 6%, transparent);
}
[data-st='changes'] {
  --st: var(--should);
  --st-bg: var(--should-bg);
}
[data-st='in_progress'] {
  --st: var(--claude);
  --st-bg: var(--claude-bg);
}
[data-st='check_fixes'] {
  --st: var(--nice);
  --st-bg: color-mix(in srgb, var(--nice) 10%, transparent);
}
[data-st='team_approved'],
[data-st='with_client'],
[data-st='client_approved'] {
  --st: var(--ok);
  --st-bg: var(--ok-bg);
}
[data-st='final'] {
  --st: var(--fg);
  --st-bg: color-mix(in srgb, var(--fg) 12%, transparent);
}
.apv-kg {
  display: inline-grid;
  flex: none;
  color: var(--st);
}
.apv-kg .kg {
  width: 12px;
  height: 12px;
}
/* the stage as a badge (StatusPill): its glyph and words in its colour */
.apv-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-full);
  background: var(--st-bg);
  color: var(--st);
  font-size: 11px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.apv-pill .kg {
  width: 9px;
  height: 9px;
}
.apv-next .ic {
  width: 13px;
  height: 13px;
}
.apv-next,
.apv-decide {
  white-space: nowrap;
}
.apv-wait {
  color: var(--muted);
  white-space: nowrap;
}
.apv-eye {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.apv-eye .ic {
  width: 12px;
  height: 12px;
}
.apv-eye [data-apv-pct] {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.apv-agent {
  color: var(--claude);
  font-weight: var(--fw-strong);
}

/* ---- the five steps (StageStepper.tsx): keyframes on a track, settled ones solid in the stage's colour, where it is
   hollow and larger, what is ahead faint */
.apv-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.apv-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: var(--fw-strong);
  transition: color 0.35s;
}
.apv-steps li + li::before {
  content: '';
  position: absolute;
  top: 6px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-2);
  transition: background 0.35s;
}
.apv-steps li.done + li::before {
  background: var(--st);
}
.apv-dot {
  position: relative;
  z-index: 1;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  background: var(--panel);
}
.apv-dot .kg {
  grid-area: 1 / 1;
  width: 12px;
  height: 12px;
  color: var(--line-3);
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring),
    color 0.35s;
}
.apv-dot .kg + .kg {
  opacity: 0;
}
.apv-steps li.done {
  color: var(--muted);
}
.apv-steps li.done .kg {
  color: var(--st);
}
.apv-steps li.done .kg:first-child {
  opacity: 0;
}
.apv-steps li.done .kg + .kg {
  opacity: 1;
}
.apv-steps li.now {
  color: var(--fg);
}
.apv-steps li.now .kg {
  color: var(--st);
  scale: 1.2;
}

/* ---- the history (ApprovalHistory.tsx): who decided what, newest first; the team grey, the client green, final in
   the text's colour */
.apv-history {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}
.apv-history li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.apv-party {
  flex: none;
  min-width: 46px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--ink-4);
  color: var(--fg-2);
  font-size: 10px;
  font-weight: var(--fw-strong);
  text-align: center;
}
.apv-party.client {
  background: var(--ok-bg);
  color: var(--ok);
}
.apv-party.final {
  background: var(--fg);
  color: var(--on-fg);
}
.apv-h-main {
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: 11.5px;
}
.apv-h-main b {
  font-weight: var(--fw-strong);
}
.apv-h-main > span {
  color: var(--muted);
  font-size: 10.5px;
}

/* ---- the hero: the player beside the client's phone */
.apv-hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
}
.apv-phone {
  position: relative;
  z-index: 2;
  width: clamp(196px, 17vw, 220px);
}
/* the side keeps room for the five steps' words */
.apv-hero .apv-body {
  grid-template-columns: minmax(0, 1fr) 286px;
}
.apv-signoff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.apv-signoff > .pl-swap:first-child > span {
  justify-content: end;
  justify-self: end;
}
.apv-signoff > .pl-swap:first-child b {
  color: var(--st, var(--fg));
  font-weight: var(--fw-strong);
}
.apv-signoff [data-s='approved'],
.apv-signoff [data-s='watching'],
.apv-signoff [data-s='client'] {
  --st: var(--ok);
}
.apv-signoff [data-s='final'] {
  --st: var(--fg);
}
.apv-signoff > .pl-swap:last-child > span {
  justify-self: end;
}
.apv-body {
  position: relative;
}
.apv-side {
  gap: 12px;
  padding: 14px;
}
.apv-where {
  display: grid;
  gap: 10px;
  padding: 12px 10px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.apv-detail,
.apv-nextline {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
}
.apv-detail {
  color: var(--fg);
}
.apv-nextline {
  color: var(--muted);
}
.apv-detail .pl-swap > span,
.apv-nextline .pl-swap > span {
  white-space: normal;
}
.apv-h {
  margin: 2px 0 -4px;
  color: var(--faint);
  font: var(--fw-ui) 10px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* the rows stand in slots: one that comes in takes the top, the others move down a slot (by transform) */
.apv-side .apv-history {
  height: calc(5 * 42px);
}
.apv-side .apv-history li {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38px;
  transform: translateY(calc(var(--slot) * 42px));
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.4s;
}
.apv-hero.sc-armed .apv-history li:not(.in) {
  opacity: 0;
}
.apv-strip {
  display: none;
}
/* the client's review link on her phone (GuestPlayer.tsx): the video's name and the link, the film, how far she
   watched, Approve; then her decision and the thanks */
.apv-g-top {
  position: absolute;
  z-index: 1;
  top: 34px;
  left: 14px;
  right: 14px;
  display: grid;
  gap: 2px;
  color: #eeebe4;
  font-size: 10.5px;
  text-align: center;
}
.apv-g-top b {
  font-size: 11.5px;
}
.apv-g-top span {
  color: #a7a39a;
}
.apv-g-pic {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  container-type: inline-size;
}
.apv-g-tl {
  position: absolute;
  top: calc(20% + 100cqw * 548 / 1280 + 12px);
  left: 12px;
  right: 12px;
  height: 3px;
  margin: 0;
  border-radius: 2px;
  background: rgb(255 255 255 / 0.25);
}
.apv-g-tl span {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #eeebe4;
  transform: scaleX(var(--p, 1));
  transform-origin: 0 50%;
}
.apv-g-foot {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 12px;
  display: grid;
  gap: 10px;
}
.apv-g-thanks {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgb(61 220 151 / 0.14);
  border: 1px solid rgb(61 220 151 / 0.35);
  color: #eeebe4;
  font-size: 10.5px;
  line-height: 1.4;
  transition:
    opacity 0.35s,
    translate 0.5s var(--ease-spring);
}
.apv-g-thanks .ic {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  color: #3ddc97;
}
.apv-g-acts {
  display: grid;
  margin: 0;
}
.apv-g-acts .pl-swap > span {
  justify-content: center;
}
.apv-g-approve {
  width: 100%;
  justify-content: center;
}
.apv-g-verdict {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 30px;
  border-radius: var(--r);
  background: rgb(61 220 151 / 0.16);
  color: #3ddc97;
  font-size: 12px;
  font-weight: var(--fw-strong);
}
.apv-phone .ic.sm {
  width: 13px;
  height: 13px;
}
/* before she opens the link, the phone shows its lock screen */
.apv-phone > :not(.sc-notch) {
  transition: opacity 0.6s;
}
.apv-hero.sc-armed .apv-phone.asleep > :not(.sc-notch, .apv-lock),
.apv-hero.sc-armed .apv-phone.asleep::before {
  opacity: 0;
}
.apv-lock {
  position: absolute;
  top: 16%;
  left: 0;
  right: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: 0;
  color: #eeebe4;
  opacity: 0;
}
.apv-lock b {
  font: 600 44px / 1 var(--display);
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
}
.apv-lock span {
  color: #a7a39a;
  font-size: 11px;
}
.apv-hero.sc-armed .apv-phone.asleep .apv-lock {
  opacity: 1;
}
.apv-hero .pl-tc span,
.apv-hero .pl-chip {
  white-space: nowrap;
}
.apv-hero.sc-armed .apv-g-thanks:not(.in) {
  opacity: 0;
  translate: 0 6px;
}
.apv-hero .sc-cursor {
  z-index: 4;
}
.apv-hero .sc-cursor.tap svg {
  display: none;
}
.apv-hero .sc-cursor.tap::before {
  content: '';
  position: absolute;
  left: -11px;
  top: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, #eeebe4 30%, transparent);
  border: 1.5px solid rgb(238 235 228 / 0.9);
}
/* a narrow player: the steps, where it stands and the button under it; the phone under the player */
@container pl (max-width: 780px) {
  .apv-hero .apv-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .apv-signoff {
    display: none;
  }
  .apv-strip {
    display: grid;
    gap: 12px;
    padding: 14px 14px 16px;
    border-top: 1px solid var(--line);
  }
  .apv-strip-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-size: 12px;
  }
  .apv-strip-line .pl-swap:first-child > span {
    white-space: normal;
  }
}
@media (max-width: 900px) {
  .apv-hero-in {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
  }
  .apv-hero .pl-win {
    width: 100%;
    margin-right: 0;
  }
  .apv-phone {
    width: min(236px, 62vw);
  }
}

/* ---- one stage, every screen: the player's top bar over the film, the library's card and the board's card beside it,
   what the agent reads at the foot; all change together, a glow on each as it says the new stage */
.apv-ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
.apv-ev-player {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.apv-ev-top {
  justify-content: start;
}
.apv-ev-top .pl-file b {
  font-size: 12.5px;
}
.apv-ev-stage {
  display: inline-flex;
  min-width: 0;
}
.apv-ev-stage > .pl-swap {
  justify-items: end;
}
.apv-ev-stage > .pl-swap > span {
  justify-content: end;
  gap: 9px;
}
.apv-ev-stage b {
  color: var(--st, var(--fg));
  font-weight: var(--fw-strong);
}
.apv-ev-stage [data-s='out'] b {
  color: var(--ok);
}
.apv-ev-pic,
.apv-fin-pic {
  position: relative;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  background: #050505;
  container-type: inline-size;
}
.apv-ev-pic .sc-vid,
.apv-fin-pic .sc-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apv-ev-pic .sc-line .pl-swap > span {
  justify-content: center;
}
.apv-ev-side {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px;
}
.apv-ev-h {
  margin: 4px 2px 0;
  color: var(--muted);
  font: var(--fw-ui) 10px / 1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.apv-ev-h:first-child {
  margin-top: 0;
}
.apv-ev-card {
  position: relative;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.apv-ev-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  background: #050505;
}
.apv-ev-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apv-ev-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.apv-ev-text > b {
  font-size: 12px;
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}
.apv-ev-where {
  color: var(--muted);
  font-size: 11px;
}
.apv-ev-pill .pl-swap > span,
.apv-ev-line .pl-swap > span,
.apv-ev-cta .pl-swap > span {
  justify-content: start;
}
.apv-ev-line {
  display: flex;
  color: var(--fg-2);
  font-size: 11.5px;
}
.apv-ev-line .ic {
  width: 12px;
  height: 12px;
  color: var(--muted);
}
.apv-ev-cta {
  display: grid;
  min-height: 22px;
}
.apv-ev-lane {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 3.5%, transparent);
}
.apv-ev-lane-h {
  display: flex;
  margin: 0;
  padding: 0 2px;
  color: var(--fg-2);
}
.apv-ev-lane-h .pl-swap > span {
  justify-content: start;
  gap: 6px;
}
.apv-ev-lane-h .kg {
  width: 10px;
  height: 10px;
  color: var(--muted);
}
.apv-ev-lane-h b {
  font-weight: var(--fw-strong);
}
/* what the agent reads: one quiet mono line at the window's foot */
.apv-reads {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 10.5px;
  line-height: 1.5;
  text-align: left;
}
.apv-reads-k {
  color: var(--muted);
  font: var(--fw-ui) 10px / 1.5 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.apv-reads .pl-swap > span {
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
}
.apv-reads-cmd {
  margin-right: 8px;
  color: var(--muted);
}
/* every place says it at once: a soft ring that comes and goes on each */
[data-apv-place]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--brand) 55%, transparent);
  opacity: 0;
  pointer-events: none;
}
[data-apv-place].apv-said::after {
  animation: apv-said 1.3s var(--ease-out);
}
@keyframes apv-said {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.apv-bar {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--page);
  border: 1px solid var(--line);
}
.apv-bar > .pl-swap {
  width: 100%;
}
.apv-bar > .pl-swap > span {
  justify-content: end;
  gap: 9px;
  white-space: nowrap;
}
.apv-bar b {
  color: var(--st, var(--fg));
  font-weight: var(--fw-strong);
}
.apv-note {
  color: var(--muted);
}
.apv-bcta {
  justify-self: start;
  align-self: end;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--raise-sheen), var(--panel-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--raise);
  color: var(--fg);
  font-size: 11px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
@media (max-width: 860px) {
  .apv-ev {
    grid-template-columns: minmax(0, 1fr);
  }
  .apv-ev-player {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .apv-ev-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .apv-ev-h {
    display: none;
  }
}
/* a narrow window: the top bar says only the stage; its words go under one another, the cards stand in a column */
@media (max-width: 560px) {
  .apv-ev-top .pl-file,
  .apv-ev-top .pl-gap {
    display: none;
  }
  .apv-ev-top {
    height: auto;
    min-height: 46px;
    padding-block: 8px;
  }
  .apv-ev-stage {
    flex: 1;
  }
  .apv-ev-stage > .pl-swap {
    width: 100%;
    justify-items: start;
  }
  .apv-ev-stage > .pl-swap > span {
    flex-wrap: wrap;
    justify-content: start;
    row-gap: 6px;
    white-space: normal;
  }
  .apv-ev-side {
    grid-template-columns: minmax(0, 1fr);
  }
  .apv-reads {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- decisions belong to a version: V3 and the V4 that arrives side by side, large; under them the top bar, the
   history and what the version diff found */
.apv-vv {
  position: relative;
  display: grid;
  gap: 16px;
  padding: 16px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
.apv-vv-pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.apv-vv-card {
  display: grid;
  gap: 8px;
}
.apv-vv-pic {
  position: relative;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  border-radius: 8px;
  background: #050505;
  container-type: inline-size;
}
.apv-vv-pic .sc-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apv-vv-cap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.apv-vv-cap b {
  font-size: 13px;
  font-weight: var(--fw-strong);
}
.apv-vv-pill .pl-swap > span {
  justify-content: start;
}
.apv-vv-by {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.apv-vv-new {
  transition:
    opacity 0.45s,
    transform 0.6s var(--ease-spring);
}
.apv-ver.sc-armed .apv-vv-new:not(.in) {
  opacity: 0;
  transform: translateX(18px) scale(0.97);
}
.apv-vv-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.apv-vv-left {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.apv-vv-bar {
  font-size: 12px;
}
.apv-vv-detail {
  margin: 0 2px;
  color: var(--muted);
  font-size: 11.5px;
}
.apv-vv-history {
  display: grid;
  gap: 8px;
}
.apv-vv-history .apv-party {
  font-size: 11px;
}
.apv-vv-history .apv-h-main {
  font-size: 12px;
}
.apv-vv-history .apv-h-main > span {
  font-size: 11px;
}
.apv-vv-history li {
  transition: opacity 0.45s;
}
.apv-ver.sc-armed [data-apv-carried]:not(.in) {
  opacity: 0;
}
.apv-diff {
  display: grid;
  gap: 9px;
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition: opacity 0.4s;
}
.apv-ver.sc-armed .apv-diff:not(.in) {
  opacity: 0;
}
.apv-diff-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
}
.apv-diff-h b {
  font-weight: var(--fw-strong);
}
.apv-diff-h .pl-swap > span {
  justify-content: end;
}
.apv-cmp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 11.5px;
}
.apv-spin {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: apv-spin 0.8s linear infinite;
}
@keyframes apv-spin {
  to {
    rotate: 1turn;
  }
}
.apv-badge-ok {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--ok-bg);
  color: var(--ok);
  font-family: var(--mono);
  font-size: 11px;
}
.apv-diff ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.apv-diff li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--fg-2);
  font-size: 12px;
  transition:
    opacity 0.35s,
    translate 0.45s var(--ease-out);
}
.apv-diff li .ic {
  width: 13px;
  height: 13px;
  color: var(--ok);
}
.apv-ver.sc-armed .apv-diff li:not(.in) {
  opacity: 0;
  translate: -6px 0;
}
/* a toast, as the app's: over the pictures, then gone */
.apv-toast {
  position: absolute;
  z-index: 2;
  top: 14px;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: #1b1a18;
  color: #eeebe4;
  font-size: 12px;
  white-space: nowrap;
  translate: -50% 0;
  transition:
    opacity 0.3s,
    translate 0.5s var(--ease-spring);
}
.apv-toast .ic {
  width: 13px;
  height: 13px;
  color: #3ddc97;
}
.apv-ver.sc-armed .apv-toast:not(.in),
.apv-fin.sc-armed .apv-toast:not(.in),
.apv-ver:not(.sc-armed) .apv-toast,
.apv-fin:not(.sc-armed) .apv-toast {
  opacity: 0;
  translate: -50% -8px;
}
.apv-ver .sc-cursor,
.apv-fin .sc-cursor {
  z-index: 4;
}
@media (max-width: 760px) {
  .apv-vv {
    padding: 12px;
  }
  .apv-vv-pair {
    gap: 10px;
  }
  .apv-vv-foot {
    grid-template-columns: minmax(0, 1fr);
  }
  .apv-vv-by {
    display: none;
  }
}
/* a narrow bar: the button goes under what it says, whole */
@media (max-width: 560px) {
  .apv-bar > .pl-swap > span {
    flex-wrap: wrap;
    justify-content: start;
    row-gap: 6px;
    padding-block: 8px;
  }
}

/* ---- final: the player at its stage over the film, the notes beside it, what the agent reads at the foot */
.apv-fin-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
.apv-fin-main {
  position: relative;
  min-width: 0;
  border-right: 1px solid var(--line);
}
.apv-fin-side {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}
.apv-fin-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 2px;
}
.apv-fin-h b {
  font-size: 13px;
  font-weight: var(--fw-strong);
}
.apv-fin-h > span {
  display: inline-grid;
  color: var(--muted);
  font-size: 11px;
}
.apv-fin-note .pl-tag,
.apv-fin-note .pl-sev {
  font-size: 10.5px;
}
.apv-fin-note .pl-av {
  width: 22px;
  height: 22px;
  font-size: 10px;
}
.apv-fin-note {
  transition:
    opacity 0.45s,
    translate 0.55s var(--ease-out);
}
.apv-fin.sc-armed [data-apv-anote]:not(.in) {
  opacity: 0;
  translate: 0 8px;
}
@media (max-width: 860px) {
  .apv-fin-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .apv-fin-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- the board: four lanes, a card in each, and the launch film moved from lane to lane (by transform, over the
   empty slot every lane keeps) */
.apv-lanes {
  --gap: 10px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  padding: 12px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
/* the board's window is the container its layout asks (the lanes stand as rows when it is narrow) */
.apv-board > .sc-win {
  container: apvb / inline-size;
}
.apv-lane {
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: start;
  gap: 10px;
  padding: 0 8px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 2.5%, transparent);
  border: 1px solid var(--line);
  transition:
    opacity 0.3s,
    border-color 0.3s,
    background 0.3s;
}
.apv-lane-h {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  margin: 0 0 -10px;
  padding: 0 4px;
  color: var(--fg);
  white-space: nowrap;
}
.apv-lane-h .kg {
  width: 10px;
  height: 10px;
  color: var(--should);
}
.apv-lane-h b {
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.apv-lane:nth-child(2) .apv-lane-h .kg {
  color: var(--claude);
}
.apv-lane:nth-child(3) .apv-lane-h .kg {
  color: var(--ok);
}
.apv-lane:nth-child(4) .apv-lane-h .kg {
  color: var(--fg-2);
}
.apv-lane-h .mono {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}
.apv-lane.dim {
  opacity: 0.35;
}
.apv-lane.target {
  border-color: color-mix(in srgb, var(--fg) 30%, transparent);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.apv-bcard {
  display: grid;
  align-content: start;
  padding: 6px 6px 9px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  min-width: 0;
}
.apv-bcard b {
  margin-top: 8px;
  padding: 0 3px;
  font-size: 12.5px;
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}
.apv-bthumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 6px;
  background: #050505;
}
.apv-bthumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.apv-bwhere {
  padding: 0 3px;
  color: var(--muted);
  font-size: 11px;
}
.apv-bline {
  display: flex;
  align-items: center;
  padding: 3px 3px 0;
  color: var(--fg-2);
  font-size: 11.5px;
}
.apv-bline .ic {
  width: 12px;
  height: 12px;
  color: var(--muted);
}
.apv-bline .pl-swap > span {
  justify-content: start;
}
.apv-bline .kg {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  color: var(--fg-2);
}
.apv-bline .kg.st-tr {
  color: var(--should);
}
.apv-bline .kg.st-ip {
  color: var(--claude);
}
.apv-bline .kg.st-ap {
  color: var(--ok);
}
.apv-bline .kg.st-fi {
  color: var(--fg);
}
/* the slot's room is an invisible card of the film's shape */
.apv-sizer {
  visibility: hidden;
}
.apv-bcta {
  justify-self: start;
  align-self: end;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--raise-sheen), var(--panel-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--raise);
  color: var(--fg);
  font-size: 11px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
/* the room a lane keeps for the film: shown where it will land while it moves */
.apv-slot {
  border-radius: 10px;
  border: 1px dashed transparent;
  transition: border-color 0.3s;
}
.apv-lane.target .apv-slot {
  border-color: var(--line-3);
}
/* the film's card: in the first lane's slot, moved a lane at a time (a lane is the slot's width, its padding and the
   gap); picked up while it moves */
.apv-slot {
  position: relative;
}
.apv-film {
  position: absolute;
  z-index: 2;
  inset: -1px;
  height: auto;
  border-color: color-mix(in srgb, var(--brand) 50%, var(--line-2));
  box-shadow: var(--shadow-float);
  transform: translateX(calc(var(--lane) * (100% + 16px + var(--gap))));
  transition:
    transform 0.9s var(--ease-out),
    box-shadow 0.3s,
    rotate 0.3s,
    scale 0.3s;
}
.apv-film.lifted {
  box-shadow: var(--shadow-float);
  rotate: 1.5deg;
  scale: 1.03;
}
.apv-drop {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: -11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--fg);
  color: var(--page);
  font-size: 10px;
  white-space: nowrap;
  translate: -50% 0;
  opacity: 0;
  transition: opacity 0.25s;
}
.apv-drop.on {
  opacity: 1;
}
.apv-board-ask {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: min(360px, calc(100% - 32px));
  translate: -50% -50%;
}
.apv-dialog {
  display: grid;
  gap: 10px;
  padding: 16px 16px 14px;
  border-radius: 12px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.apv-dialog-t {
  margin: 0;
  color: var(--fg);
  font-size: 13.5px;
  font-weight: var(--fw-strong);
}
.apv-dialog-b {
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
  line-height: 1.5;
}
.apv-dialog-acts {
  display: flex;
  justify-content: end;
  gap: 8px;
  margin: 4px 0 0;
}
.apv-dialog-ok {
  padding-right: 12px;
}
.apv-dialog-ok.press,
.apv-next.press,
.apv-g-approve.press {
  transform: translateY(1px) scale(0.97);
}
.apv-board.sc-armed .apv-board-ask:not(.on) {
  opacity: 0;
  scale: 0.96;
}
.apv-board:not(.sc-armed) .apv-board-ask {
  display: none;
}
.apv-board .sc-cursor {
  z-index: 5;
}
/* a phone: the lanes stand as rows, each with its cards side by side, as the landing board's (a 52 px picture, the
   name and the stage beside it, 64 px tall); the film moves from row to row: a row is its border, a 30 px head, 6 px, a
   64 px card, 6 px, its border, and 8 px to the next (116 px: the film's 66 px and 50) */
@container apvb (max-width: 640px) {
  .apv-lanes {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }
  .apv-lane {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: 30px 64px;
    gap: 6px;
    padding: 0 6px 6px;
  }
  .apv-lane-h {
    grid-column: 1 / -1;
    height: 30px;
    margin: 0;
  }
  .apv-lane-h b {
    font-size: 11.5px;
  }
  .apv-bcard,
  .apv-slot {
    height: 64px;
  }
  .apv-bcard {
    grid-template-columns: 52px minmax(0, 1fr);
    align-content: center;
    column-gap: 8px;
    padding: 5px 7px 5px 5px;
  }
  .apv-bthumb {
    grid-row: 1 / 3;
    align-self: center;
    border-radius: 4px;
  }
  .apv-bcard b {
    margin: 0;
    padding: 0;
    font-size: 10.5px;
    line-height: 1.25;
  }
  .apv-bwhere {
    display: none;
  }
  .apv-bline {
    grid-column: 2;
    padding: 2px 0 0;
    font-size: 10px;
    line-height: 1.25;
  }
  .apv-film {
    transform: translateY(calc(var(--lane) * (100% + 50px)));
  }
}

/* Auto-check's page (pages/products/autoCheck.ts, assets/products/auto-check.js): build.ts adds it to the site's
   stylesheet. */
/* ---- Auto-check's findings as the app shows them (web/src/player/AutoCheck.tsx, autocheck.css), at the scenes' scale:
   the popover's head, each finding with its frame, kind, where, what and guess, opened with why and the two ways out */
.qa-pop {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  min-width: 0;
  border-radius: 12px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.qa-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 8px 4px 12px;
  border-bottom: 1px solid var(--float-line);
}
.qa-head b {
  flex: none;
  font-size: 13px;
  font-weight: var(--fw-strong);
}
.qa-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--claude-2);
}
.qa-sum {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}
.qa-rerun {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 11px;
}
.qa-rerun .ic {
  width: 12px;
  height: 12px;
}
/* while it runs: the progress along the head's foot */
.qa-prog {
  height: 2px;
  margin-top: -2px;
  background: var(--claude);
  transform: scaleX(var(--p, 1));
  transform-origin: 0 50%;
  opacity: 0;
  transition: opacity 0.3s;
}
.qa-body {
  display: grid;
  align-content: start;
  gap: 4px;
  min-height: 0;
  padding: 6px 6px 8px;
}
.qa-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  min-width: 0;
}
.qa-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
  padding: 8px;
  border-radius: 8px;
}
.qa-row.open {
  background: var(--float-sel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent);
}
.qa-thumb {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 35px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--ink-0);
  box-shadow: 0 0 0 1px var(--line-2);
  color: var(--faint);
}
.qa-thumb > .ic {
  width: 16px;
  height: 16px;
}
.qa-pic {
  position: absolute;
  inset: 0;
}
.qa-pic.sc-stage {
  inset: 50% 0 auto;
  translate: 0 -50%;
}
.qa-pic.tall {
  inset: 0 auto;
  left: 50%;
  aspect-ratio: 9 / 16;
  translate: -50% 0;
}
.qa-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.qa-play {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: var(--r-full);
  background: rgb(7 7 7 / 0.7);
  color: #eeebe4;
}
.qa-play .ic {
  width: 7px;
  height: 7px;
}
.qa-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.qa-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  min-width: 0;
}
.qa-label {
  --k: var(--nice);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.qa-label .ic {
  width: 12px;
  height: 12px;
  color: var(--k);
}
.qa-label.should {
  --k: var(--should);
}
.qa-where {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  min-width: 0;
  color: var(--muted);
  font: 10px var(--mono);
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}
.qa-where > span {
  white-space: nowrap;
}
.qa-what {
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.qa-quote {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.qa-verdict {
  display: flex;
  align-items: baseline;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.qa-verdict .kg {
  flex: none;
  width: 9px;
  height: 9px;
  translate: 0 1px;
}
.qa-verdict.problem .kg {
  color: var(--should);
}
.qa-verdict.intended .kg {
  color: var(--ok);
}
.qa-v-long,
.qa-why,
.qa-acts {
  display: none;
}
.qa-row.open .qa-v-short {
  display: none;
}
.qa-row.open .qa-v-long {
  display: inline;
}
.qa-row.open .qa-why {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.qa-row.open .qa-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
  color: var(--fg);
  font-size: 11.5px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition: transform 0.15s;
}
.qa-btn.quiet {
  background: transparent;
  box-shadow: none;
  color: var(--fg-2);
}
.qa-btn .ic {
  width: 12px;
  height: 12px;
}
.qa-btn.press {
  transform: scale(0.95);
}
.qa-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-self: start;
  height: 24px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11.5px;
}
.qa-more .ic {
  width: 11px;
  height: 11px;
}
.qa-about {
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid var(--float-line);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
}
.qa-spin {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: qa-spin 0.8s linear infinite;
}
@keyframes qa-spin {
  to {
    rotate: 1turn;
  }
}
/* the picked finding on the frame: dashed amber with its name, as the player marks it (web/src/player/marks.ts) */
.acp-box,
.acr-qa,
.acz-qa {
  position: absolute;
  border: 1.5px dashed #ffc043;
  border-radius: 3px;
  background: rgb(255 192 67 / 0.12);
}
.acp-box > .mono,
.acr-qa > .mono,
.acz-qa > .mono {
  position: absolute;
  left: 0;
  bottom: calc(100% + 3px);
  color: #ffc043;
  font-size: max(8px, 1.05cqw);
  letter-spacing: 0.06em;
  text-shadow: 0 0 3px rgb(0 0 0 / 0.85);
  white-space: nowrap;
}

/* ---- the hero (scenes.js acplayer): the home page's player with V1 just in. The chip in the notes panel's head, the
   dock's loudness and freezes, the findings as hollow diamonds on the timeline and a freeze as a bar under them, the
   popover open on the typo with its box on the frame */
.acp-body {
  position: relative;
}
.acp .sc-card.off {
  opacity: 0;
}
.acp-box {
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-spring);
}
.acp-stage .kg {
  color: var(--fg-2);
}
.acp-dock .pl-swap > span {
  justify-content: end;
  gap: 8px;
}
.pl-chip .ic {
  width: 11px;
  height: 11px;
}
.pl-chip .qa-spin {
  width: 9px;
  height: 9px;
}
.acp-fz {
  color: var(--should);
  border-color: color-mix(in srgb, var(--should) 40%, var(--line));
}
.acp-dia {
  --k: var(--nice);
  position: absolute;
  top: 25px;
  left: calc(14px + var(--at) * (100% - 28px));
  width: 8px;
  height: 8px;
  translate: -50% 0;
  rotate: 45deg;
  border-radius: 1px;
  border: 1.5px solid var(--k);
  background: var(--page);
}
.acp-dia.should {
  --k: var(--should);
}
.acp-fzbar {
  position: absolute;
  top: 34px;
  left: calc(14px + var(--from) * (100% - 28px));
  width: max(3px, calc((var(--to) - var(--from)) * (100% - 28px)));
  height: 4px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--must) 85%, transparent);
}
.acp .pl-recb {
  margin-left: 0;
}
.acp .pl-tc span,
.acp .pl-new {
  white-space: nowrap;
}
.acp-chip {
  display: inline-grid;
  margin-left: auto;
}
.acp-chip .pl-swap > span {
  justify-self: end;
  justify-content: end;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--r-full);
  color: var(--muted);
  font-size: 11px;
}
.acp-chip [data-s='found'],
.acp-chip [data-s='two'],
.acp-chip [data-s='one'] {
  background: var(--should-bg);
  color: var(--should);
}
.acp-chip .kg {
  width: 9px;
  height: 9px;
}
.acp-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 36px 0 0;
  color: var(--muted);
}
.acp-empty .kg {
  width: 14px;
  height: 14px;
  color: var(--faint);
}
.acp-empty b {
  color: var(--fg-2);
  font-weight: var(--fw-strong);
}
.acp-pop {
  position: absolute;
  z-index: 3;
  top: 44px;
  right: 12px;
  width: clamp(300px, 38cqw, 392px);
  transform-origin: 100% 0;
  transition:
    opacity 0.28s var(--ease-out),
    scale 0.5s var(--ease-spring),
    translate 0.5s var(--ease-spring);
}
.acp.ac-running .qa-prog {
  opacity: 1;
}
.acp.sc-armed .acp-pop:not(.open) {
  opacity: 0;
  scale: 0.94;
  translate: 0 -6px;
}
.acp.sc-armed .acp-box:not(.on) {
  opacity: 0;
  transform: scale(0.96);
}
.acp.sc-armed [data-ac-hit] {
  transition:
    opacity 0.32s,
    scale 0.45s var(--ease-spring),
    translate 0.45s var(--ease-out);
}
.acp.sc-armed [data-ac-hit]:not(.ac-in) {
  opacity: 0;
}
.acp.sc-armed .acp-dia:not(.ac-in) {
  scale: 0.2;
}
.acp.sc-armed .qa-row:not(.ac-in) {
  translate: 0 6px;
}
.acp .sc-cursor,
.aca .sc-cursor {
  z-index: 4;
}
/* a phone: the findings are the player's sheet under it, there from the start */
@container pl (max-width: 780px) {
  .acp-pop {
    position: static;
    width: auto;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--page);
    box-shadow: none;
  }
  .acp.sc-armed .acp-pop:not(.open) {
    opacity: 1;
    scale: 1;
    translate: none;
  }
}

/* ---- the words on screen (scenes.js acread): the frame, and beside it what was read on it */
.acr-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
}
.acr-pic {
  display: grid;
  align-content: center;
  background: #050505;
  border-right: 1px solid var(--line);
}
.acr .sc-brand,
.acr .sc-line {
  width: fit-content;
  margin-inline: auto;
  border-radius: 2px;
  outline: 1px dashed transparent;
  outline-offset: 0.6cqw;
  transition: outline-color 0.3s;
}
.acr .sc-brand.read,
.acr .sc-line.read,
.acr:not(.sc-armed) .sc-brand {
  outline-color: rgb(255 255 255 / 0.65);
}
.acr-panel {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}
.acr-h {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
}
.acr-read {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.acr-read li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.acr-n {
  color: var(--faint);
  font-size: 10px;
}
.acr-t {
  overflow: hidden;
  color: var(--fg);
  font-size: 13px;
  white-space: pre;
}
.acr-typo {
  text-decoration: underline wavy transparent;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
  transition: text-decoration-color 0.3s;
}
.acr-typo.flag,
.acr:not(.sc-armed) .acr-typo {
  text-decoration-color: var(--should);
}
.acr-again {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 10px;
  border: 1px dashed var(--line-3);
}
/* the second reading: the line's first word cut out of the frame and shown larger */
.acr-lens {
  position: relative;
  height: 48px;
  overflow: hidden;
  border-radius: 6px;
  background: #050505;
  container-type: inline-size;
}
.acr-lens .sc-stage {
  position: absolute;
  width: calc(100cqw / var(--w));
  left: calc(-1 * var(--x) * 100cqw / var(--w));
  top: calc(24px - var(--y) * (100cqw / var(--w)) * 548 / 1280);
}
.acr-again-t {
  display: grid;
  gap: 2px;
  text-align: right;
}
.acr-again-t .mono {
  color: var(--muted);
  font-size: 10px;
}
.acr-again-t b {
  font-size: 13px;
}
.acr .qa-list .qa-row.open {
  background: var(--panel-2);
}
.acr.sc-armed [data-r] {
  transition:
    opacity 0.35s,
    translate 0.45s var(--ease-out),
    transform 0.5s var(--ease-spring);
}
.acr.sc-armed [data-r]:not(.on) {
  opacity: 0;
}
.acr.sc-armed .acr-panel [data-r]:not(.on) {
  translate: 0 6px;
}
.acr.sc-armed .acr-qa:not(.on) {
  transform: scale(0.96);
}
@media (max-width: 760px) {
  .acr-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .acr-pic {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- vertical video (scenes.js acreel): the zones named as the check names its findings, the reel with them over
   it, the finding its title makes */
.acz-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding: 26px 24px;
}
.acz-keys {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.acz-keys li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition:
    opacity 0.35s,
    border-color 0.35s;
}
.acz-keys li > span:last-child {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.acz-keys b {
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.acz-keys li > span:last-child > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.acz-keys li.hit,
.acz:not(.sc-armed) .acz-keys [data-z='ig-caption'] {
  border-color: color-mix(in srgb, var(--should) 55%, var(--line));
}
/* a zone's swatch: where it sits on a little screen */
.acz-sw {
  position: relative;
  width: 18px;
  height: 30px;
  border-radius: 4px;
  border: 1.5px solid var(--line-3);
}
.acz-sw::after {
  content: '';
  position: absolute;
  background: rgb(255 60 90 / 0.6);
  border-radius: 1px;
}
.acz-sw.ig-topbar::after {
  inset: 2px 2px auto;
  height: 4px;
}
.acz-sw.ig-icons::after {
  right: 2px;
  bottom: 2px;
  width: 3px;
  height: 12px;
}
.acz-sw.ig-caption::after {
  left: 2px;
  right: 6px;
  bottom: 2px;
  height: 5px;
}
.acz-sw.ig-crop::after {
  inset: 2px;
  background:
    linear-gradient(rgb(255 60 90 / 0.6), rgb(255 60 90 / 0.6)) 0 0 / 2px 100% no-repeat,
    linear-gradient(rgb(255 60 90 / 0.6), rgb(255 60 90 / 0.6)) 100% 0 / 2px 100% no-repeat;
}
.acz-phone {
  justify-self: center;
  width: 232px;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 26px;
  border: 6px solid #161617;
  background: #000;
  box-shadow:
    0 40px 90px -40px rgb(0 0 0 / 0.7),
    var(--shadow-float);
}
.acz-pic {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: inline-size;
}
.acz-zone {
  position: absolute;
  transition: opacity 0.4s;
}
.acz-zone.unsafe {
  background: repeating-linear-gradient(135deg, rgb(255 60 90 / 0.5) 0 2px, rgb(255 60 90 / 0.16) 2px 6px);
}
.acz-zone span {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgb(0 0 0 / 0.62);
  color: #fff;
  font: 600 7.5px / 1.25 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.acz-zone.side span {
  left: 50%;
  translate: -50% 0;
  padding: 4px 1px;
  writing-mode: vertical-rl;
}
.acz-zone.low span {
  top: auto;
  bottom: 4px;
}
.acz-title {
  position: absolute;
  left: 9%;
  top: 86.6%;
  color: #fff;
  font: 600 8cqw / 1 var(--display);
  font-stretch: 87.5%;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.5);
}
.acz-qa {
  left: 6.5%;
  top: 85%;
  width: 52%;
  height: 7.2%;
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-spring);
}
.acz-find .qa-row.open {
  background: var(--panel-2);
}
.acz.sc-armed [data-z]:not(.on) {
  opacity: 0;
}
.acz.sc-armed .acz-keys [data-z]:not(.on) {
  opacity: 0.32;
}
.acz.sc-armed .acz-qa:not(.on) {
  transform: scale(0.96);
}
.acz.sc-armed .acz-find {
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.acz.sc-armed .acz-find:not(.on) {
  translate: 0 8px;
}
@media (max-width: 900px) {
  .acz-body {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 20px;
    padding: 20px 16px;
  }
  .acz-keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .acz-phone {
    order: -1;
    width: min(232px, 64vw);
  }
}

/* ---- the picture (scenes.js acpicture): two holds, the clip, the time and the sound under it, the player's timeline
   zoomed in on the hold, the finding */
.acf-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
}
.acf-main {
  min-width: 0;
  border-right: 1px solid var(--line);
}
.acf-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
}
.acf-v {
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s;
}
.acf[data-round='a'] .acf-v.a,
.acf[data-round='b'] .acf-v.b {
  opacity: 1;
}
.acf-still {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgb(7 7 7 / 0.7);
  color: #eeebe4;
  font-size: 10.5px;
  opacity: 0;
  transition: opacity 0.2s;
}
.acf-still .ic {
  width: 12px;
  height: 12px;
}
.acf-still.on,
.acf:not(.sc-armed) .acf-still {
  opacity: 1;
}
.acf-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
}
.acf-tc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.acf-tc b {
  font-size: 15px;
  font-weight: var(--fw-strong);
}
.acf-tc span {
  color: var(--muted);
  font-size: 10px;
}
/* the sound as it plays: a level that moves while there is sound and lies flat in silence */
.acf-meter {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  margin-left: auto;
}
.acf-meter i {
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--ok);
  transform: scaleY(var(--l, 0.5));
}
.acf-sound {
  color: var(--muted);
  font-size: 10.5px;
}
.acf-sound .pl-swap > span {
  justify-content: start;
}
.acf-tl {
  position: relative;
  height: 76px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
.acf-lane {
  position: absolute;
  inset: 0;
  padding: 0 14px;
  opacity: 0;
  transition: opacity 0.4s;
}
.acf[data-round='a'] [data-f-lane='a'],
.acf[data-round='b'] [data-f-lane='b'] {
  opacity: 1;
}
.acf-hold {
  position: absolute;
  top: 34px;
  left: calc(14px + var(--from) * (100% - 28px));
  width: calc((var(--to) - var(--from)) * (100% - 28px));
  height: 4px;
  border-radius: 1px;
}
.acf-hold.flag {
  background: color-mix(in srgb, var(--must) 85%, transparent);
}
.acf-hold.quiet {
  background: color-mix(in srgb, var(--fg) 30%, transparent);
}
.acf-pill .ic {
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
}
.acf-pill {
  display: inline-flex;
  align-items: center;
}
/* a phone's bar has room for the file's name: the hold's chip is the timeline's bar and the finding there */
@media (max-width: 480px) {
  .acf-pill {
    display: none;
  }
}
.acf-side {
  position: relative;
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 14px;
}
.acf-pop {
  box-shadow: none;
}
.acf-pop .acf-find {
  padding: 6px;
}
.acf-find {
  display: grid;
}
.acf-find > ul {
  grid-area: 1 / 1;
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.acf-find .qa-row.open {
  background: var(--panel-2);
}
.acf.sc-armed [data-f-hit] {
  transition:
    opacity 0.35s,
    scale 0.45s var(--ease-spring);
}
.acf.sc-armed [data-f-hit]:not(.on),
.acf.sc-armed .acf-find > ul:not(.on) {
  opacity: 0;
}
.acf .acf-find .qa-row {
  transition: background 0.3s;
}
/* the tallest finding, open, holds the panel's room: the one shown opens and closes inside it, so nothing moves */
.acf-find > .acf-sizer {
  visibility: hidden;
}
.acf.sc-armed .acp-dia:not(.on) {
  scale: 0.2;
}
.acf.sc-armed .acf-find > ul:not(.on) {
  translate: 0 8px;
}
.acf .sc-cursor {
  z-index: 3;
}
.acf:not(.sc-armed) .acf-find > ul[data-f-row='b'],
.acf:not(.sc-armed) [data-f-lane='b'] {
  visibility: hidden;
}
@media (max-width: 760px) {
  .acf-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .acf-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- the sound (scenes.js acsound): the film plays while the whole of it is measured (its waveform fills as the
   film's own time goes by), then where it sits against the platforms' level, and the finding */
@media (max-width: 480px) {
  .acs-pill {
    display: none;
  }
}
.acs-main {
  display: grid;
  align-content: start;
  min-width: 0;
}
.acs-wave {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 58px;
  margin: 14px 16px 0;
}
.acs-wave i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--fg) 18%, transparent);
}
/* what has been measured: the sound under it tinted, its edge a line */
.acs-done {
  position: absolute;
  inset: -4px 0;
  border-right: 1.5px solid var(--nice);
  background: color-mix(in srgb, var(--nice) 12%, transparent);
  transform: scaleX(var(--p, 1));
  transform-origin: 0 50%;
}
.acs-meter {
  position: relative;
  height: 28px;
  margin: 28px 16px 0;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24)), var(--panel-2);
  border: 1px solid var(--line);
}
.acs-band {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
}
.acs-target {
  position: absolute;
  top: -8px;
  bottom: -1px;
  left: calc(var(--at) * 100%);
  width: 1.5px;
  background: var(--ok);
}
.acs-target .mono {
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  translate: -50% 0;
  color: var(--fg-2);
  font-size: 11px;
  white-space: nowrap;
}
.acs-value {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: calc(var(--at) * 100%);
  width: 2px;
  translate: -50% 0;
  border-radius: 1px;
  background: var(--nice);
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.acs-value .mono {
  position: absolute;
  top: 50%;
  right: calc(100% + 7px);
  translate: 0 -50%;
  color: var(--nice);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.acs-ticks {
  position: relative;
  height: 14px;
  margin: 5px 16px 16px;
  color: var(--muted);
  font-size: 10.5px;
}
.acs-ticks span {
  position: absolute;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  white-space: nowrap;
}
.acs-ticks span:first-child {
  translate: 0 0;
}
.acs-ticks span:last-child {
  translate: -100% 0;
}
.acs-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border-left: 1px solid var(--line);
}
.acs-vals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.acs-vals p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.acs-vals p > span:first-child {
  color: var(--muted);
  font-size: 11.5px;
}
.acs-vals b {
  font-size: 24px;
  font-weight: var(--fw-strong);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.acs-vals .mono {
  color: var(--muted);
  font-size: 10.5px;
}
.acs-find .qa-row.open {
  background: var(--panel-2);
}
.acs.sc-armed .acs-value:not(.on) {
  opacity: 0;
  scale: 1 0.3;
}
.acs.sc-armed [data-s-row] {
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.acs.sc-armed [data-s-row]:not(.on) {
  opacity: 0;
  translate: 0 8px;
}
@media (max-width: 760px) {
  .acs-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---- then (scenes.js acask): one window. Ask the agent makes the finding Mia's note (her box on the frame, her key
   on the timeline, the app's toast) and the agent's button in the bar reads it at once; That's intended puts the next
   finding away, and the agent's button doesn't change. The findings stand over each other by transform in a list of
   fixed height, so one leaving or opening moves nothing else */
.aca-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--claude) 38%, var(--line-2));
  background: var(--claude-bg);
  color: var(--fg-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.aca-agent .kg {
  width: 10px;
  height: 10px;
  color: var(--claude);
}
.aca-agent b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.aca-step .pl-swap > span {
  justify-content: start;
}
.aca-main {
  display: grid;
  align-content: start;
  min-width: 0;
}
.aca-tl .acp-dia {
  top: 13px;
  left: calc(var(--at) * 100%);
}
.aca-key {
  color: var(--should);
}
.aca-side {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--line);
}
.aca-pop {
  box-shadow: none;
}
.aca-list {
  position: relative;
  height: 236px;
  margin: 6px;
}
.aca-list > .qa-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  transition:
    opacity 0.35s,
    transform 0.5s var(--ease-out),
    background 0.3s;
}
.aca-list > .qa-row[data-a-row='freeze'] {
  transform: translateY(var(--y, 146px));
}
.aca-list > .qa-row[data-a-row='freeze'].up {
  --y: 0px;
}
.aca-list > .qa-row.gone {
  opacity: 0;
}
/* the minor finding: the list once nothing that looks like a problem is left */
.aca.sc-armed .aca-list > [data-a-row='minor']:not(.in),
.aca:not(.sc-armed) .aca-list > [data-a-row='typo'],
.aca:not(.sc-armed) .aca-list > [data-a-row='freeze'] {
  opacity: 0;
}
.aca-note {
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.aca-note .pl-text {
  font-size: 12px;
}
.aca-toast {
  position: absolute;
  left: 50%;
  bottom: 50px;
  z-index: 3;
  translate: -50% 0;
  margin: 0;
  pointer-events: none;
  transition:
    opacity 0.3s,
    translate 0.4s var(--ease-out);
}
.aca-toast .pl-swap > span {
  justify-content: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-full);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 12px;
}
.aca-toast .ic {
  width: 13px;
  height: 13px;
  color: var(--ok);
}
.aca-body {
  position: relative;
}
.aca-foot {
  margin: 0;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.aca-foot b {
  color: var(--fg-2);
  font-weight: 500;
}
.aca.sc-armed .aca-note:not(.on),
.aca.sc-armed .aca-toast:not(.on) {
  opacity: 0;
}
.aca.sc-armed .aca-note:not(.on) {
  translate: 0 -6px;
}
.aca.sc-armed .aca-toast:not(.on) {
  translate: -50% 6px;
}
.aca.sc-armed [data-a-qa]:not(.on),
.aca.sc-armed [data-a-box]:not(.on),
.aca:not(.sc-armed) [data-a-qa],
.aca:not(.sc-armed) .aca-toast {
  opacity: 0;
}
.aca.sc-armed [data-a-box]:not(.on) {
  transform: scale(0.96);
}
.aca.sc-armed [data-a-key] {
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.aca.sc-armed [data-a-key]:not(.on) {
  opacity: 0;
  scale: 0.3;
}
/* at rest: what the round ends on (the typo asked, the freeze put away) */
.aca:not(.sc-armed) [data-a-row='freeze'],
.aca:not(.sc-armed) [data-a-key='typo'],
.aca:not(.sc-armed) [data-a-key='freeze'] {
  opacity: 0;
}
/* a phone: the agent's button takes a row of its own under the file's name */
@media (max-width: 560px) {
  .aca .sc-bar {
    flex-wrap: wrap;
    height: auto;
    padding-block: 7px;
    row-gap: 6px;
  }
  .aca-agent {
    margin-left: 0;
  }
}
@media (max-width: 760px) {
  .aca-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .aca-toast {
    bottom: 12px;
  }
}

/* Check it's page (pages/products/check.ts, assets/products/check.js): build.ts adds it to the site's stylesheet. */

/* ---- the check card, as the app's (web/src/styles/loop.css .verify): dark in both themes, a green edge, its head, the
   note, the agent's fix, then Looks right · Still wrong · Skip, or Still wrong's reason in their place */
.cm-card-in {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
.cm-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
}
.cm-eyebrow {
  color: var(--fg-2);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cm-eyebrow.faint {
  color: var(--faint);
}
.cm-grow {
  flex: 1;
}
.cm-card-head .sc-btn,
.cm-acts .sc-btn,
.cm-reason .sc-btn {
  height: 26px;
  padding-inline: 10px;
  font-size: 11.5px;
}
.cm-card-head .cm-done {
  height: 22px;
  padding-inline: 6px;
  color: var(--muted);
}
.cm-text {
  margin: 0;
  color: var(--fg);
  font-size: 13px;
}
.cm-fix {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--ok-bg);
  color: var(--ok-2);
  font-size: 11.5px;
}
.cm-fix b {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ok);
  font-size: 10.5px;
  font-weight: var(--fw-strong);
}
.cm-fix .ic {
  width: 12px;
  height: 12px;
}
.cm-decide {
  display: grid;
}
.cm-acts,
.cm-reason {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}
.cm-ok {
  background: var(--ok-bg);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  box-shadow: none;
  color: var(--ok);
}
.cm-ok.done {
  background: var(--ok);
  color: var(--page);
}
.cm-slot.why .cm-acts,
.cm-slot:not(.why) .cm-reason {
  opacity: 0;
  visibility: hidden;
}
/* Still wrong's reason: a field (the words typed or said land in it), its microphone, Reopen */
.cm-field {
  display: grid;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--fg) 30%, var(--line-2));
  overflow: hidden;
}
.cm-typed,
.cm-hint {
  grid-area: 1 / 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
}
.cm-hint {
  color: var(--faint);
}
.cm-typed:not(:empty) + .cm-hint {
  visibility: hidden;
}
.cm-say {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
}
.cm-say .ic {
  width: 14px;
  height: 14px;
}
.cm-reopen {
  flex: none;
}

/* ---- the hero (scenes.js cmplayer): the home page's player on V2. Its stage holds the one view and check mode's two
   (before left, after right) stacked; check mode's card floats over the stage's foot, as the app's does */
.cm-stagewrap,
.cm-body {
  position: relative;
}
.cm-hero .cm-stage {
  aspect-ratio: 16 / 9;
}
.cm-one,
.cm-two {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  transition: opacity 0.45s;
}
.cm-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 6px;
}
.cm-hero:not([data-mode='view']) .cm-one,
.cm-hero[data-mode='view'] .cm-two {
  opacity: 0;
}
.cm-pane {
  position: relative;
  transition: opacity 0.35s;
}
.cm-pic {
  position: relative;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  border-radius: 4px;
  container-type: inline-size;
  background: #050505;
}
.cm-pane .sc-label,
.cm-w-pair .sc-label {
  top: 8px;
  left: 8px;
}
.cm-hero [data-cm-box] {
  transition: opacity 0.3s;
}
.cm-hero.cm-alex [data-cm-box] {
  opacity: 0;
}
.cm-card {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 12px;
  width: min(560px, calc(100% - 24px));
  translate: -50% 0;
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: rgb(19 19 20 / 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(61 220 151 / 0.4);
  box-shadow: var(--shadow-float);
  transition:
    opacity 0.35s,
    translate 0.45s var(--ease-out);
}
.cm-hero[data-mode='view'] .cm-card {
  opacity: 0;
  translate: -50% 10px;
}
.cm-cards {
  display: grid;
}
.cm-slot {
  grid-area: 1 / 1;
  min-width: 0;
  transition: opacity 0.35s;
}
.cm-slot:not(.on) {
  opacity: 0;
  visibility: hidden;
}
/* a phone's Before · After: the stage shows one at a time (the app stacks them and a swipe changes which) */
.cm-side {
  display: none;
}
.cm-seg {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11px;
  transition:
    background 0.3s,
    color 0.3s;
}
.cm-seg.on {
  background: var(--panel-2);
  color: var(--fg);
  box-shadow: var(--raise);
}
.cm-hero .pl-stage-line [data-s='changes'] .kg {
  color: var(--should);
}
.cm-hero .pl-stage-line [data-s='check1'] .kg {
  color: var(--nice);
}
.cm-filters > .pl-swap > span {
  gap: 4px;
  padding: 0;
}
.cm-thread {
  display: grid;
  padding-top: 7px;
  border-top: 1px solid var(--line);
}
.cm-thread .pl-swap {
  display: grid;
}
.cm-thread .pl-swap > span {
  display: grid;
  gap: 4px;
  align-content: start;
  white-space: normal;
}
.cm-thread .pl-act,
.cm-w-after .pl-act {
  margin: 0;
}
.pl-act .ic {
  width: 12px;
  height: 12px;
}
.cm-reopened .ic {
  color: var(--should);
}
.cm-said {
  margin: 0;
  padding-left: 18px;
  color: var(--fg-2);
  font-size: 11.5px;
}
.cm-badge .pl-swap > span[data-s='reopened'] {
  display: none;
}
@container pl (max-width: 780px) {
  .cm-hero .cm-stage {
    aspect-ratio: 1280 / 548;
  }
  .cm-two {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }
  .cm-pane {
    grid-area: 1 / 1;
  }
  .cm-pic {
    border-radius: 0;
  }
  .cm-hero:not(.cm-b) .cm-pane.after,
  .cm-hero.cm-b .cm-pane.before {
    opacity: 0;
  }
  .cm-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: 10px;
    translate: none;
  }
  .cm-hero[data-mode='view'] .cm-card {
    translate: 0 6px;
  }
  .cm-side {
    display: flex;
    gap: 2px;
    margin: 0 0 8px;
    padding: 2px;
    border-radius: 8px;
    background: rgb(255 255 255 / 0.06);
  }
  .cm-seg {
    flex: 1;
    text-align: center;
  }
}
@container pl (max-width: 520px) {
  .cm-hero .cm-field {
    height: 46px;
    align-items: start;
    padding-top: 6px;
  }
  .cm-hero .cm-typed,
  .cm-hero .cm-hint {
    white-space: normal;
    line-height: 1.3;
  }
  .cm-card-head .cm-eyebrow.faint,
  .cm-card-head .cm-done kbd {
    display: none;
  }
  .cm-acts .sc-btn kbd {
    display: none;
  }
  .cm-hint {
    font-size: 11px;
  }
}

/* ---- fixes to check (scenes.js cmqueue): the Inbox's group and check mode in one window, stacked in one place, one
   shown (the figure's data-view). The rows stand in fixed slots and move by transform; one that leaves fades */
.cmq-body {
  display: grid;
}
.cmq-view {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity 0.45s,
    visibility 0s;
}
.cmq[data-view='check'] [data-cmq-view='list'],
.cmq[data-view='list'] [data-cmq-view='check'] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.45s,
    visibility 0s 0.45s;
}
.cmq-list {
  --rowh: 148px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px 14px 16px;
}
.cmq-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--fg);
}
.cmq-head .ic {
  width: 16px;
  height: 16px;
  color: var(--ok);
}
.cmq-head .mono {
  color: var(--muted);
  font-size: 12px;
}
.cmq-rows {
  position: relative;
  height: calc(2 * var(--rowh) + 10px);
}
.cmq-row {
  position: absolute;
  inset: 0 0 auto;
  height: var(--rowh);
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 10px 14px 10px 10px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  transform: translateY(calc(var(--slot, 0) * (var(--rowh) + 10px)));
  transition:
    transform 0.55s var(--ease-out),
    opacity 0.4s;
}
.cmq-row.gone {
  opacity: 0;
}
.cmq-thumb {
  border-radius: 8px;
}
.cmq-main {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.cmq-what {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
.cmq-what b {
  color: var(--fg);
  font-size: 13.5px;
  font-weight: var(--fw-strong);
}
.cmq-text {
  margin: 0;
  color: var(--fg);
  font-size: 15px;
}
.cmq-changed {
  margin: 0;
  color: var(--fg-2);
  font-size: 13.5px;
}
.cmq-changed span {
  margin-right: 7px;
  color: var(--ok);
  font-weight: var(--fw-strong);
}
.cmq-acts {
  display: flex;
  gap: 6px;
  margin: 0;
}
/* the toast lands in the room the settled row leaves */
.cmq-toast {
  position: absolute;
  left: 50%;
  bottom: calc(var(--rowh) / 2 - 18px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 13px;
  white-space: nowrap;
  translate: -50% 8px;
  opacity: 0;
  transition:
    opacity 0.35s,
    translate 0.45s var(--ease-out);
}
.cmq-toast.on {
  translate: -50% 0;
  opacity: 1;
}
.cmq-toast .ic {
  color: var(--ok);
}
@media (max-width: 760px) {
  .cmq-list {
    --rowh: 196px;
    padding: 12px 10px 14px;
  }
  .cmq-row {
    grid-template-columns: 132px minmax(0, 1fr);
    align-content: center;
    gap: 10px 12px;
    padding: 10px;
  }
  .cmq-thumb {
    align-self: start;
  }
  .cmq-acts {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
  .cmq-text {
    font-size: 14px;
  }
  .cmq-changed,
  .cmq-what {
    font-size: 12.5px;
  }
  .cmq-toast {
    white-space: normal;
    width: max-content;
    max-width: calc(100% - 20px);
  }
}

/* ---- comparing (scenes.js cmcompare) and the fix preview (cmpreview): the stage is one frame of the film, and every
   mode fills it. The wipe's line and B's opacity are registered properties, so they move as smoothly as the pointer
   that drags them (the same time and curve, scenes.js DRAG) */
@property --cmw {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}
@property --cmop {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.5;
}
.cmc,
.cmp {
  --cmw: 0.5;
  --cmop: 0.5;
  transition:
    --cmw 0.9s cubic-bezier(0.45, 0, 0.55, 1),
    --cmop 0.9s cubic-bezier(0.45, 0, 0.55, 1);
}
.cmc-stage,
.cmp-stage {
  position: relative;
  margin: 12px 12px 0;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  border-radius: 10px;
  background: #050505;
  container-type: inline-size;
}
.cmc-view {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.4s,
    visibility 0s;
}
.cmc:not([data-mode='side']) [data-cmc-v='side'],
.cmc:not([data-mode='wipe']) [data-cmc-v='wipe'],
.cmc:not([data-mode='diff']) [data-cmc-v='diff'],
.cmc:not([data-mode='onion']) [data-cmc-v='onion'] {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s,
    visibility 0s 0.4s;
}
/* a whole frame at the stage's size: the film's still and its end card, measured as the film draws them */
.cmc-f {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: inline-size;
}
.cmc-b {
  position: absolute;
  inset: 0;
}
/* side by side: each half shows the middle of its frame, at the frame's own scale */
.cmc-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.cmc-half {
  position: relative;
  overflow: hidden;
}
.cmc-half .cmc-f {
  inset: 0 auto;
  left: 50%;
  width: calc(200% + 6px);
  translate: -50% 0;
}
/* a wipe: B over A as far as the line */
.cmc-wiped {
  clip-path: inset(0 calc((1 - var(--cmw)) * 100%) 0 0);
}
.cmc-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgb(0 0 0 / 0.5);
  translate: calc(var(--cmw) * 100cqw - 1px) 0;
}
.cmc-line i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.45);
  translate: -50% -50%;
  transition: scale 0.15s;
}
.cmc-line i.press {
  scale: 0.88;
}
.sc-label.cmc-right {
  left: auto;
  right: 10px;
}
/* one over the other: the difference (what stayed the same goes black), or B faded over A */
.cmc-diff {
  mix-blend-mode: difference;
}
.cmc-onion {
  opacity: var(--cmop);
}
.cmc-tag {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-grid;
  padding: 5px 11px;
  border-radius: var(--r-full);
  background: rgb(10 10 10 / 0.74);
  color: #eeebe4;
  font-size: 12.5px;
}
.cmc-tag .pl-swap > span {
  justify-content: start;
}
/* the compare bar, as the app's: A and B, the three ways, the blend and B's opacity */
.cmc-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px 14px;
  color: var(--fg-2);
  font-size: 12.5px;
}
.cmc-ab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.cmc-ab b {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 11px;
}
.cmc-swap {
  display: inline-grid;
  color: var(--muted);
}
.cmc-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.cmc-seg > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 7px;
  white-space: nowrap;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    scale 0.15s;
}
.cmc-seg > span.on {
  background: var(--raise-sheen), var(--panel);
  box-shadow: var(--raise);
  color: var(--fg);
}
.cmc-seg > span.press {
  scale: 0.95;
}
.cmc-op {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.cmc-track {
  position: relative;
  width: 132px;
  height: 4px;
  border-radius: 2px;
  background: var(--line-3);
  container-type: inline-size;
}
.cmc-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.35);
  translate: calc(var(--cmop) * 100cqw - 8px) -50%;
  transition: scale 0.15s;
}
.cmc-knob.press {
  scale: 0.85;
}
.cmc:not([data-mode='diff']):not([data-mode='onion']) :is(.cmc-blend, .cmc-op) {
  opacity: 0.4;
}
.cmc-blend,
.cmc-op {
  transition: opacity 0.3s;
}

/* ---- still wrong (scenes.js cmwrong): the home page's check window; the agent's button in its bar says what it does.
   The row under the pair holds its three states stacked in one place: the decision, the reason, the note's thread */
.cmw .sc-bar {
  gap: 6px;
}
.cmw-agent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  margin-left: auto;
  padding: 0 10px;
  border-radius: var(--r-full);
  border: 1px solid color-mix(in srgb, var(--claude) 38%, var(--line-2));
  background: var(--claude-bg);
  color: var(--fg-2);
  font-size: 11.5px;
  white-space: nowrap;
}
.cmw-agent .kg {
  width: 9px;
  height: 9px;
  color: var(--claude);
}
.cmw-agent b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.cmw-agent .pl-swap > span {
  justify-content: start;
}
.cmw-row {
  display: grid;
}
.cmw-state {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  padding: 12px 14px 14px;
  transition:
    opacity 0.35s,
    visibility 0s;
}
.cmw-state:not(.on) {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s,
    visibility 0s 0.35s;
}
.cmw-field {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font-size: 13.5px;
}
.cmw-field.typing {
  border-color: color-mix(in srgb, var(--fg) 40%, var(--line-2));
}
.cmw-typed {
  color: var(--fg);
  white-space: pre;
}
.cmw-field.typing .cmw-typed {
  border-right: 1.5px solid var(--fg);
}
.cmw-hint {
  position: absolute;
  left: 12px;
  right: 12px;
  color: var(--muted);
  white-space: nowrap;
  transition: opacity 0.2s;
}
.cmw-field.typing .cmw-hint,
.cmw:not(.sc-armed) .cmw-hint {
  opacity: 0;
}
.cmw-mic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
}
.cmw-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  color: var(--fg-2);
  font-size: 13.5px;
}
.cmw-line:first-child {
  flex-basis: 100%;
}
.cmw-line + .cmw-line {
  flex: 1 1 300px;
}
.cmw-line b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.cmw-line q {
  color: var(--fg);
}
.cmw-line .ic {
  color: var(--ok);
}
.cmw-line span {
  color: var(--fg-2);
}
.cmw-v3 {
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.cmw-v3:not(.in) {
  opacity: 0;
  translate: 0 6px;
}
@media (max-width: 560px) {
  .cmw-agent b {
    display: none;
  }
  .cmw-field {
    height: 50px;
    align-items: start;
    padding-top: 7px;
  }
  .cmw-typed,
  .cmw-hint {
    white-space: normal;
    line-height: 1.3;
  }
}

/* ---- before the full version (scenes.js cmpreview): the fix preview wiped against V2, the check card under it */
.cmp-card {
  display: grid;
  gap: 10px;
  padding: 14px 14px 16px;
}
.cmp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
}
.cmp-eye {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cmp-state {
  display: inline-flex;
  margin-left: auto;
  color: var(--muted);
  font-size: 12.5px;
}
.cmp-state .kg {
  width: 9px;
  height: 9px;
  margin-right: 6px;
  color: var(--ok);
}
.cmp-text {
  margin: 0;
  color: var(--fg);
  font-size: 15px;
}
.cmp-pv {
  display: flex;
  align-items: start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 13px;
}
.cmp-pv > span {
  display: grid;
  gap: 3px;
}
.cmp-pv b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.cmp-pv .ic {
  flex: none;
  margin-top: 2px;
  color: var(--fg-2);
}
.cmp-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}
.cmp [data-cmp-ok].done {
  background: var(--ok);
  border-color: transparent;
  color: var(--page);
}
.cmp-sys {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ok);
  font-size: 12.5px;
  transition: opacity 0.4s;
}
.cmp-sys:not(.in) {
  opacity: 0;
}

/* Note it's page (pages/products/notes.ts, assets/products/notes.js): build.ts adds it to the site's stylesheet. Its
   pieces are the app's composer and notes panel at the scenes' scale; everything that changes is a stacked state or a
   transform, so nothing moves the page while a scene plays. */

/* ---- shared: a severity's colour, the drawn marks, the drawing tools, the composer, a note's row */
.nb-k-must {
  color: var(--must);
}
.nb-k-should {
  color: var(--should);
}
.nb-k-nice {
  color: var(--nice);
}
.nb-k-idea {
  color: var(--idea);
}
.pl-sev.nb-sev-must {
  background: var(--must-bg);
  color: var(--must);
}
.pl-sev.nb-sev-should {
  background: var(--should-bg);
  color: var(--should);
}
.pl-sev.nb-sev-nice {
  background: color-mix(in srgb, var(--nice) 12%, transparent);
  color: var(--nice);
}
.pl-sev.nb-sev-idea {
  background: var(--idea-bg);
  color: var(--idea);
}
/* a box drawn on the picture, the app's drawing red; drawing it grows it from the corner where the drag started */
.nb-drawn {
  position: absolute;
  border: 2px solid #ff3b5c;
  border-radius: 3px;
  transform-origin: 0 0;
  transform: scale(var(--sx, 1), var(--sy, 1));
}
/* the drawing tools (DrawBar.tsx): a small dark bar on the picture, top centre */
.nb-drawbar {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: rgb(14 14 15 / 0.86);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.7);
  transition:
    opacity 0.3s,
    translate 0.4s var(--ease-out);
}
.nb-tool {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: rgb(238 235 228 / 0.7);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.12s;
}
.nb-tool .ic {
  width: 15px;
  height: 15px;
}
.nb-tool.on {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}
.nb-tool.press {
  transform: scale(0.9);
}
.nb-sep {
  width: 1px;
  height: 18px;
  margin: 0 3px;
  background: rgb(255 255 255 / 0.14);
}
/* states stacked in one place, one shown */
.nb-stack {
  display: grid;
}
.nb-stack > [data-s] {
  grid-area: 1 / 1;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.nb-stack > [data-s].on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}
/* the composer (Composer.tsx) */
.nb-comp {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--fg) 26%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
}
.nb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.nb-where {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.nb-more {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 5px;
  border: 1px dashed var(--line-3);
  color: var(--muted);
  font-size: 10px;
  transition:
    transform 0.12s,
    color 0.2s;
}
.nb-more.press {
  transform: scale(0.94);
  color: var(--fg);
}
.nb-x {
  display: inline-grid;
  place-items: center;
  margin-left: auto;
  color: var(--faint);
}
.nb-x .ic {
  width: 13px;
  height: 13px;
}
.nb-text {
  display: grid;
  min-height: 40px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12.5px;
  line-height: 1.45;
}
.nb-text > * {
  grid-area: 1 / 1;
}
/* typed words fill a box their hidden copy has already sized */
.nb-sizer {
  visibility: hidden;
}
.nb-ph {
  color: var(--faint);
  opacity: 0;
  transition: opacity 0.2s;
}
.nb-empty .nb-ph {
  opacity: 1;
}
/* the text cursor: the typed words' own right edge, so it moves no element as the letters come */
.nb-cursor {
  border-right: 1.5px solid transparent;
  padding-right: 1px;
}
.nb-typing .nb-cursor,
.nb-typing-say .nbw-say .nb-cursor {
  animation: nb-cursor 1s steps(1) infinite;
}
@keyframes nb-cursor {
  0%,
  49% {
    border-right-color: var(--brand);
  }
  50%,
  100% {
    border-right-color: transparent;
  }
}
@keyframes nb-blink {
  50% {
    opacity: 0;
  }
}
.nb-picked {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 20px;
  margin: 0;
}
.nb-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 10.5px;
  white-space: nowrap;
  transition:
    opacity 0.3s,
    transform 0.4s var(--ease-spring);
}
.nb-chip .ic {
  width: 11px;
  height: 11px;
}
.nb-foot {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
}
.nb-pick {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 6px;
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 11.5px;
  transition: transform 0.12s;
}
.nb-pick .pl-swap > span {
  gap: 5px;
}
.nb-pick .kg {
  width: 10px;
  height: 10px;
}
.nb-chev {
  width: 11px;
  height: 11px;
  opacity: 0.7;
}
.nb-ib {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 26px;
  border-radius: 7px;
  color: var(--fg-2);
  transition: transform 0.12s;
}
.nb-ib .ic {
  width: 14px;
  height: 14px;
}
.nb-gap {
  flex: 1;
}
.nb-save,
.nb-send {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition: transform 0.12s;
}
.nb-save {
  color: var(--fg-2);
}
.nb-send {
  background: var(--raise-sheen), var(--brand-deep);
  box-shadow: var(--raise);
  color: var(--on-brand);
}
.nb-pick.press,
.nb-ib.press,
.nb-send.press,
.nbp .pl-new.press,
.nbp .pl-play.press {
  transform: scale(0.92);
}
/* the severity and tags menus, floating over what is under them */
.nb-menu {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 1px;
  min-width: 150px;
  padding: 4px;
  border-radius: 9px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 100%;
  scale: 0.96;
  transition:
    opacity 0.18s,
    scale 0.3s var(--ease-spring),
    visibility 0s 0.18s;
}
.nb-menu.open {
  opacity: 1;
  visibility: visible;
  scale: 1;
  transition:
    opacity 0.18s,
    scale 0.3s var(--ease-spring);
}
.nb-mi {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 6px;
  color: var(--fg);
  font-size: 11.5px;
  transition: background 0.15s;
}
.nb-mi .kg,
.nb-mi .ic {
  width: 11px;
  height: 11px;
}
.nb-mi .ic {
  color: var(--muted);
}
.nb-mi kbd {
  margin-left: auto;
  color: var(--faint);
  font-size: 10px;
}
.nb-mi.hl {
  background: var(--float-sel);
}
/* a note's row in the list (NoteRows): its timecode, its shape, its first line */
.nb-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 11.5px;
}
.nb-row-tc {
  color: var(--muted);
  font-size: 10px;
}
.nb-row-sev {
  display: grid;
}
.nb-row-sev .kg {
  width: 10px;
  height: 10px;
}
.nb-row-t {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/* ---- the hero (scenes.js nbplayer): the player, the composer in the notes panel, the tools on the picture */
.nbp-body {
  position: relative;
}
.nbp-stage .kg {
  color: var(--fg-2);
}
.nbp .pl-tc span,
.nbp .pl-new {
  white-space: nowrap;
}
.nbp .pl-stage {
  position: relative;
}
.nbp-side {
  align-content: start;
  overflow: visible;
}
.nbp-slot {
  margin-top: 2px;
}
.nbp-list {
  display: grid;
  align-content: start;
  gap: 4px;
}
.nbp-list .pl-note {
  margin: 2px 0;
}
/* the menus open under the composer's foot, over the panel's room below it */
.nbp-sevmenu,
.nbp-tagmenu {
  top: calc(100% - 4px);
  transform-origin: 0 0;
}
.nbp-sevmenu {
  left: 8px;
}
.nbp-tagmenu {
  left: 70px;
}
.nbp-box {
  transition: opacity 0.3s;
}
.nbp.sc-armed [data-nb-box]:not(.on),
.nbp.sc-armed [data-nb-draw]:not(.on),
.nbp.sc-armed [data-nb-key]:not(.on),
.nbp.sc-armed [data-nb-tagchip]:not(.on),
.nbp.sc-armed [data-nb-marks]:not(.on) {
  opacity: 0;
}
.nbp.sc-armed [data-nb-draw]:not(.on) {
  translate: -50% -6px;
}
.nbp:not(.sc-armed) [data-nb-draw] {
  opacity: 0;
}
.nbp.sc-armed [data-nb-tagchip]:not(.on),
.nbp.sc-armed [data-nb-marks]:not(.on) {
  transform: scale(0.8);
}
.nbp-key {
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.nbp.sc-armed .nbp-key:not(.on) {
  scale: 0.2;
}
/* a phone: the notes panel goes under the player, as the app's sheet does */
@container pl (max-width: 780px) {
  .nbp .pl-side {
    display: grid;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* ---- the frame (scenes.js nbframe): the note taken apart */
/* the frame: the picture across the window, the three things a note keeps in a row under it */
.nbf-body {
  display: grid;
}
.nbf-pic {
  display: grid;
  align-content: center;
  background: #050505;
  border-bottom: 1px solid var(--line);
}
.nbf-pic .nb-drawn {
  transition: opacity 0.3s;
}
.nbf-tc {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgb(7 7 7 / 0.72);
  color: #c9c5bd;
  font-size: 12px;
}
.nbf-tc b {
  color: #fff;
  font-weight: var(--fw-strong);
}
.nbf-parts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 14px;
}
.nbf-parts li {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition:
    opacity 0.35s,
    translate 0.45s var(--ease-out);
}
.nbf-k {
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--fw-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nbf-parts b {
  color: var(--fg);
  font-size: 14px;
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}
.nbf-parts li > span:last-child {
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.4;
}
.nbf-shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.nbf-shot {
  display: grid;
  transition:
    opacity 0.4s,
    transform 0.55s var(--ease-out);
}
.nbf-shot .sc-stage {
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--line-2);
}
.nbf.sc-armed [data-f]:not(.on) {
  opacity: 0;
  translate: 0 8px;
}
.nbf.sc-armed [data-f-box]:not(.on) {
  opacity: 0;
}
.nbf.sc-armed [data-f-shot]:not(.on) {
  opacity: 0;
  transform: translateX(-24px) scale(0.92);
}
@media (max-width: 760px) {
  .nbf-parts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- drawing (scenes.js nbdraw) */
.nbd-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.nbd-stage {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100%;
  padding: 52px 0 18px;
  background: #050505;
  border-right: 1px solid var(--line);
}
.nbd-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* the marks are the app's markup (lib/drawing.ts) in the frame's pixels, scaling with the picture as the app's do; a
   kept mark takes the place of the one being drawn at once, the same picture */
.nbd-mark {
  transition: none;
}
/* the composer's marks chip shows from the first mark (Composer.tsx), its place kept before */
.nbd-chip {
  transition: opacity 0.2s;
}
.nbd.sc-armed .nbd-chip:not(.on) {
  opacity: 0;
  visibility: hidden;
}
.nb-chip .nbd-chip-x {
  width: 10px;
  height: 10px;
  opacity: 0.6;
}
.nbd-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}
.nbd-tools {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.nbd-tools li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  padding: 7px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition:
    background 0.25s,
    border-color 0.25s;
}
.nbd-tools .ic {
  grid-row: 1 / 3;
  width: 15px;
  height: 15px;
  color: var(--fg-2);
}
.nbd-tools b {
  font-size: 12px;
  font-weight: var(--fw-strong);
}
.nbd-tools span {
  color: var(--muted);
  font-size: 11px;
}
.nbd-tools li.on {
  background: var(--panel-2);
  border-color: var(--line);
}
.nbd.sc-armed [data-d]:not(.on) {
  opacity: 0;
}
@media (max-width: 760px) {
  .nbd-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .nbd-stage {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-top: 48px;
  }
}

/* ---- a section (scenes.js nbsection) */
.nbs-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.nbs-main {
  min-width: 0;
  border-right: 1px solid var(--line);
}
.nbs-stage {
  display: grid;
  align-content: center;
  background: #050505;
}
.nbs-tl {
  position: relative;
  height: 76px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
/* the section on the timeline: a band between its in and out, its ends handles; its end moves by a scale */
.nbs-band {
  position: absolute;
  top: 22px;
  left: calc(14px + var(--from) * (100% - 28px));
  width: calc((var(--to) - var(--from)) * (100% - 28px));
  height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--should) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--should) 55%, transparent);
  transform-origin: 0 50%;
  transform: scaleX(var(--k, 1));
  transition:
    opacity 0.3s,
    transform 0.5s var(--ease-out);
}
.nbs-h {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  border-radius: 2px;
  background: var(--should);
}
.nbs-h.a {
  left: -2px;
}
.nbs-h.b {
  right: -2px;
}
.nbs-side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}
.nbs-where .pl-swap > span {
  gap: 6px;
}
.nbs-len {
  color: var(--muted);
  font-size: 10px;
}
.nbs-ph {
  opacity: 1;
}
.nbs-six {
  display: grid;
  gap: 8px;
  padding: 10px 12px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.nbs-six-h {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.nbs-six-h .mono {
  color: var(--fg-2);
  font-size: 11.5px;
}
.nbs-tiles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
}
.nbs-tiles li {
  position: relative;
  aspect-ratio: 192 / 82;
  border-radius: 3px;
  background: url(footage/strip.jpg) calc(var(--x) * 100%) calc(var(--y) * 100%) / 800% 600%;
}
.nbs-tiles .mono {
  position: absolute;
  right: 3px;
  bottom: 3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgb(7 7 7 / 0.7);
  color: #eeebe4;
  font-size: 10px;
}
.nbs-six-f {
  display: grid;
  margin: 0;
  color: var(--fg-2);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
/* the composer's chips and the timeline's labels a size up here: the scene is about these numbers */
.nbs .pl-tc-chip,
.nbs .nb-more,
.nbs .nbs-len {
  font-size: 11.5px;
}
.nbs .pl-ruler span {
  font-size: 11px;
}
.nbs.sc-armed [data-s-six]:not(.on) {
  opacity: 0;
  translate: 0 8px;
}
.nbs.sc-armed [data-s-band]:not(.on) {
  opacity: 0;
}
@media (max-width: 760px) {
  .nbs-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .nbs-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- a voice note (scenes.js nbsay) */
.nbv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
}
.nbv-main {
  min-width: 0;
  border-right: 1px solid var(--line);
}
.nbv-stage {
  display: grid;
  align-content: center;
  background: #050505;
}
/* T, held: a key cap pressed down while you talk */
.nbv-key {
  position: absolute;
  right: 14px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgb(238 235 228 / 0.92);
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.45);
  color: #111;
  font: 600 15px / 1 var(--mono);
  transition:
    transform 0.12s,
    box-shadow 0.12s,
    opacity 0.3s;
}
.nbv-key.down {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgb(0 0 0 / 0.45);
}
/* the voice note's bar over the picture (WalkieHud.tsx), at its foot */
.nbv-hud {
  position: absolute;
  left: 50%;
  bottom: 12px;
  translate: -50% 0;
  display: flex;
  color: #eeebe4;
  font-size: 11.5px;
}
.nbv-hud .pl-swap > span {
  gap: 8px;
  padding: 0 12px;
  height: 30px;
  border-radius: var(--r-full);
  background: rgb(14 14 15 / 0.86);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.7);
}
.nbv-hud .pl-swap > [data-s='off'] {
  background: none;
  box-shadow: none;
}
.nbv-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: #ff3b5c;
  animation: nb-blink 1.2s steps(1) infinite;
}
.nbv-meter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 12px;
}
.nbv-meter i {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: #eeebe4;
  transform: scaleY(0.3);
  animation: nbv-level 0.7s ease-in-out infinite alternate;
}
.nbv-meter i:nth-child(2) {
  animation-delay: -0.3s;
  animation-duration: 0.55s;
}
.nbv-meter i:nth-child(3) {
  animation-delay: -0.5s;
}
.nbv-meter i:nth-child(4) {
  animation-delay: -0.15s;
  animation-duration: 0.9s;
}
.nbv-meter i:nth-child(5) {
  animation-delay: -0.4s;
  animation-duration: 0.65s;
}
@keyframes nbv-level {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}
.nbv-faint {
  color: rgb(238 235 228 / 0.6);
}
.nbv-spin {
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  border: 1.5px solid rgb(238 235 228 / 0.3);
  border-top-color: #eeebe4;
  animation: nbv-spin 0.8s linear infinite;
}
@keyframes nbv-spin {
  to {
    rotate: 1turn;
  }
}
.nbv-tl {
  position: relative;
  height: 76px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
/* the section the voice note covers: it grows with the film while T is held (a scale from where it started) */
.nbv-band {
  position: absolute;
  top: 22px;
  left: calc(14px + var(--from) * (100% - 28px));
  width: calc((var(--to) - var(--from)) * (100% - 28px));
  height: 14px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--should) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--should) 55%, transparent);
  transform-origin: 0 50%;
  transform: scaleX(var(--k, 1));
}
.nbv-k {
  top: 22px;
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.nbv-side {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.35;
}
.nbv-side .pl-note {
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
/* the voice kept with the note: its clip, played back */
.nbv-voice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
}
.nbv-play {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--fg);
  color: var(--page);
}
.nbv-play .ic {
  width: 10px;
  height: 10px;
}
.nbv-wave {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 2px;
  height: 18px;
  min-width: 0;
}
.nbv-wave i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--fg) 32%, transparent);
}
.nbv-vlabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nbv-vlabel .ic {
  width: 11px;
  height: 11px;
}
.nbv.sc-armed [data-v-note]:not(.on) {
  opacity: 0;
  translate: 0 8px;
}
/* the panel's words at the landing page's note sizes, a step up from the app's tight ones */
.nbv .pl-ruler span,
.nbv .nb-row-tc,
.nbv .pl-tc-chip,
.nbv .pl-sev,
.nbv .pl-tag {
  font-size: 11px;
}
.nbv .pl-av {
  font-size: 10px;
}
.nbv .nb-row {
  align-items: start;
  font-size: 12.5px;
}
.nbv .nb-row-t {
  -webkit-line-clamp: 2;
}
/* the notes after it make its room as it lands: up by its height until then (scenes: --up), by transform only */
.nbv-after {
  transition: transform 0.55s var(--ease-out);
}
.nbv.sc-armed .nbv-after:not(.down) {
  transform: translateY(calc(-1 * var(--up, 0px)));
}
.nbv.sc-armed [data-v-k]:not(.on),
.nbv.sc-armed [data-v-band]:not(.on) {
  opacity: 0;
}
.nbv.sc-armed [data-v-k]:not(.on) {
  scale: 0.2;
}
@media (max-width: 760px) {
  .nbv-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .nbv-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ---- changing the words (scenes.js nbwords) */
.nbw-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
}
.nbw-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  align-self: start;
  background: #050505;
  border-right: 1px solid var(--line);
}
.nbw-side {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  font-size: 12px;
  line-height: 1.35;
}
.nbw-tabs .pl-swap > span {
  gap: 12px;
}
.nbw-tabs b {
  color: var(--fg);
  font-size: 13px;
}
.nbw-tr {
  position: relative;
  display: grid;
  align-content: start;
  gap: 6px;
}
.nbw-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.5;
}
.nbw-tc {
  color: var(--muted);
  font-size: 10px;
  line-height: 2;
}
.nbw-w {
  border-radius: 3px;
  transition:
    background 0.15s,
    color 0.15s;
}
.nbw-w.now {
  color: var(--fg);
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}
.nbw-w.sel,
.nbw:not(.sc-armed) .nbw-w.pick {
  color: var(--fg);
  background: color-mix(in srgb, var(--nice) 30%, transparent);
}
/* the selection's bar (Transcript.tsx): play the words, Change the words, clear */
.nbw-float {
  position: absolute;
  z-index: 2;
  top: 40px;
  left: 30px;
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  border-radius: 9px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  transition:
    opacity 0.25s,
    scale 0.35s var(--ease-spring);
}
.nbw-change {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--raise-sheen), var(--brand-deep);
  color: var(--on-brand);
  font-size: 11.5px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition: transform 0.12s;
}
.nbw-change .ic {
  width: 12px;
  height: 12px;
}
.nbw-change.press {
  transform: scale(0.94);
}
.nbw-foot {
  display: grid;
  gap: 2px;
  margin: 4px 0 0;
  padding: 0 8px;
  color: var(--faint);
  font-size: 10.5px;
}
.nbw-cw {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 10px;
  margin: 0;
  padding: 8px 10px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
}
.nbw-cw legend {
  padding: 0 4px;
  color: var(--fg);
  font-size: 11.5px;
  font-weight: var(--fw-strong);
}
.nbw-l {
  color: var(--muted);
  font-size: 10.5px;
}
.nbw-cw q {
  color: var(--fg-2);
  font-size: 12.5px;
}
.nbw-say {
  display: grid;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 12.5px;
  min-height: 1.5em;
}
.nbw-say > * {
  grid-area: 1 / 1;
}
.nbw-edit {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  margin-right: 6px;
}
.nbw-edit del {
  color: var(--muted);
}
.nbw-edit ins {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ok) 70%, transparent);
}
.nbw-edit span {
  color: var(--faint);
}
.nbw-whyt {
  display: block;
  margin-top: 4px;
  color: var(--fg-2);
}
.nbw-agent {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 10.5px;
  line-height: 1.5;
  transition: opacity 0.4s;
}
.nbw-agent .mono {
  overflow-wrap: anywhere;
}
.nbw-agent-k {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 9.5px;
}
.nbw.sc-armed [data-w-float]:not(.on) {
  opacity: 0;
  scale: 0.94;
}
.nbw:not(.sc-armed) [data-w-float] {
  opacity: 0;
}
.nbw.sc-armed [data-w-agent]:not(.on) {
  opacity: 0;
}
@media (max-width: 760px) {
  .nbw-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .nbw-stage {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .nbw-agent {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* a phone's timelines keep every other time, as the player's does */
@media (max-width: 560px) {
  .nbs-tl .pl-ruler span:nth-child(even),
  .nbv-tl .pl-ruler span:nth-child(even) {
    display: none;
  }
}

/* On your phone's page (pages/products/phone.ts, assets/products/phone.js): build.ts adds it to the site's stylesheet.
   A phone is a neutral body around a screen whose insides (.mph-ui) are laid out in the 393 × 852 points of a phone and
   scaled to the screen, so the app's phone layout keeps its proportions at every size. The lock screen and the Home
   Screen are dark in both themes, like a phone's; the app follows the page's theme, as the app does. */

/* ---- the scenes' layout: words or a window beside a phone, or two phones */
.mph-scene {
  max-width: 980px;
  text-align: left;
}
.mph-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.mph-pair {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: center;
  align-items: end;
  gap: clamp(28px, 7vw, 96px);
}
.mph-side {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.mph-hand {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.mph-cap {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .mph-duo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 28px;
  }
  .mph-duo > .mph-hand {
    order: -1;
  }
  .mph-hero .mph-duo > .mph-hand {
    order: 0;
  }
  .mph-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* ---- a phone */
.mph-phone {
  --w: 276px;
  position: relative;
  width: var(--w);
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.17);
  background: linear-gradient(160deg, #2a2a2d, #121214 40%, #0c0c0d);
  box-shadow:
    inset 0 0 0 1.5px #3a3a3e,
    inset 0 0 0 4px #0b0b0c,
    0 50px 90px -40px rgb(0 0 0 / 0.65),
    0 18px 40px -24px rgb(0 0 0 / 0.5);
}
.mph-phone.mph-big {
  --w: 312px;
}
@media (max-width: 760px) {
  .mph-phone,
  .mph-phone.mph-big {
    --w: min(272px, 72vw);
  }
}
.mph-screen {
  position: relative;
  aspect-ratio: 393 / 852;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.14);
  background: #000;
  container-type: inline-size;
}
.mph-ui {
  position: absolute;
  left: 0;
  top: 0;
  width: 393px;
  height: 852px;
  transform-origin: 0 0;
  scale: tan(atan2(100cqw, 393px));
  font: 400 14px / 1.35 var(--ui);
  color: var(--fg);
  text-align: left;
}
/* the front camera: a hole in the screen, no maker's island */
.mph-cam {
  position: absolute;
  top: 2.3%;
  left: 50%;
  width: 3.1%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.06);
}
.mph-i {
  width: 22px;
  height: 22px;
  flex: none;
}
.mph-ui .ic {
  width: 20px;
  height: 20px;
}
.mph-ui .kg {
  width: 11px;
  height: 11px;
  flex: none;
}
.mph-grow {
  flex: 1;
}
.mph-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 4px 30px 0 34px;
  font: 600 16px / 1 var(--ui);
  color: var(--fg);
}
.mph-status.light {
  position: relative;
  z-index: 1;
  color: #fff;
}
.mph-sys {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.mph-sys .mph-i {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}
.mph-bat {
  position: relative;
  display: block;
  width: 26px;
  height: 12px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
  opacity: 0.9;
}
.mph-bat > i {
  position: absolute;
  inset: 1.5px 6px 1.5px 1.5px;
  border-radius: 1.5px;
  background: currentColor;
}
.mph-home {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 9px;
  width: 134px;
  height: 5px;
  translate: -50% 0;
  border-radius: 3px;
  background: color-mix(in srgb, var(--fg) 70%, transparent);
}
.mph-lock .mph-home,
.mph-hs .mph-home {
  background: rgb(255 255 255 / 0.85);
}
/* a fingertip: where a thumb taps, holds or swipes */
/* the scenes' pointer (kit.pointer), on the phone's screen a fingertip in the screen's own points: kit.pointer puts the
   element's corner on the touch point, the round tip is drawn centred on it; a tap presses it in */
.mph-ui .sc-cursor {
  z-index: 8;
}
.mph-ui .sc-cursor svg {
  display: none;
}
.mph-ui .sc-cursor::before {
  content: '';
  position: absolute;
  left: -26px;
  top: -26px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.32);
  border: 0;
  box-shadow:
    0 0 0 1.5px rgb(255 255 255 / 0.85),
    0 6px 16px rgb(0 0 0 / 0.35);
  transition: scale 140ms ease;
}
.mph-ui .sc-cursor.down::before {
  scale: 0.8;
}

/* ---- the lock screen and its notifications (the platform's look, Lampo's words) */
.mph-lock,
.mph-hs {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #0b0d10;
}
.mph-wall {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.62);
}
.mph-lock::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.25), transparent 30%, transparent 60%, rgb(0 0 0 / 0.35));
}
.mph-clock {
  position: relative;
  z-index: 1;
  margin: 46px 0 0;
  color: #fff;
  font: 500 92px / 1 var(--display);
  letter-spacing: -0.02em;
  text-align: center;
  text-shadow: 0 2px 20px rgb(0 0 0 / 0.25);
}
.mph-notices {
  position: relative;
  z-index: 1;
  margin: 156px 12px 0;
}
.mph-notice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  height: 102px;
  padding: 13px 14px;
  border-radius: 24px;
  background: rgb(36 36 40 / 0.72);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.25);
  color: #fff;
}
.mph-appicon {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.mph-notice-b {
  display: grid;
  gap: 1px;
  min-width: 0;
}
.mph-notice-top {
  display: flex;
  justify-content: space-between;
  color: rgb(255 255 255 / 0.62);
  font-size: 13px;
}
.mph-notice-top b {
  color: rgb(255 255 255 / 0.62);
  font-weight: 600;
}
.mph-notice-t {
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mph-notice-x {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  line-height: 1.32;
  color: rgb(255 255 255 / 0.92);
}
.mph-stack3 {
  position: relative;
  height: 330px;
}
.mph-stack3 > .mph-notice {
  position: absolute;
  inset: 0 0 auto;
  transform: translateY(calc(var(--slot, 0) * 112px));
  transition:
    transform 0.55s var(--ease-spring),
    opacity 0.35s;
}
.mph-stack3 > [data-mph-n3] {
  --slot: 0;
}
.mph-stack3 > [data-mph-n2] {
  --slot: 1;
}
.mph-stack3 > [data-mph-n1] {
  --slot: 2;
}

/* ---- the app on a phone */
.mph-app {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--page);
  overflow: hidden;
}
.mph-layer {
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.mph-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--fg-2);
}
.mph-btn .mph-i {
  width: 21px;
  height: 21px;
}
.mph-chev {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  rotate: 45deg;
  opacity: 0.6;
}
.mph-bell {
  position: relative;
}
.mph-count {
  position: absolute;
  top: 3px;
  right: 1px;
  display: inline-grid;
  font: 700 11px / 1 var(--ui);
  font-style: normal;
}
.mph-count .pl-swap > span:not(:empty),
.mph-count:not(:has(.pl-swap)) {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--brand-deep);
  color: var(--on-brand);
  display: inline-grid;
  place-items: center;
}
.mph-count .pl-swap > span:empty {
  display: none;
}
.mph-pbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 58px;
  padding: 0 8px 0 4px;
  border-bottom: 1px solid var(--line);
}
.mph-ptitle {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}
.mph-ptitle > b {
  font-size: 15.5px;
  font-weight: var(--fw-strong);
}
.mph-psub {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
}
.mph-psub b {
  color: var(--fg-2);
  font-weight: var(--fw-strong);
}
.mph-psub .pl-swap > span {
  gap: 6px;
}
.mph-st.review {
  color: var(--fg-2);
}
.mph-st.check {
  color: var(--nice);
}
.mph-st.changes {
  color: var(--should);
}
.mph-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}
.mph-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 11px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: var(--panel);
  font-size: 14px;
  font-weight: var(--fw-strong);
}
.mph-agent {
  border-radius: var(--r-full);
  border-color: color-mix(in srgb, var(--claude) 35%, var(--line-2));
  background: var(--claude-bg);
}
.mph-agent .kg {
  color: var(--claude);
}
.mph-agent b {
  font-weight: 500;
  color: var(--fg-2);
}
.mph-cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: var(--fw-strong);
}
.mph-cta.quiet {
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
}
.mph-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  align-content: center;
  background: #050505;
}
.mph-pic {
  position: relative;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  container-type: inline-size;
}
.mph-pane {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease-out);
}
.mph-pane:not(.on) {
  opacity: 0;
}
.mph-pane.before:not(.on) {
  transform: translateX(-14%);
}
.mph-pane.after:not(.on) {
  transform: translateX(14%);
}
.mph-stack {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 4px 9px;
  border-radius: 7px;
  background: rgb(7 7 7 / 0.72);
  color: #eeebe4;
  font-size: 12px;
  transition: opacity 0.3s;
}
.mph-stack .pl-swap > span {
  justify-content: start;
}
.mph-box {
  position: absolute;
  left: 32.9%;
  top: 56.2%;
  width: 34.06%;
  height: 12.23%;
  border: 2px solid #ff3b5c;
  border-radius: 3px;
  transition:
    opacity 0.3s,
    transform 0.45s var(--ease-spring);
}
.mph-boxtag {
  position: absolute;
  left: 32.9%;
  top: calc(56.2% - 22px);
  padding: 1px 6px;
  border-radius: 4px;
  background: #ff3b5c;
  color: #fff;
  font-size: 11px;
  transition: opacity 0.3s;
}
.mph-pt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 64px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
}
.mph-ptc {
  display: grid;
  gap: 2px;
}
.mph-ptc b {
  font: 700 21px / 1 var(--mono);
  letter-spacing: -0.01em;
}
.mph-ptc .mono {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.mph-steps {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mph-step {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 40px;
  border-radius: 10px;
  color: var(--fg-2);
  font: 600 13px / 1 var(--mono);
  transition: background 0.15s;
}
.mph-step .mph-i {
  width: 19px;
  height: 19px;
}
.mph-step.press,
.mph-play.press,
.mph-aitem.press,
.mph-mic.press,
.mph-ok.press,
.mph-rmore.press {
  background: color-mix(in srgb, var(--fg) 14%, transparent);
}
.mph-play {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 2px;
  border-radius: 50%;
  background: var(--fg);
  color: var(--page);
}
.mph-play .ic {
  width: 18px;
  height: 18px;
}
.mph-pause-i,
.mph-playing .mph-play-i {
  display: none;
}
.mph-playing .mph-pause-i {
  display: block;
}
.mph-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 44px;
  padding: 0 8px;
  color: var(--fg-2);
  font-size: 14px;
}
.mph-tools > span:not(.mph-btn):not(.mph-grow) {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 10px;
}
.mph-tl {
  position: relative;
  flex: none;
  height: 66px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
.mph-ruler span {
  position: absolute;
  top: 6px;
  left: calc(12px + var(--at) * (100% - 24px));
  padding-left: 4px;
  border-left: 1px solid var(--line-3);
  color: var(--faint);
  font: 10px / 1 var(--mono);
}
.mph-key {
  position: absolute;
  top: 24px;
  left: calc(12px + var(--at) * (100% - 24px));
  translate: -50% 0;
  display: grid;
}
.mph-key .kg {
  width: 12px;
  height: 12px;
}
.mph-key.must {
  color: var(--must);
}
.mph-key.idea {
  color: var(--idea);
}
.mph-wave {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
}
.mph-wave i {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 1px;
  background: color-mix(in srgb, var(--fg) 16%, transparent);
}
.mph-head {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  background: var(--fg);
  transform: translateX(calc(var(--p, 0) * (100cqw - 24px)));
}
.mph-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: -4px;
  width: 10px;
  height: 8px;
  background: var(--fg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
/* the notes: a sheet from the bottom (peek: its head; half: the list) */
.mph-sheet {
  flex: none;
  position: relative;
  z-index: 2;
  display: grid;
  align-content: start;
  border-top: 1px solid var(--line-2);
  border-radius: 18px 18px 0 0;
  background: var(--ink-2, var(--panel));
  box-shadow: 0 -10px 30px -12px rgb(0 0 0 / 0.35);
}
.mph-sheet.peek {
  height: 118px;
}
.mph-sheet.half {
  height: 384px;
}
.mph-handle {
  justify-self: center;
  width: 40px;
  height: 5px;
  margin: 8px 0 7px;
  border-radius: 3px;
  background: var(--line-3);
}
.mph-shead {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 14px;
}
.mph-tabs {
  display: inline-flex;
  gap: 16px;
  color: var(--faint);
  font-size: 16px;
}
.mph-tabs b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.mph-mic {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  transition:
    background 0.2s,
    border-color 0.2s,
    box-shadow 0.12s;
}
.mph-mic.rec {
  background: var(--must-bg);
  border-color: var(--must);
  color: var(--must);
  box-shadow: 0 0 0 var(--glow, 4px) color-mix(in srgb, var(--must) 25%, transparent);
}
.mph-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 12px 0 9px;
  border-radius: 10px;
  background: var(--raise-sheen), var(--brand-deep);
  color: var(--on-brand);
  font-size: 14px;
  font-weight: var(--fw-strong);
}
.mph-new .mph-i {
  width: 17px;
  height: 17px;
}
.mph-sbody {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 0 14px;
}
.mph-sbody > * {
  grid-area: 1 / 1;
  transition:
    opacity 0.35s,
    transform 0.45s var(--ease-out);
}
.mph-filters {
  display: flex;
  gap: 4px;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.mph-filters span {
  padding: 5px 9px;
  border-radius: 8px;
}
.mph-filters .on {
  color: var(--fg);
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
}
.mph-said .mph-sbody {
  align-content: start;
}
.mph-said .mph-sbody > * {
  grid-area: auto;
}
.mph-note {
  display: grid;
  gap: 8px;
  margin: 0 0 10px;
  padding: 12px 13px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.mph-who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.mph-who span:last-child {
  color: var(--faint);
  font-size: 12.5px;
}
.mph-av {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 10px;
  font-weight: var(--fw-strong);
}
.mph-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.mph-tc {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  font-size: 12px;
  font-weight: 600;
}
.mph-sev {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.mph-sev.must {
  background: var(--must-bg);
  color: var(--must);
}
.mph-sev.should {
  background: var(--should-bg);
  color: var(--should);
}
.mph-tag {
  color: var(--muted);
  font-size: 12.5px;
}
.mph-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 12px;
  font-weight: var(--fw-strong);
}
.mph-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
}
/* check mode in the sheet (VerifyPanel.tsx) */
.mph-verify {
  display: grid;
  gap: 10px;
  align-content: start;
}
.mph-chead {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.mph-eyebrow {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mph-faint {
  color: var(--faint);
  font-size: 12px;
}
.mph-seg {
  display: grid;
  margin: 0;
}
.mph-seg .pl-swap > span {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.mph-seg .pl-swap > span > span {
  display: grid;
  place-items: center;
  height: 34px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13.5px;
}
.mph-seg .pl-swap > span > span.on {
  background: var(--raise-sheen), var(--panel);
  box-shadow: var(--raise);
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.mph-fix {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--ok-bg);
  font-size: 13.5px;
}
.mph-fix b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ok);
  font-weight: var(--fw-strong);
}
.mph-fix .mph-i {
  width: 15px;
  height: 15px;
}
.mph-decide {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}
.mph-ok,
.mph-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  height: 42px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: var(--fw-strong);
}
.mph-ok {
  background: var(--ok-bg);
  border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--ok);
}
.mph-ok .mph-i {
  width: 18px;
  height: 18px;
}
.mph-quiet {
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
}
.mph-decide .mph-faint {
  flex: none;
  padding: 0 4px;
  font-size: 13px;
}
.mph-toast {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 14px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  translate: -50% 0;
  transition:
    opacity 0.3s,
    transform 0.45s var(--ease-spring);
}
.mph-toast .mph-i {
  width: 17px;
  height: 17px;
  color: var(--ok);
}
.mph-toast.wide {
  gap: 16px;
}
.mph-toast b {
  color: var(--brand);
  font-weight: var(--fw-strong);
}

/* ---- the inbox on a phone (Rows.tsx: by video, a row's ⋯ on a touch screen, an action sheet) */
.mph-lbar {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 54px;
  padding: 0 8px;
}
.mph-mark {
  height: 26px;
  width: auto;
  margin-left: 4px;
  color: var(--fg);
}
.mph-ihead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 0;
}
.mph-ihead h3 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.01em;
}
.mph-iseg {
  display: inline-flex;
  padding: 3px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}
.mph-iseg span {
  padding: 5px 9px;
  border-radius: 7px;
}
.mph-iseg .on {
  background: var(--raise-sheen), var(--panel);
  box-shadow: var(--raise);
  color: var(--fg);
}
.mph-tally {
  display: flex;
  gap: 4px;
  margin: 4px 16px 10px;
  color: var(--muted);
  font-size: 13.5px;
}
.mph-tally b {
  color: var(--fg);
}
.mph-tally .pl-swap > span {
  justify-content: start;
  gap: 4px;
}
.mph-groups {
  display: grid;
  align-content: start;
}
.mph-vhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 6px;
  padding: 10px 8px 4px 16px;
  border-top: 1px solid var(--line);
}
.mph-vname {
  font-size: 15px;
  font-weight: var(--fw-strong);
}
.mph-vsum {
  grid-row: 2;
  color: var(--muted);
  font-size: 12.5px;
}
.mph-vsum .pl-swap > span {
  justify-content: start;
}
.mph-vhead .mph-btn {
  grid-row: 1 / 3;
  grid-column: 2;
}
.mph-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 9px 6px 10px 16px;
  transition:
    opacity 0.35s,
    background 0.3s;
}
.mph-thumb {
  position: relative;
  display: block;
  height: 42px;
  overflow: hidden;
  border-radius: 7px;
  background: #050505;
  box-shadow: 0 0 0 1px var(--line-2);
}
.mph-thumb img {
  object-fit: cover;
}
.mph-rbody {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.mph-rtop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 4px;
}
.mph-rwhat {
  font-size: 14.5px;
  font-weight: 500;
}
.mph-rwhat .mono {
  color: var(--muted);
  font-size: 12px;
}
.mph-when {
  color: var(--faint);
  font-size: 12.5px;
}
.mph-rmore {
  width: 34px;
  height: 30px;
}
.mph-rtext {
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.38;
}
.mph-after {
  transition: transform 0.5s var(--ease-out);
  transform: translateY(calc(-1 * var(--up, 0px)));
}
.mph-dim {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: rgb(0 0 0 / 0.42);
  opacity: 0;
  transition: opacity 0.3s;
}
.mph-asheet {
  position: absolute;
  z-index: 5;
  left: 8px;
  right: 8px;
  bottom: 22px;
  display: grid;
  padding: 6px;
  border-radius: 18px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  transform: translateY(115%);
  transition: transform 0.45s var(--ease-out);
}
.mph-aitem {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px;
  border-radius: 12px;
  font-size: 16px;
  transition: background 0.15s;
}
.mph-aitem .mph-i,
.mph-aitem .ic {
  width: 20px;
  height: 20px;
  color: var(--fg-2);
}
.mph-asep {
  height: 1px;
  margin: 4px 10px;
  background: var(--float-line);
}
.mph-inbox.mph-sheeted .mph-dim {
  opacity: 1;
}
.mph-inbox.mph-sheeted .mph-asheet {
  transform: none;
}
.mph-row.mph-gone {
  opacity: 0;
}

/* ---- at the desk (the hero): the agent's lines, and the push on its way to the phone */
.mph-agentwin {
  background: var(--panel);
}
.mph-agentlog {
  list-style: none;
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 10px 10px 4px;
}
.mph-agentlog li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 13px;
  line-height: 1.4;
  transition:
    opacity 0.35s,
    background 0.35s,
    translate 0.45s var(--ease-out);
}
.mph-agentlog li .mono {
  color: var(--faint);
  font-size: 11px;
  padding-top: 2px;
}
.mph-agentlog li:last-child {
  background: var(--float-sel);
  color: var(--fg);
}
.mph-agentfoot {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 8px 16px 12px;
  color: var(--faint);
  font-size: 11px;
}
.mph-wire {
  display: grid;
  gap: 8px;
  margin: 0;
  justify-items: end;
}
.mph-wire .mono {
  color: var(--muted);
  font-size: 11px;
}
.mph-wire-line {
  position: relative;
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line-3) 0 6px, transparent 6px 11px);
}
.mph-wire-line i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
  opacity: 0;
  transform: translateX(var(--x, 0px));
}
.mph-hero.mph-sending .mph-wire-line i {
  opacity: 1;
  transform: translateX(var(--to, 300px));
  transition:
    transform 0.8s cubic-bezier(0.5, 0, 0.6, 1),
    opacity 0.2s;
}
@media (max-width: 760px) {
  .mph-wire {
    display: none;
  }
}
/* what moves: hidden until its step, at rest (no script) everything shown */
.mph-hero.sc-armed [data-mph-step]:not(.on) {
  opacity: 0;
  translate: 0 6px;
}
.mph-hero.sc-armed [data-mph-ping]:not(.on),
.mph-pings.sc-armed .mph-notice:not(.on) {
  opacity: 0;
  transform: translateY(-14px) scale(0.96);
}
.mph-pings.sc-armed .mph-notice.on {
  transform: translateY(calc(var(--slot, 0) * 112px));
}
.mph-hero [data-mph-ping] {
  transition:
    opacity 0.4s,
    transform 0.6s var(--ease-spring);
}
.mph-hero.sc-armed [data-mph-app]:not(.on),
.mph-appscene.sc-armed [data-mph-opened]:not(.on) {
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
}
.mph-hero.sc-armed .mph-sbody > :not(.on),
.mph-hero.sc-armed .mph-toast:not(.on),
.mph-inbox.sc-armed .mph-toast:not(.on),
.mph-hero:not(.sc-armed) [data-mph-verify],
.mph-hero:not(.sc-armed) .mph-stack,
.mph-inbox:not(.sc-armed) .mph-toast {
  opacity: 0;
}
.mph-hero.sc-armed .mph-toast:not(.on),
.mph-inbox.sc-armed .mph-toast:not(.on) {
  transform: translateY(12px);
}
.mph-hero.sc-armed .mph-stack:not(.on) {
  opacity: 0;
}

/* ---- notifications: what happens, and the one ping it makes */
.mph-events {
  position: relative;
  background: var(--panel);
}
.mph-elog {
  display: grid;
  gap: 1px;
  padding: 10px 10px 12px;
}
.mph-elog p {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 5px 8px;
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.4;
  transition:
    opacity 0.3s,
    background 0.3s;
}
.mph-elog p .mono {
  color: var(--faint);
  font-size: 11px;
  padding-top: 1px;
}
.mph-elog p b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
/* the batch's fixes: six dots on one line, each lit as its fix comes in */
.mph-dots {
  display: inline-flex;
  gap: 5px;
  margin-left: 6px;
  vertical-align: 1px;
}
.mph-dots i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--ok);
  transition:
    opacity 0.3s,
    scale 0.35s var(--ease-spring);
}
.mph-pings.sc-armed .mph-dots i:not(.on) {
  opacity: 0.18;
  scale: 0.7;
}
.mph-elog p.mph-lit {
  background: var(--float-sel);
}
/* the batch: one bracket round its lines, and what they make */
.mph-batch {
  position: relative;
  display: grid;
  gap: 1px;
  margin: 0 0 12px;
  padding-left: 12px;
}
.mph-batch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 26px;
  width: 7px;
  border: 1.5px solid var(--brand);
  border-right: 0;
  border-radius: 6px 0 0 6px;
  transition: opacity 0.35s;
}
.mph-bundle {
  padding: 4px 8px 0;
  color: var(--brand);
  font-size: 11px;
  transition: opacity 0.35s;
}
.mph-pings.sc-armed .mph-batch:not(.mph-bundled)::before,
.mph-pings.sc-armed .mph-batch:not(.mph-bundled) .mph-bundle,
.mph-pings.sc-armed [data-mph-ev]:not(.on) {
  opacity: 0;
}

/* ---- the player phones: hold to talk */
.mph-walkie {
  position: absolute;
  top: 14px;
  left: 50%;
  display: inline-grid;
  translate: -50% 0;
  transition: opacity 0.3s;
}
.mph-walkie .pl-swap > span {
  gap: 9px;
  height: 40px;
  padding: 0 16px 0 13px;
  border-radius: 20px;
  background: rgb(10 10 11 / 0.86);
  border: 1px solid rgb(255 69 58 / 0.5);
  color: #eeebe4;
  font-size: 14px;
  font-weight: 500;
  justify-content: start;
}
.mph-rec {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff453a;
  box-shadow: 0 0 0 4px rgb(255 69 58 / 0.2);
}
.mph-meter {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}
.mph-meter i {
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: #ff453a;
  transform: scaleY(var(--l, 0.3));
}
.mph-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgb(238 235 228 / 0.25);
  border-top-color: #eeebe4;
  animation: mph-spin 0.8s linear infinite;
}
@keyframes mph-spin {
  to {
    rotate: 1turn;
  }
}
.mph-said {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  transition: transform 0.55s var(--ease-out);
}
.mph-player.sc-armed .mph-said:not(.on) {
  transform: translateY(105%);
}
.mph-player.sc-armed [data-mph-walkie]:not(.on),
.mph-player.sc-armed [data-mph-box]:not(.on),
.mph-player.sc-armed [data-mph-new]:not(.on) {
  opacity: 0;
}
.mph-player:not(.sc-armed) [data-mph-walkie] {
  opacity: 0;
}
.mph-player.sc-armed .mph-box:not(.on) {
  transform: scale(0.94);
}
.mph-note[data-mph-new] {
  transition: opacity 0.4s;
}

/* ---- the Home Screen and the app it opens */
.mph-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 64px);
  justify-content: space-between;
  row-gap: 30px;
  padding: 34px 30px 0;
}
.mph-tile {
  position: relative;
  display: grid;
  justify-items: center;
  width: 64px;
  height: 64px;
  border-radius: 15px;
  background: rgb(255 255 255 / 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mph-tile > i {
  align-self: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgb(255 255 255 / 0.28);
}
.mph-tile.t1 {
  background: rgb(214 228 236 / 0.2);
}
.mph-tile.t2 {
  background: rgb(240 225 200 / 0.18);
}
.mph-tile.t3 {
  background: rgb(200 220 205 / 0.2);
}
.mph-tile.t4 {
  background: rgb(255 255 255 / 0.12);
}
.mph-tile.t5 {
  background: rgb(230 210 230 / 0.16);
}
.mph-lampo {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    opacity 0.35s,
    transform 0.55s var(--ease-spring);
}
.mph-lampo .mph-appicon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
}
.mph-badge3 {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 12px;
  background: #ff3b30;
  color: #fff;
  font: 600 14px / 1 var(--ui);
  font-style: normal;
  transition:
    opacity 0.3s,
    transform 0.45s var(--ease-spring);
}
.mph-tlabel {
  position: absolute;
  top: calc(100% + 6px);
  color: #fff;
  font-size: 12.5px;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}
.mph-appscene [data-mph-opened] {
  transform-origin: 84% 36%;
}
.mph-appscene.sc-armed .mph-lampo:not(.on) {
  opacity: 0;
  transform: scale(0.4);
}
.mph-appscene.sc-armed .mph-badge3:not(.on) {
  opacity: 0;
  transform: scale(0.3);
}
.mph-install {
  list-style: none;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.mph-install li {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: 13.5px;
  transition: border-color 0.35s;
}
.mph-install li b {
  font-size: 14px;
}
.mph-install li > span {
  color: var(--fg-2);
}
.mph-install li > span b {
  color: var(--fg);
  font-size: inherit;
}
.mph-install .inl {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}
.mph-install li.mph-lit {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
}
.mph-keep {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.mph-keep .mph-i {
  width: 17px;
  height: 17px;
  color: var(--ok);
  margin-top: 1px;
}
/* the kinds that land in the inbox */
.mph-kinds {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.mph-kinds li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 0.35s;
}
.mph-kinds .kg {
  width: 11px;
  height: 11px;
  color: var(--fg-2);
  translate: 0 1px;
}
.mph-kinds li > span {
  display: grid;
  gap: 2px;
}
.mph-kinds b {
  font-size: 14px;
}
.mph-kinds li > span > span {
  color: var(--muted);
  font-size: 12.5px;
}
.mph-kinds li.mph-lit {
  border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
}

/* Playbooks' page (pages/products/playbooks.ts, assets/products/playbooks.js): build.ts adds it to the product pages'
   stylesheet. Every scene is one window of the landing page's parts (sc-win, sc-stage, sc-tl, pl-* chips, sc-btn): the
   film's frame large, a panel beside it, a timeline or a row under it. py- is this page's own. */

/* ---- the window: the frame and what is under it on the left, a 310 px panel on the right; stacked on a phone */
.py-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
}
.py-main {
  display: grid;
  align-content: start;
  min-width: 0;
}
.py-side {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border-left: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .py-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .py-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}
.py-x .sc-cursor {
  z-index: 5;
}
.py-side-h {
  margin: 0;
  color: var(--faint);
  font: var(--fw-ui) 10.5px / 1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.py-sec {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.py-sec .kg {
  width: 10px;
  height: 10px;
  color: var(--fg-2);
}
.py-sec b {
  font-size: 13px;
  font-weight: var(--fw-strong);
}
.py-n {
  color: var(--muted);
  font-size: 11px;
}
.py-from {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
}
/* states stacked in one place, one shown; the hidden ones are hidden to reading too */
.py-sw {
  display: inline-grid;
}
.py-sw > [data-s] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.py-sw > [data-s].on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s,
    visibility 0s;
}
/* a quiet line at the window's foot: what agents read */
.py-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 0;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  transition: opacity 0.35s;
}
.py-foot-k {
  color: var(--faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.py-x.sc-armed .py-later:not(.in) {
  opacity: 0;
}
.py-toast {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 52px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border-radius: var(--r-full);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% 8px;
  transition:
    opacity 0.3s,
    translate 0.45s var(--ease-out);
}
.py-toast .ic {
  color: var(--ok);
}
.py-toast.in {
  opacity: 1;
  translate: -50% 0;
}

/* ---- what a rule governs, on the frame: the wordmark, the title line, a zone; dashed off-white like the app's marks */
.py-tie .sc-brand,
.py-tie .sc-line {
  width: fit-content;
  margin-inline: auto;
  border-radius: 2px;
  outline: 1.5px dashed transparent;
  outline-offset: 0.7cqw;
  transition:
    transform 0.9s var(--ease-out),
    outline-color 0.3s;
}
.py-hero[data-tie='brand'] .sc-brand,
.py-hero[data-tie='line'] .sc-line,
.py-sg[data-py-logo='1'] .sc-brand {
  outline-color: rgb(238 235 228 / 0.9);
}
.py-zone {
  position: absolute;
  left: 52%;
  top: 73%;
  width: 36%;
  height: 19%;
  border: 1.5px dashed rgb(238 235 228 / 0.9);
  border-radius: 4px;
  background: rgb(238 235 228 / 0.1);
  opacity: 0;
  transition: opacity 0.4s;
}
.py-zone .mono {
  position: absolute;
  left: 6px;
  top: 4px;
  color: #eeebe4;
  font-size: max(10px, 1.1cqw);
  white-space: nowrap;
  text-shadow: 0 0 3px rgb(0 0 0 / 0.8);
}
.py-hero[data-tie='zone'] .py-zone {
  opacity: 1;
}
.py-x .sc-band {
  transition: opacity 0.35s;
}
.py-x .sc-band .mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--fg);
  font-size: 10px;
}
.py-hero:not([data-tie='end']) .py-end {
  opacity: 0;
}

/* ---- the hero's rules */
.py-rules {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.py-rule {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  transition:
    background 0.3s,
    color 0.3s;
}
.py-rule .kg,
.py-add .kg,
.py-inh .kg {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  color: var(--fg-2);
}
.py-rule.py-lit,
.py-hero[data-tie='zone'] .py-new {
  background: var(--sel);
  color: var(--fg);
}
.py-slot {
  display: grid;
}
.py-slot > [data-s] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s,
    visibility 0s 0.3s;
}
.py-slot > [data-s].on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.3s,
    visibility 0s,
    background 0.3s,
    color 0.3s;
}
.py-add {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 8px;
  border: 1px dashed var(--line-3);
  color: var(--faint);
  transition: transform 0.12s;
}
.py-add.press {
  transform: scale(0.98);
}
.py-typing {
  border-style: solid;
  border-color: color-mix(in srgb, var(--fg) 35%, var(--line-2));
  color: var(--fg);
}
/* the words typed fill a box their full copy already sized, so nothing grows while they are written */
.py-tb {
  display: grid;
}
.py-tb > span {
  grid-area: 1 / 1;
}
.py-ghost {
  visibility: hidden;
}
.py-typed {
  justify-self: start;
  align-self: start;
  border-right: 1.5px solid var(--fg);
}
.py-key {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 20px;
  border-radius: 5px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  color: var(--fg-2);
  transition: transform 0.12s;
}
.py-key .ic {
  width: 12px;
  height: 12px;
}
.py-key.down {
  transform: translateY(1px) scale(0.92);
}
.py-inh {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0 8px;
  color: var(--muted);
  font-size: 12px;
}

/* ---- layers: the cutdown's last six seconds, the end card's hold on them; the chain and what its agent reads */
.py-ruler {
  position: relative;
  height: 60px;
  margin: 0 14px;
  border-top: 1px solid var(--line);
}
.py-rl {
  position: absolute;
  top: 5px;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  color: var(--faint);
  font-size: 10px;
}
.py-rl:first-child {
  translate: 0 0;
}
.py-rl:nth-child(4) {
  translate: -100% 0;
}
.py-rticks {
  position: absolute;
  inset: 22px 0 auto;
  height: 12px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px calc(100% / 12));
}
.py-hold {
  position: absolute;
  top: 20px;
  height: 16px;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100%);
}
.py-hold-bar {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 32%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 60%, transparent);
  transform-origin: 100% 50%;
  transition:
    transform 0.7s var(--ease-out),
    opacity 0.35s;
}
.py-lay[data-end='1'] .py-hold-bar {
  transform: scaleX(0.5);
}
.py-lay[data-end=''] .py-hold-bar,
.py-lay[data-end=''] .py-hold-l {
  opacity: 0;
}
.py-hold-l {
  position: absolute;
  right: 0;
  top: 40px;
  justify-items: end;
  color: var(--fg-2);
  font-size: 10.5px;
  white-space: nowrap;
  transition: opacity 0.35s;
}
.py-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.py-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font-size: 12px;
  transition: opacity 0.35s;
}
.py-chip .kg {
  width: 8px;
  height: 8px;
  color: var(--fg-2);
}
.py-chip b {
  font-weight: var(--fw-strong);
}
.py-chip .mono {
  color: var(--muted);
  font-size: 10.5px;
}
.py-arr {
  color: var(--faint);
}
.py-x.sc-armed .py-chip:not(.on) {
  opacity: 0.3;
}
.py-merged {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.py-mline {
  display: grid;
  gap: 2px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--fg-2);
  transition:
    opacity 0.35s,
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
}
.py-src {
  color: var(--faint);
  font-size: 10.5px;
}
.py-x.sc-armed .py-mline:not(.on) {
  opacity: 0;
}
.py-clash .py-mline.lose > span:first-child {
  color: var(--muted);
  text-decoration: line-through;
}
.py-clash .py-mline.win {
  border-color: transparent;
  background: var(--sel);
  color: var(--fg);
}
.py-verdict {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 8px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  transition: opacity 0.35s;
}
.py-verdict .kg {
  width: 9px;
  height: 9px;
  margin-top: 4px;
  color: var(--brand);
}
.py-x.sc-armed .py-verdict:not(.on) {
  opacity: 0;
}

/* ---- references and a skill: the moment shown on the frame, the references under it; the skill beside */
.py-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s,
    visibility 0s 0.4s;
}
.py-shot.on {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.4s,
    visibility 0s;
}
.py-reelbox {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  aspect-ratio: 9 / 16;
  translate: -50% 0;
  overflow: hidden;
}
.py-cap {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 64%;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.py-capline {
  position: absolute;
  left: 0;
  right: 0;
  top: 62%;
  border-top: 1.5px dashed rgb(238 235 228 / 0.9);
}
.py-capline .mono {
  position: absolute;
  right: 4px;
  bottom: 3px;
  color: #eeebe4;
  font-size: 10px;
  text-shadow: 0 0 3px rgb(0 0 0 / 0.8);
}
.py-refs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px 14px 12px;
  list-style: none;
}
.py-ref {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.py-ref-pic {
  position: relative;
  height: 58px;
  overflow: hidden;
  border-radius: 6px;
  background: #0a0a0a;
  box-shadow: 0 0 0 1px var(--line-2);
  transition: box-shadow 0.3s;
}
.py-ref.py-lit .py-ref-pic {
  box-shadow: 0 0 0 2px var(--fg);
}
.py-ref-pic > .sc-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  translate: 0 -50%;
}
.py-reelthumb {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  aspect-ratio: 9 / 16;
  translate: -50% 0;
}
.py-reelthumb .sc-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.py-swatch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.py-link {
  display: grid;
  place-items: center;
  background: var(--panel-2);
  color: var(--fg-2);
}
.py-link .ic {
  width: 20px;
  height: 20px;
}
.py-ref-c {
  color: var(--fg-2);
  font-size: 11.5px;
  line-height: 1.3;
}
.py-ref-s {
  color: var(--faint);
  font-size: 10px;
}
.py-when {
  margin: 0;
  color: var(--fg-2);
}
.py-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--fg-2);
  font-size: 12px;
}
.py-steps li,
.py-files li {
  transition: opacity 0.35s;
}
.py-files {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.py-files li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 7px;
  border: 1px solid var(--line);
  font-size: 11.5px;
}
.py-files .ic {
  width: 13px;
  height: 13px;
  color: var(--muted);
}
.py-size {
  color: var(--faint);
  font-size: 10.5px;
}
.py-x.sc-armed :is(.py-steps li, .py-files li):not(.in) {
  opacity: 0;
}
.py-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}

/* ---- what agents read: the versions under the frame, stamped; what the agent does, newest first */
.py-vers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
}
.py-ver {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  font-size: 12px;
  transition: opacity 0.4s;
}
.py-ver b {
  font-weight: var(--fw-strong);
}
.py-stamp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
}
.py-stamp .ic {
  width: 12px;
  height: 12px;
}
.py-v3 {
  border-color: color-mix(in srgb, var(--fg) 30%, var(--line-2));
}
.py-v3 .py-stamp {
  color: var(--fg);
}
.py-ok {
  color: var(--ok);
  font-size: 11px;
}
.py-made {
  color: var(--muted);
  font-size: 11.5px;
  transition: opacity 0.4s;
}
.py-x.sc-armed :is(.py-v3, .py-made):not(.in) {
  opacity: 0;
}
.py-does {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}
.py-does.placed .py-do {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(var(--y, 0));
}
.py-do {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 3px 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--fg-2);
  transition:
    transform 0.45s var(--ease-out),
    opacity 0.35s,
    background 0.35s,
    color 0.35s;
}
.py-do > .mono:first-child {
  color: var(--faint);
  font-size: 10.5px;
  line-height: 1.75;
}
.py-do-sub {
  grid-column: 2;
  color: var(--muted);
  font: 10.5px / 1.45 var(--mono);
  overflow-wrap: anywhere;
}
.py-do.now {
  background: color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg);
}
.py-x.sc-armed .py-do:not(.in) {
  opacity: 0;
}

/* ---- suggestions: the notes behind it under the frame, the suggestion in the rules beside */
.py-k.should {
  color: var(--should);
}
.py-k.must {
  color: var(--must);
}
.py-k.idea {
  color: var(--idea);
}
.py-x.sc-armed .py-k:not(.in) {
  opacity: 0.3;
}
.py-asks {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 6px 10px 10px;
  list-style: none;
}
.py-ask {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 5px 6px;
  border-radius: 8px;
  color: var(--fg-2);
  font-size: 12px;
  transition:
    opacity 0.35s,
    background 0.3s;
}
.py-ask b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.py-file {
  color: var(--faint);
  font-size: 10.5px;
}
.py-x.sc-armed .py-ask:not(.in) {
  opacity: 0.25;
}
.py-sg.py-evs .py-ask {
  background: var(--sel);
}
.py-prop {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.py-x.sc-armed .py-prop:not(.in) {
  opacity: 0;
  translate: 0 8px;
}
.py-prop-h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
}
.py-prop-h b {
  display: block;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.py-ago {
  color: var(--faint);
  font-size: 10.5px;
}
.py-why {
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
}
.py-ev {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  justify-self: start;
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11.5px;
  transition: background 0.3s;
}
.py-sg.py-evs .py-ev {
  background: var(--sel);
  color: var(--fg);
}
.py-ev .ic {
  width: 13px;
  height: 13px;
}
.py-diff {
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 11.5px;
}
.py-fold {
  margin: 0;
  padding: 4px 10px;
  background: var(--panel-2);
  color: var(--faint);
  font-size: 10.5px;
}
.py-dl {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 4px;
  margin: 0;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  color: var(--fg);
}
.py-dec {
  display: grid;
  justify-items: end;
}
.py-dec > [data-s] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.py-dec .ic {
  width: 13px;
  height: 13px;
}
.py-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  color: var(--ok);
  font-size: 12px;
  font-weight: var(--fw-strong);
}

/* ---- the taste file: the note under the timeline, the sections it feeds beside */
.py-ts .sc-card {
  transition: opacity 0.3s;
}
.py-ts .sc-card.off {
  opacity: 0;
}
.py-now {
  display: grid;
  padding: 8px 14px 12px;
}
.py-now > [data-s] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--fg-2);
  font-size: 12px;
}
.py-now b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.py-t-sec {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 7px 9px;
  border-radius: 8px;
  transition:
    opacity 0.35s,
    background 0.3s;
}
.py-t-h {
  margin: 0;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.py-t-l {
  margin: 0;
  color: var(--fg-2);
  font-size: 12px;
}
.py-x.sc-armed .py-t-sec:not(.on) {
  opacity: 0.3;
}
.py-t-sec.hot {
  background: var(--sel);
}
.py-x .pl-av {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

/* Publishing's page (pages/products/publishing.ts, assets/products/publishing.js): build.ts adds it to the site's
   stylesheet. The composer is the app's (web/src/styles/publish.css): the platform's mark says where, a counter sits
   beside the field it bounds, what blocks is said under its field. Everything that changes keeps its room: words are
   stacked swaps, what appears fades in its place, moving parts move by transform. */

/* ---- the composer's parts, shared by the scenes */
.pub-pm {
  flex: none;
  width: 13px;
  height: 13px;
}
.pub-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.pub-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 30px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 12px;
  white-space: nowrap;
}
.pub-tab .pub-pm {
  color: var(--fg-2);
}
.pub-tab.on {
  background: var(--raise-sheen), var(--panel);
  box-shadow: var(--raise);
  color: var(--fg);
}
.pub-ts {
  display: inline-flex;
  color: var(--faint);
  font-size: 10.5px;
}
.pub-ts .pl-swap > span {
  gap: 4px;
}
.pub-st {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pub-st .kg {
  width: 7px;
  height: 7px;
}
.pub-st.ok,
.kg.ok {
  color: var(--ok);
}
.pub-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.pub-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--fg-2);
  font-size: 11.5px;
  font-weight: var(--fw-ui);
  line-height: 1.35;
}
.pub-label > :first-child {
  min-width: 0;
}
.pub-lhint {
  color: var(--faint);
  font-weight: normal;
}
.pub-count {
  flex: none;
  margin-left: auto;
  color: var(--faint);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s;
}
.pub-count.over {
  color: var(--must);
}
.pub-input {
  display: block;
  min-height: 30px;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.pub-area {
  min-height: 62px;
}
.pub-select {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 12px;
  white-space: nowrap;
}
.pub-chev {
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  rotate: 45deg;
}
.pub-chev.r {
  margin-top: 0;
  rotate: -45deg;
}
.pub-where {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pub-as {
  color: var(--muted);
  font-size: 11.5px;
}
.pub-seg {
  display: inline-flex;
  flex-wrap: wrap;
  justify-self: start;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.pub-sb {
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    transform 0.15s;
}
.pub-sb.on {
  background: var(--raise-sheen), var(--panel);
  box-shadow: var(--raise);
  color: var(--fg);
}
.pub-sb.press {
  transform: scale(0.94);
}
.pub-cover {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.pub-cov {
  /* a block wherever it sits (a span: inline, its aspect ratio would be lost and the frame with it) */
  display: block;
  flex: none;
  width: 104px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px var(--line);
}
.pub-cover-side {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  min-width: 0;
}
.pub-ctc {
  flex-basis: 100%;
  color: var(--fg-2);
  font-size: 11px;
}
.pub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: 7px;
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
  color: var(--fg);
  font-size: 11.5px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition:
    transform 0.15s,
    opacity 0.3s;
}
.pub-btn .ic {
  width: 13px;
  height: 13px;
}
.pub-btn.quiet {
  background: transparent;
  box-shadow: none;
  color: var(--fg-2);
}
.pub-btn.danger {
  color: var(--must);
}
.pub-btn.primary {
  background: var(--raise-sheen), var(--brand-deep);
  box-shadow: var(--raise);
  color: var(--on-brand);
}
.pub-btn.off {
  opacity: 0.7;
}
.pub-btn.press {
  transform: scale(0.95);
}
/* Publish waits for what blocks it: the button stays, quieter, until nothing does */
.pub-publish:not(.ready) {
  opacity: 0.42;
}
.pub-prob {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  transition: opacity 0.3s;
}
.pub-prob .ic {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 1px;
}
.pub-prob.block {
  color: var(--must);
}
.pub-prob.warn {
  color: var(--should);
}
.pub-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.pub-who {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--faint);
  font-size: 11.5px;
}
.pub-go {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.pub-needs {
  color: var(--muted);
  font-size: 11.5px;
}
.pub-needs .pl-swap > span {
  justify-content: end;
}
.pub-when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.pub-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-size: 11.5px;
}
.pub-switch i {
  position: relative;
  width: 26px;
  height: 15px;
  border-radius: var(--r-full);
  background: var(--brand-deep);
}
.pub-switch i::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 13px;
  width: 11px;
  height: 11px;
  border-radius: var(--r-full);
  background: #fff;
}
.pub-spin {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-full);
  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: pub-spin 0.8s linear infinite;
}
@keyframes pub-spin {
  to {
    rotate: 1turn;
  }
}

/* ---- the hero (scenes.js runs publishing.js pubhero): the player, the final V3, and its composer over it */
.pubh .pl-btn .ic {
  width: 13px;
  height: 13px;
}
.pubh-go {
  padding-right: 12px;
  transition: transform 0.15s;
}
.pubh-go.press {
  transform: scale(0.95);
}
.pubh-stage .kg {
  color: var(--fg-2);
}
.pubh-out {
  margin-left: 4px;
  color: var(--muted);
}
.pubh-body {
  position: relative;
  display: grid;
  padding: 26px clamp(12px, 7cqw, 92px) 30px;
  overflow: hidden;
}
/* the player's stage behind the composer: the film at its top, letterboxed in the dark */
.pubh-film {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  background: #050505;
}
.pubh-dim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.58);
  transition: opacity 0.35s;
}
.pubh.sc-armed .pubh-dim:not(.on) {
  opacity: 0;
}
.pub-modal {
  position: relative;
  z-index: 2;
  container: pubm / inline-size;
  display: grid;
  gap: 12px;
  justify-self: center;
  width: min(820px, 100%);
  padding: 14px 16px 16px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  box-shadow:
    0 40px 100px -30px rgb(0 0 0 / 0.75),
    var(--shadow-float);
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  transform-origin: 50% 0;
  transition:
    opacity 0.3s var(--ease-out),
    scale 0.55s var(--ease-spring),
    translate 0.55s var(--ease-spring);
}
.pubh.sc-armed .pub-modal:not(.open) {
  opacity: 0;
  scale: 0.97;
  translate: 0 10px;
}
.pub-mhead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pub-mhead b {
  min-width: 0;
  font-size: 14px;
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}
.pub-vchip {
  flex: none;
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  color: var(--fg-2);
  font-size: 10.5px;
}
.pub-x {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
}
.pub-x::before,
.pub-x::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 1.5px;
  height: 14px;
  background: var(--muted);
  rotate: 45deg;
}
.pub-x::after {
  rotate: -45deg;
}
/* the form and where the post stands share one place: the taller one sizes it, one shows */
.pub-panels {
  display: grid;
}
.pub-panel {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity 0.35s,
    visibility 0.35s;
}
.pub-panel:not(.on) {
  opacity: 0;
  visibility: hidden;
}
.pub-form {
  display: grid;
  gap: 12px;
  align-content: start;
}
.pub-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 18px;
}
.pub-col {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}
.pubh [data-pub-p]:not(.on) {
  opacity: 0;
}
.pub-kitline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.pub-kitline > .ic {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--fg-2);
}
.pub-kitline > span:nth-child(2) {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}
.pub-kitline b {
  font-size: 12px;
}
.pub-kitline > span:nth-child(2) > span {
  color: var(--muted);
  font-size: 11px;
}
.pub-status {
  display: grid;
  align-content: start;
  gap: 12px;
}
.pub-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pub-state .pl-swap > span {
  gap: 8px;
  color: var(--fg-2);
  font-size: 12.5px;
}
.pub-state b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.pub-state .kg {
  width: 10px;
  height: 10px;
}
.pub-openyt {
  margin-left: auto;
}
.pubh.sc-armed .pub-openyt:not(.on) {
  opacity: 0;
}
.pub-progress {
  display: block;
  max-width: 420px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--panel-2);
  opacity: 0;
  transition: opacity 0.3s;
}
.pub-progress i {
  display: block;
  height: 100%;
  background: var(--brand);
  transform: scaleX(var(--p, 1));
  transform-origin: 0 50%;
}
.pubh.pub-sending .pub-progress {
  opacity: 1;
}
.pub-line {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}
.pub-line .pl-swap > span {
  white-space: normal;
}
.pub-facts {
  display: grid;
  gap: 4px;
  margin: 0;
}
.pub-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 8em) minmax(0, 1fr);
  gap: 10px;
  font-size: 11.5px;
}
.pub-facts dt {
  color: var(--faint);
}
.pub-facts dd {
  margin: 0;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.pub-history {
  display: grid;
  gap: 6px;
  font-size: 11.5px;
}
.pub-hhead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--fg-2);
}
.pub-history ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 2px;
  list-style: none;
  color: var(--muted);
}
.pub-history li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  transition: opacity 0.35s;
}
.pub-history li .kg {
  flex: none;
  width: 7px;
  height: 7px;
}
.pub-history b {
  color: var(--fg-2);
  font-weight: var(--fw-strong);
}
.pubh.sc-armed [data-pub-h]:not(.on) {
  opacity: 0;
}
/* the confirm: a dialog over the composer, which it dims */
.pub-mdim {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background: rgb(0 0 0 / 0.42);
  opacity: 0;
  transition: opacity 0.25s;
}
.pub-mdim.on {
  opacity: 1;
}
.pub-confirm {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 8px;
  width: min(340px, calc(100% - 32px));
  padding: 16px;
  border-radius: 12px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  opacity: 0;
  translate: -50% -50%;
  scale: 0.95;
  transition:
    opacity 0.25s,
    scale 0.45s var(--ease-spring);
}
.pub-confirm.on {
  opacity: 1;
  scale: 1;
}
.pub-confirm b {
  font-size: 13.5px;
  font-weight: var(--fw-strong);
}
.pub-confirm p {
  margin: 0;
  color: var(--fg-2);
}
.pub-cbtns {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.pub-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 6px;
  transition:
    opacity 0.3s,
    translate 0.5s var(--ease-spring);
}
.pub-toast.on {
  opacity: 1;
  translate: -50% 0;
}
.pub-toast .kg {
  width: 9px;
  height: 9px;
  color: var(--ok);
}
.pubh .sc-cursor {
  z-index: 6;
}
/* a narrow composer (the hero's on a phone, every chapter's panel): one column, the fields that tell this story; a
   state's word steps aside for its glyph */
@container pubm (max-width: 560px) {
  .pub-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pub-f-desc,
  .pub-f-tags,
  .pub-f-cover,
  .pub-f-who,
  .pub-f-when,
  .pub-kitline,
  .pub-btn.danger,
  .pub-sw {
    display: none;
  }
  .pub-modal .pub-tab {
    gap: 5px;
    padding: 0 4px;
  }
}
@media (max-width: 560px) {
  .pubh-body {
    padding: 14px 10px 18px;
  }
  .pub-modal {
    padding: 12px;
  }
}

/* ---- the chapters (README "Rules"): one window each, the final V3 on its stage beside the composer's panel; the bar's
   pill says what the window stands for, one quiet line under it what the agent reads */
.pub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pub-pill .kg {
  width: 8px;
  height: 8px;
}
.pub-pill .pub-pm,
.pub-pill .ic {
  width: 12px;
  height: 12px;
}
.pub-pill .pl-swap > span {
  gap: 6px;
}
.pub-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
}
/* the film at its own shape, centred in the stage when the panel beside it is the taller */
.pub-stage {
  display: grid;
  align-content: center;
  min-width: 0;
  background: #050505;
}
.pub-side {
  container: pubm / inline-size;
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 12px 14px 12px;
  border-left: 1px solid var(--line);
}
.pub-side .pub-tab {
  gap: 5px;
  padding: 0 5px;
}
.pub-side .pub-foot {
  padding-top: 10px;
}
.pub-sent {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-size: 12px;
}
.pub-sent b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.pub-sent .kg {
  width: 9px;
  height: 9px;
}
.pub-go .pl-swap > span {
  justify-content: end;
}
.pub-agent {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 0;
  padding: 9px 14px 10px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 10.5px;
  text-align: left;
}
.pub-agent-k {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (max-width: 760px) {
  .pub-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .pub-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* the agent drafts (pubdraft): what it fills in comes in beat by beat; the confirm stands over the panel */
.pubd-cover {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.pubd.sc-armed [data-d-hit] {
  transition: opacity 0.4s;
}
.pubd.sc-armed [data-d-hit]:not(.on) {
  opacity: 0;
}

/* the limits (publimits): the hashtags as she types them, the caret the text's own edge */
.publ-tags {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.publ-tail {
  padding-right: 1px;
  border-right: 1.5px solid var(--fg);
  animation: publ-blink 1.1s steps(1) infinite;
}
@keyframes publ-blink {
  50% {
    border-right-color: transparent;
  }
}
.publ [data-l-prob]:not(.on) {
  opacity: 0;
}
.publ .pub-go {
  margin-left: auto;
}

/* scheduled posts (pubsched): the posts with their covers in the panel; under the window the day, its night, each post
   at its time and the clock running through */
.pubs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
}
.pubs-head b {
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.pubs-post {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 9px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
}
.pubs-thumb .pub-cov {
  width: 100px;
}
.pubs-what {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.pubs-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.pubs-name .pub-pm {
  width: 13px;
  height: 13px;
  color: var(--fg-2);
}
.pubs-what .pl-swap {
  display: grid;
}
.pubs-what .pl-swap > span {
  display: grid;
  justify-items: start;
  align-content: start;
  gap: 4px;
  white-space: normal;
}
.pubs-st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-size: 12px;
}
.pubs-st b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.pubs-st .kg {
  width: 9px;
  height: 9px;
}
.pubs-line2 {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.pubs-day {
  padding: 24px 14px 10px;
  border-top: 1px solid var(--line);
  text-align: left;
}
.pubs-track {
  position: relative;
  height: 36px;
  border-radius: 7px;
  border: 1px solid var(--line-2);
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 28));
  container-type: inline-size;
}
.pubs-night {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * 100%);
  width: calc((var(--to) - var(--from)) * 100%);
  background: color-mix(in srgb, var(--nice) 12%, transparent);
}
.pubs-night .mono {
  position: absolute;
  left: 50%;
  bottom: 3px;
  translate: -50% 0;
  color: color-mix(in srgb, var(--nice) 75%, var(--fg-2));
  font-size: 10px;
}
.pubs-key {
  position: absolute;
  top: 50%;
  left: calc(var(--at) * 100%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  translate: -50% -50%;
  border-radius: var(--r-full);
  background: var(--panel);
  border: 1.5px solid var(--line-3);
  color: var(--fg-2);
  transition:
    border-color 0.35s,
    color 0.35s;
}
.pubs-key .pub-pm {
  width: 11px;
  height: 11px;
}
.pubs-key.out {
  border-color: var(--ok);
  color: var(--ok);
}
.pubs-now {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pubs-line {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 1.5px;
  background: var(--brand);
  translate: calc(var(--p, 0) * 100cqw) 0;
}
.pubs-clock {
  position: absolute;
  top: -22px;
  left: 0;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--brand-deep);
  color: var(--on-brand);
  font-size: 10px;
  white-space: nowrap;
  translate: clamp(0px, calc(var(--p, 0) * 100cqw - 50%), calc(100cqw - 100%)) 0;
}
.pubs-axis {
  position: relative;
  height: 14px;
  margin: 5px 0 0;
  color: var(--faint);
  font-size: 10px;
}
.pubs-axis > span {
  position: absolute;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
  white-space: nowrap;
}
.pubs-axis > span:first-child {
  translate: 0 0;
}
.pubs-axis > span:last-child {
  translate: -100% 0;
}
@media (max-width: 480px) {
  .pubs-mk,
  .pubs-axis > span:nth-child(4) {
    display: none;
  }
}

/* the publish kit (pubkit): made on a press, then each file to download and all in one ZIP; the stage is the cover */
.pubk-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
}
.pubk-head > .ic {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 1px;
  color: var(--fg-2);
}
.pubk-head > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.pubk-head b {
  font-size: 12.5px;
  font-weight: var(--fw-strong);
}
.pubk-head > span > span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.pubk-make .pl-swap > span {
  justify-content: start;
}
.pubk-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pubk-size {
  margin-left: 2px;
  color: var(--faint);
  font-size: 10px;
}
.pub-btn.primary .pubk-size {
  color: color-mix(in srgb, var(--on-brand) 70%, transparent);
}
.pubk-copy {
  display: grid;
  gap: 5px;
}
.pubk-k {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
}
.pubk-copy pre {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pubk.sc-armed [data-k-file] {
  transition:
    opacity 0.35s,
    translate 0.45s var(--ease-out);
}
.pubk.sc-armed [data-k-file]:not(.on) {
  opacity: 0;
  translate: 0 4px;
}

/* Review links' page (pages/products/reviewLinks.ts, assets/products/review-links.js): build.ts adds it to the site's
   stylesheet. Its pieces are the app's: the visitor's page (guest.css), the share dialog (share-links.css), the slate a
   password shows (entrance.css), at the scenes' scale and in the site's tokens. Everything moves by transform and
   opacity; words that change are stacked (.pl-swap), so no scene changes its size. */

/* ---- shared pieces: a browser window, buttons, people, badges, notes, a field being typed, a toast */
.rl-win {
  position: relative;
  container: rl / inline-size;
  border-radius: 14px;
  background: var(--page);
  border: 1px solid var(--line-2);
  box-shadow:
    0 50px 120px -40px rgb(0 0 0 / 0.65),
    var(--shadow-float);
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.rl-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.rl-chrome > i {
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--line-3);
}
.rl-addr {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  padding: 3px 12px;
  border-radius: var(--r-full);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 10.5px;
  white-space: nowrap;
}
.rl-addr .ic {
  width: 10px;
  height: 10px;
  color: var(--ok);
}
.rl-gap {
  flex: 1;
}
.rl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--raise-sheen), var(--panel-2);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--raise);
  color: var(--fg);
  font-size: 12px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.rl-btn .ic {
  width: 13px;
  height: 13px;
}
.rl-btn.sm {
  height: 26px;
  padding: 0 10px;
  font-size: 11.5px;
}
.rl-btn.primary {
  background: var(--raise-sheen), var(--brand-deep);
  box-shadow: var(--raise);
  color: var(--on-brand);
}
.rl-btn.ok {
  background: var(--raise-sheen), var(--ok);
  box-shadow: var(--raise);
  color: var(--page);
}
.rl-btn.quiet {
  background: none;
  box-shadow: none;
  color: var(--fg-2);
}
.rl-btn.danger {
  color: var(--must);
}
.rl-btn.press,
.rl-ib.press,
.rl-seg > span.press,
.rl-play.press,
.rl-tool.press,
.rl-kind.press {
  transform: translateY(1px) scale(0.96);
}
.rl-ib {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--fg-2);
}
.rl-ib .ic {
  width: 14px;
  height: 14px;
}
.rl-av {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: var(--ink-5);
  color: var(--fg-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 8%, transparent);
  font: var(--fw-strong) 10px / 1 var(--ui);
}
.rl-av.client {
  background: var(--should-bg);
  color: var(--should);
}
.rl-av.agent {
  background: var(--claude-bg);
  color: var(--claude-3, var(--claude));
}
.rl-who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-2);
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.rl-tcchip {
  flex: none;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--fg);
  font-size: 10.5px;
}
.rl-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 1px 7px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg-2);
  font-size: 10.5px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.rl-badge.warn {
  background: var(--should-bg);
  color: var(--should);
}
.rl-badge.ok {
  background: var(--ok-bg);
  color: var(--ok);
}
.rl-badge.idea {
  background: color-mix(in srgb, var(--idea) 14%, transparent);
  color: var(--idea);
}
.rl-badge .kg {
  width: 8px;
  height: 8px;
}
.rl-note {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out),
    border-color 0.4s,
    box-shadow 0.4s;
}
.rl-nhead {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.rl-by {
  color: var(--fg-2);
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.rl-ntext {
  margin: 0;
  color: var(--fg);
  font-size: 12.5px;
}
.rl-reply {
  margin: 0;
  padding-left: 8px;
  border-left: 2px solid var(--line-2);
  color: var(--fg-2);
}
.rl-reply b {
  margin-right: 4px;
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.rl-check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ok) 28%, transparent);
  background: var(--ok-bg);
  color: var(--fg);
  font-size: 11.5px;
}
.rl-check > .ic {
  width: 13px;
  height: 13px;
  color: var(--ok);
}
.rl-check.quiet {
  border-color: transparent;
  background: none;
  color: var(--ok);
}
.rl-checkrow .pl-swap {
  display: grid;
}
.rl-checkrow .pl-swap > span {
  display: flex;
  white-space: normal;
}
.rl-checkrow .rl-check {
  width: 100%;
}
.rl-typed {
  display: inline-grid;
  min-width: 0;
}
.rl-typed > span {
  grid-area: 1 / 1;
}
.rl-type-size {
  visibility: hidden;
}
.rl-ph {
  color: var(--faint);
  transition: opacity 0.2s;
}
.rl-typed:has(> [data-rl-text]:not(:empty)) .rl-ph,
.rl-typed:has(> [data-rl-name]:not(:empty)) .rl-ph,
.rl-typed:has(> [data-rl-pw]:not(:empty)) .rl-ph,
.rl-typed:has(> [data-sv-type]:not(:empty)) .rl-ph {
  opacity: 0;
}
.rl-toast {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: var(--r-full);
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 12px;
  font-weight: var(--fw-strong);
  translate: -50% 0;
  transition:
    opacity 0.3s,
    translate 0.45s var(--ease-spring);
}
.rl-toast > .ic {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--ok);
}
.rl-toast .pl-swap > span {
  white-space: normal;
}
.rl-toast:not(.on) {
  opacity: 0;
  translate: -50% 10px;
}
.rl-mark {
  flex: none;
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.rl-wordmark {
  display: block;
  height: 22px;
  width: auto;
  fill: currentColor;
}

/* ---- the hero: the visitor's video page (GuestPlayer.tsx) in a browser */
.rl-top {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.rl-title {
  display: grid;
  min-width: 0;
  margin: 0;
  line-height: 1.25;
}
.rl-title b {
  font-size: 13px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.rl-title span {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.rl-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 31%, 320px);
}
.rl-main {
  min-width: 0;
}
.rl-stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: #050505;
  overflow: hidden;
}
.rl-pic {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 548;
  overflow: hidden;
  container-type: inline-size;
}
/* the box she draws: the app's drawing red, drawn from its corner out */
.rl-draw {
  position: absolute;
  border: 2px solid #ff2d55;
  border-radius: 3px;
  transform-origin: 0 0;
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s;
}
.sc-armed .rl-draw:not(.on) {
  opacity: 0;
  transform: scale(0.08);
}
/* the drawing tools, on the picture while it is paused */
.rl-tools {
  position: absolute;
  left: 50%;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: rgb(18 18 19 / 0.88);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
  color: #d9d5cc;
  translate: -50% 0;
  transition:
    opacity 0.3s,
    translate 0.4s var(--ease-out);
}
.rl-tools > i {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: rgb(255 255 255 / 0.16);
}
.rl-tool {
  display: grid;
  place-items: center;
  width: 28px;
  height: 26px;
  border-radius: 7px;
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.12s;
}
.rl-tool .ic {
  width: 14px;
  height: 14px;
}
.rl-tool.on {
  background: rgb(255 255 255 / 0.16);
  color: #fff;
}
.rl-tool.dim {
  opacity: 0.45;
}
.sc-armed .rl-tools:not(.on) {
  opacity: 0;
  translate: -50% 6px;
}
.rl-transport {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 12px;
  border-top: 1px solid var(--line);
}
.rl-step {
  display: grid;
  place-items: center;
  color: var(--fg-2);
}
.rl-step .ic {
  width: 14px;
  height: 14px;
}
.rl-play {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--fg);
  color: var(--page);
  transition: transform 0.12s;
}
.rl-i-pause,
.rl-hero.rl-playing .rl-i-play {
  display: none;
}
.rl-hero.rl-playing .rl-i-pause {
  display: block;
}
.rl-tc {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 3px 10px;
  border-radius: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.rl-tc b {
  font-size: 15px;
  font-weight: var(--fw-strong);
}
.rl-tc span {
  color: var(--muted);
  font-size: 10px;
}
.rl-speed {
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 10.5px;
}
.rl-tl {
  position: relative;
  height: 76px;
  padding: 0 14px;
  border-top: 1px solid var(--line);
  container-type: inline-size;
}
.rl-key {
  position: absolute;
  top: 22px;
  left: calc(14px + var(--at) * (100% - 28px));
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  translate: -50% 0;
  transition:
    opacity 0.3s,
    scale 0.45s var(--ease-spring);
}
.rl-key .kg {
  width: 11px;
  height: 11px;
}
.rl-key.should {
  color: var(--should);
}
.rl-key.idea {
  color: var(--idea);
}
.rl-key.done {
  opacity: 0.45;
}
.sc-armed .rl-key[data-rl-key]:not(.on) {
  opacity: 0;
  scale: 0.2;
}
.rl-side {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-left: 1px solid var(--line);
}
.rl-notes-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.rl-notes-head > b {
  font-size: 13px;
  font-weight: var(--fw-strong);
}
.rl-count {
  display: inline-grid;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  color: var(--fg-2);
  font-size: 10.5px;
  text-align: center;
}
.rl-composer {
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.rl-composer.on {
  border-color: color-mix(in srgb, var(--fg) 30%, var(--line-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 6%, transparent);
}
.rl-where {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.rl-marks {
  color: var(--muted);
  font-size: 10.5px;
  transition: opacity 0.3s;
}
.rl-marks:not(.on) {
  opacity: 0;
}
.rl-text {
  margin: 0;
  min-height: 34px;
  color: var(--fg);
  font-size: 12.5px;
}
.rl-cfoot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.rl-kind {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  color: var(--fg-2);
  font-weight: var(--fw-strong);
  transition: transform 0.12s;
}
.rl-kind .pl-swap > span {
  justify-content: start;
  gap: 5px;
}
.rl-kind > .ic {
  width: 11px;
  height: 11px;
  color: var(--muted);
}
.rl-kind .kg {
  width: 9px;
  height: 9px;
}
.kg.should {
  color: var(--should);
}
.kg.idea {
  color: var(--idea);
}
.rl-attach {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: var(--muted);
}
.rl-attach .ic {
  width: 13px;
  height: 13px;
}
.sc-armed [data-rl-new]:not(.on) {
  opacity: 0;
  translate: 0 -6px;
}
.rl-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.rl-foot .rl-mark {
  width: 13px;
  height: 13px;
}
.rl-foot b {
  color: var(--fg-2);
  font-weight: var(--fw-strong);
}
.rl-dot {
  color: var(--faint);
}
.rl-hero .sc-cursor {
  z-index: 6;
}
@container rl (max-width: 1000px) {
  .rl-tc span,
  .rl-speed {
    display: none;
  }
}
/* a phone: the notes under the player, as the visitor's page lays them out there */
@container rl (max-width: 760px) {
  .rl-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .rl-side {
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .rl-hide-sm {
    display: none;
  }
}
@container rl (max-width: 480px) {
  .rl-top {
    gap: 8px;
    padding: 0 10px;
  }
  .rl-title span,
  .rl-tl .pl-ruler span:nth-child(even) {
    display: none;
  }
  .rl-transport {
    gap: 8px;
  }
}

/* ---- making a link: the share dialog (ShareModal.tsx, share-links.css) over the player, dimmed */
.rl-make,
.rl-watch {
  position: relative;
  display: grid;
  justify-items: center;
  padding: clamp(28px, 5vw, 56px) clamp(12px, 4vw, 48px);
  border-radius: 16px;
  overflow: hidden;
  text-align: left;
}
.rl-dim {
  position: absolute;
  inset: 0;
  background: #050505;
}
.rl-dim img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(3px) brightness(0.32);
  transform: scale(1.04);
}
.rl-dialog {
  position: relative;
  display: grid;
  gap: 12px;
  width: min(640px, 100%);
  padding: 20px 22px 22px;
  border-radius: 16px;
  background: var(--float-bg);
  border: 1px solid var(--float-line);
  box-shadow: var(--shadow-float);
  font-size: 12.5px;
  line-height: 1.4;
}
.rl-dhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.rl-dhead b {
  font-size: 17px;
  font-weight: var(--fw-strong);
  letter-spacing: -0.01em;
}
.rl-dhead .ic {
  width: 16px;
  height: 16px;
  color: var(--muted);
}
.rl-intro {
  margin: 0;
  color: var(--fg-2);
}
.rl-sharer {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -4px 0 0;
  color: var(--muted);
}
.rl-sharer .ic {
  width: 13px;
  height: 13px;
}
.rl-new {
  display: grid;
  gap: 10px;
}
.rl-newrow {
  display: flex;
  gap: 10px;
  margin: 0;
}
.rl-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--ink-1, var(--page));
  border: 1px solid var(--line-2);
  color: var(--fg);
  font-size: 13px;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}
.rl-input.on {
  border-color: color-mix(in srgb, var(--fg) 34%, var(--line-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg) 7%, transparent);
}
.rl-newrow .rl-btn {
  height: 36px;
}
.rl-kindrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.rl-seg {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border-radius: 10px;
  background: var(--ink-1, var(--page));
  border: 1px solid var(--line);
}
.rl-seg > span {
  padding: 4px 11px;
  border-radius: 7px;
  color: var(--fg-2);
  font-size: 12px;
  white-space: nowrap;
  transition:
    background 0.25s,
    color 0.25s,
    box-shadow 0.25s,
    transform 0.12s;
}
.rl-seg > span.on {
  background: var(--raise-sheen), var(--panel-2);
  box-shadow: var(--raise);
  color: var(--fg);
}
.rl-custom {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fg-2);
  white-space: nowrap;
}
.rl-custom .ic {
  width: 12px;
  height: 12px;
}
.rl-sum {
  margin: 0;
  color: var(--muted);
}
.rl-sum .pl-swap {
  display: grid;
}
.rl-sum .pl-swap > span {
  white-space: normal;
}
.rl-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg) 3%, var(--float-bg));
  border: 1px solid var(--line-2);
  transition:
    opacity 0.4s,
    translate 0.5s var(--ease-out);
}
.sc-armed .rl-card[data-rl-card]:not(.on) {
  opacity: 0;
  translate: 0 8px;
}
.rl-chead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.rl-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  color: var(--fg-2);
}
.rl-tile .ic {
  width: 16px;
  height: 16px;
}
.rl-ctitle {
  display: grid;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.rl-ctitle > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.rl-ctitle b {
  font-size: 14px;
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.rl-active {
  color: var(--muted);
  font-size: 11.5px;
}
.rl-csub {
  color: var(--muted);
  font-size: 11.5px;
}
.rl-cacts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.rl-url {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--ink-1, var(--page));
  color: var(--fg-2);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.rl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.rl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg-2);
  font-size: 11.5px;
}
.rl-chip .ic {
  width: 12px;
  height: 12px;
}
.rl-linksum {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.rl-face {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--fg) 7%, transparent);
}
.rl-face .ic {
  width: 12px;
  height: 12px;
}
.rl-dialog .sc-cursor {
  z-index: 6;
}
@media (max-width: 560px) {
  .rl-dialog {
    padding: 16px 14px 18px;
  }
  .rl-newrow {
    flex-wrap: wrap;
  }
  .rl-newrow .rl-input {
    flex-basis: 100%;
  }
  .rl-kindrow {
    flex-wrap: wrap;
  }
  .rl-custom {
    display: none;
  }
  .rl-chead {
    flex-wrap: wrap;
  }
  .rl-ctitle {
    flex-basis: calc(100% - 44px);
  }
  .rl-ctitle b {
    white-space: normal;
  }
  .rl-cacts {
    width: 100%;
    padding-left: 44px;
  }
  .rl-hide-sm {
    display: none;
  }
}

/* ---- a folder's review room (Room.tsx, guest.css) */
.rl-rtop {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.rl-rhead {
  display: grid;
  gap: 10px;
  padding: 22px 22px 18px;
}
.rl-from {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--fg-2);
  font-size: 13px;
}
.rl-from .rl-av {
  width: 30px;
  height: 30px;
  font-size: 10.5px;
}
.rl-from b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.rl-rtitle {
  margin: 0;
  font: var(--fw-strong) clamp(24px, 3vw, 34px) / 1.05 var(--display);
  font-stretch: 87.5%;
  letter-spacing: -0.02em;
}
.rl-rlede {
  max-width: 62ch;
  margin: 0;
  color: var(--fg-2);
  font-size: 13px;
}
.rl-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: var(--muted);
}
.rl-meter {
  position: relative;
  width: 160px;
  height: 6px;
  border-radius: var(--r-full);
  background: var(--line-2);
  overflow: hidden;
}
.rl-meter span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ok);
  transform: scaleX(var(--p, 0.5));
  transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out);
}
.rl-ptext b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.rl-dl {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 2px 0 0;
}
.rl-dlsize {
  margin-left: 4px;
  opacity: 0.85;
  font-size: 10.5px;
}
.rl-dlsize .pl-swap > span {
  justify-content: start;
}
.rl-dlsay {
  color: var(--muted);
}
.rl-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 4px 22px 24px;
}
.rl-film {
  display: grid;
  gap: 6px;
  min-width: 0;
  transition:
    opacity 0.5s,
    translate 0.6s var(--ease-out);
}
.rl-poster {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #050505;
  box-shadow: 0 0 0 1px var(--line-2);
}
.rl-fpic {
  position: absolute;
  inset: 0;
}
.rl-fpic.sc-stage {
  inset: 50% 0 auto;
  translate: 0 -50%;
}
.rl-fpic img,
.rl-blur img,
.rl-stand img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a reel stands in its card, over itself blurred (the library's way with a vertical video) */
.rl-blur {
  position: absolute;
  inset: 0;
  filter: blur(12px) brightness(0.6);
  transform: scale(1.2);
}
.rl-stand {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  aspect-ratio: 9 / 16;
  translate: -50% 0;
}
.rl-vchip {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgb(7 7 7 / 0.72);
  color: #eeebe4;
  font-size: 10px;
}
.rl-vchip.dur {
  top: auto;
  left: auto;
  right: 6px;
  bottom: 6px;
}
.rl-fname {
  margin: 0;
  color: var(--fg);
  font-size: 12.5px;
  font-weight: var(--fw-strong);
  overflow-wrap: anywhere;
}
.rl-fstate {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}
.rl-fstate .pl-swap > span {
  justify-content: start;
}
.rl-poster {
  transition: box-shadow 0.45s var(--ease-out);
}
.rl-film.hit .rl-poster {
  box-shadow:
    0 0 0 1px var(--line-2),
    0 0 0 3px color-mix(in srgb, var(--ok) 70%, transparent);
}
.sc-armed .rl-film[data-rl-added]:not(.on) {
  opacity: 0;
  translate: 0 10px;
}
@container rl (max-width: 760px) {
  .rl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 4px 14px 18px;
  }
  .rl-rhead {
    padding: 18px 14px 14px;
  }
  .rl-rtop {
    padding: 0 14px;
  }
}

/* ---- what the client sees (scenes: rlsees): her review link on her phone beside your team's notes on the same video,
   as the landing page's client scene sets a phone beside one card. Her note crosses, the team's stay inside */
.rl-sees {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  text-align: left;
}
.rl-sv-team {
  min-width: 0;
}
.rl-sv-body {
  position: relative;
  display: grid;
  font-size: 12px;
  line-height: 1.35;
}
.rl-sv-notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: start;
  gap: 10px;
  padding: 12px 12px 4px;
}
.rl-sv-col {
  display: grid;
  gap: 10px;
}
.rl-sv-notes .pl-note {
  transition:
    opacity 0.4s,
    border-color 0.4s,
    box-shadow 0.4s;
}
.rl-sees .pl-av,
.rl-sees .pl-role {
  font-size: 10px;
}
.rl-sv-client {
  color: var(--should);
  border-color: color-mix(in srgb, var(--should) 45%, var(--line-2));
}
.rl-sv-role {
  color: var(--should);
}
/* what crosses: her note, lit on both sides; what stays inside: the team's own, lit in the quiet colour */
.rl-sv-cross.lit,
.rl-sv-hers.lit {
  border-color: color-mix(in srgb, var(--should) 55%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--should) 22%, transparent);
}
.rl-sv-in.lit {
  border-color: color-mix(in srgb, var(--fg) 34%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 10%, transparent);
}
.rl-sv-fix {
  border-radius: 6px;
  transition: background 0.4s;
}
.rl-sv-fix.lit {
  background: color-mix(in srgb, var(--should) 12%, transparent);
}
.rl-sv-answer {
  display: grid;
}
.rl-sv-answer .pl-swap {
  display: grid;
}
.rl-sv-answer .pl-swap > span {
  display: block;
  white-space: normal;
}
.rl-sv-state {
  display: grid;
  align-content: start;
  gap: 7px;
}
.rl-sv-field {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--fg) 30%, var(--line-2));
  background: var(--panel-2);
  color: var(--fg);
  font-size: 12px;
}
.rl-sv-field .rl-typed {
  width: 100%;
}
.rl-sv-field .rl-typed > * {
  grid-area: 1 / 1;
}
.rl-sv-reads {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--should);
  font-size: 11.5px;
}
.rl-sv-reads .ic {
  flex: none;
  width: 12px;
  height: 12px;
}
.rl-sv-btns {
  display: flex;
  justify-content: end;
  gap: 6px;
}
.rl-sv-said {
  display: block;
  padding-left: 8px;
  border-left: 2px solid var(--line-2);
  color: var(--fg-2);
  font-size: 12px;
}
.rl-sv-said b {
  margin-right: 4px;
  color: var(--fg);
}
.rl-sv-never {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 14px 12px;
  color: var(--muted);
  font-size: 12px;
  transition: opacity 0.4s;
}
.rl-sv-never .ic {
  flex: none;
  width: 13px;
  height: 13px;
}
.rl-sv-phone [data-sv-came] {
  transition: opacity 0.4s;
}
.rl-sees .sc-cursor {
  z-index: 6;
}
.rl-sees.sc-armed [data-sv-came]:not(.on),
.rl-sees.sc-armed [data-sv-never]:not(.on) {
  opacity: 0;
}
@media (max-width: 760px) {
  .rl-sees {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .rl-sv-team {
    width: 100%;
  }
  .rl-sv-notes {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- on their phone: the visitor's page on a phone (guest.css, its phone layout) beside your side of it */
.rl-phone {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  max-width: 900px;
  text-align: left;
}
.rl-handset {
  position: relative;
  width: 300px;
  aspect-ratio: 9 / 19;
  overflow: hidden;
  border-radius: 38px;
  border: 7px solid #1a1a1b;
  background: var(--page);
  box-shadow:
    0 0 0 1px #333,
    0 50px 100px -40px rgb(0 0 0 / 0.7),
    var(--shadow-float);
  font-size: 11.5px;
  line-height: 1.35;
}
.rl-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 3;
  width: 34%;
  height: 20px;
  border-radius: var(--r-full);
  background: #000;
  translate: -50% 0;
}
.rl-ptop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 38px 10px 8px;
  border-bottom: 1px solid var(--line);
}
.rl-ptop .rl-title {
  flex: 1;
}
.rl-ptop .rl-title b {
  font-size: 11.5px;
  white-space: normal;
}
.rl-ptop .pl-swap > span {
  justify-content: end;
}
.rl-verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: var(--r-full);
  background: var(--ok-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 30%, transparent);
  color: var(--ok);
  font-size: 11.5px;
  font-weight: var(--fw-strong);
}
.rl-verdict .ic {
  width: 12px;
  height: 12px;
}
.rl-more {
  display: grid;
  place-items: center;
  width: 22px;
  color: var(--fg-2);
}
.rl-more .ic {
  width: 16px;
  height: 16px;
}
.rl-ppic {
  background: #050505;
}
.rl-ptools,
.rl-pctl {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
}
.rl-ptools > span,
.rl-pctl > span:not(.rl-tc) {
  display: grid;
  place-items: center;
  width: 28px;
  height: 24px;
}
.rl-ptools .ic,
.rl-pctl .ic {
  width: 14px;
  height: 14px;
}
.rl-ptools > i {
  width: 1px;
  height: 14px;
  margin: 0 4px;
  background: var(--line-2);
}
.rl-ptools .dim {
  opacity: 0.45;
}
.rl-pctl .rl-play {
  width: 26px;
  height: 26px;
}
.rl-pctl .rl-tc {
  margin-left: 6px;
}
.rl-pctl .rl-tc b {
  font-size: 13px;
}
.rl-pnotes {
  display: grid;
  gap: 8px;
  padding: 10px;
}
.rl-pnotes .rl-ntext {
  font-size: 12px;
}
.rl-thanks {
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 10px;
  top: 92px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--ink-2, var(--panel));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-float);
  color: var(--fg);
  font-size: 12px;
  transition:
    opacity 0.35s,
    translate 0.5s var(--ease-spring);
}
.rl-thanks .ic {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: var(--ok);
}
.sc-armed .rl-thanks:not(.on) {
  opacity: 0;
  translate: 0 -8px;
}
.rl-handset .sc-cursor {
  z-index: 6;
}
.rl-team {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.rl-team-k {
  margin: 0;
  color: var(--faint);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rl-tcard {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
}
.rl-tpic {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
  container-type: inline-size;
}
.rl-tpic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rl-tpic .sc-card {
  inset: 50% 0 auto;
  height: calc(100cqw * 548 / 1280);
  translate: 0 -50%;
  container-type: inline-size;
}
.rl-tmeta {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  padding: 10px 14px;
  font-size: 12px;
}
.rl-tstage {
  margin: 0;
  color: var(--ok);
  font-weight: var(--fw-strong);
}
.rl-tstage .pl-swap > span {
  justify-content: start;
}
.rl-tstage .kg {
  width: 10px;
  height: 10px;
}
.rl-tseen {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.rl-tseen .ic {
  width: 12px;
  height: 12px;
}
.rl-events {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.rl-events li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--fg);
  font-size: 12px;
  transition:
    opacity 0.4s,
    translate 0.45s var(--ease-out);
}
.rl-events li > .ic {
  justify-self: center;
  width: 13px;
  height: 13px;
  color: var(--muted);
}
.rl-events li:first-child > .ic {
  color: var(--ok);
}
.rl-events time {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.rl-team .rl-events li {
  background: var(--panel);
  border: 1px solid var(--line);
}
.sc-armed .rl-events [data-rl-e]:not(.on) {
  opacity: 0;
  translate: 0 4px;
}
@media (max-width: 760px) {
  .rl-phone {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .rl-team {
    width: 100%;
  }
}
@media (max-width: 420px) {
  .rl-tcard {
    grid-template-columns: 110px minmax(0, 1fr);
  }
}

/* ---- who opened it: the link's card, its line opened (LinkActivity.tsx) */
.rl-linksum.on {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  color: var(--fg-2);
}
.rl-faces {
  display: inline-flex;
}
.rl-faces .rl-av + .rl-av {
  margin-left: -5px;
}
.rl-lstext {
  flex: 1;
  min-width: 0;
}
.rl-lstext b {
  color: var(--fg);
  font-weight: var(--fw-strong);
}
.rl-lsmeter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.rl-lsbar {
  position: relative;
  width: 56px;
  height: 4px;
  border-radius: var(--r-full);
  background: var(--line-2);
  overflow: hidden;
}
.rl-lsbar span {
  position: absolute;
  inset: 0;
  background: var(--fg-2);
  transform: scaleX(0.85);
  transform-origin: 0 50%;
}
.rl-up {
  rotate: 180deg;
  width: 13px;
  height: 13px;
}
.rl-act {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  border-radius: 10px;
  background: var(--ink-1, var(--page));
}
.rl-acth {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11.5px;
}
.rl-acth:first-child {
  margin-top: 0;
}
.rl-whead {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  color: var(--fg-2);
}
.rl-whead b {
  color: var(--fg);
  font-weight: var(--fw-strong);
  white-space: nowrap;
}
.rl-wv {
  color: var(--muted);
  font-size: 10.5px;
}
.rl-heatbox {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 3px;
}
.rl-heat {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--fg-2);
}
.rl-heat-track {
  fill: var(--line-2);
}
/* what hasn't come in yet: covered from its end, uncovered as the reports arrive */
.rl-heatcover {
  position: absolute;
  inset: 0;
  background: var(--line-2);
  transform: scaleX(var(--c, 0));
  transform-origin: 100% 50%;
}
.rl-wwho {
  margin: 0;
  color: var(--muted);
}
.rl-visitors {
  list-style: none;
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.rl-visitors li {
  display: grid;
  grid-template-columns: 22px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.rl-visitors b {
  font-weight: var(--fw-strong);
}
.rl-visitors li > span:last-child {
  justify-self: end;
  color: var(--muted);
  font-size: 11.5px;
  text-align: right;
}
.rl-watch .rl-events li {
  padding: 4px 0;
}
.rl-privacy {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.rl-privacy .ic {
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 1px;
}
@media (max-width: 560px) {
  .rl-lsmeter {
    display: none;
  }
  .rl-visitors li > span:last-child {
    font-size: 11px;
  }
  .rl-visitors li {
    grid-template-columns: 22px minmax(0, 1fr);
  }
  .rl-visitors li > span:last-child {
    grid-column: 2;
    justify-self: start;
    text-align: left;
  }
}

/* ---- yours to end: the link's front page, a film slate in a graph editor (Invite.tsx, entrance.css) */
.rl-gwin {
  position: relative;
  overflow: hidden;
  text-align: left;
}
.rl-editor {
  position: relative;
  height: clamp(470px, 48vw, 540px);
  background: var(--page);
}
.rl-curve {
  position: absolute;
  inset: 0 0 34px;
  width: 100%;
  height: calc(100% - 34px);
  opacity: 0.55;
}
.rl-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.rl-ease {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.rl-key0,
.rl-key1 {
  fill: var(--page);
  stroke: var(--brand);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.rl-gruler {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  border-top: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 25px) 0 100% / 100% 8px no-repeat;
  container-type: inline-size;
}
.rl-ghead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: var(--brand);
  transform: translateX(calc(var(--p, 0.42) * 100cqw));
}
.rl-gtc {
  position: absolute;
  top: 9px;
  right: 12px;
  color: var(--muted);
  font-size: 10.5px;
}
/* the review it opens: the room behind the slate, coming in once the clapper shuts */
.rl-review {
  position: absolute;
  inset: 36px 0 34px;
  overflow: hidden;
  background: #050505;
  transition: opacity 0.6s var(--ease-out);
  container-type: inline-size;
}
.rl-review img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rl-review .sc-card {
  inset: 50% 0 auto;
  height: calc(100cqw * 548 / 1280);
  translate: 0 -50%;
}
.rl-gate:not(.sc-armed) .rl-review,
.sc-armed .rl-review:not(.on) {
  opacity: 0;
}
.rl-slate {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(36px + (100% - 70px) / 2 + 16px);
  display: grid;
  width: min(440px, calc(100% - 32px));
  translate: -50% -50%;
  transition:
    opacity 0.5s,
    scale 0.6s var(--ease-out);
}
.sc-armed .rl-slate.away {
  opacity: 0;
  scale: 0.96;
}
.rl-stick {
  position: relative;
  z-index: 1;
  height: 30px;
  margin-right: 8px;
  border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(-55deg, var(--fg) 0 16px, var(--ink-3, var(--panel-2)) 16px 32px);
  box-shadow: 0 0 0 1px var(--line-3);
  transform-origin: 13px 100%;
  transform: rotate(-10deg);
  transition: transform 0.6s var(--ease-out);
}
.rl-stick::before {
  content: '';
  position: absolute;
  left: 4px;
  bottom: -4px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink-5, var(--line-3));
  box-shadow: 0 0 0 1px var(--line-4, var(--line-3));
}
.rl-stick.shut {
  transform: rotate(0deg);
  transition: transform 140ms cubic-bezier(0.6, 0, 0.9, 0.4);
}
.rl-board {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 0 20px 20px;
  border-radius: 0 0 14px 14px;
  background: var(--ink-2, var(--panel));
  box-shadow:
    0 0 0 1px var(--line-2),
    var(--shadow-float);
}
.rl-board::before {
  content: '';
  height: 30px;
  margin: 0 -20px;
  background: repeating-linear-gradient(55deg, var(--fg) 0 16px, var(--ink-3, var(--panel-2)) 16px 32px);
  box-shadow: 0 1px 0 var(--line-3);
}
.rl-meta {
  display: flex;
  margin: -12px -20px 0;
  border-bottom: 1px solid var(--line-2);
}
.rl-meta > span {
  position: relative;
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
  padding: 7px 14px 9px;
  border-left: 1px solid var(--line-2);
  color: var(--faint);
  font: var(--fw-strong) 10px var(--ui);
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.rl-meta > span:first-child {
  border-left: 0;
  padding-left: 20px;
}
.rl-meta .pl-swap > span {
  display: grid;
  gap: 2px;
  justify-items: start;
}
.rl-meta b {
  color: var(--fg);
  font: var(--fw-ui) 12.5px var(--mono);
  letter-spacing: 0;
}
/* a take that was no good: stamped NG beside its number */
.rl-ng {
  position: relative;
}
.rl-ng::after {
  content: 'NG';
  position: absolute;
  left: calc(100% + 8px);
  top: -1px;
  padding: 0 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: var(--must);
  font: var(--fw-strong) 10px var(--mono);
  rotate: -8deg;
}
.rl-gfrom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.rl-gfrom .rl-av {
  width: 32px;
  height: 32px;
  font-size: 11px;
}
.rl-gfrom > span {
  display: grid;
}
.rl-gfrom b {
  font-size: 13px;
  font-weight: var(--fw-strong);
}
.rl-gfrom > span > span {
  color: var(--muted);
}
.rl-gtext .pl-swap {
  display: grid;
}
.rl-gtext .pl-swap > span {
  display: grid;
  gap: 4px;
  white-space: normal;
  align-content: start;
}
.rl-gt {
  font: var(--fw-strong) 22px / 1.1 var(--display);
  font-stretch: 87.5%;
  letter-spacing: -0.01em;
}
.rl-gtext .pl-swap > span > span {
  color: var(--fg-2);
  font-size: 12.5px;
  line-height: 1.45;
}
.rl-gform .pl-swap {
  display: grid;
}
.rl-gform .pl-swap > span {
  display: grid;
  gap: 8px;
  white-space: normal;
  align-content: start;
}
.rl-pw {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--page);
  border: 1px solid var(--line-2);
  font: 13px var(--mono);
  letter-spacing: 0.12em;
  transition:
    border-color 0.25s,
    translate 0.2s;
}
.rl-pw .rl-typed {
  flex: 1;
}
.rl-pw .rl-ph {
  font-family: var(--ui);
  letter-spacing: 0;
}
.rl-pw > .ic {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.rl-pw.bad {
  border-color: color-mix(in srgb, var(--must) 60%, var(--line-2));
  animation: rl-shake 0.36s var(--ease-out);
}
@keyframes rl-shake {
  20% {
    translate: -5px 0;
  }
  45% {
    translate: 4px 0;
  }
  70% {
    translate: -2px 0;
  }
}
.rl-err {
  min-height: 16px;
  color: var(--must);
  font-size: 11.5px;
}
.rl-err .pl-swap > span {
  white-space: normal;
}
.rl-go {
  justify-content: center;
  height: 38px;
}
.rl-gate .sc-cursor {
  z-index: 6;
}
@media (max-width: 480px) {
  .rl-board {
    padding: 0 14px 16px;
  }
  .rl-board::before {
    margin: 0 -14px;
  }
  .rl-meta {
    margin: -12px -14px 0;
  }
  .rl-meta > span {
    padding: 7px 10px 9px;
  }
  .rl-meta > span:first-child {
    padding-left: 14px;
  }
}

/* ---- on your own site: the real embed player on a made-up page (pages/films.ts makes the frame's address) */
.rl-ewin {
  max-width: 880px;
  margin-inline: auto;
  background: var(--page);
  text-align: left;
}
.rl-site {
  display: grid;
  gap: 14px;
  padding: clamp(14px, 3vw, 28px);
}
.rl-sitehead {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 22px);
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.rl-sitehead b {
  margin-right: auto;
  color: var(--fg);
}
.rl-site .film-embed {
  display: block;
  width: 100%;
  border-radius: var(--r-md);
  background: #000;
}
.rl-sitecap {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-sm);
}
.rl-sitecap b {
  color: var(--fg);
}
.rl-sitecap .mono {
  font-size: 0.92em;
}