/* Flip-card backs (visual) and the privacy motion. */

/* ---------------- Card backs ----------------
   Each back holds a small scene. The resting styles are the scene's end state (what reduced
   motion and the flip back show); flipping the card plays the scene from the start, once.
   One timeline per card: --d long, starting --dl after the click (while the card turns). */
.face-back > .back-in { padding: 22px 22px 18px; gap: 10px; overflow: hidden; }
.face-cap { font-size: 15px; line-height: 1.45; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); word-break: keep-all; text-wrap: balance; }
.cv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cv { --d: 3.4s; --dl: 0.45s; position: relative; display: block; flex: 1; min-height: 0; font-size: 12px; line-height: 1.4; }
.cv span, .cv b, .cv i, .cv mark { font-style: normal; }
.card[aria-pressed="true"] .cv *, .card[aria-pressed="true"] .cv *::after {
  animation-duration: var(--d); animation-delay: var(--dl); animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.3, 0.7, 0.3, 1);
}

/* 1. 학생마다 대화방: 김하늘 → 이도윤 → 박서연, each with its own talk, then back to 김하늘,
   whose earlier talk is still there and simply continues. */
.cv-rooms { --d: 7s; display: flex; gap: 10px; padding-top: 2px; }
.cr-list { position: relative; flex: 0 0 74px; display: flex; flex-direction: column; align-self: flex-start; }
.cr-hl { position: absolute; left: 0; right: 0; top: 0; height: 28px; border-radius: 9px; background: var(--accent-soft); }
.cr-stu { position: relative; display: flex; align-items: center; height: 28px; padding: 0 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.cr-stu.s1 { color: var(--accent); }
.cr-pane { position: relative; display: block; flex: 1; min-width: 0; height: 92px; border-left: 1px solid rgba(40, 44, 80, 0.08); }
.cr-th { position: absolute; inset: 0 0 0 8px; display: flex; flex-direction: column; gap: 5px; }
.cr-th.t2, .cr-th.t3 { opacity: 0; }
.cr-b { max-width: 100%; box-sizing: border-box; padding: 5px 9px; font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-b.me { align-self: flex-end; border-radius: 11px 11px 3px 11px; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; }
.cr-b.ai { align-self: flex-start; border-radius: 11px 11px 11px 3px; background: rgba(40, 44, 80, 0.07); color: var(--ink-2); }
.card[aria-pressed="true"] .cr-hl { animation-name: cr-hl; animation-timing-function: ease; }
.card[aria-pressed="true"] .cr-stu.s1 { animation-name: cr-s1; }
.card[aria-pressed="true"] .cr-stu.s2 { animation-name: cr-s2; }
.card[aria-pressed="true"] .cr-stu.s3 { animation-name: cr-s3; }
.card[aria-pressed="true"] .cr-th.t1 { animation-name: cr-t1; }
.card[aria-pressed="true"] .cr-th.t2 { animation-name: cr-t2; }
.card[aria-pressed="true"] .cr-th.t3 { animation-name: cr-t3; }
.card[aria-pressed="true"] .cr-b.n1 { animation-name: cr-n1; }
@keyframes cr-hl { 0%, 27% { transform: none; } 32%, 52% { transform: translateY(28px); } 57%, 76% { transform: translateY(56px); } 81%, 100% { transform: none; } }
@keyframes cr-s1 { 0%, 27% { color: var(--accent); } 30%, 79% { color: var(--ink-3); } 82%, 100% { color: var(--accent); } }
@keyframes cr-s2 { 0%, 29% { color: var(--ink-3); } 32%, 53% { color: var(--accent); } 56%, 100% { color: var(--ink-3); } }
@keyframes cr-s3 { 0%, 54% { color: var(--ink-3); } 57%, 77% { color: var(--accent); } 80%, 100% { color: var(--ink-3); } }
@keyframes cr-t1 { 0% { opacity: 0; transform: translateX(10px); } 5%, 26% { opacity: 1; transform: none; } 30%, 80% { opacity: 0; transform: translateX(-10px); } 85%, 100% { opacity: 1; transform: none; } }
@keyframes cr-t2 { 0%, 31% { opacity: 0; transform: translateX(10px); } 35%, 51% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes cr-t3 { 0%, 56% { opacity: 0; transform: translateX(10px); } 60%, 75% { opacity: 1; transform: none; } 79%, 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes cr-n1 { 0%, 89% { opacity: 0; transform: translateY(6px); } 95%, 100% { opacity: 1; transform: none; } }

/* 2. 이름 가림: the sent line turns 학생A at the dashed edge; the answer turns back. */
.cv-mask { --d: 3.6s; --cw: 104px; --end: calc(100% - 44px - var(--cw) - 6px); min-height: 104px; }
.cm-side { position: absolute; left: 0; top: 0; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.cm-line { position: absolute; top: 14%; bottom: 2%; left: calc(50% - 25px); width: 0; border-left: 1.5px dashed rgba(76, 116, 255, 0.45); opacity: 0.6; }
.cm-orb { position: absolute; right: 0; top: 50%; width: 44px; height: 44px; margin-top: -18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(140deg, #45c8ff, #4c74ff 40%, #8a5cff 72%, #ff6fc8); box-shadow: 0 8px 20px rgba(110, 90, 255, 0.35); }
.cm-rail { position: absolute; left: 0; right: 0; height: 26px; }
.cm-rail.out { top: 26%; transform: translateX(var(--end)); }
.cm-rail.in { top: 66%; }
.cm-chip { position: absolute; left: 0; top: 0; width: var(--cw); height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 999px; background: #fff; border: 1px solid rgba(40, 44, 80, 0.1); box-shadow: 0 4px 12px rgba(40, 60, 140, 0.1); font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; }
.cm-name { display: inline-grid; font-weight: 700; }
.cm-name i { grid-area: 1 / 1; }
.cm-name .real { color: var(--accent); }
.cm-name .code { color: #6a45e0; }
.cm-rail.out .real, .cm-rail.in .code { opacity: 0; }
.card[aria-pressed="true"] .cm-rail.out { animation-name: cm-out; }
.card[aria-pressed="true"] .cm-rail.out .real { animation-name: cm-out-real; }
.card[aria-pressed="true"] .cm-rail.out .code { animation-name: cm-out-code; }
.card[aria-pressed="true"] .cm-rail.in { animation-name: cm-in; }
.card[aria-pressed="true"] .cm-rail.in .code { animation-name: cm-in-code; }
.card[aria-pressed="true"] .cm-rail.in .real { animation-name: cm-in-real; }
.card[aria-pressed="true"] .cm-orb { animation-name: cm-orb; }
.card[aria-pressed="true"] .cm-line { animation-name: cm-line; }
@keyframes cm-out { 0%, 6% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; transform: translateX(0); } 46%, 100% { opacity: 1; transform: translateX(var(--end)); } }
@keyframes cm-out-real { 0%, 26% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes cm-out-code { 0%, 26% { opacity: 0; transform: translateY(5px); } 31%, 100% { opacity: 1; transform: none; } }
@keyframes cm-orb { 0%, 44% { transform: scale(1); } 50% { transform: scale(1.14); } 57%, 100% { transform: scale(1); } }
@keyframes cm-in { 0%, 54% { opacity: 0; transform: translateX(var(--end)); } 60% { opacity: 1; transform: translateX(var(--end)); } 94%, 100% { opacity: 1; transform: translateX(0); } }
@keyframes cm-in-code { 0%, 75% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes cm-in-real { 0%, 75% { opacity: 0; transform: translateY(5px); } 80%, 100% { opacity: 1; transform: none; } }
@keyframes cm-line { 0%, 22% { opacity: 0.6; } 29% { opacity: 1; } 36%, 70% { opacity: 0.6; } 77% { opacity: 1; } 84%, 100% { opacity: 0.6; } }

/* 3. 같은 첫머리: the repeated opening is flagged, struck and rewritten. */
.cv-dup { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.cd-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 11px; background: rgba(40, 44, 80, 0.045); white-space: nowrap; overflow: hidden; }
.cd-row b { flex: none; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.cd-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--ink-3); }
.cv-dup mark { position: relative; display: inline-block; padding: 1px 5px; border-radius: 6px; font-weight: 600; color: inherit; background: none; }
.cv-dup .m1 { color: #0b6aa0; background: rgba(69, 200, 255, 0.2); }
.cv-dup .m2 { color: #5b3cc4; background: rgba(138, 92, 255, 0.15); }
.cv-dup .m3 { color: #b0307e; background: rgba(255, 111, 200, 0.18); }
.cd-swap { display: inline-grid; }
.cd-swap mark { grid-area: 1 / 1; justify-self: start; }
.cd-swap .old { opacity: 0; }
.cd-swap .old::after { content: ""; position: absolute; left: 3px; right: 3px; top: 52%; height: 1.6px; border-radius: 2px; background: #d0343f; transform: scaleX(0); transform-origin: left; }
.cd-flags { display: grid; justify-items: end; }
.cd-flag { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.cd-flag.warn { color: #a3500c; background: rgba(255, 170, 60, 0.2); opacity: 0; }
.cd-flag.ok { color: var(--accent); background: var(--accent-soft); }
.cd-flag.ok::before { content: ""; width: 8px; height: 4px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.card[aria-pressed="true"] .cd-row.r1 { animation-name: cd-r1; }
.card[aria-pressed="true"] .cd-row.r2 { animation-name: cd-r2; }
.card[aria-pressed="true"] .cd-row.r3 { animation-name: cd-r3; }
.card[aria-pressed="true"] .cd-row.r1 .m1 { animation-name: cd-pair; }
.card[aria-pressed="true"] .cd-swap .old { animation-name: cd-pair, cd-old; }
.card[aria-pressed="true"] .cd-swap .old::after { animation-name: cd-strike; }
.card[aria-pressed="true"] .cd-swap .new { animation-name: cd-new; }
.card[aria-pressed="true"] .cd-flag.warn { animation-name: cd-warn; }
.card[aria-pressed="true"] .cd-flag.ok { animation-name: cd-ok; }
@keyframes cd-r1 { 0%, 2% { opacity: 0; transform: translateY(6px); } 10%, 100% { opacity: 1; transform: none; } }
@keyframes cd-r2 { 0%, 8% { opacity: 0; transform: translateY(6px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes cd-r3 { 0%, 14% { opacity: 0; transform: translateY(6px); } 22%, 100% { opacity: 1; transform: none; } }
@keyframes cd-pair { 0%, 28% { box-shadow: 0 0 0 0 rgba(255, 150, 40, 0); } 34%, 50% { box-shadow: 0 0 0 2px rgba(255, 150, 40, 0.8); } 58%, 100% { box-shadow: 0 0 0 0 rgba(255, 150, 40, 0); } }
@keyframes cd-old { 0%, 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes cd-strike { 0%, 46% { transform: scaleX(0); } 56%, 100% { transform: scaleX(1); } }
@keyframes cd-new { 0%, 64% { opacity: 0; transform: translateY(5px); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes cd-warn { 0%, 30% { opacity: 0; transform: scale(0.85); } 36%, 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: none; } }
@keyframes cd-ok { 0%, 68% { opacity: 0; transform: scale(0.85); } 76%, 100% { opacity: 1; transform: none; } }

/* 4. 바이트·금지어: ask for a length, the meter runs nearly full, the university name is caught. */
.cv-bytes { --d: 3.2s; display: flex; flex-direction: column; gap: 7px; padding-top: 1px; }
.cb-ask { align-self: flex-end; padding: 5px 11px; border-radius: 12px 12px 3px 12px; background: linear-gradient(180deg, var(--accent-a), var(--accent-b)); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cb-card { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px 8px; border-radius: 13px; background: #fff; border: 1px solid rgba(40, 44, 80, 0.08); box-shadow: 0 6px 16px rgba(40, 60, 140, 0.08); font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }
.cb-l { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-bad { position: relative; color: #c42b37; font-weight: 600; }
.cb-bad::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; transform-origin: left; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 3 Q2 0 4 3 T8 3' fill='none' stroke='%23d0343f' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x 0 0 / 8px 4px; }
.cb-meter { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 10.5px; color: var(--ink-3); }
.cb-track { flex: 1; height: 4px; border-radius: 4px; background: rgba(40, 44, 80, 0.08); overflow: hidden; }
.cb-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #45c8ff, #4c74ff, #8a5cff); transform-origin: left; transform: scaleX(0.996); }
.cb-n { white-space: nowrap; }
.cb-n b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #b4232f; background: #fde9eb; white-space: nowrap; }
.cb-tag::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; font-size: 9.5px; color: #fff; background: #d0343f; }
.card[aria-pressed="true"] .cb-ask { animation-name: cb-ask; }
.card[aria-pressed="true"] .cb-card { animation-name: cb-card; }
.card[aria-pressed="true"] .cb-fill { animation-name: cb-fill; }
.card[aria-pressed="true"] .cb-bad { animation-name: cb-bad; }
.card[aria-pressed="true"] .cb-bad::after { animation-name: cb-wave; }
.card[aria-pressed="true"] .cb-tag { animation-name: cb-tag; }
@keyframes cb-ask { 0%, 3% { opacity: 0; transform: translateY(6px); } 13%, 100% { opacity: 1; transform: none; } }
@keyframes cb-card { 0%, 13% { opacity: 0; transform: translateY(6px); } 23%, 100% { opacity: 1; transform: none; } }
@keyframes cb-fill { 0%, 24% { transform: scaleX(0); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } 64%, 100% { transform: scaleX(0.996); } }
@keyframes cb-bad { 0%, 66% { color: var(--ink-2); } 72%, 100% { color: #c42b37; } }
@keyframes cb-wave { 0%, 66% { opacity: 0; transform: scaleX(0); } 74%, 100% { opacity: 1; transform: none; } }
@keyframes cb-tag { 0%, 72% { opacity: 0; transform: translateY(-4px) scale(0.92); } 82%, 100% { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .card { height: 262px; }
}

/* ---------------- Privacy: the folder stays in the PC; names are swapped at the gate ----------------
   cards.js drives one loop (classes below) while the scene is on screen. */
.privacy { align-items: center; }
.pv-wrap { flex: 1.25 1 380px; min-width: 0; }
.privacy-grid { flex: 1 1 100%; }
.pv { container-type: inline-size; --fs: clamp(12.5px, 2.9cqw, 16px); position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 11; overflow: clip; overflow-clip-margin: 30px; }
.pv-mon { position: absolute; left: 0; top: 6%; width: 52%; height: 86%; }
.pv-screen { position: absolute; left: 0; top: 0; right: 0; height: 84%; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, rgba(255, 255, 255, 0.94), rgba(234, 240, 255, 0.8)); border: 2px solid rgba(40, 44, 80, 0.14); box-shadow: 0 18px 40px rgba(60, 80, 200, 0.14), inset 0 1px 0 #fff; }
.pv-label { position: absolute; left: 7%; top: 7%; display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.pv-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fb26b; }
.pv-folder { position: absolute; left: 50%; top: 26%; width: 40%; display: flex; flex-direction: column; align-items: center; gap: 5px; transform: translateX(-50%); }
.pv-folder svg { width: 100%; height: auto; display: block; transform-origin: 50% 80%; }
.pv-folder > span { font-size: var(--fs); font-weight: 700; color: var(--ink); white-space: nowrap; }
.pv.got .pv-folder svg { animation: pv-bump 0.5s ease; }
@keyframes pv-bump { 40% { transform: scale(1.1); } }
.pv-fly { position: absolute; inset: 0; z-index: 1; opacity: 0; }
.pv-item { position: absolute; padding: 4px 11px; border-radius: 8px; font-size: calc(var(--fs) - 1.5px); font-weight: 700; color: var(--ink-2); background: #fff; border: 1px solid rgba(40, 44, 80, 0.1); box-shadow: 0 4px 10px rgba(40, 60, 140, 0.12); white-space: nowrap; }
.f1 .pv-item { left: 8%; top: 24%; }
.f2 .pv-item { right: 7%; top: 30%; }
.f3 .pv-item { left: 12%; top: 66%; }
.f1 { --fx: 34%; --fy: 15%; }
.f2 { --fx: -34%; --fy: 9%; }
.f3 { --fx: 30%; --fy: -27%; }
.pv.files .pv-fly { animation: pv-fly 1.3s cubic-bezier(0.5, 0, 0.3, 1) both; }
.pv.files .f2 { animation-delay: 0.45s; }
.pv.files .f3 { animation-delay: 0.9s; }
@keyframes pv-fly { 0% { opacity: 0; transform: translateY(8px); } 22%, 45% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(0.4); } }
.pv-neck { position: absolute; left: 44%; top: 84%; width: 12%; height: 9%; background: linear-gradient(rgba(40, 44, 80, 0.16), rgba(40, 44, 80, 0.1)); }
.pv-base { position: absolute; left: 28%; top: 92%; width: 44%; height: 5%; border-radius: 999px; background: rgba(40, 44, 80, 0.14); }

/* The gate between the PC and the AI: every line passes it, and names change here. */
.pv-gate { position: absolute; left: 66%; top: 15%; bottom: 10%; width: 0; border-left: 2px dashed rgba(106, 69, 224, 0.4); transition: border-color 0.3s ease; }
.pv-badge { position: absolute; left: 0; top: -2px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: calc(var(--fs) - 1px); font-weight: 700; color: #5b3cc4; background: #f1ecff; border: 1px solid rgba(106, 69, 224, 0.25); white-space: nowrap; transform: translate(-50%, -100%); transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.5, 1), box-shadow 0.3s ease, background-color 0.3s ease; }
.pv.flash .pv-gate { border-color: #6a45e0; }
.pv.flash .pv-badge { background: #fff; transform: translate(-50%, -100%) scale(1.12); box-shadow: 0 0 0 6px rgba(138, 92, 255, 0.16), 0 8px 20px rgba(106, 69, 224, 0.3); }

.pv-ai { position: absolute; right: 0; top: 34%; width: 18%; aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: calc(var(--fs) + 3px); font-weight: 700; color: #fff; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), transparent 42%), linear-gradient(140deg, #45c8ff, #4c74ff 38%, #8a5cff 68%, #ff6fc8); box-shadow: 0 16px 36px rgba(110, 90, 255, 0.34); transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.pv.think .pv-ai { transform: scale(1.12); }
.pv-note { position: absolute; right: -2%; top: 66%; width: 26%; text-align: center; font-size: calc(var(--fs) - 1.5px); line-height: 1.4; font-weight: 600; color: var(--ink-3); word-break: keep-all; }

/* The travelling line. JS sets left (its centre) and the classes. */
.pv-msg { position: absolute; z-index: 3; left: 26%; top: 36%; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 8px; border-radius: 999px; background: #fff; border: 1px solid rgba(40, 44, 80, 0.1); box-shadow: 0 8px 22px rgba(40, 60, 140, 0.18); font-size: var(--fs); font-weight: 600; color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(0.6); transition: left 1s cubic-bezier(0.5, 0, 0.25, 1), opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.pv-msg.m-in { top: 60%; left: 90%; }
.pv-msg.show { opacity: 1; transform: translate(-50%, -50%); }
.pv-msg.gone { opacity: 0; transform: translate(-50%, -50%) scale(0.45); }
.pv-msg.jump { transition: none; }
.pv-nm { position: relative; display: inline-grid; font-weight: 700; }
.pv-nm i { grid-area: 1 / 1; justify-self: center; padding: 2px 8px; border-radius: 8px; font-style: normal; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.pv-nm .n-real { color: var(--accent); background: var(--accent-soft); }
.pv-nm .n-code { color: #5b3cc4; background: rgba(138, 92, 255, 0.16); }
.pv-nm .to { opacity: 0; transform: scale(1.7); }
.pv-msg.sw .pv-nm .from { opacity: 0; transform: translateY(-90%) scale(0.8); }
.pv-msg.sw .pv-nm .to { opacity: 1; transform: none; }
.pv-msg.sw { animation: pv-sw 0.6s ease; }
@keyframes pv-sw { 30% { box-shadow: 0 0 0 5px rgba(138, 92, 255, 0.28), 0 8px 22px rgba(40, 60, 140, 0.18); } }

@media (max-width: 600px) {
  .pv { aspect-ratio: 16 / 12.5; }
  .pv-msg { padding: 6px 11px 6px 6px; gap: 4px; }
}

/* ---------------- Reduced motion: every scene rests on its end state ---------------- */
@media (prefers-reduced-motion: reduce) {
  .cv *, .cv *::before, .cv *::after, .pv *, .pv *::before, .pv *::after { animation: none !important; }
}