/* ============================================================================
   Rotating product showcase — shared by the marketing hero (home/_hero_showcase)
   and the /playground/demos preview. Wrap markup in `.cp-showcase`.

   Scenes reuse the real player UI (the SimPatient chat literally renders
   app/views/simpatients/conversations/_message) sized for a small rail.
   All tokens are defined locally so the component is page-independent.
   ============================================================================ */

.cp-showcase {
  /* Theme accents (overridable via inline `style="--accent: #..."` on .cp-showcase). */
  --accent: #5a4fff;
  --accent-soft: rgba(90, 79, 255, 0.08);
  --line: rgba(20, 20, 26, 0.08);
  --line-soft: rgba(20, 20, 26, 0.04);
  --paper-2: #ebebe8;
  --ink: #14141a;
  --ink-soft: #3d3d45;
  --ink-mute: #6b6b75;
  --ink-faint: #8e8e96;

  /* App-authentic scene palette — post-indigo migration. */
  --sc-accent: #4338ca;       /* indigo-700 */
  --sc-accent-soft: #eef2ff;  /* indigo-50  */
  --sc-bubble: #e0e7ff;       /* indigo-100 */
  --sc-good: #047857; --sc-good-soft: #ecfdf5; --sc-good-line: #6ee7b7;
  --sc-bad: #be123c; --sc-bad-soft: #fff1f2;
  --sc-warn: #b45309; --sc-warn-soft: #fffbeb;
  --sc-ink: #0f172a; --sc-ink-soft: #475569; --sc-ink-faint: #94a3b8;
  --sc-line: #e2e8f0; --sc-line-soft: #f1f5f9;

  font-family: "Geist", "Inter", system-ui, sans-serif;
}

/* ----------------------------- SCENE FRAME ----------------------------- */
.cp-showcase .dr-stage { position: relative; display: grid; }
.cp-showcase .dr-scene {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.985);
  transition: opacity .55s ease, transform .55s ease, visibility .55s; pointer-events: none;
}
.cp-showcase .dr-scene.is-shown { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.cp-showcase .sc { display: flex; flex-direction: column; height: 100%; width: 100%; background: #fff; overflow: hidden; text-align: left; }

/* -------- SimPatient chat -------- */
.cp-showcase .sc-chat__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--sc-line-soft); }
.cp-showcase .sc-chat__avatar { width: 36px; height: 36px; border-radius: 12px; background: var(--sc-accent-soft); color: var(--sc-accent); display: grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; flex: 0 0 auto; }
.cp-showcase .sc-chat__id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-showcase .sc-chat__name { font-size: 14px; font-weight: 600; color: var(--sc-ink); letter-spacing: -0.01em; }
.cp-showcase .sc-chat__demo { font-size: 11.5px; color: var(--sc-ink-faint); }
.cp-showcase .sc-chat__live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--sc-bad-soft); color: var(--sc-bad); font-family: "Geist Mono", monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.14em; }
.cp-showcase .sc-chat__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-bad); animation: scPulse 1.5s ease-out infinite; }
.cp-showcase .sc-chat__scenario { margin: 12px 14px 4px; padding: 10px 12px; border: 1px dashed #c7d2fe; border-radius: 14px; background: var(--sc-accent-soft); }
.cp-showcase .sc-chat__scenario-label { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-accent); }
.cp-showcase .sc-chat__scenario p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--sc-ink-soft); }
.cp-showcase .sc-chat__log { flex: 1; overflow: hidden; padding: 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.cp-showcase .sc-chat__msg { opacity: 0; transform: translateY(6px); }
.cp-showcase .dr-scene.is-active .sc-chat__msg { animation: scRise .5s both calc(var(--i) * 0.95s + 0.3s); }
.cp-showcase .sc-chat .native-simpatient-message-avatar, .cp-showcase .sc-chat .native-simpatient-message-label { display: none !important; }
.cp-showcase .sc-chat .native-simpatient-message-bubble { font-size: 12px !important; line-height: 1.42 !important; padding: 8px 11px !important; border-radius: 14px !important; box-shadow: none !important; }
/* Bind bubble colours to the showcase accent vars so a hero-level
   `style="--sc-accent: #..."` recolours the whole scene cohesively. */
.cp-showcase .sc-chat .native-simpatient-message-bubble { background: var(--sc-bubble) !important; color: var(--sc-ink) !important; }
.cp-showcase .sc-chat .native-simpatient-message-bubble.bg-indigo-700 { background: var(--sc-accent) !important; color: #fff !important; }
.cp-showcase .sc-chat .native-simpatient-message-bubble p { margin: 0; }
.cp-showcase .sc-chat .native-simpatient-message > div { gap: 0 !important; max-width: 90% !important; }
.cp-showcase .sc-chat .native-simpatient-message .space-y-1 { min-width: 0 !important; }
.cp-showcase .sc-chat__bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px 14px; border-top: 1px solid var(--sc-line-soft); }
.cp-showcase .sc-chat__wave { display: flex; align-items: center; gap: 2.5px; height: 18px; }
.cp-showcase .sc-chat__wave span { width: 2.5px; border-radius: 2px; background: var(--sc-accent); height: 6px; }
.cp-showcase .dr-scene.is-active .sc-chat__wave span { animation: scWave 1s ease-in-out infinite; }
.cp-showcase .sc-chat__wave span:nth-child(2){animation-delay:.1s} .cp-showcase .sc-chat__wave span:nth-child(3){animation-delay:.2s} .cp-showcase .sc-chat__wave span:nth-child(4){animation-delay:.3s} .cp-showcase .sc-chat__wave span:nth-child(5){animation-delay:.4s} .cp-showcase .sc-chat__wave span:nth-child(6){animation-delay:.5s}
.cp-showcase .sc-chat__bar-text { flex: 1; font-size: 11px; color: var(--sc-ink-faint); }
.cp-showcase .sc-chat__mic { width: 30px; height: 30px; border-radius: 50%; background: var(--sc-accent); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }

/* -------- Marksheet -------- */
.cp-showcase .sc-mark__head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--sc-line-soft); }
.cp-showcase .sc-mark__eyebrow { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-faint); }
.cp-showcase .sc-mark__title { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--sc-ink); letter-spacing: -0.01em; }
.cp-showcase .sc-mark__total { margin-left: auto; flex: 0 0 auto; font-family: "Geist Mono", monospace; font-size: 11px; color: var(--sc-accent); background: var(--sc-accent-soft); padding: 4px 9px; border-radius: 999px; }
.cp-showcase .sc-mark__progress { height: 3px; background: var(--sc-line); margin: 0 16px; border-radius: 999px; overflow: hidden; }
.cp-showcase .sc-mark__bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sc-accent), #818cf8); border-radius: 999px; }
.cp-showcase .dr-scene.is-active .sc-mark__bar { animation: scGrow 4.6s both 0.4s; }
.cp-showcase .sc-mark__body { flex: 1; overflow: hidden; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cp-showcase .sc-mark__section { border: 1px solid var(--sc-line); border-radius: 14px; padding: 10px 11px; }
.cp-showcase .sc-mark__section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.cp-showcase .sc-mark__section-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--sc-ink); }
.cp-showcase .sc-mark__section-pts { font-family: "Geist Mono", monospace; font-size: 10px; color: var(--sc-ink-faint); }
.cp-showcase .sc-mark__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cp-showcase .sc-mark__item { display: flex; align-items: flex-start; gap: 9px; opacity: 0.4; }
.cp-showcase .dr-scene.is-active .sc-mark__item { animation: scDim 0.4s both calc(var(--i) * 0.5s + 0.5s); }
.cp-showcase .sc-mark__check { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--sc-line); background: #fff; color: transparent; display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; }
.cp-showcase .sc-mark__check svg { width: 11px; height: 11px; }
.cp-showcase .dr-scene.is-active .sc-mark__check { animation: scCheck 0.45s both calc(var(--i) * 0.5s + 0.6s); }
.cp-showcase .sc-mark__label { flex: 1; font-size: 12px; line-height: 1.35; color: var(--sc-ink-soft); }
.cp-showcase .sc-mark__pts { font-family: "Geist Mono", monospace; font-size: 10px; color: var(--sc-accent); flex: 0 0 auto; }
.cp-showcase .sc-mark__more { margin: 2px 0 0; text-align: center; font-size: 11px; color: var(--sc-ink-faint); font-style: italic; font-family: "Fraunces", Georgia, serif; }

/* -------- MCQ -------- */
.cp-showcase .sc-mcq__head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--sc-line-soft); }
.cp-showcase .sc-mcq__pill { font-family: "Geist Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-accent); background: var(--sc-accent-soft); padding: 4px 9px; border-radius: 999px; }
.cp-showcase .sc-mcq__timer { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-family: "Geist Mono", monospace; font-size: 10.5px; color: var(--sc-ink-faint); }
.cp-showcase .sc-mcq__stem { padding: 10px 16px 3px; font-size: 11.5px; line-height: 1.42; color: var(--sc-ink-soft); }
.cp-showcase .sc-mcq__prompt { padding: 3px 16px 8px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--sc-ink); }
.cp-showcase .sc-mcq__opts { list-style: none; margin: 0; padding: 0 12px 10px; display: flex; flex-direction: column; gap: 5px; }
.cp-showcase .sc-mcq__opt { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--sc-line); border-radius: 11px; background: #fff; font-size: 11.5px; line-height: 1.3; color: var(--sc-ink-soft); opacity: 0; }
.cp-showcase .dr-scene.is-active .sc-mcq__opt { animation: scRise .45s both calc(var(--i) * 0.16s + 0.2s); }
.cp-showcase .dr-scene.is-active .sc-mcq__opt[data-correct="true"] { animation: scRise .45s both calc(var(--i) * 0.16s + 0.2s), scCorrect 8.4s both; }
.cp-showcase .dr-scene.is-active .sc-mcq__opt[data-correct="false"] { animation: scRise .45s both calc(var(--i) * 0.16s + 0.2s), scWrongDim 8.4s both; }
.cp-showcase .sc-mcq__ix { width: 20px; height: 20px; border-radius: 6px; background: var(--sc-line-soft); color: var(--sc-ink-soft); font-family: "Geist Mono", monospace; font-size: 10.5px; display: grid; place-items: center; flex: 0 0 auto; }
.cp-showcase .sc-mcq__txt { flex: 1; line-height: 1.32; }
.cp-showcase .sc-mcq__tick { width: 16px; height: 16px; color: var(--sc-good); opacity: 0; flex: 0 0 auto; }
.cp-showcase .dr-scene.is-active .sc-mcq__opt[data-correct="true"] .sc-mcq__tick { animation: scTick 8.4s both; }
.cp-showcase .dr-scene.is-active .sc-mcq__opt[data-correct="true"] .sc-mcq__ix { animation: scIxGood 8.4s both; }
.cp-showcase .sc-mcq__feedback { margin: auto 12px 12px; padding: 11px 12px; border-radius: 13px; background: #14112a; color: #ece9ff; opacity: 0; }
.cp-showcase .dr-scene.is-active .sc-mcq__feedback { animation: scUp 8.4s both; }
.cp-showcase .sc-mcq__feedback-label { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #b9adff; }
.cp-showcase .sc-mcq__feedback p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: #ddd8ff; }

/* -------- Insights -------- */
.cp-showcase .sc-ins__head { display: flex; align-items: flex-end; justify-content: space-between; padding: 14px 16px 12px; border-bottom: 1px solid var(--sc-line-soft); }
.cp-showcase .sc-ins__eyebrow { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-faint); }
.cp-showcase .sc-ins__title { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--sc-ink); letter-spacing: -0.01em; }
.cp-showcase .sc-ins__week { font-family: "Geist Mono", monospace; font-size: 9.5px; letter-spacing: 0.12em; color: var(--sc-ink-faint); padding: 3px 8px; border: 1px solid var(--sc-line); border-radius: 999px; }
.cp-showcase .sc-ins__stat { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.cp-showcase .sc-ins__stat-label { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sc-ink-faint); }
.cp-showcase .sc-ins__stat-num { font-size: 40px; font-weight: 300; color: var(--sc-accent); letter-spacing: -0.04em; line-height: 1; }
.cp-showcase .sc-ins__stat-num span { font-size: 18px; opacity: 0.5; margin-left: 2px; }
.cp-showcase .sc-ins__delta { display: inline-flex; align-items: center; gap: 4px; font-family: "Geist Mono", monospace; font-size: 10px; color: var(--sc-good); }
.cp-showcase .sc-ins__bars { padding: 10px 16px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cp-showcase .sc-ins__row-top { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.cp-showcase .sc-ins__name { font-size: 12px; color: var(--sc-ink-soft); }
.cp-showcase .sc-ins__flag { font-family: "Geist Mono", monospace; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--sc-warn-soft); color: var(--sc-warn); }
.cp-showcase .sc-ins__val { margin-left: auto; font-family: "Geist Mono", monospace; font-size: 11.5px; color: var(--sc-ink); }
.cp-showcase .sc-ins__track { height: 6px; border-radius: 999px; background: var(--sc-line-soft); overflow: hidden; }
.cp-showcase .sc-ins__fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--sc-accent), #818cf8); }
.cp-showcase .dr-scene.is-active .sc-ins__fill { animation: scFill 1.1s both calc(var(--i) * 0.12s + 0.35s); }
.cp-showcase .sc-ins__row--focus .sc-ins__fill { background: linear-gradient(90deg, var(--sc-warn), #f59e0b); }
.cp-showcase .sc-ins__row--focus .sc-ins__val { color: var(--sc-warn); }
.cp-showcase .sc-ins__suggest { margin: auto 14px 14px; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px; border: 1px solid var(--sc-line); background: #fffaf3; font-size: 11.5px; color: var(--sc-ink-soft); opacity: 0; }
.cp-showcase .dr-scene.is-active .sc-ins__suggest { animation: scUpLate 6.5s both; }
.cp-showcase .sc-ins__suggest strong { color: var(--sc-ink); font-weight: 600; }
.cp-showcase .sc-ins__suggest-icon { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 1px solid #fcd9a8; color: var(--sc-warn); display: grid; place-items: center; flex: 0 0 auto; }

/* -------- Custom OSCE / content generator -------- */
.cp-showcase .sc-gen { background: linear-gradient(180deg, #fff 0%, #fafaff 100%); }
.cp-showcase .sc-gen__head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--sc-line-soft); }
.cp-showcase .sc-gen__eyebrow { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-faint); }
.cp-showcase .sc-gen__title { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--sc-ink); letter-spacing: -0.01em; }
.cp-showcase .sc-gen__badge { margin-left: auto; width: 28px; height: 28px; border-radius: 9px; background: var(--sc-accent-soft); color: var(--sc-accent); display: grid; place-items: center; flex: 0 0 auto; }
.cp-showcase .sc-gen__body { flex: 1; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 12px; }
.cp-showcase .sc-gen__field { display: flex; flex-direction: column; gap: 6px; }
.cp-showcase .sc-gen__lbl { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sc-ink-faint); }
.cp-showcase .sc-gen__prompt { position: relative; padding: 10px 12px; border: 1px solid var(--sc-line); border-radius: 12px; background: #fff; font-size: 12px; line-height: 1.45; color: var(--sc-ink); min-height: 38px; }
.cp-showcase .sc-gen__prompt-txt { display: inline; }
.cp-showcase .sc-gen__caret { display: inline-block; width: 1.5px; height: 12px; background: var(--sc-accent); vertical-align: -2px; margin-left: 2px; }
.cp-showcase .dr-scene.is-active .sc-gen__caret { animation: scBlink 0.9s steps(2) infinite; }
.cp-showcase .dr-scene.is-active .sc-gen__prompt-txt { animation: scType 2s steps(40) both 0.35s; clip-path: inset(0 100% 0 0); }
.cp-showcase .sc-gen__chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--sc-accent-soft); color: var(--sc-accent); font-family: "Geist Mono", monospace; font-size: 9.5px; letter-spacing: 0.06em; }
.cp-showcase .sc-gen__pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cp-showcase .sc-gen__pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--sc-line); border-radius: 999px; background: #fff; font-size: 11px; color: var(--sc-ink-soft); opacity: 0; }
.cp-showcase .dr-scene.is-active .sc-gen__pill { animation: scRise .35s both calc(var(--i) * 0.1s + 1.6s); }
.cp-showcase .sc-gen__pill.is-on { border-color: var(--sc-accent); background: var(--sc-accent-soft); color: var(--sc-accent); font-weight: 600; }
.cp-showcase .sc-gen__cta-row { display: flex; justify-content: flex-end; }
.cp-showcase .sc-gen__cta { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; background: var(--sc-accent); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: -0.005em; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sc-accent) 80%, transparent); opacity: 0; transform: translateY(4px); }
.cp-showcase .dr-scene.is-active .sc-gen__cta { animation: scUpQuick .35s both 2.6s; }
.cp-showcase .dr-scene.is-active .sc-gen__cta { animation: scUpQuick .35s both 2.6s, scPulseSoft 1.4s ease-in-out infinite 3.2s; }
.cp-showcase .sc-gen__results { border-top: 1px dashed var(--sc-line); padding: 10px 14px 12px; background: var(--sc-line-soft); opacity: 0; }
.cp-showcase .dr-scene.is-active .sc-gen__results { animation: scUp 5s both; }
.cp-showcase .sc-gen__results-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.cp-showcase .sc-gen__results-lbl { font-family: "Geist Mono", monospace; font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-good); }
.cp-showcase .sc-gen__results-count { font-family: "Geist Mono", monospace; font-size: 10px; color: var(--sc-ink-faint); }
.cp-showcase .sc-gen__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cp-showcase .sc-gen__item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--sc-good-line); border-radius: 10px; background: #fff; font-size: 11.5px; line-height: 1.3; color: var(--sc-ink); opacity: 0; }
.cp-showcase .dr-scene.is-active .sc-gen__item { animation: scRise .4s both calc(var(--i) * 0.18s + 3.6s); }
.cp-showcase .sc-gen__item-ic { width: 22px; height: 22px; border-radius: 6px; background: var(--sc-accent-soft); color: var(--sc-accent); display: grid; place-items: center; flex: 0 0 auto; }
.cp-showcase .sc-gen__item-txt { flex: 1; line-height: 1.3; }
.cp-showcase .sc-gen__item-tick { width: 16px; height: 16px; color: var(--sc-good); flex: 0 0 auto; }

/* Custom-content → simpatient handoff: the generator plays, then the simpatient
   chat fades in as the "generated output", leading into the rotator's natural
   wrap back to the Simulated patient tab (index 0). */
.cp-showcase .sc-gen-stack { position: relative; height: 100%; width: 100%; }
.cp-showcase .sc-gen-stack > .sc-gen { position: absolute; inset: 0; }
.cp-showcase .sc-gen-handoff { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cp-showcase .dr-scene.is-active .sc-gen-handoff { animation: scHandoff .55s both 5.6s; }
@keyframes scHandoff { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ----------------------------- VARIANT B (web card + feature tabs) ----------------------------- */
.cp-showcase .vb { display: grid; grid-template-columns: 250px 360px; gap: 28px; align-items: start; }
.cp-showcase .vb__tabs { display: flex; flex-direction: column; gap: 8px; }
.cp-showcase .vb__tab { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 11px; text-align: left; padding: 13px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; cursor: pointer; transition: all .25s; font-family: inherit; }
.cp-showcase .vb__tab.is-active { border-color: rgba(90,79,255,.4); box-shadow: 0 0 0 3px var(--accent-soft); }
.cp-showcase .vb__tab-ic { width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; transition: all .25s; }
.cp-showcase .vb__tab.is-active .vb__tab-ic { background: var(--accent); color: #fff; }
.cp-showcase .vb__tab-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cp-showcase .vb__tab-desc { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--ink-mute); }
.cp-showcase .vb__tab-meter { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.cp-showcase .vb__tab.is-active .vb__tab-meter { background: var(--accent-soft); }
.cp-showcase .vb__tab-meter-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.cp-showcase .vb__stage { width: 360px; height: 540px; border-radius: 22px; border: 1px solid var(--line); background: #fff; box-shadow: 0 30px 56px -32px rgba(20,20,26,.22); overflow: hidden; }
.cp-showcase .vb .dr-stage, .cp-showcase .vb .dr-scene, .cp-showcase .vb .sc { height: 540px; }

@media (max-width: 900px) {
  .cp-showcase .vb { grid-template-columns: 1fr; }
  .cp-showcase .vb__stage { width: 100%; max-width: 360px; }
}

/* ----------------------------- KEYFRAMES (global) ----------------------------- */
@keyframes scRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scPulse { 0% { box-shadow: 0 0 0 0 rgba(190,18,60,.5);} 100% { box-shadow: 0 0 0 7px rgba(190,18,60,0);} }
@keyframes scWave { 0%,100% { height: 5px; opacity: .6; } 50% { height: 16px; opacity: 1; } }
@keyframes scGrow { from { width: 0; } to { width: 100%; } }
@keyframes scDim { from { opacity: .4; } to { opacity: 1; } }
@keyframes scCheck { 0% { transform: scale(.5); } 60% { transform: scale(1.14); background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; } 100% { transform: scale(1); background: var(--sc-accent); border-color: var(--sc-accent); color: #fff; } }
@keyframes scFill { from { width: 0; } to { width: var(--w); } }
@keyframes scCorrect { 0%,38% { border-color: var(--sc-line); background: #fff; } 44%,100% { border-color: var(--sc-good-line); background: var(--sc-good-soft); color: #065f46; } }
@keyframes scWrongDim { 0%,42% { opacity: 1; } 50%,100% { opacity: .42; } }
@keyframes scTick { 0%,40% { opacity: 0; transform: scale(.5); } 47% { opacity: 1; transform: scale(1.2); } 53%,100% { opacity: 1; transform: scale(1); } }
@keyframes scIxGood { 0%,40% { background: var(--sc-line-soft); color: var(--sc-ink-soft); } 46%,100% { background: var(--sc-good); color: #fff; } }
@keyframes scUp { 0%,52% { opacity: 0; transform: translateY(8px); } 60%,100% { opacity: 1; transform: translateY(0); } }
@keyframes scUpLate { 0%,34% { opacity: 0; transform: translateY(8px); } 44%,100% { opacity: 1; transform: translateY(0); } }
@keyframes scUpQuick { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scType { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes scBlink { 50% { opacity: 0; } }
@keyframes scPulseSoft { 0%,100% { box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--sc-accent) 80%, transparent); } 50% { box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--sc-accent) 100%, transparent); } }