/* ==========================================================================
   Omnichannel Inbox case study — animated product mockups (Shipped Design)
   ==========================================================================

   Same approach as meni.css, and deliberately so:

   1. Fixed light product chrome. These read as screenshots of the app, not as
      page elements, so they do not flip with the site theme.

   2. Everything scales off one font-size. Each .omock is a query container and
      .omock-stage sets font-size in cqw; every size, gap, and transform below
      is in em, so the whole mock scales like an image at any width with no
      breakpoints of its own.

   Timings are percentages of each scene's own loop; the comment above each
   block is the storyboard. Scene 1 is the whole feature, scenes 2 to 4 are
   close-ups of one surface each. */

.omock {
  container-type: inline-size;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(28, 22, 48, 0.1);
  box-shadow: 0 18px 44px rgba(30, 25, 60, 0.13);
  background: #ffffff;

  /* Menaia product palette, fixed rather than themed (see note above). */
  --op: #6d4ae0;
  --op-deep: #5733c8;
  --op-soft: #efeafe;
  --op-line: #e2dafb;
  --oink: #221f2b;
  --omuted: #6e6980;
  --oline: #eae8f0;
  --oapp: #f7f6fa;
  --obad: #dc2626;
  --oamber: #f59e0b;
  --ogood: #16a34a;
}

.omock-stage {
  position: relative;
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45;
  color: var(--oink);
  background: var(--oapp);
  overflow: hidden;
}

/* Baseline size for every icon in a mock.
   The Lucide <use> references carry no width/height of their own, so without
   this an unstyled one falls back to SVG's 300x150 default. Placed ahead of the
   scene rules so their equal-specificity overrides still win on source order. */
.omock svg { width: 1em; height: 1em; flex: none; }

/* Pointer used by the scenes that show a click. */
.omock-cursor {
  position: absolute;
  z-index: 8;
  width: 1.5em;
  height: 1.5em;
  fill: #ffffff;
  stroke: #1a1626;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 0.15em 0.3em rgba(20, 16, 40, 0.3));
  opacity: 0;
  pointer-events: none;
}

/* Sparkle badge marking a conversation the AI touched. */
.omock-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.62em;
  font-weight: 600;
  color: var(--op);
  background: var(--op-soft);
  border-radius: 0.5em;
  padding: 0.1em 0.45em;
}

.omock-ai svg { width: 0.9em; height: 0.9em; fill: currentColor; }

/* Shared identity block for the mock headers: a name (with an optional Meni AI
   chip beside it) stacked over a quieter second line. One rule so the inbox,
   client thread, and AI Receptionist all space the two lines identically. */
.omock-who { display: flex; flex-direction: column; line-height: 1.3; }
.omock-whorow { display: flex; align-items: center; gap: 0.35em; }

/* Three-dot "typing" indicator, shared by the chat scenes. */
.omock-typing {
  display: inline-flex;
  gap: 0.25em;
  align-items: center;
  padding: 0.6em 0.8em;
  background: var(--op-soft);
  border-radius: 0.7em;
}

.omock-typing i {
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: var(--op);
  animation: odot 1.2s infinite;
}

.omock-typing i:nth-child(2) { animation-delay: 0.16s; }
.omock-typing i:nth-child(3) { animation-delay: 0.32s; }

@keyframes odot { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* Shared bubble shapes. */
.o-bub {
  max-width: 68%;
  padding: 0.6em 0.8em;
  border-radius: 0.7em;
  font-size: 0.82em;
  line-height: 1.5;
  opacity: 0;
}

.o-bub--them { align-self: flex-start; background: #ffffff; border: 1px solid var(--oline); }
.o-bub--ai { align-self: flex-end; background: var(--op-soft); border: 1px solid var(--op-line); }
.o-bub--me { align-self: flex-start; background: #ffffff; border: 1px solid var(--oline); }

/* Anything the assistant says is attributed to Meni AI with its star, the same
   mark the app uses everywhere else. */
.o-bub-label {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--op);
  margin-bottom: 0.15em;
}

.o-bub-label svg { width: 0.9em; height: 0.9em; fill: currentColor; flex: none; }

.o-bub-time {
  display: block;
  font-size: 0.8em;
  color: var(--omuted);
  margin-top: 0.3em;
}

/* Avatar circle with initials. */
.o-av {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 0.68em;
  font-weight: 600;
  flex: none;
  width: 2.4em;
  height: 2.4em;
}

.o-av--p { background: var(--op); }
.o-av--b { background: #3b82f6; }
.o-av--g { background: #64748b; }

/* ==========================================================================
   Scene 1 — the whole feature: rail, top bar, inbox list, and thread
   ==========================================================================
   Storyboard (12s): a new AI-handled conversation drops into the top of the
   list, then the thread plays out a client asking to book, the AI Receptionist
   typing and answering, and the client confirming.

   The chrome here is deliberately complete (real nav icons, org bar, per-row
   timestamps, unread counts, the signed-in user) because a mock reads as fake
   the moment those are missing. */

/* No outer product rail: the case study is about the inbox, not Menaia's whole
   navigation, so the mock shows the org bar, the filters, and the two panes.
   Dropping that column buys ~28% more width, which the larger type spends. */
.o1-stage {
  aspect-ratio: 16 / 10;
  font-size: 2.05cqw;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2.5em 2.7em 1fr;
  background: #ffffff;
}

/* ---- left rail ---- */
.o1-rail {
  grid-row: 1 / span 3;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-right: 1px solid var(--oline);
  padding: 0.7em 0.55em 0.55em;
  overflow: hidden;
}

.o1-brandrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.7em;
}

.o1-brand {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--oink);
}

.o1-brand b { color: var(--op); font-weight: 700; }

.o1-collapse {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.3em;
  background: #f1eff5;
  color: var(--omuted);
  font-size: 0.75em;
  flex: none;
}

.o1-branch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.62em;
  color: #4b4757;
  border: 1px solid var(--oline);
  border-radius: 0.4em;
  padding: 0.36em 0.5em;
  margin-bottom: 0.6em;
}

.o1-navgroup {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.55em;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: #a5a1b0;
  margin: 0.55em 0 0.2em;
}

.o1-nav {
  display: flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.66em;
  color: #4b4757;
  padding: 0.36em 0.4em;
  border-radius: 0.35em;
}

.o1-nav svg {
  width: 0.95em;
  height: 0.95em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}

.o1-nav--on { background: var(--op-soft); color: var(--op); font-weight: 600; }
.o1-nav--on svg { opacity: 1; }

.o1-chan { display: flex; align-items: center; gap: 0.3em; font-size: 0.66em; color: #4b4757; padding: 0.24em 0.4em; }
.o1-chan span { color: #a5a1b0; }

/* signed-in user, pinned to the bottom like the real app */
.o1-user {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding-top: 0.5em;
  border-top: 1px solid var(--oline);
}

.o1-uwho { display: flex; flex-direction: column; min-width: 0; font-size: 0.62em; font-weight: 600; line-height: 1.3; }
.o1-umail { font-weight: 400; font-size: 0.88em; color: var(--omuted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.o1-moon {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.3em;
  background: var(--op-soft);
  color: var(--op);
  flex: none;
}

.o1-moon svg { width: 0.7em; height: 0.7em; fill: currentColor; }

/* ---- org top bar ---- */
.o1-top {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid var(--oline);
  padding: 0 0.9em;
}

.o1-org { font-size: 0.72em; font-weight: 500; color: #4b4757; }
.o1-topicons { display: flex; align-items: center; gap: 0.7em; color: #9d99a8; }
.o1-topicons svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.o1-topicons .o1-ic--on { color: var(--op); }

.o1-bell { position: relative; display: flex; }

.o1-bell b {
  position: absolute;
  top: -0.25em;
  right: -0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.85em;
  height: 0.85em;
  border-radius: 0.5em;
  background: var(--obad);
  color: #ffffff;
  font-size: 0.5em;
  font-weight: 700;
  padding: 0 0.2em;
}

/* ---- main split: list + thread ---- */
.o1-main { grid-column: 1; grid-row: 3; display: grid; grid-template-columns: 13.5em 1fr; min-height: 0; }

.o1-list {
  background: #ffffff;
  border-right: 1px solid var(--oline);
  padding: 0.7em 0.55em;
  overflow: hidden;
}

.o1-listhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5em;
}

.o1-title { font-size: 1.05em; font-weight: 700; }

.o1-new {
  font-size: 0.6em;
  font-weight: 600;
  color: #ffffff;
  background: var(--op);
  border-radius: 0.45em;
  padding: 0.32em 0.6em;
}

/* Which line(s) the list is showing, straight from the app. */
.o1-numsel {
  display: flex;
  align-items: center;
  gap: 0.4em;
  border: 1px solid var(--oline);
  border-radius: 0.5em;
  padding: 0.4em 0.5em;
  margin-bottom: 0.45em;
}

.o1-numsel svg { width: 1em; height: 1em; flex: none; fill: none; stroke: var(--omuted); stroke-width: 1.7; stroke-linejoin: round; }
.o1-numwho { display: flex; flex-direction: column; min-width: 0; font-size: 0.62em; font-weight: 600; line-height: 1.3; }
.o1-numsub { font-weight: 400; font-size: 0.9em; color: var(--omuted); }
.o1-caret { margin-left: auto; font-size: 0.6em; color: var(--omuted); }

.o1-search {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.6em;
  color: #9d99a8;
  border: 1px solid var(--oline);
  border-radius: 0.45em;
  padding: 0.38em 0.5em;
  margin-bottom: 0.45em;
}

.o1-search svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 2; }

/* Filter + action bar under the org bar, matching the app: everything here is
   an outlined button. Solid purple belongs to +New and nothing else. */
.o1-filters {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 0.35em;
  background: #ffffff;
  border-bottom: 1px solid var(--oline);
  padding: 0 0.8em;
}

.o1-chip {
  display: flex;
  align-items: center;
  gap: 0.28em;
  font-size: 0.6em;
  color: #4b4757;
  background: #ffffff;
  border: 1px solid var(--oline);
  border-radius: 0.5em;
  padding: 0.3em 0.55em;
  white-space: nowrap;
}

.o1-chip svg { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.o1-chip--on { background: var(--op-soft); border-color: var(--op-line); color: var(--op); font-weight: 600; }

.o1-spacer { margin-left: auto; }

.o1-status { display: flex; align-items: center; gap: 0.3em; }
.o1-status i { width: 0.38em; height: 0.38em; border-radius: 50%; background: var(--ogood); }

.o1-rows { display: flex; flex-direction: column; }

.o1-row {
  display: flex;
  gap: 0.4em;
  align-items: flex-start;
  padding: 0.42em 0.35em;
  border-radius: 0.4em;
  overflow: hidden;
}

.o1-row--on { background: var(--op-soft); }

.o1-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 0.66em;
  font-weight: 600;
  color: var(--oink);
  line-height: 1.35;
}

.o1-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.o1-sub {
  display: flex;
  align-items: center;
  gap: 0.25em;
  font-weight: 400;
  font-size: 0.92em;
  color: var(--omuted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.o1-sub svg { width: 0.85em; height: 0.85em; flex: none; fill: currentColor; }
.o1-sub--miss { color: var(--obad); }
.o1-sub--vm { color: var(--oamber); }

.o1-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25em; flex: none; }
.o1-time { font-size: 0.56em; color: var(--omuted); white-space: nowrap; }

.o1-unread {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0.95em;
  height: 0.95em;
  border-radius: 0.5em;
  background: var(--op);
  color: #ffffff;
  font-size: 0.5em;
  font-weight: 700;
}

/* The new conversation drops into the top of the list. */
.o1-row--drop {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  animation: o1drop 12s infinite;
}

@keyframes o1drop {
  0%, 5% { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; }
  12%, 100% { max-height: 4.2em; opacity: 1; padding-top: 0.42em; padding-bottom: 0.42em; }
}

/* ---- thread ---- */
.o1-thread { display: flex; flex-direction: column; background: var(--oapp); min-height: 0; }

.o1-thead {
  display: flex;
  align-items: center;
  gap: 0.45em;
  background: #ffffff;
  border-bottom: 1px solid var(--oline);
  padding: 0.5em 0.8em;
}

.o1-tname { font-size: 0.76em; font-weight: 700; }
.o1-tnum { font-size: 0.6em; color: var(--omuted); }
.o1-tactions { margin-left: auto; display: flex; align-items: center; gap: 0.45em; }

/* Square icon button. Sized and rounded to match .o1-ghost below, so the
   phone button and View Client Page read as one pair. */
.o1-call {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.42em;
  height: 1.42em;
  border-radius: 0.3em;
  background: #ffffff;
  border: 1px solid var(--op-line);
  color: var(--op);
}

/* Outlined secondary button, e.g. View Client Page. */
.o1-ghost {
  font-size: 0.6em;
  font-weight: 500;
  color: var(--op);
  background: #ffffff;
  border: 1px solid var(--op-line);
  border-radius: 0.5em;
  padding: 0.35em 0.6em;
  white-space: nowrap;
}

.o1-call svg { width: 0.78em; height: 0.78em; fill: currentColor; }
.o1-kebab { color: #9d99a8; font-size: 0.85em; letter-spacing: 0.05em; }

.o1-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.75em 0.8em;
  overflow: hidden;
}

.o1-b1 { animation: o1bub 12s infinite; }
.o1-t1 { align-self: flex-end; opacity: 0; animation: o1type 12s infinite; }
.o1-b2 { animation: o1bub2 12s infinite; }
.o1-b3 { animation: o1bub3 12s infinite; }

@keyframes o1bub {
  0%, 8% { opacity: 0; transform: translateY(0.5em); }
  14%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes o1type {
  0%, 20% { opacity: 0; }
  24%, 36% { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@keyframes o1bub2 {
  0%, 40% { opacity: 0; transform: translateY(0.5em); }
  46%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes o1bub3 {
  0%, 62% { opacity: 0; transform: translateY(0.5em); }
  68%, 100% { opacity: 1; transform: translateY(0); }
}


/* Icons introduced with the Lucide swap that had no sizing rule of their own. */
.o1-kebab { display: flex; align-items: center; color: #9d99a8; }
.o1-kebab svg { width: 0.95em; height: 0.95em; }
.o1-from svg { width: 0.8em; height: 0.8em; opacity: 0.7; }
.o-av svg { width: 1.1em; height: 1.1em; }
.o1-chev { display: flex; align-items: center; color: var(--omuted); }
.o1-chev svg { width: 0.75em; height: 0.75em; }

.o1-composer {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  background: #ffffff;
  border-top: 1px solid var(--oline);
  padding: 0.5em 0.8em;
}

.o1-crow { display: flex; align-items: center; gap: 0.45em; }

/* The line a reply goes out on is chosen here, which is the whole point of
   per-branch numbers. */
.o1-from {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.56em;
  color: #4b4757;
  border: 1px solid var(--oline);
  border-radius: 0.5em;
  padding: 0.22em 0.45em;
}

.o1-fromlabel { font-size: 0.56em; color: var(--omuted); }
.o1-spark { color: var(--op); display: flex; flex: none; }
.o1-spark svg { width: 0.95em; height: 0.95em; fill: currentColor; }

.o1-clip { color: #9d99a8; flex: none; display: flex; }
.o1-clip svg { width: 0.95em; height: 0.95em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.o1-field {
  flex: 1;
  font-size: 0.64em;
  color: #9d99a8;
  border: 1px solid var(--oline);
  border-radius: 0.5em;
  padding: 0.38em 0.6em;
}

.o1-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  color: var(--op);
  flex: none;
}

.o1-send svg { width: 0.8em; height: 0.8em; fill: currentColor; }

/* ==========================================================================
   Scene 2 — one thread per client (close-up)
   ==========================================================================
   Storyboard (10s): a missed call and a voicemail sit in the thread. The
   pointer hits play, the waveform fills as it plays, and the AI transcript
   writes itself in underneath. */

.o2-stage {
  aspect-ratio: 16 / 10;
  font-size: 2.5cqw;
  padding: 1em 1.2em;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
}

.o2-head { display: flex; align-items: center; gap: 0.5em; }
.o2-name { font-size: 0.82em; font-weight: 700; }
.o2-num { font-size: 0.64em; color: var(--op); }

.o2-actions { display: flex; align-items: center; gap: 0.4em; font-size: 0.62em; }
.o2-alabel { font-weight: 700; letter-spacing: 0.06em; color: var(--omuted); }

.o2-act {
  border: 1px solid var(--op-line);
  color: var(--op);
  background: #ffffff;
  border-radius: 0.4em;
  padding: 0.25em 0.5em;
  font-weight: 500;
}

.o2-day { align-self: center; font-size: 0.6em; font-weight: 700; letter-spacing: 0.08em; color: var(--omuted); }

.o2-card {
  background: #ffffff;
  border: 1px solid var(--oline);
  border-radius: 0.6em;
  padding: 0.6em 0.7em;
}

.o2-crow { display: flex; align-items: center; gap: 0.5em; }

.o2-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  flex: none;
}

.o2-icon--miss { background: #fdecec; color: var(--obad); }
.o2-icon--vm { background: #fdf1dc; color: var(--oamber); }
.o2-icon svg { width: 0.85em; height: 0.85em; fill: currentColor; }

.o2-ctitle { font-size: 0.78em; font-weight: 600; }
.o2-cmeta { font-size: 0.66em; color: var(--omuted); }
.o2-back { margin-left: auto; font-size: 0.68em; font-weight: 500; color: var(--op); text-decoration: underline; }

/* player */
.o2-player { display: flex; align-items: center; gap: 0.6em; margin-top: 0.5em; }

.o2-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--op);
  color: #ffffff;
  flex: none;
  animation: o2press 10s infinite;
}

.o2-play svg { width: 0.8em; height: 0.8em; fill: currentColor; }

@keyframes o2press {
  0%, 16% { transform: scale(1); }
  19% { transform: scale(0.88); }
  23%, 100% { transform: scale(1); }
}

/* The waveform is one strip of bars; a mask slides across it so the played
   portion reads as filled and the rest stays grey. */
.o2-wave { position: relative; flex: 1; height: 1.5em; }

.o2-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Narrow fixed-width bars spread across the strip, rather than flex:1 bars
   that go blocky at this width. */
.o2-bars i { flex: 0 0 0.17em; border-radius: 0.09em; background: #d8d4e2; }

.o2-bars--fill {
  color: var(--op);
  clip-path: inset(0 100% 0 0);
  animation: o2fill 10s infinite;
}

.o2-bars--fill i { background: var(--op); }

@keyframes o2fill {
  0%, 20% { clip-path: inset(0 100% 0 0); }
  62%, 100% { clip-path: inset(0 0 0 0); }
}

.o2-dur { font-size: 0.68em; color: var(--omuted); flex: none; }

/* transcript */
.o2-tlabel {
  font-size: 0.58em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--omuted);
  margin-top: 0.7em;
  opacity: 0;
  animation: o2fade 10s infinite;
}

.o2-tbody {
  font-size: 0.74em;
  line-height: 1.55;
  margin-top: 0.2em;
  opacity: 0;
  animation: o2fade2 10s infinite;
}

@keyframes o2fade {
  0%, 30% { opacity: 0; }
  36%, 100% { opacity: 1; }
}

@keyframes o2fade2 {
  0%, 38% { opacity: 0; transform: translateY(0.3em); }
  46%, 100% { opacity: 1; transform: translateY(0); }
}

.o2-cursor {
  left: 7%;
  top: 71%;
  animation: o2cursor 10s infinite;
}

@keyframes o2cursor {
  0%, 8% { opacity: 0; transform: translate(1.5em, 1.5em); }
  13%, 24% { opacity: 1; transform: translate(0, 0); }
  30%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* ==========================================================================
   Scene 3 — the dialler (close-up)
   ==========================================================================
   Storyboard (11s): an active call with its timer running. The pointer clicks
   Transfer, the card swaps to the transfer list, and a coordinator who is
   online gets picked. */

.o3-stage {
  aspect-ratio: 16 / 10;
  font-size: 2.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #efedf3;
}

.o3-card {
  position: relative;
  width: 62%;
  background: #ffffff;
  border-radius: 0.9em;
  box-shadow: 0 1.2em 2.6em rgba(30, 25, 60, 0.18);
  padding: 1.1em 1em;
  text-align: center;
  overflow: hidden;
}

/* call face */
.o3-face { animation: o3face 11s infinite; }

@keyframes o3face {
  0%, 34% { opacity: 1; transform: translateX(0); }
  40%, 100% { opacity: 0; transform: translateX(-1.5em); }
}

.o3-ring {
  width: 2.6em;
  height: 2.6em;
  margin: 0 auto 0.5em;
  border-radius: 50%;
  background: var(--op-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--op);
  animation: o3pulse 2.4s infinite;
}

.o3-ring svg { width: 1.1em; height: 1.1em; fill: currentColor; }

@keyframes o3pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 74, 224, 0.35); }
  60% { box-shadow: 0 0 0 0.7em rgba(109, 74, 224, 0); }
}

.o3-cname { font-size: 0.68em; color: var(--omuted); }
.o3-cnum { font-size: 1.05em; font-weight: 700; letter-spacing: -0.01em; }

/* The timer is a stack of readings; each is shown in turn so it ticks. */
.o3-timer {
  position: relative;
  display: inline-block;
  min-width: 3.2em;
  font-size: 0.62em;
  font-weight: 600;
  color: #147a3d;
  background: #dcf5e6;
  border-radius: 0.5em;
  padding: 0.15em 0.5em;
  margin-top: 0.35em;
  height: 1.6em;
}

.o3-timer span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: o3tick 4s infinite steps(1, end);
}

.o3-timer span:nth-child(1) { animation-delay: 0s; }
.o3-timer span:nth-child(2) { animation-delay: 1s; }
.o3-timer span:nth-child(3) { animation-delay: 2s; }
.o3-timer span:nth-child(4) { animation-delay: 3s; }

@keyframes o3tick { 0%, 25% { opacity: 1; } 25.01%, 100% { opacity: 0; } }

.o3-controls { display: flex; justify-content: center; gap: 0.5em; margin-top: 0.7em; }

.o3-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: #f1eff5;
  color: #4b4757;
}

.o3-btn svg { width: 0.85em; height: 0.85em; fill: currentColor; }
.o3-btn--end { background: #e03b3b; color: #ffffff; }

.o3-links { display: flex; justify-content: center; gap: 0.9em; margin-top: 0.6em; font-size: 0.62em; }
.o3-link { color: var(--op); font-weight: 500; }
.o3-link--hot { animation: o3hot 11s infinite; }

@keyframes o3hot {
  0%, 24% { background: transparent; }
  28%, 36% { background: var(--op-soft); border-radius: 0.3em; }
  40%, 100% { background: transparent; }
}

.o3-note { font-size: 0.56em; color: #a5a1b0; margin-top: 0.55em; }

/* transfer face slides in over the call face */
.o3-transfer {
  position: absolute;
  inset: 0;
  background: #ffffff;
  padding: 1em 0.9em;
  text-align: left;
  opacity: 0;
  transform: translateX(1.5em);
  animation: o3trans 11s infinite;
}

@keyframes o3trans {
  0%, 36% { opacity: 0; transform: translateX(1.5em); }
  44%, 94% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(1.5em); }
}

.o3-ttitle { font-size: 0.78em; font-weight: 700; margin-bottom: 0.5em; }

.o3-tsearch {
  font-size: 0.6em;
  color: #9d99a8;
  border: 1px solid var(--oline);
  border-radius: 0.45em;
  padding: 0.35em 0.5em;
  margin-bottom: 0.5em;
}

.o3-person {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.4em;
  border-radius: 0.4em;
}

.o3-pwho { display: flex; flex-direction: column; font-size: 0.66em; font-weight: 600; line-height: 1.3; }
.o3-prole { font-weight: 400; font-size: 0.86em; color: var(--omuted); }
.o3-dot { width: 0.4em; height: 0.4em; border-radius: 50%; margin-left: auto; flex: none; }
.o3-dot--on { background: var(--ogood); }
.o3-dot--busy { background: var(--obad); }
.o3-dot--job { background: #3b82f6; }

.o3-person--pick { animation: o3pick 11s infinite; }

@keyframes o3pick {
  0%, 56% { background: transparent; }
  62%, 100% { background: var(--op-soft); }
}

.o3-cursor {
  left: 30%;
  top: 62%;
  animation: o3cursor 11s infinite;
}

@keyframes o3cursor {
  0%, 14% { opacity: 0; transform: translate(1.4em, 1.4em); }
  20%, 30% { opacity: 1; transform: translate(0, 0); }
  38% { opacity: 1; transform: translate(3.2em, 2.4em); }
  52%, 62% { opacity: 1; transform: translate(3.2em, 2.4em); }
  70%, 100% { opacity: 0; transform: translate(3.2em, 2.4em); }
}

/* ==========================================================================
   Scene 4 — the AI Receptionist (close-up)
   ==========================================================================
   Storyboard (12s): a client asks to book, the AI types, answers with real
   availability, and the client confirms. */

.o4-stage {
  aspect-ratio: 16 / 10;
  font-size: 2.5cqw;
  display: flex;
  flex-direction: column;
}

.o4-head {
  display: flex;
  align-items: center;
  gap: 0.5em;
  background: #ffffff;
  border-bottom: 1px solid var(--oline);
  padding: 0.7em 1em;
}

.o4-name { font-size: 0.82em; font-weight: 700; }
.o4-sub { font-size: 0.64em; color: var(--omuted); }

.o4-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 0.9em 1em;
  overflow: hidden;
}

.o4-b1 { animation: o4b1 12s infinite; }
.o4-t1 { align-self: flex-end; opacity: 0; animation: o4t1 12s infinite; }
.o4-b2 { animation: o4b2 12s infinite; }
.o4-b3 { animation: o4b3 12s infinite; }
.o4-t2 { align-self: flex-end; opacity: 0; animation: o4t2 12s infinite; }
.o4-b4 { animation: o4b4 12s infinite; }

@keyframes o4b1 { 0%, 3% { opacity: 0; transform: translateY(0.5em); } 9%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes o4t1 { 0%, 12% { opacity: 0; } 16%, 24% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes o4b2 { 0%, 27% { opacity: 0; transform: translateY(0.5em); } 33%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes o4b3 { 0%, 44% { opacity: 0; transform: translateY(0.5em); } 50%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes o4t2 { 0%, 56% { opacity: 0; } 60%, 68% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes o4b4 { 0%, 71% { opacity: 0; transform: translateY(0.5em); } 77%, 100% { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   Reduced motion: hold every scene on its finished state.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .omock *,
  .omock *::before,
  .omock *::after { animation: none !important; }

  .omock-cursor { display: none; }
  .o-bub { opacity: 1; }
  .omock-typing { display: none; }
  .o1-row--drop { max-height: 4em; opacity: 1; padding-top: 0.4em; padding-bottom: 0.4em; }
  .o2-bars--fill { clip-path: inset(0 0 0 0); }
  .o2-tlabel, .o2-tbody { opacity: 1; }
  .o3-face { opacity: 0; }
  .o3-transfer { opacity: 1; transform: translateX(0); }
  .o3-person--pick { background: var(--op-soft); }
  .o3-timer span:nth-child(1) { opacity: 1; }
}

/* ==========================================================================
   Scene 5 — Snippets (close-up)
   ==========================================================================
   Storyboard (15s), three acts that cross-fade in place:
     1. "/" is typed in the composer and the command palette opens.
     2. /snippets is picked, and the snippet picker lists what the team shares.
     3. Manage snippets opens the library, with the editor on the right. */

.o5-stage {
  aspect-ratio: 16 / 10;
  font-size: 2.05cqw;
  background: #f2f0f6;
  overflow: hidden;
}

.o5-act {
  position: absolute;
  inset: 0;
  opacity: 0;
  padding: 1em;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.o5-a1 { animation: o5a1 15s infinite; }
.o5-a2 { animation: o5a2 15s infinite; justify-content: center; }
.o5-a3 { animation: o5a3 15s infinite; justify-content: center; }

@keyframes o5a1 { 0%, 2% { opacity: 0; } 5%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes o5a2 { 0%, 30% { opacity: 0; } 34%, 58% { opacity: 1; } 62%, 100% { opacity: 0; } }
@keyframes o5a3 { 0%, 62% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* ---- act 1: the command palette ---- */
.o5-palette {
  background: #ffffff;
  border-radius: 0.8em;
  box-shadow: 0 1.2em 2.6em rgba(30, 25, 60, 0.16);
  padding: 0.7em 0;
  margin-bottom: 0.7em;
}

.o5-phead {
  display: flex;
  justify-content: space-between;
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--omuted);
  padding: 0 1em 0.5em;
}

.o5-phead b { font-weight: 400; letter-spacing: 0; }

.o5-cmd {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.5em 1em;
  font-size: 0.78em;
}

.o5-cmd svg { width: 0.9em; height: 0.9em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.o5-cmd b { font-weight: 700; }
.o5-cmd span { margin-left: auto; color: var(--omuted); font-size: 0.9em; }
.o5-cmd--on { background: var(--op-soft); }

.o5-composer {
  background: #ffffff;
  border: 1px solid var(--oline);
  border-radius: 0.7em;
  padding: 0.6em 0.7em;
}

.o5-crow { display: flex; align-items: center; gap: 0.5em; }
.o5-clabel { font-size: 0.66em; color: var(--omuted); }

.o5-from {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.62em;
  color: #4b4757;
  border: 1px solid var(--oline);
  border-radius: 0.6em;
  padding: 0.25em 0.5em;
}

.o5-slash { font-size: 0.8em; font-weight: 500; }
.o5-slash::after { content: ""; display: inline-block; width: 0.06em; height: 1em; background: var(--oink); margin-left: 0.06em; vertical-align: -0.15em; animation: o5caret 1s steps(1) infinite; }

@keyframes o5caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

.o5-spark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--op-soft);
  color: var(--op);
  flex: none;
}

.o5-spark svg { width: 0.8em; height: 0.8em; fill: currentColor; }

/* ---- act 2: the picker ---- */
.o5-picker {
  background: #ffffff;
  border-radius: 0.8em;
  box-shadow: 0 1.2em 2.6em rgba(30, 25, 60, 0.16);
  overflow: hidden;
}

.o5-psearch {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72em;
  color: #9d99a8;
  border-bottom: 1px solid var(--oline);
  padding: 0.7em 0.9em;
}

.o5-psearch svg { width: 0.95em; height: 0.95em; fill: none; stroke: currentColor; stroke-width: 2; }

.o5-snip { padding: 0.5em 0.9em; border-bottom: 1px solid #f4f2f7; }
.o5-snip--on { background: #f7f6fa; }

.o5-srow { display: flex; align-items: center; gap: 0.4em; }
.o5-scode { font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.68em; color: var(--op); }
.o5-sname { font-size: 0.74em; font-weight: 700; }

.o5-tag {
  margin-left: auto;
  font-size: 0.58em;
  font-weight: 500;
  color: var(--op);
  background: var(--op-soft);
  border-radius: 0.4em;
  padding: 0.12em 0.45em;
}

.o5-stext {
  font-size: 0.68em;
  color: #4b4757;
  margin-top: 0.15em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.o5-pfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.66em;
  color: var(--omuted);
  padding: 0.6em 0.9em;
}

.o5-manage { display: flex; align-items: center; gap: 0.3em; color: var(--op); font-weight: 600; }
.o5-manage svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* ---- act 3: the library ---- */
.o5-lib {
  background: #ffffff;
  border-radius: 0.8em;
  box-shadow: 0 1.2em 2.6em rgba(30, 25, 60, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.o5-lhead { padding: 0.8em 0.9em 0.6em; border-bottom: 1px solid var(--oline); }
.o5-lrow { display: flex; align-items: center; justify-content: space-between; }
.o5-ltitle { font-size: 1.05em; font-weight: 700; }

.o5-newbtn {
  font-size: 0.62em;
  font-weight: 600;
  color: #ffffff;
  background: var(--op);
  border-radius: 0.5em;
  padding: 0.35em 0.7em;
}

.o5-lsub { font-size: 0.64em; color: var(--omuted); margin-top: 0.25em; }
.o5-lsub code { font-family: "Geist Mono", ui-monospace, monospace; color: var(--op); background: var(--op-soft); border-radius: 0.3em; padding: 0.05em 0.3em; }

.o5-lbody { flex: 1; display: grid; grid-template-columns: 34% 1fr; min-height: 0; }
.o5-lleft { border-right: 1px solid var(--oline); padding: 0.7em; overflow: hidden; }

.o5-tabs { display: flex; background: #f2f0f6; border-radius: 0.5em; padding: 0.15em; margin-bottom: 0.5em; }
.o5-tab { flex: 1; text-align: center; font-size: 0.66em; font-weight: 600; color: var(--omuted); padding: 0.3em 0; border-radius: 0.4em; }
.o5-tab--on { background: #ffffff; color: var(--oink); box-shadow: 0 0.1em 0.3em rgba(30, 25, 60, 0.08); }

.o5-lgroup { font-size: 0.56em; font-weight: 700; letter-spacing: 0.08em; color: #a5a1b0; margin: 0.5em 0 0.25em; }

.o5-lcard { border-radius: 0.5em; padding: 0.4em 0.5em; }
.o5-lcard--on { background: var(--op-soft); border: 1px solid var(--op-line); }
.o5-luse { font-size: 0.6em; color: var(--omuted); margin-top: 0.1em; }

.o5-lright { padding: 0.7em 0.8em; overflow: hidden; }
.o5-flabel { font-size: 0.64em; font-weight: 600; margin-bottom: 0.2em; }
.o5-fields { display: grid; grid-template-columns: 1fr 40%; gap: 0.5em; }

.o5-input {
  font-size: 0.68em;
  border: 1px solid var(--oline);
  border-radius: 0.45em;
  padding: 0.35em 0.5em;
  color: var(--oink);
}

.o5-input--code { font-family: "Geist Mono", ui-monospace, monospace; }

.o5-tokens { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: center; margin: 0.5em 0 0.35em; }
.o5-tlabel { font-size: 0.62em; color: var(--omuted); }

.o5-token {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.58em;
  background: #f1eff5;
  border-radius: 0.45em;
  padding: 0.2em 0.45em;
}

.o5-area {
  font-size: 0.68em;
  line-height: 1.5;
  border: 1px solid var(--oline);
  border-radius: 0.45em;
  padding: 0.45em 0.55em;
  min-height: 3.4em;
}

.o5-count { font-size: 0.58em; color: var(--omuted); margin-top: 0.25em; }

.o5-preview {
  font-size: 0.68em;
  line-height: 1.5;
  background: var(--op-soft);
  border-radius: 0.5em;
  padding: 0.45em 0.55em;
  margin-top: 0.3em;
}

.o5-share {
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--oline);
  border-radius: 0.5em;
  padding: 0.45em 0.55em;
  margin-top: 0.5em;
}

.o5-swho { display: flex; flex-direction: column; font-size: 0.66em; font-weight: 600; line-height: 1.35; }
.o5-ssub { font-weight: 400; font-size: 0.88em; color: var(--omuted); }

.o5-toggle {
  margin-left: auto;
  width: 1.9em;
  height: 1.05em;
  border-radius: 0.6em;
  background: var(--op);
  position: relative;
  flex: none;
}

.o5-toggle::after {
  content: "";
  position: absolute;
  top: 0.13em;
  right: 0.13em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: #ffffff;
}

/* pointer: picks /snippets, then Manage snippets */
.o5-cursor {
  left: 16%;
  top: 62%;
  animation: o5cursor 15s infinite;
}

@keyframes o5cursor {
  0%, 8% { opacity: 0; transform: translate(1.4em, 1.4em); }
  14%, 24% { opacity: 1; transform: translate(0, 0); }
  28%, 40% { opacity: 0; transform: translate(0, 0); }
  46% { opacity: 1; transform: translate(20em, 5.2em); }
  50%, 56% { opacity: 1; transform: translate(20em, 5.2em); }
  60%, 100% { opacity: 0; transform: translate(20em, 5.2em); }
}

@media (prefers-reduced-motion: reduce) {
  .o5-a1, .o5-a2 { opacity: 0; }
  .o5-a3 { opacity: 1; }
  .o5-slash::after { display: none; }
}

/* ==========================================================================
   Scene 6 — Phone line settings (close-up)
   ==========================================================================
   Storyboard (14s), two acts:
     1. Every number the workspace has, with its type, status, branch, and who
        answers it.
     2. Clicking one opens that line's own settings: inbox name, branch, caller
        ID, and whether it is the branch's primary number. */

.o6-stage {
  aspect-ratio: 16 / 10;
  font-size: 2cqw;
  display: grid;
  grid-template-columns: 1fr;
  background: #ffffff;
}


/* ---- content, two cross-fading acts ---- */
.o6-content { position: relative; overflow: hidden; background: #fbfafc; }

.o6-act { position: absolute; inset: 0; padding: 0.9em 1em; opacity: 0; overflow: hidden; }
.o6-a1 { animation: o6a1 14s infinite; }
.o6-a2 { animation: o6a2 14s infinite; }

@keyframes o6a1 { 0%, 2% { opacity: 0; } 5%, 46% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes o6a2 { 0%, 51% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }

.o6-h1 { font-size: 1.05em; font-weight: 700; }
.o6-hsub { display: block; font-size: 0.66em; color: var(--omuted); margin-top: 0.15em; }

.o6-card {
  background: #ffffff;
  border: 1px solid var(--oline);
  border-radius: 0.7em;
  padding: 0.75em 0.8em;
  margin-top: 0.7em;
}

.o6-crow { display: flex; align-items: flex-start; justify-content: space-between; }
.o6-ctitle { display: block; font-size: 0.85em; font-weight: 700; }
.o6-csub { display: block; font-size: 0.62em; color: var(--omuted); margin-top: 0.1em; }

/* Add number is the one solid-purple control here. */
.o6-add {
  font-size: 0.62em;
  font-weight: 600;
  color: #ffffff;
  background: var(--op);
  border-radius: 0.5em;
  padding: 0.38em 0.65em;
  white-space: nowrap;
}

.o6-line {
  border: 1px solid var(--oline);
  border-radius: 0.55em;
  padding: 0.5em 0.6em;
  margin-top: 0.45em;
}

.o6-line--on { border-color: var(--op-line); background: #fdfcff; }

.o6-lrow { display: flex; align-items: center; gap: 0.4em; flex-wrap: wrap; }
.o6-h1 + .o6-badge { align-self: center; }
.o6-lname { font-size: 0.78em; font-weight: 700; }
.o6-lnum { font-size: 0.68em; color: #4b4757; }

.o6-badge { font-size: 0.55em; font-weight: 600; border-radius: 0.35em; padding: 0.12em 0.4em; }
.o6-badge--local { background: #e3edfd; color: #2563eb; }
.o6-badge--toll { background: #e3edfd; color: #2563eb; }
.o6-badge--primary { background: var(--op-soft); color: var(--op); }
.o6-badge--active { background: #dcf5e6; color: #147a3d; }
.o6-badge--prov { background: #fdf1dc; color: #b45309; }

.o6-lmeta { display: flex; align-items: center; gap: 0.9em; font-size: 0.62em; color: var(--omuted); margin-top: 0.25em; }
.o6-lmeta span { display: flex; align-items: center; gap: 0.25em; }
.o6-lmeta svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

/* ---- act 2: one line's own settings ---- */
.o6-back { display: flex; align-items: center; gap: 0.35em; font-size: 0.72em; font-weight: 500; color: #4b4757; }

.o6-dhead { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 0.5em; }
.o6-dbtns { display: flex; gap: 0.35em; }

/* Outlined, like every secondary control in the app. */
.o6-btn {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.62em;
  font-weight: 500;
  color: var(--op);
  background: #ffffff;
  border: 1px solid var(--op-line);
  border-radius: 0.5em;
  padding: 0.35em 0.6em;
  white-space: nowrap;
}

.o6-btn svg { width: 0.85em; height: 0.85em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.o6-tabs { display: flex; gap: 0.9em; border-bottom: 1px solid var(--oline); margin-top: 0.6em; }
.o6-tab { font-size: 0.68em; color: var(--omuted); padding-bottom: 0.35em; }
.o6-tab--on { color: var(--op); font-weight: 600; box-shadow: inset 0 -0.13em 0 var(--op); }

.o6-field { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; padding: 0.5em 0; border-top: 1px solid #f4f2f7; }
.o6-field:first-of-type { border-top: none; }
.o6-fname { display: block; font-size: 0.7em; font-weight: 600; }
.o6-fsub { display: block; font-size: 0.6em; color: var(--omuted); margin-top: 0.05em; }

.o6-fval {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4em;
  width: 38%;
  font-size: 0.66em;
  border: 1px solid var(--oline);
  border-radius: 0.45em;
  padding: 0.35em 0.5em;
  flex: none;
}

.o6-toggle {
  width: 1.9em;
  height: 1.05em;
  border-radius: 0.6em;
  background: var(--op);
  position: relative;
  flex: none;
}

.o6-toggle::after {
  content: "";
  position: absolute;
  top: 0.13em;
  right: 0.13em;
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: #ffffff;
}

.o6-cursor {
  left: 34%;
  top: 34%;
  animation: o6cursor 14s infinite;
}

@keyframes o6cursor {
  0%, 20% { opacity: 0; transform: translate(1.4em, 1.4em); }
  28%, 42% { opacity: 1; transform: translate(0, 0); }
  48%, 100% { opacity: 0; transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .o6-a1 { opacity: 0; }
  .o6-a2 { opacity: 1; }
}

/* Narrow screens: these mocks scale like images, so scene 1's three-pane
   chrome would shrink to a few pixels of type. Hold a floor width and let the
   row scroll instead, the same trade the .flow-scroll diagrams make. */
@media (max-width: 700px) {
  .shipped-media:has(.omock) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .omock { min-width: 560px; }
}