/* Topic artwork for /packages/ — one illustration per package, a hero aura,
   and an ambient orb at the close.

   Loaded only by the packages pages, so nothing here can affect the other
   twelve. All animation is gated behind `.in`, which site.js adds when a block
   scrolls into view — these loop forever and there is no reason to animate
   something nobody is looking at.

   Everything degrades to a still diagram: with JS off `.reveal` stays visible
   and only the motion is missing. */

.topic-art { margin-top: clamp(34px, 4.5vw, 56px); }

/* The diagrams are laid out at 900 units wide and stop making sense much below
   that, so on a narrow screen they scroll rather than shrink into illegibility. */
.tart-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius, 18px);
  background:
    radial-gradient(120% 140% at 18% 0%, rgba(45, 222, 254, .07), transparent 58%),
    radial-gradient(120% 140% at 88% 100%, rgba(255, 65, 169, .06), transparent 60%),
    rgba(0, 0, 0, .22);
  padding: clamp(14px, 2.2vw, 26px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.tart-frame > .tart { display: block; width: 100%; min-width: 620px; height: auto; }

.tart-cap {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--faint, rgba(234, 240, 255, .56));
  max-width: 72ch;
}

/* ── shared scene motion ─────────────────────────────────────────────────── */

.tart .wire { stroke-dasharray: 5 7; }
.in .tart .wire { animation: tFlow 1.5s linear infinite; }
@keyframes tFlow { to { stroke-dashoffset: -12; } }

.in .tart .ring-a { animation: tRing 4.2s ease-in-out infinite; }
.in .tart .ring-b { animation: tRing 4.2s ease-in-out infinite .5s; }
@keyframes tRing {
  0%, 100% { opacity: .10; transform: scale(1); }
  50%      { opacity: .34; transform: scale(1.06); }
}
.tart .core .ring { transform-box: fill-box; transform-origin: center; }

.tart .pip { transform-box: fill-box; transform-origin: center; }
.in .tart .pip { animation: tPip 2.6s ease-in-out infinite; }
.in .tart .chip-1 .pip { animation-delay: .35s; }
.in .tart .chip-2 .pip { animation-delay: .70s; }
.in .tart .chip-3 .pip { animation-delay: 1.05s; }
.in .tart .chip-4 .pip { animation-delay: 1.40s; }
@keyframes tPip {
  0%, 72%, 100% { opacity: .45; transform: scale(1); }
  84%           { opacity: 1;   transform: scale(1.5); }
}

.tart .out, .tart .tk { opacity: 0; }
.in .tart .out, .in .tart .tk { animation: tRise .55s var(--ease, cubic-bezier(.22,.8,.3,1)) forwards; }
.in .tart .out-0 { animation-delay: .30s; }
.in .tart .out-1 { animation-delay: .44s; }
.in .tart .out-2 { animation-delay: .58s; }
@keyframes tRise {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.tart .out { transform-box: fill-box; }

/* ── 02 · voice ──────────────────────────────────────────────────────────── */

.tart--voice .wb { transform-box: fill-box; transform-origin: center; }
.in .tart--voice .wb { animation: tBar 1.25s ease-in-out infinite; }
.in .tart--voice .wb-1 { animation-delay: .09s; }
.in .tart--voice .wb-2 { animation-delay: .18s; }
.in .tart--voice .wb-3 { animation-delay: .27s; }
.in .tart--voice .wb-4 { animation-delay: .36s; }
.in .tart--voice .wb-5 { animation-delay: .45s; }
.in .tart--voice .wb-6 { animation-delay: .54s; }
.in .tart--voice .wb-7 { animation-delay: .63s; }
@keyframes tBar {
  0%, 100% { transform: scaleY(.55); }
  50%      { transform: scaleY(1.28); }
}

.tart--voice .ph { opacity: 0; }
.in .tart--voice .ph { animation: tSweep 6s linear infinite; }
@keyframes tSweep {
  0%        { opacity: 0;   transform: translateX(20px); }
  6%        { opacity: .85; }
  92%       { opacity: .85; }
  100%      { opacity: 0;   transform: translateX(880px); }
}

.tart--voice .mk { opacity: 0; }
.in .tart--voice .mk { animation: tRise .5s var(--ease, cubic-bezier(.22,.8,.3,1)) forwards; }
.in .tart--voice .mk:nth-of-type(1) { animation-delay: .40s; }
.in .tart--voice .mk:nth-of-type(2) { animation-delay: .58s; }
.in .tart--voice .mk:nth-of-type(3) { animation-delay: .76s; }
.in .tart--voice .mk:nth-of-type(4) { animation-delay: .94s; }
.tart--voice .branch { stroke-dasharray: 4 5; }

/* ── 03 · admin ──────────────────────────────────────────────────────────── */

.in .tart--admin .pile { animation: tPile 3.4s ease-in-out infinite; }
.in .tart--admin .pile-1 { animation-delay: .18s; }
.in .tart--admin .pile-2 { animation-delay: .36s; }
.in .tart--admin .pile-3 { animation-delay: .54s; }
.in .tart--admin .pile-4 { animation-delay: .72s; }
.in .tart--admin .pile-5 { animation-delay: .90s; }
.in .tart--admin .pile-6 { animation-delay: 1.08s; }
@keyframes tPile { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ── 04 · marketing ──────────────────────────────────────────────────────── */

.tart--marketing .cell { opacity: 0; transform-box: fill-box; transform-origin: center; }
.in .tart--marketing .cell { animation: tCell .5s var(--ease, cubic-bezier(.22,.8,.3,1)) forwards; }
.in .tart--marketing .cell-1 { animation-delay: .08s; }
.in .tart--marketing .cell-2 { animation-delay: .16s; }
.in .tart--marketing .cell-3 { animation-delay: .24s; }
.in .tart--marketing .cell-4 { animation-delay: .32s; }
.in .tart--marketing .cell-5 { animation-delay: .40s; }
@keyframes tCell {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
.tart--marketing .gate-tick { stroke-dasharray: 30; stroke-dashoffset: 30; }
.in .tart--marketing .gate-tick { animation: tDraw .6s ease-out .75s forwards; }
@keyframes tDraw { to { stroke-dashoffset: 0; } }

/* ── hero aura + closing orb ─────────────────────────────────────────────── */

.hero-aura .orbit { transform-origin: 300px 300px; animation: tSpin 46s linear infinite; }
@keyframes tSpin { to { transform: rotate(360deg); } }
.hero-aura .spk { stroke-dasharray: 3 6; }

.cta-orb {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: min(620px, 116%);
  transform: translate(-50%, -50%);
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}
.cta-orb svg { display: block; width: 100%; height: auto; }
.cta-band > *:not(.cta-orb) { position: relative; z-index: 1; }
.cta-orb circle:not(:first-child) { animation: tBreathe 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cta-orb circle:last-child { animation-delay: 1.4s; }
@keyframes tBreathe {
  0%, 100% { opacity: .5;  transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}

/* ── a pre-existing wrap, fixed here rather than in the shared sheet ──────
   `.sc-task` and `.sc-post` are two-column grids (a 22px tick / 46px day, then
   1fr of text). Their third child — the caption — auto-places onto row 2
   column 1, so it renders inside that narrow first column, one word per line.
   Sending it to column 2 fixes it. `.sc-msg` is not a grid and is unaffected.

   Both only appear on the packages pages, but the rules that create them live
   in the stylesheet the other eleven pages share, so the correction goes here
   where its blast radius is exactly this page. */
.sc-task > small,
.sc-post > small { grid-column: 2; }

/* ── Arabic ──────────────────────────────────────────────────────────────
   One set of coordinates serves both languages: the scene is mirrored so the
   flow runs right to left, then the type, the check marks and the approval
   tick are flipped back so they read the right way round. Doing this here
   rather than in a second set of geometry means the two builds cannot drift.  */

[dir="rtl"] .tart--chat,
[dir="rtl"] .tart--voice,
[dir="rtl"] .tart--admin,
[dir="rtl"] .tart--marketing { transform: scaleX(-1); }

[dir="rtl"] .tart text,
[dir="rtl"] .tart .tk path,
[dir="rtl"] .tart .gate-tick {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

/* The English entrance slides in from the left, which is backwards once the
   scene is mirrored. Same timing, no direction. */
@keyframes tFadeIn { from { opacity: 0; } to { opacity: 1; } }
[dir="rtl"] .in .tart .out,
[dir="rtl"] .in .tart .tk,
[dir="rtl"] .in .tart--voice .mk { animation-name: tFadeIn; }

/* ── reduced motion: every scene still renders, just still ───────────────── */

@media (prefers-reduced-motion: reduce) {
  .tart *, .cta-orb *, .hero-aura * { animation: none !important; }
  .tart .out, .tart .tk, .tart--voice .mk, .tart--marketing .cell { opacity: 1; }
  .tart--voice .ph { opacity: 0; }
  .tart--marketing .gate-tick { stroke-dashoffset: 0; }
}

/* ── AI Chat: how it works, booking, integration ──────────────────────────────
   Three blocks that explain the mechanism rather than illustrating it. The
   stepper is DOM rather than SVG on purpose: it has to reflow down to 320px and
   be read by a screen reader as the ordered list it actually is.

   Motion is gated two ways, matching what site.js already toggles on this page:
   `.in` for the SVG scenes (set once when the block is first seen) and
   `.playing` for the stepper (toggled off when it scrolls away, since it is a
   long loop nobody is watching). Nothing here fades text out — the highlight
   moves through borders, backgrounds and the rail, so every step stays readable
   at every moment of the cycle. */

.hiw { margin-top: clamp(38px, 5vw, 64px); }
.hiw-head { max-width: 68ch; }
.hiw-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(21px, 2.3vw, 29px);
  line-height: 1.22;
  text-wrap: balance;
  margin: .5em 0 .45em;
}
.hiw-lead { color: var(--muted); max-width: 62ch; margin: 0; }

/* ── integration hub ─────────────────────────────────────────────────────── */

.tart--eco .eco-n { opacity: 0; }
.in .tart--eco .eco-n { animation: tRise .55s var(--ease, cubic-bezier(.22,.8,.3,1)) forwards; }
.in .tart--eco .eco-n-0 { animation-delay: .16s; }
.in .tart--eco .eco-n-1 { animation-delay: .26s; }
.in .tart--eco .eco-n-2 { animation-delay: .36s; }
.in .tart--eco .eco-n-3 { animation-delay: .46s; }
.in .tart--eco .eco-n-4 { animation-delay: .56s; }
.in .tart--eco .eco-n-5 { animation-delay: .66s; }
.in .tart--eco .eco-n-6 { animation-delay: .76s; }

.eco-close {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.62;
  max-width: 62ch;
}

/* These two are NOT mirrored with scaleX(-1) like the four original scenes:
   their labels do not fill their boxes, so flipping the canvas and un-flipping
   each glyph threw the text outside the shape it belongs to. The Arabic build
   emits mirrored coordinates instead.

   Which means the blanket `[dir="rtl"] .tart text { scaleX(-1) }` above has to be
   switched off for them — it exists to undo a canvas flip that no longer happens
   here, and left on it reverses every glyph. Same specificity, declared later. */
[dir="rtl"] .tart--eco text { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tart--eco * { animation: none !important; }
  .tart--eco .eco-n { opacity: 1; }
}

/* ── chat demo with a language switcher ───────────────────────────────────────
   Tabs are radio inputs plus `:checked ~` sibling selectors — no script, which
   the site's CSP would discard anyway, and keyboard operation comes free.

   The panel sizes to its content and every message is present the moment it is
   seen. What it replaces reserved a tall box and revealed one bubble every 1.5
   seconds, so most of the time it read as empty. */

/* the copy that led each section's old two-column split, promoted to full
   width now that the demo below it needs the whole column */
.demo-intro { max-width: 62ch; margin-bottom: clamp(22px, 2.6vw, 32px); }
.demo-intro .lead { margin-bottom: 0; }

.demo {
  border: 1px solid var(--line);
  border-radius: var(--radius, 18px);
  background: var(--surface-2);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  align-self: start;          /* do not stretch to the column beside it */
}

.demo-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.demo-bar b { font-family: var(--serif); font-weight: 600; font-size: 15px; }
.demo-bar .rc-status { margin-inline-start: auto; }

/* Off-screen rather than display:none — a hidden input cannot take focus, and
   the tabs would stop being keyboard-reachable. */
.demo-r {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 12px 14px 0;
}
.demo-tab {
  /* six of them: share the row where there is space, wrap where there is not */
  flex: 1 1 96px;
  text-align: center;
  padding: 7px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.demo-tab:hover { color: var(--ink); border-color: rgba(45, 222, 254, .35); }

/* Focus has to be drawn on the label, since the input it belongs to is the
   off-screen one. */

.demo-pane { display: none; padding: 14px 16px 16px; }

/* A fixed-height chat viewport, filled from the bottom.

   Eleven messages arriving one by one would otherwise grow the card from 515px
   to 948px and shove the whole page below it down eleven times per cycle. With a
   fixed height and `justify-content: flex-end`, new messages push the older ones
   up and out of view — which is what a chat window does anyway — and the card
   never changes size. */
.demo-thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 430px;
  overflow: hidden;
}
@media (min-width: 900px) { .demo-thread { height: 470px; } }

.dm {
  max-width: 86%;
  /* Without this every bubble shrinks to fit the fixed-height viewport and clips
     its own text mid-line. They must keep their height and overflow the top. */
  flex: none;
  /* collapsed until its moment — the block padding and the spacing above are
     animated in with it, so an unsent message occupies nothing at all */
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.dm--in  { background: var(--surface-3); border-start-start-radius: 5px; margin-inline-end: auto; }
.dm--out { background: var(--accent-solid); color: #fff; border-start-end-radius: 5px; margin-inline-start: auto; }
.dm small {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.4;
  opacity: .78;
}

.demo-foot {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--faint);
}

/* ── the diary: a day schedule beside the conversation ──────────────────────
   Staff across, hours down, blocks in the cells. Placement (which column, which
   rows) is generated in cal.py as grid-column / grid-row rules, because the CSP
   discards style="" and a diary is nothing but placement. */

.cal { min-width: 0; }
@media (max-width: 899px) {
  .cal { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
}
.cal-h {
  display: flex;
  align-items: center;
  gap: 8px 14px;
  flex-wrap: wrap;
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--faint);
}
.cal-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-inline-start: auto; }
.cal-lg { display: inline-flex; align-items: center; gap: 5px; letter-spacing: .03em; }
.cal-sw { width: 9px; height: 9px; border-radius: 2px; }
.cal-sw--off {
  background:
    repeating-linear-gradient(135deg, transparent 0 2px, rgba(150, 178, 255, .5) 2px 3.4px),
    rgba(150, 178, 255, .07);
}
.cal-sw--taken { background: rgba(150, 178, 255, .3); }
.cal-sw--deny  { background: rgba(255, 65, 169, .65); }
.cal-sw--book  { background: #2DDEFE; }

/* The running commentary. All lines stack in one box and cross-fade, since CSS
   cannot rewrite text — so the box is sized for the longest of them. */
.cal-status {
  position: relative;
  min-height: 2.9em;
  margin-bottom: 10px;
  font-size: 12px;
  line-height: 1.45;
}
.cs {
  position: absolute;
  inset-inline: 0;
  top: 0;
  opacity: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: rgba(234, 240, 255, .82);
}
.cs-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2DDEFE;
  transform: translateY(-1px);
}
.playing .cs-dot { animation: csPing 1.8s ease-out infinite; }
@keyframes csPing {
  0%   { box-shadow: 0 0 0 0 rgba(45, 222, 254, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(45, 222, 254, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 222, 254, 0); }
}

.cal-grid {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr));
  grid-template-rows: 20px repeat(11, 24px);
  column-gap: 5px;
  /* one hairline at the top of every hour, so the blocks read against a ruled
     day rather than floating. Offset past the 20px staff header. */
  background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 100% 24px;
  background-position: 0 20px;
  background-repeat: repeat-y;
}
.cal-hd {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  align-self: center;
  padding-inline-start: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* The hours this column is actually rostered. Printing it here is what makes
   the hatching self-explanatory: the shaded hours are simply the ones outside
   this range, and no legend or narration is needed to join the two up. */
.cal-shift {
  font-style: normal;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(45, 222, 254, .7);
  margin-inline-start: 6px;
}

/* On a phone the three columns are about 95px each, which is not enough for
   "GENERAL 14–20" on one line — it truncated to "GENERAL 1…", losing the very
   number that explains the shading. The shift drops to its own line and the
   header row (and the hour rules that start below it) grow to match. */
@media (max-width: 620px) {
  .cal-grid {
    grid-template-rows: 32px repeat(11, 24px);
    background-position: 0 32px;
  }
  .cal-hd {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    white-space: normal;
    line-height: 1.15;
  }
  .cal-shift { margin-inline-start: 0; }
}
.cal-t {
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  /* The hour being worked on lights up, so the eye is led to the right ROW
     before it has read anything. Driven by custom properties the keyframes
     move, which keeps the lit and unlit looks in one place. */
  color: var(--t-col, var(--faint));
  font-weight: var(--t-w, 500);
  background: var(--t-bg, transparent);
  opacity: .7;
  padding: 1px 6px 1px 0;
  margin-inline-end: 2px;
  border-radius: 5px;
  transform: translateY(-6px);   /* sit on the hour line, not inside the hour */
  white-space: nowrap;
  justify-self: end;
  transition: none;
}
/* the pill only shows when lit, so the gutter stays quiet the rest of the time */
.cal-t { padding-inline: 5px; }

.cal-b {
  border-radius: 6px;
  border: 1px solid transparent;
  margin: 1px 0;
  padding: 2px 6px;
  font-size: 10.5px;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
}
.cal-b i { font-style: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-b--off {
  background:
    repeating-linear-gradient(135deg, transparent 0 4px, rgba(150, 178, 255, .09) 4px 7px),
    rgba(150, 178, 255, .035);
}
.cal-b--taken { background: rgba(150, 178, 255, .16); color: rgba(234, 240, 255, .66); }
.cal-b--offer {
  border-color: rgba(45, 222, 254, .6);
  background: rgba(45, 222, 254, .11);
}
.cal-b--deny {
  border-color: rgba(255, 65, 169, .6);
  background: rgba(255, 65, 169, .12);
  color: rgba(255, 190, 224, .95);
}
.cal-b--cancel {
  color: rgba(234, 240, 255, .66);
  border-style: dashed;
  text-decoration: line-through;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
}
.cal-b--book  { border-color: rgba(45, 222, 254, .55); font-weight: 600; }

/* Drawn, so it takes the block's own colour as it fills in. */
.cal-tick {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  opacity: 0;
}
.cal-tick::after {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  top: 3.4px;
  width: 4.4px;
  height: 2.2px;
  border-inline-start: 1.6px solid #0B1220;
  border-bottom: 1.6px solid #0B1220;
  transform: rotate(-45deg);
}
[dir="rtl"] .cal-tick::after { transform: rotate(-45deg) scaleX(-1); }

/* the cross on the time she could not give */
.cal-x { flex: none; width: 10px; height: 10px; position: relative; }
.cal-x::before, .cal-x::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 4.2px;
  width: 10px;
  height: 1.6px;
  border-radius: 1px;
  background: #FF6FC0;
}
.cal-x::before { transform: rotate(45deg); }
.cal-x::after  { transform: rotate(-45deg); }

/* ── the step guide ─────────────────────────────────────────────────────────
   Eight steps, all of them on screen at once. The status line above says what
   is happening now; this says what the whole job is and how far in she is —
   pending, running, done. A line that changes can never show that shape. */

.calsteps-h {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.calsteps {
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  display: grid;
  gap: 7px 16px;
  grid-template-columns: 1fr 1fr;
}
.ck {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ck-text, var(--faint));
  opacity: .5;
}
/* one badge, three looks — the keyframes only move the custom properties */
.ck b {
  flex: none;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--ck-bg, transparent);
  color: var(--ck-fg, var(--faint));
  border: 1px solid var(--ck-edge, var(--line));
}

@media (prefers-reduced-motion: reduce) {
  .playing .dm, .playing .demo-pane, .playing .cal-b, .playing .cal-tick {
    animation: none !important;
  }
  /* the finished day, held still */
  .dm, .demo-pane, .cal-b, .cal-tick { opacity: 1; }
  .playing .cal-t, .playing .cal-shift { animation: none !important; }
  .cal-b { box-shadow: none !important; }
  /* one line only, or all eight stack on top of each other */
  .playing .cs, .playing .cs-dot { animation: none !important; }
  .cs { position: static; opacity: 0; }
  .cs:last-child { opacity: 1; }
  .playing .ck { animation: none !important; }
  /* the finished state: every step done */
  .ck { opacity: .9; --ck-bg: rgba(45, 222, 254, .28); --ck-fg: #EAF0FF;
        --ck-edge: rgba(45, 222, 254, .4); --ck-text: var(--muted); }
  .dm { max-height: none; margin-top: 10px; padding-block: 10px; }
  .cal-b--book { background: #2DDEFE; border-color: #2DDEFE; color: #06121B; }
}

/* ── AI Voice: the call panel ────────────────────────────────────────────────
   Everything structural is shared with the chat demo — the frame, the tabs, the
   fixed-height thread, the diary beside it. Only the left half differs, because
   a call is a transcript with a speaker on every line, not a row of bubbles. */

.vwave {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 15px;
  margin-inline-start: 12px;
}
@media (min-width: 560px) { .vwave { display: flex; } }
.vb {
  width: 2px;
  height: 4px;
  border-radius: 1px;
  background: rgba(45, 222, 254, .75);
  transform-origin: bottom;
}
/* A line is speaking for most of the call, so the waveform runs throughout —
   fourteen bars on slightly different periods so it never looks like a loop. */
.demo--voice.playing .vb { animation: vbTalk 1.05s ease-in-out infinite; }
.demo--voice.playing .vb-1  { animation-duration: .84s;  animation-delay: -.31s; }
.demo--voice.playing .vb-2  { animation-duration: 1.24s; animation-delay: -.62s; }
.demo--voice.playing .vb-3  { animation-duration: .72s;  animation-delay: -.14s; }
.demo--voice.playing .vb-4  { animation-duration: 1.12s; animation-delay: -.48s; }
.demo--voice.playing .vb-5  { animation-duration: .92s;  animation-delay: -.77s; }
.demo--voice.playing .vb-6  { animation-duration: 1.32s; animation-delay: -.22s; }
.demo--voice.playing .vb-7  { animation-duration: .78s;  animation-delay: -.55s; }
.demo--voice.playing .vb-8  { animation-duration: 1.18s; animation-delay: -.09s; }
.demo--voice.playing .vb-9  { animation-duration: .88s;  animation-delay: -.68s; }
.demo--voice.playing .vb-10 { animation-duration: 1.28s; animation-delay: -.37s; }
.demo--voice.playing .vb-11 { animation-duration: .82s;  animation-delay: -.86s; }
.demo--voice.playing .vb-12 { animation-duration: 1.08s; animation-delay: -.27s; }
.demo--voice.playing .vb-13 { animation-duration: .96s;  animation-delay: -.59s; }
@keyframes vbTalk {
  0%, 100% { height: 3px;  opacity: .5; }
  50%      { height: 15px; opacity: 1; }
}

.vplay {
  display: flex;
  align-items: center;
  gap: 11px;
  width: calc(100% - 28px);
  margin: 12px 14px 0;
  padding: 11px 16px;
  border: 1px solid rgba(45, 222, 254, .5);
  border-radius: 12px;
  background: rgba(45, 222, 254, .10);
  color: #EAF0FF;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.vplay:hover { background: rgba(45, 222, 254, .18); border-color: #2DDEFE; }
.vplay:focus-visible { outline: 2px solid #2DDEFE; outline-offset: 2px; }
.vplay b { font-size: 14px; font-weight: 600; }
.vplay-sub {
  margin-inline-start: auto;
  font-size: 11.5px;
  color: var(--faint);
  white-space: nowrap;
}
.vplay-i {
  flex: none;
  width: 0; height: 0;
  border-left: 11px solid #2DDEFE;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
[dir="rtl"] .vplay-i { transform: scaleX(-1); }
/* while it is making sound the control offers to stop */
.vsound .vplay-i {
  width: 11px; height: 13px;
  border: 0;
  background: linear-gradient(90deg, #2DDEFE 0 4px, transparent 4px 7px, #2DDEFE 7px 11px);
}
.vsound .vplay { background: rgba(45, 222, 254, .2); border-color: #2DDEFE; }

.vnote { display: block; margin-top: 4px; opacity: .75; }

/* how far through the call you are — a mock-up has no audio scrubber, so the
   only way to show a call has a length is to draw it */
.vprog {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.vprog i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2DDEFE, #BBADFF);
  transform-origin: left center;
  transform: scaleX(0);
}
[dir="rtl"] .vprog i { transform-origin: right center; }

/* The speaking indicator, on whichever line is being said right now. The bars
   run continuously; the wrapper's opacity is what moves from turn to turn, so
   only the live line appears to be talking. */
.vwv {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 9px;
  margin-inline-start: 8px;
  opacity: 0;
  vertical-align: baseline;
}
.vwv .wv {
  width: 2px;
  height: 3px;
  border-radius: 1px;
  background: currentColor;
  transform-origin: bottom;
}
.demo--voice.playing .vwv .wv { animation: wvTalk .78s ease-in-out infinite; }
.demo--voice.playing .vwv .wv-1 { animation-duration: .62s; animation-delay: -.21s; }
.demo--voice.playing .vwv .wv-2 { animation-duration: .94s; animation-delay: -.44s; }
.demo--voice.playing .vwv .wv-3 { animation-duration: .70s; animation-delay: -.12s; }
.demo--voice.playing .vwv .wv-4 { animation-duration: .86s; animation-delay: -.57s; }
@keyframes wvTalk {
  0%, 100% { height: 2px; }
  50%      { height: 9px; }
}

/* the transcript */
.vthread { gap: 0; }
.vt {
  /* collapsed until spoken, exactly as the chat bubbles are */
  max-height: 0;
  margin-top: 0;
  padding: 0 0 0 13px;
  overflow: hidden;
  opacity: 0;
  flex: none;
  border-inline-start: 2px solid var(--line);
}
[dir="rtl"] .vt { padding: 0 13px 0 0; }
.vt--a { border-inline-start-color: rgba(45, 222, 254, .55); }
.vwho {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 3px;
}
.vt--a .vwho { color: rgba(45, 222, 254, .85); }
.vsay { display: block; font-size: 14px; line-height: 1.5; color: var(--ink); }
.vt--c .vsay { color: var(--muted); }
.vt small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--faint);
}

@media (prefers-reduced-motion: reduce) {
  .demo--voice.playing .vb, .demo--voice.playing .vt,
  .demo--voice.playing .demo-pane, .demo--voice.playing .vwv,
  .demo--voice.playing .vwv .wv, .demo--voice.playing .vprog i {
    animation: none !important;
  }
  .vwv { display: none; }
  .vprog i { transform: scaleX(1); }
  .vt { opacity: 1; max-height: none; margin-top: 11px; padding-block: 9px; }
  .vb { height: 8px; }
}
/* The window every ALYA application-window demo is drawn in.
 *
 * AI Admin and AI Marketing both show ALYA operating software, and the
 * furniture is identical: title bar with a live clock, a left nav she moves
 * through, a FIXED main area where screens cross-fade, and a status bar. It
 * is scoped to .demo, not to one section, so the two windows cannot drift
 * apart — and cross-fading is the only way nine screens share one panel
 * without it growing to thousands of pixels.
 *
 * The status line and step guide (.cs / .ck / .calsteps) are NOT restyled
 * here: they are the same elements the chat and voice panels use.
 */

.demo .awin {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #070D18;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

/* ── title bar ─────────────────────────────────────────────────────────── */
.demo .aw-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
  border-bottom: 1px solid var(--line);
}
.demo .aw-dots { display: flex; gap: 6px; flex: none; }
.demo .aw-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.demo .aw-title {
  font-size: .84rem; font-weight: 650; color: #EAF0FF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo .aw-live {
  margin-inline-start: auto; display: flex; align-items: center; gap: 8px;
  font-size: .74rem; color: var(--faint); white-space: nowrap;
}
.demo .aw-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: #2DDEFE;
  box-shadow: 0 0 0 0 rgba(45, 222, 254, .5);
  animation: awPulse 1.9s ease-out infinite;
}
@keyframes awPulse {
  0% { box-shadow: 0 0 0 0 rgba(45, 222, 254, .5); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(45, 222, 254, 0); }
}
/* every clock reading stacks in one cell, so the bar never reflows as it ticks */
.demo .aclock {
  position: relative; display: inline-grid; min-width: 5ch;
  font-variant-numeric: tabular-nums; font-weight: 700;
  letter-spacing: .03em; color: #2DDEFE;
}
.demo .acl { grid-area: 1 / 1; opacity: 0; font-style: normal; }
.demo:not(.playing) .acl:first-child { opacity: 1; }

/* ── window body: sidebar + main ───────────────────────────────────────── */
.demo .aw-body {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
}
.demo .aw-side {
  border-inline-end: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  padding: 10px 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.demo .aw-nav {
  --nv: 0;                       /* 1 while she is in this module */
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 9px;
  font-size: .8rem;
  color: color-mix(in srgb, #EAF0FF calc(var(--nv) * 100%), var(--faint));
  background: rgba(45, 222, 254, calc(var(--nv) * .12));
  box-shadow: inset 2px 0 0 0 rgba(45, 222, 254, var(--nv));
}
[dir="rtl"] .demo .aw-nav { box-shadow: inset -2px 0 0 0 rgba(45, 222, 254, var(--nv)); }
.demo .aw-i {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.demo .aw-nl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo .aw-badge {
  margin-inline-start: auto; font-style: normal; font-size: .68rem; font-weight: 700;
  color: #06121B; background: #2DDEFE; border-radius: 999px; padding: 1px 7px;
}

/* ── the screens ───────────────────────────────────────────────────────── */
.demo .aw-main { position: relative; height: 396px; }
.demo .aw-scr {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  opacity: 0;
}
/* at rest the window shows its first screen — the state it opens in */
.demo:not(.playing) .aw-scr { visibility: hidden; }
.demo:not(.playing) .aw-scr:first-of-type { opacity: 1; visibility: visible; }
.demo .aw-sh {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border-bottom: 1px solid var(--line);
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); flex: none;
}
.demo .aw-sb { flex: 1; min-height: 0; overflow: hidden; padding: 10px 13px; }

/* ── status bar ────────────────────────────────────────────────────────── */
.demo .aw-status {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .02);
  padding: 8px 13px;
}
.demo .aw-status .cal-status { margin: 0; }

/* ── the guide, and the chrome around the window ───────────────────────── */
@media (min-width: 900px) {
  .demo { padding-top: 0; padding-bottom: 10px; }
  /* eleven steps in three rows instead of eleven */
  .demo .calsteps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .demo .calsteps-h { margin: 11px 0 4px; font-size: .68rem; }
  .demo .demo-foot { margin-top: 8px; padding-top: 8px; font-size: .78rem; }
}

/* ── small screens ── */
@media (max-width: 899px) {
  .demo .aw-body { grid-template-columns: minmax(0, 1fr); }
  /* the sidebar becomes a scrollable module strip, which is what a phone app
     does with the same navigation */
  .demo .aw-side {
    flex-direction: row; gap: 6px; overflow-x: auto;
    border-inline-end: 0; border-bottom: 1px solid var(--line);
  }
  .demo .aw-nav { flex: none; }
  .demo .aw-main { height: 440px; }
}
@media (max-width: 560px) {
  .demo .aw-nl, .demo .aw-title { display: none; }
  .demo .aw-doc, .demo .aw-meet { grid-template-columns: minmax(0, 1fr); }
  .demo .aw-mw { max-width: 120px; }
  .demo .aw-iv { grid-template-columns: minmax(0, 1fr) auto; }
  .demo .aw-in, .demo .aw-cnts { display: none; }
  .demo .aw-cal { grid-template-columns: 38px repeat(4, minmax(0, 1fr)); }
  .demo .aw-b { font-size: .62rem; padding: 2px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo .aw-pulse { animation: none; }
  .demo .aw-m, .demo .aw-tag, .demo .aw-act,
  .demo .aw-sys, .demo .aw-syn, .demo .aw-tl { opacity: 1; }
}
/* AI Admin — the screens inside the shared application window.
 * The window itself is awin.css; this is only what is on each screen.
 */

/* counters in the inbox header */
.demo--admin .aw-cnts { margin-inline-start: auto; display: flex; gap: 12px; }
.demo--admin .aw-cnt {
  display: flex; align-items: baseline; gap: 5px;
  font-size: .68rem; letter-spacing: .02em; text-transform: none;
  white-space: nowrap;
}
.demo--admin .aw-cnt b {
  position: relative; display: inline-grid; font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.demo--admin .an { grid-area: 1 / 1; font-style: normal; opacity: 0; }
.demo--admin:not(.playing) .an-addraft9,
.demo--admin:not(.playing) .an-adneed3,
.demo--admin:not(.playing) .an-adfile2 { opacity: 1; }
.demo--admin .aw-cnt--draft b { color: #2DDEFE; }
.demo--admin .aw-cnt--need b { color: #FFC46B; }
.demo--admin .aw-cnt--file b { color: var(--faint); }

/* ── inbox ─────────────────────────────────────────────────────────────── */
/* the list is anchored to the foot so mail arrives from the bottom, which is
   also how the chat and voice threads behave */
.demo--admin .aw-list {
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.demo--admin .aw-m {
  --mrow: 0;                     /* 1 while this row is the one being decided */
  flex: none;
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  align-items: center; gap: 0 9px;
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid rgba(45, 222, 254, calc(var(--mrow) * .5));
  background: rgba(45, 222, 254, calc(var(--mrow) * .1));
  opacity: 0;
}
.demo--admin:not(.playing) .aw-m { opacity: 1; margin-top: 3px; }
.demo--admin .aw-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #2DDEFE; flex: none;
}
.demo--admin .aw-mt {
  font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--faint);
}
.demo--admin .aw-mw {
  font-size: .82rem; font-weight: 650; color: #EAF0FF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 190px;
}
.demo--admin .aw-ms {
  font-size: .8rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--admin .aw-tag {
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
  opacity: 0;
}
.demo--admin:not(.playing) .aw-tag { opacity: 1; }
.demo--admin .aw-m--draft .aw-tag { color: #2DDEFE; background: rgba(45, 222, 254, .12); }
.demo--admin .aw-m--need .aw-tag { color: #FFC46B; background: rgba(255, 196, 107, .12); }
.demo--admin .aw-m--file .aw-tag { color: var(--faint); background: rgba(255, 255, 255, .04); }
.demo--admin .aw-m--file .aw-dot { background: rgba(255, 255, 255, .2); }
.demo--admin .aw-m--need .aw-dot { background: #FFC46B; }

/* ── reply ─────────────────────────────────────────────────────────────── */
.demo--admin .aw-cmp {
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  height: 100%; display: flex; flex-direction: column;
}
.demo--admin .aw-f {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.demo--admin .aw-f i {
  font-style: normal; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); min-width: 58px;
}
.demo--admin .aw-f b { font-size: .85rem; color: #EAF0FF; font-weight: 600; }
.demo--admin .aw-bodytxt {
  flex: 1; padding: 12px; font-size: .88rem; line-height: 1.6; color: #EAF0FF;
}
.demo--admin .aw-cf {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-top: 1px solid var(--line);
}
.demo--admin .aw-btn {
  font-size: .78rem; font-weight: 700; color: #06121B; background: #2DDEFE;
  border-radius: 8px; padding: 5px 14px;
}
.demo--admin .aw-hold { font-size: .76rem; color: var(--faint); }

/* ── needs you ─────────────────────────────────────────────────────────── */
.demo--admin .aw-note { font-size: .78rem; color: var(--faint); margin: 0 0 8px; }
.demo--admin .aw-need {
  display: grid; gap: 1px; padding: 9px 11px; margin-bottom: 7px;
  border: 1px solid rgba(255, 196, 107, .35); border-radius: 9px;
  background: rgba(255, 196, 107, .07);
}
.demo--admin .aw-need b { font-size: .85rem; color: #FFC46B; font-weight: 650; }
.demo--admin .aw-need span { font-size: .79rem; color: var(--muted); }

/* ── documents ─────────────────────────────────────────────────────────── */
.demo--admin .aw-doc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px; height: 100%;
}
.demo--admin .aw-uh {
  display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 7px;
}
.demo--admin .aw-unf {
  border: 1px dashed var(--line); border-radius: 10px; padding: 10px;
}
.demo--admin .aw-file {
  display: grid; gap: 1px; padding: 7px 9px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  font-size: .8rem; color: #EAF0FF; overflow: hidden;
}
.demo--admin .aw-to { font-style: normal; font-size: .72rem; color: #2DDEFE; }
.demo--admin .aw-folds { display: flex; flex-direction: column; gap: 6px; }
.demo--admin .aw-fold {
  --fd: 0;                       /* 1 as a file lands in this folder */
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, #2DDEFE calc(var(--fd) * 70%), var(--line));
  background: rgba(45, 222, 254, calc(var(--fd) * .1));
  font-size: .8rem; color: #EAF0FF;
}
.demo--admin .aw-fold b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo--admin .aw-fc {
  margin-inline-start: auto; position: relative; display: inline-grid;
  font-style: normal; font-size: .74rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.demo--admin .aw-fn { grid-area: 1 / 1; font-style: normal; opacity: 0; }
.demo--admin .aw-fn:first-child { opacity: 1; }

/* ── calendar ──────────────────────────────────────────────────────────── */
.demo--admin .aw-cal {
  display: grid;
  grid-template-columns: 46px repeat(4, minmax(0, 1fr));
  grid-template-rows: 22px repeat(8, minmax(0, 1fr));
  gap: 3px; height: 100%;
}
.demo--admin .aw-cd {
  grid-row: 1; font-size: .72rem; letter-spacing: .05em; color: var(--faint);
  text-align: center; align-self: center;
}
.demo--admin .aw-cd-0 { grid-column: 2; } .demo--admin .aw-cd-1 { grid-column: 3; }
.demo--admin .aw-cd-2 { grid-column: 4; } .demo--admin .aw-cd-3 { grid-column: 5; }
.demo--admin .aw-ch {
  grid-column: 1; font-size: .68rem; color: var(--faint);
  font-variant-numeric: tabular-nums; align-self: center;
}
.demo--admin .aw-ch-0 { grid-row: 2; } .demo--admin .aw-ch-1 { grid-row: 3; }
.demo--admin .aw-ch-2 { grid-row: 4; } .demo--admin .aw-ch-3 { grid-row: 5; }
.demo--admin .aw-ch-4 { grid-row: 6; } .demo--admin .aw-ch-5 { grid-row: 7; }
.demo--admin .aw-ch-6 { grid-row: 8; } .demo--admin .aw-ch-7 { grid-row: 9; }
.demo--admin .aw-b {
  --bt: 0;
  display: flex; align-items: center; gap: 5px;
  border-radius: 6px; padding: 2px 6px;
  font-size: .7rem; line-height: 1.15;
  overflow: hidden;
}
.demo--admin .aw-b--keep {
  background: rgba(255, 255, 255, .05); color: var(--muted);
  border: 1px solid var(--line);
}
.demo--admin .aw-b--from {
  background: rgba(255, 255, 255, .03); color: var(--faint);
  border: 1px dashed var(--line); text-decoration: line-through;
}
.demo--admin .aw-b--to {
  background: rgba(45, 222, 254, .16); color: #EAF0FF;
  border: 1px solid #2DDEFE; font-weight: 600;
  box-shadow: 0 0 0 calc(var(--bt) * 3px) rgba(45, 222, 254, .22);
}
.demo--admin .aw-ok {
  margin-inline-start: auto; flex: none;
  width: 12px; height: 12px; border-radius: 50%; background: #6FE7A8;
  position: relative; opacity: 0;
}
.demo--admin .aw-ok::after {
  content: ""; position: absolute; left: 3px; top: 5px;
  width: 5px; height: 2.5px;
  border-left: 1.6px solid #06121B; border-bottom: 1.6px solid #06121B;
  transform: rotate(-45deg);
}

/* ── invoices ──────────────────────────────────────────────────────────── */
.demo--admin .aw-ivs { display: flex; flex-direction: column; gap: 3px; }
.demo--admin .aw-iv {
  --iv: 0;                       /* 1 once this row has been chased */
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto 92px;
  align-items: center; gap: 10px;
  padding: 7px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.demo--admin .aw-in {
  font-size: .74rem; color: var(--faint); font-variant-numeric: tabular-nums;
}
.demo--admin .aw-iw {
  font-size: .82rem; color: #EAF0FF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--admin .aw-ia {
  font-size: .82rem; font-weight: 650; color: #EAF0FF;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.demo--admin .aw-is {
  grid-column: 4; grid-row: 1; justify-self: end;
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor;
}
.demo--admin .aw-iv--new .aw-is--a { color: #2DDEFE; background: rgba(45, 222, 254, .1); }
.demo--admin .aw-iv--late .aw-is--a { color: #FF9B9B; background: rgba(255, 155, 155, .1); }
.demo--admin .aw-is--b { color: #6FE7A8; background: rgba(111, 231, 168, .12); opacity: 0; }
/* the flip: the old status leaves as the new one arrives, in the same cell */
.demo--admin .aw-iv--late .aw-is--a { opacity: calc(1 - var(--iv)); }
.demo--admin .aw-iv--late .aw-is--b { opacity: var(--iv); }
.demo--admin .aw-iv--new .aw-is--b { display: none; }
.demo--admin .aw-more {
  font-size: .74rem; color: var(--faint); padding: 6px 9px;
}
.demo--admin .aw-tot {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid rgba(45, 222, 254, .35); background: rgba(45, 222, 254, .08);
  font-size: .82rem; font-weight: 650; color: #EAF0FF;
}

/* ── meetings ──────────────────────────────────────────────────────────── */
.demo--admin .aw-meet {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px; height: 100%;
}
.demo--admin .aw-tr {
  border-inline-start: 2px solid var(--line); padding-inline-start: 11px;
}
.demo--admin .aw-tl {
  display: block; font-size: .78rem; line-height: 1.5; color: var(--muted);
  margin-bottom: 7px; opacity: 0;
}
.demo--admin:not(.playing) .aw-tl { opacity: .62; }
.demo--admin .aw-act {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 8px; align-items: baseline;
  padding: 7px 10px; margin-bottom: 6px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .025);
  opacity: 0;
}
.demo--admin:not(.playing) .aw-act { opacity: 1; }
.demo--admin .aw-act b { font-size: .81rem; color: #EAF0FF; font-weight: 600; }
.demo--admin .aw-act span { font-size: .73rem; color: var(--muted); grid-column: 1; }
.demo--admin .aw-act i {
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  font-style: normal; font-size: .68rem; font-weight: 700; white-space: nowrap;
  color: #2DDEFE; background: rgba(45, 222, 254, .12);
  border-radius: 999px; padding: 2px 8px;
}

/* ── systems ───────────────────────────────────────────────────────────── */
.demo--admin .aw-syss { display: flex; flex-direction: column; gap: 8px; }
.demo--admin .aw-sys {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: .28;
}
.demo--admin:not(.playing) .aw-sys { opacity: 1; }
.demo--admin .aw-sys b { font-size: .82rem; color: #EAF0FF; font-weight: 650; }
.demo--admin .aw-sys > span { font-size: .82rem; color: #2DDEFE; font-weight: 600; }
/* drawn, not typed: an arrow glyph turns the wrong way in an RTL run */
.demo--admin .aw-ar { position: relative; width: 20px; height: 8px; flex: none; }
.demo--admin .aw-ar::before {
  content: ""; position: absolute; top: 50%; inset-inline-start: 0;
  width: 100%; height: 1px; background: var(--faint);
}
.demo--admin .aw-ar::after {
  content: ""; position: absolute; top: 50%; inset-inline-end: 0;
  width: 6px; height: 6px;
  border-top: 1px solid var(--faint); border-right: 1px solid var(--faint);
  transform: translateY(-50%) rotate(45deg);
}
[dir="rtl"] .demo--admin .aw-ar::after {
  border-right: 0; border-left: 1px solid var(--faint);
  transform: translateY(-50%) rotate(-45deg);
}
.demo--admin .aw-syn {
  margin-inline-start: auto; font-style: normal;
  font-size: .68rem; font-weight: 700; color: #06121B; background: #6FE7A8;
  border-radius: 999px; padding: 2px 9px; opacity: 0;
}
.demo--admin:not(.playing) .aw-syn { opacity: 1; }

/* ── the brief ─────────────────────────────────────────────────────────── */
.demo--admin .aw-brief {
  border: 1px solid rgba(45, 222, 254, .4); border-radius: 11px;
  background: linear-gradient(180deg, rgba(45, 222, 254, .1), rgba(8, 16, 28, .5));
  padding: 14px 16px;
}
.demo--admin .aw-brief > b {
  display: block; font-size: .95rem; color: #EAF0FF; margin-bottom: 9px;
}
.demo--admin .aw-brief ul { list-style: none; margin: 0 0 11px; padding: 0; }
.demo--admin .aw-brief li {
  font-size: .85rem; color: #EAF0FF; padding: 4px 0 4px 19px; position: relative;
}
.demo--admin .aw-brief li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: 11px;
  width: 8px; height: 8px; border-radius: 50%; background: #2DDEFE;
}
[dir="rtl"] .demo--admin .aw-brief li { padding: 4px 19px 4px 0; }
.demo--admin .aw-bneeds { display: flex; flex-wrap: wrap; gap: 7px; }
.demo--admin .aw-bneed {
  font-size: .74rem; font-weight: 600; color: #FFC46B;
  border: 1px solid rgba(255, 196, 107, .4); background: rgba(255, 196, 107, .1);
  border-radius: 999px; padding: 3px 10px;
}

/* AI Marketing — the screens inside the shared application window.
 * The window itself is awin.css; this is only what is on each screen.
 *
 * One colour rule runs through the whole thing: each channel keeps its hue
 * everywhere it appears — on the calendar card, on the approval preview, in the
 * Friday report — so you can follow Monday's carousel across four screens
 * without reading a word.
 */

.demo--mkt .mk-uh {
  display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}

/* channel hues, used by every screen */
.demo--mkt .mk-item--social, .demo--mkt .mk-ch--social { --ch: #2DDEFE; }
.demo--mkt .mk-item--mail   { --ch: #BBADFF; }
.demo--mkt .mk-item--seo    { --ch: #6FE7A8; }
.demo--mkt .mk-item--ads    { --ch: #FFC46B; }
.demo--mkt .mk-item--report { --ch: #FF9BD0; }

/* ── keywords ──────────────────────────────────────────────────────────── */
.demo--mkt .mk-kh, .demo--mkt .mk-kw {
  display: grid; grid-template-columns: minmax(0, 1fr) 84px 74px;
  align-items: center; gap: 12px; padding: 7px 10px;
}
.demo--mkt .mk-kh {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.demo--mkt .mk-kw {
  --pk: 0;                       /* 1 once this term is chosen for the week */
  border-radius: 8px; margin-top: 3px; opacity: 0;
  border: 1px solid rgba(45, 222, 254, calc(var(--pk) * .5));
  background: rgba(45, 222, 254, calc(var(--pk) * .1));
}
.demo--mkt:not(.playing) .mk-kw { opacity: 1; }
.demo--mkt .mk-kt {
  font-size: .82rem; color: #EAF0FF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--mkt .mk-kv, .demo--mkt .mk-kp {
  font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.demo--mkt .mk-kp { display: flex; align-items: center; gap: 6px; }
/* drawn, so it cannot turn the wrong way in an RTL run */
.demo--mkt .mk-up {
  width: 0; height: 0; flex: none;
  border-inline-start: 4px solid transparent;
  border-inline-end: 4px solid transparent;
  border-bottom: 6px solid #6FE7A8;
}
.demo--mkt .mk-pick {
  margin-top: 10px; padding: 8px 11px; border-radius: 8px;
  border: 1px solid rgba(45, 222, 254, .4); background: rgba(45, 222, 254, .1);
  font-size: .8rem; font-weight: 600; color: #EAF0FF; opacity: 0;
}
.demo--mkt:not(.playing) .mk-pick { opacity: 1; }

/* ── the week ──────────────────────────────────────────────────────────── */
.demo--mkt .mk-week {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto minmax(0, 1fr); gap: 8px; height: 100%;
}
.demo--mkt .mk-cd {
  grid-row: 1; font-size: .72rem; letter-spacing: .05em; color: var(--faint);
  text-align: center;
}
.demo--mkt .mk-item {
  --hold: 0; --live: 0;
  grid-row: 2; display: flex; flex-direction: column; gap: 4px;
  padding: 10px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ch) 45%, transparent);
  background: color-mix(in srgb, var(--ch) 9%, transparent);
  box-shadow: 0 0 0 calc(var(--hold) * 3px) rgba(255, 196, 107, .3);
  opacity: 0; min-width: 0;
}
.demo--mkt:not(.playing) .mk-item { opacity: 1; }
.demo--mkt .mk-ch {
  align-self: flex-start; font-style: normal;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em;
  color: #06121B; background: var(--ch);
  border-radius: 999px; padding: 2px 8px;
}
.demo--mkt .mk-item b { font-size: .8rem; color: #EAF0FF; line-height: 1.25; }
.demo--mkt .mk-item > span:not(.mk-sts) {
  font-size: .72rem; color: var(--muted); line-height: 1.35;
}
/* the three status chips share one cell, so the card never changes height */
.demo--mkt .mk-sts { margin-top: auto; position: relative; display: inline-grid; }
.demo--mkt .mk-st {
  grid-area: 1 / 1; justify-self: start; font-style: normal;
  font-size: .64rem; font-weight: 700; white-space: nowrap;
  border-radius: 999px; padding: 2px 8px; opacity: 0;
}
.demo--mkt .mk-st--q { color: var(--faint); background: rgba(255, 255, 255, .06); }
.demo--mkt .mk-st--hold { color: #06121B; background: #FFC46B; }
.demo--mkt .mk-st--ok { color: #06121B; background: #BBADFF; }
.demo--mkt .mk-st--live { color: #06121B; background: #6FE7A8; }
.demo--mkt:not(.playing) .mk-st--q { opacity: 1; }

/* ── the post ──────────────────────────────────────────────────────────── */
.demo--mkt .mk-post {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 16px; height: 100%;
}
.demo--mkt .mk-sl {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 12px; margin-bottom: 8px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  font-size: .84rem; color: #EAF0FF; opacity: 0;
}
.demo--mkt:not(.playing) .mk-sl { opacity: 1; }
.demo--mkt .mk-sl i {
  flex: none; font-style: normal; font-size: .7rem; font-weight: 700;
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #06121B; background: #2DDEFE;
}
.demo--mkt .mk-cap {
  border-inline-start: 2px solid rgba(45, 222, 254, .5); padding-inline-start: 12px;
}
.demo--mkt .mk-captxt {
  display: block; font-size: .84rem; line-height: 1.6; color: #EAF0FF;
}
.demo--mkt .mk-tags {
  display: block; margin-top: 9px; font-size: .78rem; color: #2DDEFE;
}
.demo--mkt .mk-voice {
  display: inline-block; margin-top: 12px; font-size: .72rem; color: var(--faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}

/* ── the approval gate ─────────────────────────────────────────────────── */
.demo--mkt .mk-gate { display: flex; flex-direction: column; gap: 12px; }
.demo--mkt .mk-held {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(255, 196, 107, .5); background: rgba(255, 196, 107, .1);
  font-size: .86rem; color: #FFC46B;
}
/* a padlock, drawn */
.demo--mkt .mk-lock {
  position: relative; width: 13px; height: 11px; flex: none;
  border: 1.6px solid currentColor; border-radius: 3px;
}
.demo--mkt .mk-lock::before {
  content: ""; position: absolute; left: 50%; bottom: 100%;
  width: 8px; height: 6px; margin-left: -4px;
  border: 1.6px solid currentColor; border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.demo--mkt .mk-prev {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .025);
}
.demo--mkt .mk-prev b { font-size: .88rem; color: #EAF0FF; }
.demo--mkt .mk-prev span { font-size: .78rem; color: var(--muted); }
.demo--mkt .mk-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo--mkt .mk-btn {
  font-size: .78rem; font-weight: 700; color: #06121B; background: #2DDEFE;
  border-radius: 8px; padding: 6px 14px;
}
.demo--mkt .mk-btn--ghost {
  color: var(--muted); background: transparent; border: 1px solid var(--line);
}
.demo--mkt .mk-by {
  font-size: .74rem; font-weight: 700; color: #06121B; background: #6FE7A8;
  border-radius: 999px; padding: 3px 11px; opacity: 0;
}
.demo--mkt:not(.playing) .mk-by { opacity: 1; }
.demo--mkt .mk-note {
  margin: 0; font-size: .78rem; line-height: 1.5; color: var(--faint);
}

/* what is actually being approved, not just its title */
.demo--mkt .mk-gprev {
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255, 255, 255, .02); padding: 11px 12px;
}
.demo--mkt .mk-gsl {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 8px 8px 0; padding: 5px 11px 5px 5px;
  border-radius: 999px; border: 1px solid var(--line);
  font-size: .78rem; color: #EAF0FF;
}
[dir="rtl"] .demo--mkt .mk-gsl { margin: 0 0 8px 8px; padding: 5px 5px 5px 11px; }
.demo--mkt .mk-gsl i {
  flex: none; font-style: normal; font-size: .66rem; font-weight: 700;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #06121B; background: #2DDEFE;
}
.demo--mkt .mk-gcap {
  display: block; font-size: .8rem; line-height: 1.55; color: var(--muted);
}

/* ── email ─────────────────────────────────────────────────────────────── */
.demo--mkt .mk-list {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 10px;
}
.demo--mkt .mk-list b {
  font-size: 1.25rem; font-weight: 750; color: #BBADFF;
  font-variant-numeric: tabular-nums;
}
.demo--mkt .mk-list span { font-size: .8rem; color: var(--muted); }
.demo--mkt .mk-seg {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px; align-items: baseline;
  padding: 9px 11px; margin-bottom: 7px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(187, 173, 255, .06);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-seg { opacity: 1; }
.demo--mkt .mk-seg b { font-size: .83rem; color: #EAF0FF; font-weight: 600; }
.demo--mkt .mk-segn {
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  font-style: normal; font-size: 1rem; font-weight: 700; color: #BBADFF;
  font-variant-numeric: tabular-nums;
}
.demo--mkt .mk-seg span { font-size: .75rem; color: var(--muted); }
.demo--mkt .mk-queued {
  margin-top: 4px; font-size: .78rem; color: #2DDEFE; font-weight: 600;
}

/* ── blog ──────────────────────────────────────────────────────────────── */
.demo--mkt .mk-blog > b {
  display: block; font-size: .95rem; line-height: 1.35; color: #EAF0FF;
}
.demo--mkt .mk-bmeta {
  display: block; margin: 6px 0 11px; font-size: .74rem; color: #6FE7A8;
}
.demo--mkt .mk-outline { list-style: none; margin: 0; padding: 0; counter-reset: o; }
.demo--mkt .mk-outline li {
  counter-increment: o; position: relative;
  padding: 5px 0 5px 26px; font-size: .82rem; color: var(--muted);
  border-top: 1px solid var(--line); opacity: 0;
}
[dir="rtl"] .demo--mkt .mk-outline li { padding: 5px 26px 5px 0; }
.demo--mkt:not(.playing) .mk-outline li { opacity: 1; }
.demo--mkt .mk-outline li::before {
  content: counter(o); position: absolute; inset-inline-start: 0; top: 6px;
  font-size: .68rem; font-weight: 700; color: var(--faint);
}
.demo--mkt .mk-bstate {
  display: inline-block; margin-top: 11px;
  font-size: .74rem; font-weight: 700; color: #FFC46B;
  border: 1px solid rgba(255, 196, 107, .45); background: rgba(255, 196, 107, .1);
  border-radius: 999px; padding: 3px 11px;
}

/* ── ads ───────────────────────────────────────────────────────────────── */
.demo--mkt .mk-ah, .demo--mkt .mk-ad {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 84px 66px 82px;
  align-items: center; gap: 10px; padding: 8px 10px;
}
.demo--mkt .mk-ah {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line); padding-bottom: 8px;
}
.demo--mkt .mk-ad {
  --vd: 0;                       /* 1 once the test has been judged */
  margin-top: 4px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-ad { opacity: 1; }
.demo--mkt .mk-av {
  font-style: normal; font-size: .72rem; font-weight: 700; text-align: center;
  color: #EAF0FF; background: rgba(255, 255, 255, .07);
  border-radius: 6px; padding: 3px 0;
}
.demo--mkt .mk-ahd {
  font-size: .82rem; color: #EAF0FF;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--mkt .mk-asp, .demo--mkt .mk-act {
  font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums;
}
.demo--mkt .mk-ast {
  font-style: normal; font-size: .68rem; font-weight: 700; text-align: center;
  white-space: nowrap; border-radius: 999px; padding: 3px 0;
  color: var(--faint); background: rgba(255, 255, 255, .05);
}
/* the verdict only appears once the test has actually run */
.demo--mkt .mk-ad--win .mk-ast {
  color: color-mix(in srgb, #06121B calc(var(--vd) * 100%), var(--faint));
  background: color-mix(in srgb, #6FE7A8 calc(var(--vd) * 100%), rgba(255, 255, 255, .05));
}
.demo--mkt .mk-ad--stop { opacity: calc(1 - var(--vd) * .45); }
.demo--mkt .mk-ad--stop .mk-ast {
  color: color-mix(in srgb, #FF9B9B calc(var(--vd) * 100%), var(--faint));
  background: rgba(255, 155, 155, calc(var(--vd) * .14));
}
.demo--mkt .mk-ad--win {
  border-color: color-mix(in srgb, #6FE7A8 calc(var(--vd) * 60%), var(--line));
}
.demo--mkt .mk-move {
  margin-top: 10px; padding: 8px 11px; border-radius: 8px;
  border: 1px solid rgba(111, 231, 168, .4); background: rgba(111, 231, 168, .09);
  font-size: .8rem; font-weight: 600; color: #EAF0FF; opacity: 0;
}
.demo--mkt:not(.playing) .mk-move { opacity: 1; }

/* ── market watch ──────────────────────────────────────────────────────── */
.demo--mkt .mk-riv {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 12px; align-items: baseline;
  padding: 8px 11px; margin-bottom: 6px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-riv { opacity: 1; }
.demo--mkt .mk-riv b { font-size: .82rem; color: #EAF0FF; font-weight: 600; }
.demo--mkt .mk-riv i {
  grid-column: 2; grid-row: 1; font-style: normal;
  font-size: .74rem; color: var(--muted); white-space: nowrap;
}
.demo--mkt .mk-riv span { font-size: .75rem; color: var(--faint); }
.demo--mkt .mk-gap {
  display: grid; gap: 3px; margin-top: 10px;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(45, 222, 254, .45); background: rgba(45, 222, 254, .1);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-gap { opacity: 1; }
.demo--mkt .mk-gap b {
  font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #2DDEFE;
}
.demo--mkt .mk-gap span { font-size: .84rem; color: #EAF0FF; line-height: 1.45; }

/* ── Friday ────────────────────────────────────────────────────────────── */
.demo--mkt .mk-rl {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 14px; padding: 7px 0; border-top: 1px solid var(--line); opacity: 0;
}
.demo--mkt .mk-rl:first-of-type { border-top: 0; }
.demo--mkt:not(.playing) .mk-rl { opacity: 1; }
.demo--mkt .mk-rl b { font-size: .83rem; color: #EAF0FF; font-weight: 600; }
.demo--mkt .mk-rl span {
  font-size: .8rem; color: var(--muted); text-align: end;
  font-variant-numeric: tabular-nums;
}
.demo--mkt .mk-rtop {
  display: flex; align-items: baseline; gap: 9px; margin-top: 12px;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(45, 222, 254, .45); background: rgba(45, 222, 254, .1);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-rtop { opacity: 1; }
.demo--mkt .mk-rtop b { font-size: 1.05rem; font-weight: 750; color: #2DDEFE; }
.demo--mkt .mk-rtop span { font-size: .84rem; color: #EAF0FF; }

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .demo--mkt .mk-post { grid-template-columns: minmax(0, 1fr); }
  .demo--mkt .mk-week {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    overflow-y: auto;
  }
  .demo--mkt .mk-cd { display: none; }
  .demo--mkt .mk-item { grid-row: auto; }
}
@media (max-width: 560px) {
  .demo--mkt .mk-kh, .demo--mkt .mk-kw { grid-template-columns: minmax(0, 1fr) 62px; }
  .demo--mkt .mk-kp { display: none; }
  .demo--mkt .mk-ah, .demo--mkt .mk-ad {
    grid-template-columns: 26px minmax(0, 1fr) 74px;
  }
  .demo--mkt .mk-asp, .demo--mkt .mk-act { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .demo--mkt .mk-kw, .demo--mkt .mk-item, .demo--mkt .mk-sl, .demo--mkt .mk-seg,
  .demo--mkt .mk-ad, .demo--mkt .mk-riv, .demo--mkt .mk-rl { opacity: 1; }
}

/* ── the creative she generates ────────────────────────────────────────────
 * A carousel slide is a designed card, so these are real artboards drawn in
 * SVG — not placeholder rectangles, and not stock photography the clinic does
 * not own. The CSP forbids remote images anyway, so drawing is also the only
 * option that works.
 */
.demo--mkt .mk-boards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; align-items: start;
}
.demo--mkt .mk-board {
  --sw: 0;                       /* 1 while the render sweep passes over it */
  position: relative; display: block; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line); opacity: 0;
}
.demo--mkt:not(.playing) .mk-board { opacity: 1; }
.demo--mkt .mk-art { display: block; width: 100%; height: auto; }
.demo--mkt .mk-art .ab-t { fill: #FFFFFF; font-weight: 750; }
.demo--mkt .mk-art .ab-s { fill: #2DDEFE; font-weight: 600; }
.demo--mkt .mk-art .ab-b { fill: rgba(234, 240, 255, .55); letter-spacing: .12em; }
/* the sweep: what makes it read as generated just now */
.demo--mkt .mk-board::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%,
              rgba(45, 222, 254, .38) 50%, transparent 58%);
  opacity: var(--sw);
}
.demo--mkt .mk-bn {
  position: absolute; inset-inline-end: 7px; top: 7px;
  font-style: normal; font-size: .62rem; font-weight: 700;
  color: #06121B; background: rgba(255, 255, 255, .85);
  border-radius: 999px; padding: 1px 7px;
}
.demo--mkt .mk-alsos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 12px; opacity: 0;
}
.demo--mkt:not(.playing) .mk-alsos { opacity: 1; }
.demo--mkt .mk-alsos > span {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint);
}
.demo--mkt .mk-also {
  font-style: normal; font-size: .74rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
}

/* ── the platforms it goes out on ──────────────────────────────────────── */
.demo--mkt .mk-plats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px;
}
.demo--mkt .mk-plat {
  position: relative; display: flex; flex-direction: column; gap: 9px;
  padding: 10px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0; min-width: 0;
}
.demo--mkt:not(.playing) .mk-plat { opacity: 1; }
/* the crops differ, so the canvas is a fixed box the artboard sits inside —
   that is what shows one post becoming four shapes */
.demo--mkt .mk-pcanvas {
  height: 96px; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .25); border-radius: 8px; overflow: hidden;
}
.demo--mkt .mk-pcanvas .mk-art {
  width: auto; height: 100%; max-width: 100%; border-radius: 4px;
}
.demo--mkt .mk-pmeta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; }
.demo--mkt .mk-pi {
  grid-row: 1 / 3; width: 20px; height: 20px; align-self: center;
  fill: none; stroke: #2DDEFE; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.demo--mkt .mk-pmeta b {
  font-size: .8rem; color: #EAF0FF; font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--mkt .mk-pmeta span {
  grid-column: 2; font-size: .7rem; color: var(--faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--mkt .mk-pfmt {
  grid-column: 1 / 3; margin-top: 3px; font-style: normal;
  font-size: .68rem; color: var(--muted);
}
.demo--mkt .mk-padapt {
  grid-column: 1 / 3; font-style: normal; font-size: .68rem; line-height: 1.35;
  color: #2DDEFE;
}
.demo--mkt .mk-pok {
  align-self: flex-start; font-style: normal;
  font-size: .66rem; font-weight: 700; color: #06121B; background: #6FE7A8;
  border-radius: 999px; padding: 2px 9px; opacity: 0;
}
.demo--mkt:not(.playing) .mk-pok { opacity: 1; }

/* the gate says where it is going, before you approve it */
.demo--mkt .mk-gto {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px;
}
.demo--mkt .mk-gp {
  display: inline-flex; align-items: center; gap: 6px;
  font-style: normal; font-size: .72rem; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px 3px 6px;
}
[dir="rtl"] .demo--mkt .mk-gp { padding: 3px 6px 3px 10px; }
.demo--mkt .mk-gp .mk-pi { width: 15px; height: 15px; grid-row: auto; }

@media (max-width: 899px) {
  .demo--mkt .mk-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .demo--mkt .mk-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .demo--mkt .mk-plats { grid-template-columns: minmax(0, 1fr); }
  .demo--mkt .mk-pcanvas { height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo--mkt .mk-board, .demo--mkt .mk-plat, .demo--mkt .mk-pok { opacity: 1; }
  .demo--mkt .mk-board::after { opacity: 0; }
}

/* ── where the week came from ──────────────────────────────────────────────
 * The first row is the argument for the whole product line: the three carousel
 * questions are the three questions patients really asked in chat and on the
 * phone — the same clinic, the same assistant, in the other two sections.
 */
.demo--mkt .mk-srcs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; align-items: start;
}
.demo--mkt .mk-src {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0; min-width: 0;
}
.demo--mkt:not(.playing) .mk-src { opacity: 1; }
.demo--mkt .mk-src .mk-uh { margin-bottom: 6px; }
.demo--mkt .mk-srow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 3px 0;
}
.demo--mkt .mk-srow b {
  font-size: .8rem; color: #EAF0FF; font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--mkt .mk-srow i {
  font-style: normal; font-size: .82rem; font-weight: 700; color: #2DDEFE;
  font-variant-numeric: tabular-nums;
}
.demo--mkt .mk-src:first-child { border-color: rgba(45, 222, 254, .4); }
.demo--mkt .mk-src:first-child .mk-uh { color: #2DDEFE; }

/* the closing line every one of these screens ends on */
.demo--mkt .mk-out {
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  border: 1px solid rgba(45, 222, 254, .4); background: rgba(45, 222, 254, .1);
  font-size: .82rem; font-weight: 600; color: #EAF0FF; opacity: 0;
}
.demo--mkt:not(.playing) .mk-out { opacity: 1; }

/* ── the compliance check ──────────────────────────────────────────────── */
.demo--mkt .mk-chk {
  --ck2: 0;                      /* 1 once this rule has been checked */
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 10px; align-items: center;
  padding: 7px 10px; margin-bottom: 5px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-chk { --ck2: 1; opacity: 1; }
/* the mark fills in only once the rule has actually been checked */
.demo--mkt .mk-cm {
  grid-row: 1 / 3; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .07);
}
.demo--mkt .mk-chk--ok .mk-cm { background: rgba(111, 231, 168, calc(.12 + var(--ck2) * .88)); }
.demo--mkt .mk-chk--fix .mk-cm { background: rgba(255, 196, 107, calc(.12 + var(--ck2) * .88)); }
.demo--mkt .mk-cm svg {
  width: 11px; height: 11px; opacity: var(--ck2);
  fill: none; stroke: #06121B; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.demo--mkt .mk-chk b { font-size: .81rem; color: #EAF0FF; font-weight: 600; }
.demo--mkt .mk-chk span { grid-column: 2; font-size: .74rem; color: var(--muted); }
.demo--mkt .mk-chk--fix { border-color: rgba(255, 196, 107, .4); }
.demo--mkt .mk-chk--fix b { color: #FFC46B; }

/* ── the replies ───────────────────────────────────────────────────────── */
.demo--mkt .mk-rep-row {
  --dn: 0;                       /* 1 once she has dealt with it */
  display: grid; grid-template-columns: auto auto minmax(0, 1fr);
  gap: 2px 9px; align-items: baseline;
  padding: 7px 10px; margin-bottom: 5px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-rep-row { --dn: 1; opacity: 1; }
.demo--mkt .mk-rk {
  font-style: normal; font-size: .64rem; font-weight: 700; white-space: nowrap;
  color: var(--faint); background: rgba(255, 255, 255, .06);
  border-radius: 999px; padding: 2px 8px;
}
.demo--mkt .mk-rep-row b { font-size: .8rem; color: #EAF0FF; font-weight: 650; }
.demo--mkt .mk-rq {
  font-size: .8rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.demo--mkt .mk-rd {
  grid-column: 2 / 4; font-size: .74rem; font-weight: 600;
  opacity: var(--dn);
}
.demo--mkt .mk-rep-row--done .mk-rd { color: #2DDEFE; }
.demo--mkt .mk-rep-row--book .mk-rd { color: #6FE7A8; }
.demo--mkt .mk-rep-row--flag .mk-rd { color: #FFC46B; }
.demo--mkt .mk-rep-row--flag { border-color: rgba(255, 196, 107, .4); }
.demo--mkt .mk-rep-row--book { border-color: rgba(111, 231, 168, .4); }

/* ── what next week does differently ───────────────────────────────────── */
.demo--mkt .mk-lr {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px; align-items: center;
  padding: 8px 11px; margin-bottom: 6px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  opacity: 0;
}
.demo--mkt:not(.playing) .mk-lr { opacity: 1; }
.demo--mkt .mk-lr b { font-size: .78rem; color: var(--muted); font-weight: 500; }
.demo--mkt .mk-lr span { font-size: .8rem; color: #EAF0FF; font-weight: 600; }

/* ── detail added to screens that already existed ──────────────────────── */
.demo--mkt .mk-best {
  margin-top: 9px; font-size: .76rem; color: #2DDEFE;
}
.demo--mkt .mk-rules { margin-top: 13px; }
.demo--mkt .mk-rule, .demo--mkt .mk-op {
  display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
  font-size: .76rem; color: var(--muted);
}
.demo--mkt .mk-rule i, .demo--mkt .mk-op i {
  flex: none; min-width: 82px; font-style: normal;
  font-size: .68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint);
}
.demo--mkt .mk-onpage {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.demo--mkt .mk-aud {
  margin-top: 9px; font-size: .74rem; color: var(--muted);
}

@media (max-width: 899px) {
  .demo--mkt .mk-srcs { grid-template-columns: minmax(0, 1fr); }
  .demo--mkt .mk-lr { grid-template-columns: minmax(0, 1fr); }
  .demo--mkt .mk-lr .mk-ar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .demo--mkt .mk-src, .demo--mkt .mk-chk, .demo--mkt .mk-rep-row,
  .demo--mkt .mk-lr, .demo--mkt .mk-out { opacity: 1; }
}

/* ── generated playback: one 54s cycle, timings from demo.py ── */

.demo--chat.playing .demo-pane { animation: cDemoCycle 54s linear infinite; }
@keyframes cDemoCycle {
  0%, 92.593% { opacity: 1; }
  94.444%, 100% { opacity: 0; }
}
.demo--chat.playing .dm-0 { animation: cDmAt0 54s linear infinite; }
@keyframes cDmAt0 {
  0%, 0.926% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.852%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-1 { animation: cDmAt1 54s linear infinite; }
@keyframes cDmAt1 {
  0%, 5.556% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  6.481%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-2 { animation: cDmAt2 54s linear infinite; }
@keyframes cDmAt2 {
  0%, 11.111% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  12.037%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-3 { animation: cDmAt3 54s linear infinite; }
@keyframes cDmAt3 {
  0%, 22.963% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  23.889%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-4 { animation: cDmAt4 54s linear infinite; }
@keyframes cDmAt4 {
  0%, 29.63% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  30.556%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-5 { animation: cDmAt5 54s linear infinite; }
@keyframes cDmAt5 {
  0%, 34.444% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  35.37%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-6 { animation: cDmAt6 54s linear infinite; }
@keyframes cDmAt6 {
  0%, 38.889% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  39.815%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-7 { animation: cDmAt7 54s linear infinite; }
@keyframes cDmAt7 {
  0%, 43.333% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  44.259%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-8 { animation: cDmAt8 54s linear infinite; }
@keyframes cDmAt8 {
  0%, 48.148% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  49.074%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-9 { animation: cDmAt9 54s linear infinite; }
@keyframes cDmAt9 {
  0%, 52.593% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  53.519%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-10 { animation: cDmAt10 54s linear infinite; }
@keyframes cDmAt10 {
  0%, 58.519% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  59.444%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-11 { animation: cDmAt11 54s linear infinite; }
@keyframes cDmAt11 {
  0%, 62.963% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  63.889%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-12 { animation: cDmAt12 54s linear infinite; }
@keyframes cDmAt12 {
  0%, 68.519% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  69.444%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-13 { animation: cDmAt13 54s linear infinite; }
@keyframes cDmAt13 {
  0%, 72.963% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  73.889%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-14 { animation: cDmAt14 54s linear infinite; }
@keyframes cDmAt14 {
  0%, 77.778% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  78.704%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}
.demo--chat.playing .dm-15 { animation: cDmAt15 54s linear infinite; }
@keyframes cDmAt15 {
  0%, 82.222% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  83.148%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
}

/* ── generated diary placement ── */

.cal-hd-c0 { grid-column: 2; grid-row: 1; }
.cal-hd-c1 { grid-column: 3; grid-row: 1; }
.cal-hd-c2 { grid-column: 4; grid-row: 1; }
.cal-t-c0 { grid-column: 1; grid-row: 2; }
.cal-t-c1 { grid-column: 1; grid-row: 3; }
.cal-t-c2 { grid-column: 1; grid-row: 4; }
.cal-t-c3 { grid-column: 1; grid-row: 5; }
.cal-t-c4 { grid-column: 1; grid-row: 6; }
.cal-t-c5 { grid-column: 1; grid-row: 7; }
.cal-t-c6 { grid-column: 1; grid-row: 8; }
.cal-t-c7 { grid-column: 1; grid-row: 9; }
.cal-t-c8 { grid-column: 1; grid-row: 10; }
.cal-t-c9 { grid-column: 1; grid-row: 11; }
.cal-t-c10 { grid-column: 1; grid-row: 12; }
.cb-c0 { grid-column: 2; grid-row: 2 / 7; }
.cb-c1 { grid-column: 2; grid-row: 4 / 5; }
.cb-c2 { grid-column: 2; grid-row: 8 / 9; }
.cb-c3 { grid-column: 2; grid-row: 9 / 10; }
.cb-c4 { grid-column: 2; grid-row: 10 / 11; }
.cb-c5 { grid-column: 3; grid-row: 2 / 5; }
.cb-c6 { grid-column: 3; grid-row: 5 / 6; }
.cb-c7 { grid-column: 3; grid-row: 8 / 10; }
.cb-c8 { grid-column: 3; grid-row: 11 / 12; }
.cb-c9 { grid-column: 4; grid-row: 3 / 4; }
.cb-c10 { grid-column: 4; grid-row: 5 / 6; }
.cb-c11 { grid-column: 4; grid-row: 8 / 13; }

/* ── generated status line ── */

.demo--chat.playing .cs-c0 { animation: ccs0 54s linear infinite; }
@keyframes ccs0 {
  0%, 13.333% { opacity: 0; }
  14.074%, 17.407% { opacity: 1; }
  18.148%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c1 { animation: ccs1 54s linear infinite; }
@keyframes ccs1 {
  0%, 17.407% { opacity: 0; }
  18.148%, 21.481% { opacity: 1; }
  22.222%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c2 { animation: ccs2 54s linear infinite; }
@keyframes ccs2 {
  0%, 21.481% { opacity: 0; }
  22.222%, 25.926% { opacity: 1; }
  26.667%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c3 { animation: ccs3 54s linear infinite; }
@keyframes ccs3 {
  0%, 25.926% { opacity: 0; }
  26.667%, 31.111% { opacity: 1; }
  31.852%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c4 { animation: ccs4 54s linear infinite; }
@keyframes ccs4 {
  0%, 31.111% { opacity: 0; }
  31.852%, 51.852% { opacity: 1; }
  52.593%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c5 { animation: ccs5 54s linear infinite; }
@keyframes ccs5 {
  0%, 51.852% { opacity: 0; }
  52.593%, 71.111% { opacity: 1; }
  71.852%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c6 { animation: ccs6 54s linear infinite; }
@keyframes ccs6 {
  0%, 71.111% { opacity: 0; }
  71.852%, 80.37% { opacity: 1; }
  81.111%, 100% { opacity: 0; }
}
.demo--chat.playing .cs-c7 { animation: ccs7 54s linear infinite; }
@keyframes ccs7 {
  0%, 80.37% { opacity: 0; }
  81.111%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--chat.playing .ck-c0 { animation: cck0 54s linear infinite; }
@keyframes cck0 {
  0%, 13.333% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  14.074%, 17.407% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  18.148%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c1 { animation: cck1 54s linear infinite; }
@keyframes cck1 {
  0%, 17.407% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  18.148%, 21.481% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  22.222%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c2 { animation: cck2 54s linear infinite; }
@keyframes cck2 {
  0%, 21.481% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  22.222%, 25.926% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  26.667%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c3 { animation: cck3 54s linear infinite; }
@keyframes cck3 {
  0%, 25.926% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  26.667%, 31.111% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  31.852%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c4 { animation: cck4 54s linear infinite; }
@keyframes cck4 {
  0%, 31.111% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  31.852%, 51.852% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  52.593%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c5 { animation: cck5 54s linear infinite; }
@keyframes cck5 {
  0%, 51.852% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  52.593%, 71.111% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  71.852%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c6 { animation: cck6 54s linear infinite; }
@keyframes cck6 {
  0%, 71.111% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  71.852%, 80.37% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  81.111%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--chat.playing .ck-c7 { animation: cck7 54s linear infinite; }
@keyframes cck7 {
  0%, 80.37% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  81.111%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--chat.playing .cal-t-c2 { animation: ctl2 54s linear infinite; }
@keyframes ctl2 {
  0%, 21.481% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  22.222%, 25.926% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  27.407%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--chat.playing .cal-t-c6 { animation: ctl6 54s linear infinite; }
@keyframes ctl6 {
  0%, 25.926% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  26.667%, 31.111% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  32.593%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--chat.playing .cal-t-c7 { animation: ctl7 54s linear infinite; }
@keyframes ctl7 {
  0%, 25.926% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  26.667%, 57.778% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  59.259%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--chat.playing .cal-t-c3 { animation: ctl3 54s linear infinite; }
@keyframes ctl3 {
  0%, 71.111% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  71.852%, 84.444% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  85.926%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--chat.playing .cal-shift { animation: cshiftLit 54s linear infinite; }
@keyframes cshiftLit {
  0%, 13.333% { color: rgba(45,222,254,.7); text-shadow: none; }
  14.074%, 17.407% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  18.889%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--chat.playing .cal-b--off    { animation: ccalOff    54s linear infinite; }
.demo--chat.playing .cal-b--taken  { animation: ccalTaken  54s linear infinite; }
.demo--chat.playing .cal-b--deny   { animation: ccalDeny   54s linear infinite; }
.demo--chat.playing .cal-b--offer  { animation: ccalOffer  54s linear infinite; }
.demo--chat.playing .cal-b--book   { animation: ccalBook   54s linear infinite; }
.demo--chat.playing .cal-tick      { animation: ccalTick   54s linear infinite; }
@keyframes ccalOff {
  0%, 13.333% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  14.259%, 17.407% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  18.889%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes ccalTaken {
  0%, 17.407% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  18.333%, 21.481% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  22.963%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes ccalDeny {
  0%, 21.481% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  22.222%, 25.556% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  27.037%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes ccalOffer {
  0%, 25.926% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  26.667%, 30.0% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  31.481%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes ccalBook {
  0%, 25.926% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  26.667%, 30.0% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  31.111% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  31.852%, 35.185% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  51.852% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  52.778%, 55.926% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  57.407%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes ccalTick {
  0%, 51.852% { opacity: 0; transform: scale(.4); }
  52.685%, 100% { opacity: 1; transform: none; }
}
.demo--chat.playing .cal-b--cancel { animation: ccalCancel 54s linear infinite; }
@keyframes ccalCancel {
  0%, 17.407% { opacity: 0; background: rgba(150,178,255,.16); border-color: transparent; text-decoration-color: transparent; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  18.333%, 71.111% { opacity: 1; background: rgba(150,178,255,.16); border-color: transparent; text-decoration-color: transparent; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  71.852%, 80.37% { opacity: 1; background: rgba(255,65,169,.16); border-color: rgba(255,65,169,.65); text-decoration-color: transparent; box-shadow: 0 0 0 6px rgba(255,65,169,.26); }
  81.481%, 84.444% { opacity: .55; background: transparent; border-color: rgba(150,178,255,.4); text-decoration-color: rgba(234,240,255,.6); box-shadow: 0 0 0 5px rgba(255,65,169,.16); }
  85.926%, 100% { opacity: .5; background: transparent; border-color: rgba(150,178,255,.35); text-decoration-color: rgba(234,240,255,.55); box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}


/* ── generated language switching ── */

#ad-en:checked ~ .demo-pane--en,
#ad-ar:checked ~ .demo-pane--ar,
#ad-hi:checked ~ .demo-pane--hi,
#ad-ml:checked ~ .demo-pane--ml,
#ad-ur:checked ~ .demo-pane--ur,
#ad-tl:checked ~ .demo-pane--tl { display: block; }
@media (min-width: 900px) {
  #ad-en:checked ~ .demo-pane--en,
  #ad-ar:checked ~ .demo-pane--ar,
  #ad-hi:checked ~ .demo-pane--hi,
  #ad-ml:checked ~ .demo-pane--ml,
  #ad-ur:checked ~ .demo-pane--ur,
  #ad-tl:checked ~ .demo-pane--tl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 22px; align-items: start;
  }
}
#ad-en:checked ~ .demo-tabs .demo-tab--en,
#ad-ar:checked ~ .demo-tabs .demo-tab--ar,
#ad-hi:checked ~ .demo-tabs .demo-tab--hi,
#ad-ml:checked ~ .demo-tabs .demo-tab--ml,
#ad-ur:checked ~ .demo-tabs .demo-tab--ur,
#ad-tl:checked ~ .demo-tabs .demo-tab--tl { color: #fff; border-color: rgba(45,222,254,.55); background: rgba(45,222,254,.10); }
#ad-en:focus-visible ~ .demo-tabs .demo-tab--en,
#ad-ar:focus-visible ~ .demo-tabs .demo-tab--ar,
#ad-hi:focus-visible ~ .demo-tabs .demo-tab--hi,
#ad-ml:focus-visible ~ .demo-tabs .demo-tab--ml,
#ad-ur:focus-visible ~ .demo-tabs .demo-tab--ur,
#ad-tl:focus-visible ~ .demo-tabs .demo-tab--tl { outline: 2px solid #2DDEFE; outline-offset: 2px; }

/* ── generated voice playback: one timeline per language ── */

.demo--voice.playing .demo-pane--en { animation: venCycle 69.38s linear infinite; }
@keyframes venCycle {
  0%, 97.117% { opacity: 1; }
  98.559%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vt-0 { animation: venAt0 69.38s linear infinite; }
@keyframes venAt0 {
  0%, 0.577% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.153%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-1 { animation: venAt1 69.38s linear infinite; }
@keyframes venAt1 {
  0%, 6.702% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  7.279%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-2 { animation: venAt2 69.38s linear infinite; }
@keyframes venAt2 {
  0%, 12.367% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  12.943%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-3 { animation: venAt3 69.38s linear infinite; }
@keyframes venAt3 {
  0%, 25.295% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  25.872%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-4 { animation: venAt4 69.38s linear infinite; }
@keyframes venAt4 {
  0%, 38.916% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  39.493%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-5 { animation: venAt5 69.38s linear infinite; }
@keyframes venAt5 {
  0%, 42.015% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  42.592%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-6 { animation: venAt6 69.38s linear infinite; }
@keyframes venAt6 {
  0%, 49.986% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  50.562%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-7 { animation: venAt7 69.38s linear infinite; }
@keyframes venAt7 {
  0%, 52.984% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  53.56%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-8 { animation: venAt8 69.38s linear infinite; }
@keyframes venAt8 {
  0%, 58.763% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  59.34%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-9 { animation: venAt9 69.38s linear infinite; }
@keyframes venAt9 {
  0%, 62.352% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  62.929%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-10 { animation: venAt10 69.38s linear infinite; }
@keyframes venAt10 {
  0%, 75.411% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  75.987%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vt-11 { animation: venAt11 69.38s linear infinite; }
@keyframes venAt11 {
  0%, 79.346% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  79.922%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--en .vwv-0 { animation: venWv0 69.38s linear infinite; }
@keyframes venWv0 {
  0%, 0.577% { opacity: 0; }
  0.937%, 6.27% { opacity: 1; }
  6.702%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-1 { animation: venWv1 69.38s linear infinite; }
@keyframes venWv1 {
  0%, 6.702% { opacity: 0; }
  7.063%, 11.934% { opacity: 1; }
  12.367%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-2 { animation: venWv2 69.38s linear infinite; }
@keyframes venWv2 {
  0%, 12.367% { opacity: 0; }
  12.727%, 24.863% { opacity: 1; }
  25.295%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-3 { animation: venWv3 69.38s linear infinite; }
@keyframes venWv3 {
  0%, 25.295% { opacity: 0; }
  25.656%, 38.484% { opacity: 1; }
  38.916%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-4 { animation: venWv4 69.38s linear infinite; }
@keyframes venWv4 {
  0%, 38.916% { opacity: 0; }
  39.276%, 41.583% { opacity: 1; }
  42.015%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-5 { animation: venWv5 69.38s linear infinite; }
@keyframes venWv5 {
  0%, 42.015% { opacity: 0; }
  42.375%, 49.553% { opacity: 1; }
  49.986%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-6 { animation: venWv6 69.38s linear infinite; }
@keyframes venWv6 {
  0%, 49.986% { opacity: 0; }
  50.346%, 52.551% { opacity: 1; }
  52.984%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-7 { animation: venWv7 69.38s linear infinite; }
@keyframes venWv7 {
  0%, 52.984% { opacity: 0; }
  53.344%, 58.331% { opacity: 1; }
  58.763%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-8 { animation: venWv8 69.38s linear infinite; }
@keyframes venWv8 {
  0%, 58.763% { opacity: 0; }
  59.124%, 61.92% { opacity: 1; }
  62.352%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-9 { animation: venWv9 69.38s linear infinite; }
@keyframes venWv9 {
  0%, 62.352% { opacity: 0; }
  62.713%, 74.978% { opacity: 1; }
  75.411%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-10 { animation: venWv10 69.38s linear infinite; }
@keyframes venWv10 {
  0%, 75.411% { opacity: 0; }
  75.771%, 78.913% { opacity: 1; }
  79.346%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--en .vwv-11 { animation: venWv11 69.38s linear infinite; }
@keyframes venWv11 {
  0%, 79.346% { opacity: 0; }
  79.706%, 96.685% { opacity: 1; }
  97.117%, 100% { opacity: 0; }
}

/* ── generated diary placement ── */

.cal-hd-ven0 { grid-column: 2; grid-row: 1; }
.cal-hd-ven1 { grid-column: 3; grid-row: 1; }
.cal-hd-ven2 { grid-column: 4; grid-row: 1; }
.cal-t-ven0 { grid-column: 1; grid-row: 2; }
.cal-t-ven1 { grid-column: 1; grid-row: 3; }
.cal-t-ven2 { grid-column: 1; grid-row: 4; }
.cal-t-ven3 { grid-column: 1; grid-row: 5; }
.cal-t-ven4 { grid-column: 1; grid-row: 6; }
.cal-t-ven5 { grid-column: 1; grid-row: 7; }
.cal-t-ven6 { grid-column: 1; grid-row: 8; }
.cal-t-ven7 { grid-column: 1; grid-row: 9; }
.cal-t-ven8 { grid-column: 1; grid-row: 10; }
.cal-t-ven9 { grid-column: 1; grid-row: 11; }
.cal-t-ven10 { grid-column: 1; grid-row: 12; }
.cb-ven0 { grid-column: 2; grid-row: 2 / 7; }
.cb-ven1 { grid-column: 2; grid-row: 10 / 11; }
.cb-ven2 { grid-column: 3; grid-row: 2 / 5; }
.cb-ven3 { grid-column: 3; grid-row: 5 / 6; }
.cb-ven4 { grid-column: 3; grid-row: 8 / 10; }
.cb-ven5 { grid-column: 3; grid-row: 11 / 12; }
.cb-ven6 { grid-column: 4; grid-row: 3 / 4; }
.cb-ven7 { grid-column: 4; grid-row: 5 / 6; }
.cb-ven8 { grid-column: 4; grid-row: 8 / 13; }
.cb-ven9 { grid-column: 4; grid-row: 9 / 10; }
.cb-ven10 { grid-column: 4; grid-row: 4 / 5; }
.cb-ven11 { grid-column: 4; grid-row: 6 / 7; }

/* ── generated status line ── */

.demo--voice .demo-pane--en.playing .cs-ven0 { animation: vencs0 69.38s linear infinite; }
@keyframes vencs0 {
  0%, 14.529% { opacity: 0; }
  15.105%, 18.132% { opacity: 1; }
  18.709%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--en.playing .cs-ven1 { animation: vencs1 69.38s linear infinite; }
@keyframes vencs1 {
  0%, 18.132% { opacity: 0; }
  18.709%, 26.449% { opacity: 1; }
  27.025%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--en.playing .cs-ven2 { animation: vencs2 69.38s linear infinite; }
@keyframes vencs2 {
  0%, 26.449% { opacity: 0; }
  27.025%, 31.781% { opacity: 1; }
  32.358%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--en.playing .cs-ven3 { animation: vencs3 69.38s linear infinite; }
@keyframes vencs3 {
  0%, 31.781% { opacity: 0; }
  32.358%, 40.069% { opacity: 1; }
  40.646%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--en.playing .cs-ven4 { animation: vencs4 69.38s linear infinite; }
@keyframes vencs4 {
  0%, 40.069% { opacity: 0; }
  40.646%, 53.848% { opacity: 1; }
  54.425%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--en.playing .cs-ven5 { animation: vencs5 69.38s linear infinite; }
@keyframes vencs5 {
  0%, 53.848% { opacity: 0; }
  54.425%, 79.778% { opacity: 1; }
  80.355%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--en.playing .cs-ven6 { animation: vencs6 69.38s linear infinite; }
@keyframes vencs6 {
  0%, 79.778% { opacity: 0; }
  80.355%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--voice .demo-pane--en.playing .ck-ven0 { animation: venck0 69.38s linear infinite; }
@keyframes venck0 {
  0%, 14.529% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  15.105%, 18.132% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  18.709%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--en.playing .ck-ven1 { animation: venck1 69.38s linear infinite; }
@keyframes venck1 {
  0%, 18.132% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  18.709%, 26.449% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  27.025%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--en.playing .ck-ven2 { animation: venck2 69.38s linear infinite; }
@keyframes venck2 {
  0%, 26.449% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  27.025%, 31.781% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  32.358%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--en.playing .ck-ven3 { animation: venck3 69.38s linear infinite; }
@keyframes venck3 {
  0%, 31.781% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  32.358%, 40.069% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  40.646%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--en.playing .ck-ven4 { animation: venck4 69.38s linear infinite; }
@keyframes venck4 {
  0%, 40.069% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  40.646%, 53.848% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  54.425%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--en.playing .ck-ven5 { animation: venck5 69.38s linear infinite; }
@keyframes venck5 {
  0%, 53.848% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  54.425%, 79.778% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  80.355%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--en.playing .ck-ven6 { animation: venck6 69.38s linear infinite; }
@keyframes venck6 {
  0%, 79.778% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  80.355%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--voice .demo-pane--en.playing .cal-t-ven7 { animation: ventl7 69.38s linear infinite; }
@keyframes ventl7 {
  0%, 26.449% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  27.025%, 31.781% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  32.935%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--en.playing .cal-t-ven2 { animation: ventl2 69.38s linear infinite; }
@keyframes ventl2 {
  0%, 31.781% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  32.358%, 40.069% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  41.222%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--en.playing .cal-t-ven4 { animation: ventl4 69.38s linear infinite; }
@keyframes ventl4 {
  0%, 31.781% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  32.358%, 58.461% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  59.614%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--en.playing .cal-shift { animation: venshiftLit 69.38s linear infinite; }
@keyframes venshiftLit {
  0%, 14.529% { color: rgba(45,222,254,.7); text-shadow: none; }
  15.105%, 18.132% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  19.285%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--voice .demo-pane--en.playing .cal-b--off    { animation: vencalOff    69.38s linear infinite; }
.demo--voice .demo-pane--en.playing .cal-b--taken  { animation: vencalTaken  69.38s linear infinite; }
.demo--voice .demo-pane--en.playing .cal-b--deny   { animation: vencalDeny   69.38s linear infinite; }
.demo--voice .demo-pane--en.playing .cal-b--offer  { animation: vencalOffer  69.38s linear infinite; }
.demo--voice .demo-pane--en.playing .cal-b--book   { animation: vencalBook   69.38s linear infinite; }
.demo--voice .demo-pane--en.playing .cal-tick      { animation: vencalTick   69.38s linear infinite; }
@keyframes vencalOff {
  0%, 14.529% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  15.249%, 17.7% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  18.853%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vencalTaken {
  0%, 18.132% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  18.853%, 21.303% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  22.456%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes vencalDeny {
  0%, 26.449% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  27.025%, 29.619% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  30.773%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes vencalOffer {
  0%, 31.781% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  32.358%, 34.952% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  36.106%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vencalBook {
  0%, 31.781% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  32.358%, 34.952% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  40.069% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  40.646%, 43.24% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  53.848% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  54.569%, 57.019% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  58.172%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes vencalTick {
  0%, 53.848% { opacity: 0; transform: scale(.4); }
  54.497%, 100% { opacity: 1; transform: none; }
}

.demo--voice.playing .demo-pane--ar { animation: varCycle 75.36s linear infinite; }
@keyframes varCycle {
  0%, 97.346% { opacity: 1; }
  98.673%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vt-0 { animation: varAt0 75.36s linear infinite; }
@keyframes varAt0 {
  0%, 0.531% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.062%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-1 { animation: varAt1 75.36s linear infinite; }
@keyframes varAt1 {
  0%, 7.139% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  7.67%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-2 { animation: varAt2 75.36s linear infinite; }
@keyframes varAt2 {
  0%, 15.234% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  15.764%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-3 { animation: varAt3 75.36s linear infinite; }
@keyframes varAt3 {
  0%, 29.26% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  29.79%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-4 { animation: varAt4 75.36s linear infinite; }
@keyframes varAt4 {
  0%, 43.485% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  44.015%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-5 { animation: varAt5 75.36s linear infinite; }
@keyframes varAt5 {
  0%, 47.32% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  47.85%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-6 { animation: varAt6 75.36s linear infinite; }
@keyframes varAt6 {
  0%, 54.339% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  54.87%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-7 { animation: varAt7 75.36s linear infinite; }
@keyframes varAt7 {
  0%, 57.55% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  58.081%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-8 { animation: varAt8 75.36s linear infinite; }
@keyframes varAt8 {
  0%, 63.946% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  64.477%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-9 { animation: varAt9 75.36s linear infinite; }
@keyframes varAt9 {
  0%, 67.251% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  67.781%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-10 { animation: varAt10 75.36s linear infinite; }
@keyframes varAt10 {
  0%, 77.15% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  77.68%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vt-11 { animation: varAt11 75.36s linear infinite; }
@keyframes varAt11 {
  0%, 80.56% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  81.091%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ar .vwv-0 { animation: varWv0 75.36s linear infinite; }
@keyframes varWv0 {
  0%, 0.531% { opacity: 0; }
  0.863%, 6.741% { opacity: 1; }
  7.139%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-1 { animation: varWv1 75.36s linear infinite; }
@keyframes varWv1 {
  0%, 7.139% { opacity: 0; }
  7.471%, 14.835% { opacity: 1; }
  15.234%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-2 { animation: varWv2 75.36s linear infinite; }
@keyframes varWv2 {
  0%, 15.234% { opacity: 0; }
  15.565%, 28.861% { opacity: 1; }
  29.26%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-3 { animation: varWv3 75.36s linear infinite; }
@keyframes varWv3 {
  0%, 29.26% { opacity: 0; }
  29.591%, 43.087% { opacity: 1; }
  43.485%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-4 { animation: varWv4 75.36s linear infinite; }
@keyframes varWv4 {
  0%, 43.485% { opacity: 0; }
  43.816%, 46.921% { opacity: 1; }
  47.32%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-5 { animation: varWv5 75.36s linear infinite; }
@keyframes varWv5 {
  0%, 47.32% { opacity: 0; }
  47.651%, 53.941% { opacity: 1; }
  54.339%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-6 { animation: varWv6 75.36s linear infinite; }
@keyframes varWv6 {
  0%, 54.339% { opacity: 0; }
  54.671%, 57.152% { opacity: 1; }
  57.55%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-7 { animation: varWv7 75.36s linear infinite; }
@keyframes varWv7 {
  0%, 57.55% { opacity: 0; }
  57.882%, 63.548% { opacity: 1; }
  63.946%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-8 { animation: varWv8 75.36s linear infinite; }
@keyframes varWv8 {
  0%, 63.946% { opacity: 0; }
  64.278%, 66.852% { opacity: 1; }
  67.251%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-9 { animation: varWv9 75.36s linear infinite; }
@keyframes varWv9 {
  0%, 67.251% { opacity: 0; }
  67.582%, 76.752% { opacity: 1; }
  77.15%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-10 { animation: varWv10 75.36s linear infinite; }
@keyframes varWv10 {
  0%, 77.15% { opacity: 0; }
  77.481%, 80.162% { opacity: 1; }
  80.56%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ar .vwv-11 { animation: varWv11 75.36s linear infinite; }
@keyframes varWv11 {
  0%, 80.56% { opacity: 0; }
  80.892%, 96.948% { opacity: 1; }
  97.346%, 100% { opacity: 0; }
}

/* ── generated diary placement ── */

.cal-hd-var0 { grid-column: 2; grid-row: 1; }
.cal-hd-var1 { grid-column: 3; grid-row: 1; }
.cal-hd-var2 { grid-column: 4; grid-row: 1; }
.cal-t-var0 { grid-column: 1; grid-row: 2; }
.cal-t-var1 { grid-column: 1; grid-row: 3; }
.cal-t-var2 { grid-column: 1; grid-row: 4; }
.cal-t-var3 { grid-column: 1; grid-row: 5; }
.cal-t-var4 { grid-column: 1; grid-row: 6; }
.cal-t-var5 { grid-column: 1; grid-row: 7; }
.cal-t-var6 { grid-column: 1; grid-row: 8; }
.cal-t-var7 { grid-column: 1; grid-row: 9; }
.cal-t-var8 { grid-column: 1; grid-row: 10; }
.cal-t-var9 { grid-column: 1; grid-row: 11; }
.cal-t-var10 { grid-column: 1; grid-row: 12; }
.cb-var0 { grid-column: 2; grid-row: 2 / 7; }
.cb-var1 { grid-column: 2; grid-row: 10 / 11; }
.cb-var2 { grid-column: 3; grid-row: 2 / 5; }
.cb-var3 { grid-column: 3; grid-row: 5 / 6; }
.cb-var4 { grid-column: 3; grid-row: 8 / 10; }
.cb-var5 { grid-column: 3; grid-row: 11 / 12; }
.cb-var6 { grid-column: 4; grid-row: 3 / 4; }
.cb-var7 { grid-column: 4; grid-row: 5 / 6; }
.cb-var8 { grid-column: 4; grid-row: 8 / 13; }
.cb-var9 { grid-column: 4; grid-row: 9 / 10; }
.cb-var10 { grid-column: 4; grid-row: 4 / 5; }
.cb-var11 { grid-column: 4; grid-row: 6 / 7; }

/* ── generated status line ── */

.demo--voice .demo-pane--ar.playing .cs-var0 { animation: varcs0 75.36s linear infinite; }
@keyframes varcs0 {
  0%, 17.224% { opacity: 0; }
  17.755%, 20.541% { opacity: 1; }
  21.072%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ar.playing .cs-var1 { animation: varcs1 75.36s linear infinite; }
@keyframes varcs1 {
  0%, 20.541% { opacity: 0; }
  21.072%, 30.321% { opacity: 1; }
  30.852%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ar.playing .cs-var2 { animation: varcs2 75.36s linear infinite; }
@keyframes varcs2 {
  0%, 30.321% { opacity: 0; }
  30.852%, 35.231% { opacity: 1; }
  35.762%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ar.playing .cs-var3 { animation: varcs3 75.36s linear infinite; }
@keyframes varcs3 {
  0%, 35.231% { opacity: 0; }
  35.762%, 44.546% { opacity: 1; }
  45.077%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ar.playing .cs-var4 { animation: varcs4 75.36s linear infinite; }
@keyframes varcs4 {
  0%, 44.546% { opacity: 0; }
  45.077%, 58.347% { opacity: 1; }
  58.877%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ar.playing .cs-var5 { animation: varcs5 75.36s linear infinite; }
@keyframes varcs5 {
  0%, 58.347% { opacity: 0; }
  58.877%, 80.958% { opacity: 1; }
  81.489%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ar.playing .cs-var6 { animation: varcs6 75.36s linear infinite; }
@keyframes varcs6 {
  0%, 80.958% { opacity: 0; }
  81.489%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--voice .demo-pane--ar.playing .ck-var0 { animation: varck0 75.36s linear infinite; }
@keyframes varck0 {
  0%, 17.224% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  17.755%, 20.541% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  21.072%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ar.playing .ck-var1 { animation: varck1 75.36s linear infinite; }
@keyframes varck1 {
  0%, 20.541% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  21.072%, 30.321% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  30.852%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ar.playing .ck-var2 { animation: varck2 75.36s linear infinite; }
@keyframes varck2 {
  0%, 30.321% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  30.852%, 35.231% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  35.762%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ar.playing .ck-var3 { animation: varck3 75.36s linear infinite; }
@keyframes varck3 {
  0%, 35.231% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  35.762%, 44.546% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  45.077%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ar.playing .ck-var4 { animation: varck4 75.36s linear infinite; }
@keyframes varck4 {
  0%, 44.546% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  45.077%, 58.347% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  58.877%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ar.playing .ck-var5 { animation: varck5 75.36s linear infinite; }
@keyframes varck5 {
  0%, 58.347% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  58.877%, 80.958% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  81.489%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ar.playing .ck-var6 { animation: varck6 75.36s linear infinite; }
@keyframes varck6 {
  0%, 80.958% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  81.489%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--voice .demo-pane--ar.playing .cal-t-var7 { animation: vartl7 75.36s linear infinite; }
@keyframes vartl7 {
  0%, 30.321% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  30.852%, 35.231% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  36.292%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ar.playing .cal-t-var2 { animation: vartl2 75.36s linear infinite; }
@keyframes vartl2 {
  0%, 35.231% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  35.762%, 44.546% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  45.608%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ar.playing .cal-t-var4 { animation: vartl4 75.36s linear infinite; }
@keyframes vartl4 {
  0%, 35.231% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  35.762%, 62.593% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  63.654%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ar.playing .cal-shift { animation: varshiftLit 75.36s linear infinite; }
@keyframes varshiftLit {
  0%, 17.224% { color: rgba(45,222,254,.7); text-shadow: none; }
  17.755%, 20.541% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  21.603%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--voice .demo-pane--ar.playing .cal-b--off    { animation: varcalOff    75.36s linear infinite; }
.demo--voice .demo-pane--ar.playing .cal-b--taken  { animation: varcalTaken  75.36s linear infinite; }
.demo--voice .demo-pane--ar.playing .cal-b--deny   { animation: varcalDeny   75.36s linear infinite; }
.demo--voice .demo-pane--ar.playing .cal-b--offer  { animation: varcalOffer  75.36s linear infinite; }
.demo--voice .demo-pane--ar.playing .cal-b--book   { animation: varcalBook   75.36s linear infinite; }
.demo--voice .demo-pane--ar.playing .cal-tick      { animation: varcalTick   75.36s linear infinite; }
@keyframes varcalOff {
  0%, 17.224% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  17.887%, 20.143% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  21.205%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes varcalTaken {
  0%, 20.541% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  21.205%, 23.461% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  24.522%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes varcalDeny {
  0%, 30.321% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  30.852%, 33.24% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  34.302%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes varcalOffer {
  0%, 35.231% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  35.762%, 38.15% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  39.212%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes varcalBook {
  0%, 35.231% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  35.762%, 38.15% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  44.546% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  45.077%, 47.465% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  58.347% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  59.01%, 61.266% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  62.327%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes varcalTick {
  0%, 58.347% { opacity: 0; transform: scale(.4); }
  58.944%, 100% { opacity: 1; transform: none; }
}

.demo--voice.playing .demo-pane--hi { animation: vhiCycle 63.11s linear infinite; }
@keyframes vhiCycle {
  0%, 96.831% { opacity: 1; }
  98.415%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vt-0 { animation: vhiAt0 63.11s linear infinite; }
@keyframes vhiAt0 {
  0%, 0.634% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.268%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-1 { animation: vhiAt1 63.11s linear infinite; }
@keyframes vhiAt1 {
  0%, 8.398% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  9.032%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-2 { animation: vhiAt2 63.11s linear infinite; }
@keyframes vhiAt2 {
  0%, 14.879% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  15.513%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-3 { animation: vhiAt3 63.11s linear infinite; }
@keyframes vhiAt3 {
  0%, 26.398% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  27.032%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-4 { animation: vhiAt4 63.11s linear infinite; }
@keyframes vhiAt4 {
  0%, 38.726% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  39.36%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-5 { animation: vhiAt5 63.11s linear infinite; }
@keyframes vhiAt5 {
  0%, 42.307% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  42.941%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-6 { animation: vhiAt6 63.11s linear infinite; }
@keyframes vhiAt6 {
  0%, 49.152% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  49.786%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-7 { animation: vhiAt7 63.11s linear infinite; }
@keyframes vhiAt7 {
  0%, 54.096% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  54.73%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-8 { animation: vhiAt8 63.11s linear infinite; }
@keyframes vhiAt8 {
  0%, 59.959% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  60.593%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-9 { animation: vhiAt9 63.11s linear infinite; }
@keyframes vhiAt9 {
  0%, 63.54% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  64.174%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-10 { animation: vhiAt10 63.11s linear infinite; }
@keyframes vhiAt10 {
  0%, 75.741% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  76.375%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vt-11 { animation: vhiAt11 63.11s linear infinite; }
@keyframes vhiAt11 {
  0%, 79.686% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  80.32%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--hi .vwv-0 { animation: vhiWv0 63.11s linear infinite; }
@keyframes vhiWv0 {
  0%, 0.634% { opacity: 0; }
  1.03%, 7.923% { opacity: 1; }
  8.398%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-1 { animation: vhiWv1 63.11s linear infinite; }
@keyframes vhiWv1 {
  0%, 8.398% { opacity: 0; }
  8.794%, 14.403% { opacity: 1; }
  14.879%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-2 { animation: vhiWv2 63.11s linear infinite; }
@keyframes vhiWv2 {
  0%, 14.879% { opacity: 0; }
  15.275%, 25.923% { opacity: 1; }
  26.398%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-3 { animation: vhiWv3 63.11s linear infinite; }
@keyframes vhiWv3 {
  0%, 26.398% { opacity: 0; }
  26.794%, 38.251% { opacity: 1; }
  38.726%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-4 { animation: vhiWv4 63.11s linear infinite; }
@keyframes vhiWv4 {
  0%, 38.726% { opacity: 0; }
  39.122%, 41.832% { opacity: 1; }
  42.307%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-5 { animation: vhiWv5 63.11s linear infinite; }
@keyframes vhiWv5 {
  0%, 42.307% { opacity: 0; }
  42.703%, 48.677% { opacity: 1; }
  49.152%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-6 { animation: vhiWv6 63.11s linear infinite; }
@keyframes vhiWv6 {
  0%, 49.152% { opacity: 0; }
  49.548%, 53.621% { opacity: 1; }
  54.096%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-7 { animation: vhiWv7 63.11s linear infinite; }
@keyframes vhiWv7 {
  0%, 54.096% { opacity: 0; }
  54.492%, 59.483% { opacity: 1; }
  59.959%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-8 { animation: vhiWv8 63.11s linear infinite; }
@keyframes vhiWv8 {
  0%, 59.959% { opacity: 0; }
  60.355%, 63.064% { opacity: 1; }
  63.54%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-9 { animation: vhiWv9 63.11s linear infinite; }
@keyframes vhiWv9 {
  0%, 63.54% { opacity: 0; }
  63.936%, 75.265% { opacity: 1; }
  75.741%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-10 { animation: vhiWv10 63.11s linear infinite; }
@keyframes vhiWv10 {
  0%, 75.741% { opacity: 0; }
  76.137%, 79.211% { opacity: 1; }
  79.686%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--hi .vwv-11 { animation: vhiWv11 63.11s linear infinite; }
@keyframes vhiWv11 {
  0%, 79.686% { opacity: 0; }
  80.082%, 96.356% { opacity: 1; }
  96.831%, 100% { opacity: 0; }
}

/* ── generated diary placement ── */

.cal-hd-vhi0 { grid-column: 2; grid-row: 1; }
.cal-hd-vhi1 { grid-column: 3; grid-row: 1; }
.cal-hd-vhi2 { grid-column: 4; grid-row: 1; }
.cal-t-vhi0 { grid-column: 1; grid-row: 2; }
.cal-t-vhi1 { grid-column: 1; grid-row: 3; }
.cal-t-vhi2 { grid-column: 1; grid-row: 4; }
.cal-t-vhi3 { grid-column: 1; grid-row: 5; }
.cal-t-vhi4 { grid-column: 1; grid-row: 6; }
.cal-t-vhi5 { grid-column: 1; grid-row: 7; }
.cal-t-vhi6 { grid-column: 1; grid-row: 8; }
.cal-t-vhi7 { grid-column: 1; grid-row: 9; }
.cal-t-vhi8 { grid-column: 1; grid-row: 10; }
.cal-t-vhi9 { grid-column: 1; grid-row: 11; }
.cal-t-vhi10 { grid-column: 1; grid-row: 12; }
.cb-vhi0 { grid-column: 2; grid-row: 2 / 7; }
.cb-vhi1 { grid-column: 2; grid-row: 10 / 11; }
.cb-vhi2 { grid-column: 3; grid-row: 2 / 5; }
.cb-vhi3 { grid-column: 3; grid-row: 5 / 6; }
.cb-vhi4 { grid-column: 3; grid-row: 8 / 10; }
.cb-vhi5 { grid-column: 3; grid-row: 11 / 12; }
.cb-vhi6 { grid-column: 4; grid-row: 3 / 4; }
.cb-vhi7 { grid-column: 4; grid-row: 5 / 6; }
.cb-vhi8 { grid-column: 4; grid-row: 8 / 13; }
.cb-vhi9 { grid-column: 4; grid-row: 9 / 10; }
.cb-vhi10 { grid-column: 4; grid-row: 4 / 5; }
.cb-vhi11 { grid-column: 4; grid-row: 6 / 7; }

/* ── generated status line ── */

.demo--voice .demo-pane--hi.playing .cs-vhi0 { animation: vhics0 63.11s linear infinite; }
@keyframes vhics0 {
  0%, 17.256% { opacity: 0; }
  17.889%, 21.217% { opacity: 1; }
  21.851%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--hi.playing .cs-vhi1 { animation: vhics1 63.11s linear infinite; }
@keyframes vhics1 {
  0%, 21.217% { opacity: 0; }
  21.851%, 27.666% { opacity: 1; }
  28.3%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--hi.playing .cs-vhi2 { animation: vhics2 63.11s linear infinite; }
@keyframes vhics2 {
  0%, 27.666% { opacity: 0; }
  28.3%, 33.529% { opacity: 1; }
  34.163%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--hi.playing .cs-vhi3 { animation: vhics3 63.11s linear infinite; }
@keyframes vhics3 {
  0%, 33.529% { opacity: 0; }
  34.163%, 39.994% { opacity: 1; }
  40.627%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--hi.playing .cs-vhi4 { animation: vhics4 63.11s linear infinite; }
@keyframes vhics4 {
  0%, 39.994% { opacity: 0; }
  40.627%, 55.047% { opacity: 1; }
  55.681%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--hi.playing .cs-vhi5 { animation: vhics5 63.11s linear infinite; }
@keyframes vhics5 {
  0%, 55.047% { opacity: 0; }
  55.681%, 80.162% { opacity: 1; }
  80.795%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--hi.playing .cs-vhi6 { animation: vhics6 63.11s linear infinite; }
@keyframes vhics6 {
  0%, 80.162% { opacity: 0; }
  80.795%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--voice .demo-pane--hi.playing .ck-vhi0 { animation: vhick0 63.11s linear infinite; }
@keyframes vhick0 {
  0%, 17.256% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  17.889%, 21.217% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  21.851%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--hi.playing .ck-vhi1 { animation: vhick1 63.11s linear infinite; }
@keyframes vhick1 {
  0%, 21.217% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  21.851%, 27.666% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  28.3%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--hi.playing .ck-vhi2 { animation: vhick2 63.11s linear infinite; }
@keyframes vhick2 {
  0%, 27.666% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  28.3%, 33.529% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  34.163%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--hi.playing .ck-vhi3 { animation: vhick3 63.11s linear infinite; }
@keyframes vhick3 {
  0%, 33.529% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  34.163%, 39.994% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  40.627%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--hi.playing .ck-vhi4 { animation: vhick4 63.11s linear infinite; }
@keyframes vhick4 {
  0%, 39.994% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  40.627%, 55.047% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  55.681%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--hi.playing .ck-vhi5 { animation: vhick5 63.11s linear infinite; }
@keyframes vhick5 {
  0%, 55.047% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  55.681%, 80.162% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  80.795%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--hi.playing .ck-vhi6 { animation: vhick6 63.11s linear infinite; }
@keyframes vhick6 {
  0%, 80.162% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  80.795%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--voice .demo-pane--hi.playing .cal-t-vhi7 { animation: vhitl7 63.11s linear infinite; }
@keyframes vhitl7 {
  0%, 27.666% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  28.3%, 33.529% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  34.796%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--hi.playing .cal-t-vhi2 { animation: vhitl2 63.11s linear infinite; }
@keyframes vhitl2 {
  0%, 33.529% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  34.163%, 39.994% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  41.261%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--hi.playing .cal-t-vhi4 { animation: vhitl4 63.11s linear infinite; }
@keyframes vhitl4 {
  0%, 33.529% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  34.163%, 60.117% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  61.385%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--hi.playing .cal-shift { animation: vhishiftLit 63.11s linear infinite; }
@keyframes vhishiftLit {
  0%, 17.256% { color: rgba(45,222,254,.7); text-shadow: none; }
  17.889%, 21.217% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  22.485%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--voice .demo-pane--hi.playing .cal-b--off    { animation: vhicalOff    63.11s linear infinite; }
.demo--voice .demo-pane--hi.playing .cal-b--taken  { animation: vhicalTaken  63.11s linear infinite; }
.demo--voice .demo-pane--hi.playing .cal-b--deny   { animation: vhicalDeny   63.11s linear infinite; }
.demo--voice .demo-pane--hi.playing .cal-b--offer  { animation: vhicalOffer  63.11s linear infinite; }
.demo--voice .demo-pane--hi.playing .cal-b--book   { animation: vhicalBook   63.11s linear infinite; }
.demo--voice .demo-pane--hi.playing .cal-tick      { animation: vhicalTick   63.11s linear infinite; }
@keyframes vhicalOff {
  0%, 17.256% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  18.048%, 20.742% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  22.009%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vhicalTaken {
  0%, 21.217% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  22.009%, 24.703% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  25.971%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes vhicalDeny {
  0%, 27.666% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  28.3%, 31.152% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  32.42%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes vhicalOffer {
  0%, 33.529% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  34.163%, 37.015% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  38.282%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vhicalBook {
  0%, 33.529% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  34.163%, 37.015% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  39.994% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  40.627%, 43.48% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  55.047% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  55.839%, 58.533% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  59.8%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes vhicalTick {
  0%, 55.047% { opacity: 0; transform: scale(.4); }
  55.76%, 100% { opacity: 1; transform: none; }
}

.demo--voice.playing .demo-pane--ml { animation: vmlCycle 61.57s linear infinite; }
@keyframes vmlCycle {
  0%, 96.752% { opacity: 1; }
  98.376%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vt-0 { animation: vmlAt0 61.57s linear infinite; }
@keyframes vmlAt0 {
  0%, 0.65% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.299%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-1 { animation: vmlAt1 61.57s linear infinite; }
@keyframes vmlAt1 {
  0%, 7.796% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  8.446%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-2 { animation: vmlAt2 61.57s linear infinite; }
@keyframes vmlAt2 {
  0%, 16.274% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  16.924%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-3 { animation: vmlAt3 61.57s linear infinite; }
@keyframes vmlAt3 {
  0%, 28.261% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  28.91%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-4 { animation: vmlAt4 61.57s linear infinite; }
@keyframes vmlAt4 {
  0%, 40.361% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  41.01%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-5 { animation: vmlAt5 61.57s linear infinite; }
@keyframes vmlAt5 {
  0%, 45.054% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  45.704%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-6 { animation: vmlAt6 61.57s linear infinite; }
@keyframes vmlAt6 {
  0%, 52.331% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  52.98%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-7 { animation: vmlAt7 61.57s linear infinite; }
@keyframes vmlAt7 {
  0%, 55.449% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  56.099%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-8 { animation: vmlAt8 61.57s linear infinite; }
@keyframes vmlAt8 {
  0%, 61.588% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  62.238%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-9 { animation: vmlAt9 61.57s linear infinite; }
@keyframes vmlAt9 {
  0%, 65.259% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  65.909%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-10 { animation: vmlAt10 61.57s linear infinite; }
@keyframes vmlAt10 {
  0%, 75.166% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  75.816%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vt-11 { animation: vmlAt11 61.57s linear infinite; }
@keyframes vmlAt11 {
  0%, 79.86% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  80.51%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ml .vwv-0 { animation: vmlWv0 61.57s linear infinite; }
@keyframes vmlWv0 {
  0%, 0.65% { opacity: 0; }
  1.056%, 7.309% { opacity: 1; }
  7.796%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-1 { animation: vmlWv1 61.57s linear infinite; }
@keyframes vmlWv1 {
  0%, 7.796% { opacity: 0; }
  8.202%, 15.787% { opacity: 1; }
  16.274%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-2 { animation: vmlWv2 61.57s linear infinite; }
@keyframes vmlWv2 {
  0%, 16.274% { opacity: 0; }
  16.68%, 27.773% { opacity: 1; }
  28.261%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-3 { animation: vmlWv3 61.57s linear infinite; }
@keyframes vmlWv3 {
  0%, 28.261% { opacity: 0; }
  28.667%, 39.873% { opacity: 1; }
  40.361%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-4 { animation: vmlWv4 61.57s linear infinite; }
@keyframes vmlWv4 {
  0%, 40.361% { opacity: 0; }
  40.767%, 44.567% { opacity: 1; }
  45.054%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-5 { animation: vmlWv5 61.57s linear infinite; }
@keyframes vmlWv5 {
  0%, 45.054% { opacity: 0; }
  45.46%, 51.843% { opacity: 1; }
  52.331%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-6 { animation: vmlWv6 61.57s linear infinite; }
@keyframes vmlWv6 {
  0%, 52.331% { opacity: 0; }
  52.737%, 54.962% { opacity: 1; }
  55.449%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-7 { animation: vmlWv7 61.57s linear infinite; }
@keyframes vmlWv7 {
  0%, 55.449% { opacity: 0; }
  55.855%, 61.101% { opacity: 1; }
  61.588%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-8 { animation: vmlWv8 61.57s linear infinite; }
@keyframes vmlWv8 {
  0%, 61.588% { opacity: 0; }
  61.994%, 64.772% { opacity: 1; }
  65.259%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-9 { animation: vmlWv9 61.57s linear infinite; }
@keyframes vmlWv9 {
  0%, 65.259% { opacity: 0; }
  65.665%, 74.679% { opacity: 1; }
  75.166%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-10 { animation: vmlWv10 61.57s linear infinite; }
@keyframes vmlWv10 {
  0%, 75.166% { opacity: 0; }
  75.573%, 79.373% { opacity: 1; }
  79.86%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ml .vwv-11 { animation: vmlWv11 61.57s linear infinite; }
@keyframes vmlWv11 {
  0%, 79.86% { opacity: 0; }
  80.266%, 96.264% { opacity: 1; }
  96.752%, 100% { opacity: 0; }
}

/* ── generated diary placement ── */

.cal-hd-vml0 { grid-column: 2; grid-row: 1; }
.cal-hd-vml1 { grid-column: 3; grid-row: 1; }
.cal-hd-vml2 { grid-column: 4; grid-row: 1; }
.cal-t-vml0 { grid-column: 1; grid-row: 2; }
.cal-t-vml1 { grid-column: 1; grid-row: 3; }
.cal-t-vml2 { grid-column: 1; grid-row: 4; }
.cal-t-vml3 { grid-column: 1; grid-row: 5; }
.cal-t-vml4 { grid-column: 1; grid-row: 6; }
.cal-t-vml5 { grid-column: 1; grid-row: 7; }
.cal-t-vml6 { grid-column: 1; grid-row: 8; }
.cal-t-vml7 { grid-column: 1; grid-row: 9; }
.cal-t-vml8 { grid-column: 1; grid-row: 10; }
.cal-t-vml9 { grid-column: 1; grid-row: 11; }
.cal-t-vml10 { grid-column: 1; grid-row: 12; }
.cb-vml0 { grid-column: 2; grid-row: 2 / 7; }
.cb-vml1 { grid-column: 2; grid-row: 10 / 11; }
.cb-vml2 { grid-column: 3; grid-row: 2 / 5; }
.cb-vml3 { grid-column: 3; grid-row: 5 / 6; }
.cb-vml4 { grid-column: 3; grid-row: 8 / 10; }
.cb-vml5 { grid-column: 3; grid-row: 11 / 12; }
.cb-vml6 { grid-column: 4; grid-row: 3 / 4; }
.cb-vml7 { grid-column: 4; grid-row: 5 / 6; }
.cb-vml8 { grid-column: 4; grid-row: 8 / 13; }
.cb-vml9 { grid-column: 4; grid-row: 9 / 10; }
.cb-vml10 { grid-column: 4; grid-row: 4 / 5; }
.cb-vml11 { grid-column: 4; grid-row: 6 / 7; }

/* ── generated status line ── */

.demo--voice .demo-pane--ml.playing .cs-vml0 { animation: vmlcs0 61.57s linear infinite; }
@keyframes vmlcs0 {
  0%, 18.71% { opacity: 0; }
  19.36%, 22.771% { opacity: 1; }
  23.42%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ml.playing .cs-vml1 { animation: vmlcs1 61.57s linear infinite; }
@keyframes vmlcs1 {
  0%, 22.771% { opacity: 0; }
  23.42%, 29.56% { opacity: 1; }
  30.21%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ml.playing .cs-vml2 { animation: vmlcs2 61.57s linear infinite; }
@keyframes vmlcs2 {
  0%, 29.56% { opacity: 0; }
  30.21%, 35.569% { opacity: 1; }
  36.219%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ml.playing .cs-vml3 { animation: vmlcs3 61.57s linear infinite; }
@keyframes vmlcs3 {
  0%, 35.569% { opacity: 0; }
  36.219%, 41.66% { opacity: 1; }
  42.31%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ml.playing .cs-vml4 { animation: vmlcs4 61.57s linear infinite; }
@keyframes vmlcs4 {
  0%, 41.66% { opacity: 0; }
  42.31%, 56.424% { opacity: 1; }
  57.073%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ml.playing .cs-vml5 { animation: vmlcs5 61.57s linear infinite; }
@keyframes vmlcs5 {
  0%, 56.424% { opacity: 0; }
  57.073%, 80.348% { opacity: 1; }
  80.997%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ml.playing .cs-vml6 { animation: vmlcs6 61.57s linear infinite; }
@keyframes vmlcs6 {
  0%, 80.348% { opacity: 0; }
  80.997%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--voice .demo-pane--ml.playing .ck-vml0 { animation: vmlck0 61.57s linear infinite; }
@keyframes vmlck0 {
  0%, 18.71% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  19.36%, 22.771% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  23.42%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ml.playing .ck-vml1 { animation: vmlck1 61.57s linear infinite; }
@keyframes vmlck1 {
  0%, 22.771% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  23.42%, 29.56% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  30.21%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ml.playing .ck-vml2 { animation: vmlck2 61.57s linear infinite; }
@keyframes vmlck2 {
  0%, 29.56% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  30.21%, 35.569% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  36.219%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ml.playing .ck-vml3 { animation: vmlck3 61.57s linear infinite; }
@keyframes vmlck3 {
  0%, 35.569% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  36.219%, 41.66% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  42.31%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ml.playing .ck-vml4 { animation: vmlck4 61.57s linear infinite; }
@keyframes vmlck4 {
  0%, 41.66% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  42.31%, 56.424% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  57.073%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ml.playing .ck-vml5 { animation: vmlck5 61.57s linear infinite; }
@keyframes vmlck5 {
  0%, 56.424% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  57.073%, 80.348% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  80.997%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ml.playing .ck-vml6 { animation: vmlck6 61.57s linear infinite; }
@keyframes vmlck6 {
  0%, 80.348% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  80.997%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--voice .demo-pane--ml.playing .cal-t-vml7 { animation: vmltl7 61.57s linear infinite; }
@keyframes vmltl7 {
  0%, 29.56% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  30.21%, 35.569% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  36.869%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ml.playing .cal-t-vml2 { animation: vmltl2 61.57s linear infinite; }
@keyframes vmltl2 {
  0%, 35.569% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  36.219%, 41.66% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  42.959%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ml.playing .cal-t-vml4 { animation: vmltl4 61.57s linear infinite; }
@keyframes vmltl4 {
  0%, 35.569% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  36.219%, 61.621% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  62.92%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ml.playing .cal-shift { animation: vmlshiftLit 61.57s linear infinite; }
@keyframes vmlshiftLit {
  0%, 18.71% { color: rgba(45,222,254,.7); text-shadow: none; }
  19.36%, 22.771% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  24.07%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--voice .demo-pane--ml.playing .cal-b--off    { animation: vmlcalOff    61.57s linear infinite; }
.demo--voice .demo-pane--ml.playing .cal-b--taken  { animation: vmlcalTaken  61.57s linear infinite; }
.demo--voice .demo-pane--ml.playing .cal-b--deny   { animation: vmlcalDeny   61.57s linear infinite; }
.demo--voice .demo-pane--ml.playing .cal-b--offer  { animation: vmlcalOffer  61.57s linear infinite; }
.demo--voice .demo-pane--ml.playing .cal-b--book   { animation: vmlcalBook   61.57s linear infinite; }
.demo--voice .demo-pane--ml.playing .cal-tick      { animation: vmlcalTick   61.57s linear infinite; }
@keyframes vmlcalOff {
  0%, 18.71% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  19.522%, 22.284% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  23.583%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vmlcalTaken {
  0%, 22.771% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  23.583%, 26.344% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  27.643%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes vmlcalDeny {
  0%, 29.56% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  30.21%, 33.133% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  34.432%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes vmlcalOffer {
  0%, 35.569% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  36.219%, 39.142% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  40.442%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vmlcalBook {
  0%, 35.569% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  36.219%, 39.142% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  41.66% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  42.31%, 45.233% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  56.424% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  57.236%, 59.997% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  61.296%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes vmlcalTick {
  0%, 56.424% { opacity: 0; transform: scale(.4); }
  57.154%, 100% { opacity: 1; transform: none; }
}

.demo--voice.playing .demo-pane--ur { animation: vurCycle 64.28s linear infinite; }
@keyframes vurCycle {
  0%, 96.889% { opacity: 1; }
  98.444%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vt-0 { animation: vurAt0 64.28s linear infinite; }
@keyframes vurAt0 {
  0%, 0.622% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.245%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-1 { animation: vurAt1 64.28s linear infinite; }
@keyframes vurAt1 {
  0%, 7.965% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  8.587%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-2 { animation: vurAt2 64.28s linear infinite; }
@keyframes vurAt2 {
  0%, 15.292% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  15.915%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-3 { animation: vurAt3 64.28s linear infinite; }
@keyframes vurAt3 {
  0%, 25.887% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  26.509%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-4 { animation: vurAt4 64.28s linear infinite; }
@keyframes vurAt4 {
  0%, 39.188% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  39.81%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-5 { animation: vurAt5 64.28s linear infinite; }
@keyframes vurAt5 {
  0%, 43.933% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  44.555%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-6 { animation: vurAt6 64.28s linear infinite; }
@keyframes vurAt6 {
  0%, 51.027% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  51.649%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-7 { animation: vurAt7 64.28s linear infinite; }
@keyframes vurAt7 {
  0%, 54.138% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  54.76%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-8 { animation: vurAt8 64.28s linear infinite; }
@keyframes vurAt8 {
  0%, 60.003% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  60.625%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-9 { animation: vurAt9 64.28s linear infinite; }
@keyframes vurAt9 {
  0%, 63.768% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  64.39%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-10 { animation: vurAt10 64.28s linear infinite; }
@keyframes vurAt10 {
  0%, 74.72% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  75.342%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vt-11 { animation: vurAt11 64.28s linear infinite; }
@keyframes vurAt11 {
  0%, 79.216% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  79.838%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--ur .vwv-0 { animation: vurWv0 64.28s linear infinite; }
@keyframes vurWv0 {
  0%, 0.622% { opacity: 0; }
  1.011%, 7.498% { opacity: 1; }
  7.965%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-1 { animation: vurWv1 64.28s linear infinite; }
@keyframes vurWv1 {
  0%, 7.965% { opacity: 0; }
  8.354%, 14.826% { opacity: 1; }
  15.292%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-2 { animation: vurWv2 64.28s linear infinite; }
@keyframes vurWv2 {
  0%, 15.292% { opacity: 0; }
  15.681%, 25.42% { opacity: 1; }
  25.887%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-3 { animation: vurWv3 64.28s linear infinite; }
@keyframes vurWv3 {
  0%, 25.887% { opacity: 0; }
  26.276%, 38.721% { opacity: 1; }
  39.188%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-4 { animation: vurWv4 64.28s linear infinite; }
@keyframes vurWv4 {
  0%, 39.188% { opacity: 0; }
  39.577%, 43.466% { opacity: 1; }
  43.933%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-5 { animation: vurWv5 64.28s linear infinite; }
@keyframes vurWv5 {
  0%, 43.933% { opacity: 0; }
  44.322%, 50.56% { opacity: 1; }
  51.027%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-6 { animation: vurWv6 64.28s linear infinite; }
@keyframes vurWv6 {
  0%, 51.027% { opacity: 0; }
  51.416%, 53.671% { opacity: 1; }
  54.138%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-7 { animation: vurWv7 64.28s linear infinite; }
@keyframes vurWv7 {
  0%, 54.138% { opacity: 0; }
  54.527%, 59.536% { opacity: 1; }
  60.003%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-8 { animation: vurWv8 64.28s linear infinite; }
@keyframes vurWv8 {
  0%, 60.003% { opacity: 0; }
  60.392%, 63.301% { opacity: 1; }
  63.768%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-9 { animation: vurWv9 64.28s linear infinite; }
@keyframes vurWv9 {
  0%, 63.768% { opacity: 0; }
  64.157%, 74.253% { opacity: 1; }
  74.72%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-10 { animation: vurWv10 64.28s linear infinite; }
@keyframes vurWv10 {
  0%, 74.72% { opacity: 0; }
  75.109%, 78.749% { opacity: 1; }
  79.216%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--ur .vwv-11 { animation: vurWv11 64.28s linear infinite; }
@keyframes vurWv11 {
  0%, 79.216% { opacity: 0; }
  79.605%, 96.422% { opacity: 1; }
  96.889%, 100% { opacity: 0; }
}

/* ── generated diary placement ── */

.cal-hd-vur0 { grid-column: 2; grid-row: 1; }
.cal-hd-vur1 { grid-column: 3; grid-row: 1; }
.cal-hd-vur2 { grid-column: 4; grid-row: 1; }
.cal-t-vur0 { grid-column: 1; grid-row: 2; }
.cal-t-vur1 { grid-column: 1; grid-row: 3; }
.cal-t-vur2 { grid-column: 1; grid-row: 4; }
.cal-t-vur3 { grid-column: 1; grid-row: 5; }
.cal-t-vur4 { grid-column: 1; grid-row: 6; }
.cal-t-vur5 { grid-column: 1; grid-row: 7; }
.cal-t-vur6 { grid-column: 1; grid-row: 8; }
.cal-t-vur7 { grid-column: 1; grid-row: 9; }
.cal-t-vur8 { grid-column: 1; grid-row: 10; }
.cal-t-vur9 { grid-column: 1; grid-row: 11; }
.cal-t-vur10 { grid-column: 1; grid-row: 12; }
.cb-vur0 { grid-column: 2; grid-row: 2 / 7; }
.cb-vur1 { grid-column: 2; grid-row: 10 / 11; }
.cb-vur2 { grid-column: 3; grid-row: 2 / 5; }
.cb-vur3 { grid-column: 3; grid-row: 5 / 6; }
.cb-vur4 { grid-column: 3; grid-row: 8 / 10; }
.cb-vur5 { grid-column: 3; grid-row: 11 / 12; }
.cb-vur6 { grid-column: 4; grid-row: 3 / 4; }
.cb-vur7 { grid-column: 4; grid-row: 5 / 6; }
.cb-vur8 { grid-column: 4; grid-row: 8 / 13; }
.cb-vur9 { grid-column: 4; grid-row: 9 / 10; }
.cb-vur10 { grid-column: 4; grid-row: 4 / 5; }
.cb-vur11 { grid-column: 4; grid-row: 6 / 7; }

/* ── generated status line ── */

.demo--voice .demo-pane--ur.playing .cs-vur0 { animation: vurcs0 64.28s linear infinite; }
@keyframes vurcs0 {
  0%, 17.626% { opacity: 0; }
  18.248%, 21.515% { opacity: 1; }
  22.138%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ur.playing .cs-vur1 { animation: vurcs1 64.28s linear infinite; }
@keyframes vurcs1 {
  0%, 21.515% { opacity: 0; }
  22.138%, 27.131% { opacity: 1; }
  27.754%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ur.playing .cs-vur2 { animation: vurcs2 64.28s linear infinite; }
@keyframes vurcs2 {
  0%, 27.131% { opacity: 0; }
  27.754%, 32.887% { opacity: 1; }
  33.51%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ur.playing .cs-vur3 { animation: vurcs3 64.28s linear infinite; }
@keyframes vurcs3 {
  0%, 32.887% { opacity: 0; }
  33.51%, 40.432% { opacity: 1; }
  41.055%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ur.playing .cs-vur4 { animation: vurcs4 64.28s linear infinite; }
@keyframes vurcs4 {
  0%, 40.432% { opacity: 0; }
  41.055%, 55.072% { opacity: 1; }
  55.694%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ur.playing .cs-vur5 { animation: vurcs5 64.28s linear infinite; }
@keyframes vurcs5 {
  0%, 55.072% { opacity: 0; }
  55.694%, 79.683% { opacity: 1; }
  80.305%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--ur.playing .cs-vur6 { animation: vurcs6 64.28s linear infinite; }
@keyframes vurcs6 {
  0%, 79.683% { opacity: 0; }
  80.305%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--voice .demo-pane--ur.playing .ck-vur0 { animation: vurck0 64.28s linear infinite; }
@keyframes vurck0 {
  0%, 17.626% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  18.248%, 21.515% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  22.138%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ur.playing .ck-vur1 { animation: vurck1 64.28s linear infinite; }
@keyframes vurck1 {
  0%, 21.515% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  22.138%, 27.131% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  27.754%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ur.playing .ck-vur2 { animation: vurck2 64.28s linear infinite; }
@keyframes vurck2 {
  0%, 27.131% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  27.754%, 32.887% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  33.51%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ur.playing .ck-vur3 { animation: vurck3 64.28s linear infinite; }
@keyframes vurck3 {
  0%, 32.887% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  33.51%, 40.432% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  41.055%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ur.playing .ck-vur4 { animation: vurck4 64.28s linear infinite; }
@keyframes vurck4 {
  0%, 40.432% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  41.055%, 55.072% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  55.694%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ur.playing .ck-vur5 { animation: vurck5 64.28s linear infinite; }
@keyframes vurck5 {
  0%, 55.072% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  55.694%, 79.683% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  80.305%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--ur.playing .ck-vur6 { animation: vurck6 64.28s linear infinite; }
@keyframes vurck6 {
  0%, 79.683% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  80.305%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--voice .demo-pane--ur.playing .cal-t-vur7 { animation: vurtl7 64.28s linear infinite; }
@keyframes vurtl7 {
  0%, 27.131% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  27.754%, 32.887% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  34.132%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ur.playing .cal-t-vur2 { animation: vurtl2 64.28s linear infinite; }
@keyframes vurtl2 {
  0%, 32.887% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  33.51%, 40.432% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  41.677%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ur.playing .cal-t-vur4 { animation: vurtl4 64.28s linear infinite; }
@keyframes vurtl4 {
  0%, 32.887% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  33.51%, 60.05% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  61.294%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--ur.playing .cal-shift { animation: vurshiftLit 64.28s linear infinite; }
@keyframes vurshiftLit {
  0%, 17.626% { color: rgba(45,222,254,.7); text-shadow: none; }
  18.248%, 21.515% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  22.76%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--voice .demo-pane--ur.playing .cal-b--off    { animation: vurcalOff    64.28s linear infinite; }
.demo--voice .demo-pane--ur.playing .cal-b--taken  { animation: vurcalTaken  64.28s linear infinite; }
.demo--voice .demo-pane--ur.playing .cal-b--deny   { animation: vurcalDeny   64.28s linear infinite; }
.demo--voice .demo-pane--ur.playing .cal-b--offer  { animation: vurcalOffer  64.28s linear infinite; }
.demo--voice .demo-pane--ur.playing .cal-b--book   { animation: vurcalBook   64.28s linear infinite; }
.demo--voice .demo-pane--ur.playing .cal-tick      { animation: vurcalTick   64.28s linear infinite; }
@keyframes vurcalOff {
  0%, 17.626% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  18.404%, 21.049% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  22.293%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vurcalTaken {
  0%, 21.515% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  22.293%, 24.938% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  26.182%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes vurcalDeny {
  0%, 27.131% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  27.754%, 30.554% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  31.798%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes vurcalOffer {
  0%, 32.887% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  33.51%, 36.31% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  37.554%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vurcalBook {
  0%, 32.887% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  33.51%, 36.31% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  40.432% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  41.055%, 43.855% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  55.072% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  55.849%, 58.494% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  59.739%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes vurcalTick {
  0%, 55.072% { opacity: 0; transform: scale(.4); }
  55.772%, 100% { opacity: 1; transform: none; }
}

.demo--voice.playing .demo-pane--tl { animation: vtlCycle 75.99s linear infinite; }
@keyframes vtlCycle {
  0%, 97.368% { opacity: 1; }
  98.684%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vt-0 { animation: vtlAt0 75.99s linear infinite; }
@keyframes vtlAt0 {
  0%, 0.526% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  1.053%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-1 { animation: vtlAt1 75.99s linear infinite; }
@keyframes vtlAt1 {
  0%, 8.106% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  8.633%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-2 { animation: vtlAt2 75.99s linear infinite; }
@keyframes vtlAt2 {
  0%, 15.581% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  16.107%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-3 { animation: vtlAt3 75.99s linear infinite; }
@keyframes vtlAt3 {
  0%, 27.188% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  27.714%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-4 { animation: vtlAt4 75.99s linear infinite; }
@keyframes vtlAt4 {
  0%, 41.505% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  42.032%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-5 { animation: vtlAt5 75.99s linear infinite; }
@keyframes vtlAt5 {
  0%, 45.519% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  46.046%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-6 { animation: vtlAt6 75.99s linear infinite; }
@keyframes vtlAt6 {
  0%, 51.612% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  52.138%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-7 { animation: vtlAt7 75.99s linear infinite; }
@keyframes vtlAt7 {
  0%, 55.007% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  55.534%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-8 { animation: vtlAt8 75.99s linear infinite; }
@keyframes vtlAt8 {
  0%, 61.653% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  62.179%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-9 { animation: vtlAt9 75.99s linear infinite; }
@keyframes vtlAt9 {
  0%, 65.456% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  65.982%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-10 { animation: vtlAt10 75.99s linear infinite; }
@keyframes vtlAt10 {
  0%, 78.089% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  78.616%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vt-11 { animation: vtlAt11 75.99s linear infinite; }
@keyframes vtlAt11 {
  0%, 82.511% { opacity: 0; transform: translateY(9px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  83.037%, 100% { opacity: 1; transform: none; max-height: 340px; margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
}
.demo--voice.playing .demo-pane--tl .vwv-0 { animation: vtlWv0 75.99s linear infinite; }
@keyframes vtlWv0 {
  0%, 0.526% { opacity: 0; }
  0.855%, 7.712% { opacity: 1; }
  8.106%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-1 { animation: vtlWv1 75.99s linear infinite; }
@keyframes vtlWv1 {
  0%, 8.106% { opacity: 0; }
  8.435%, 15.186% { opacity: 1; }
  15.581%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-2 { animation: vtlWv2 75.99s linear infinite; }
@keyframes vtlWv2 {
  0%, 15.581% { opacity: 0; }
  15.91%, 26.793% { opacity: 1; }
  27.188%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-3 { animation: vtlWv3 75.99s linear infinite; }
@keyframes vtlWv3 {
  0%, 27.188% { opacity: 0; }
  27.517%, 41.111% { opacity: 1; }
  41.505%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-4 { animation: vtlWv4 75.99s linear infinite; }
@keyframes vtlWv4 {
  0%, 41.505% { opacity: 0; }
  41.834%, 45.124% { opacity: 1; }
  45.519%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-5 { animation: vtlWv5 75.99s linear infinite; }
@keyframes vtlWv5 {
  0%, 45.519% { opacity: 0; }
  45.848%, 51.217% { opacity: 1; }
  51.612%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-6 { animation: vtlWv6 75.99s linear infinite; }
@keyframes vtlWv6 {
  0%, 51.612% { opacity: 0; }
  51.941%, 54.612% { opacity: 1; }
  55.007%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-7 { animation: vtlWv7 75.99s linear infinite; }
@keyframes vtlWv7 {
  0%, 55.007% { opacity: 0; }
  55.336%, 61.258% { opacity: 1; }
  61.653%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-8 { animation: vtlWv8 75.99s linear infinite; }
@keyframes vtlWv8 {
  0%, 61.653% { opacity: 0; }
  61.982%, 65.061% { opacity: 1; }
  65.456%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-9 { animation: vtlWv9 75.99s linear infinite; }
@keyframes vtlWv9 {
  0%, 65.456% { opacity: 0; }
  65.785%, 77.694% { opacity: 1; }
  78.089%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-10 { animation: vtlWv10 75.99s linear infinite; }
@keyframes vtlWv10 {
  0%, 78.089% { opacity: 0; }
  78.418%, 82.116% { opacity: 1; }
  82.511%, 100% { opacity: 0; }
}
.demo--voice.playing .demo-pane--tl .vwv-11 { animation: vtlWv11 75.99s linear infinite; }
@keyframes vtlWv11 {
  0%, 82.511% { opacity: 0; }
  82.84%, 96.973% { opacity: 1; }
  97.368%, 100% { opacity: 0; }
}

/* ── generated diary placement ── */

.cal-hd-vtl0 { grid-column: 2; grid-row: 1; }
.cal-hd-vtl1 { grid-column: 3; grid-row: 1; }
.cal-hd-vtl2 { grid-column: 4; grid-row: 1; }
.cal-t-vtl0 { grid-column: 1; grid-row: 2; }
.cal-t-vtl1 { grid-column: 1; grid-row: 3; }
.cal-t-vtl2 { grid-column: 1; grid-row: 4; }
.cal-t-vtl3 { grid-column: 1; grid-row: 5; }
.cal-t-vtl4 { grid-column: 1; grid-row: 6; }
.cal-t-vtl5 { grid-column: 1; grid-row: 7; }
.cal-t-vtl6 { grid-column: 1; grid-row: 8; }
.cal-t-vtl7 { grid-column: 1; grid-row: 9; }
.cal-t-vtl8 { grid-column: 1; grid-row: 10; }
.cal-t-vtl9 { grid-column: 1; grid-row: 11; }
.cal-t-vtl10 { grid-column: 1; grid-row: 12; }
.cb-vtl0 { grid-column: 2; grid-row: 2 / 7; }
.cb-vtl1 { grid-column: 2; grid-row: 10 / 11; }
.cb-vtl2 { grid-column: 3; grid-row: 2 / 5; }
.cb-vtl3 { grid-column: 3; grid-row: 5 / 6; }
.cb-vtl4 { grid-column: 3; grid-row: 8 / 10; }
.cb-vtl5 { grid-column: 3; grid-row: 11 / 12; }
.cb-vtl6 { grid-column: 4; grid-row: 3 / 4; }
.cb-vtl7 { grid-column: 4; grid-row: 5 / 6; }
.cb-vtl8 { grid-column: 4; grid-row: 8 / 13; }
.cb-vtl9 { grid-column: 4; grid-row: 9 / 10; }
.cb-vtl10 { grid-column: 4; grid-row: 4 / 5; }
.cb-vtl11 { grid-column: 4; grid-row: 6 / 7; }

/* ── generated status line ── */

.demo--voice .demo-pane--tl.playing .cs-vtl0 { animation: vtlcs0 75.99s linear infinite; }
@keyframes vtlcs0 {
  0%, 17.555% { opacity: 0; }
  18.081%, 20.845% { opacity: 1; }
  21.371%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--tl.playing .cs-vtl1 { animation: vtlcs1 75.99s linear infinite; }
@keyframes vtlcs1 {
  0%, 20.845% { opacity: 0; }
  21.371%, 28.241% { opacity: 1; }
  28.767%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--tl.playing .cs-vtl2 { animation: vtlcs2 75.99s linear infinite; }
@keyframes vtlcs2 {
  0%, 28.241% { opacity: 0; }
  28.767%, 33.11% { opacity: 1; }
  33.636%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--tl.playing .cs-vtl3 { animation: vtlcs3 75.99s linear infinite; }
@keyframes vtlcs3 {
  0%, 33.11% { opacity: 0; }
  33.636%, 42.558% { opacity: 1; }
  43.085%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--tl.playing .cs-vtl4 { animation: vtlcs4 75.99s linear infinite; }
@keyframes vtlcs4 {
  0%, 42.558% { opacity: 0; }
  43.085%, 55.797% { opacity: 1; }
  56.323%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--tl.playing .cs-vtl5 { animation: vtlcs5 75.99s linear infinite; }
@keyframes vtlcs5 {
  0%, 55.797% { opacity: 0; }
  56.323%, 82.906% { opacity: 1; }
  83.432%, 100% { opacity: 0; }
}
.demo--voice .demo-pane--tl.playing .cs-vtl6 { animation: vtlcs6 75.99s linear infinite; }
@keyframes vtlcs6 {
  0%, 82.906% { opacity: 0; }
  83.432%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--voice .demo-pane--tl.playing .ck-vtl0 { animation: vtlck0 75.99s linear infinite; }
@keyframes vtlck0 {
  0%, 17.555% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  18.081%, 20.845% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  21.371%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--tl.playing .ck-vtl1 { animation: vtlck1 75.99s linear infinite; }
@keyframes vtlck1 {
  0%, 20.845% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  21.371%, 28.241% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  28.767%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--tl.playing .ck-vtl2 { animation: vtlck2 75.99s linear infinite; }
@keyframes vtlck2 {
  0%, 28.241% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  28.767%, 33.11% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  33.636%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--tl.playing .ck-vtl3 { animation: vtlck3 75.99s linear infinite; }
@keyframes vtlck3 {
  0%, 33.11% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  33.636%, 42.558% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  43.085%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--tl.playing .ck-vtl4 { animation: vtlck4 75.99s linear infinite; }
@keyframes vtlck4 {
  0%, 42.558% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  43.085%, 55.797% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  56.323%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--tl.playing .ck-vtl5 { animation: vtlck5 75.99s linear infinite; }
@keyframes vtlck5 {
  0%, 55.797% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  56.323%, 82.906% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  83.432%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .9; }
}
.demo--voice .demo-pane--tl.playing .ck-vtl6 { animation: vtlck6 75.99s linear infinite; }
@keyframes vtlck6 {
  0%, 82.906% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  83.432%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated hour-label highlights ── */

.demo--voice .demo-pane--tl.playing .cal-t-vtl7 { animation: vtltl7 75.99s linear infinite; }
@keyframes vtltl7 {
  0%, 28.241% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  28.767%, 33.11% { --t-bg: rgba(255,65,169,.20); --t-col: rgb(255,65,169); --t-w: 700; opacity: 1; }
  34.162%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--tl.playing .cal-t-vtl2 { animation: vtltl2 75.99s linear infinite; }
@keyframes vtltl2 {
  0%, 33.11% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  33.636%, 42.558% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  43.611%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--tl.playing .cal-t-vtl4 { animation: vtltl4 75.99s linear infinite; }
@keyframes vtltl4 {
  0%, 33.11% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
  33.636%, 60.008% { --t-bg: rgba(45,222,254,.20); --t-col: rgb(45,222,254); --t-w: 700; opacity: 1; }
  61.061%, 100% { --t-bg: transparent; --t-col: var(--faint); --t-w: 500; opacity: .7; }
}
.demo--voice .demo-pane--tl.playing .cal-shift { animation: vtlshiftLit 75.99s linear infinite; }
@keyframes vtlshiftLit {
  0%, 17.555% { color: rgba(45,222,254,.7); text-shadow: none; }
  18.081%, 20.845% { color: #9BEEFF; text-shadow: 0 0 10px rgba(45,222,254,.75); }
  21.898%, 100% { color: rgba(45,222,254,.7); text-shadow: none; }
}

/* ── generated diary playback ── */

.demo--voice .demo-pane--tl.playing .cal-b--off    { animation: vtlcalOff    75.99s linear infinite; }
.demo--voice .demo-pane--tl.playing .cal-b--taken  { animation: vtlcalTaken  75.99s linear infinite; }
.demo--voice .demo-pane--tl.playing .cal-b--deny   { animation: vtlcalDeny   75.99s linear infinite; }
.demo--voice .demo-pane--tl.playing .cal-b--offer  { animation: vtlcalOffer  75.99s linear infinite; }
.demo--voice .demo-pane--tl.playing .cal-b--book   { animation: vtlcalBook   75.99s linear infinite; }
.demo--voice .demo-pane--tl.playing .cal-tick      { animation: vtlcalTick   75.99s linear infinite; }
@keyframes vtlcalOff {
  0%, 17.555% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  18.213%, 20.45% { opacity: 1; box-shadow: 0 0 0 3px rgba(45,222,254,.22); }
  21.503%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vtlcalTaken {
  0%, 20.845% { opacity: 0; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
  21.503%, 23.74% { opacity: 1; box-shadow: 0 0 0 3px rgba(150,178,255,.30); }
  24.793%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(150,178,255,0); }
}
@keyframes vtlcalDeny {
  0%, 28.241% { opacity: 0; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
  28.767%, 31.136% { opacity: 1; box-shadow: 0 0 0 6px rgba(255,65,169,.32); }
  32.188%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,65,169,0); }
}
@keyframes vtlcalOffer {
  0%, 33.11% { opacity: 0; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
  33.636%, 36.005% { opacity: 1; box-shadow: 0 0 0 6px rgba(45,222,254,.28); }
  37.058%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(45,222,254,0); }
}
@keyframes vtlcalBook {
  0%, 33.11% { opacity: 0; background: transparent; border-color: rgba(45,222,254,.55); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  33.636%, 36.005% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 6px rgba(45,222,254,.28); color: #EAF0FF; }
  42.558% { opacity: 1; background: rgba(45,222,254,.11); border-color: rgba(45,222,254,.6); box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #EAF0FF; }
  43.085%, 45.453% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 7px rgba(45,222,254,.26); color: #fff; }
  55.797% { opacity: 1; background: rgba(45,222,254,.18); border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #fff; }
  56.455%, 58.692% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 8px rgba(45,222,254,.30); color: #06121B; }
  59.745%, 100% { opacity: 1; background: #2DDEFE; border-color: #2DDEFE; box-shadow: 0 0 0 0 rgba(45,222,254,0); color: #06121B; }
}
@keyframes vtlcalTick {
  0%, 55.797% { opacity: 0; transform: scale(.4); }
  56.389%, 100% { opacity: 1; transform: none; }
}

.demo--voice.playing #av-en:checked ~ .vprog i { animation: venProg 69.38s linear infinite; }
@keyframes venProg { 0% { transform: scaleX(0); } 94.235%, 100% { transform: scaleX(1); } }
.demo--voice.playing #av-ar:checked ~ .vprog i { animation: varProg 75.36s linear infinite; }
@keyframes varProg { 0% { transform: scaleX(0); } 94.692%, 100% { transform: scaleX(1); } }
.demo--voice.playing #av-hi:checked ~ .vprog i { animation: vhiProg 63.11s linear infinite; }
@keyframes vhiProg { 0% { transform: scaleX(0); } 93.662%, 100% { transform: scaleX(1); } }
.demo--voice.playing #av-ml:checked ~ .vprog i { animation: vmlProg 61.57s linear infinite; }
@keyframes vmlProg { 0% { transform: scaleX(0); } 93.503%, 100% { transform: scaleX(1); } }
.demo--voice.playing #av-ur:checked ~ .vprog i { animation: vurProg 64.28s linear infinite; }
@keyframes vurProg { 0% { transform: scaleX(0); } 93.777%, 100% { transform: scaleX(1); } }
.demo--voice.playing #av-tl:checked ~ .vprog i { animation: vtlProg 75.99s linear infinite; }
@keyframes vtlProg { 0% { transform: scaleX(0); } 94.736%, 100% { transform: scaleX(1); } }

/* ── generated voice language switching ── */

#av-en:checked ~ .demo-pane--en,
#av-ar:checked ~ .demo-pane--ar,
#av-hi:checked ~ .demo-pane--hi,
#av-ml:checked ~ .demo-pane--ml,
#av-ur:checked ~ .demo-pane--ur,
#av-tl:checked ~ .demo-pane--tl { display: block; }
@media (min-width: 900px) {
  #av-en:checked ~ .demo-pane--en,
  #av-ar:checked ~ .demo-pane--ar,
  #av-hi:checked ~ .demo-pane--hi,
  #av-ml:checked ~ .demo-pane--ml,
  #av-ur:checked ~ .demo-pane--ur,
  #av-tl:checked ~ .demo-pane--tl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 22px; align-items: start;
  }
}
#av-en:checked ~ .demo-tabs .demo-tab--en,
#av-ar:checked ~ .demo-tabs .demo-tab--ar,
#av-hi:checked ~ .demo-tabs .demo-tab--hi,
#av-ml:checked ~ .demo-tabs .demo-tab--ml,
#av-ur:checked ~ .demo-tabs .demo-tab--ur,
#av-tl:checked ~ .demo-tabs .demo-tab--tl { color: #fff; border-color: rgba(45,222,254,.55); background: rgba(45,222,254,.10); }
#av-en:focus-visible ~ .demo-tabs .demo-tab--en,
#av-ar:focus-visible ~ .demo-tabs .demo-tab--ar,
#av-hi:focus-visible ~ .demo-tabs .demo-tab--hi,
#av-ml:focus-visible ~ .demo-tabs .demo-tab--ml,
#av-ur:focus-visible ~ .demo-tabs .demo-tab--ur,
#av-tl:focus-visible ~ .demo-tabs .demo-tab--tl { outline: 2px solid #2DDEFE; outline-offset: 2px; }

/* ── generated admin: one night in the back office ── */

.demo--admin.playing .awin { animation: adCycle 69s linear infinite; }
@keyframes adCycle { 0%, 96.522% { opacity: 1; } 98.261%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad0 { animation: adCl0 69s linear infinite; }
@keyframes adCl0 { 0%, 1.594% { opacity: 0; } 1.884%, 2.435% { opacity: 1; } 2.725%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad1 { animation: adCl1 69s linear infinite; }
@keyframes adCl1 { 0%, 2.435% { opacity: 0; } 2.725%, 3.275% { opacity: 1; } 3.565%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad2 { animation: adCl2 69s linear infinite; }
@keyframes adCl2 { 0%, 3.275% { opacity: 0; } 3.565%, 4.116% { opacity: 1; } 4.406%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad3 { animation: adCl3 69s linear infinite; }
@keyframes adCl3 { 0%, 4.116% { opacity: 0; } 4.406%, 4.957% { opacity: 1; } 5.246%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad4 { animation: adCl4 69s linear infinite; }
@keyframes adCl4 { 0%, 4.957% { opacity: 0; } 5.246%, 5.797% { opacity: 1; } 6.087%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad5 { animation: adCl5 69s linear infinite; }
@keyframes adCl5 { 0%, 5.797% { opacity: 0; } 6.087%, 6.638% { opacity: 1; } 6.928%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad6 { animation: adCl6 69s linear infinite; }
@keyframes adCl6 { 0%, 6.638% { opacity: 0; } 6.928%, 7.478% { opacity: 1; } 7.768%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad7 { animation: adCl7 69s linear infinite; }
@keyframes adCl7 { 0%, 7.478% { opacity: 0; } 7.768%, 8.319% { opacity: 1; } 8.609%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad8 { animation: adCl8 69s linear infinite; }
@keyframes adCl8 { 0%, 8.319% { opacity: 0; } 8.609%, 9.159% { opacity: 1; } 9.449%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad9 { animation: adCl9 69s linear infinite; }
@keyframes adCl9 { 0%, 9.159% { opacity: 0; } 9.449%, 10.0% { opacity: 1; } 10.29%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad10 { animation: adCl10 69s linear infinite; }
@keyframes adCl10 { 0%, 10.0% { opacity: 0; } 10.29%, 10.841% { opacity: 1; } 11.13%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad11 { animation: adCl11 69s linear infinite; }
@keyframes adCl11 { 0%, 10.841% { opacity: 0; } 11.13%, 11.681% { opacity: 1; } 11.971%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad12 { animation: adCl12 69s linear infinite; }
@keyframes adCl12 { 0%, 11.681% { opacity: 0; } 11.971%, 12.522% { opacity: 1; } 12.812%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad13 { animation: adCl13 69s linear infinite; }
@keyframes adCl13 { 0%, 12.522% { opacity: 0; } 12.812%, 26.087% { opacity: 1; } 26.377%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad14 { animation: adCl14 69s linear infinite; }
@keyframes adCl14 { 0%, 26.087% { opacity: 0; } 26.377%, 35.362% { opacity: 1; } 35.652%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad15 { animation: adCl15 69s linear infinite; }
@keyframes adCl15 { 0%, 35.362% { opacity: 0; } 35.652%, 41.739% { opacity: 1; } 42.029%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad16 { animation: adCl16 69s linear infinite; }
@keyframes adCl16 { 0%, 41.739% { opacity: 0; } 42.029%, 49.565% { opacity: 1; } 49.855%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad17 { animation: adCl17 69s linear infinite; }
@keyframes adCl17 { 0%, 49.565% { opacity: 0; } 49.855%, 57.681% { opacity: 1; } 57.971%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad18 { animation: adCl18 69s linear infinite; }
@keyframes adCl18 { 0%, 57.681% { opacity: 0; } 57.971%, 62.899% { opacity: 1; } 63.188%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad19 { animation: adCl19 69s linear infinite; }
@keyframes adCl19 { 0%, 62.899% { opacity: 0; } 63.188%, 70.725% { opacity: 1; } 71.014%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad20 { animation: adCl20 69s linear infinite; }
@keyframes adCl20 { 0%, 70.725% { opacity: 0; } 71.014%, 79.13% { opacity: 1; } 79.42%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad21 { animation: adCl21 69s linear infinite; }
@keyframes adCl21 { 0%, 79.13% { opacity: 0; } 79.42%, 86.087% { opacity: 1; } 86.377%, 100% { opacity: 0; } }
.demo--admin.playing .acl-ad22 { animation: adCl22 69s linear infinite; }
@keyframes adCl22 { 0%, 86.087% { opacity: 0; } 86.522%, 100% { opacity: 1; } }
.demo--admin.playing .sc-adinbox { animation: adSinbox 69s linear infinite; }
@keyframes adSinbox {
  0% { opacity: 0; visibility: hidden; }
  0.725% { opacity: 0; visibility: hidden; }
  1.159%, 25.652% { opacity: 1; visibility: visible; }
  26.087% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-adreply { animation: adSreply 69s linear infinite; }
@keyframes adSreply {
  0% { opacity: 0; visibility: hidden; }
  25.652% { opacity: 0; visibility: hidden; }
  26.087%, 34.928% { opacity: 1; visibility: visible; }
  35.362% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-adneeds { animation: adSneeds 69s linear infinite; }
@keyframes adSneeds {
  0% { opacity: 0; visibility: hidden; }
  34.928% { opacity: 0; visibility: hidden; }
  35.362%, 41.304% { opacity: 1; visibility: visible; }
  41.739% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-addoc { animation: adSdoc 69s linear infinite; }
@keyframes adSdoc {
  0% { opacity: 0; visibility: hidden; }
  41.304% { opacity: 0; visibility: hidden; }
  41.739%, 49.13% { opacity: 1; visibility: visible; }
  49.565% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-adcal { animation: adScal 69s linear infinite; }
@keyframes adScal {
  0% { opacity: 0; visibility: hidden; }
  49.13% { opacity: 0; visibility: hidden; }
  49.565%, 62.464% { opacity: 1; visibility: visible; }
  62.899% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-adinv { animation: adSinv 69s linear infinite; }
@keyframes adSinv {
  0% { opacity: 0; visibility: hidden; }
  62.464% { opacity: 0; visibility: hidden; }
  62.899%, 70.29% { opacity: 1; visibility: visible; }
  70.725% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-admeet { animation: adSmeet 69s linear infinite; }
@keyframes adSmeet {
  0% { opacity: 0; visibility: hidden; }
  70.29% { opacity: 0; visibility: hidden; }
  70.725%, 78.696% { opacity: 1; visibility: visible; }
  79.13% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-adsync { animation: adSsync 69s linear infinite; }
@keyframes adSsync {
  0% { opacity: 0; visibility: hidden; }
  78.696% { opacity: 0; visibility: hidden; }
  79.13%, 85.652% { opacity: 1; visibility: visible; }
  86.087% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .sc-adbrief { animation: adSbrief 69s linear infinite; }
@keyframes adSbrief {
  0% { opacity: 0; visibility: hidden; }
  85.652% { opacity: 0; visibility: hidden; }
  86.087%, 93.478% { opacity: 1; visibility: visible; }
  93.913% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--admin.playing .an-adinbox { animation: adNinbox 69s linear infinite; }
@keyframes adNinbox {
  0% { --nv: 0; }
  0.87% { --nv: 0; }
  1.159%, 41.449% { --nv: 1; }
  41.739% { --nv: 0; }
  85.797% { --nv: 0; }
  86.087%, 93.623% { --nv: 1; }
  93.913% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--admin.playing .an-adcal { animation: adNcal 69s linear infinite; }
@keyframes adNcal {
  0% { --nv: 0; }
  49.275% { --nv: 0; }
  49.565%, 62.609% { --nv: 1; }
  62.899% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--admin.playing .an-adinv { animation: adNinv 69s linear infinite; }
@keyframes adNinv {
  0% { --nv: 0; }
  62.609% { --nv: 0; }
  62.899%, 70.435% { --nv: 1; }
  70.725% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--admin.playing .an-addoc { animation: adNdoc 69s linear infinite; }
@keyframes adNdoc {
  0% { --nv: 0; }
  41.449% { --nv: 0; }
  41.739%, 49.275% { --nv: 1; }
  49.565% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--admin.playing .an-admeet { animation: adNmeet 69s linear infinite; }
@keyframes adNmeet {
  0% { --nv: 0; }
  70.435% { --nv: 0; }
  70.725%, 78.841% { --nv: 1; }
  79.13% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--admin.playing .an-adsync { animation: adNsync 69s linear infinite; }
@keyframes adNsync {
  0% { --nv: 0; }
  78.841% { --nv: 0; }
  79.13%, 85.797% { --nv: 1; }
  86.087% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--admin.playing .am-ad0 { animation: adAm0 69s linear infinite, adHl0 69s linear infinite; }
@keyframes adAm0 {
  0%, 1.594% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  2.0%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad1 { animation: adAm1 69s linear infinite, adHl1 69s linear infinite; }
@keyframes adAm1 {
  0%, 2.435% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  2.841%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad2 { animation: adAm2 69s linear infinite, adHl2 69s linear infinite; }
@keyframes adAm2 {
  0%, 3.275% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  3.681%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad3 { animation: adAm3 69s linear infinite, adHl3 69s linear infinite; }
@keyframes adAm3 {
  0%, 4.116% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  4.522%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad4 { animation: adAm4 69s linear infinite, adHl4 69s linear infinite; }
@keyframes adAm4 {
  0%, 4.957% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  5.362%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad5 { animation: adAm5 69s linear infinite, adHl5 69s linear infinite; }
@keyframes adAm5 {
  0%, 5.797% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  6.203%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad6 { animation: adAm6 69s linear infinite, adHl6 69s linear infinite; }
@keyframes adAm6 {
  0%, 6.638% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  7.043%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad7 { animation: adAm7 69s linear infinite, adHl7 69s linear infinite; }
@keyframes adAm7 {
  0%, 7.478% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  7.884%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad8 { animation: adAm8 69s linear infinite, adHl8 69s linear infinite; }
@keyframes adAm8 {
  0%, 8.319% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  8.725%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad9 { animation: adAm9 69s linear infinite, adHl9 69s linear infinite; }
@keyframes adAm9 {
  0%, 9.159% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  9.565%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad10 { animation: adAm10 69s linear infinite, adHl10 69s linear infinite; }
@keyframes adAm10 {
  0%, 10.0% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  10.406%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad11 { animation: adAm11 69s linear infinite, adHl11 69s linear infinite; }
@keyframes adAm11 {
  0%, 10.841% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  11.246%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad12 { animation: adAm12 69s linear infinite, adHl12 69s linear infinite; }
@keyframes adAm12 {
  0%, 11.681% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  12.087%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .am-ad13 { animation: adAm13 69s linear infinite, adHl13 69s linear infinite; }
@keyframes adAm13 {
  0%, 12.522% { opacity: 0; transform: translateY(7px); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; }
  12.928%, 100% { opacity: 1; transform: none; max-height: 60px; margin-top: 3px; padding-top: 6px; padding-bottom: 6px; }
}
.demo--admin.playing .av-ad0 { animation: adAv0 69s linear infinite; }
@keyframes adAv0 { 0%, 14.783% { opacity: 0; transform: scale(.8); } 15.13%, 100% { opacity: 1; transform: none; } }
@keyframes adHl0 {
  0%, 14.565% { --mrow: 0; }
  14.928%, 16.522% { --mrow: 1; }
  17.536%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad1 { animation: adAv1 69s linear infinite; }
@keyframes adAv1 { 0%, 15.536% { opacity: 0; transform: scale(.8); } 15.884%, 100% { opacity: 1; transform: none; } }
@keyframes adHl1 {
  0%, 15.319% { --mrow: 0; }
  15.681%, 17.275% { --mrow: 1; }
  18.29%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad2 { animation: adAv2 69s linear infinite; }
@keyframes adAv2 { 0%, 16.29% { opacity: 0; transform: scale(.8); } 16.638%, 100% { opacity: 1; transform: none; } }
@keyframes adHl2 {
  0%, 16.072% { --mrow: 0; }
  16.435%, 18.029% { --mrow: 1; }
  19.043%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad3 { animation: adAv3 69s linear infinite; }
@keyframes adAv3 { 0%, 17.043% { opacity: 0; transform: scale(.8); } 17.391%, 100% { opacity: 1; transform: none; } }
@keyframes adHl3 {
  0%, 16.826% { --mrow: 0; }
  17.188%, 18.783% { --mrow: 1; }
  19.797%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad4 { animation: adAv4 69s linear infinite; }
@keyframes adAv4 { 0%, 17.797% { opacity: 0; transform: scale(.8); } 18.145%, 100% { opacity: 1; transform: none; } }
@keyframes adHl4 {
  0%, 17.58% { --mrow: 0; }
  17.942%, 19.536% { --mrow: 1; }
  20.551%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad5 { animation: adAv5 69s linear infinite; }
@keyframes adAv5 { 0%, 18.551% { opacity: 0; transform: scale(.8); } 18.899%, 100% { opacity: 1; transform: none; } }
@keyframes adHl5 {
  0%, 18.333% { --mrow: 0; }
  18.696%, 20.29% { --mrow: 1; }
  21.304%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad6 { animation: adAv6 69s linear infinite; }
@keyframes adAv6 { 0%, 19.304% { opacity: 0; transform: scale(.8); } 19.652%, 100% { opacity: 1; transform: none; } }
@keyframes adHl6 {
  0%, 19.087% { --mrow: 0; }
  19.449%, 21.043% { --mrow: 1; }
  22.058%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad7 { animation: adAv7 69s linear infinite; }
@keyframes adAv7 { 0%, 20.058% { opacity: 0; transform: scale(.8); } 20.406%, 100% { opacity: 1; transform: none; } }
@keyframes adHl7 {
  0%, 19.841% { --mrow: 0; }
  20.203%, 21.797% { --mrow: 1; }
  22.812%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad8 { animation: adAv8 69s linear infinite; }
@keyframes adAv8 { 0%, 20.812% { opacity: 0; transform: scale(.8); } 21.159%, 100% { opacity: 1; transform: none; } }
@keyframes adHl8 {
  0%, 20.594% { --mrow: 0; }
  20.957%, 22.551% { --mrow: 1; }
  23.565%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad9 { animation: adAv9 69s linear infinite; }
@keyframes adAv9 { 0%, 21.565% { opacity: 0; transform: scale(.8); } 21.913%, 100% { opacity: 1; transform: none; } }
@keyframes adHl9 {
  0%, 21.348% { --mrow: 0; }
  21.71%, 23.304% { --mrow: 1; }
  24.319%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad10 { animation: adAv10 69s linear infinite; }
@keyframes adAv10 { 0%, 22.319% { opacity: 0; transform: scale(.8); } 22.667%, 100% { opacity: 1; transform: none; } }
@keyframes adHl10 {
  0%, 22.101% { --mrow: 0; }
  22.464%, 24.058% { --mrow: 1; }
  25.072%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad11 { animation: adAv11 69s linear infinite; }
@keyframes adAv11 { 0%, 23.072% { opacity: 0; transform: scale(.8); } 23.42%, 100% { opacity: 1; transform: none; } }
@keyframes adHl11 {
  0%, 22.855% { --mrow: 0; }
  23.217%, 24.812% { --mrow: 1; }
  25.826%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad12 { animation: adAv12 69s linear infinite; }
@keyframes adAv12 { 0%, 23.826% { opacity: 0; transform: scale(.8); } 24.174%, 100% { opacity: 1; transform: none; } }
@keyframes adHl12 {
  0%, 23.609% { --mrow: 0; }
  23.971%, 25.565% { --mrow: 1; }
  26.58%, 100% { --mrow: 0; }
}
.demo--admin.playing .av-ad13 { animation: adAv13 69s linear infinite; }
@keyframes adAv13 { 0%, 24.58% { opacity: 0; transform: scale(.8); } 24.928%, 100% { opacity: 1; transform: none; } }
@keyframes adHl13 {
  0%, 24.362% { --mrow: 0; }
  24.725%, 26.319% { --mrow: 1; }
  27.333%, 100% { --mrow: 0; }
}
.demo--admin.playing .an-addraft0 { animation: adCdraft0 69s linear infinite; }
@keyframes adCdraft0 { 0%, 16.29% { opacity: 1; } 16.304%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft1 { animation: adCdraft1 69s linear infinite; }
@keyframes adCdraft1 { 0%, 16.29% { opacity: 0; } 16.304%, 17.043% { opacity: 1; } 17.058%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft2 { animation: adCdraft2 69s linear infinite; }
@keyframes adCdraft2 { 0%, 17.043% { opacity: 0; } 17.058%, 18.551% { opacity: 1; } 18.565%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft3 { animation: adCdraft3 69s linear infinite; }
@keyframes adCdraft3 { 0%, 18.551% { opacity: 0; } 18.565%, 20.058% { opacity: 1; } 20.072%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft4 { animation: adCdraft4 69s linear infinite; }
@keyframes adCdraft4 { 0%, 20.058% { opacity: 0; } 20.072%, 20.812% { opacity: 1; } 20.826%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft5 { animation: adCdraft5 69s linear infinite; }
@keyframes adCdraft5 { 0%, 20.812% { opacity: 0; } 20.826%, 21.565% { opacity: 1; } 21.58%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft6 { animation: adCdraft6 69s linear infinite; }
@keyframes adCdraft6 { 0%, 21.565% { opacity: 0; } 21.58%, 23.072% { opacity: 1; } 23.087%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft7 { animation: adCdraft7 69s linear infinite; }
@keyframes adCdraft7 { 0%, 23.072% { opacity: 0; } 23.087%, 23.826% { opacity: 1; } 23.841%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft8 { animation: adCdraft8 69s linear infinite; }
@keyframes adCdraft8 { 0%, 23.826% { opacity: 0; } 23.841%, 24.58% { opacity: 1; } 24.594%, 100% { opacity: 0; } }
.demo--admin.playing .an-addraft9 { animation: adCdraft9 69s linear infinite; }
@keyframes adCdraft9 { 0%, 24.58% { opacity: 0; } 24.594%, 100% { opacity: 1; } }
.demo--admin.playing .an-adneed0 { animation: adCneed0 69s linear infinite; }
@keyframes adCneed0 { 0%, 15.536% { opacity: 1; } 15.551%, 100% { opacity: 0; } }
.demo--admin.playing .an-adneed1 { animation: adCneed1 69s linear infinite; }
@keyframes adCneed1 { 0%, 15.536% { opacity: 0; } 15.551%, 17.797% { opacity: 1; } 17.812%, 100% { opacity: 0; } }
.demo--admin.playing .an-adneed2 { animation: adCneed2 69s linear infinite; }
@keyframes adCneed2 { 0%, 17.797% { opacity: 0; } 17.812%, 22.319% { opacity: 1; } 22.333%, 100% { opacity: 0; } }
.demo--admin.playing .an-adneed3 { animation: adCneed3 69s linear infinite; }
@keyframes adCneed3 { 0%, 22.319% { opacity: 0; } 22.333%, 100% { opacity: 1; } }
.demo--admin.playing .an-adfile0 { animation: adCfile0 69s linear infinite; }
@keyframes adCfile0 { 0%, 14.783% { opacity: 1; } 14.797%, 100% { opacity: 0; } }
.demo--admin.playing .an-adfile1 { animation: adCfile1 69s linear infinite; }
@keyframes adCfile1 { 0%, 14.783% { opacity: 0; } 14.797%, 19.304% { opacity: 1; } 19.319%, 100% { opacity: 0; } }
.demo--admin.playing .an-adfile2 { animation: adCfile2 69s linear infinite; }
@keyframes adCfile2 { 0%, 19.304% { opacity: 0; } 19.319%, 100% { opacity: 1; } }
.demo--admin.playing .aw-bodytxt { animation: adType 69s linear infinite; }
@keyframes adType { 0%, 26.812% { clip-path: inset(0 100% 0 0); } 30.725%, 100% { clip-path: inset(0 0 0 0); } }
.demo--admin.playing .aw-cf { animation: adHold 69s linear infinite; }
@keyframes adHold { 0%, 30.87% { opacity: 0; } 31.449%, 100% { opacity: 1; } }
.demo--admin.playing .aw-file-ad0 { animation: adF0 69s linear infinite; }
@keyframes adF0 {
  0%, 42.754% { opacity: 1; transform: none; }
  43.551% { opacity: 0; transform: translateY(20px) scale(.92); }
  43.565%, 100% { opacity: 0; max-height: 0; margin: 0; padding: 0; border-width: 0; }
}
.demo--admin.playing .aw-fold-ad0 { animation: adFd0 69s linear infinite; }
@keyframes adFd0 { 0%, 43.261% { --fd: 0; } 43.623%, 44.348% { --fd: 1; } 44.928%, 100% { --fd: 0; } }
.demo--admin.playing .aw-fn-ad0-0 { animation: adFn00 69s linear infinite; }
@keyframes adFn00 { 0%, 43.594% { opacity: 1; } 43.623%, 100% { opacity: 0; } }
.demo--admin.playing .aw-fn-ad0-1 { animation: adFn01 69s linear infinite; }
@keyframes adFn01 { 0%, 43.594% { opacity: 0; } 43.623%, 100% { opacity: 1; } }
.demo--admin.playing .aw-file-ad1 { animation: adF1 69s linear infinite; }
@keyframes adF1 {
  0%, 44.565% { opacity: 1; transform: none; }
  45.362% { opacity: 0; transform: translateY(20px) scale(.92); }
  45.377%, 100% { opacity: 0; max-height: 0; margin: 0; padding: 0; border-width: 0; }
}
.demo--admin.playing .aw-fold-ad1 { animation: adFd1 69s linear infinite; }
@keyframes adFd1 { 0%, 45.072% { --fd: 0; } 45.435%, 46.159% { --fd: 1; } 46.739%, 100% { --fd: 0; } }
.demo--admin.playing .aw-fn-ad1-0 { animation: adFn10 69s linear infinite; }
@keyframes adFn10 { 0%, 45.406% { opacity: 1; } 45.435%, 100% { opacity: 0; } }
.demo--admin.playing .aw-fn-ad1-1 { animation: adFn11 69s linear infinite; }
@keyframes adFn11 { 0%, 45.406% { opacity: 0; } 45.435%, 100% { opacity: 1; } }
.demo--admin.playing .aw-file-ad2 { animation: adF2 69s linear infinite; }
@keyframes adF2 {
  0%, 46.377% { opacity: 1; transform: none; }
  47.174% { opacity: 0; transform: translateY(20px) scale(.92); }
  47.188%, 100% { opacity: 0; max-height: 0; margin: 0; padding: 0; border-width: 0; }
}
.demo--admin.playing .aw-fold-ad2 { animation: adFd2 69s linear infinite; }
@keyframes adFd2 { 0%, 46.884% { --fd: 0; } 47.246%, 47.971% { --fd: 1; } 48.551%, 100% { --fd: 0; } }
.demo--admin.playing .aw-fn-ad2-0 { animation: adFn20 69s linear infinite; }
@keyframes adFn20 { 0%, 47.217% { opacity: 1; } 47.246%, 100% { opacity: 0; } }
.demo--admin.playing .aw-fn-ad2-1 { animation: adFn21 69s linear infinite; }
@keyframes adFn21 { 0%, 47.217% { opacity: 0; } 47.246%, 100% { opacity: 1; } }

/* ── generated week grid ── */

.ab-ad0 { grid-column: 2; grid-row: 3 / 4; }
.ab-ad1 { grid-column: 2; grid-row: 7 / 8; }
.ab-ad2 { grid-column: 3; grid-row: 9 / 10; }
.ab-ad3 { grid-column: 3; grid-row: 6 / 7; }
.ab-ad4 { grid-column: 4; grid-row: 4 / 5; }
.ab-ad5 { grid-column: 4; grid-row: 8 / 9; }
.ab-ad6 { grid-column: 5; grid-row: 3 / 4; }
.ab-ad7 { grid-column: 5; grid-row: 7 / 8; }
.ab-ad8 { grid-column: 3; grid-row: 2 / 3; }
.ab-ad9 { grid-column: 3; grid-row: 4 / 5; }
.ab-ad10 { grid-column: 4; grid-row: 9 / 10; }
.ab-ad11 { grid-column: 4; grid-row: 3 / 4; }
.demo--admin.playing .ab-ad8 { animation: adBf8 69s linear infinite; }
@keyframes adBf8 { 0%, 50.725% { opacity: 1; } 51.449%, 100% { opacity: .2; } }
.demo--admin.playing .ab-ad9 { animation: adBt9 69s linear infinite; }
@keyframes adBt9 {
  0%, 51.087% { opacity: 0; transform: scale(.86); --bt: 0; }
  51.812% { opacity: 1; transform: none; --bt: 1; }
  53.623%, 100% { opacity: 1; transform: none; --bt: 0; }
}
.demo--admin.playing .aw-ok-ad9 { animation: adOk9 69s linear infinite; }
@keyframes adOk9 { 0%, 58.406% { opacity: 0; transform: scale(.6); } 58.841%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .ab-ad10 { animation: adBf10 69s linear infinite; }
@keyframes adBf10 { 0%, 53.623% { opacity: 1; } 54.348%, 100% { opacity: .2; } }
.demo--admin.playing .ab-ad11 { animation: adBt11 69s linear infinite; }
@keyframes adBt11 {
  0%, 53.986% { opacity: 0; transform: scale(.86); --bt: 0; }
  54.71% { opacity: 1; transform: none; --bt: 1; }
  56.522%, 100% { opacity: 1; transform: none; --bt: 0; }
}
.demo--admin.playing .aw-ok-ad11 { animation: adOk11 69s linear infinite; }
@keyframes adOk11 { 0%, 60.145% { opacity: 0; transform: scale(.6); } 60.58%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .ai-ad2 { animation: adIv2 69s linear infinite; }
@keyframes adIv2 { 0%, 64.928% { --iv: 0; } 65.362%, 100% { --iv: 1; } }
.demo--admin.playing .ai-ad3 { animation: adIv3 69s linear infinite; }
@keyframes adIv3 { 0%, 66.159% { --iv: 0; } 66.594%, 100% { --iv: 1; } }
.demo--admin.playing .ai-ad4 { animation: adIv4 69s linear infinite; }
@keyframes adIv4 { 0%, 67.391% { --iv: 0; } 67.826%, 100% { --iv: 1; } }
.demo--admin.playing .aw-tl-ad0 { animation: adTl0 69s linear infinite; }
@keyframes adTl0 { 0%, 71.304% { opacity: 0; } 71.739%, 100% { opacity: .62; } }
.demo--admin.playing .aw-tl-ad1 { animation: adTl1 69s linear infinite; }
@keyframes adTl1 { 0%, 72.391% { opacity: 0; } 72.826%, 100% { opacity: .62; } }
.demo--admin.playing .aw-tl-ad2 { animation: adTl2 69s linear infinite; }
@keyframes adTl2 { 0%, 73.478% { opacity: 0; } 73.913%, 100% { opacity: .62; } }
.demo--admin.playing .aw-tl-ad3 { animation: adTl3 69s linear infinite; }
@keyframes adTl3 { 0%, 74.565% { opacity: 0; } 75.0%, 100% { opacity: .62; } }
.demo--admin.playing .aw-act-ad0 { animation: adAc0 69s linear infinite; }
@keyframes adAc0 { 0%, 73.913% { opacity: 0; transform: translateX(-10px); } 74.42%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .aw-act-ad1 { animation: adAc1 69s linear infinite; }
@keyframes adAc1 { 0%, 75.217% { opacity: 0; transform: translateX(-10px); } 75.725%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .aw-act-ad2 { animation: adAc2 69s linear infinite; }
@keyframes adAc2 { 0%, 76.522% { opacity: 0; transform: translateX(-10px); } 77.029%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .aw-sys-ad0 { animation: adSy0 69s linear infinite; }
@keyframes adSy0 { 0%, 79.71% { opacity: .28; } 80.145%, 100% { opacity: 1; } }
.demo--admin.playing .aw-syn-ad0 { animation: adSn0 69s linear infinite; }
@keyframes adSn0 { 0%, 80.435% { opacity: 0; transform: scale(.7); } 80.87%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .aw-sys-ad1 { animation: adSy1 69s linear infinite; }
@keyframes adSy1 { 0%, 80.942% { opacity: .28; } 81.377%, 100% { opacity: 1; } }
.demo--admin.playing .aw-syn-ad1 { animation: adSn1 69s linear infinite; }
@keyframes adSn1 { 0%, 81.667% { opacity: 0; transform: scale(.7); } 82.101%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .aw-sys-ad2 { animation: adSy2 69s linear infinite; }
@keyframes adSy2 { 0%, 82.174% { opacity: .28; } 82.609%, 100% { opacity: 1; } }
.demo--admin.playing .aw-syn-ad2 { animation: adSn2 69s linear infinite; }
@keyframes adSn2 { 0%, 82.899% { opacity: 0; transform: scale(.7); } 83.333%, 100% { opacity: 1; transform: none; } }
.demo--admin.playing .aw-sys-ad3 { animation: adSy3 69s linear infinite; }
@keyframes adSy3 { 0%, 83.406% { opacity: .28; } 83.841%, 100% { opacity: 1; } }
.demo--admin.playing .aw-syn-ad3 { animation: adSn3 69s linear infinite; }
@keyframes adSn3 { 0%, 84.13% { opacity: 0; transform: scale(.7); } 84.565%, 100% { opacity: 1; transform: none; } }

/* ── generated admin status line ── */

.demo--admin.playing .cs-ad0 { animation: adcs0 69s linear infinite; }
@keyframes adcs0 {
  0%, 1.159% { opacity: 0; }
  1.667%, 14.203% { opacity: 1; }
  14.71%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad1 { animation: adcs1 69s linear infinite; }
@keyframes adcs1 {
  0%, 14.203% { opacity: 0; }
  14.71%, 26.087% { opacity: 1; }
  26.594%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad2 { animation: adcs2 69s linear infinite; }
@keyframes adcs2 {
  0%, 26.087% { opacity: 0; }
  26.594%, 35.362% { opacity: 1; }
  35.87%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad3 { animation: adcs3 69s linear infinite; }
@keyframes adcs3 {
  0%, 35.362% { opacity: 0; }
  35.87%, 41.739% { opacity: 1; }
  42.246%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad4 { animation: adcs4 69s linear infinite; }
@keyframes adcs4 {
  0%, 41.739% { opacity: 0; }
  42.246%, 49.565% { opacity: 1; }
  50.072%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad5 { animation: adcs5 69s linear infinite; }
@keyframes adcs5 {
  0%, 49.565% { opacity: 0; }
  50.072%, 57.681% { opacity: 1; }
  58.188%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad6 { animation: adcs6 69s linear infinite; }
@keyframes adcs6 {
  0%, 57.681% { opacity: 0; }
  58.188%, 62.899% { opacity: 1; }
  63.406%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad7 { animation: adcs7 69s linear infinite; }
@keyframes adcs7 {
  0%, 62.899% { opacity: 0; }
  63.406%, 70.725% { opacity: 1; }
  71.232%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad8 { animation: adcs8 69s linear infinite; }
@keyframes adcs8 {
  0%, 70.725% { opacity: 0; }
  71.232%, 79.13% { opacity: 1; }
  79.638%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad9 { animation: adcs9 69s linear infinite; }
@keyframes adcs9 {
  0%, 79.13% { opacity: 0; }
  79.638%, 86.087% { opacity: 1; }
  86.594%, 100% { opacity: 0; }
}
.demo--admin.playing .cs-ad10 { animation: adcs10 69s linear infinite; }
@keyframes adcs10 {
  0%, 86.087% { opacity: 0; }
  86.594%, 100% { opacity: 1; }
}

/* ── generated admin step guide ── */

.demo--admin.playing .ck-ad0 { animation: adck0 69s linear infinite; }
@keyframes adck0 {
  0%, 1.159% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  1.667%, 14.203% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  14.71%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad1 { animation: adck1 69s linear infinite; }
@keyframes adck1 {
  0%, 14.203% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  14.71%, 26.087% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  26.594%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad2 { animation: adck2 69s linear infinite; }
@keyframes adck2 {
  0%, 26.087% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  26.594%, 35.362% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  35.87%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad3 { animation: adck3 69s linear infinite; }
@keyframes adck3 {
  0%, 35.362% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  35.87%, 41.739% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  42.246%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad4 { animation: adck4 69s linear infinite; }
@keyframes adck4 {
  0%, 41.739% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  42.246%, 49.565% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  50.072%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad5 { animation: adck5 69s linear infinite; }
@keyframes adck5 {
  0%, 49.565% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  50.072%, 57.681% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  58.188%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad6 { animation: adck6 69s linear infinite; }
@keyframes adck6 {
  0%, 57.681% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  58.188%, 62.899% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  63.406%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad7 { animation: adck7 69s linear infinite; }
@keyframes adck7 {
  0%, 62.899% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  63.406%, 70.725% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  71.232%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad8 { animation: adck8 69s linear infinite; }
@keyframes adck8 {
  0%, 70.725% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  71.232%, 79.13% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  79.638%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad9 { animation: adck9 69s linear infinite; }
@keyframes adck9 {
  0%, 79.13% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  79.638%, 86.087% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  86.594%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--admin.playing .ck-ad10 { animation: adck10 69s linear infinite; }
@keyframes adck10 {
  0%, 86.087% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  86.594%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}

/* ── generated marketing: one week in the portal ── */

.demo--mkt.playing .awin { animation: mkCycle 83.6s linear infinite; }
@keyframes mkCycle { 0%, 97.129% { opacity: 1; } 98.565%, 100% { opacity: 0; } }
.demo--mkt.playing .sc-mksources { animation: mkSsources 83.6s linear infinite; }
@keyframes mkSsources {
  0% { opacity: 0; visibility: hidden; }
  0.598% { opacity: 0; visibility: hidden; }
  0.957%, 8.254% { opacity: 1; visibility: visible; }
  8.612% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkseo { animation: mkSseo 83.6s linear infinite; }
@keyframes mkSseo {
  0% { opacity: 0; visibility: hidden; }
  8.254% { opacity: 0; visibility: hidden; }
  8.612%, 13.995% { opacity: 1; visibility: visible; }
  14.354% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkcal { animation: mkScal 83.6s linear infinite; }
@keyframes mkScal {
  0% { opacity: 0; visibility: hidden; }
  13.995% { opacity: 0; visibility: hidden; }
  14.354%, 19.737% { opacity: 1; visibility: visible; }
  20.096% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mksocial { animation: mkSsocial 83.6s linear infinite; }
@keyframes mkSsocial {
  0% { opacity: 0; visibility: hidden; }
  19.737% { opacity: 0; visibility: hidden; }
  20.096%, 25.957% { opacity: 1; visibility: visible; }
  26.316% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkdesign { animation: mkSdesign 83.6s linear infinite; }
@keyframes mkSdesign {
  0% { opacity: 0; visibility: hidden; }
  25.957% { opacity: 0; visibility: hidden; }
  26.316%, 32.895% { opacity: 1; visibility: visible; }
  33.254% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkcheck { animation: mkScheck 83.6s linear infinite; }
@keyframes mkScheck {
  0% { opacity: 0; visibility: hidden; }
  32.895% { opacity: 0; visibility: hidden; }
  33.254%, 40.072% { opacity: 1; visibility: visible; }
  40.431% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkhold { animation: mkShold 83.6s linear infinite; }
@keyframes mkShold {
  0% { opacity: 0; visibility: hidden; }
  40.072% { opacity: 0; visibility: hidden; }
  40.431%, 45.574% { opacity: 1; visibility: visible; }
  45.933% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkpublish { animation: mkSpublish 83.6s linear infinite; }
@keyframes mkSpublish {
  0% { opacity: 0; visibility: hidden; }
  45.574% { opacity: 0; visibility: hidden; }
  45.933%, 52.273% { opacity: 1; visibility: visible; }
  52.632% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkinbox { animation: mkSinbox 83.6s linear infinite; }
@keyframes mkSinbox {
  0% { opacity: 0; visibility: hidden; }
  52.273% { opacity: 0; visibility: hidden; }
  52.632%, 58.971% { opacity: 1; visibility: visible; }
  59.33% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkmail { animation: mkSmail 83.6s linear infinite; }
@keyframes mkSmail {
  0% { opacity: 0; visibility: hidden; }
  58.971% { opacity: 0; visibility: hidden; }
  59.33%, 64.713% { opacity: 1; visibility: visible; }
  65.072% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkblog { animation: mkSblog 83.6s linear infinite; }
@keyframes mkSblog {
  0% { opacity: 0; visibility: hidden; }
  64.713% { opacity: 0; visibility: hidden; }
  65.072%, 70.933% { opacity: 1; visibility: visible; }
  71.292% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkads { animation: mkSads 83.6s linear infinite; }
@keyframes mkSads {
  0% { opacity: 0; visibility: hidden; }
  70.933% { opacity: 0; visibility: hidden; }
  71.292%, 77.153% { opacity: 1; visibility: visible; }
  77.512% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkwatch { animation: mkSwatch 83.6s linear infinite; }
@keyframes mkSwatch {
  0% { opacity: 0; visibility: hidden; }
  77.153% { opacity: 0; visibility: hidden; }
  77.512%, 82.416% { opacity: 1; visibility: visible; }
  82.775% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mkreport { animation: mkSreport 83.6s linear infinite; }
@keyframes mkSreport {
  0% { opacity: 0; visibility: hidden; }
  82.416% { opacity: 0; visibility: hidden; }
  82.775%, 88.158% { opacity: 1; visibility: visible; }
  88.517% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .sc-mklearn { animation: mkSlearn 83.6s linear infinite; }
@keyframes mkSlearn {
  0% { opacity: 0; visibility: hidden; }
  88.158% { opacity: 0; visibility: hidden; }
  88.517%, 94.617% { opacity: 1; visibility: visible; }
  94.976% { opacity: 0; visibility: hidden; }
  100% { opacity: 0; visibility: hidden; }
}
.demo--mkt.playing .an-mkinsight { animation: mkNinsight 83.6s linear infinite; }
@keyframes mkNinsight {
  0% { --nv: 0; }
  0.718% { --nv: 0; }
  0.957%, 8.373% { --nv: 1; }
  8.612% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mkcal { animation: mkNcal 83.6s linear infinite; }
@keyframes mkNcal {
  0% { --nv: 0; }
  14.115% { --nv: 0; }
  14.354%, 19.856% { --nv: 1; }
  20.096% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mksocial { animation: mkNsocial 83.6s linear infinite; }
@keyframes mkNsocial {
  0% { --nv: 0; }
  19.856% { --nv: 0; }
  20.096%, 26.077% { --nv: 1; }
  26.316% { --nv: 0; }
  40.191% { --nv: 0; }
  40.431%, 59.091% { --nv: 1; }
  59.33% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mkcreative { animation: mkNcreative 83.6s linear infinite; }
@keyframes mkNcreative {
  0% { --nv: 0; }
  26.077% { --nv: 0; }
  26.316%, 40.191% { --nv: 1; }
  40.431% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mkmail { animation: mkNmail 83.6s linear infinite; }
@keyframes mkNmail {
  0% { --nv: 0; }
  59.091% { --nv: 0; }
  59.33%, 64.833% { --nv: 1; }
  65.072% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mkseo { animation: mkNseo 83.6s linear infinite; }
@keyframes mkNseo {
  0% { --nv: 0; }
  8.373% { --nv: 0; }
  8.612%, 14.115% { --nv: 1; }
  14.354% { --nv: 0; }
  64.833% { --nv: 0; }
  65.072%, 71.053% { --nv: 1; }
  71.292% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mkads { animation: mkNads 83.6s linear infinite; }
@keyframes mkNads {
  0% { --nv: 0; }
  71.053% { --nv: 0; }
  71.292%, 77.273% { --nv: 1; }
  77.512% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .an-mkreport { animation: mkNreport 83.6s linear infinite; }
@keyframes mkNreport {
  0% { --nv: 0; }
  77.273% { --nv: 0; }
  77.512%, 94.737% { --nv: 1; }
  94.976% { --nv: 0; }
  100% { --nv: 0; }
}
.demo--mkt.playing .acl-mk0 { animation: mkCl0 83.6s linear infinite; }
@keyframes mkCl0 { 0%, 0.718% { opacity: 0; } 1.196%, 8.612% { opacity: 1; } 8.852%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk1 { animation: mkCl1 83.6s linear infinite; }
@keyframes mkCl1 { 0%, 8.373% { opacity: 0; } 8.852%, 14.354% { opacity: 1; } 14.593%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk2 { animation: mkCl2 83.6s linear infinite; }
@keyframes mkCl2 { 0%, 14.115% { opacity: 0; } 14.593%, 20.096% { opacity: 1; } 20.335%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk3 { animation: mkCl3 83.6s linear infinite; }
@keyframes mkCl3 { 0%, 19.856% { opacity: 0; } 20.335%, 26.316% { opacity: 1; } 26.555%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk4 { animation: mkCl4 83.6s linear infinite; }
@keyframes mkCl4 { 0%, 26.077% { opacity: 0; } 26.555%, 33.254% { opacity: 1; } 33.493%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk5 { animation: mkCl5 83.6s linear infinite; }
@keyframes mkCl5 { 0%, 33.014% { opacity: 0; } 33.493%, 40.431% { opacity: 1; } 40.67%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk6 { animation: mkCl6 83.6s linear infinite; }
@keyframes mkCl6 { 0%, 40.191% { opacity: 0; } 40.67%, 45.933% { opacity: 1; } 46.172%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk7 { animation: mkCl7 83.6s linear infinite; }
@keyframes mkCl7 { 0%, 45.694% { opacity: 0; } 46.172%, 52.632% { opacity: 1; } 52.871%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk8 { animation: mkCl8 83.6s linear infinite; }
@keyframes mkCl8 { 0%, 52.392% { opacity: 0; } 52.871%, 59.33% { opacity: 1; } 59.569%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk9 { animation: mkCl9 83.6s linear infinite; }
@keyframes mkCl9 { 0%, 59.091% { opacity: 0; } 59.569%, 65.072% { opacity: 1; } 65.311%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk10 { animation: mkCl10 83.6s linear infinite; }
@keyframes mkCl10 { 0%, 64.833% { opacity: 0; } 65.311%, 71.292% { opacity: 1; } 71.531%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk11 { animation: mkCl11 83.6s linear infinite; }
@keyframes mkCl11 { 0%, 71.053% { opacity: 0; } 71.531%, 77.512% { opacity: 1; } 77.751%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk12 { animation: mkCl12 83.6s linear infinite; }
@keyframes mkCl12 { 0%, 77.273% { opacity: 0; } 77.751%, 82.775% { opacity: 1; } 83.014%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk13 { animation: mkCl13 83.6s linear infinite; }
@keyframes mkCl13 { 0%, 82.536% { opacity: 0; } 83.014%, 88.517% { opacity: 1; } 88.756%, 100% { opacity: 0; } }
.demo--mkt.playing .acl-mk14 { animation: mkCl14 83.6s linear infinite; }
@keyframes mkCl14 { 0%, 88.278% { opacity: 0; } 88.876%, 100% { opacity: 1; } }
.demo--mkt.playing .kw-mk0 { animation: mkKw0 83.6s linear infinite; }
@keyframes mkKw0 { 0%, 9.031% { opacity: 0; transform: translateY(6px); --pk: 0; } 9.39%, 12.081% { opacity: 1; transform: none; --pk: 0; } 12.56%, 100% { opacity: 1; transform: none; --pk: 1; } }
.demo--mkt.playing .kw-mk1 { animation: mkKw1 83.6s linear infinite; }
@keyframes mkKw1 { 0%, 9.533% { opacity: 0; transform: translateY(6px); --pk: 0; } 9.892%, 12.081% { opacity: 1; transform: none; --pk: 0; } 12.56%, 100% { opacity: 1; transform: none; --pk: 1; } }
.demo--mkt.playing .kw-mk2 { animation: mkKw2 83.6s linear infinite; }
@keyframes mkKw2 { 0%, 10.036% { opacity: 0; transform: translateY(6px); --pk: 0; } 10.395%, 12.081% { opacity: 1; transform: none; --pk: 0; } 12.56%, 100% { opacity: 1; transform: none; --pk: 1; } }
.demo--mkt.playing .kw-mk3 { animation: mkKw3 83.6s linear infinite; }
@keyframes mkKw3 { 0%, 10.538% { opacity: 0; transform: translateY(6px); --pk: 0; } 10.897%, 12.081% { opacity: 1; transform: none; --pk: 0; } 12.56%, 100% { opacity: 1; transform: none; --pk: 0; } }
.demo--mkt.playing .kw-mk4 { animation: mkKw4 83.6s linear infinite; }
@keyframes mkKw4 { 0%, 11.041% { opacity: 0; transform: translateY(6px); --pk: 0; } 11.4%, 12.081% { opacity: 1; transform: none; --pk: 0; } 12.56%, 100% { opacity: 1; transform: none; --pk: 0; } }
.demo--mkt.playing .kp-mk { animation: mkKp 83.6s linear infinite; }
@keyframes mkKp { 0%, 12.56% { opacity: 0; } 13.038%, 100% { opacity: 1; } }
.demo--mkt.playing .mi-mk0 { animation: mkMi0 83.6s linear infinite; }
@keyframes mkMi0 { 0%, 14.952% { opacity: 0; transform: translateY(8px) scale(.96); } 15.359%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .mi-mk1 { animation: mkMi1 83.6s linear infinite; }
@keyframes mkMi1 { 0%, 15.813% { opacity: 0; transform: translateY(8px) scale(.96); } 16.22%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .mi-mk2 { animation: mkMi2 83.6s linear infinite; }
@keyframes mkMi2 { 0%, 16.675% { opacity: 0; transform: translateY(8px) scale(.96); } 17.081%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .mi-mk3 { animation: mkMi3 83.6s linear infinite; }
@keyframes mkMi3 { 0%, 17.536% { opacity: 0; transform: translateY(8px) scale(.96); } 17.943%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .mi-mk4 { animation: mkMi4 83.6s linear infinite; }
@keyframes mkMi4 { 0%, 18.397% { opacity: 0; transform: translateY(8px) scale(.96); } 18.804%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .ms-mk0-q { animation: mkMs0q 83.6s linear infinite; }
@keyframes mkMs0q { 0%, 38.995% { opacity: 1; } 39.354%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk0-hold { animation: mkMs0hold 83.6s linear infinite; }
@keyframes mkMs0hold { 0%, 39.354% { opacity: 0; } 39.713%, 44.378% { opacity: 1; } 44.737%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk0-ok { animation: mkMs0ok 83.6s linear infinite; }
@keyframes mkMs0ok { 0%, 44.378% { opacity: 0; } 44.737%, 51.435% { opacity: 1; } 51.794%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk0-live { animation: mkMs0live 83.6s linear infinite; }
@keyframes mkMs0live { 0%, 51.435% { opacity: 0; } 51.794%, 100% { opacity: 1; } }
.demo--mkt.playing .mi-mk0 { animation: mkMi0 83.6s linear infinite, mkMh 83.6s linear infinite; }
@keyframes mkMh { 0%, 39.354% { --hold: 0; --live: 0; } 39.713%, 51.435% { --hold: 1; --live: 0; } 51.794%, 100% { --hold: 0; --live: 1; } }
.demo--mkt.playing .ms-mk1-q { animation: mkMs1q 83.6s linear infinite; }
@keyframes mkMs1q { 0%, 100% { opacity: 1; } }
.demo--mkt.playing .ms-mk1-hold { animation: mkMs1hold 83.6s linear infinite; }
@keyframes mkMs1hold { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk1-ok { animation: mkMs1ok 83.6s linear infinite; }
@keyframes mkMs1ok { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk1-live { animation: mkMs1live 83.6s linear infinite; }
@keyframes mkMs1live { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk2-q { animation: mkMs2q 83.6s linear infinite; }
@keyframes mkMs2q { 0%, 100% { opacity: 1; } }
.demo--mkt.playing .ms-mk2-hold { animation: mkMs2hold 83.6s linear infinite; }
@keyframes mkMs2hold { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk2-ok { animation: mkMs2ok 83.6s linear infinite; }
@keyframes mkMs2ok { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk2-live { animation: mkMs2live 83.6s linear infinite; }
@keyframes mkMs2live { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk3-q { animation: mkMs3q 83.6s linear infinite; }
@keyframes mkMs3q { 0%, 100% { opacity: 1; } }
.demo--mkt.playing .ms-mk3-hold { animation: mkMs3hold 83.6s linear infinite; }
@keyframes mkMs3hold { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk3-ok { animation: mkMs3ok 83.6s linear infinite; }
@keyframes mkMs3ok { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk3-live { animation: mkMs3live 83.6s linear infinite; }
@keyframes mkMs3live { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk4-q { animation: mkMs4q 83.6s linear infinite; }
@keyframes mkMs4q { 0%, 100% { opacity: 1; } }
.demo--mkt.playing .ms-mk4-hold { animation: mkMs4hold 83.6s linear infinite; }
@keyframes mkMs4hold { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk4-ok { animation: mkMs4ok 83.6s linear infinite; }
@keyframes mkMs4ok { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .ms-mk4-live { animation: mkMs4live 83.6s linear infinite; }
@keyframes mkMs4live { 0%, 100% { opacity: 0; } }
.demo--mkt.playing .sl-mk0 { animation: mkSl0 83.6s linear infinite; }
@keyframes mkSl0 { 0%, 20.694% { opacity: 0; transform: translateX(-8px); } 21.053%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sl-mk1 { animation: mkSl1 83.6s linear infinite; }
@keyframes mkSl1 { 0%, 21.651% { opacity: 0; transform: translateX(-8px); } 22.01%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sl-mk2 { animation: mkSl2 83.6s linear infinite; }
@keyframes mkSl2 { 0%, 22.608% { opacity: 0; transform: translateX(-8px); } 22.967%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .mk-captxt { animation: mkCap 83.6s linear infinite; }
@keyframes mkCap { 0%, 23.804% { clip-path: inset(0 100% 0 0); } 26.555%, 100% { clip-path: inset(0 0 0 0); } }
.demo--mkt.playing .sr-mk0 { animation: mkSr0 83.6s linear infinite; }
@keyframes mkSr0 { 0%, 1.435% { opacity: 0; transform: translateY(8px); } 1.818%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sr-mk1 { animation: mkSr1 83.6s linear infinite; }
@keyframes mkSr1 { 0%, 2.333% { opacity: 0; transform: translateY(8px); } 2.715%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sr-mk2 { animation: mkSr2 83.6s linear infinite; }
@keyframes mkSr2 { 0%, 3.23% { opacity: 0; transform: translateY(8px); } 3.612%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sr-mk3 { animation: mkSr3 83.6s linear infinite; }
@keyframes mkSr3 { 0%, 4.127% { opacity: 0; transform: translateY(8px); } 4.51%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .so-mk { animation: mkSo 83.6s linear infinite; }
@keyframes mkSo { 0%, 5.981% { opacity: 0; } 6.459%, 100% { opacity: 1; } }
.demo--mkt.playing .ch-mk0 { animation: mkCh0 83.6s linear infinite; }
@keyframes mkCh0 { 0%, 33.732% { opacity: 0; --ck2: 0; } 34.091%, 34.39% { opacity: 1; --ck2: 0; } 34.689%, 100% { opacity: 1; --ck2: 1; } }
.demo--mkt.playing .ch-mk1 { animation: mkCh1 83.6s linear infinite; }
@keyframes mkCh1 { 0%, 34.593% { opacity: 0; --ck2: 0; } 34.952%, 35.251% { opacity: 1; --ck2: 0; } 35.55%, 100% { opacity: 1; --ck2: 1; } }
.demo--mkt.playing .ch-mk2 { animation: mkCh2 83.6s linear infinite; }
@keyframes mkCh2 { 0%, 35.455% { opacity: 0; --ck2: 0; } 35.813%, 36.112% { opacity: 1; --ck2: 0; } 36.411%, 100% { opacity: 1; --ck2: 1; } }
.demo--mkt.playing .ch-mk3 { animation: mkCh3 83.6s linear infinite; }
@keyframes mkCh3 { 0%, 36.316% { opacity: 0; --ck2: 0; } 36.675%, 36.974% { opacity: 1; --ck2: 0; } 37.273%, 100% { opacity: 1; --ck2: 1; } }
.demo--mkt.playing .ch-mk4 { animation: mkCh4 83.6s linear infinite; }
@keyframes mkCh4 { 0%, 37.177% { opacity: 0; --ck2: 0; } 37.536%, 37.835% { opacity: 1; --ck2: 0; } 38.134%, 100% { opacity: 1; --ck2: 1; } }
.demo--mkt.playing .co-mk { animation: mkCo 83.6s linear infinite; }
@keyframes mkCo { 0%, 38.397% { opacity: 0; } 38.876%, 100% { opacity: 1; } }
.demo--mkt.playing .rp-mk0 { animation: mkRp0 83.6s linear infinite; }
@keyframes mkRp0 { 0%, 53.11% { opacity: 0; transform: translateY(7px); --dn: 0; } 53.469%, 53.947% { opacity: 1; transform: none; --dn: 0; } 54.306%, 100% { opacity: 1; transform: none; --dn: 1; } }
.demo--mkt.playing .rp-mk1 { animation: mkRp1 83.6s linear infinite; }
@keyframes mkRp1 { 0%, 54.067% { opacity: 0; transform: translateY(7px); --dn: 0; } 54.426%, 54.904% { opacity: 1; transform: none; --dn: 0; } 55.263%, 100% { opacity: 1; transform: none; --dn: 1; } }
.demo--mkt.playing .rp-mk2 { animation: mkRp2 83.6s linear infinite; }
@keyframes mkRp2 { 0%, 55.024% { opacity: 0; transform: translateY(7px); --dn: 0; } 55.383%, 55.861% { opacity: 1; transform: none; --dn: 0; } 56.22%, 100% { opacity: 1; transform: none; --dn: 1; } }
.demo--mkt.playing .rp-mk3 { animation: mkRp3 83.6s linear infinite; }
@keyframes mkRp3 { 0%, 55.981% { opacity: 0; transform: translateY(7px); --dn: 0; } 56.34%, 56.818% { opacity: 1; transform: none; --dn: 0; } 57.177%, 100% { opacity: 1; transform: none; --dn: 1; } }
.demo--mkt.playing .ro-mk { animation: mkRo 83.6s linear infinite; }
@keyframes mkRo { 0%, 57.656% { opacity: 0; } 58.134%, 100% { opacity: 1; } }
.demo--mkt.playing .lr2-mk0 { animation: mkLr0 83.6s linear infinite; }
@keyframes mkLr0 { 0%, 88.995% { opacity: 0; transform: translateX(-9px); } 89.378%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .lr2-mk1 { animation: mkLr1 83.6s linear infinite; }
@keyframes mkLr1 { 0%, 89.856% { opacity: 0; transform: translateX(-9px); } 90.239%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .lr2-mk2 { animation: mkLr2 83.6s linear infinite; }
@keyframes mkLr2 { 0%, 90.718% { opacity: 0; transform: translateX(-9px); } 91.1%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .lr2-mk3 { animation: mkLr3 83.6s linear infinite; }
@keyframes mkLr3 { 0%, 91.579% { opacity: 0; transform: translateX(-9px); } 91.962%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .lo-mk { animation: mkLo 83.6s linear infinite; }
@keyframes mkLo { 0%, 92.823% { opacity: 0; } 93.301%, 100% { opacity: 1; } }
.demo--mkt.playing .bd-mk0 { animation: mkBd0 83.6s linear infinite; }
@keyframes mkBd0 { 0%, 27.033% { opacity: 0; transform: translateY(10px) scale(.94); --sw: 0; } 27.44% { opacity: 1; transform: none; --sw: 0; } 28.17% { opacity: 1; transform: none; --sw: 1; } 28.828%, 100% { opacity: 1; transform: none; --sw: 0; } }
.demo--mkt.playing .bd-mk1 { animation: mkBd1 83.6s linear infinite; }
@keyframes mkBd1 { 0%, 28.589% { opacity: 0; transform: translateY(10px) scale(.94); --sw: 0; } 28.995% { opacity: 1; transform: none; --sw: 0; } 29.725% { opacity: 1; transform: none; --sw: 1; } 30.383%, 100% { opacity: 1; transform: none; --sw: 0; } }
.demo--mkt.playing .bd-mk2 { animation: mkBd2 83.6s linear infinite; }
@keyframes mkBd2 { 0%, 30.144% { opacity: 0; transform: translateY(10px) scale(.94); --sw: 0; } 30.55% { opacity: 1; transform: none; --sw: 0; } 31.28% { opacity: 1; transform: none; --sw: 1; } 31.938%, 100% { opacity: 1; transform: none; --sw: 0; } }
.demo--mkt.playing .ao-mk { animation: mkAo 83.6s linear infinite; }
@keyframes mkAo { 0%, 31.579% { opacity: 0; } 32.057%, 100% { opacity: 1; } }
.demo--mkt.playing .pl-mk0 { animation: mkPl0 83.6s linear infinite; }
@keyframes mkPl0 { 0%, 46.411% { opacity: 0; transform: translateY(8px); } 46.794%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pk-mk0 { animation: mkPk0 83.6s linear infinite; }
@keyframes mkPk0 { 0%, 49.522% { opacity: 0; transform: scale(.7); } 49.88%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pl-mk1 { animation: mkPl1 83.6s linear infinite; }
@keyframes mkPl1 { 0%, 47.249% { opacity: 0; transform: translateY(8px); } 47.632%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pk-mk1 { animation: mkPk1 83.6s linear infinite; }
@keyframes mkPk1 { 0%, 50.299% { opacity: 0; transform: scale(.7); } 50.658%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pl-mk2 { animation: mkPl2 83.6s linear infinite; }
@keyframes mkPl2 { 0%, 48.086% { opacity: 0; transform: translateY(8px); } 48.469%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pk-mk2 { animation: mkPk2 83.6s linear infinite; }
@keyframes mkPk2 { 0%, 51.077% { opacity: 0; transform: scale(.7); } 51.435%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pl-mk3 { animation: mkPl3 83.6s linear infinite; }
@keyframes mkPl3 { 0%, 48.923% { opacity: 0; transform: translateY(8px); } 49.306%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .pk-mk3 { animation: mkPk3 83.6s linear infinite; }
@keyframes mkPk3 { 0%, 51.854% { opacity: 0; transform: scale(.7); } 52.213%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .mb-mk { animation: mkBy 83.6s linear infinite; }
@keyframes mkBy { 0%, 44.019% { opacity: 0; transform: scale(.85); } 44.378%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sg-mk0 { animation: mkSg0 83.6s linear infinite; }
@keyframes mkSg0 { 0%, 59.928% { opacity: 0; transform: translateY(7px); } 60.311%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sg-mk1 { animation: mkSg1 83.6s linear infinite; }
@keyframes mkSg1 { 0%, 60.945% { opacity: 0; transform: translateY(7px); } 61.328%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .sg-mk2 { animation: mkSg2 83.6s linear infinite; }
@keyframes mkSg2 { 0%, 61.962% { opacity: 0; transform: translateY(7px); } 62.344%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .bo-mk0 { animation: mkBo0 83.6s linear infinite; }
@keyframes mkBo0 { 0%, 66.148% { opacity: 0; } 66.483%, 100% { opacity: 1; } }
.demo--mkt.playing .bo-mk1 { animation: mkBo1 83.6s linear infinite; }
@keyframes mkBo1 { 0%, 66.806% { opacity: 0; } 67.141%, 100% { opacity: 1; } }
.demo--mkt.playing .bo-mk2 { animation: mkBo2 83.6s linear infinite; }
@keyframes mkBo2 { 0%, 67.464% { opacity: 0; } 67.799%, 100% { opacity: 1; } }
.demo--mkt.playing .bo-mk3 { animation: mkBo3 83.6s linear infinite; }
@keyframes mkBo3 { 0%, 68.122% { opacity: 0; } 68.457%, 100% { opacity: 1; } }
.demo--mkt.playing .bo-mk4 { animation: mkBo4 83.6s linear infinite; }
@keyframes mkBo4 { 0%, 68.78% { opacity: 0; } 69.115%, 100% { opacity: 1; } }
.demo--mkt.playing .ad-mk0 { animation: mkAd0 83.6s linear infinite; }
@keyframes mkAd0 { 0%, 71.89% { opacity: 0; --vd: 0; } 72.249%, 74.88% { opacity: 1; --vd: 0; } 75.239%, 100% { opacity: 1; --vd: 1; } }
.demo--mkt.playing .ad-mk1 { animation: mkAd1 83.6s linear infinite; }
@keyframes mkAd1 { 0%, 72.548% { opacity: 0; --vd: 0; } 72.907%, 75.299% { opacity: 1; --vd: 0; } 75.658%, 100% { opacity: 1; --vd: 1; } }
.demo--mkt.playing .ad-mk2 { animation: mkAd2 83.6s linear infinite; }
@keyframes mkAd2 { 0%, 73.206% { opacity: 0; --vd: 0; } 73.565%, 75.718% { opacity: 1; --vd: 0; } 76.077%, 100% { opacity: 1; --vd: 1; } }
.demo--mkt.playing .am-mk { animation: mkAm 83.6s linear infinite; }
@keyframes mkAm { 0%, 76.435% { opacity: 0; } 76.794%, 100% { opacity: 1; } }
.demo--mkt.playing .rv-mk0 { animation: mkRv0 83.6s linear infinite; }
@keyframes mkRv0 { 0%, 77.99% { opacity: 0; } 78.349%, 100% { opacity: 1; } }
.demo--mkt.playing .rv-mk1 { animation: mkRv1 83.6s linear infinite; }
@keyframes mkRv1 { 0%, 78.708% { opacity: 0; } 79.067%, 100% { opacity: 1; } }
.demo--mkt.playing .rv-mk2 { animation: mkRv2 83.6s linear infinite; }
@keyframes mkRv2 { 0%, 79.426% { opacity: 0; } 79.785%, 100% { opacity: 1; } }
.demo--mkt.playing .gp-mk { animation: mkGp 83.6s linear infinite; }
@keyframes mkGp { 0%, 80.622% { opacity: 0; transform: translateY(8px); } 81.1%, 100% { opacity: 1; transform: none; } }
.demo--mkt.playing .rl-mk0 { animation: mkRl0 83.6s linear infinite; }
@keyframes mkRl0 { 0%, 83.254% { opacity: 0; } 83.589%, 100% { opacity: 1; } }
.demo--mkt.playing .rl-mk1 { animation: mkRl1 83.6s linear infinite; }
@keyframes mkRl1 { 0%, 83.995% { opacity: 0; } 84.33%, 100% { opacity: 1; } }
.demo--mkt.playing .rl-mk2 { animation: mkRl2 83.6s linear infinite; }
@keyframes mkRl2 { 0%, 84.737% { opacity: 0; } 85.072%, 100% { opacity: 1; } }
.demo--mkt.playing .rl-mk3 { animation: mkRl3 83.6s linear infinite; }
@keyframes mkRl3 { 0%, 85.478% { opacity: 0; } 85.813%, 100% { opacity: 1; } }
.demo--mkt.playing .mk-rtop { animation: mkRt 83.6s linear infinite; }
@keyframes mkRt { 0%, 86.483% { opacity: 0; transform: scale(.94); } 86.962%, 100% { opacity: 1; transform: none; } }

/* ── generated status line ── */

.demo--mkt.playing .cs-mk0 { animation: mkcs0 83.6s linear infinite; }
@keyframes mkcs0 {
  0%, 0.957% { opacity: 0; }
  1.376%, 8.612% { opacity: 1; }
  9.031%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk1 { animation: mkcs1 83.6s linear infinite; }
@keyframes mkcs1 {
  0%, 8.612% { opacity: 0; }
  9.031%, 14.354% { opacity: 1; }
  14.773%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk2 { animation: mkcs2 83.6s linear infinite; }
@keyframes mkcs2 {
  0%, 14.354% { opacity: 0; }
  14.773%, 20.096% { opacity: 1; }
  20.514%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk3 { animation: mkcs3 83.6s linear infinite; }
@keyframes mkcs3 {
  0%, 20.096% { opacity: 0; }
  20.514%, 26.316% { opacity: 1; }
  26.734%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk4 { animation: mkcs4 83.6s linear infinite; }
@keyframes mkcs4 {
  0%, 26.316% { opacity: 0; }
  26.734%, 33.254% { opacity: 1; }
  33.672%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk5 { animation: mkcs5 83.6s linear infinite; }
@keyframes mkcs5 {
  0%, 33.254% { opacity: 0; }
  33.672%, 40.431% { opacity: 1; }
  40.849%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk6 { animation: mkcs6 83.6s linear infinite; }
@keyframes mkcs6 {
  0%, 40.431% { opacity: 0; }
  40.849%, 45.933% { opacity: 1; }
  46.352%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk7 { animation: mkcs7 83.6s linear infinite; }
@keyframes mkcs7 {
  0%, 45.933% { opacity: 0; }
  46.352%, 52.632% { opacity: 1; }
  53.05%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk8 { animation: mkcs8 83.6s linear infinite; }
@keyframes mkcs8 {
  0%, 52.632% { opacity: 0; }
  53.05%, 59.33% { opacity: 1; }
  59.749%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk9 { animation: mkcs9 83.6s linear infinite; }
@keyframes mkcs9 {
  0%, 59.33% { opacity: 0; }
  59.749%, 65.072% { opacity: 1; }
  65.49%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk10 { animation: mkcs10 83.6s linear infinite; }
@keyframes mkcs10 {
  0%, 65.072% { opacity: 0; }
  65.49%, 71.292% { opacity: 1; }
  71.711%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk11 { animation: mkcs11 83.6s linear infinite; }
@keyframes mkcs11 {
  0%, 71.292% { opacity: 0; }
  71.711%, 77.512% { opacity: 1; }
  77.931%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk12 { animation: mkcs12 83.6s linear infinite; }
@keyframes mkcs12 {
  0%, 77.512% { opacity: 0; }
  77.931%, 82.775% { opacity: 1; }
  83.194%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk13 { animation: mkcs13 83.6s linear infinite; }
@keyframes mkcs13 {
  0%, 82.775% { opacity: 0; }
  83.194%, 88.517% { opacity: 1; }
  88.935%, 100% { opacity: 0; }
}
.demo--mkt.playing .cs-mk14 { animation: mkcs14 83.6s linear infinite; }
@keyframes mkcs14 {
  0%, 88.517% { opacity: 0; }
  88.935%, 100% { opacity: 1; }
}

/* ── generated step guide ── */

.demo--mkt.playing .ck-mk0 { animation: mkck0 83.6s linear infinite; }
@keyframes mkck0 {
  0%, 0.957% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  1.376%, 8.612% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  9.031%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk1 { animation: mkck1 83.6s linear infinite; }
@keyframes mkck1 {
  0%, 8.612% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  9.031%, 14.354% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  14.773%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk2 { animation: mkck2 83.6s linear infinite; }
@keyframes mkck2 {
  0%, 14.354% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  14.773%, 20.096% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  20.514%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk3 { animation: mkck3 83.6s linear infinite; }
@keyframes mkck3 {
  0%, 20.096% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  20.514%, 26.316% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  26.734%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk4 { animation: mkck4 83.6s linear infinite; }
@keyframes mkck4 {
  0%, 26.316% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  26.734%, 33.254% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  33.672%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk5 { animation: mkck5 83.6s linear infinite; }
@keyframes mkck5 {
  0%, 33.254% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  33.672%, 40.431% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  40.849%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk6 { animation: mkck6 83.6s linear infinite; }
@keyframes mkck6 {
  0%, 40.431% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  40.849%, 45.933% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  46.352%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk7 { animation: mkck7 83.6s linear infinite; }
@keyframes mkck7 {
  0%, 45.933% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  46.352%, 52.632% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  53.05%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk8 { animation: mkck8 83.6s linear infinite; }
@keyframes mkck8 {
  0%, 52.632% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  53.05%, 59.33% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  59.749%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk9 { animation: mkck9 83.6s linear infinite; }
@keyframes mkck9 {
  0%, 59.33% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  59.749%, 65.072% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  65.49%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk10 { animation: mkck10 83.6s linear infinite; }
@keyframes mkck10 {
  0%, 65.072% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  65.49%, 71.292% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  71.711%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk11 { animation: mkck11 83.6s linear infinite; }
@keyframes mkck11 {
  0%, 71.292% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  71.711%, 77.512% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  77.931%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk12 { animation: mkck12 83.6s linear infinite; }
@keyframes mkck12 {
  0%, 77.512% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  77.931%, 82.775% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  83.194%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk13 { animation: mkck13 83.6s linear infinite; }
@keyframes mkck13 {
  0%, 82.775% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  83.194%, 88.517% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
  88.935%, 100% { --ck-bg: rgba(45,222,254,.28); --ck-fg: #EAF0FF; --ck-edge: rgba(45,222,254,.4); --ck-text: var(--muted); opacity: .85; }
}
.demo--mkt.playing .ck-mk14 { animation: mkck14 83.6s linear infinite; }
@keyframes mkck14 {
  0%, 88.517% { --ck-bg: transparent; --ck-fg: var(--faint); --ck-edge: var(--line); --ck-text: var(--faint); opacity: .5; }
  88.935%, 100% { --ck-bg: #2DDEFE; --ck-fg: #06121B; --ck-edge: #2DDEFE; --ck-text: #FFFFFF; opacity: 1; }
}