/* ==========================================================================
   Capto — interactive product demo
   Everything inside .demo-stage is sized in --u, a container-relative unit
   (1u == 1px when the stage is 1180px wide, clamped so tiny embeds stay
   legible). That keeps the fake desktop proportional at any width instead of
   overflowing its frame.
   ========================================================================== */

.demo {
  position: relative;
}

.demo-stage {
  container-type: inline-size;
  --u: clamp(0.56px, calc(1cqw / 11.8), 1.12px);
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #05060a;
  isolation: isolate;
  user-select: none;
  touch-action: none;
  cursor: default;
  font-size: calc(13 * var(--u));
}
.demo-stage.is-armed {
  cursor: crosshair;
}
.demo-stage.compact {
  aspect-ratio: 16 / 10.6;
}
.hero-frame .demo-stage {
  border-radius: 0;
  box-shadow: none;
}
.demo:not(.is-hero) .demo-stage {
  border-radius: calc(22 * var(--u));
  box-shadow: var(--hair), var(--shadow);
}

/* --- Fake desktop ------------------------------------------------------ */
/* A dusk-coastline "wallpaper" built from gradients and clip-paths, so the
   stage reads as a real desktop without shipping a photo. */
.desk {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(178deg, #0b1024 0%, #16203c 30%, #2c3050 52%, #5c4450 70%, #96603f 86%, #b87a48 100%);
}
.desk-sky {
  position: absolute;
  inset: 0;
}
.desk-sky::before {
  /* low sun */
  content: "";
  position: absolute;
  left: 68%;
  top: 62%;
  width: calc(210 * var(--u));
  height: calc(210 * var(--u));
  margin: calc(-105 * var(--u)) 0 0 calc(-105 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 224, 168, 0.8) 0 16%, rgba(255, 160, 88, 0.3) 40%, transparent 70%);
  filter: blur(calc(8 * var(--u)));
}
.desk-sky::after {
  /* haze + top vignette */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 50% 100%, rgba(255, 160, 100, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(4, 6, 12, 0.62) 0%, transparent 36%),
    radial-gradient(130% 110% at 50% 50%, transparent 42%, rgba(3, 4, 9, 0.5) 100%);
}
.desk-ridge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  pointer-events: none;
}
.desk-ridge::before {
  /* far range */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #2b3350 0%, #1b2138 100%);
  opacity: 0.86;
  clip-path: polygon(0 62%, 9% 55%, 18% 60%, 28% 48%, 38% 57%, 48% 44%, 60% 55%, 70% 46%, 82% 58%, 92% 50%, 100% 57%, 100% 100%, 0 100%);
}
.desk-ridge::after {
  /* near range + water line */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #121728 0%, #080b13 62%, #0b1020 100%);
  clip-path: polygon(0 76%, 12% 70%, 24% 78%, 36% 68%, 50% 79%, 62% 71%, 74% 80%, 88% 72%, 100% 78%, 100% 100%, 0 100%);
}
.desk-icons {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(16 * var(--u));
  display: grid;
  gap: calc(14 * var(--u));
}
.desk-icons i {
  display: block;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.desk-icons i:first-child {
  background-image: url("../assets/logo-256.png");
  background-size: cover;
  box-shadow: 0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.4);
}

.taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9;
  height: calc(40 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(14 * var(--u));
  background: rgba(10, 11, 14, 0.82);
  backdrop-filter: blur(calc(14 * var(--u)));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.6);
  font-size: calc(11 * var(--u));
  font-variant-numeric: tabular-nums;
}
.tb-icons {
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
}
.tb-icons b {
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  border-radius: calc(5 * var(--u));
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.tb-icons b.is-app {
  background-image: url("../assets/logo-256.png");
  background-size: cover;
}
.tb-clock {
  position: absolute;
  right: calc(14 * var(--u));
}
.demo-stage.compact .taskbar,
.demo-stage.compact .desk-icons {
  display: none;
}

/* --- Fake windows ----------------------------------------------------- */
.demo-win {
  position: absolute;
  border-radius: calc(13 * var(--u));
  background: rgba(16, 18, 23, 0.94);
  backdrop-filter: blur(calc(20 * var(--u)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 calc(22 * var(--u)) calc(46 * var(--u)) rgba(0, 0, 0, 0.5);
  overflow: hidden;
  transition: transform 500ms var(--ease), opacity 400ms ease;
}
.demo-win.is-target {
  transform: scale(1.014);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0, 0, 0, 0.6);
}
.demo-win header {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(11 * var(--u));
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.48);
  font-size: calc(10.5 * var(--u));
}
.demo-win header .dots {
  display: flex;
  gap: calc(5 * var(--u));
}
.demo-win header .dots i {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.demo-win .body {
  padding: calc(13 * var(--u)) calc(15 * var(--u));
  font-size: calc(11.5 * var(--u));
  color: rgba(255, 255, 255, 0.7);
}

.win-browser {
  left: 6%;
  top: 17%;
  width: 46%;
  height: 56%;
}
.win-notes {
  right: 6.5%;
  top: 21%;
  width: 29%;
  height: 33%;
}
.win-code {
  right: 9%;
  bottom: 11%;
  width: 39%;
  height: 30%;
}

.win-kpi {
  font-size: calc(19 * var(--u));
  font-weight: 620;
  letter-spacing: -0.03em;
  color: #fff;
}
.win-kpi small {
  display: block;
  margin-top: calc(3 * var(--u));
  font-size: calc(10 * var(--u));
  font-weight: 500;
  letter-spacing: 0;
  color: rgba(48, 209, 88, 0.9);
}
.chart {
  position: relative;
  height: calc(96 * var(--u));
  margin-top: calc(12 * var(--u));
  border-radius: calc(9 * var(--u));
  overflow: hidden;
}
.chart::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 132, 255, 0.55), rgba(10, 132, 255, 0.02));
  clip-path: polygon(0 72%, 16% 60%, 31% 66%, 47% 42%, 62% 50%, 77% 22%, 100% 30%, 100% 100%, 0 100%);
}
.chart::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px calc(24 * var(--u))
  );
}
.notes-line {
  height: calc(8 * var(--u));
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.11);
  margin: calc(9 * var(--u)) 0;
}
.notes-line:nth-child(2) { width: 86%; }
.notes-line:nth-child(3) { width: 64%; }
.notes-line:nth-child(5) { width: 74%; }
.notes-line.hi {
  background: rgba(10, 132, 255, 0.5);
  width: 72%;
}
.win-code pre {
  font-family: var(--font-mono);
  font-size: calc(10.5 * var(--u));
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  white-space: pre;
}
.win-code .tok { color: #7aa2ff; }
.win-code .str { color: #9ece6a; }
.win-code .cmt { color: rgba(255, 255, 255, 0.28); }

/* --- The island ------------------------------------------------------- */
.island {
  position: absolute;
  top: calc(10 * var(--u));
  left: 50%;
  z-index: 20;
  width: calc(132 * var(--u));
  height: calc(36 * var(--u));
  transform: translateX(-50%);
  border-radius: 999px;
  color: #fff;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.17),
    0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.34),
    0 calc(10 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.4),
    0 calc(24 * var(--u)) calc(56 * var(--u)) rgba(0, 0, 0, 0.34);
  transition: width 560ms var(--ease), height 560ms var(--ease);
}
.island.is-expanded {
  width: min(calc(880 * var(--u)), calc(100% - 24 * var(--u)));
  height: calc(74 * var(--u));
}
.island-skin {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(9, 9, 12, 0.92);
  backdrop-filter: blur(22px) saturate(1.6);
}
.island-skin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 42%);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.16);
}

.island-compact {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));
  transition: opacity 140ms linear 260ms;
}
.island.is-expanded .island-compact {
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
}
.island-lens {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #2c3644 0 18%, #0b1018 48%, #04060a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.island-mic {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #121212;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.island-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: 100%;
  padding: 0 calc(12 * var(--u));
  opacity: 0;
  transform: scale(0.94);
  pointer-events: none;
  transition: opacity 240ms ease 120ms, transform 420ms var(--ease) 80ms;
}
.island.is-expanded .island-inner {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.island-id {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  width: calc(96 * var(--u));
  flex: none;
}
.island-logo {
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  border-radius: calc(6 * var(--u));
  flex: none;
}
.island-id > span {
  display: block;
  min-width: 0;
}
.island-wordmark {
  display: block;
  font-size: calc(13 * var(--u));
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.island-face-meta {
  display: block;
  font-size: calc(10 * var(--u));
  color: rgba(255, 255, 255, 0.44);
  white-space: nowrap;
}
.island-rule {
  width: 1px;
  height: calc(30 * var(--u));
  flex: none;
  background: rgba(255, 255, 255, 0.1);
}
.island-tools,
.island-utils {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u));
}
.island-tools {
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.island-utils {
  flex: none;
}

.island-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--u));
  min-width: calc(52 * var(--u));
  height: calc(52 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: calc(15 * var(--u));
  color: #fff;
  transition: background 200ms ease, transform 300ms var(--spring);
}
.island-action.is-compact {
  min-width: calc(34 * var(--u));
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 999px;
}
.island-action:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(calc(-1 * var(--u)));
}
.island-action.is-hot {
  background: rgba(255, 255, 255, 0.16);
}
.island-action.is-hot::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-3 * var(--u));
  width: calc(4 * var(--u));
  height: calc(4 * var(--u));
  margin-left: calc(-2 * var(--u));
  border-radius: 50%;
  background: #fff;
}
.island-action-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
}
.island-action-icon svg {
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.island-action.is-compact .island-action-icon svg {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
}
.island-action-label {
  font-size: calc(9.5 * var(--u));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.64);
  white-space: nowrap;
}
.island-action-tag {
  position: absolute;
  top: calc(4 * var(--u));
  right: calc(4 * var(--u));
  padding: 0 calc(4 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(8 * var(--u));
  font-weight: 600;
  line-height: calc(11 * var(--u));
}
.island-live {
  position: absolute;
  top: calc(-1 * var(--u));
  right: calc(-2 * var(--u));
  width: calc(6 * var(--u));
  height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 calc(2 * var(--u)) #000;
}
.island.is-expanded .island-action {
  animation: island-action-in 380ms var(--ease) both;
  animation-delay: calc(140ms + var(--i, 0) * 26ms);
}
@keyframes island-action-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.86);
  }
}

/* Narrow embeds: drop labels, then the wordmark, then the utility row. */
@container (max-width: 700px) {
  .island-action-label { display: none; }
  .island-action { min-width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  .island.is-expanded { height: calc(58 * var(--u)); }
}
@container (max-width: 520px) {
  .island-id, .island-rule { display: none; }
  .win-code { display: none; }
}
@container (max-width: 420px) {
  .island-utils { display: none; }
}
/* Very small embeds: --u is clamped for legibility, so the fixed-size panels
   need trimming by hand or they crowd the frame. */
@container (max-width: 470px) {
  .qa { width: calc(212 * var(--u)); left: calc(12 * var(--u)); }
  .qa-thumb { height: calc(112 * var(--u)); }
  .info-card { width: calc(232 * var(--u)); }
  .tcard { width: calc(244 * var(--u)); margin-left: calc(-122 * var(--u)); }
  .pip { width: calc(72 * var(--u)); height: calc(72 * var(--u)); right: calc(14 * var(--u)); }
  .countdown b { width: calc(104 * var(--u)); height: calc(104 * var(--u)); font-size: calc(54 * var(--u)); }
  .anno-bar { height: calc(40 * var(--u)); }
  .anno-bar button { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
  .stitch { width: calc(44 * var(--u)); }
}

@media (max-width: 620px) {
  .demo-stage,
  .demo-stage.compact {
    aspect-ratio: 4 / 3;
  }
}

/* --- Capture overlay -------------------------------------------------- */
.demo-overlay {
  position: absolute;
  inset: 0;
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.demo-overlay.is-on {
  opacity: 1;
  pointer-events: auto;
  cursor: none;
}
.demo-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  pointer-events: none;
  transition: opacity 200ms ease;
}
/* When a region exists the punch's own spread shadow supplies the dim, so the
   base layer steps aside and the selection reads as a real hole. */
.demo-overlay.is-punched .demo-dim {
  opacity: 0;
}
.demo-punch {
  position: absolute;
  outline: calc(1.5 * var(--u)) solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.52);
  pointer-events: none;
}
.demo-punch::before {
  /* rule-of-thirds guides */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      to right,
      transparent 33.2%,
      rgba(255, 255, 255, 0.16) 33.2% 33.4%,
      transparent 33.4% 66.5%,
      rgba(255, 255, 255, 0.16) 66.5% 66.7%,
      transparent 66.7%
    ),
    linear-gradient(
      to bottom,
      transparent 33.2%,
      rgba(255, 255, 255, 0.16) 33.2% 33.4%,
      transparent 33.4% 66.5%,
      rgba(255, 255, 255, 0.16) 66.5% 66.7%,
      transparent 66.7%
    );
}
.demo-punch i {
  position: absolute;
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  background: #fff;
  border-radius: calc(2 * var(--u));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
.demo-punch i:nth-child(1) { left: calc(-5 * var(--u)); top: calc(-5 * var(--u)); }
.demo-punch i:nth-child(2) { right: calc(-5 * var(--u)); top: calc(-5 * var(--u)); }
.demo-punch i:nth-child(3) { left: calc(-5 * var(--u)); bottom: calc(-5 * var(--u)); }
.demo-punch i:nth-child(4) { right: calc(-5 * var(--u)); bottom: calc(-5 * var(--u)); }

.demo-reticle {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 13;
  pointer-events: none;
}
.demo-reticle span {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.demo-reticle .h {
  height: 1px;
  width: calc(40 * var(--u));
}
.demo-reticle .v {
  width: 1px;
  height: calc(40 * var(--u));
}
.demo-reticle .h:nth-child(1) { right: calc(4 * var(--u)); }
.demo-reticle .h:nth-child(2) { left: calc(4 * var(--u)); }
.demo-reticle .v:nth-child(3) { bottom: calc(4 * var(--u)); }
.demo-reticle .v:nth-child(4) { top: calc(4 * var(--u)); }

.demo-loupe {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 14;
  width: calc(74 * var(--u));
  height: calc(74 * var(--u));
  margin: calc(16 * var(--u)) 0 0 calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  background: rgba(0, 0, 0, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
.demo-overlay.is-on .demo-loupe {
  opacity: 1;
}
.demo-loupe .grid {
  position: absolute;
  inset: 0 0 calc(20 * var(--u));
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: calc(9 * var(--u)) calc(9 * var(--u));
}
.demo-loupe .cross {
  position: absolute;
  left: 50%;
  top: calc(50% - 10 * var(--u));
  width: calc(9 * var(--u));
  height: calc(9 * var(--u));
  margin: calc(-4.5 * var(--u)) 0 0 calc(-4.5 * var(--u));
  box-shadow: 0 0 0 1px #0a84ff;
}
.demo-loupe .read {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(20 * var(--u));
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.7);
  font-family: var(--font-mono);
  font-size: calc(9 * var(--u));
  color: rgba(255, 255, 255, 0.7);
}

.demo-size {
  position: absolute;
  z-index: 15;
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  border-radius: calc(8 * var(--u));
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: calc(11 * var(--u));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.demo-size.is-on {
  opacity: 1;
}

.demo-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}
.demo-flash.is-on {
  animation: shutter 380ms ease;
}
@keyframes shutter {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* --- Pointer ---------------------------------------------------------- */
.demo-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 28;
  width: calc(19 * var(--u));
  height: calc(19 * var(--u));
  pointer-events: none;
  filter: drop-shadow(0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.5));
  opacity: 0;
  transition: opacity 180ms ease, scale 140ms var(--ease);
}
.demo-cursor.is-on {
  opacity: 1;
}
.demo-cursor.is-down {
  scale: 0.84;
}
.demo-click {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 27;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin: calc(-13 * var(--u)) 0 0 calc(-13 * var(--u));
  border-radius: 50%;
  border: calc(2 * var(--u)) solid rgba(255, 200, 60, 0.95);
  pointer-events: none;
  opacity: 0;
}
.demo-click.is-on {
  animation: click-ring 620ms var(--ease) forwards;
}
@keyframes click-ring {
  from { transform: scale(0.3); opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}

/* --- Quick Access ----------------------------------------------------- */
.qa {
  position: absolute;
  left: calc(18 * var(--u));
  bottom: calc(54 * var(--u));
  z-index: 22;
  width: calc(286 * var(--u));
  padding: calc(8 * var(--u));
  border-radius: calc(26 * var(--u));
  background: rgba(9, 9, 12, 0.92);
  backdrop-filter: blur(calc(22 * var(--u))) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.17),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14),
    0 calc(22 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(calc(24 * var(--u))) scale(0.96);
  transform-origin: 0 100%;
  pointer-events: none;
  transition: transform 420ms var(--spring), opacity 260ms ease;
}
.demo-stage.compact .qa {
  bottom: calc(18 * var(--u));
}
.qa.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.qa-thumb {
  position: relative;
  height: calc(150 * var(--u));
  border-radius: calc(18 * var(--u));
  overflow: hidden;
  background: #0c1016;
}
.qa-thumb canvas {
  width: 100%;
  height: 100%;
}
.qa-badge {
  position: absolute;
  left: calc(9 * var(--u));
  top: calc(9 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--u));
  height: calc(21 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(calc(8 * var(--u)));
  font-size: calc(9.5 * var(--u));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.qa-close {
  position: absolute;
  top: calc(8 * var(--u));
  right: calc(8 * var(--u));
  display: grid;
  place-items: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(calc(8 * var(--u)));
  color: #fff;
  font-size: calc(12 * var(--u));
  line-height: 1;
  transition: background 180ms ease;
}
.qa-close:hover {
  background: rgba(255, 69, 58, 0.9);
}
.qa-meta {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  padding: calc(9 * var(--u)) calc(7 * var(--u)) calc(5 * var(--u));
}
.qa-meta .title {
  font-size: calc(13 * var(--u));
  font-weight: 600;
  letter-spacing: -0.02em;
}
.qa-meta .sub {
  margin-left: auto;
  font-size: calc(10.5 * var(--u));
  color: rgba(255, 255, 255, 0.42);
  font-variant-numeric: tabular-nums;
}
.qa-bar {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  padding: 0 calc(2 * var(--u)) calc(3 * var(--u));
}
.qa-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(32 * var(--u));
  height: calc(32 * var(--u));
  border-radius: calc(10 * var(--u));
  color: #fff;
  transition: background 180ms ease, transform 260ms var(--spring);
}
.qa-tool:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(calc(-1 * var(--u)));
}
.qa-tool.is-hot {
  background: rgba(255, 255, 255, 0.16);
}
.qa-tool.primary {
  background: #fff;
  color: #000;
}
.qa-tool.primary:hover {
  background: #eaeaea;
}
.qa-tool svg {
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qa-div {
  width: 1px;
  height: calc(15 * var(--u));
  background: rgba(255, 255, 255, 0.13);
  margin: 0 calc(3 * var(--u));
}
.qa-toast {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8 * var(--u));
  transform: translate(-50%, calc(6 * var(--u)));
  padding: calc(5 * var(--u)) calc(11 * var(--u));
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: calc(10.5 * var(--u));
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--spring);
}
.qa-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* --- Recording -------------------------------------------------------- */
.rec-border {
  position: absolute;
  inset: calc(8 * var(--u));
  z-index: 11;
  border: calc(3 * var(--u)) solid #ff453a;
  border-radius: calc(16 * var(--u));
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease;
}
.rec-border.is-on {
  opacity: 1;
  animation: rec-glow 1.6s var(--ease-in-out) infinite;
}
@keyframes rec-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 69, 58, 0.42), inset 0 0 calc(20 * var(--u)) rgba(255, 69, 58, 0.12); }
  50% { box-shadow: 0 0 0 calc(9 * var(--u)) rgba(255, 69, 58, 0), inset 0 0 calc(30 * var(--u)) rgba(255, 69, 58, 0.24); }
}

.rec-pill {
  position: absolute;
  top: calc(96 * var(--u));
  left: 50%;
  z-index: 21;
  display: flex;
  align-items: center;
  gap: calc(9 * var(--u));
  height: calc(38 * var(--u));
  padding: 0 calc(6 * var(--u)) 0 calc(13 * var(--u));
  border-radius: 999px;
  background: rgba(9, 9, 12, 0.92);
  backdrop-filter: blur(calc(20 * var(--u))) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.17),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.14),
    0 calc(14 * var(--u)) calc(34 * var(--u)) rgba(0, 0, 0, 0.6);
  font-size: calc(12 * var(--u));
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translate(-50%, calc(-10 * var(--u)));
  pointer-events: none;
  transition: opacity 240ms ease, transform 420ms var(--spring);
}
.rec-pill.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.rec-dot {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: 50%;
  background: #ff453a;
  flex: none;
  animation: rec-blink 1s step-end infinite;
}
.rec-wave {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--u));
  height: calc(16 * var(--u));
}
.rec-wave i {
  width: calc(2 * var(--u));
  height: 40%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  animation: wave 900ms var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes wave {
  0%, 100% { height: 26%; }
  50% { height: 100%; }
}
.rec-stop {
  display: grid;
  place-items: center;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  background: #ff453a;
  color: #fff;
  flex: none;
  transition: transform 240ms var(--spring);
}
.rec-stop:hover {
  transform: scale(1.1);
}
.rec-stop i {
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #fff;
}

.countdown {
  position: absolute;
  inset: 0;
  z-index: 24;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.countdown.is-on {
  opacity: 1;
}
.countdown b {
  display: grid;
  place-items: center;
  width: calc(140 * var(--u));
  height: calc(140 * var(--u));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(calc(10 * var(--u)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  font-size: calc(74 * var(--u));
  font-weight: 620;
  letter-spacing: -0.06em;
}
.countdown.is-tick b {
  animation: count-pop 620ms var(--ease);
}
@keyframes count-pop {
  0% { transform: scale(0.82); opacity: 0.4; }
  40% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

.pip {
  position: absolute;
  right: calc(24 * var(--u));
  bottom: calc(58 * var(--u));
  z-index: 16;
  width: calc(96 * var(--u));
  height: calc(96 * var(--u));
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 38% 28%, #6b4d3d, #241a15 68%);
  box-shadow: 0 0 0 calc(3 * var(--u)) #000,
    0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 260ms ease, transform 460ms var(--spring);
}
.demo-stage.compact .pip {
  bottom: calc(22 * var(--u));
}
.pip.is-on {
  opacity: 1;
  transform: none;
}
.pip::before {
  /* shoulders + head silhouette */
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-26 * var(--u));
  width: calc(78 * var(--u));
  height: calc(58 * var(--u));
  margin-left: calc(-39 * var(--u));
  border-radius: 50% 50% 0 0;
  background: rgba(20, 24, 34, 0.85);
}
.pip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(20 * var(--u));
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  margin-left: calc(-17 * var(--u));
  border-radius: 50%;
  background: rgba(30, 36, 48, 0.9);
}

.keys-hud {
  position: absolute;
  left: 50%;
  bottom: calc(56 * var(--u));
  z-index: 16;
  display: flex;
  gap: calc(6 * var(--u));
  opacity: 0;
  transform: translate(-50%, calc(8 * var(--u)));
  pointer-events: none;
  transition: opacity 200ms ease, transform 300ms var(--ease);
}
.demo-stage.compact .keys-hud {
  bottom: calc(20 * var(--u));
}
.keys-hud.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.keys-hud span {
  display: grid;
  place-items: center;
  height: calc(30 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: calc(9 * var(--u));
  background: rgba(0, 0, 0, 0.74);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-size: calc(12 * var(--u));
  font-family: var(--font-mono);
  animation: key-tap 340ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}
@keyframes key-tap {
  from { opacity: 0; transform: translateY(calc(6 * var(--u))) scale(0.9); }
}

/* --- OCR / translation ------------------------------------------------ */
.ocr-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}
.ocr-box {
  position: absolute;
  border-radius: calc(3 * var(--u));
  border: 1px solid rgba(10, 132, 255, 0.9);
  background: rgba(10, 132, 255, 0.16);
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 240ms ease, transform 320ms var(--spring);
}
.ocr-box.is-on {
  opacity: 1;
  transform: none;
}
.ocr-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: calc(2 * var(--u));
  background: linear-gradient(90deg, transparent, #22d3ee, transparent);
  box-shadow: 0 0 calc(16 * var(--u)) rgba(34, 211, 238, 0.8);
  opacity: 0;
}
.ocr-scan.is-on {
  opacity: 1;
}

.info-card {
  position: absolute;
  z-index: 23;
  width: calc(300 * var(--u));
  padding: calc(15 * var(--u)) calc(17 * var(--u));
  border-radius: calc(22 * var(--u));
  background: rgba(4, 4, 6, 0.92);
  backdrop-filter: blur(calc(20 * var(--u)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 calc(24 * var(--u)) calc(54 * var(--u)) rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translateY(calc(14 * var(--u))) scale(0.96);
  pointer-events: none;
  transition: opacity 240ms ease, transform 460ms var(--spring);
}
.info-card.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.ocr-card {
  top: 22%;
  right: 6%;
}
.tcard {
  top: 26%;
  left: 50%;
  width: calc(330 * var(--u));
  margin-left: calc(-165 * var(--u));
}
.info-card .lang {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  margin-bottom: calc(9 * var(--u));
  font-size: calc(10.5 * var(--u));
  color: rgba(255, 255, 255, 0.42);
}
.info-card .lang b {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.info-card .lang svg {
  width: calc(11 * var(--u));
  height: calc(11 * var(--u));
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.info-card .from {
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(12.5 * var(--u));
}
.info-card .to {
  margin-top: calc(7 * var(--u));
  font-size: calc(20 * var(--u));
  font-weight: 620;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.info-card .to .caret {
  display: inline-block;
  width: calc(2 * var(--u));
  height: calc(18 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: text-bottom;
  background: #fff;
  animation: caret 900ms step-end infinite;
}
@keyframes caret {
  50% { opacity: 0; }
}
.info-card .row {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  margin-top: calc(13 * var(--u));
}
.info-card .chip {
  height: calc(24 * var(--u));
  padding: 0 calc(10 * var(--u));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
  font-size: calc(10.5 * var(--u));
  font-weight: 550;
  transition: background 180ms ease, color 180ms ease;
}
.info-card .chip:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.info-card .chip.is-on {
  background: #fff;
  color: #000;
}

/* --- Annotation ------------------------------------------------------- */
.anno-layer {
  position: absolute;
  inset: 0;
  z-index: 17;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
.anno-layer.is-on {
  opacity: 1;
  pointer-events: auto;
  cursor: crosshair;
}
.anno-layer canvas {
  width: 100%;
  height: 100%;
}
.anno-bar {
  position: absolute;
  left: 50%;
  bottom: calc(56 * var(--u));
  z-index: 19;
  display: flex;
  align-items: center;
  gap: calc(3 * var(--u));
  height: calc(46 * var(--u));
  padding: 0 calc(8 * var(--u));
  border-radius: 999px;
  background: rgba(4, 4, 6, 0.92);
  backdrop-filter: blur(calc(18 * var(--u)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 calc(16 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.65);
  opacity: 0;
  transform: translate(-50%, calc(12 * var(--u)));
  pointer-events: none;
  transition: opacity 240ms ease, transform 460ms var(--spring);
}
.demo-stage.compact .anno-bar {
  bottom: calc(18 * var(--u));
}
.anno-bar.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.anno-bar button {
  display: grid;
  place-items: center;
  width: calc(34 * var(--u));
  height: calc(34 * var(--u));
  border-radius: 999px;
  color: #fff;
  transition: background 180ms ease, transform 260ms var(--spring);
}
.anno-bar button:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(calc(-1 * var(--u)));
}
.anno-bar button.is-on {
  background: #fff;
  color: #000;
}
.anno-bar svg {
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anno-swatches {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}
.anno-swatches button {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  transition: transform 240ms var(--spring), box-shadow 200ms ease;
}
.anno-swatches button:hover {
  transform: scale(1.15);
  background: none;
}
.anno-swatches button.is-on {
  transform: scale(1.1);
  box-shadow: 0 0 0 calc(2 * var(--u)) #fff;
  background: none;
}

/* --- Scrolling capture ------------------------------------------------ */
.scroll-doc {
  position: absolute;
  inset: 13% 20% 12%;
  z-index: 10;
  border-radius: calc(15 * var(--u));
  background: #0f1116;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 calc(22 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, 0.55);
  overflow: hidden;
  opacity: 0;
  transition: opacity 300ms ease;
}
.scroll-doc.is-on {
  opacity: 1;
}
.scroll-doc header {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(30 * var(--u));
  padding: 0 calc(11 * var(--u));
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.5);
  font-size: calc(10.5 * var(--u));
}
.scroll-doc header .dots {
  display: flex;
  gap: calc(5 * var(--u));
}
.scroll-doc header .dots i {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.scroll-view {
  position: absolute;
  inset: calc(30 * var(--u)) 0 0;
  overflow: hidden;
}
.scroll-inner {
  padding: calc(20 * var(--u)) calc(24 * var(--u));
  will-change: transform;
}
.scroll-inner h4 {
  font-size: calc(15 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.scroll-inner p {
  color: rgba(255, 255, 255, 0.46);
  font-size: calc(11 * var(--u));
  margin: calc(9 * var(--u)) 0;
  line-height: 1.6;
}
.scroll-band {
  position: absolute;
  left: 20%;
  right: 20%;
  z-index: 11;
  height: calc(3 * var(--u));
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 calc(14 * var(--u)) rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 200ms ease;
}
.scroll-band.is-on {
  opacity: 1;
}
/* Growing stitched strip on the right edge. */
.stitch {
  position: absolute;
  right: calc(18 * var(--u));
  top: 14%;
  z-index: 18;
  width: calc(58 * var(--u));
  border-radius: calc(8 * var(--u));
  overflow: hidden;
  background: #0b0d12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 calc(12 * var(--u)) calc(28 * var(--u)) rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 240ms ease;
}
.stitch.is-on {
  opacity: 1;
}
.stitch-fill {
  height: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(10, 132, 255, 0.32) 0 calc(6 * var(--u)),
    rgba(10, 132, 255, 0.14) calc(6 * var(--u)) calc(13 * var(--u))
  );
  transition: height 120ms linear;
}
.stitch-cap {
  padding: calc(4 * var(--u)) 0;
  text-align: center;
  font-size: calc(8.5 * var(--u));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.06);
}

/* --- Hint ------------------------------------------------------------- */
.demo-hint {
  position: absolute;
  left: 50%;
  top: calc(96 * var(--u));
  z-index: 19;
  display: flex;
  align-items: center;
  gap: calc(7 * var(--u));
  padding: calc(7 * var(--u)) calc(14 * var(--u));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(calc(10 * var(--u)));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  font-size: calc(11.5 * var(--u));
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-6 * var(--u)));
  transition: opacity 260ms ease, transform 380ms var(--ease);
}
.demo-hint.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.demo-hint svg {
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  flex: none;
}

/* --- Rail under the stage (scene list + progress) --------------------- */
.demo-rail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.demo-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.demo-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--faint);
  font-size: 12.5px;
  transition: color 260ms ease;
}
.demo-step::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ghost);
  transition: background 260ms ease, transform 300ms var(--spring);
}
.demo-step.is-done {
  color: var(--muted);
}
.demo-step.is-done::before {
  background: var(--muted);
}
.demo-step.is-on {
  color: var(--ink);
}
.demo-step.is-on::before {
  background: var(--a3);
  transform: scale(1.5);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

.demo-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: var(--faint);
  font-size: 13px;
}
.demo-caption kbd,
.demo-caption .kbd {
  font-family: var(--font-mono);
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .demo-stage * {
    animation: none !important;
  }
  .island,
  .island-inner,
  .qa,
  .info-card,
  .rec-pill,
  .anno-bar,
  .pip,
  .keys-hud,
  .demo-hint {
    transition-duration: 0.001ms !important;
  }
}