/* Sayonara_Alice.exe — Home evolution v87
   Deliberately isolated from the legacy layers: memory continuity, character
   states, archive viewer and small refinements to already-successful chrome. */

:root {
  --v87-memory-accent: 93, 196, 255;
  --v87-memory-violet: 91, 103, 255;
  --v87-scroll-progress: 0;
}

html.memory-seed-variant-1 { --v87-memory-accent: 116, 223, 255; --v87-memory-violet: 99, 112, 255; }
html.memory-seed-variant-2 { --v87-memory-accent: 137, 184, 255; --v87-memory-violet: 151, 105, 255; }
html.memory-seed-variant-3 { --v87-memory-accent: 78, 231, 219; --v87-memory-violet: 72, 128, 255; }
html.memory-seed-variant-4 { --v87-memory-accent: 179, 218, 255; --v87-memory-violet: 85, 104, 245; }

/* The navbar already has its own choreography. These are memory-sensitive
   highlights rather than a replacement animation. */
html.has-v83-memory-seed .navbar {
  box-shadow:
    0 0 28px rgba(var(--v87-memory-accent), 0.13),
    inset 0 0 26px rgba(var(--v87-memory-violet), 0.055);
}

html.has-v83-memory-seed .navbar .nav-svg {
  filter:
    drop-shadow(0 0 3px rgba(var(--v87-memory-accent), 0.48))
    drop-shadow(0 0 11px rgba(var(--v87-memory-violet), 0.18));
}

.navbar.compact .logo-lily-svg {
  transition: filter 320ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

html.has-v83-memory-seed .navbar.compact .logo-lily-svg {
  filter:
    drop-shadow(0 0 5px rgba(var(--v87-memory-accent), 0.62))
    drop-shadow(0 0 16px rgba(var(--v87-memory-violet), 0.3));
}

html.has-v83-memory-seed .navbar.compact .logo-lily-halo circle {
  animation: v87-seed-halo 3.8s ease-in-out infinite;
}

.navbar.compact .logo:hover .logo-lily-svg,
.navbar.compact .logo:focus-visible .logo-lily-svg {
  transform: rotate(7deg) scale(1.09);
}

@keyframes v87-seed-halo {
  0%, 100% { opacity: .3; transform: scale(.88); transform-origin: center; }
  50% { opacity: .8; transform: scale(1.08); transform-origin: center; }
}

/* Character archive — one living dossier and two cursor-reactive encrypted records. */
.character-triad {
  width: min(1080px, 100%) !important;
  gap: clamp(14px, 1.8vw, 24px) !important;
  perspective: 1200px;
}

.character-triad .character-card {
  --lock-x: 50%;
  --lock-y: 51%;
  --lock-rx: 0deg;
  --lock-ry: 0deg;
  position: relative;
  display: block !important;
  min-height: clamp(250px, 22vw, 300px);
  padding: 0 !important;
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px 22px 4px 22px !important;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  transform-style: preserve-3d;
  transition:
    transform 520ms cubic-bezier(.16, 1, .3, 1),
    border-color 300ms ease,
    box-shadow 360ms ease;
}

.character-triad .character-card::before {
  z-index: 0;
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(105, 217, 255, .055) 12.2%, transparent 12.4% 68%, rgba(105, 217, 255, .04) 68.2%, transparent 68.4%),
    linear-gradient(0deg, transparent 0 28%, rgba(105, 217, 255, .045) 28.2%, transparent 28.4% 74%, rgba(105, 217, 255, .035) 74.2%, transparent 74.4%),
    radial-gradient(circle at 14% 18%, rgba(116, 225, 255, .4) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 74%, rgba(116, 225, 255, .28) 0 1px, transparent 2px);
  background-size: 100% 100%, 100% 100%, 37px 37px, 51px 51px;
}

.character-triad .character-card::after {
  content: attr(data-character-state) " // 4072";
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 14px;
  color: rgba(147, 216, 243, .26);
  font: 700 7px/1 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.character-triad .character-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: inherit;
  padding: clamp(24px, 2.6vw, 34px);
  transform: translateZ(18px);
  transition: opacity 280ms ease, filter 340ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}

.character-triad .character-card .character-state {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  margin: 0 0 clamp(26px, 3vw, 42px);
  color: rgba(154, 225, 255, .72);
  font: 700 8px/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .18em;
}

.character-triad .character-card .character-state::before {
  content: "";
  width: 18px;
  height: 1px;
  margin-right: 8px;
  background: rgba(var(--v87-memory-accent), .64);
  box-shadow: 0 0 8px rgba(var(--v87-memory-accent), .58);
}

.character-triad .character-card strong {
  position: relative;
  z-index: 3;
  margin: 0;
  color: rgba(235, 251, 255, .97);
  font: 800 clamp(25px, 2.2vw, 34px)/.96 Inter, system-ui, sans-serif;
  letter-spacing: -.05em;
  text-shadow: 0 0 18px rgba(var(--v87-memory-accent), .16);
}

.character-triad .character-card .character-role {
  position: relative;
  z-index: 3;
  margin: 13px 0 0;
  color: rgba(105, 221, 240, .76);
  font: 700 9px/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.character-triad .character-card small {
  position: relative;
  z-index: 3;
  display: block;
  max-width: 28ch;
  margin-top: auto;
  padding-top: 24px;
  color: rgba(190, 225, 239, .58);
  font: 500 10px/1.55 "Courier New", Consolas, monospace;
  letter-spacing: .045em;
}

.character-triad .alice-card {
  border-color: rgba(var(--v87-memory-accent), .45);
  background:
    radial-gradient(circle at 78% 52%, rgba(var(--v87-memory-accent), .14), transparent 32%),
    linear-gradient(125deg, rgba(var(--v87-memory-accent), .11), transparent 48%),
    rgba(2, 16, 27, .84);
  box-shadow:
    inset 0 0 42px rgba(var(--v87-memory-accent), .045),
    0 16px 40px rgba(0, 6, 16, .22);
}

.character-triad .alice-card .character-copy {
  width: 64%;
}

.alice-core-display {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: clamp(18px, 3.2vw, 42px);
  width: clamp(92px, 9vw, 124px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--v87-memory-accent), .22);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow:
    inset 0 0 24px rgba(var(--v87-memory-accent), .09),
    0 0 32px rgba(var(--v87-memory-accent), .08);
}

.alice-core-display::before,
.alice-core-display::after,
.alice-core-display i {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(var(--v87-memory-accent), .28);
  border-radius: 50%;
}

.alice-core-display::before {
  inset: -10%;
  border-style: dashed;
  animation: v88-core-orbit 10s linear infinite;
}

.alice-core-display::after {
  inset: 27%;
  border-color: rgba(226, 252, 255, .42);
  background: radial-gradient(circle, rgba(var(--v87-memory-accent), .2), transparent 68%);
  box-shadow: 0 0 18px rgba(var(--v87-memory-accent), .2);
}

.alice-core-display i:nth-child(1) {
  inset: 5%;
  border-left-color: transparent;
  border-right-color: transparent;
  animation: v88-core-orbit 7s linear infinite reverse;
}

.alice-core-display i:nth-child(2) {
  inset: -2% 38%;
  border-radius: 50%;
  transform: rotate(34deg);
}

.alice-core-display i:nth-child(3) {
  inset: 38% -2%;
  border-radius: 50%;
  transform: rotate(-24deg);
}

.alice-core-display b {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(231, 253, 255, .86);
  font: 700 12px/1 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
}

.alice-core-display span {
  position: absolute;
  top: calc(100% + 13px);
  left: 50%;
  width: 150px;
  margin: 0;
  color: rgba(137, 218, 246, .46);
  font: 700 6px/1.55 "Courier New", Consolas, monospace;
  letter-spacing: .16em;
  text-align: center;
  transform: translateX(-50%);
}

.character-triad .character-card.is-locked {
  cursor: crosshair;
  background:
    radial-gradient(circle at var(--lock-x) var(--lock-y), rgba(76, 190, 255, .07), transparent 26%),
    linear-gradient(135deg, rgba(43, 112, 160, .04), transparent 56%),
    rgba(2, 12, 22, .82);
  border-color: rgba(88, 175, 222, .2);
  box-shadow: inset 0 0 34px rgba(28, 93, 139, .035);
}

.character-triad .character-card.is-locked::before {
  opacity: .42;
  filter: saturate(.5);
}

.lock-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(circle at var(--lock-x) var(--lock-y), rgba(121, 225, 255, .38) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent calc(var(--lock-x) - 1px), rgba(88, 203, 255, .16) var(--lock-x), transparent calc(var(--lock-x) + 1px)),
    linear-gradient(0deg, transparent calc(var(--lock-y) - 1px), rgba(88, 203, 255, .13) var(--lock-y), transparent calc(var(--lock-y) + 1px));
  transition: opacity 240ms ease;
}

.digital-character-lock {
  position: absolute;
  z-index: 7;
  top: var(--lock-y);
  left: var(--lock-x);
  width: 142px;
  height: 142px;
  pointer-events: none;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(.48)
    rotateX(var(--lock-rx))
    rotateY(var(--lock-ry));
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 16px rgba(50, 194, 255, .28));
  transition:
    opacity 180ms ease,
    transform 440ms cubic-bezier(.16, 1, .3, 1);
}

.lock-orbit {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(104, 223, 255, .43);
  border-block-color: transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 16px rgba(42, 173, 237, .08);
  animation: v88-lock-orbit 3.6s linear infinite;
}

.lock-orbit::before,
.lock-orbit::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(209, 249, 255, .94);
  box-shadow: 0 0 9px rgba(75, 217, 255, .92);
}

.lock-orbit::before { top: 10px; left: 16px; }
.lock-orbit::after { right: 9px; bottom: 20px; }

.lock-orbit-b {
  inset: 19px;
  border-style: dashed;
  border-right-color: rgba(151, 231, 255, .64);
  animation-duration: 5.8s;
  animation-direction: reverse;
}

.lock-glyph {
  position: absolute;
  top: 37px;
  left: 50%;
  width: 50px;
  height: 58px;
  margin: 0;
  transform: translateX(-50%) translateZ(20px);
}

.lock-shackle {
  position: absolute;
  top: 0;
  left: 9px;
  width: 32px;
  height: 32px;
  border: 3px solid rgba(193, 244, 255, .9);
  border-bottom: 0;
  border-radius: 19px 19px 4px 4px;
  box-shadow: 0 0 10px rgba(71, 211, 255, .34);
}

.lock-body {
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 46px;
  height: 35px;
  border: 1px solid rgba(193, 244, 255, .84);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  background:
    linear-gradient(135deg, rgba(125, 225, 255, .23), rgba(4, 30, 48, .94) 52%),
    rgba(4, 22, 37, .92);
  box-shadow:
    inset 0 0 14px rgba(68, 200, 255, .16),
    0 0 15px rgba(68, 200, 255, .16);
}

.lock-body b {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 5px;
  height: 13px;
  border-radius: 4px 4px 1px 1px;
  background: rgba(218, 251, 255, .9);
  box-shadow: 0 0 9px rgba(101, 225, 255, .8);
  transform: translateX(-50%);
}

.lock-scan {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 1px;
  height: 126px;
  margin: 0;
  overflow: visible;
  background: linear-gradient(transparent, rgba(165, 237, 255, .84), transparent);
  box-shadow: 0 0 10px rgba(78, 209, 255, .6);
  transform-origin: 50% 63px;
  animation: v88-lock-scan 2.9s linear infinite;
}

.lock-readout {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  display: grid;
  width: 170px;
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

.lock-readout b {
  color: rgba(216, 249, 255, .9);
  font: 700 8px/1 "Courier New", Consolas, monospace;
  letter-spacing: .18em;
}

.lock-readout small {
  margin: 7px 0 0 !important;
  padding: 0 !important;
  color: rgba(109, 201, 239, .54) !important;
  font: 700 6px/1 "Courier New", Consolas, monospace !important;
  letter-spacing: .13em !important;
}

.character-triad .character-card.is-locked:is(:hover, :focus-visible, .is-lock-engaged) {
  border-color: rgba(103, 218, 255, .58);
  box-shadow:
    inset 0 0 38px rgba(38, 144, 207, .09),
    0 0 30px rgba(44, 162, 224, .1);
  outline: none;
}

.character-triad .character-card.is-locked:is(:hover, :focus-visible, .is-lock-engaged) .character-copy {
  opacity: .22;
  filter: blur(1.8px);
  transform: translateZ(0) scale(.985);
}

.character-triad .character-card.is-locked:is(:hover, :focus-visible, .is-lock-engaged) .lock-field {
  opacity: 1;
}

.character-triad .character-card.is-locked:is(:hover, :focus-visible, .is-lock-engaged) .digital-character-lock {
  opacity: 1;
  transform:
    translate(-50%, -50%)
    scale(1)
    rotateX(var(--lock-rx))
    rotateY(var(--lock-ry));
}

@keyframes v88-core-orbit {
  to { transform: rotate(360deg); }
}

@keyframes v88-lock-orbit {
  to { transform: rotate(360deg); }
}

@keyframes v88-lock-scan {
  to { transform: rotate(360deg); }
}

/* Footer becomes a quiet terminal horizon instead of gaining more ornaments. */
.footer-memory-horizon {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: max-content minmax(80px, 1fr) max-content;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  max-width: 1180px;
  margin: clamp(24px, 4vw, 52px) auto 18px;
  padding: 12px 0;
  border-block: 1px solid rgba(var(--v87-memory-accent), .1);
  color: rgba(156, 206, 232, .58);
  font: 700 8px/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .15em;
}

.footer-memory-horizon i {
  position: relative;
  display: block;
  height: 1px;
  overflow: visible;
  background: rgba(var(--v87-memory-accent), .14);
}

.footer-memory-horizon i::after {
  content: "";
  position: absolute;
  top: -2px;
  left: calc(var(--v87-scroll-progress) * 100%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(var(--v87-memory-accent));
  box-shadow: 0 0 12px rgba(var(--v87-memory-accent), .86);
  transform: translateX(-50%);
}

.footer-memory-horizon i b {
  display: block;
  width: calc(var(--v87-scroll-progress) * 100%);
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--v87-memory-violet), .22), rgba(var(--v87-memory-accent), .82));
  box-shadow: 0 0 10px rgba(var(--v87-memory-accent), .25);
}

.footer-memory-horizon strong {
  color: rgba(202, 237, 251, .72);
  font: inherit;
}

html[data-v87-chapter] .content-section {
  --v87-chapter-opacity: .035;
}

body.v87-chapter-changing .sayonara-edge-rails {
  filter: brightness(1.35) drop-shadow(0 0 9px rgba(var(--v87-memory-accent), .22));
}

/* Magical-electronic archive viewer. */
.v71-lightbox {
  --v87-viewer-accent: 83, 214, 255;
  isolation: isolate;
}

.v71-lightbox.is-fragments { --v87-viewer-accent: 112, 151, 255; }
.v71-lightbox.is-echo { --v87-viewer-accent: 191, 228, 255; }

.v87-lightbox-grid,
.v87-lightbox-orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.v87-lightbox-grid {
  opacity: .42;
  background:
    linear-gradient(rgba(var(--v87-viewer-accent), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--v87-viewer-accent), .035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(circle at 50% 47%, #000 0 34%, transparent 76%);
}

.v87-lightbox-grid::before,
.v87-lightbox-grid::after {
  content: "";
  position: absolute;
  inset: 9%;
  border: 1px solid rgba(var(--v87-viewer-accent), .11);
  clip-path: polygon(0 0, 18% 0, 18% 1px, 82% 1px, 82% 0, 100% 0, 100% 100%, 74% 100%, 74% calc(100% - 1px), 26% calc(100% - 1px), 26% 100%, 0 100%);
}

.v87-lightbox-grid::after {
  inset: 13%;
  opacity: .56;
  transform: scaleX(-1);
}

.v87-lightbox-orbit {
  display: grid;
  place-items: center;
}

.v87-lightbox-orbit i {
  position: absolute;
  width: min(82vw, 930px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--v87-viewer-accent), .1);
  border-radius: 50%;
  box-shadow: inset 0 0 48px rgba(var(--v87-viewer-accent), .025);
  animation: v87-viewer-orbit 28s linear infinite;
}

.v87-lightbox-orbit i:nth-child(2) {
  width: min(68vw, 740px);
  border-style: dashed;
  animation-duration: 22s;
  animation-direction: reverse;
}

.v87-lightbox-orbit i:nth-child(3) {
  width: min(52vw, 560px);
  border-color: rgba(var(--v87-viewer-accent), .17);
  animation-duration: 17s;
}

.v87-lightbox-orbit i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--v87-viewer-accent));
  box-shadow: 0 0 18px rgba(var(--v87-viewer-accent), .82);
}

.v71-lightbox-panel {
  isolation: isolate;
}

.v87-lightbox-meta {
  position: fixed;
  z-index: 3;
  top: clamp(18px, 3vw, 42px);
  left: clamp(18px, 4vw, 64px);
  display: grid;
  gap: 5px;
  color: rgba(var(--v87-viewer-accent), .58);
  font: 700 8px/1.2 "Courier New", Consolas, monospace;
  letter-spacing: .18em;
}

.v87-lightbox-meta b {
  color: rgba(224, 248, 255, .76);
  font-size: 9px;
  font-weight: 500;
}

.v87-lightbox-frame {
  position: relative;
  display: grid;
  place-items: center;
  max-width: 100%;
  max-height: 74vh;
  padding: clamp(6px, .8vw, 10px);
  overflow: hidden;
  clip-path: polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px);
  background:
    linear-gradient(135deg, rgba(var(--v87-viewer-accent), .18), transparent 24% 76%, rgba(var(--v87-viewer-accent), .16)),
    rgba(0, 8, 17, .72);
  box-shadow:
    0 30px 90px rgba(0, 0, 0, .68),
    0 0 70px rgba(var(--v87-viewer-accent), .12),
    inset 0 0 0 1px rgba(var(--v87-viewer-accent), .18);
}

.v87-lightbox-frame::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(var(--v87-viewer-accent), .15);
  clip-path: inherit;
}

.v87-lightbox-frame .v71-lightbox-img {
  max-height: calc(74vh - 20px);
  border: 0;
  border-radius: 0;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.v87-frame-corner {
  position: absolute;
  z-index: 4;
  width: 26px;
  height: 26px;
  border-color: rgba(var(--v87-viewer-accent), .82);
  filter: drop-shadow(0 0 5px rgba(var(--v87-viewer-accent), .5));
  pointer-events: none;
}

.v87-frame-corner.corner-a { top: 1px; left: 1px; border-top: 1px solid; border-left: 1px solid; }
.v87-frame-corner.corner-b { top: 1px; right: 1px; border-top: 1px solid; border-right: 1px solid; }
.v87-frame-corner.corner-c { bottom: 1px; left: 1px; border-bottom: 1px solid; border-left: 1px solid; }
.v87-frame-corner.corner-d { right: 1px; bottom: 1px; border-right: 1px solid; border-bottom: 1px solid; }

.v87-lightbox-scan {
  position: absolute;
  z-index: 3;
  top: -18%;
  left: 7%;
  width: 86%;
  height: 18%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(var(--v87-viewer-accent), .09), rgba(229, 251, 255, .22), transparent);
  mix-blend-mode: screen;
  opacity: .64;
  animation: v87-viewer-scan 4.8s cubic-bezier(.45, 0, .55, 1) infinite;
}

.v71-lightbox.is-switching .v87-lightbox-frame {
  animation: v87-memory-switch .5s steps(3, end);
}

.v71-lightbox.is-switching .v71-lightbox-img {
  animation: v87-image-decode .5s steps(2, end);
}

.v71-lightbox-caption {
  position: relative;
  width: min(100%, 560px);
  padding: 10px 18px 0;
}

.v71-lightbox-caption::before {
  content: "";
  width: 100%;
  height: 1px;
  margin-bottom: 4px;
  background: linear-gradient(90deg, transparent, rgba(var(--v87-viewer-accent), .55), transparent);
}

.v71-lightbox-btn {
  border-radius: 4px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  box-shadow:
    inset 0 0 18px rgba(var(--v87-viewer-accent), .07),
    0 0 18px rgba(var(--v87-viewer-accent), .05);
}

@keyframes v87-viewer-orbit {
  to { transform: rotate(360deg); }
}

@keyframes v87-viewer-scan {
  0%, 14% { transform: translateY(0); opacity: 0; }
  22% { opacity: .65; }
  72% { opacity: .38; }
  82%, 100% { transform: translateY(660%); opacity: 0; }
}

@keyframes v87-memory-switch {
  0% { filter: brightness(1) saturate(1); transform: translateX(0); }
  24% { filter: brightness(1.8) saturate(.3); transform: translateX(-3px); }
  48% { filter: brightness(.72) saturate(1.8); transform: translateX(4px); }
  100% { filter: brightness(1) saturate(1); transform: translateX(0); }
}

@keyframes v87-image-decode {
  0%, 100% { opacity: 1; translate: 0; }
  35% { opacity: .72; translate: 3px -1px; }
  60% { opacity: .9; translate: -2px 1px; }
}

@media (max-width: 960px) {
  .character-triad {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .character-triad .alice-card {
    grid-column: 1 / -1;
    min-height: 250px;
  }

  .character-triad .character-card.is-locked {
    min-height: 260px;
  }
}

@media (max-width: 700px) {
  .character-triad {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .character-triad .alice-card {
    grid-column: auto;
  }

  .character-triad .character-card {
    min-height: 230px;
  }

  .character-triad .alice-card .character-copy {
    width: 67%;
  }

  .alice-core-display {
    right: 18px;
    width: 82px;
  }

  .character-triad .character-card.is-locked {
    min-height: 230px;
  }

  .character-triad .character-card.is-locked .digital-character-lock {
    top: 50%;
    left: 75%;
    opacity: .72;
    transform: translate(-50%, -50%) scale(.72);
  }

  .character-triad .character-card.is-locked .lock-field {
    opacity: .35;
  }

  .character-triad .character-card.is-locked .character-copy {
    width: 58%;
  }

  .character-triad .character-card.is-locked:is(:focus-visible, .is-lock-engaged) .digital-character-lock {
    transform: translate(-50%, -50%) scale(.84);
  }

  .lock-readout {
    top: calc(100% - 2px);
  }

  .footer-memory-horizon {
    grid-template-columns: 1fr max-content;
    margin-inline: 4px;
  }

  .footer-memory-horizon i {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .v87-lightbox-meta {
    top: 16px;
    left: 16px;
    max-width: calc(100vw - 86px);
    font-size: 6px;
  }

  .v87-lightbox-meta b {
    font-size: 7px;
  }

  .v71-lightbox {
    padding: 3.5rem .45rem 1rem;
  }

  .v71-lightbox-panel {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .v71-lightbox-figure {
    grid-column: 2;
  }

  .v87-lightbox-frame {
    max-height: 70vh;
  }

  .v87-lightbox-frame .v71-lightbox-img {
    max-height: calc(70vh - 16px);
  }

  .v71-lightbox-caption-copy {
    display: none;
  }

  .v87-lightbox-orbit i {
    width: 130vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-v83-memory-seed .navbar.compact .logo-lily-halo circle,
  .alice-core-display::before,
  .alice-core-display i,
  .lock-orbit,
  .lock-scan,
  .v87-lightbox-orbit i,
  .v87-lightbox-scan,
  .v71-lightbox.is-switching .v87-lightbox-frame,
  .v71-lightbox.is-switching .v71-lightbox-img {
    animation: none !important;
  }
}

html.visual-soft .v87-lightbox-orbit i:nth-child(n + 2),
html.visual-soft .v87-lightbox-grid::after {
  display: none;
}

html.visual-soft .v87-lightbox-scan {
  animation-duration: 7s;
  opacity: .28;
}

html.visual-soft .lock-orbit-b,
html.visual-soft .lock-scan,
html.visual-soft .alice-core-display i:nth-child(n + 2) {
  display: none;
}

/* ------------------------------------------------------
   v92 hand-off — the home now links out to two dedicated
   pages. Only the two connections need styling: the Story
   entry button and Alice's card, which became a real link.
------------------------------------------------------ */

.story-entry-actions {
  display: flex;
  justify-content: center;
  margin: clamp(1.4rem, 3vw, 2.2rem) 0 0;
}

.character-triad a.alice-card {
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .35s cubic-bezier(.16, 1, .3, 1);
}

.character-triad a.alice-card:hover,
.character-triad a.alice-card:focus-visible {
  border-color: rgba(var(--v87-memory-accent), .8);
  box-shadow:
    inset 0 0 52px rgba(var(--v87-memory-accent), .09),
    0 22px 54px rgba(0, 6, 16, .3),
    0 0 34px rgba(var(--v87-memory-accent), .2);
  transform: translateY(-3px);
}

/* The open record announces itself as a door. */
.character-triad a.alice-card .character-copy small {
  color: rgba(var(--v87-memory-accent), .95);
  transition: letter-spacing .3s ease;
}

.character-triad a.alice-card:hover .character-copy small,
.character-triad a.alice-card:focus-visible .character-copy small {
  letter-spacing: .12em;
}

@media (prefers-reduced-motion: reduce) {
  .character-triad a.alice-card,
  .character-triad a.alice-card .character-copy small {
    transition: none !important;
    transform: none !important;
  }
}

/* ======================================================
   Community section — landing offset
   The navbar is position:fixed. Measured on a settled page, its
   lower edge sits at 71px on compact widths (57px tall, offset
   14px) and at 78px from tablet up (78px tall, offset 0).
   #community already carries 50px of padding-top and its kicker
   begins 85px inside the section, so a 24px margin brings the
   kicker to y=109: 38px clear of the compact bar, 31px clear of
   the wide one. Without it the value was 0 and the section top
   landed underneath the bar.
   Deliberately scoped to #community: #story and #about have the
   same missing offset, but that is pre-existing and out of scope.
====================================================== */
#community {
  scroll-margin-top: 24px;
}