/* Solo Ascent visual system — two fonts, calmer contrast, light motion.
   Loaded after styles.css. Customization looks stay in customize.css. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces.woff") format("woff");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic.woff") format("woff");
  font-weight: 500 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/plex-semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #07080f;
  --ink: #f3f1ea;
  --mute: rgba(243, 241, 234, .62);
  --faint: rgba(243, 241, 234, .38);
  --line: rgba(243, 241, 234, .16);
  --glass: rgba(8, 9, 16, .72);
  --tap: #f3f1ea;
  --tap-ink: #12131a;
  --gold: #c9b08a;
  --danger: #ff8a96;
  --font-ui: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-voice: "Fraunces", ui-serif, Georgia, serif;
}

html, body, button, input, textarea, select, .btn, .opt, .chip, .who, .rail, .hud, .sheet, .toast {
  font-family: var(--font-ui);
}
body { background: var(--bg); color: var(--ink); }

/* One clean face for every number */
.alt-lv b, .trio b, .flash .fl-txt b, .chart, .num, [data-h], [data-w],
.alt-goal, .clock, input[type="number"], input[type="date"] {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* One display face for companion lines, and nothing else decorative */
.line, .line.long, .line.has-q, .q, .prompt p, .sel-info p.tag {
  font-family: var(--font-voice);
  font-weight: 560;
  font-style: normal;
  letter-spacing: -.01em;
}
.q, .prompt p { font-style: italic; }
.q small, .who b, .who em, .sel-info p.tag + *, .fl-txt small, .fl-txt span {
  font-family: var(--font-ui);
  font-style: normal;
}

/* Calmer accents: one voice color each, Rai matches his teal gi */
[data-accent="surge"], .p-surge { --acc: #7aa2ff; --acc2: #2a3f8a; }
[data-accent="rai"], .p-rai { --acc: #2dd4bf; --acc2: #0f5f56; }
[data-accent="oro"], .p-oro { --acc: #c9b08a; --acc2: #5c4730; }
[data-accent="hex"], .p-hex { --acc: #b89af0; --acc2: #4d3a86; }

/* High-contrast tap targets against the art */
.opt, .chip, .btn {
  background: rgba(8, 9, 16, .78);
  border: 1px solid rgba(243, 241, 234, .22);
  color: var(--ink);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.opt.primary, .btn.primary,
[data-accent="rai"] .btn.primary, [data-accent="oro"] .btn.primary {
  background: var(--tap);
  color: var(--tap-ink);
  border-color: transparent;
  box-shadow: 0 8px 28px -12px rgba(0, 0, 0, .7);
}
.opt.primary::before { background: var(--tap-ink); border-color: var(--tap-ink); box-shadow: none; }
.opt:active, .btn:active { filter: brightness(.96); }
.btn.ghost { background: transparent; color: var(--ink); }
.alt-goal { color: var(--ink); }
.alt-rail.gold i, .alt-rail.gold i::after { background: var(--acc); box-shadow: 0 0 10px var(--acc); }

/* Hex lantern sits on the chest in the new scene */
.p-hex .fx-a { left: 51.6%; top: 47.2%; width: 20%; }
.p-hex .fx-b { background: radial-gradient(50% 36% at 51.6% 47.2%, rgba(80, 220, 180, .2), transparent 70%); }

/* Quieter atmosphere — motes recede so the art leads */
.motes i { opacity: 0; animation-duration: 22s; width: 2px; height: 2px; box-shadow: 0 0 6px var(--acc); }
.motes i:nth-child(n+5) { display: none; }
.kb { animation-duration: 28s; }
@keyframes breathe { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.06) translate3d(-.6%, .5%, 0); } }

/* Speak: a short, living pulse — not a loop of the whole screen */
.app.speaking .kb { animation: speak-breath 1.8s ease-in-out 1; }
.app.speaking .fx-a, .app.speaking .p-hex .fx-a { animation-duration: 1.1s; }
@keyframes speak-breath {
  0% { transform: scale(1.03); }
  40% { transform: scale(1.055) translate3d(0, -.4%, 0); }
  100% { transform: scale(1.03); }
}
.line.speak .w { animation-duration: .45s; }

/* Streak hit: a brief, soft ring */
.app.streak-hit .stage::after {
  content: "";
  position: absolute;
  inset: 18% 8% 28%;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--acc) 70%, #fff);
  box-shadow: 0 0 40px color-mix(in srgb, var(--acc) 35%, transparent);
  pointer-events: none;
  animation: streak-ring .9s ease-out 1 forwards;
  z-index: 2;
}
@keyframes streak-ring {
  0% { opacity: 0; transform: scale(.72); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Logged a win: a quiet lift of light, not a firework */
.app.logged-win .veil {
  animation: win-veil .7s ease-out 1;
}
.app.logged-win .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(50% 40% at 50% 42%, rgba(255, 255, 255, .16), transparent 70%);
  animation: win-glow .7s ease-out 1 forwards;
}
@keyframes win-veil {
  0% { opacity: 1; }
  40% { opacity: .7; }
  100% { opacity: 1; }
}
@keyframes win-glow {
  0% { opacity: 0; }
  30% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kb, .motes i, .fx-a, .fx-b, .p-hex .fx-a { animation: none !important; }
  .app.speaking .kb, .app.streak-hit .stage::after, .app.logged-win .stage::before, .app.logged-win .veil {
    animation: none !important;
  }
  .line.speak .w { opacity: 1; transform: none; filter: none; animation: none !important; }
}


/* ---------- Hologram presence ----------
   Full-body projection in a dark room. Do not crop or fade the torso. */
.app .stage {
  background:
    radial-gradient(ellipse 80% 28% at 50% 72%, color-mix(in srgb, var(--acc) 18%, transparent), transparent 70%),
    #020309;
}

/* Tall window so the whole figure, head to feet, fits above the dialogue. */
.app .frame {
  top: calc(2px + var(--safe-t));
  left: 50%;
  width: min(100%, 460px);
  height: 62%;
  aspect-ratio: auto;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
.app.has-sheet .frame { height: 42%; filter: none; }
.app.sheet-talk .frame,
.app.sheet-team .frame { height: 36%; }
.app.in-setup .frame { height: 64%; }

.holo-room { position: absolute; inset: 0; pointer-events: none; }
/* Keep the room dark around the figure, but never veil the body. */
.holo-room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 3, 9, .15) 0%, transparent 10%, transparent 70%, rgba(2, 3, 9, .55) 86%, #020309 100%);
}

.holo-cone {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 78%;
  height: 66%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 0%, transparent) 0%,
    color-mix(in srgb, var(--acc) 16%, transparent) 48%,
    color-mix(in srgb, var(--acc) 34%, transparent) 100%);
  clip-path: polygon(28% 0, 72% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
  opacity: .75;
  pointer-events: none;
  z-index: 0;
  animation: holo-cone 4.8s ease-in-out infinite;
}
.app.has-sheet .holo-cone { height: 44%; }
.app.sheet-talk .holo-cone,
.app.sheet-team .holo-cone { height: 38%; }
@keyframes holo-cone {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}

/* Pad sits under the feet, behind the figure. */
.holo-pad, .holo-ring {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, 0);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
}
.app.has-sheet .holo-pad,
.app.has-sheet .holo-ring { top: 40%; }
.app.sheet-talk .holo-pad,
.app.sheet-talk .holo-ring,
.app.sheet-team .holo-pad,
.app.sheet-team .holo-ring { top: 34%; }
.holo-pad {
  width: min(62%, 270px);
  height: 20px;
  background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--acc) 85%, #fff), color-mix(in srgb, var(--acc) 30%, transparent) 50%, transparent 74%);
  box-shadow: 0 0 26px color-mix(in srgb, var(--acc) 60%, transparent);
  opacity: .75;
  animation: holo-pad 3.2s ease-in-out infinite;
}
.holo-ring {
  width: min(70%, 300px);
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--acc) 50%, #fff);
  box-shadow: 0 0 14px color-mix(in srgb, var(--acc) 25%, transparent);
  opacity: .35;
}
@keyframes holo-pad {
  0%, 100% { opacity: .5; transform: translate(-50%, 0) scaleX(1); }
  50% { opacity: .9; transform: translate(-50%, 0) scaleX(1.05); }
}

/* Full figure, uncropped. No mask over the chest or torso. */
.app .kb {
  transform-origin: 50% 100%;
  animation: holo-float 5.6s ease-in-out infinite;
  will-change: transform, filter;
  -webkit-mask-image: none;
  mask-image: none;
}
.app .p-hex .kb {
  -webkit-mask-image: none;
  mask-image: none;
}
.app .kb img,
.app .p-hex .kb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  opacity: 1;
  filter: contrast(1.06) saturate(1.08) brightness(1.05);
}
@keyframes holo-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -1.4%, 0); }
}

/* The painted lantern is already on Hex's chest; keep only a soft glow, no offset blob. */
.app .p-hex .fx-a,
.app .p-hex .fx-b { display: none; }

.holo-scan, .holo-sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.holo-scan {
  background: repeating-linear-gradient(
    to bottom,
    rgba(226, 240, 255, .1) 0 1px,
    transparent 1px 4px
  );
  mix-blend-mode: overlay;
  opacity: .4;
  animation: holo-lines 7s linear infinite;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
@keyframes holo-lines {
  from { background-position: 0 0; }
  to { background-position: 0 36px; }
}
.holo-sweep {
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.18) 46%, transparent 100%);
  height: 18%;
  top: -18%;
  bottom: auto;
  mix-blend-mode: screen;
  opacity: .55;
  animation: holo-sweep 3.6s ease-in-out infinite;
}
@keyframes holo-sweep {
  0% { top: -18%; opacity: 0; }
  12% { opacity: .65; }
  88% { opacity: .4; }
  100% { top: 90%; opacity: 0; }
}

.app:not(.speaking) .holo-room { animation: holo-idle 5s ease-in-out infinite; }
@keyframes holo-idle {
  0%, 100% { filter: none; }
  18% { filter: brightness(1.04); }
  22% { filter: brightness(.94); }
  26% { filter: brightness(1.05); }
  60% { filter: none; }
  73% { filter: brightness(.96); }
  77% { filter: brightness(1.05); }
}

.app.speaking .holo-cone { animation: holo-cone-talk .4s ease-in-out infinite; opacity: 1; }
.app.speaking .holo-pad { animation: holo-pad .7s ease-in-out infinite; }
.app.speaking .holo-scan { opacity: .7; animation-duration: 1.6s; }
.app.speaking .kb {
  animation: holo-talk .42s ease-in-out infinite;
  filter: brightness(1.1) saturate(1.1);
}
@keyframes holo-cone-talk {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
@keyframes holo-talk {
  0%, 100% { transform: translate3d(0, -.8%, 0) scale(1); }
  50% { transform: translate3d(0, -2%, 0) scale(1.012); }
}

.app.holo-ack .holo-pad,
.app.holo-ack .holo-ring { animation: holo-ack-ring .6s ease-out 1; }
.app.holo-ack .kb { animation: holo-ack-fig .55s ease-out 1; }
@keyframes holo-ack-ring {
  0% { opacity: .4; transform: translate(-50%, 0) scale(.86); }
  60% { opacity: 1; }
  100% { opacity: .2; transform: translate(-50%, 0) scale(1.28); }
}
@keyframes holo-ack-fig {
  0% { transform: translate3d(0, 0, 0) scale(1); filter: brightness(1); }
  40% { transform: translate3d(0, -2%, 0) scale(1.03); filter: brightness(1.16); }
  100% { transform: translate3d(0, -.8%, 0) scale(1); filter: brightness(1); }
}

.holo-hit {
  position: absolute;
  left: 12%;
  right: 12%;
  top: calc(6px + var(--safe-t));
  height: 58%;
  z-index: 2;
  pointer-events: auto;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.holo-hit:focus-visible { outline: 2px solid var(--acc); outline-offset: 4px; }
.app.has-sheet .holo-hit { pointer-events: none; }

.app .veil {
  background: linear-gradient(180deg,
    rgba(2, 3, 9, .2) 0,
    rgba(2, 3, 9, 0) 10%,
    rgba(2, 3, 9, 0) 52%,
    rgba(2, 3, 9, .55) 68%,
    rgba(2, 3, 9, .96) 86%,
    #020309 100%);
}
.app.has-sheet .veil { background: rgba(2, 3, 9, .3); }
.app.sheet-talk .veil {
  background: linear-gradient(180deg, rgba(2, 3, 9, .15), transparent 14%, rgba(2, 3, 9, .88) 40%);
}

.app .motes i { opacity: 0; animation-duration: 9s; width: 2px; height: 2px; left: 50% !important; }
.app .motes i:nth-child(-n+5) { display: block; }
.app .motes i:nth-child(1) { margin-left: -8%; }
.app .motes i:nth-child(2) { margin-left: 6%; animation-delay: 1.4s; }
.app .motes i:nth-child(3) { margin-left: -2%; animation-delay: 3s; }
.app .motes i:nth-child(4) { margin-left: 10%; animation-delay: 5s; }
.app .motes i:nth-child(5) { margin-left: -12%; animation-delay: 6.5s; }
@keyframes mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: .9; }
  80% { opacity: .4; }
  100% { transform: translate3d(8px, calc(var(--vh) * -0.55), 0); opacity: 0; }
}

.app .line { text-shadow: 0 0 18px color-mix(in srgb, var(--acc) 35%, transparent), 0 2px 16px rgba(0, 0, 0, .9); }
.app.speaking .who b { text-shadow: 0 0 16px var(--acc); }

.app:not(.has-sheet):not(.in-setup) .dialogue {
  max-height: calc(var(--vh) * .36);
  display: flex;
  flex-direction: column;
}
.app:not(.has-sheet):not(.in-setup) .dialogue .who,
.app:not(.has-sheet):not(.in-setup) .dialogue .opts,
.app:not(.has-sheet):not(.in-setup) .dialogue .q,
.app:not(.has-sheet):not(.in-setup) .dialogue .tf-card {
  flex: none;
}
.app:not(.has-sheet):not(.in-setup) .dialogue .line {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.app:not(.has-sheet):not(.in-setup) .dialogue .line::-webkit-scrollbar { display: none; }

@media (max-height: 700px) {
  .app .frame { height: 50%; }
  .holo-pad, .holo-ring { top: 48%; }
  .holo-cone { height: 52%; }
  .app:not(.has-sheet):not(.in-setup) .dialogue { max-height: calc(var(--vh) * .44); }
  .app .line { font-size: 1rem; margin-bottom: 8px; }
  .app .opts { gap: 6px; }
  .app .opt { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .holo-cone, .holo-pad, .holo-scan, .holo-sweep, .holo-room,
  .app .kb, .app.speaking .kb, .app.speaking .holo-cone, .app.speaking .holo-pad,
  .app.holo-ack .kb, .app.holo-ack .holo-pad, .app.holo-ack .holo-ring, .motes i {
    animation: none !important;
  }
  .app .kb { filter: none; }
}

/* ---------- Lifelike presence (v12) ----------
   Idle: slow breathing from the feet, a gentle weight shift, and a hologram shimmer/glitch.
   Talking (.app.speaking, tied to the real spoken audio when voice is on): a livelier breath + lean,
   a small emphasis on each spoken word (.app.say-beat), and voice bars in the projector pad.
   The figure is always object-fit: contain inside the frame. Nothing here crops, masks, or fades the torso. */
.app .kb {
  transform-origin: 50% 100%;
  animation: holo-breathe 4.6s ease-in-out infinite;
  transition: scale .14s ease-out, translate .14s ease-out;
}
@keyframes holo-breathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1, 1); }
  42% { transform: translate3d(0, -.45%, 0) scale(1.004, 1.011); }
  58% { transform: translate3d(0, -.5%, 0) scale(1.004, 1.012); }
}
/* Weight shift: pivots between the feet, so the body sways but stays planted and fully in frame. */
.app .kb img,
.app .kb video {
  transform-origin: 50% 100%;
  animation: holo-shift 9.4s ease-in-out infinite;
}
@keyframes holo-shift {
  0%, 100% { transform: rotate(-.6deg) translate3d(-.4%, 0, 0); }
  50% { transform: rotate(.6deg) translate3d(.4%, 0, 0); }
}
/* Hex floats a touch instead of swaying from the feet; tails drift with the breath. */
.app .p-hex .kb img,
.app .p-hex .kb video { animation: holo-hover 7.2s ease-in-out infinite; }
@keyframes holo-hover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.3deg); }
  50% { transform: translate3d(0, -1%, 0) rotate(.3deg); }
}

/* Glitch band: a thin slice that briefly shifts hue as it passes, like a projection re-syncing. */
.holo-glitch {
  position: absolute;
  left: 18%;
  right: 18%;
  height: 2.6%;
  top: 30%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  -webkit-backdrop-filter: hue-rotate(38deg) brightness(1.35) saturate(1.3);
  backdrop-filter: hue-rotate(38deg) brightness(1.35) saturate(1.3);
  animation: holo-glitch 6.8s steps(1, end) infinite;
}
@keyframes holo-glitch {
  0%, 61%, 100% { opacity: 0; top: 30%; transform: translateX(0); }
  62% { opacity: 1; top: 22%; transform: translateX(1.2%); }
  63% { opacity: 1; top: 47%; transform: translateX(-1.4%); }
  64% { opacity: .8; top: 66%; transform: translateX(.8%); }
  65% { opacity: 0; }
  88% { opacity: 0; top: 38%; }
  89% { opacity: .9; top: 38%; transform: translateX(-.9%); }
  90% { opacity: 0; }
}

/* Talking: more breath, a slight lean toward you, and brighter light. */
.app.speaking .kb {
  animation: holo-talk-body 1.5s ease-in-out infinite;
  filter: brightness(1.08) saturate(1.08);
}
@keyframes holo-talk-body {
  0%, 100% { transform: translate3d(0, -.3%, 0) scale(1.002, 1.006) rotate(0deg); }
  30% { transform: translate3d(.25%, -.9%, 0) scale(1.006, 1.017) rotate(.35deg); }
  65% { transform: translate3d(-.2%, -.6%, 0) scale(1.004, 1.012) rotate(-.25deg); }
}
/* Each spoken word: a tiny emphasis (individual transform props stack on top of the animation). */
.app.say-beat .kb { scale: 1.007; translate: 0 -.35%; }
.app.speaking .holo-glitch { animation-duration: 3.4s; }

/* Voice bars: next to the companion's name on home and inside the Voice button on Talk.
   Hidden at rest, alive while talking, jump on each spoken word. */
.vbars {
  display: none;
  align-items: center;
  gap: 2px;
  height: 14px;
  align-self: center;
}
.vbars i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--acc) 75%, #fff);
  box-shadow: 0 0 6px var(--acc);
  transform: scaleY(.25);
}
.app.speaking .vbars { display: inline-flex; }
.app.speaking .vbars i { animation: holo-bar .5s ease-in-out infinite alternate; }
.app.speaking .vbars i:nth-child(2) { animation-duration: .36s; animation-delay: -.1s; }
.app.speaking .vbars i:nth-child(3) { animation-duration: .58s; animation-delay: -.25s; }
.app.speaking .vbars i:nth-child(4) { animation-duration: .42s; animation-delay: -.05s; }
.app.say-beat .vbars { filter: brightness(1.4); }
@keyframes holo-bar {
  from { transform: scaleY(.25); }
  to { transform: scaleY(1); }
}

/* Optional silent loops (idle / talking) stacked over the still; the still stays as the poster and fallback. */
.app .kb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  filter: contrast(1.06) saturate(1.08) brightness(1.05);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.app .kb video.ready.v-idle { opacity: 1; }
.app.speaking .kb video.ready.v-talk { opacity: 1; }
.app.speaking .kb video.ready.v-talk ~ video.v-idle { opacity: 0; }

/* Voice toggle on the Talk sheet and in Settings */
.talk-head { display: flex; align-items: center; gap: 8px; }
.talk-head > div { flex: 1 1 auto; min-width: 0; }
.voice-tg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 241, 234, .28);
  background: rgba(8, 9, 16, .7);
  color: var(--ink);
  font: 600 .82rem/1 var(--font-ui);
  cursor: pointer;
  flex: none;
}
.voice-tg svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.voice-tg svg path:first-child { fill: currentColor; stroke: none; }
.voice-tg.on { border-color: color-mix(in srgb, var(--acc) 70%, transparent); color: color-mix(in srgb, var(--acc) 55%, #fff); }
.voice-tg:not(.on) { color: var(--mute); }
.voice-tg:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.voice-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.voice-row > span { font-size: .92rem; }
.voice-row i { display: block; font-style: normal; color: var(--mute); font-size: .8rem; margin-top: 2px; }

@media (prefers-reduced-motion: reduce) {
  .app .kb, .app.speaking .kb, .app .kb img, .app .kb video, .app .p-hex .kb img,
  .holo-glitch, .app.speaking .vbars i { animation: none !important; transition: none !important; }
  .app.say-beat .kb { scale: none; translate: none; }
  .app .kb video { display: none !important; }
  .holo-glitch, .vbars { display: none !important; }
  .app.speaking .kb { filter: none; }
  /* Single, still acknowledgment: the pad and name glow once, nothing loops. */
  .app.holo-ack .holo-pad { opacity: 1; }
  .app.holo-ack .holo-ring { opacity: .8; }
  .app.holo-ack .who b, .app.holo-ack .talk-head h2 { text-shadow: 0 0 14px var(--acc); }
}