:root {
  --card-glass-1: rgba(255, 255, 255, 0.9);
  --card-glass-2: rgba(255, 255, 255, 0.7);
  --card-glass-3: rgba(255, 255, 255, 0.84);
  --panel-glass-1: rgba(255, 255, 255, 0.86);
  --panel-glass-2: rgba(255, 255, 255, 0.6);
  --bubble-glass: rgba(255, 255, 255, 0.78);
}

html[data-theme="night"] {
  --card-glass-1: rgba(255, 255, 255, 0.97);
  --card-glass-2: rgba(255, 255, 255, 0.9);
  --card-glass-3: rgba(255, 255, 255, 0.95);
  --panel-glass-1: rgba(255, 255, 255, 0.95);
  --panel-glass-2: rgba(255, 255, 255, 0.82);
  --bubble-glass: rgba(255, 255, 255, 0.9);
}

[data-tone="blue"]   { --accent: var(--g-blue);   --glow: var(--blue-glow);   --accent-ink: var(--blue-ink); }
[data-tone="red"]    { --accent: var(--g-red);    --glow: var(--red-glow);    --accent-ink: var(--red-ink); }
[data-tone="yellow"] { --accent: var(--g-yellow); --glow: var(--yellow-glow); --accent-ink: var(--yellow-ink); }
[data-tone="green"]  { --accent: var(--g-green);  --glow: var(--green-glow);  --accent-ink: var(--green-ink); }

.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100%, 1240px);
  margin-top: 26px;
}

.carousel__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--card-h) + 96px);
}
.carousel__track {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 46%;
}

.carousel__nav {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 12px 30px rgba(10, 38, 78, 0.24);
  color: #234a80;
  cursor: pointer;
  transition: transform 0.25s var(--ease-swoosh), background 0.25s ease;
}
.carousel__nav svg { width: 22px; height: 22px; }
.carousel__nav:hover { transform: translateY(-2px); background: #ffffff; }
.carousel__nav:active { transform: translateY(0) scale(0.96); }

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  margin-top: calc(var(--card-h) / -2);
  transform:
    translate3d(calc(var(--o) * var(--step)), 0, 0)
    rotateY(calc(var(--o) * -17deg))
    scale(var(--s, 1));
  opacity: var(--o-op, 1);
  transition: transform 0.55s var(--ease-swoosh), opacity 0.4s ease;
}
.card.is-far { pointer-events: none; }
.card.is-open { z-index: 4; }

.card__body {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 20px;
  border-radius: var(--r-card);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.14) 32%, rgba(255, 255, 255, 0.08) 62%, rgba(255, 255, 255, 0.5)),
    linear-gradient(168deg, var(--card-glass-1), var(--card-glass-2) 54%, var(--card-glass-3));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 44px rgba(255, 255, 255, 0.22),
    0 34px 62px -26px var(--glow),
    0 16px 34px rgba(9, 36, 74, 0.26);
  overflow: hidden;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.35s ease;
}
.card__body:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.card:not(.is-open) .card__body:hover {
  box-shadow:
    0 38px 68px -20px var(--glow),
    0 16px 34px rgba(9, 36, 74, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
@keyframes bloomDrift {
  from { translate: 0 -6px; scale: 0.97; opacity: 0.72; }
  to { translate: 0 10px; scale: 1.05; opacity: 1; }
}

.card__bloom {
  position: absolute;
  left: 6%;
  right: 6%;
  top: -52%;
  height: 112%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), rgba(255, 255, 255, 0) 76%);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
  animation: bloomDrift var(--bloom, 9s) ease-in-out infinite alternate;
  animation-delay: var(--bob, 0s);
}
.card__flare {
  position: absolute;
  left: -18%;
  bottom: -26%;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.card__role {
  position: relative;
  z-index: 1;
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--accent-ink);
}
.card__ask {
  position: relative;
  flex: 1 1 auto;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 600;
  color: var(--accent-ink);
}
.card__src {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.5;
  color: #2f4763;
}
.card__src b { font-weight: 500; color: var(--accent-ink); }
.card__open {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: var(--accent-ink, var(--blue-ink));
  box-shadow: 0 10px 22px -10px var(--glow);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
}
.card__open svg { width: 14px; height: 14px; }
.card:not(.is-open) .card__open { opacity: 0; }
.card__open { transition: opacity 0.3s ease; }

.carousel__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 10px;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: rgba(7, 28, 58, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 30px rgba(6, 28, 60, 0.28);
}
.carousel__dots { display: flex; align-items: center; gap: 10px; }
.dot {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}
.dot::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.4);
  transition: transform 0.25s var(--ease-swoosh), background 0.25s ease;
}
.dot[aria-current="true"]::after { background: #ffffff; transform: scale(1.3); }
.dot:hover::after { background: rgba(255, 255, 255, 0.85); }

.flyer {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 40;
  width: var(--card-w);
  height: var(--card-h);
  pointer-events: none;
  will-change: transform;
  opacity: 0;
}
.flyer.is-live { opacity: 1; }
.flyer .card__bloom { animation: none; }
.flyer .card__open { opacity: 0; }

.stage--chat .chat {
  width: min(100%, 1120px);
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  gap: 26px;
  align-items: stretch;
}
.stage--chat .chat__brief .card__body,
.stage--chat .chat__panel {
  opacity: 0;
  clip-path: inset(0 0 100% 0 round 26px);
  transition: clip-path 0.5s var(--ease-swoosh), opacity 0.32s ease;
}
body[data-stage="chat"] .stage--chat .chat__brief .card__body {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 26px);
}
body[data-stage="chat"] .stage--chat .chat__panel {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 30px);
  transition-delay: 0.2s, 0.22s;
}
.chat.is-armed .chat__brief .card__body,
.chat.is-armed .chat__panel { transition: none; }
body[data-stage="chat"] .chat.is-folded .chat__panel,
body[data-stage="chat"] .chat.is-folded .chat__brief .card__body { clip-path: none; transition: none; }

.chat__brief { position: relative; display: flex; min-height: var(--card-h); }
.chat__brief .card {
  position: relative;
  left: auto;
  top: auto;
  margin: 0;
  transform: none;
  width: 100%;
  height: auto;
  transition: height 0.5s var(--ease-swoosh);
}
.chat__brief .card.is-collapsed { height: var(--card-h); }
.chat__brief .card__bloom { --bloom: 11s; }
.chat__brief .card__ask { font-size: 19px; display: flex; align-items: center; }
.chat__brief .card__body { gap: 16px; }
.card.is-waiting { visibility: hidden; }

.brief__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(23, 54, 98, 0.12);
}
.brief__list li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
.brief__list b {
  flex: 0 0 68px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 2px;
}

.chat__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  max-height: min(620px, calc(100dvh - var(--top-h) - var(--bar-h) - 40px));
  border-radius: 30px;
  border: 1px solid var(--glass-line);
  background:
    linear-gradient(180deg, var(--panel-glass-1), var(--panel-glass-2));
  box-shadow:
    0 34px 70px -26px rgba(255, 196, 90, 0.75),
    0 18px 44px rgba(9, 36, 74, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  overflow: hidden;
}
.chat__panel::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -34%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 122, 0.6), rgba(255, 214, 122, 0) 72%);
  filter: blur(24px);
  pointer-events: none;
}

.chat__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--glass-edge);
}
.ball {
  position: relative;
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
}
.ball__canvas { position: relative; width: 104px; height: 104px; display: block; }
.ball__halo {
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 209, 92, 0.75), rgba(255, 209, 92, 0) 72%);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
html[data-theme="night"] .ball__halo {
  background: radial-gradient(closest-side, rgba(255, 246, 214, 0) 0%, rgba(255, 246, 214, 0) 48%, rgba(255, 242, 202, 0.5) 61%, rgba(206, 226, 250, 0.28) 72%, rgba(180, 210, 245, 0) 88%);
  opacity: 0.9;
}
.ball[data-state="typing"] { animation: ballPulse 1.15s ease-in-out infinite; }
.ball[data-state="typing"] .ball__halo { opacity: 1; animation: haloPulse 1.15s ease-in-out infinite; }
@keyframes ballPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.11); }
}
@keyframes haloPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  45% { transform: scale(1.24); opacity: 1; }
}

.chat__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat__name { font-family: var(--font-display); -webkit-font-smoothing: none; font-smooth: never; font-size: 24px; line-height: 1; color: #7a4d00; }
.chat__sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }

.chat__stream {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 54, 98, 0.3) transparent;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 3%, #000 96%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 3%, #000 96%, rgba(0, 0, 0, 0) 100%);
}
.chat__stream::-webkit-scrollbar { width: 10px; }
.chat__stream::-webkit-scrollbar-track { background: transparent; }
.chat__stream::-webkit-scrollbar-thumb { background: rgba(23, 54, 98, 0.24); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
.chat__stream:focus-visible { outline: 2px solid var(--g-blue); outline-offset: -3px; }

.bubble {
  position: relative;
  max-width: 92%;
  padding: 13px 16px 14px;
  border-radius: 20px 20px 20px 6px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: var(--bubble-glass);
  box-shadow: 0 12px 26px -16px rgba(23, 54, 98, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  animation: bubbleIn 0.42s var(--ease-swoosh) both;
}
html[data-theme="night"] {
  --card-glass-1: rgba(255, 255, 255, 0.97);
  --card-glass-2: rgba(255, 255, 255, 0.9);
  --card-glass-3: rgba(255, 255, 255, 0.95);
  --panel-glass-1: rgba(255, 255, 255, 0.95);
  --panel-glass-2: rgba(255, 255, 255, 0.82);
  --bubble-glass: rgba(255, 255, 255, 0.9);
}

.bubble--step { display: flex; gap: 11px; align-items: flex-start; background: rgba(255, 252, 245, 0.88); }
.bubble__col { flex: 1 1 auto; min-width: 0; }
.bubble--step .bubble__n { margin-top: 1px; }
.bubble--ask { background: rgba(255, 248, 226, 0.92); border-color: rgba(255, 226, 150, 0.9); }
.bubble--sheet { max-width: 100%; background: rgba(255, 255, 255, 0.9); border-radius: 20px; }
.bubble--lead { border-radius: 20px 20px 20px 6px; }
.bubble--offer { background: rgba(255, 250, 236, 0.95); }
.bubble--why { background: linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(255, 245, 230, 0.93)); }
@keyframes bubbleIn {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.bubble__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bubble__n {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accent, var(--g-blue));
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
}
.bubble__text { margin: 0; }
.bubble__cite::before { content: "from "; }
.bubble__cite {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  border-bottom: 1px dashed rgba(23, 54, 98, 0.32);
}
.bubble__note {
  margin: 8px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--accent, var(--g-blue));
  font-size: 13px;
  color: var(--ink-soft);
}
.bubble__caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent-ink, var(--blue-ink));
  animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

.chat__acts .act:not(.act--quiet) { background: var(--accent-ink, var(--blue-ink)); color: #ffffff; }
.chat__acts[hidden] { display: none; }
.chat__acts {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 20px 16px;
  border-top: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.75));
}
.acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.act {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72));
  box-shadow: 0 16px 30px -16px var(--glow, var(--blue-glow));
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink, var(--blue-ink));
  cursor: pointer;
  transition: transform 0.25s var(--ease-swoosh), box-shadow 0.25s ease;
}
.act:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -16px var(--glow, var(--blue-glow)); }
.act:active { transform: translateY(-1px) scale(0.99); }
.act--quiet { color: var(--ink-soft); box-shadow: 0 14px 26px -18px rgba(20, 50, 100, 0.6); }
.act[aria-pressed="true"] { background: var(--accent, var(--g-blue)); color: #ffffff; }

.sheet { width: 100%; }
.sheet__title {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.sheet__table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.sheet__table th, .sheet__table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(23, 54, 98, 0.1); }
.sheet__table th { font-weight: 500; color: var(--ink-faint); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.sheet__table td:last-child, .sheet__table th:last-child { text-align: right; }
.sheet__table tr[data-sum] td { border-top: 1px solid rgba(23, 54, 98, 0.24); border-bottom: none; font-weight: 500; color: var(--ink); }
.sheet__foot { margin-top: 10px; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.sheet__foot b {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--blue-ink));
}
.sheet__quote {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
  white-space: pre-line;
}
.sheet__list { display: flex; flex-direction: column; gap: 8px; }
.sheet__list li { display: flex; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.sheet__list b {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink, var(--blue-ink));
  padding-top: 2px;
  min-width: 58px;
}

.bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 30px rgba(10, 38, 78, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(8, 34, 70, 0.45);
  cursor: pointer;
  transition: transform 0.25s var(--ease-swoosh), background 0.25s ease;
}
.bar__btn:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.5); }
.bar__btn svg { width: 16px; height: 16px; }
.bar__btn--strong {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.7));
  color: var(--blue-ink);
  text-shadow: none;
  box-shadow: 0 18px 34px -14px var(--blue-glow), 0 10px 24px rgba(10, 38, 78, 0.24);
}
.bar__btn--strong { color: var(--blue-ink); }

@media (max-width: 980px) {
  .stage--chat .chat { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .chat__brief { min-height: 0; align-items: flex-start; }
  .chat__brief .card,
  .chat__brief .card.is-collapsed { height: auto; min-height: 0; }
  .chat__brief .card__body { padding: 16px 18px 17px; gap: 10px; }
  .chat__brief .card__ask { font-size: 16.5px; display: block; }
  .brief__list { display: none; }
  .chat__panel { min-height: 300px; max-height: none; }
  .sheet__list li { font-size: 12.5px; }
}
@media (max-width: 620px) {
  .card__ask { font-size: 19px; }
  .chat__name { font-size: 21px; }
  .ball, .ball__canvas { width: 62px; height: 62px; }
  .stage--chat .chat__brief,
  .stage--chat .chat__panel { transition-duration: 0.42s, 0.3s; }
  .chat__panel { border-radius: 24px; }
  .chat__stream { padding: 14px 14px 18px; }
  .bubble { max-width: 100%; font-size: 13.5px; }
  .sheet__table { font-size: 11.5px; }
  .sheet__table th, .sheet__table td { padding: 6px 5px; }
  .carousel { margin-top: 10px; gap: 2px; }
  .carousel__viewport { height: calc(var(--card-h) + 44px); }
  .carousel__nav { width: 44px; height: 44px; }
  .carousel__nav svg { width: 20px; height: 20px; }
  .carousel__foot { flex-direction: column; gap: 4px; padding: 6px 14px; margin-top: 6px; }
  .card__ask { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  .card__body { animation: none; }
  .ball[data-state="typing"], .ball[data-state="typing"] .ball__halo { animation: none; }
  .ball[data-state="typing"] { transform: scale(1.06); }
  .bubble { animation: none; }
  .card { transition-duration: 0.001ms; }
  .stage--chat .chat { transition-duration: 0.001ms; }
  .bubble__caret { display: none; }
}

@media (max-width: 430px) {
  .card__ask { font-size: 16px; }
  .carousel { position: relative; }
  .carousel__nav {
    position: absolute;
    top: calc(50% - 27px);
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255, 255, 255, 0.88);
  }
  .carousel__nav--prev { left: -2px; }
  .carousel__nav--next { right: -2px; }
  .carousel__nav:hover, .carousel__nav:active { transform: translateY(-50%); }
}