/* Deixis home page: sections, the hero stage and the small scenes.
   Every scene is a fixed-aspect stage. Inside it, 1 design unit is --u (a fraction of the stage width), so the
   choreography scales with the stage and never shifts the layout. Positioned parts use the registered numbers
   --x, --y (design units), --s (scale) and --r (lean in degrees), which the keyframes animate.
   Without motion (prefers-reduced-motion: reduce, or no animation support) each scene shows its static frame,
   which is what the base rules below describe. All movement lives in the no-preference block at the end. */

/* ---------- page sections ---------- */
.sec { padding-block: clamp(4rem, 11vw, 8.5rem) 0; }
.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.sec-head h2 { margin-bottom: 1rem; }
.sec-head p { color: var(--ink-2); font-size: clamp(1.0625rem, 2vw, 1.25rem); line-height: 1.5; margin: 0; }
.sec-head p + p { margin-top: .75rem; }

/* hero copy */
.hero { padding-top: clamp(3rem, 9vw, 6.5rem); text-align: center; }
.hero h1 { margin: 0 auto 1.1rem; max-width: 15ch; }
.hero h1 .kbd { font-size: .78em; min-width: 1.3em; height: 1.3em; border-radius: .26em; vertical-align: .12em; padding: 0 .22em; font-weight: 600; box-shadow: inset 0 -.06em 0 var(--line), 0 0 0 .5px var(--line); background: var(--glass-2); }
.hero .lead { max-width: 38rem; margin: 0 auto 1.4rem; }
.avail { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .6rem; margin: 0; font-size: .9375rem; color: var(--ink-2); }
.avail strong { color: var(--ink); }
.avail .sep { color: var(--ink-3); }

.stage-fig { margin: clamp(2.5rem, 6vw, 4rem) auto 0; max-width: 64rem; }

/* the stage: a stylized Mac screen */
.stage {
  position: relative; container-type: inline-size; overflow: hidden;
  aspect-ratio: 400 / 260; border-radius: clamp(10px, 2.2vw, 22px);
  background: var(--wall); box-shadow: var(--shadow);
  text-align: left;
}
.world { --u: calc(100cqw / 400); position: absolute; inset: 0; color: var(--ink); font-family: var(--sans); }
.world .p {
  position: absolute; left: 0; top: 0;
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) scale(var(--s)) rotate(calc(var(--r) * 1deg));
}

/* menu bar */
.mb { position: absolute; left: 0; top: 0; right: 0; height: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); padding: 0 calc(6 * var(--u)); font-size: calc(5 * var(--u)); background: var(--menubar); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); z-index: 8; white-space: nowrap; }
.mb b { font-weight: 700; }
.mb-apple { width: calc(4.5 * var(--u)); height: calc(5 * var(--u)); border-radius: 45% 45% 50% 50%; background: currentColor; opacity: .85; }
.mb-r { margin-left: auto; display: flex; align-items: center; gap: calc(6 * var(--u)); }
.mb-icon { position: relative; width: calc(9 * var(--u)); height: calc(8 * var(--u)); }
.mb-dot { position: absolute; left: calc(1 * var(--u)); top: calc(1 * var(--u)); width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: var(--amber); }
.mb-arrow { position: absolute; left: calc(4 * var(--u)); top: calc(4 * var(--u)); width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); border: calc(.6 * var(--u)) solid currentColor; border-radius: 1px 50% 50% 50%; }
.mb-badge { position: absolute; left: calc(6 * var(--u)); top: calc(-1.5 * var(--u)); min-width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--ink); color: var(--page); font: 700 calc(3.6 * var(--u)) / calc(5 * var(--u)) var(--sans); text-align: center; opacity: 0; }

/* the reviewed app: a browser window with trip-planner */
.win { position: absolute; left: calc(12 * var(--u)); top: calc(18 * var(--u)); width: calc(268 * var(--u)); height: calc(230 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--oc-bg); color: var(--oc-ink); box-shadow: var(--shadow); overflow: hidden; z-index: 1; }
.win > * { position: absolute; }
.tb { left: 0; right: 0; top: 0; height: calc(14 * var(--u)); background: var(--oc-card); border-bottom: 1px solid var(--oc-line); display: flex; align-items: center; gap: calc(2.5 * var(--u)); padding-left: calc(6 * var(--u)); }
.tb i { width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: 50%; background: #ff5f57; }
.tb i:nth-child(2) { background: #febc2e; } .tb i:nth-child(3) { background: #28c840; }
.url { position: absolute; left: calc(78 * var(--u)); width: calc(112 * var(--u)); top: calc(3 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--oc-bg); font-size: calc(4.4 * var(--u)); line-height: calc(8 * var(--u)); text-align: center; color: var(--oc-ink-2); white-space: nowrap; }
.url b { color: var(--oc-ink); font-weight: 500; }
.side { left: 0; top: calc(14 * var(--u)); bottom: 0; width: calc(48 * var(--u)); background: var(--oc-side); border-right: 1px solid var(--oc-line); padding: calc(7 * var(--u)) calc(5 * var(--u)); }
.side i { display: block; height: calc(3.2 * var(--u)); margin: 0 0 calc(5 * var(--u)); border-radius: 2px; background: var(--oc-line); }
.side i:first-child { width: 70%; height: calc(5 * var(--u)); background: var(--oc-brand); margin-bottom: calc(8 * var(--u)); }
.side i:nth-child(2) { background: var(--oc-brand-2); }
.oc-h { left: calc(58 * var(--u)); top: calc(21 * var(--u)); font: 700 calc(10 * var(--u)) / 1.2 var(--sans); letter-spacing: -.01em; margin: 0; }
.oc-btn { left: calc(212 * var(--u)); top: calc(23 * var(--u)); width: calc(34 * var(--u)); height: calc(10 * var(--u)); border-radius: calc(2.4 * var(--u)); background: var(--oc-brand); color: #fff; font: 600 calc(3.6 * var(--u)) / calc(10 * var(--u)) var(--sans); text-align: center; }
.kpis { left: calc(58 * var(--u)); top: calc(42 * var(--u)); width: calc(202 * var(--u)); height: calc(28 * var(--u)); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); }
.kpis i { border-radius: calc(3 * var(--u)); background: var(--oc-card); border: 1px solid var(--oc-line); position: relative; }
.kpis i::before { content: ""; position: absolute; left: 14%; top: 22%; width: 50%; height: 12%; border-radius: 2px; background: var(--oc-line); }
.kpis i::after { content: ""; position: absolute; left: 14%; top: 48%; width: 40%; height: 26%; border-radius: 2px; background: var(--oc-ink); opacity: .75; }
.chart { left: calc(58 * var(--u)); top: calc(94 * var(--u)); width: calc(202 * var(--u)); height: calc(126 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--oc-card); border: 1px solid var(--oc-line); }
.chart svg { position: absolute; left: 6%; right: 6%; bottom: 8%; width: 88%; height: 66%; }
.chart .ln-a { fill: none; stroke: var(--oc-brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart .ar-a { fill: var(--oc-brand-2); }
.chart::before { content: ""; position: absolute; left: 6%; top: 9%; width: 36%; height: calc(4 * var(--u)); border-radius: 2px; background: var(--oc-line); }

/* the destination: a Claude Code terminal */
.term { position: absolute; left: calc(292 * var(--u)); top: calc(120 * var(--u)); width: calc(100 * var(--u)); height: calc(124 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--term); color: var(--term-ink); box-shadow: var(--shadow); overflow: hidden; font: calc(4.6 * var(--u)) / calc(7.6 * var(--u)) var(--mono); z-index: 1; }
.term .tt { height: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(2 * var(--u)); padding: 0 calc(4 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, .08); color: var(--term-dim); white-space: nowrap; }
.term .tt i { width: calc(2.6 * var(--u)); height: calc(2.6 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, .18); flex: none; }
.term .tl { padding: calc(4 * var(--u)) calc(5 * var(--u)) 0; white-space: pre; }
.term .d { color: var(--term-dim); }
.term .s { color: #ffb24a; }
.term .ok { color: #6fd48b; }
.term .ta, .term .tb2 { display: block; opacity: 0; }

/* pointed element outlines */
.hl { position: absolute; border: calc(.7 * var(--u)) solid var(--amber-line); border-radius: calc(3 * var(--u)); background: var(--amber-soft); z-index: 2; }
.hl .tag { position: absolute; left: calc(-.7 * var(--u)); top: calc(100% + 2 * var(--u)); padding: 0 calc(2.4 * var(--u)); border-radius: calc(1.6 * var(--u)); background: var(--amber); color: var(--pin-ink); font: 600 calc(4.2 * var(--u)) / calc(7.4 * var(--u)) var(--mono); white-space: nowrap; }
.hl-btn { left: calc(222 * var(--u)); top: calc(39 * var(--u)); width: calc(38 * var(--u)); height: calc(14 * var(--u)); opacity: 0; }
.hl-gap { left: calc(70 * var(--u)); top: calc(89 * var(--u)); width: calc(202 * var(--u)); height: calc(22 * var(--u)); border-style: dashed; border-radius: calc(1.5 * var(--u)); background: repeating-linear-gradient(-45deg, var(--amber-soft) 0 calc(2.4 * var(--u)), transparent 0 calc(4.8 * var(--u))); }
.hl-gap .tag { left: auto; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); }

/* threads and the cursor path */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
.fx-m { display: none; }
.fx .trail { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .3; stroke-dasharray: 252 300; }
.fx .thr { stroke: var(--amber-line); stroke-width: .7; stroke-linecap: round; stroke-dasharray: 1 1; }
.fx .thr1 { opacity: 0; }

/* pins */
.pin { z-index: 6; width: 0; height: 0; }
.pin .head { position: absolute; left: calc(-6.5 * var(--u)); top: calc(-20 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 750 calc(7 * var(--u)) / calc(13 * var(--u)) var(--sans); text-align: center; box-shadow: 0 0 0 calc(1 * var(--u)) var(--pin-ring), 0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-2 * var(--u)) rgba(0, 0, 0, .45); transform-origin: 50% 100%; }
.pin .head span { position: absolute; inset: 0; }
.pin .ok { opacity: 0; color: #fff; }
.pin .stem { position: absolute; left: calc(-.6 * var(--u)); top: calc(-8 * var(--u)); width: calc(1.2 * var(--u)); height: calc(7 * var(--u)); border-radius: 1px; background: var(--pin); transform-origin: 50% 100%; }
.pin .rip { position: absolute; left: calc(-10 * var(--u)); top: calc(-10 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; border: calc(.9 * var(--u)) solid var(--amber); opacity: 0; }

/* the Begleiter card */
.card { --x: 96; --y: 120; --h: 54; z-index: 5; width: calc(180 * var(--u)); height: calc(var(--h) * var(--u)); border-radius: calc(9 * var(--u)); overflow: hidden; transform-origin: 50% 0; }
.card .hdr { display: flex; align-items: center; gap: calc(3.5 * var(--u)); height: calc(16 * var(--u)); padding: 0 calc(7 * var(--u)); font-size: calc(5.6 * var(--u)); color: var(--ink-2); white-space: nowrap; border-bottom: .5px solid var(--line); }
.wave { display: flex; align-items: center; gap: calc(.8 * var(--u)); height: calc(7 * var(--u)); flex: none; }
.wave i { width: calc(1.1 * var(--u)); height: calc(2 * var(--u)); border-radius: 1px; background: var(--amber); }
.wave i:nth-child(2) { height: calc(5 * var(--u)); } .wave i:nth-child(3) { height: calc(3.5 * var(--u)); } .wave i:nth-child(4) { height: calc(6 * var(--u)); }
.rnd { position: relative; flex: 1; min-width: 0; height: calc(8 * var(--u)); overflow: hidden; }
.rnd > span { position: absolute; left: 0; top: 0; line-height: calc(8 * var(--u)); white-space: nowrap; }
.rnd b { color: var(--ink); font-weight: 600; }
.rnd .rb { opacity: 0; color: var(--ink); font-weight: 600; }
.cnt { position: relative; height: calc(8 * var(--u)); overflow: hidden; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.roll { display: flex; flex-direction: column; transform: translateY(calc(-16 * var(--u))); }
.roll span { line-height: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.vsep { width: .5px; height: calc(6 * var(--u)); background: var(--line); flex: none; }
.dest { display: flex; align-items: center; gap: calc(2 * var(--u)); }
.dest i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: calc(1.6 * var(--u)); background: var(--term); position: relative; }
.dest i::after { content: ""; position: absolute; left: 28%; top: 30%; width: 26%; height: 26%; border: solid #ffb24a; border-width: 0 calc(.5 * var(--u)) calc(.5 * var(--u)) 0; transform: rotate(-45deg); }
.tx { position: relative; margin: 0; padding: calc(4 * var(--u)) calc(9 * var(--u)) 0; font: 600 calc(10 * var(--u)) / calc(13 * var(--u)) var(--sans); letter-spacing: -.012em; color: var(--ink); }
.ln { display: block; white-space: nowrap; }
.w { display: inline-block; }
.dx { color: var(--amber-ink); background: linear-gradient(var(--amber-soft), var(--amber-soft)) no-repeat 0 100% / 100% 100%; border-radius: calc(2 * var(--u)); margin: 0 calc(-1.4 * var(--u)); padding: 0 calc(1.4 * var(--u)); }
.dx sup { display: inline-block; width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(1 * var(--u)); border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 750 calc(4.6 * var(--u)) / calc(7 * var(--u)) var(--sans); text-align: center; vertical-align: calc(4 * var(--u)); }
.cut { position: absolute; left: calc(9 * var(--u)); right: calc(9 * var(--u)); top: calc(17 * var(--u)); height: calc(.9 * var(--u)); border-radius: 1px; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; }

/* the cut halves as labels at their pins */
.lab { z-index: 7; display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(15 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(1 * var(--u)); border-radius: calc(7.5 * var(--u)); font-size: calc(6 * var(--u)); color: var(--ink); white-space: nowrap; transform-origin: calc(7.5 * var(--u)) 50%; opacity: 0; box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-s); }
.lab b { width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 750 calc(7 * var(--u)) / calc(13 * var(--u)) var(--sans); text-align: center; flex: none; }
.lab1 { --x: 233.5; --y: 25.5; }
.lab2 { --x: 162.5; --y: 79.5; }

/* the round as a stack */
.stack { --x: 322; --y: 34; z-index: 7; width: calc(26 * var(--u)); height: calc(20 * var(--u)); opacity: 0; transform-origin: 50% 50%; }
.stack i { position: absolute; left: 0; top: calc(3 * var(--u)); width: calc(24 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(2.5 * var(--u)); background: var(--glass-2); box-shadow: var(--shadow-s); }
.stack i:first-child { transform: rotate(7deg) translate(calc(2 * var(--u)), calc(-2 * var(--u))); }
.stack i:nth-child(2)::before { content: ""; position: absolute; left: 18%; top: 28%; width: 60%; height: 12%; border-radius: 1px; background: var(--line); box-shadow: 0 calc(4 * var(--u)) 0 var(--line); }
.stack b { position: absolute; right: calc(-2 * var(--u)); top: 0; min-width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--pin); color: var(--pin-ink); font: 750 calc(5 * var(--u)) / calc(8 * var(--u)) var(--sans); text-align: center; box-shadow: 0 0 0 calc(.8 * var(--u)) var(--pin-ring); }

/* edge light and cursor */
.edge { position: absolute; inset: 0; z-index: 9; pointer-events: none; box-shadow: inset 0 0 0 calc(1.1 * var(--u)) rgba(255, 168, 38, .95), inset 0 0 calc(12 * var(--u)) calc(2.5 * var(--u)) rgba(255, 150, 40, .42), inset 0 0 calc(48 * var(--u)) calc(6 * var(--u)) rgba(255, 140, 40, .13); }
.cur { --x: 170; --y: 100; z-index: 10; width: 0; height: 0; }
.cur svg { position: absolute; left: calc(-.8 * var(--u)); top: calc(-.8 * var(--u)); width: calc(8.5 * var(--u)); height: calc(11.6 * var(--u)); overflow: visible; }
.halo { position: absolute; left: calc(-30 * var(--u)); top: calc(-30 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u)); border-radius: 50%; background: radial-gradient(circle, rgba(255, 163, 26, .3) 0%, rgba(255, 163, 26, .1) 38%, rgba(255, 163, 26, 0) 70%); }

/* the story in words, under the stage */
.story { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); gap: 1rem 1.5rem; text-align: left; counter-reset: st; }
.story li { counter-increment: st; position: relative; padding-left: 2rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.story li::before { content: counter(st); position: absolute; left: 0; top: .05rem; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 750 .75rem/1.35rem var(--sans); text-align: center; }
.story b { display: block; color: var(--ink); font-weight: 650; }

.p1 { --x: 241; --y: 46; }
.p2 { --x: 170; --y: 100; }

/* ---------- hero choreography: one 12 s loop, scroll independent ----------
   0.5 s edge light · 0.8 s card grows from the pointer · 1.2 s "Dieser" · 1.47 s pin 1 · 3.5 s "hier" · 3.77 s pin 2
   5.0 s release · 5.1 s cut · 5.35 s halves fly to their pins · 6.0 s card folds into the menu bar icon
   8.4 s the round (stack, badge 2) leaves the icon · 9.3 s it flies into Claude Code · 10.5 s back-channel, pin 2 done */
@media (prefers-reduced-motion: no-preference) {
  .stage { --loop: 12s; }
  .stage .edge, .stage .halo { animation: h-edge var(--loop) linear infinite both; }
  .stage .cur { animation: h-cur var(--loop) linear infinite both; }
  .stage .trail { animation: h-trail var(--loop) linear infinite both; }
  .stage .mb-dot { animation: h-dot var(--loop) linear infinite both; }
  .stage .mb-icon { animation: h-gulp var(--loop) linear infinite both; }
  .stage .mb-badge { animation: h-badge var(--loop) linear infinite both; }
  .stage .hl-btn { animation: h-hlbtn var(--loop) linear infinite both; }
  .stage .hl-gap { animation: h-hlgap var(--loop) linear infinite both; }
  .stage .thr1 { animation: h-thr1 var(--loop) linear infinite both; }
  .stage .thr2 { animation: h-thr2 var(--loop) linear infinite both; }
  .stage .card { animation: h-card var(--loop) linear infinite both; }
  .stage .wave i { animation: h-wave .9s ease-in-out infinite alternate; }
  .stage .wave i:nth-child(2) { animation-delay: -.3s; }
  .stage .wave i:nth-child(3) { animation-delay: -.55s; }
  .stage .wave i:nth-child(4) { animation-delay: -.15s; }
  .stage .roll { animation: h-roll var(--loop) linear infinite both; }
  .stage .ra { animation: h-ra var(--loop) linear infinite both; }
  .stage .rb { animation: h-rb var(--loop) linear infinite both; }
  .stage .ln { animation: h-ln var(--loop) linear infinite both; }
  .stage .cut { animation: h-cut var(--loop) linear infinite both; }
  .stage .lab1 { animation: h-lab1 var(--loop) linear infinite both; }
  .stage .lab2 { animation: h-lab2 var(--loop) linear infinite both; }
  .stage .p1 .head { animation: h-head1 var(--loop) linear infinite both; }
  .stage .p1 .stem { animation: h-stem1 var(--loop) linear infinite both; }
  .stage .p1 .rip { animation: h-rip1 var(--loop) linear infinite both; }
  .stage .p2 .head { animation: h-head2 var(--loop) linear infinite both, h-done var(--loop) linear infinite both; }
  .stage .p2 .stem { animation: h-stem2 var(--loop) linear infinite both, h-done var(--loop) linear infinite both; }
  .stage .p2 .rip { animation: h-rip2 var(--loop) linear infinite both; }
  .stage .p2 .n { animation: h-n var(--loop) linear infinite both; }
  .stage .p2 .ok { animation: h-ok var(--loop) linear infinite both; }
  .stage .stack { animation: h-stack var(--loop) linear infinite both; }
  .stage .term { animation: h-term var(--loop) linear infinite both; }
  .stage .ta { animation: h-ta var(--loop) linear infinite both; }
  .stage .tb2 { animation: h-tb var(--loop) linear infinite both; }
  .stage .w1 { animation: h-w1 var(--loop) linear infinite both, h-hl1 var(--loop) linear infinite both; }
  .stage .w2 { animation: h-w2 var(--loop) linear infinite both; }
  .stage .w3 { animation: h-w3 var(--loop) linear infinite both; }
  .stage .w4 { animation: h-w4 var(--loop) linear infinite both; }
  .stage .w5 { animation: h-w5 var(--loop) linear infinite both; }
  .stage .w6 { animation: h-w6 var(--loop) linear infinite both; }
  .stage .w7 { animation: h-w7 var(--loop) linear infinite both; }
  .stage .w8 { animation: h-w8 var(--loop) linear infinite both, h-hl8 var(--loop) linear infinite both; }
  .stage .w9 { animation: h-w9 var(--loop) linear infinite both; }
  .stage .w10 { animation: h-w10 var(--loop) linear infinite both; }
  .stage .w11 { animation: h-w11 var(--loop) linear infinite both; }
  .stage .w1 sup { animation: h-sup1 var(--loop) linear infinite both; }
  .stage .w8 sup { animation: h-sup8 var(--loop) linear infinite both; }
}

@keyframes h-edge { 0%, 4.17% { opacity: 0; } 7.5%, 41.67% { opacity: 1; } 45.83%, 100% { opacity: 0; } }
@keyframes h-dot { 0%, 4.17% { background: var(--ink); } 5%, 41.67% { background: var(--amber); } 43.33%, 100% { background: var(--ink); } }
@keyframes h-cur {
  0% { --x: 165; --y: 190; opacity: 0; }
  2.5% { opacity: 1; }
  4.17% { --x: 165; --y: 190; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  7.08% { --x: 206; --y: 110; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  9.58% { --x: 241; --y: 46; }
  20.83% { --x: 241; --y: 46; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  23.75% { --x: 206; --y: 72; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  27.5% { --x: 170; --y: 100; }
  88.33% { --x: 170; --y: 100; opacity: 1; }
  91.67%, 100% { --x: 170; --y: 100; opacity: 0; }
}
@keyframes h-trail {
  0% { stroke-dashoffset: 252; opacity: .5; }
  4.17% { stroke-dashoffset: 252; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  7.08% { stroke-dashoffset: 162.1; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  9.58% { stroke-dashoffset: 89.2; }
  20.83% { stroke-dashoffset: 89.2; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  23.75% { stroke-dashoffset: 45.6; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  27.5% { stroke-dashoffset: 0; }
  41.67% { stroke-dashoffset: 0; opacity: .5; }
  50%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes h-hlbtn { 0%, 9.58% { opacity: 0; } 11.25%, 20.83% { opacity: 1; } 22.5%, 100% { opacity: 0; } }
@keyframes h-hlgap { 0%, 27.5% { opacity: 0; } 29.17%, 41.67% { opacity: 1; } 44.17%, 100% { opacity: 0; } }
@keyframes h-thr1 { 0%, 10.42% { stroke-dashoffset: 1; opacity: 1; } 12.25%, 20.83% { stroke-dashoffset: 0; opacity: 1; } 21.67%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes h-thr2 { 0%, 29.58% { stroke-dashoffset: 1; opacity: 1; } 31.42%, 41.67% { stroke-dashoffset: 0; opacity: 1; } 44.17%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes h-card {
  0%, 6.67% { --x: 116; --y: 108; --s: .25; --r: 0; --h: 54; opacity: 0; }
  8.33% { opacity: 1; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  10.42% { --x: 49; --y: 51; --s: 1; --r: -1.5; }
  11.67% { --x: 56; --y: 58; --r: .5; }
  12.92%, 21.67% { --x: 54; --y: 56; --r: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  28.75% { --x: 99.5; --y: 125; --r: 1.2; }
  30% { --x: 95; --y: 118.5; --r: -.3; }
  31.25% { --x: 96; --y: 120; --r: 0; }
  46.67% { --h: 54; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  49.17% { --h: 16; }
  50% { --x: 96; --y: 120; --s: 1; --h: 16; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  54.17%, 100% { --x: 294; --y: 2; --s: .06; --h: 16; opacity: 0; }
}
@keyframes h-wave { from { transform: scaleY(.35); } to { transform: scaleY(1.15); } }
@keyframes h-roll { 0%, 12.25% { transform: none; } 13.5%, 31.42% { transform: translateY(calc(-8 * var(--u))); } 32.67%, 100% { transform: translateY(calc(-16 * var(--u))); } }
@keyframes h-ra { 0%, 41.67% { opacity: 1; transform: none; } 43.33%, 100% { opacity: 0; transform: translateY(calc(-4 * var(--u))); } }
@keyframes h-rb { 0%, 41.67% { opacity: 0; transform: translateY(calc(4 * var(--u))); } 43.33%, 100% { opacity: 1; transform: none; } }
@keyframes h-ln { 0%, 44.58% { opacity: 1; filter: none; } 46.67%, 100% { opacity: 0; filter: blur(3px); } }
@keyframes h-cut { 0%, 42.5% { transform: scaleX(0); opacity: 1; } 43.83%, 46.67% { transform: scaleX(1); opacity: 1; } 48.33%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes h-lab1 {
  0%, 44.58% { --x: 105; --y: 134; --s: .9; opacity: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  45.3% { opacity: 1; }
  49.17% { --x: 236.5; --y: 22.5; --s: 1.04; }
  50.83%, 66.67% { --x: 233.5; --y: 25.5; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  69.17%, 100% { --x: 233.5; --y: 25.5; --s: .2; opacity: 0; }
}
@keyframes h-lab2 {
  0%, 45.17% { --x: 105; --y: 147; --s: .9; opacity: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  45.9% { opacity: 1; }
  49.75% { --x: 164.5; --y: 76.5; --s: 1.04; }
  51.42%, 66.67% { --x: 162.5; --y: 79.5; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  69.17%, 100% { --x: 162.5; --y: 79.5; --s: .2; opacity: 0; }
}
@keyframes h-head1 {
  0%, 12.25% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); }
  13.8% { opacity: 1; transform: scale(1.18, .82); }
  14.75% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); }
  15.7% { transform: scale(1.04, .97); }
  17.4%, 93.33% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: none; }
}
@keyframes h-head2 {
  0%, 31.42% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); }
  32.97% { opacity: 1; transform: scale(1.18, .82); }
  33.92% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); }
  34.87% { transform: scale(1.04, .97); }
  36.57%, 87.5% { opacity: 1; transform: none; }
  88.6% { transform: scale(1.2); }
  90%, 93.33% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: none; }
}
@keyframes h-stem1 { 0%, 12.25% { opacity: 0; transform: scaleY(0); } 13.2%, 93.33% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes h-stem2 { 0%, 31.42% { opacity: 0; transform: scaleY(0); } 32.37%, 93.33% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes h-rip1 { 0%, 12.25% { opacity: 0; transform: scale(.3); } 12.3% { opacity: .9; transform: scale(.3); } 18.1%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes h-rip2 { 0%, 31.42% { opacity: 0; transform: scale(.3); } 31.47% { opacity: .9; transform: scale(.3); } 37.27%, 100% { opacity: 0; transform: scale(1.9); } }
@keyframes h-done { 0%, 87.5% { background: var(--pin); } 88.5%, 100% { background: var(--green); } }
@keyframes h-n { 0%, 87.5% { opacity: 1; } 88.5%, 100% { opacity: 0; } }
@keyframes h-ok { 0%, 87.5% { opacity: 0; } 88.5%, 100% { opacity: 1; } }
@keyframes h-gulp { 0%, 54.17% { transform: none; } 55.5% { transform: scale(1.35); } 57% { transform: scale(.9); } 58.5%, 100% { transform: none; } }
@keyframes h-badge { 0%, 54.17% { opacity: 0; transform: scale(.4); } 55.5%, 77.5% { opacity: 1; transform: none; } 78.5%, 100% { opacity: 0; transform: scale(.4); } }
@keyframes h-stack {
  0%, 70% { --x: 370; --y: 2; --s: .2; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  71% { opacity: 1; }
  74.17%, 77.5% { --x: 322; --y: 34; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .7, .6); }
  79.58% { --x: 338; --y: 96; --s: .85; }
  81.67% { --x: 330; --y: 158; --s: .45; opacity: 1; }
  82.5%, 100% { --x: 330; --y: 160; --s: .4; opacity: 0; }
}
@keyframes h-term { 0%, 81.67% { box-shadow: var(--shadow); } 82.5% { box-shadow: 0 0 0 calc(1.2 * var(--u)) var(--amber), 0 0 calc(18 * var(--u)) rgba(255, 163, 26, .45); } 86%, 100% { box-shadow: var(--shadow); } }
@keyframes h-ta { 0%, 82.5% { opacity: 0; transform: translateY(calc(3 * var(--u))); } 84.17%, 93.33% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes h-tb { 0%, 87.5% { opacity: 0; transform: translateY(calc(3 * var(--u))); } 89.17%, 93.33% { opacity: 1; transform: none; } 97.5%, 100% { opacity: 0; transform: none; } }
@keyframes h-w1 { 0%, 10% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 12.83%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w2 { 0%, 12.08% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 14.92%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w3 { 0%, 14.17% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 17%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w4 { 0%, 15.42% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 18.25%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w5 { 0%, 16.67% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 19.5%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w6 { 0%, 24.17% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 27%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w7 { 0%, 25.83% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 28.67%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w8 { 0%, 29.17% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 32%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w9 { 0%, 32.08% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 34.92%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w10 { 0%, 33.33% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 36.17%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-w11 { 0%, 35% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 37.83%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes h-hl1 { 0%, 10.5% { background-size: 0% 100%; } 13.83%, 100% { background-size: 100% 100%; } }
@keyframes h-sup1 { 0%, 12.25% { transform: scale(0); } 13.83% { transform: scale(1.3); } 14.75% { transform: scale(.9); } 15.75%, 100% { transform: none; } }
@keyframes h-hl8 { 0%, 29.67% { background-size: 0% 100%; } 33% { background-size: 100% 100%; } 100% { background-size: 100% 100%; } }
@keyframes h-sup8 { 0%, 31.42% { transform: scale(0); } 33% { transform: scale(1.3); } 33.92% { transform: scale(.9); } 34.92%, 100% { transform: none; } }

/* ---------- three ways in ---------- */
.ways { display: grid; gap: 1.25rem; }
.way { background: var(--page-2); border-radius: 24px; padding: 10px 10px 1.5rem; box-shadow: 0 0 0 .5px var(--line); }
.way > :not(.scene) { margin-inline: .9rem; }
.way h3 { margin-top: .25rem; margin-bottom: .5rem; }
.way p { color: var(--ink-2); font-size: 1.0625rem; margin-bottom: 0; max-width: 34rem; }
.way .way-k { margin-top: 1.25rem; margin-bottom: .35rem; color: var(--amber-ink); font-size: .875rem; font-weight: 650; display: flex; gap: .25rem; align-items: center; }
.way .way-k .kbd { color: var(--amber-ink); }
.way p .kbd { font-size: .8em; }

/* scenes share the stage vocabulary at a smaller size */
.scene { --u: calc(100cqw / 240); position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: 240 / 160; border-radius: 16px; background: var(--wall); color: var(--ink); font-family: var(--sans); }
.scene .p { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u))) scale(var(--s)) rotate(calc(var(--r) * 1deg)); }
.sw { position: absolute; left: calc(12 * var(--u)); top: calc(12 * var(--u)); width: calc(216 * var(--u)); height: calc(136 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--oc-bg); box-shadow: var(--shadow-s); overflow: hidden; }
.sw > * { position: absolute; }
.sw-tb { left: 0; right: 0; top: 0; height: calc(10 * var(--u)); background: var(--oc-card); border-bottom: 1px solid var(--oc-line); display: flex; gap: calc(2 * var(--u)); align-items: center; padding-left: calc(5 * var(--u)); }
.sw-tb i { width: calc(3 * var(--u)); height: calc(3 * var(--u)); border-radius: 50%; background: var(--oc-line); }
.sw-h { left: calc(14 * var(--u)); top: calc(20 * var(--u)); width: calc(70 * var(--u)); height: calc(7 * var(--u)); border-radius: 2px; background: var(--oc-ink); opacity: .8; }
.sw-l { left: calc(14 * var(--u)); top: calc(34 * var(--u)); width: calc(120 * var(--u)); height: calc(4 * var(--u)); border-radius: 2px; background: var(--oc-line); }
.sw-l2 { top: calc(42 * var(--u)); width: calc(90 * var(--u)); }
.sc-note .sw-l { top: calc(48 * var(--u)); width: calc(80 * var(--u)); }
.sc-note .sw-l2 { top: calc(56 * var(--u)); width: calc(60 * var(--u)); }
.sw-btn { left: calc(128 * var(--u)); top: calc(70 * var(--u)); width: calc(50 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--oc-brand-2); color: var(--oc-brand); font: 600 calc(6 * var(--u)) / calc(16 * var(--u)) var(--sans); text-align: center; opacity: .75; }
.sw-logo { left: calc(14 * var(--u)); top: calc(18 * var(--u)); width: calc(30 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--oc-brand); filter: blur(1.5px); }
.sw-box { left: calc(110 * var(--u)); top: calc(24 * var(--u)); width: calc(92 * var(--u)); height: calc(36 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--oc-card); border: 1px solid var(--oc-line); box-shadow: 0 calc(56 * var(--u)) 0 calc(-1 * var(--u)) var(--oc-card); }
.sw-a, .sw-b { top: calc(30 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--oc-card); border: 1px solid var(--oc-line); }
.sw-a { left: calc(14 * var(--u)); width: calc(80 * var(--u)); }
.sw-b { left: calc(110 * var(--u)); width: calc(90 * var(--u)); }
.sw-a::after, .sw-b::after { content: ""; position: absolute; left: 12%; top: 30%; width: 50%; height: 16%; border-radius: 2px; background: var(--oc-line); }

.key { position: absolute; left: calc(18 * var(--u)); top: calc(132 * var(--u)); display: flex; align-items: center; gap: calc(2.5 * var(--u)); height: calc(12 * var(--u)); padding: 0 calc(4 * var(--u)) 0 calc(2 * var(--u)); border-radius: calc(3.5 * var(--u)); background: var(--glass-2); box-shadow: var(--shadow-s); font: 600 calc(5.6 * var(--u)) / 1 var(--sans); color: var(--ink-2); white-space: nowrap; z-index: 8; }
.key .kbd { font-size: calc(6 * var(--u)); height: calc(8.5 * var(--u)); min-width: calc(8.5 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--amber); color: var(--pin-ink); box-shadow: none; }
.scene .edge { z-index: 9; }
.scene .cur { z-index: 10; width: 0; height: 0; }
.scene .cur svg { position: absolute; left: calc(-.8 * var(--u)); top: calc(-.8 * var(--u)); width: calc(8.5 * var(--u)); height: calc(11.6 * var(--u)); }

.mini { z-index: 5; width: calc(172 * var(--u)); padding: calc(4 * var(--u)) calc(7 * var(--u)) calc(6 * var(--u)); border-radius: calc(7 * var(--u)); transform-origin: 50% 0; }
.mini-h { display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(9 * var(--u)); font-size: calc(5.4 * var(--u)); color: var(--ink-2); }
.mini-t { display: block; margin-top: calc(2 * var(--u)); font: 600 calc(9 * var(--u)) / calc(12 * var(--u)) var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.mini .dx sup { width: calc(6.5 * var(--u)); height: calc(6.5 * var(--u)); font-size: calc(4.4 * var(--u)); line-height: calc(6.5 * var(--u)); vertical-align: calc(3.5 * var(--u)); }

.ta-cur { --x: 165; --y: 92; }
.ta-pin { --x: 165; --y: 90; }
.ta-card { --x: 16; --y: 104; }
.ta-lab { --x: 157.5; --y: 69.5; opacity: 0; }

/* annotate: crosshair, notes with a caret */
.xh { --x: 160; --y: 96; z-index: 10; width: 0; height: 0; opacity: 0; }
.xh-h, .xh-v { position: absolute; background: var(--ink); opacity: .55; }
.xh-h { left: calc(-300 * var(--u)); width: calc(600 * var(--u)); top: -.5px; height: 1px; }
.xh-v { top: calc(-300 * var(--u)); height: calc(600 * var(--u)); left: -.5px; width: 1px; }
.xh-c { position: absolute; left: calc(4 * var(--u)); top: calc(-11 * var(--u)); padding: calc(.8 * var(--u)) calc(2 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--glass-2); font: 500 calc(4.6 * var(--u)) / 1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.click { width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u)); border-radius: 50%; border: calc(.9 * var(--u)) solid var(--amber); opacity: 0; z-index: 9; }
.nt-c1, .nt-p1 { --x: 41; --y: 36; }
.nt-c2, .nt-p2 { --x: 160; --y: 96; }
.note { z-index: 5; display: block; padding: calc(4 * var(--u)) calc(6 * var(--u)) calc(5 * var(--u)); border-radius: calc(6 * var(--u)); transform-origin: 0 0; }
.note-h { display: flex; align-items: center; gap: calc(3 * var(--u)); font: 600 calc(5.2 * var(--u)) / calc(8 * var(--u)) var(--sans); color: var(--ink-2); }
.note-t { display: flex; align-items: center; min-height: calc(12 * var(--u)); font: 600 calc(8 * var(--u)) / calc(12 * var(--u)) var(--sans); color: var(--ink); white-space: nowrap; }
.note-t .w + .w { margin-left: .28em; }
.note-f { display: flex; align-items: center; gap: calc(1.5 * var(--u)); margin-top: calc(2 * var(--u)); font: 500 calc(4.6 * var(--u)) / 1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.note-f .kbd { font-size: calc(4.6 * var(--u)); height: calc(7 * var(--u)); min-width: calc(7 * var(--u)); }
.nt-n1 { --x: 50; --y: 44; width: calc(104 * var(--u)); opacity: 0; }
.nt-n2 { --x: 60; --y: 100; width: calc(92 * var(--u)); transform-origin: 100% 0; }
.type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: top; }
.caret { display: inline-block; width: calc(.8 * var(--u)); height: calc(9 * var(--u)); margin-left: calc(.8 * var(--u)); border-radius: 1px; background: var(--amber); }
.nt-key { opacity: 0; }

/* without voice: rings fill while the pointer rests */
.ring { width: calc(20 * var(--u)); height: calc(20 * var(--u)); margin: calc(-10 * var(--u)) 0 0 calc(-10 * var(--u)); z-index: 9; overflow: visible; opacity: 0; }
.ring circle { fill: rgba(255, 163, 26, .12); stroke: var(--amber); stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 1 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.qr1, .qt-p1 { --x: 60; --y: 60; }
.qr2, .qt-p2 { --x: 170; --y: 64; }
.qt-cur { --x: 170; --y: 64; }
.lines { --x: 36; --y: 88; z-index: 5; display: block; width: calc(168 * var(--u)); padding: calc(5 * var(--u)) calc(7 * var(--u)); border-radius: calc(7 * var(--u)); }
.lines-r { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(13 * var(--u)); border-bottom: .5px solid var(--line); font: 600 calc(8 * var(--u)) / 1 var(--sans); color: var(--ink); white-space: nowrap; }
.lines-r b { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 750 calc(5.2 * var(--u)) / calc(9 * var(--u)) var(--sans); text-align: center; flex: none; }
.lines .caret { margin-left: 0; height: calc(8 * var(--u)); }
.lines .qt-c1 { visibility: hidden; }

/* ---------- rounds ---------- */
.sc-round { --u: calc(100cqw / 360); aspect-ratio: 360 / 230; border-radius: clamp(14px, 2vw, 22px); box-shadow: var(--shadow); max-width: 64rem; margin-inline: auto; }
.src { position: absolute; left: calc(14 * var(--u)); width: calc(108 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--oc-bg); box-shadow: var(--shadow-s); overflow: hidden; }
.src1 { top: calc(14 * var(--u)); }
.src2 { top: calc(84 * var(--u)); }
.src3 { top: calc(154 * var(--u)); }
.src-h { display: block; height: calc(11 * var(--u)); padding-left: calc(5 * var(--u)); background: var(--oc-card); border-bottom: 1px solid var(--oc-line); font: 500 calc(5 * var(--u)) / calc(11 * var(--u)) var(--mono); color: var(--oc-ink-2); white-space: nowrap; }
.src i { display: block; height: calc(5 * var(--u)); margin: calc(6 * var(--u)) calc(8 * var(--u)) 0; border-radius: 2px; background: var(--oc-line); }
.src i:nth-child(3) { width: 45%; }
.src i:nth-child(4) { width: 65%; }
.rp1 { --x: 84; --y: 52; }
.rp2 { --x: 62; --y: 122; }
.rp3 { --x: 92; --y: 192; }
.rp1 .n { opacity: 0; }
.rp1 .ok { opacity: 1; }
.rp1 .head { background: var(--green); }
.fly { width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: calc(-3.5 * var(--u)) 0 0 calc(-3.5 * var(--u)); border-radius: 50%; background: var(--pin); box-shadow: 0 0 calc(6 * var(--u)) rgba(255, 163, 26, .7); opacity: 0; z-index: 8; }
.rstack { --x: 164; --y: 100; opacity: 1; }
.rstack b { overflow: hidden; }
.roll3 { display: flex; flex-direction: column; transform: translateY(calc(-16 * var(--u))); }
.roll3 span { height: calc(8 * var(--u)); line-height: calc(8 * var(--u)); }
.rkey { --x: 166; --y: 132; z-index: 8; opacity: 0; }
.rkey .kbd { font-size: calc(8 * var(--u)); height: calc(13 * var(--u)); min-width: calc(16 * var(--u)); border-radius: calc(3 * var(--u)); background: var(--glass-2); color: var(--ink); box-shadow: var(--shadow-s); }
.dst { position: absolute; left: calc(222 * var(--u)); width: calc(126 * var(--u)); height: calc(38 * var(--u)); padding: calc(7 * var(--u)) calc(8 * var(--u)); border-radius: calc(7 * var(--u)); display: flex; flex-direction: column; justify-content: center; gap: calc(2 * var(--u)); }
.dst b { font: 650 calc(6.4 * var(--u)) / 1.2 var(--sans); white-space: nowrap; }
.dst span { font: 500 calc(5 * var(--u)) / 1.2 var(--sans); color: var(--ink-2); white-space: nowrap; }
.dst1 { top: calc(16 * var(--u)); }
.dst2 { top: calc(96 * var(--u)); }
.dst3 { top: calc(176 * var(--u)); }
.back { position: absolute; left: calc(222 * var(--u)); top: calc(60 * var(--u)); display: flex; align-items: center; gap: calc(3 * var(--u)); height: calc(16 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(3 * var(--u)); border-radius: calc(5 * var(--u)); font: 600 calc(5.2 * var(--u)) / 1 var(--sans); white-space: nowrap; }
.back .ok { display: inline-grid; place-items: center; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--green); color: #fff; font-size: calc(6 * var(--u)); }

.dests { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 2rem 2.5rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.dest-col h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; margin-bottom: .6rem; }
.dest-col h3 span { font: 600 .8125rem/1.3 var(--sans); letter-spacing: 0; color: var(--amber-ink); }
.dest-col p { color: var(--ink-2); font-size: 1rem; }
.names { list-style: none; margin: 0 0 1rem; padding: 0; columns: 2; column-gap: 1.25rem; border-top: .5px solid var(--line); }
.names li { break-inside: avoid; padding: .45rem 0; border-bottom: .5px solid var(--line); font-size: .9375rem; }
.echo { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font: .8125rem/1.45 var(--mono); color: var(--ink); background: var(--page-2); border-radius: 12px; padding: .7rem .8rem; box-shadow: 0 0 0 .5px var(--line); }
.echo-ok { display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .05rem; border-radius: 50%; background: var(--green); color: #fff; font: 700 .6875rem/1 var(--sans); }
.tree { margin: 0; padding: .9rem 1rem; border-radius: 14px; background: var(--page-2); box-shadow: 0 0 0 .5px var(--line); font: .8125rem/1.7 var(--mono); color: var(--ink-2); white-space: pre; overflow-x: auto; }
.tree b { color: var(--ink); font-weight: 600; }

/* ---------- context ---------- */
.split { display: grid; gap: 2.5rem; align-items: center; }
.split .sec-head { margin-bottom: 0; }
.ctx { margin: 1.75rem 0 0; display: grid; grid-template-columns: 1fr; border-top: .5px solid var(--line); }
.ctx dt { font-weight: 650; padding-top: .8rem; }
.ctx dd { margin: .15rem 0 0; padding-bottom: .8rem; border-bottom: .5px solid var(--line); color: var(--ink-2); font-size: 1rem; }
.bundle { border-radius: 22px; padding: 1.1rem 1.2rem 1.2rem; min-width: 0; }
.bundle-h { display: flex; gap: .75rem; align-items: center; padding-bottom: .9rem; border-bottom: .5px solid var(--line); }
.bundle-h > span { display: flex; flex-direction: column; }
.bundle-h > span span { color: var(--ink-2); font-size: .875rem; }
.bundle-n { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--pin); color: var(--pin-ink); font: 750 .9375rem/1.9rem var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--pin-ring), 0 6px 14px -4px rgba(0, 0, 0, .35); flex: none; }
.bundle-b { margin: .9rem 0 0; font: .8125rem/1.75 var(--mono); color: var(--ink); white-space: pre; overflow-x: auto; }
.bundle-b .k { color: var(--ink-2); }
.bundle-b .e { color: #b5371f; }

/* ---------- privacy ---------- */
.privacy { display: grid; gap: 2rem; align-items: center; border-radius: 28px; padding: clamp(1.5rem, 5vw, 3.5rem); }
.privacy h2 { margin-bottom: 1rem; }
.privacy p { color: var(--ink-2); font-size: 1.0625rem; }
.privacy p:last-child { margin-bottom: 0; }
.mac { width: min(100%, 17rem); margin: 1rem auto; }
.mac-scr { position: relative; aspect-ratio: 16 / 10.5; border-radius: 12px; background: var(--wall); box-shadow: 0 0 0 5px var(--ink), var(--shadow); outline: 1.5px dashed var(--amber-line); outline-offset: 14px; overflow: hidden; }
.mac-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px var(--amber-soft); }
.mac-ring { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1.5px solid var(--amber-line); opacity: .35; transform: scale(.6); }
.mac-ring2 { transform: scale(1); opacity: .15; }
.mac-foot { display: block; width: 30%; height: 16px; margin: 5px auto 0; border-radius: 0 0 6px 6px; background: var(--ink); opacity: .75; }

/* ---------- facts ---------- */
.facts-grid { display: grid; gap: 2rem 3rem; }
.facts-h { font-size: 1.0625rem; margin-bottom: .75rem; }
.facts { display: grid; grid-template-columns: 1fr; margin: 0; border-top: .5px solid var(--line); }
.facts dt { color: var(--ink-2); font-size: .875rem; padding-top: .8rem; }
.facts dd { margin: 0; padding: .1rem 0 .8rem; border-bottom: .5px solid var(--line); }

@media (min-width: 40rem) {
  .facts { grid-template-columns: 11rem 1fr; }
  .facts dt { padding-block: .8rem; border-bottom: .5px solid var(--line); }
  .facts dd { padding-block: .8rem; }
  .ctx { grid-template-columns: 12rem 1fr; }
  .ctx dt { padding-block: .8rem; border-bottom: .5px solid var(--line); }
  .ctx dd { margin: 0; padding-top: .8rem; }
}
@media (min-width: 56rem) {
  .way { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 2.5rem; padding: 12px; }
  .way > .scene { grid-row: 1 / -1; grid-column: 1; }
  .way > :not(.scene) { grid-column: 2; margin-inline: 0 1.5rem; }
  .way > .way-k { grid-row: 2; margin-top: 0; }
  .way > h3 { grid-row: 3; }
  .way > p:last-child { grid-row: 4; }
  .way:nth-child(2) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .way:nth-child(2) > .scene { grid-column: 2; }
  .way:nth-child(2) > :not(.scene) { grid-column: 1; margin-inline: 1.5rem 0; }
  .split { grid-template-columns: 1fr 1.05fr; gap: 4rem; }
  .privacy { grid-template-columns: 16rem 1fr; gap: 3.5rem; }
  .facts-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- scene choreography: 8 s loops for the three ways, 10 s for the round ----------
   talk: ⌥ held 0.4 s, pointer arrives 1.3 s, "Dieser" and pin 1.5 s, release 3.4 s, card becomes a label 4.2 s.
   annotate: ⌃⌥P 0.2 s, crosshair, click 1.5 s, typing 2.1 to 3.1 s, second click 4.4 s, spoken note 5.1 s.
   without voice: ring fills 1.0 s, pin 1.55 s, second ring 2.4 s, pin 2.95 s, one typed line per pin from 3.7 s.
   round: three pins join the stack, ↩ at 3.0 s, every destination lights up, back-channel at 5.0 s. */
@media (prefers-reduced-motion: no-preference) {
  .scene { --loop: 8s; }
  .sc-round { --loop: 10s; }
  .scene .wave i { animation: h-wave .9s ease-in-out infinite alternate; }
  .scene .wave i:nth-child(2) { animation-delay: -.3s; }
  .scene .wave i:nth-child(3) { animation-delay: -.55s; }
  .scene .wave i:nth-child(4) { animation-delay: -.15s; }
  .scene .caret { animation: s-blink 1s steps(1) infinite; }

  .sc-talk .ta-key, .sc-talk .edge { animation: t-key var(--loop) linear infinite both; }
  .ta-cur { animation: t-cur var(--loop) linear infinite both; }
  .ta-card { animation: t-card var(--loop) linear infinite both; }
  .ta-w1 { animation: t-w1 var(--loop) linear infinite both, t-hl var(--loop) linear infinite both; }
  .ta-w1 sup { animation: t-sup var(--loop) linear infinite both; }
  .ta-w2 { animation: t-w2 var(--loop) linear infinite both; }
  .ta-w3 { animation: t-w3 var(--loop) linear infinite both; }
  .ta-w4 { animation: t-w4 var(--loop) linear infinite both; }
  .ta-w5 { animation: t-w5 var(--loop) linear infinite both; }
  .ta-pin { animation: t-pin-o var(--loop) linear infinite both; }
  .ta-pin .head { animation: t-pin-h var(--loop) linear infinite both; }
  .ta-pin .stem { animation: t-pin-s var(--loop) linear infinite both; }
  .ta-lab { animation: t-lab var(--loop) linear infinite both; }

  .nt-key { animation: n-key var(--loop) linear infinite both; }
  .xh { animation: n-xh var(--loop) linear infinite both; }
  .nt-c1 { animation: n-c1 var(--loop) linear infinite both; }
  .nt-c2 { animation: n-c2 var(--loop) linear infinite both; }
  .nt-p1 { animation: n-p1-o var(--loop) linear infinite both; }
  .nt-p1 .head { animation: n-p1-h var(--loop) linear infinite both; }
  .nt-p1 .stem { animation: n-p1-s var(--loop) linear infinite both; }
  .nt-p2 { animation: n-p2-o var(--loop) linear infinite both; }
  .nt-p2 .head { animation: n-p2-h var(--loop) linear infinite both; }
  .nt-p2 .stem { animation: n-p2-s var(--loop) linear infinite both; }
  .nt-n1 { animation: n-n1 var(--loop) linear infinite both; }
  .nt-t1 { animation: n-t1 var(--loop) steps(13, end) infinite both; }
  .nt-n2 { animation: n-n2 var(--loop) linear infinite both; }
  .nt-w1 { animation: n-w1 var(--loop) linear infinite both; }
  .nt-w2 { animation: n-w2 var(--loop) linear infinite both; }
  .nt-w3 { animation: n-w3 var(--loop) linear infinite both; }

  .qt-key { animation: q-key var(--loop) linear infinite both; }
  .qt-cur { animation: q-cur var(--loop) linear infinite both; }
  .qr1 { animation: q-r1 var(--loop) linear infinite both; }
  .qr1 circle { animation: q-r1c var(--loop) linear infinite both; }
  .qr2 { animation: q-r2 var(--loop) linear infinite both; }
  .qr2 circle { animation: q-r2c var(--loop) linear infinite both; }
  .qt-p1 { animation: q-p1-o var(--loop) linear infinite both; }
  .qt-p1 .head { animation: q-p1-h var(--loop) linear infinite both; }
  .qt-p1 .stem { animation: q-p1-s var(--loop) linear infinite both; }
  .qt-p2 { animation: q-p2-o var(--loop) linear infinite both; }
  .qt-p2 .head { animation: q-p2-h var(--loop) linear infinite both; }
  .qt-p2 .stem { animation: q-p2-s var(--loop) linear infinite both; }
  .qt-card { animation: q-card var(--loop) linear infinite both; }
  .qt-t1 { animation: q-t1 var(--loop) steps(8, end) infinite both; }
  .qt-t2 { animation: q-t2 var(--loop) steps(9, end) infinite both; }
  .lines .qt-c1 { animation: q-c1 var(--loop) linear infinite both, s-blink 1s steps(1) infinite; }
  .lines .qt-c2 { animation: q-c2 var(--loop) linear infinite both, s-blink 1s steps(1) infinite; }

  .rp1 { animation: r-p1-o var(--loop) linear infinite both; }
  .rp1 .head { animation: r-p1-h var(--loop) linear infinite both, r-done var(--loop) linear infinite both; }
  .rp1 .stem { animation: r-p1-s var(--loop) linear infinite both, r-done var(--loop) linear infinite both; }
  .rp1 .n { animation: r-n var(--loop) linear infinite both; }
  .rp1 .ok { animation: r-ok var(--loop) linear infinite both; }
  .rp2 { animation: r-p2-o var(--loop) linear infinite both; }
  .rp2 .head { animation: r-p2-h var(--loop) linear infinite both; }
  .rp2 .stem { animation: r-p2-s var(--loop) linear infinite both; }
  .rp3 { animation: r-p3-o var(--loop) linear infinite both; }
  .rp3 .head { animation: r-p3-h var(--loop) linear infinite both; }
  .rp3 .stem { animation: r-p3-s var(--loop) linear infinite both; }
  .fa1 { animation: r-fa1 var(--loop) linear infinite both; }
  .fa2 { animation: r-fa2 var(--loop) linear infinite both; }
  .fa3 { animation: r-fa3 var(--loop) linear infinite both; }
  .rstack { animation: r-stack var(--loop) linear infinite both; }
  .roll3 { animation: r-roll var(--loop) linear infinite both; }
  .rkey { animation: r-key var(--loop) linear infinite both; }
  .fb1 { animation: r-fb1 var(--loop) linear infinite both; }
  .fb2 { animation: r-fb2 var(--loop) linear infinite both; }
  .fb3 { animation: r-fb3 var(--loop) linear infinite both; }
  .dst { animation: r-dst var(--loop) linear infinite both; }
  .back { animation: r-back var(--loop) linear infinite both; }

  .mac-ring { animation: m-breathe 4.8s cubic-bezier(.4, 0, .2, 1) infinite; }
  .mac-ring2 { animation-delay: -2.4s; }
}
.dst { outline: calc(1.1 * var(--u)) solid rgba(255, 163, 26, 0); outline-offset: calc(1 * var(--u)); }

@keyframes s-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes m-breathe { 0% { transform: scale(.35); opacity: .6; } 100% { transform: scale(1.25); opacity: 0; } }

/* scroll reveals for sections below the hero: only where scroll timelines exist, static everywhere else */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 65%; }
  }
}
@keyframes rv-in { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }

@keyframes t-key { 0%, 4.38% { opacity: 0; } 6.88%, 42.5% { opacity: 1; } 45.62%, 100% { opacity: 0; } }
@keyframes t-cur { 0% { --x: 60; --y: 130; opacity: 0; } 3.75% { opacity: 1; } 7.5% { --x: 60; --y: 130; animation-timing-function: cubic-bezier(.45, 0, .9, .6); } 11.88% { --x: 118; --y: 108; animation-timing-function: cubic-bezier(.15, .45, .3, 1); } 16.25% { --x: 165; --y: 92; } 90% { --x: 165; --y: 92; opacity: 1; } 95%, 100% { --x: 165; --y: 92; opacity: 0; } }
@keyframes t-card { 0%, 8.75% { --s: .6; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 13.12% { --s: 1; opacity: 1; } 43.12% { --x: 16; --y: 104; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .9, .6); } 49.38%, 100% { --x: 120; --y: 82; --s: .25; opacity: 0; } }
@keyframes t-w1 { 0%, 15.62% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 20%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes t-w2 { 0%, 18.75% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 23.12%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes t-w3 { 0%, 21.88% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 26.25%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes t-w4 { 0%, 24.38% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 28.75%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes t-w5 { 0%, 26.25% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 30.63%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes t-hl { 0%, 16.25% { background-size: 0% 100%; } 20%, 100% { background-size: 100% 100%; } }
@keyframes t-sup { 0%, 18.75% { transform: scale(0); } 20.25% { transform: scale(1.3); } 21.5% { transform: scale(.9); } 23.12%, 100% { transform: none; } }
@keyframes t-pin-h { 0%, 18.75% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 20.25% { opacity: 1; transform: scale(1.18, .82); } 21.25% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 22.75%, 100% { opacity: 1; transform: none; } }
@keyframes t-pin-s { 0%, 18.75% { transform: scaleY(0); } 19.75%, 100% { transform: none; } }
@keyframes t-pin-o { 0%, 91.25% { opacity: 1; } 96.25%, 100% { opacity: 0; } }
@keyframes t-lab { 0%, 45% { --x: 100; --y: 104; --s: .4; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 46.25% { opacity: 1; } 52.5% { --x: 157.5; --y: 69.5; --s: 1; opacity: 1; } 90% { --x: 157.5; --y: 69.5; opacity: 1; } 95%, 100% { --x: 157.5; --y: 69.5; opacity: 0; } }
@keyframes n-key { 0%, 1.88% { opacity: 0; } 4.38%, 15% { opacity: 1; } 18.12%, 100% { opacity: 0; } }
@keyframes n-xh { 0% { --x: 120; --y: 120; opacity: 0; } 6.25% { --x: 120; --y: 120; opacity: 1; animation-timing-function: cubic-bezier(.15, .45, .3, 1); } 16.25% { --x: 41; --y: 36; } 45% { --x: 41; --y: 36; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 53.75% { --x: 160; --y: 96; } 86.25% { --x: 160; --y: 96; opacity: 1; } 90%, 100% { --x: 160; --y: 96; opacity: 0; } }
@keyframes n-c1 { 0%, 18.75% { --s: .3; opacity: 0; } 19% { --s: .3; opacity: .95; } 25.62%, 100% { --s: 1.6; opacity: 0; } }
@keyframes n-c2 { 0%, 55% { --s: .3; opacity: 0; } 55.25% { --s: .3; opacity: .95; } 61.88%, 100% { --s: 1.6; opacity: 0; } }
@keyframes n-p1-h { 0%, 19% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 20.5% { opacity: 1; transform: scale(1.18, .82); } 21.5% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes n-p1-s { 0%, 19% { transform: scaleY(0); } 20%, 100% { transform: none; } }
@keyframes n-p1-o { 0%, 91.25% { opacity: 1; } 96.25%, 100% { opacity: 0; } }
@keyframes n-p2-h { 0%, 55.25% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 56.75% { opacity: 1; transform: scale(1.18, .82); } 57.75% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 59.25%, 100% { opacity: 1; transform: none; } }
@keyframes n-p2-s { 0%, 55.25% { transform: scaleY(0); } 56.25%, 100% { transform: none; } }
@keyframes n-p2-o { 0%, 91.25% { opacity: 1; } 96.25%, 100% { opacity: 0; } }
@keyframes n-n1 { 0%, 21.88% { --s: .85; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 26.25% { --s: 1; opacity: 1; } 55% { --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .9, .6); } 58.75%, 100% { --s: .6; opacity: 0; } }
@keyframes n-t1 { 0%, 26.88% { max-width: 0; } 38.75%, 100% { max-width: calc(58 * var(--u)); } }
@keyframes n-n2 { 0%, 58.13% { --s: .85; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 62.5% { --s: 1; opacity: 1; } 90% { --s: 1; opacity: 1; } 95%, 100% { --s: 1; opacity: 0; } }
@keyframes n-w1 { 0%, 63.75% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 68.12%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes n-w2 { 0%, 66.88% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 71.25%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes n-w3 { 0%, 70% { opacity: 0; transform: translateY(.34em); filter: blur(3px); } 74.37%, 100% { opacity: 1; transform: none; filter: none; } }
@keyframes q-key { 0%, 3.75% { opacity: 0; } 6.25%, 41.25% { opacity: 1; } 44.38%, 100% { opacity: 0; } }
@keyframes q-cur { 0% { --x: 110; --y: 130; opacity: 0; } 3.75% { opacity: 1; } 5% { --x: 110; --y: 130; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 12.5% { --x: 60; --y: 60; } 22.5% { --x: 60; --y: 60; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 30% { --x: 170; --y: 64; } 90% { --x: 170; --y: 64; opacity: 1; } 95%, 100% { --x: 170; --y: 64; opacity: 0; } }
@keyframes q-r1 { 0%, 11.88% { opacity: 0; } 12.5%, 19.38% { opacity: 1; } 22.5%, 100% { opacity: 0; } }
@keyframes q-r1c { 0%, 12.5% { stroke-dashoffset: 1; } 18.75%, 100% { stroke-dashoffset: 0; } }
@keyframes q-r2 { 0%, 29.38% { opacity: 0; } 30%, 36.88% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes q-r2c { 0%, 30% { stroke-dashoffset: 1; } 36.25%, 100% { stroke-dashoffset: 0; } }
@keyframes q-p1-h { 0%, 19.38% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 20.88% { opacity: 1; transform: scale(1.18, .82); } 21.88% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 23.38%, 100% { opacity: 1; transform: none; } }
@keyframes q-p1-s { 0%, 19.38% { transform: scaleY(0); } 20.38%, 100% { transform: none; } }
@keyframes q-p1-o { 0%, 91.25% { opacity: 1; } 96.25%, 100% { opacity: 0; } }
@keyframes q-p2-h { 0%, 36.88% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 38.38% { opacity: 1; transform: scale(1.18, .82); } 39.38% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 40.88%, 100% { opacity: 1; transform: none; } }
@keyframes q-p2-s { 0%, 36.88% { transform: scaleY(0); } 37.88%, 100% { transform: none; } }
@keyframes q-p2-o { 0%, 91.25% { opacity: 1; } 96.25%, 100% { opacity: 0; } }
@keyframes q-card { 0%, 42.5% { --y: 100; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 47.5% { --y: 88; opacity: 1; } 90% { --y: 88; opacity: 1; } 95%, 100% { --y: 88; opacity: 0; } }
@keyframes q-t1 { 0%, 46.88% { max-width: 0; } 54.37%, 100% { max-width: calc(40 * var(--u)); } }
@keyframes q-t2 { 0%, 58.13% { max-width: 0; } 66.88%, 100% { max-width: calc(46 * var(--u)); } }
@keyframes q-c1 { 0%, 46.25% { visibility: hidden; } 46.38%, 56.25% { visibility: visible; } 56.38%, 100% { visibility: hidden; } }
@keyframes q-c2 { 0%, 56.25% { visibility: hidden; } 56.38%, 100% { visibility: visible; } }
@keyframes r-p1-h { 0%, 4% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 5.2% { opacity: 1; transform: scale(1.18, .82); } 6% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 7.2%, 100% { opacity: 1; transform: none; } }
@keyframes r-p1-s { 0%, 4% { transform: scaleY(0); } 4.8%, 100% { transform: none; } }
@keyframes r-p1-o { 0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes r-p2-h { 0%, 11% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 12.2% { opacity: 1; transform: scale(1.18, .82); } 13% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 14.2%, 100% { opacity: 1; transform: none; } }
@keyframes r-p2-s { 0%, 11% { transform: scaleY(0); } 11.8%, 100% { transform: none; } }
@keyframes r-p2-o { 0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes r-p3-h { 0%, 18% { opacity: 0; transform: translateY(calc(-9 * var(--u))) scale(.5); } 19.2% { opacity: 1; transform: scale(1.18, .82); } 20% { transform: translateY(calc(-2.5 * var(--u))) scale(.94, 1.08); } 21.2%, 100% { opacity: 1; transform: none; } }
@keyframes r-p3-s { 0%, 18% { transform: scaleY(0); } 18.8%, 100% { transform: none; } }
@keyframes r-p3-o { 0%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes r-done { 0%, 50% { background: var(--pin); } 51.2%, 100% { background: var(--green); } }
@keyframes r-n { 0%, 50% { opacity: 1; } 51.2%, 100% { opacity: 0; } }
@keyframes r-ok { 0%, 50% { opacity: 0; } 51.2%, 100% { opacity: 1; } }
@keyframes r-fa1 { 0%, 7% { --x: 84; --y: 38.5; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 7.5% { opacity: 1; } 12.5% { --x: 177; --y: 108; opacity: 1; } 13.5%, 100% { --x: 177; --y: 108; opacity: 0; } }
@keyframes r-fa2 { 0%, 14% { --x: 62; --y: 108.5; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 14.5% { opacity: 1; } 19.5% { --x: 177; --y: 108; opacity: 1; } 20.5%, 100% { --x: 177; --y: 108; opacity: 0; } }
@keyframes r-fa3 { 0%, 21% { --x: 92; --y: 178.5; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 21.5% { opacity: 1; } 26.5% { --x: 177; --y: 108; opacity: 1; } 27.5%, 100% { --x: 177; --y: 108; opacity: 0; } }
@keyframes r-stack { 0%, 12% { --s: .4; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 14.5% { --s: 1; opacity: 1; } 19% { --s: 1; } 20% { --s: 1.1; } 22% { --s: 1; } 26% { --s: 1; } 27% { --s: 1.1; } 29% { --s: 1; opacity: 1; } 31% { --s: 1; opacity: 1; } 33%, 100% { --s: .5; opacity: 0; } }
@keyframes r-roll { 0%, 19% { transform: none; } 20.5%, 26% { transform: translateY(calc(-8 * var(--u))); } 27.5%, 100% { transform: translateY(calc(-16 * var(--u))); } }
@keyframes r-key { 0%, 26% { --s: .8; opacity: 0; } 28% { --s: 1; opacity: 1; } 29.5% { --s: 1; } 30% { --s: .88; } 31.5% { --s: 1; opacity: 1; } 35%, 100% { --s: 1; opacity: 0; } }
@keyframes r-fb1 { 0%, 31% { --x: 177; --y: 108; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31.5% { opacity: 1; } 37% { --x: 228; --y: 35; opacity: 1; } 38.5%, 100% { --x: 228; --y: 35; opacity: 0; } }
@keyframes r-fb2 { 0%, 31% { --x: 177; --y: 108; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31.5% { opacity: 1; } 37% { --x: 228; --y: 115; opacity: 1; } 38.5%, 100% { --x: 228; --y: 115; opacity: 0; } }
@keyframes r-fb3 { 0%, 31% { --x: 177; --y: 108; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31.5% { opacity: 1; } 37% { --x: 228; --y: 195; opacity: 1; } 38.5%, 100% { --x: 228; --y: 195; opacity: 0; } }
@keyframes r-dst { 0%, 36.5% { outline-color: rgba(255, 163, 26, 0); } 38% { outline-color: rgba(255, 163, 26, .95); } 46%, 100% { outline-color: rgba(255, 163, 26, 0); } }
@keyframes r-back { 0%, 47% { opacity: 0; transform: translateY(calc(-6 * var(--u))) scale(.92); } 51% { opacity: 1; transform: none; } 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }

/* ---------- phone compositions (below 45rem) ----------
   A phone shows each scene in a portrait design space instead of shrinking the desktop one: the hero is 220 × 290
   units, the three ways 200 × 172, the round 200 × 248. The parts keep their names and the keyframes keep their
   timing; only positions move, so every scene plays the same gesture with text large enough to read.
   Hero: menu bar on top, the browser window, the card over its chart, Claude Code below. The round flows from
   the sources in a row through the stack down to the destinations. */
@media (max-width: 45rem) {
  /* portrait scenes stay phone sized on small tablets */
  .stage-fig .stage { max-width: 30rem; margin-inline: auto; }
  .stage { aspect-ratio: 220 / 290; }
  .world { --u: calc(100cqw / 220); }
  .fx-d { display: none; }
  .fx-m { display: block; }
  .fx-m .trail { stroke-width: .9; }
  .fx-m .thr { stroke-width: .45; }

  .mb { height: calc(12 * var(--u)); gap: calc(6 * var(--u)); font-size: calc(6.4 * var(--u)); }
  .mb > span:nth-of-type(3), .mb > span:nth-of-type(4) { display: none; }

  .win { left: calc(10 * var(--u)); top: calc(20 * var(--u)); width: calc(200 * var(--u)); height: calc(156 * var(--u)); }
  .url { left: calc(46 * var(--u)); width: calc(108 * var(--u)); font-size: calc(5.4 * var(--u)); }
  .side { display: none; }
  .oc-h { left: calc(12 * var(--u)); top: calc(22 * var(--u)); }
  .oc-btn { left: calc(132 * var(--u)); top: calc(24 * var(--u)); width: calc(54 * var(--u)); height: calc(12 * var(--u)); font-size: calc(5.4 * var(--u)); line-height: calc(12 * var(--u)); }
  .kpis { left: calc(12 * var(--u)); top: calc(44 * var(--u)); width: calc(176 * var(--u)); height: calc(22 * var(--u)); gap: calc(5 * var(--u)); }
  .chart { left: calc(12 * var(--u)); top: calc(84 * var(--u)); width: calc(176 * var(--u)); height: calc(62 * var(--u)); }

  .term { left: calc(10 * var(--u)); top: calc(185 * var(--u)); width: calc(200 * var(--u)); height: calc(100 * var(--u)); font-size: calc(6.6 * var(--u)); line-height: calc(9.2 * var(--u)); }
  .term .tt { height: calc(12 * var(--u)); }

  .hl .tag { font-size: calc(5.8 * var(--u)); line-height: calc(9 * var(--u)); }
  .hl-btn { left: calc(139 * var(--u)); top: calc(41 * var(--u)); width: calc(60 * var(--u)); height: calc(18 * var(--u)); }
  .hl-btn .tag { left: auto; right: calc(-.7 * var(--u)); }
  .hl-gap { left: calc(18 * var(--u)); top: calc(85 * var(--u)); width: calc(184 * var(--u)); height: calc(20 * var(--u)); }

  .p1 { --x: 169; --y: 50; }
  .p2 { --x: 100; --y: 95; }

  .card { --x: 12; --y: 128; width: calc(196 * var(--u)); }
  .card .hdr { font-size: calc(7 * var(--u)); gap: calc(3 * var(--u)); padding: 0 calc(6 * var(--u)); }
  .dx sup { font-size: calc(5.4 * var(--u)); }

  .lab { font-size: calc(7 * var(--u)); }
  /* Pin 1 sits near the right edge, so its label grows to the left: anchored by its right edge, number last. */
  .stage .lab1 { --x: 176.5; --y: 29.5; left: auto; right: 100%; flex-direction: row-reverse; padding: 0 calc(1 * var(--u)) 0 calc(6 * var(--u)); transform-origin: calc(100% - 7.5 * var(--u)) 50%; }
  .lab2 { --x: 92.5; --y: 74.5; }
  .stack { --x: 150; --y: 22; }

  /* the three ways */
  .sc-talk, .sc-note, .sc-quiet { --u: calc(100cqw / 200); aspect-ratio: 200 / 172; }
  .sw { left: calc(10 * var(--u)); top: calc(10 * var(--u)); width: calc(180 * var(--u)); height: calc(152 * var(--u)); }
  .sc-talk .sw { height: calc(96 * var(--u)); }
  .sw-h { left: calc(12 * var(--u)); top: calc(18 * var(--u)); }
  .sw-l { left: calc(12 * var(--u)); top: calc(32 * var(--u)); width: calc(124 * var(--u)); }
  .sw-l2 { top: calc(40 * var(--u)); width: calc(90 * var(--u)); }
  .sw-btn { left: calc(70 * var(--u)); top: calc(60 * var(--u)); width: calc(56 * var(--u)); height: calc(18 * var(--u)); font-size: calc(7 * var(--u)); line-height: calc(18 * var(--u)); }
  .key { left: calc(14 * var(--u)); top: calc(150 * var(--u)); height: calc(14 * var(--u)); font-size: calc(6.4 * var(--u)); padding: 0 calc(4.5 * var(--u)) 0 calc(2.5 * var(--u)); }
  .key .kbd { font-size: calc(7 * var(--u)); height: calc(10 * var(--u)); min-width: calc(10 * var(--u)); }

  .ta-cur, .ta-pin { --x: 108; --y: 79; }
  .ta-card { --x: 10; --y: 110; width: calc(180 * var(--u)); }
  .mini-h { height: calc(10 * var(--u)); font-size: calc(6.4 * var(--u)); }
  .ta-lab { --x: 100.5; --y: 58.5; }

  .sw-logo { left: calc(12 * var(--u)); top: calc(22 * var(--u)); }
  .sc-note .sw-l { top: calc(52 * var(--u)); width: calc(70 * var(--u)); }
  .sc-note .sw-l2 { top: calc(60 * var(--u)); width: calc(52 * var(--u)); }
  .sw-box { left: calc(96 * var(--u)); top: calc(30 * var(--u)); width: calc(72 * var(--u)); height: calc(34 * var(--u)); box-shadow: 0 calc(50 * var(--u)) 0 calc(-1 * var(--u)) var(--oc-card); }
  .xh { --x: 142; --y: 86; }
  .xh-c { font-size: calc(6 * var(--u)); top: calc(-13 * var(--u)); }
  .nt-c1, .nt-p1 { --x: 37; --y: 38; }
  .nt-c2, .nt-p2 { --x: 142; --y: 86; }
  .note-h { font-size: calc(6.4 * var(--u)); line-height: calc(9 * var(--u)); }
  .note-f { font-size: calc(5.6 * var(--u)); gap: calc(2 * var(--u)); }
  .note-f .kbd { font-size: calc(5.6 * var(--u)); height: calc(8 * var(--u)); min-width: calc(8 * var(--u)); }
  .nt-n1 { --x: 46; --y: 46; width: calc(112 * var(--u)); }
  .nt-n2 { --x: 38; --y: 94; width: calc(98 * var(--u)); }

  .sw-a, .sw-b { top: calc(32 * var(--u)); }
  .sw-a { left: calc(12 * var(--u)); width: calc(72 * var(--u)); }
  .sw-b { left: calc(96 * var(--u)); width: calc(72 * var(--u)); }
  .qr1, .qt-p1 { --x: 58; --y: 60; }
  .qr2, .qt-p2, .qt-cur { --x: 142; --y: 62; }
  .lines { --x: 14; --y: 94; width: calc(172 * var(--u)); }
  .lines-r b { width: calc(10 * var(--u)); height: calc(10 * var(--u)); font-size: calc(6 * var(--u)); line-height: calc(10 * var(--u)); }

  /* the round */
  .sc-round { --u: calc(100cqw / 200); aspect-ratio: 200 / 248; max-width: 30rem; }
  .src { width: calc(60 * var(--u)); height: calc(44 * var(--u)); top: calc(10 * var(--u)); }
  .src1 { left: calc(6 * var(--u)); }
  .src2 { left: calc(70 * var(--u)); }
  .src3 { left: calc(134 * var(--u)); }
  .src-h { padding-left: calc(4 * var(--u)); font-size: calc(5.6 * var(--u)); overflow: hidden; }
  .src i { height: calc(4 * var(--u)); margin: calc(5 * var(--u)) calc(6 * var(--u)) 0; }
  .rp1 { --x: 40; --y: 46; }
  .rp2 { --x: 104; --y: 42; }
  .rp3 { --x: 164; --y: 48; }
  .rstack { --x: 87; --y: 68; }
  .rkey { --x: 89; --y: 96; }
  .dst { left: calc(8 * var(--u)); width: calc(184 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(8 * var(--u)); gap: calc(1.5 * var(--u)); }
  .dst b { font-size: calc(7.4 * var(--u)); }
  .dst span { font-size: calc(6.2 * var(--u)); }
  .dst1 { top: calc(118 * var(--u)); }
  .dst2 { top: calc(174 * var(--u)); }
  .dst3 { top: calc(210 * var(--u)); }
  .back { left: calc(8 * var(--u)); top: calc(152 * var(--u)); height: calc(17 * var(--u)); font-size: calc(6.6 * var(--u)); }
  .back .ok { width: calc(11 * var(--u)); height: calc(11 * var(--u)); font-size: calc(6.6 * var(--u)); }
}

@media (max-width: 45rem) and (prefers-reduced-motion: no-preference) {
  .stage .cur { animation-name: h-cur-m; }
  .stage .fx-m .trail { stroke-dasharray: 216.2 300; animation-name: h-trail-m; }
  .stage .card { animation-name: h-card-m; }
  .stage .lab1 { animation-name: h-lab1-m; }
  .stage .lab2 { animation-name: h-lab2-m; }
  .stage .stack { animation-name: h-stack-m; }
  .ta-cur { animation-name: t-cur-m; }
  .ta-card { animation-name: t-card-m; }
  .ta-lab { animation-name: t-lab-m; }
  .xh { animation-name: n-xh-m; }
  .qt-cur { animation-name: q-cur-m; }
  .qt-card { animation-name: q-card-m; }
  .fa1 { animation-name: r-fa1-m; }
  .fa2 { animation-name: r-fa2-m; }
  .fa3 { animation-name: r-fa3-m; }
  .fb1 { animation-name: r-fb1-m; }
  .fb2 { animation-name: r-fb2-m; }
  .fb3 { animation-name: r-fb3-m; }
}

@keyframes h-cur-m {
  0% { --x: 110; --y: 170; opacity: 0; }
  2.5% { opacity: 1; }
  4.17% { --x: 110; --y: 170; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  7.08% { --x: 140; --y: 110; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  9.58% { --x: 169; --y: 50; }
  20.83% { --x: 169; --y: 50; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  23.75% { --x: 135; --y: 74; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  27.5% { --x: 100; --y: 95; }
  88.33% { --x: 100; --y: 95; opacity: 1; }
  91.67%, 100% { --x: 100; --y: 95; opacity: 0; }
}
@keyframes h-trail-m {
  0% { stroke-dashoffset: 216.2; opacity: .5; }
  4.17% { stroke-dashoffset: 216.2; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  7.08% { stroke-dashoffset: 149.1; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  9.58% { stroke-dashoffset: 82.4; }
  20.83% { stroke-dashoffset: 82.4; animation-timing-function: cubic-bezier(.45, 0, .9, .6); }
  23.75% { stroke-dashoffset: 40.8; animation-timing-function: cubic-bezier(.15, .45, .3, 1); }
  27.5% { stroke-dashoffset: 0; }
  41.67% { stroke-dashoffset: 0; opacity: .5; }
  50%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes h-card-m {
  0%, 6.67% { --x: 40; --y: 116; --s: .25; --r: 0; --h: 54; opacity: 0; }
  8.33% { opacity: 1; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  10.42% { --x: 8; --y: 122; --s: 1; --r: -1.5; }
  11.67% { --x: 14; --y: 130; --r: .5; }
  12.92%, 21.67% { --x: 12; --y: 128; --r: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  28.75% { --x: 15; --y: 133; --r: 1.2; }
  30% { --x: 11; --y: 126.5; --r: -.3; }
  31.25% { --x: 12; --y: 128; --r: 0; }
  46.67% { --h: 54; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  49.17% { --h: 16; }
  50% { --x: 12; --y: 128; --s: 1; --h: 16; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  54.17%, 100% { --x: 78; --y: 2; --s: .06; --h: 16; opacity: 0; }
}
@keyframes h-lab1-m {
  0%, 44.58% { --x: 101; --y: 142; --s: .9; opacity: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  45.3% { opacity: 1; }
  49.17% { --x: 179.5; --y: 26.5; --s: 1.04; }
  50.83%, 66.67% { --x: 176.5; --y: 29.5; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  69.17%, 100% { --x: 176.5; --y: 29.5; --s: .2; opacity: 0; }
}
@keyframes h-lab2-m {
  0%, 45.17% { --x: 21; --y: 155; --s: .9; opacity: 0; animation-timing-function: cubic-bezier(.3, .7, .4, 1); }
  45.9% { opacity: 1; }
  49.75% { --x: 94.5; --y: 71.5; --s: 1.04; }
  51.42%, 66.67% { --x: 92.5; --y: 74.5; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .75, .3); }
  69.17%, 100% { --x: 92.5; --y: 74.5; --s: .2; opacity: 0; }
}
@keyframes h-stack-m {
  0%, 70% { --x: 163; --y: 2; --s: .2; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
  71% { opacity: 1; }
  74.17%, 77.5% { --x: 150; --y: 22; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .7, .6); }
  79.58% { --x: 132; --y: 110; --s: .85; }
  81.67% { --x: 100; --y: 205; --s: .45; opacity: 1; }
  82.5%, 100% { --x: 100; --y: 207; --s: .4; opacity: 0; }
}
@keyframes t-cur-m { 0% { --x: 40; --y: 150; opacity: 0; } 3.75% { opacity: 1; } 7.5% { --x: 40; --y: 150; animation-timing-function: cubic-bezier(.45, 0, .9, .6); } 11.88% { --x: 76; --y: 112; animation-timing-function: cubic-bezier(.15, .45, .3, 1); } 16.25% { --x: 108; --y: 79; } 90% { --x: 108; --y: 79; opacity: 1; } 95%, 100% { --x: 108; --y: 79; opacity: 0; } }
@keyframes t-card-m { 0%, 8.75% { --s: .6; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 13.12% { --s: 1; opacity: 1; } 43.12% { --x: 10; --y: 110; --s: 1; opacity: 1; animation-timing-function: cubic-bezier(.45, 0, .9, .6); } 49.38%, 100% { --x: 50; --y: 62; --s: .25; opacity: 0; } }
@keyframes t-lab-m { 0%, 45% { --x: 60; --y: 122; --s: .4; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 46.25% { opacity: 1; } 52.5% { --x: 100.5; --y: 58.5; --s: 1; opacity: 1; } 90% { --x: 100.5; --y: 58.5; opacity: 1; } 95%, 100% { --x: 100.5; --y: 58.5; opacity: 0; } }
@keyframes n-xh-m { 0% { --x: 100; --y: 140; opacity: 0; } 6.25% { --x: 100; --y: 140; opacity: 1; animation-timing-function: cubic-bezier(.15, .45, .3, 1); } 16.25% { --x: 37; --y: 38; } 45% { --x: 37; --y: 38; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 53.75% { --x: 142; --y: 86; } 86.25% { --x: 142; --y: 86; opacity: 1; } 90%, 100% { --x: 142; --y: 86; opacity: 0; } }
@keyframes q-cur-m { 0% { --x: 100; --y: 145; opacity: 0; } 3.75% { opacity: 1; } 5% { --x: 100; --y: 145; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 12.5% { --x: 58; --y: 60; } 22.5% { --x: 58; --y: 60; animation-timing-function: cubic-bezier(.4, 0, .2, 1); } 30% { --x: 142; --y: 62; } 90% { --x: 142; --y: 62; opacity: 1; } 95%, 100% { --x: 142; --y: 62; opacity: 0; } }
@keyframes q-card-m { 0%, 42.5% { --y: 106; opacity: 0; animation-timing-function: cubic-bezier(.22, 1, .36, 1); } 47.5% { --y: 94; opacity: 1; } 90% { --y: 94; opacity: 1; } 95%, 100% { --y: 94; opacity: 0; } }
@keyframes r-fa1-m { 0%, 7% { --x: 40; --y: 32.5; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 7.5% { opacity: 1; } 12.5% { --x: 100; --y: 78; opacity: 1; } 13.5%, 100% { --x: 100; --y: 78; opacity: 0; } }
@keyframes r-fa2-m { 0%, 14% { --x: 104; --y: 28.5; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 14.5% { opacity: 1; } 19.5% { --x: 100; --y: 78; opacity: 1; } 20.5%, 100% { --x: 100; --y: 78; opacity: 0; } }
@keyframes r-fa3-m { 0%, 21% { --x: 164; --y: 34.5; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 21.5% { opacity: 1; } 26.5% { --x: 100; --y: 78; opacity: 1; } 27.5%, 100% { --x: 100; --y: 78; opacity: 0; } }
@keyframes r-fb1-m { 0%, 31% { --x: 100; --y: 78; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31.5% { opacity: 1; } 37% { --x: 8; --y: 133; opacity: 1; } 38.5%, 100% { --x: 8; --y: 133; opacity: 0; } }
@keyframes r-fb2-m { 0%, 31% { --x: 100; --y: 78; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31.5% { opacity: 1; } 37% { --x: 8; --y: 189; opacity: 1; } 38.5%, 100% { --x: 8; --y: 189; opacity: 0; } }
@keyframes r-fb3-m { 0%, 31% { --x: 100; --y: 78; opacity: 0; animation-timing-function: cubic-bezier(.5, 0, .3, 1); } 31.5% { opacity: 1; } 37% { --x: 8; --y: 225; opacity: 1; } 38.5%, 100% { --x: 8; --y: 225; opacity: 0; } }