:root {
  color-scheme: dark;
  --sand: #121212;
  --sand-soft: #1a1a1a;
  --card: #232323;
  --title: #c8a25a;
  --title-soft: #a88445;
  --text: #f2efe8;
  --author: #b8b2a8;
  --ink-soft: rgba(200, 162, 90, 0.25);
  --sand-night: #0d0a10;
  --title-night: #f9f3da;
  --text-night: #f6efd9;
  --author-night: #d3cab0;
  --ink-soft-night: rgba(246, 234, 199, 0.26);
  --paramo-bg-day: url("backgrounds/paramodia.png");
  --paramo-bg-day: image-set(
    url("backgrounds/paramodia.webp") type("image/webp"),
    url("backgrounds/paramodia.png") type("image/png")
  );
  --paramo-bg-dawn: url("backgrounds/paramoamanecer.png");
  --paramo-bg-dawn: image-set(
    url("backgrounds/paramoamanecer.webp") type("image/webp"),
    url("backgrounds/paramoamanecer.png") type("image/png")
  );
  --paramo-bg-sunny-day: url("backgrounds/paramosol.png");
  --paramo-bg-sunny-day: image-set(
    url("backgrounds/paramosol.webp") type("image/webp"),
    url("backgrounds/paramosol.png") type("image/png")
  );
  --paramo-bg-rainbow: url("backgrounds/paramoarcoiris.png");
  --paramo-bg-rainbow: image-set(
    url("backgrounds/paramoarcoiris.webp") type("image/webp"),
    url("backgrounds/paramoarcoiris.png") type("image/png")
  );
  --paramo-bg-sunset: url("backgrounds/paramoatardecer.png");
  --paramo-bg-sunset: image-set(
    url("backgrounds/paramoatardecer.webp") type("image/webp"),
    url("backgrounds/paramoatardecer.png") type("image/png")
  );
  --paramo-bg-night: url("backgrounds/paramonoche.png");
  --paramo-bg-night: image-set(
    url("backgrounds/paramonoche.webp") type("image/webp"),
    url("backgrounds/paramonoche.png") type("image/png")
  );
  --paramo-base-image: var(--paramo-bg-day);
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  --weather-tone:
    linear-gradient(180deg, rgba(200, 162, 90, 0.05), transparent 42%, rgba(0, 0, 0, 0.16)),
    radial-gradient(circle at 50% 78%, rgba(244, 225, 184, 0.24), transparent 18%),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0, 0, 0, 0.28) 78%);
  --weather-tone-opacity: 0.55;
  --weather-particles: none;
  --weather-particles-opacity: 0;
  --weather-particles-animation: none;
  --weather-particles-filter: none;
  --weather-particles-size: auto;
  --rain-card-droplet-color: rgba(218, 232, 232, 0.3);
  --rain-card-highlight-color: rgba(255, 255, 255, 0.2);
  --rain-card-sheen-color: rgba(224, 236, 238, 0.14);
  --light-rain-streak-strong: rgba(214, 230, 232, 0.18);
  --light-rain-streak-soft: rgba(226, 238, 238, 0.12);
  --light-rain-streak-faint: rgba(198, 214, 218, 0.08);
  --light-rain-haze: rgba(218, 228, 226, 0.08);
  --rain-glass-droplet-color: rgba(216, 232, 234, 0.36);
  --rain-glass-highlight-color: rgba(255, 255, 255, 0.3);
  --rain-glass-trail-color: rgba(202, 222, 224, 0.16);
  --rain-glass-sheen-color: rgba(230, 240, 240, 0.1);
  --rain-glass-shadow-color: rgba(180, 210, 216, 0.18);
  --rain-glass-opacity: 0.44;
}

* {
  box-sizing: border-box;
}

.app-loader {
  --loader-open-duration: 300ms;
  --loader-fade-duration: 300ms;
  --loader-fade-delay: 0ms;
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 28px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(116, 103, 77, 0.14), transparent 58%),
    rgba(12, 14, 13, 0.48);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--loader-fade-duration) ease var(--loader-fade-delay),
    visibility 0s linear calc(var(--loader-fade-delay) + var(--loader-fade-duration));
}

.app-loader__panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(218, 204, 172, 0.08);
  border-radius: 42px;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(117, 125, 119, 0.2), transparent 45%),
    radial-gradient(ellipse at 78% 72%, rgba(133, 112, 79, 0.2), transparent 48%),
    linear-gradient(145deg, rgba(17, 22, 21, 0.92), rgba(27, 24, 19, 0.9) 58%, rgba(13, 17, 16, 0.92));
  backdrop-filter: blur(7px);
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.32);
  opacity: 1;
  transform: scale(0.92);
  transform-origin: center;
  pointer-events: none;
  transition:
    transform var(--loader-open-duration) cubic-bezier(0.22, 1, 0.36, 1),
    border-radius var(--loader-open-duration) cubic-bezier(0.22, 1, 0.36, 1),
    opacity var(--loader-fade-duration) ease var(--loader-fade-delay);
}

.app-loader__panel::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(ellipse at 28% 45%, rgba(215, 214, 199, 0.09), transparent 38%),
    radial-gradient(ellipse at 72% 58%, rgba(175, 182, 174, 0.08), transparent 42%);
  filter: blur(30px);
  opacity: 0.72;
}

.app-loader__mark {
  position: relative;
  z-index: 1;
  color: rgba(211, 181, 120, 0.86);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(3.5rem, 14vw, 7rem);
  font-weight: 500;
  line-height: 1;
  text-shadow:
    0 0 22px rgba(200, 162, 90, 0.12),
    0 2px 16px rgba(0, 0, 0, 0.3);
  animation: loader-mark-breathe 3.2s ease-in-out infinite alternate;
  transition: opacity 240ms ease;
}

.app-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loader.is-leaving .app-loader__panel {
  border-radius: 0;
  opacity: 0;
  transform: scale(1.08);
}

.app-loader.is-leaving .app-loader__mark {
  opacity: 0;
}

html.app-loader-returning .app-loader {
  --loader-open-duration: 220ms;
  --loader-fade-duration: 220ms;
  --loader-fade-delay: 0ms;
}

body.app-loading main.wrap {
  opacity: 0.92;
  transform: translateY(6px) scale(0.985);
}

main.wrap {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 360ms ease,
    transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes loader-mark-breathe {
  from { opacity: 0.72; }
  to { opacity: 0.9; }
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--sand);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2.75rem, 10vh, 6rem);
  padding-inline: clamp(12px, 2.8vw, 48px);
  line-height: 1.7;
  transition: background-color 1.2s ease, color 1.2s ease;
}

.scene-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--sand);
}

.scene-background::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--paramo-base-veil);
  opacity: 1;
  pointer-events: none;
  transition: opacity 1.8s ease;
}

.scene-background__layer {
  --scene-transition-duration: 2800ms;
  position: absolute;
  inset: -1px;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  transform: scale(1.002);
  transition: opacity var(--scene-transition-duration) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.scene-background__layer:first-child {
  background-image: url("backgrounds/paramodia.png");
  background-image: image-set(
    url("backgrounds/paramodia.webp") type("image/webp"),
    url("backgrounds/paramodia.png") type("image/png")
  );
}

.scene-background__layer.is-visible {
  opacity: 1;
}

.scene-background__layer.is-entering {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  .app-loader,
  html.app-loader-returning .app-loader {
    --loader-open-duration: 0ms;
    --loader-fade-duration: 140ms;
    --loader-fade-delay: 0ms;
  }

  body.app-loading main.wrap {
    opacity: 0.92;
    transform: none;
  }

  main.wrap {
    transition-duration: 140ms;
    transition-delay: 0ms;
  }

  .app-loader__panel,
  .app-loader.is-leaving .app-loader__panel {
    border-radius: 42px;
    transform: none;
  }

  .app-loader__mark {
    animation: none;
    opacity: 0.86;
    transition-duration: 140ms;
  }

  .scene-background__layer {
    --scene-transition-duration: 140ms;
    transform: none;
  }
}

body[data-mode='day'],
body[data-time-of-day='day'] {
  --paramo-base-image: var(--paramo-bg-day);
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.19), rgba(0, 0, 0, 0.2));
  background-color: var(--sand);
  color: var(--text);
  color-scheme: dark;
}

body[data-mode='dawn'],
body[data-time-of-day='dawn'] {
  --paramo-base-image: var(--paramo-bg-dawn);
  --paramo-base-veil: linear-gradient(rgba(54, 27, 25, 0.15), rgba(20, 14, 12, 0.24));
  background-color: #1a1110;
  color: var(--text);
  color-scheme: dark;
}

body[data-mode='sunset'],
body[data-time-of-day='sunset'] {
  --paramo-base-image: var(--paramo-bg-sunset);
  --paramo-base-veil: linear-gradient(rgba(34, 17, 10, 0.22), rgba(8, 6, 4, 0.26));
  background-color: #17100c;
  color: var(--text);
  color-scheme: dark;
}

body[data-time-of-day='night'],
body.night-fall {
  --paramo-base-image: var(--paramo-bg-night);
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.36));
  background-color: var(--sand-night);
  color: var(--text-night);
  color-scheme: dark;
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  z-index: 1;
  background: var(--weather-tone);
  opacity: var(--weather-tone-opacity);
  transition: opacity 1.2s ease, background 1.2s ease;
}

body::after {
  z-index: 2;
  background: var(--weather-particles);
  background-size: var(--weather-particles-size);
  filter: var(--weather-particles-filter);
  opacity: var(--weather-particles-opacity);
  animation: var(--weather-particles-animation);
  transform: translate3d(0, 0, 0);
  transition: opacity 1.2s ease;
}

body[data-weather='clear'],
body[data-weather='sunny'] {
  --weather-tone:
    radial-gradient(circle at 48% 34%, rgba(255, 217, 147, 0.22), transparent 30%),
    linear-gradient(180deg, rgba(240, 195, 111, 0.08), rgba(18, 13, 8, 0.18)),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0, 0, 0, 0.24) 80%);
  --weather-tone-opacity: 0.72;
}

body[data-time-of-day='dawn'][data-visual-scene='dawn'] {
  --paramo-base-image: var(--paramo-bg-dawn);
  --paramo-base-veil: linear-gradient(rgba(91, 48, 49, 0.12), rgba(20, 13, 11, 0.28));
  --weather-tone:
    radial-gradient(circle at 58% 20%, rgba(255, 210, 143, 0.2), transparent 30%),
    linear-gradient(180deg, rgba(222, 139, 139, 0.13), rgba(82, 48, 36, 0.12)),
    radial-gradient(circle at 50% 55%, transparent 0 44%, rgba(18, 9, 8, 0.3) 84%);
  --weather-tone-opacity: 0.82;
}

body[data-visual-scene='sunny-day'] {
  --paramo-base-image: var(--paramo-bg-sunny-day);
  --paramo-base-veil: linear-gradient(rgba(17, 38, 48, 0.12), rgba(7, 18, 18, 0.25));
  --weather-tone:
    radial-gradient(circle at 62% 12%, rgba(255, 231, 164, 0.18), transparent 27%),
    linear-gradient(180deg, rgba(87, 171, 207, 0.08), rgba(16, 35, 34, 0.14)),
    radial-gradient(circle at 50% 52%, transparent 0 45%, rgba(0, 0, 0, 0.27) 84%);
  --weather-tone-opacity: 0.74;
}

body[data-visual-scene='rainbow-after-rain'] {
  --paramo-base-image: var(--paramo-bg-rainbow);
  --paramo-base-veil: linear-gradient(rgba(28, 41, 42, 0.1), rgba(8, 18, 17, 0.28));
  --weather-tone:
    radial-gradient(circle at 57% 18%, rgba(255, 221, 151, 0.16), transparent 27%),
    linear-gradient(180deg, rgba(108, 159, 174, 0.08), rgba(45, 66, 57, 0.16)),
    radial-gradient(circle at 50% 58%, transparent 0 43%, rgba(0, 0, 0, 0.3) 84%);
  --weather-tone-opacity: 0.78;
  --weather-particles:
    radial-gradient(circle at 14% 72%, rgba(241, 229, 190, 0.2) 0 1px, transparent 3px),
    radial-gradient(circle at 78% 64%, rgba(217, 238, 231, 0.16) 0 1px, transparent 3px),
    linear-gradient(112deg, transparent 36%, rgba(255, 236, 188, 0.06) 46%, transparent 56%);
  --weather-particles-opacity: 0.32;
  --weather-particles-animation: paramo-wet-glimmer 12s ease-in-out infinite alternate;
  --weather-particles-size: 190px 170px, 240px 210px, 100% 100%;
}

body[data-time-of-day='sunset'][data-weather='clear'],
body[data-time-of-day='sunset'][data-weather='sunny'] {
  --weather-tone:
    radial-gradient(circle at 48% 34%, rgba(255, 196, 105, 0.22), transparent 34%),
    linear-gradient(180deg, rgba(184, 91, 50, 0.18), rgba(18, 10, 7, 0.24)),
    radial-gradient(circle at 50% 52%, transparent 0 46%, rgba(0, 0, 0, 0.3) 82%);
  --weather-tone-opacity: 0.82;
}

body[data-weather='cloudy'] {
  --weather-tone:
    linear-gradient(180deg, rgba(116, 124, 124, 0.24), rgba(24, 24, 22, 0.19)),
    radial-gradient(circle at 50% 28%, rgba(230, 230, 220, 0.08), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(0, 0, 0, 0.28) 82%);
  --weather-tone-opacity: 0.86;
}

body[data-weather='overcast'] {
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.31));
  --weather-tone:
    linear-gradient(180deg, rgba(42, 48, 49, 0.5), rgba(18, 18, 17, 0.36)),
    radial-gradient(circle at 50% 16%, rgba(32, 34, 35, 0.38), transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(0, 0, 0, 0.44) 82%);
  --weather-tone-opacity: 0.95;
}

body[data-weather='mist'],
body[data-visual-scene='day-mist'],
body[data-visual-scene='sunset-mist'],
body[data-visual-scene='night-mist'] {
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.24));
  --weather-tone:
    linear-gradient(180deg, rgba(198, 203, 196, 0.18), rgba(78, 84, 80, 0.12)),
    radial-gradient(circle at 52% 48%, rgba(235, 234, 218, 0.16), transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(0, 0, 0, 0.28) 84%);
  --weather-tone-opacity: 0.86;
  --weather-particles:
    radial-gradient(ellipse at 16% 64%, rgba(226, 226, 214, 0.26), transparent 44%),
    radial-gradient(ellipse at 82% 54%, rgba(210, 216, 212, 0.2), transparent 40%),
    radial-gradient(ellipse at 48% 78%, rgba(238, 237, 222, 0.14), transparent 46%),
    linear-gradient(94deg, transparent 0 16%, rgba(226, 226, 216, 0.14) 46%, transparent 74%),
    linear-gradient(86deg, transparent 0 22%, rgba(214, 218, 212, 0.1) 58%, transparent 86%);
  --weather-particles-opacity: 0.5;
  --weather-particles-animation: paramo-mist-drift 46s ease-in-out infinite alternate;
  --weather-particles-filter: blur(16px) saturate(0.78);
  --weather-particles-size: 136% 108%, 128% 112%, 150% 110%, 180% 100%, 170% 100%;
}

body[data-time-of-day='day'][data-weather='mist'],
body[data-weather='mist']:not([data-time-of-day='sunset']):not([data-time-of-day='night']),
body[data-visual-scene='day-mist'] {
  --paramo-base-veil: linear-gradient(rgba(255, 255, 255, 0.08), rgba(22, 24, 22, 0.2));
  --weather-tone:
    linear-gradient(180deg, rgba(225, 225, 214, 0.18), rgba(95, 103, 97, 0.1)),
    radial-gradient(circle at 50% 32%, rgba(241, 240, 224, 0.16), transparent 36%),
    radial-gradient(circle at 50% 54%, transparent 0 48%, rgba(0, 0, 0, 0.2) 84%);
  --weather-tone-opacity: 0.82;
  --weather-particles:
    radial-gradient(ellipse at 18% 66%, rgba(238, 238, 226, 0.28), transparent 45%),
    radial-gradient(ellipse at 82% 56%, rgba(218, 224, 218, 0.2), transparent 42%),
    radial-gradient(ellipse at 48% 80%, rgba(246, 244, 228, 0.15), transparent 48%),
    linear-gradient(94deg, transparent 0 18%, rgba(232, 232, 220, 0.13) 46%, transparent 74%),
    linear-gradient(86deg, transparent 0 24%, rgba(210, 216, 210, 0.09) 58%, transparent 86%);
  --weather-particles-opacity: 0.46;
  --weather-particles-filter: blur(17px) saturate(0.62);
}

body[data-time-of-day='sunset'][data-weather='mist'],
body[data-visual-scene='sunset-mist'] {
  --paramo-base-veil: linear-gradient(rgba(55, 29, 10, 0.18), rgba(15, 11, 8, 0.28));
  --weather-tone:
    linear-gradient(180deg, rgba(211, 154, 76, 0.16), rgba(74, 55, 39, 0.16)),
    radial-gradient(circle at 50% 30%, rgba(232, 186, 111, 0.14), transparent 38%),
    radial-gradient(circle at 50% 54%, transparent 0 46%, rgba(0, 0, 0, 0.32) 84%);
  --weather-tone-opacity: 0.9;
  --weather-particles:
    radial-gradient(ellipse at 20% 66%, rgba(226, 194, 143, 0.22), transparent 45%),
    radial-gradient(ellipse at 80% 55%, rgba(194, 176, 143, 0.2), transparent 42%),
    radial-gradient(ellipse at 50% 79%, rgba(236, 207, 158, 0.13), transparent 48%),
    linear-gradient(94deg, transparent 0 18%, rgba(221, 180, 116, 0.12) 46%, transparent 74%),
    linear-gradient(86deg, transparent 0 24%, rgba(190, 164, 124, 0.1) 58%, transparent 86%);
  --weather-particles-opacity: 0.48;
  --weather-particles-filter: blur(18px) saturate(0.74);
}

body[data-time-of-day='night'][data-weather='mist'],
body.night-fall[data-weather='mist'],
body[data-visual-scene='night-mist'] {
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4));
  --weather-tone:
    linear-gradient(180deg, rgba(66, 80, 88, 0.22), rgba(9, 12, 15, 0.3)),
    radial-gradient(circle at 52% 34%, rgba(176, 198, 208, 0.12), transparent 38%),
    radial-gradient(circle at 50% 54%, transparent 0 43%, rgba(0, 0, 0, 0.48) 84%);
  --weather-tone-opacity: 0.9;
  --weather-particles:
    radial-gradient(ellipse at 18% 65%, rgba(172, 193, 204, 0.18), transparent 44%),
    radial-gradient(ellipse at 82% 56%, rgba(138, 160, 174, 0.16), transparent 42%),
    radial-gradient(ellipse at 50% 80%, rgba(191, 207, 211, 0.1), transparent 48%),
    linear-gradient(94deg, transparent 0 18%, rgba(156, 180, 193, 0.1) 46%, transparent 74%),
    linear-gradient(86deg, transparent 0 24%, rgba(116, 138, 154, 0.08) 58%, transparent 86%);
  --weather-particles-opacity: 0.42;
  --weather-particles-filter: blur(18px) saturate(0.68);
}

body[data-weather='light-rain'],
body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain'],
body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain'],
body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain'] {
  --paramo-base-veil: linear-gradient(rgba(10, 17, 20, 0.28), rgba(0, 0, 0, 0.34));
  --weather-tone:
    linear-gradient(180deg, rgba(90, 107, 111, 0.28), rgba(14, 17, 17, 0.26)),
    radial-gradient(circle at 48% 26%, rgba(218, 224, 218, 0.08), transparent 36%),
    radial-gradient(circle at 50% 50%, transparent 0 43%, rgba(0, 0, 0, 0.34) 82%);
  --weather-tone-opacity: 0.86;
  --weather-particles:
    radial-gradient(ellipse 1px 8px at 18% 18%, var(--light-rain-streak-soft) 0 46%, transparent 72%),
    radial-gradient(ellipse 1.2px 10px at 52% 62%, var(--light-rain-streak-strong) 0 42%, transparent 70%),
    radial-gradient(ellipse 0.8px 6px at 78% 34%, var(--light-rain-streak-faint) 0 48%, transparent 74%),
    radial-gradient(ellipse 1px 7px at 36% 86%, var(--light-rain-streak-soft) 0 44%, transparent 72%),
    radial-gradient(ellipse 1.1px 9px at 88% 78%, var(--light-rain-streak-faint) 0 42%, transparent 74%),
    radial-gradient(ellipse at 50% 12%, var(--light-rain-haze), transparent 46%);
  --weather-particles-opacity: 0.34;
  --weather-particles-animation: paramo-light-rain-fall 2.6s linear infinite;
  --weather-particles-filter: blur(0.22px) saturate(0.86);
  --weather-particles-size: 156px 230px, 214px 295px, 185px 255px, 268px 340px, 126px 205px, 100% 100%;
}

body[data-weather='light-rain']::after,
body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain']::after,
body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain']::after,
body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain']::after {
  inset: -6% -5%;
  mix-blend-mode: screen;
  transform: skewX(-5deg);
}

body[data-weather='heavy-rain'] {
  --paramo-base-veil: linear-gradient(rgba(0, 8, 12, 0.38), rgba(0, 0, 0, 0.48));
  --weather-tone:
    linear-gradient(180deg, rgba(32, 47, 55, 0.55), rgba(6, 8, 10, 0.46)),
    radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(0, 0, 0, 0.52) 82%);
  --weather-tone-opacity: 0.96;
  --weather-particles:
    repeating-linear-gradient(104deg, transparent 0 12px, rgba(205, 222, 232, 0.42) 12px 14px, transparent 14px 25px),
    repeating-linear-gradient(104deg, transparent 0 28px, rgba(190, 210, 222, 0.28) 28px 30px, transparent 30px 48px);
  --weather-particles-opacity: 0.52;
  --weather-particles-animation: paramo-rain-fall 0.55s linear infinite;
  --weather-particles-size: 110px 110px, 170px 170px;
}

body[data-visual-scene='day-rain'] {
  --paramo-base-veil: linear-gradient(rgba(18, 24, 24, 0.24), rgba(0, 0, 0, 0.3));
  --weather-tone:
    linear-gradient(180deg, rgba(124, 140, 142, 0.26), rgba(24, 28, 27, 0.21)),
    radial-gradient(circle at 50% 20%, rgba(230, 232, 224, 0.08), transparent 34%),
    radial-gradient(circle at 50% 52%, transparent 0 46%, rgba(0, 0, 0, 0.3) 82%);
  --rain-card-droplet-color: rgba(214, 230, 230, 0.28);
  --rain-card-highlight-color: rgba(255, 255, 255, 0.18);
  --rain-card-sheen-color: rgba(220, 234, 236, 0.12);
}

body[data-visual-scene='sunset-rain'] {
  --paramo-base-veil: linear-gradient(rgba(42, 25, 14, 0.26), rgba(8, 6, 4, 0.34));
  --weather-tone:
    linear-gradient(180deg, rgba(174, 118, 70, 0.18), rgba(24, 18, 14, 0.3)),
    radial-gradient(circle at 48% 24%, rgba(236, 181, 115, 0.1), transparent 34%),
    radial-gradient(circle at 50% 54%, transparent 0 44%, rgba(0, 0, 0, 0.36) 82%);
  --rain-card-droplet-color: rgba(238, 214, 174, 0.24);
  --rain-card-highlight-color: rgba(255, 232, 190, 0.16);
  --rain-card-sheen-color: rgba(226, 173, 108, 0.1);
}

body[data-visual-scene='night-clear'] {
  --paramo-base-veil: linear-gradient(rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.34));
  --weather-tone:
    radial-gradient(circle at 43% 13%, rgba(186, 210, 255, 0.16), transparent 23%),
    radial-gradient(circle at 50% 54%, transparent 0 44%, rgba(0, 0, 0, 0.45) 84%);
  --weather-tone-opacity: 0.92;
}

body[data-visual-scene='night-rain'] {
  --paramo-base-veil: linear-gradient(rgba(0, 7, 12, 0.32), rgba(0, 0, 0, 0.43));
  --weather-tone:
    linear-gradient(180deg, rgba(22, 38, 50, 0.46), rgba(5, 7, 10, 0.4)),
    radial-gradient(circle at 46% 14%, rgba(176, 205, 238, 0.11), transparent 28%),
    radial-gradient(circle at 50% 54%, transparent 0 42%, rgba(0, 0, 0, 0.5) 84%);
  --weather-tone-opacity: 0.94;
  --rain-card-droplet-color: rgba(196, 220, 236, 0.28);
  --rain-card-highlight-color: rgba(232, 244, 255, 0.18);
  --rain-card-sheen-color: rgba(168, 204, 232, 0.12);
}

body[data-time-of-day='day'][data-weather='light-rain'],
body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain'] {
  --light-rain-streak-strong: rgba(210, 228, 230, 0.17);
  --light-rain-streak-soft: rgba(228, 238, 238, 0.11);
  --light-rain-streak-faint: rgba(192, 210, 214, 0.08);
  --light-rain-haze: rgba(218, 228, 226, 0.08);
  --rain-glass-droplet-color: rgba(216, 232, 234, 0.38);
  --rain-glass-highlight-color: rgba(255, 255, 255, 0.32);
  --rain-glass-trail-color: rgba(202, 222, 224, 0.17);
  --rain-glass-sheen-color: rgba(230, 240, 240, 0.11);
  --rain-glass-shadow-color: rgba(180, 210, 216, 0.18);
  --rain-glass-opacity: 0.44;
}

body[data-time-of-day='sunset'][data-weather='light-rain'],
body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain'] {
  --light-rain-streak-strong: rgba(230, 206, 168, 0.15);
  --light-rain-streak-soft: rgba(242, 220, 184, 0.1);
  --light-rain-streak-faint: rgba(196, 172, 136, 0.08);
  --light-rain-haze: rgba(218, 170, 104, 0.07);
  --rain-glass-droplet-color: rgba(236, 214, 178, 0.34);
  --rain-glass-highlight-color: rgba(255, 238, 204, 0.28);
  --rain-glass-trail-color: rgba(222, 184, 128, 0.14);
  --rain-glass-sheen-color: rgba(226, 173, 108, 0.1);
  --rain-glass-shadow-color: rgba(174, 120, 72, 0.14);
  --rain-glass-opacity: 0.4;
}

body[data-time-of-day='night'][data-weather='light-rain'],
body.night-fall[data-weather='light-rain'],
body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain'] {
  --light-rain-streak-strong: rgba(178, 208, 228, 0.14);
  --light-rain-streak-soft: rgba(210, 230, 242, 0.09);
  --light-rain-streak-faint: rgba(138, 170, 194, 0.08);
  --light-rain-haze: rgba(122, 158, 182, 0.07);
  --rain-glass-droplet-color: rgba(190, 218, 236, 0.3);
  --rain-glass-highlight-color: rgba(236, 247, 255, 0.25);
  --rain-glass-trail-color: rgba(154, 190, 216, 0.13);
  --rain-glass-sheen-color: rgba(168, 204, 232, 0.09);
  --rain-glass-shadow-color: rgba(120, 158, 188, 0.14);
  --rain-glass-opacity: 0.36;
}

@keyframes paramo-light-rain-fall {
  from {
    background-position: 0 0, 22px -20px, -12px 15px, 40px -30px, -28px 25px, 0 0;
  }
  to {
    background-position: 0 230px, 22px 275px, -12px 270px, 40px 310px, -28px 230px, 0 0;
  }
}

@keyframes paramo-light-rain-fall-mobile {
  from {
    background-position: 0 0, 22px -20px, -12px 15px, 40px -30px, -28px 25px, 0 0;
  }
  to {
    background-position: 0 330px, 22px 370px, -12px 365px, 40px 400px, -28px 325px, 0 0;
  }
}

@keyframes paramo-rain-fall {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: -56px 160px, -92px 220px;
  }
}

@keyframes paramo-mist-drift {
  0% {
    transform: translate3d(-3%, 0.8%, 0) scale(1.04);
  }
  48% {
    transform: translate3d(1.5%, -0.9%, 0) scale(1.065);
  }
  100% {
    transform: translate3d(3.2%, -1.4%, 0) scale(1.08);
  }
}

@keyframes paramo-wet-glimmer {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 0.38;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    animation: none;
    transform: none;
  }

  body[data-visual-scene='rainbow-after-rain'] {
    --weather-particles: none;
    --weather-particles-opacity: 0;
  }

  body[data-weather='mist'],
  body[data-visual-scene='day-mist'],
  body[data-visual-scene='sunset-mist'],
  body[data-visual-scene='night-mist'] {
    --weather-particles: none;
    --weather-particles-opacity: 0;
    --weather-particles-filter: none;
  }

  body[data-weather='light-rain'],
  body[data-weather='heavy-rain'],
  body[data-visual-scene='day-rain'],
  body[data-visual-scene='sunset-rain'],
  body[data-visual-scene='night-rain'] {
    --weather-particles-opacity: 0.22;
  }

  body[data-weather='light-rain'],
  body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain'],
  body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain'],
  body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain'] {
    --weather-particles-opacity: 0.22;
  }

  body[data-weather='light-rain']::after,
  body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain']::after,
  body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain']::after,
  body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain']::after {
    transform: none;
  }
}

/* En móvil/táctil se eliminan motas, luciérnagas y bruma animada para mantener fluido el scroll. */
@media (max-width: 768px), (pointer: coarse) {
  .day-motes-layer,
  .fireflies-layer {
    display: none !important;
  }

  body[data-visual-scene='rainbow-after-rain'],
  body[data-weather='mist'],
  body[data-visual-scene='day-mist'],
  body[data-visual-scene='sunset-mist'],
  body[data-visual-scene='night-mist'] {
    --weather-particles: none;
    --weather-particles-opacity: 0;
    --weather-particles-animation: none;
    --weather-particles-filter: none;
  }
}

@media (max-width: 640px) {
  body[data-visual-scene='dawn'],
  body[data-visual-scene='sunny-day'],
  body[data-visual-scene='rainbow-after-rain'] {
    --paramo-base-veil: linear-gradient(rgba(10, 16, 17, 0.2), rgba(4, 8, 8, 0.34));
    --weather-tone-opacity: 0.84;
  }

  body[data-visual-scene='rainbow-after-rain'] {
    --weather-particles-opacity: 0.2;
  }

  body[data-weather='mist'],
  body[data-visual-scene='day-mist'],
  body[data-visual-scene='sunset-mist'],
  body[data-visual-scene='night-mist'] {
    --weather-particles-opacity: 0.32;
    --weather-particles-filter: blur(13px) saturate(0.7);
    --weather-particles-size: 160% 110%, 150% 112%, 170% 110%, 220% 100%, 210% 100%;
  }

  body[data-weather='light-rain'],
  body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain'],
  body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain'],
  body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain'] {
    --weather-particles-opacity: 0.2;
    --weather-particles-animation: paramo-light-rain-fall-mobile 3.4s linear infinite;
    --weather-particles-filter: blur(0.16px) saturate(0.82);
    --weather-particles-size: 220px 330px, 290px 390px, 260px 350px, 340px 430px, 190px 300px, 100% 100%;
    --rain-glass-opacity: 0.32;
  }
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main.wrap {
  width: min(720px, 100%);
  position: relative;
  z-index: 3;
}


.quote-flow {
  transition: color 0.9s ease, opacity 0.9s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1rem, 3.2vh, 1.8rem);
  text-align: center;
  cursor: pointer;
  outline: none;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.quote-flow:focus-visible {
  outline: 2px solid rgba(200, 162, 90, 0.3);
  outline-offset: 10px;
}

h1 {
  margin: 0 0 clamp(1rem, 2.5vh, 1.35rem);
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-size: clamp(1.75rem, 4vw, 2.45rem);
  line-height: 1.1;
  color: var(--title);
  text-shadow: 0 0 22px rgba(200, 162, 90, 0.12);
}

.quote-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(260px, 55%);
  height: 1.2rem;
  margin-bottom: clamp(1.1rem, 3vh, 1.8rem);
}

.quote-rule::before,
.quote-rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(200, 162, 90, 0.42));
}

.quote-rule::after {
  background: linear-gradient(90deg, rgba(200, 162, 90, 0.42), transparent);
}

.quote-rule span {
  width: 0.55rem;
  height: 0.55rem;
  margin-inline: 0.35rem;
  background: var(--title);
  opacity: 0.85;
  transform: rotate(45deg);
}

.quote-rule--short {
  width: min(90px, 25%);
  height: 0.9rem;
  margin: clamp(1.4rem, 3vh, 2rem) 0 0.75rem;
}

.quote-rule--short span {
  width: 0.42rem;
  height: 0.42rem;
}

#quote-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(720px, 100%);
  max-width: 100%;
  padding: clamp(1.35rem, 3vw, 2rem) clamp(1.2rem, 4.2vw, 3.2rem) 0;
  padding-left: clamp(1.2rem, 4.2vw, 3.2rem);
  padding-right: clamp(1.2rem, 4.2vw, 3.2rem);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.68), rgba(18, 12, 8, 0.72)),
    radial-gradient(circle at 50% 0%, rgba(200, 162, 90, 0.12), transparent 42%);
  border: 1px solid rgba(200, 162, 90, 0.42);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.42), inset 0 0 54px rgba(200, 162, 90, 0.035);
  overflow: hidden;
  transition: background 0.9s ease, border-color 0.9s ease, box-shadow 0.9s ease;
}

#quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 18% 22%, var(--rain-card-highlight-color) 0 1px, transparent 2.8px),
    radial-gradient(ellipse at 72% 18%, var(--rain-card-droplet-color) 0 1.2px, transparent 3.2px),
    radial-gradient(ellipse at 38% 72%, var(--rain-card-highlight-color) 0 1px, transparent 2.9px),
    radial-gradient(ellipse at 86% 64%, var(--rain-card-droplet-color) 0 1.2px, transparent 3px),
    linear-gradient(112deg, transparent 0 43%, var(--rain-card-sheen-color) 47%, transparent 51%);
  background-size: 132px 118px, 170px 146px, 150px 170px, 210px 180px, 100% 100%;
  background-position: 0 0, 34px 18px, -20px 32px, 18px -28px, 0 0;
  mix-blend-mode: screen;
  transition: opacity 0.9s ease;
}

#quote-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(circle at 13% 18%, var(--rain-glass-highlight-color) 0 0.7px, var(--rain-glass-droplet-color) 1px 1.8px, transparent 3.4px),
    radial-gradient(circle at 82% 17%, var(--rain-glass-highlight-color) 0 0.6px, var(--rain-glass-droplet-color) 1px 1.6px, transparent 3.2px),
    radial-gradient(circle at 28% 34%, var(--rain-glass-highlight-color) 0 0.5px, var(--rain-glass-droplet-color) 0.9px 1.5px, transparent 3px),
    radial-gradient(circle at 72% 44%, var(--rain-glass-highlight-color) 0 0.6px, var(--rain-glass-droplet-color) 1px 1.7px, transparent 3.3px),
    radial-gradient(circle at 17% 74%, var(--rain-glass-highlight-color) 0 0.5px, var(--rain-glass-droplet-color) 0.9px 1.5px, transparent 3px),
    radial-gradient(circle at 88% 76%, var(--rain-glass-highlight-color) 0 0.6px, var(--rain-glass-droplet-color) 1px 1.7px, transparent 3.2px),
    radial-gradient(ellipse 1.2px 11px at 22% 56%, var(--rain-glass-trail-color) 0 44%, transparent 74%),
    radial-gradient(ellipse 1px 9px at 64% 28%, var(--rain-glass-trail-color) 0 42%, transparent 72%),
    radial-gradient(ellipse 1.1px 12px at 78% 64%, var(--rain-glass-trail-color) 0 40%, transparent 72%),
    radial-gradient(ellipse 0.9px 8px at 38% 80%, var(--rain-glass-trail-color) 0 42%, transparent 74%),
    linear-gradient(112deg, transparent 0 40%, var(--rain-glass-sheen-color) 45%, transparent 50%),
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.06), transparent 44%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  box-shadow: inset 0 1px 18px var(--rain-glass-shadow-color);
  filter: drop-shadow(0 0 5px var(--rain-glass-shadow-color));
  mix-blend-mode: screen;
  transition: opacity 0.9s ease;
}

#quote-card > * {
  position: relative;
  z-index: 2;
}

body[data-weather='light-rain'] #quote-card::before,
body[data-visual-scene='day-rain'] #quote-card::before,
body[data-visual-scene='sunset-rain'] #quote-card::before,
body[data-visual-scene='night-rain'] #quote-card::before {
  opacity: 0.34;
  animation: quote-card-rain-glass 14s linear infinite;
}

body[data-weather='light-rain'] #quote-card::after,
body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain'] #quote-card::after,
body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain'] #quote-card::after,
body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain'] #quote-card::after {
  opacity: var(--rain-glass-opacity);
}

body[data-time-of-day='sunset'] #quote-card {
  background:
    linear-gradient(180deg, rgba(13, 8, 5, 0.7), rgba(20, 11, 7, 0.75)),
    radial-gradient(circle at 50% 0%, rgba(215, 142, 72, 0.13), transparent 42%);
}

body.night-fall #quote-card {
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.7), rgba(18, 12, 8, 0.74)),
    radial-gradient(circle at 50% 0%, rgba(246, 234, 199, 0.1), transparent 42%);
}

body[data-weather='overcast'] #quote-card,
body[data-weather='mist'] #quote-card,
body[data-weather='light-rain'] #quote-card {
  background:
    linear-gradient(180deg, rgba(7, 7, 6, 0.74), rgba(13, 11, 9, 0.78)),
    radial-gradient(circle at 50% 0%, rgba(200, 162, 90, 0.09), transparent 42%);
  border-color: rgba(220, 190, 136, 0.44);
  box-shadow: 0 30px 76px rgba(0, 0, 0, 0.5), inset 0 0 54px rgba(200, 162, 90, 0.035);
}

body[data-weather='heavy-rain'] #quote-card,
body[data-visual-scene='night-rain'] #quote-card {
  background:
    linear-gradient(180deg, rgba(5, 6, 7, 0.8), rgba(9, 9, 10, 0.84)),
    radial-gradient(circle at 50% 0%, rgba(214, 226, 232, 0.08), transparent 42%);
  border-color: rgba(226, 218, 194, 0.38);
  box-shadow: 0 32px 82px rgba(0, 0, 0, 0.58), inset 0 0 54px rgba(246, 234, 199, 0.025);
}

@keyframes quote-card-rain-glass {
  from {
    background-position: 0 0, 34px 18px, -20px 32px, 18px -28px, 0 0;
  }
  to {
    background-position: 18px 96px, 16px 130px, -6px 142px, 4px 104px, 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-weather='light-rain'] #quote-card::before,
  body[data-visual-scene='day-rain'] #quote-card::before,
  body[data-visual-scene='sunset-rain'] #quote-card::before,
  body[data-visual-scene='night-rain'] #quote-card::before {
    opacity: 0.24;
    animation: none;
  }
}

@media (max-width: 640px) {
  body[data-weather='light-rain'] #quote-card::before,
  body[data-visual-scene='day-rain'] #quote-card::before,
  body[data-visual-scene='sunset-rain'] #quote-card::before,
  body[data-visual-scene='night-rain'] #quote-card::before {
    opacity: 0.26;
    background-size: 170px 150px, 210px 180px, 190px 210px, 250px 220px, 100% 100%;
    animation-duration: 18s;
  }

  body[data-weather='light-rain'] #quote-card::after,
  body:not([data-weather='heavy-rain'])[data-visual-scene='day-rain'] #quote-card::after,
  body:not([data-weather='heavy-rain'])[data-visual-scene='sunset-rain'] #quote-card::after,
  body:not([data-weather='heavy-rain'])[data-visual-scene='night-rain'] #quote-card::after {
    filter: drop-shadow(0 0 3px var(--rain-glass-shadow-color));
  }
}

blockquote {
  margin: 0 auto;
  width: 100%;
  max-width: 88%;
  font-family: Georgia, 'Libre Baskerville', 'Times New Roman', serif;
  font-size: clamp(1.38rem, var(--quote-font-size, 1.78rem), 1.92rem);
  line-height: var(--quote-line-height, 1.3);
  font-style: normal;
  font-weight: 400;
  color: var(--text);
  position: relative;
  padding-inline: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

.quote-text--prose {
  width: 100%;
  max-width: min(100%, 64ch);
  font-size: clamp(1.18rem, var(--quote-font-size, 1.5rem), 1.6rem);
  line-height: clamp(1.3, var(--quote-line-height, 1.36), 1.42);
  text-align: left;
  white-space: normal;
  text-wrap: wrap;
  text-wrap: pretty;
}

.quote-text--poem {
  width: 100%;
  max-width: min(100%, 36rem);
  font-size: clamp(1.25rem, 3vw, 1.72rem);
  line-height: 1.18;
  text-align: center;
  white-space: pre-line;
}

.quote-text--poem.quote-text--medium {
  font-size: clamp(1.16rem, 2.6vw, 1.44rem);
  line-height: 1.16;
}

.quote-text--poem.quote-text--long {
  font-size: clamp(1.1rem, 2.35vw, 1.34rem);
  line-height: 1.14;
}

.quote-text--poem.quote-text--very-long {
  font-size: clamp(1.04rem, 2.15vw, 1.24rem);
  line-height: 1.12;
}

.quote-highlight:not([hidden]) + .quote-text--poem.quote-text--medium,
.quote-highlight:not([hidden]) + .quote-text--poem.quote-text--long,
.quote-highlight:not([hidden]) + .quote-text--poem.quote-text--very-long {
  margin-top: -0.25rem;
}

.quote-text--poem.quote-text--medium + .quote-rule--short,
.quote-text--poem.quote-text--long + .quote-rule--short,
.quote-text--poem.quote-text--very-long + .quote-rule--short {
  margin-top: 0.9rem;
  margin-bottom: 0.55rem;
}

.quote-highlight {
  width: min(92%, 620px);
  margin: 0 auto clamp(0.85rem, 2.1vh, 1.35rem);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1rem, 2.35vw, 1.28rem);
  line-height: 1.35;
  color: var(--title);
  text-wrap: balance;
  overflow-wrap: break-word;
  text-shadow: 0 0 18px rgba(200, 162, 90, 0.18);
}

.quote-highlight[hidden] {
  display: none;
}

blockquote::before,
blockquote::after {
  content: none;
}

.watermark {
  font-size: 0.72rem;
  color: var(--author);
  opacity: 0.22;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  margin: 0.7rem 0 clamp(1rem, 2.4vw, 1.4rem);
}

body.night-fall .watermark {
  color: var(--author-night);
}

.word {
  display: inline-block;
  will-change: transform, color;
  transition: transform var(--word-return-duration, 0.75s) cubic-bezier(0.22, 0.61, 0.36, 1),
    color 0.25s ease,
    text-shadow 0.25s ease;
  transform-origin: center;
  transform: translate3d(0, 0, 0);
}

.word--quote-open,
.word--quote-close {
  font-style: normal;
}

.word--fall {
  transition: transform var(--word-fall-duration, 0.65s) cubic-bezier(0.24, 0.82, 0.34, 1);
  transform: translate3d(0, var(--word-fall-translate, 240px), 0)
    rotate(var(--word-fall-rotate, 0deg));
}

.word--returning {
  transition: transform var(--word-return-duration, 1s) cubic-bezier(0.19, 1, 0.22, 1);
}

.word--pulse {
  animation: word-beat 0.8s ease-in-out forwards;
}

.word--soft-glow {
  color: #b38b46;
  text-shadow: 0 0 6px rgba(243, 212, 130, 0.6);
}

@keyframes word-beat {
  0% {
    transform: scale3d(1, 1, 1);
    color: inherit;
    text-shadow: none;
  }
  50% {
    transform: scale3d(1.25, 1.25, 1);
    color: #b38b46;
    text-shadow: 0 0 8px rgba(243, 212, 130, 0.7);
  }
  100% {
    transform: scale3d(1, 1, 1);
    color: inherit;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word {
    transition: color 0.2s ease, text-shadow 0.2s ease;
    transform: none;
  }
  .word--fall,
  .word--returning {
    transform: none;
  }
  .word--pulse {
    animation: none;
  }
}

.author {
  margin: 0.1rem 0 0;
  width: 100%;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: var(--title);
  text-align: center;
  text-transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.author-line {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 2.5rem;
  gap: 0.38rem;
}

.meta-prefix {
  display: inline-block;
  flex: 0 0 auto;
  color: rgba(184, 145, 76, 0.62);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
}

.meta-link {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
}

.literary-info-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0.3rem 0.42rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: rgba(190, 151, 83, 0.9);
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(200, 162, 90, 0.08);
  transition:
    transform 0.16s ease,
    color 0.2s ease,
    background-color 0.2s ease;
}

.literary-info-link::before {
  content: none;
}

.literary-info-link::after {
  content: '';
  position: absolute;
  right: 0.42rem;
  bottom: 0.22rem;
  left: 0.42rem;
  height: 1px;
  background: currentColor;
  opacity: 0.18;
  transform: scaleX(0.62);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.literary-info-link:hover {
  color: rgba(210, 171, 98, 0.98);
  background: rgba(200, 162, 90, 0.035);
}

.literary-info-link:hover::after,
.literary-info-link:focus-visible::after {
  opacity: 0.42;
  transform: scaleX(1);
}

.literary-info-link:focus-visible {
  color: rgba(218, 181, 109, 1);
  background: rgba(200, 162, 90, 0.045);
  outline: 2px solid rgba(200, 162, 90, 0.32);
  outline-offset: 1px;
  box-shadow: none;
}

.literary-info-link:active {
  transform: translateY(1px);
  color: rgba(181, 143, 76, 0.96);
  background: rgba(200, 162, 90, 0.055);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .literary-info-link {
    transition: color 0.2s ease, background-color 0.2s ease;
  }

  .literary-info-link::after {
    transition: none;
  }

  .literary-info-link:hover,
  .literary-info-link:active {
    transform: none;
  }
}

.meta-author {
  width: auto;
  max-width: calc(100% - 1.6rem);
  padding: 0.3rem 0.42rem;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: clamp(0.96rem, 1.55vw, 1.04rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  text-transform: none;
}

.meta-work {
  width: auto;
  max-width: min(82%, 32rem);
  padding: 0.25rem 0.38rem;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: clamp(0.84rem, 1.35vw, 0.92rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.025em;
  line-height: 1.3;
  text-transform: none;
  color: rgba(166, 145, 101, 0.88);
}

.meta-label {
  color: #beb8ae;
}


.meta-separator[hidden],
.meta-link[hidden],
.meta-label[hidden],
.meta-prefix[hidden] {
  display: none;
}

.row {
  display: none;
}

.floating-action {
  position: fixed;
  bottom: calc(clamp(1.25rem, 3vw, 1.75rem) + env(safe-area-inset-bottom));
  z-index: 11;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid rgba(205, 168, 96, 0.78);
  border-radius: 50%;
  background: rgba(25, 22, 18, 0.93);
  color: #d7b56f;
  box-shadow:
    inset 0 0 0 3px rgba(200, 162, 90, 0.055),
    0 5px 15px rgba(0, 0, 0, 0.26);
  cursor: pointer;
  isolation: isolate;
  transition:
    transform 0.2s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease,
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.floating-action::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: 0;
  border: 1px solid rgba(224, 194, 132, 0.16);
  border-radius: inherit;
  pointer-events: none;
}

.floating-action--voice {
  left: calc(clamp(1rem, 2.5vw, 1.75rem) + env(safe-area-inset-left));
}

.floating-action--share {
  right: calc(clamp(1rem, 2.5vw, 1.75rem) + env(safe-area-inset-right));
}

.floating-action svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 1.3rem;
  height: 1.3rem;
}

.floating-action:hover {
  transform: translateY(-2px);
  border-color: rgba(229, 194, 124, 0.96);
  background: rgba(31, 27, 21, 0.96);
  color: #e4c17c;
  box-shadow:
    inset 0 0 0 3px rgba(217, 180, 107, 0.08),
    0 7px 17px rgba(0, 0, 0, 0.28);
}

.floating-action:active {
  transform: scale(0.95);
}

.floating-action:focus-visible {
  border-color: rgba(231, 198, 133, 0.98);
  outline: 3px solid rgba(200, 162, 90, 0.25);
  outline-offset: 3px;
}

.floating-action[disabled] {
  cursor: progress;
  opacity: 0.56;
}

.floating-action.is-speaking {
  border-color: rgba(229, 194, 124, 0.96);
  background: rgba(64, 50, 29, 0.94);
  color: #efd196;
  box-shadow:
    inset 0 0 0 3px rgba(225, 188, 116, 0.1),
    0 5px 15px rgba(0, 0, 0, 0.26);
}

.floating-action.is-speaking::before {
  border-color: rgba(239, 209, 150, 0.28);
}

body.night-fall .floating-action {
  border-color: rgba(246, 234, 199, 0.4);
  background: rgba(15, 12, 16, 0.93);
  color: var(--title-night);
}

body.modal-open .floating-action {
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .floating-action {
    transition: border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
  }

  .floating-action:hover,
  .floating-action:active {
    transform: none;
  }
}

.tiny {
  display: block;
  margin: 1rem auto 0;
  max-width: 40ch;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--author);
  opacity: 0.52;
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.tiny::before {
  content: none;
}

.share-image-fallback {
  width: min(360px, 100%);
  margin: 1rem auto 0;
  position: relative;
  z-index: 20;
}

.share-image-fallback[hidden] {
  display: none;
}

.share-image-fallback img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(200, 162, 90, 0.42);
  border-radius: 10px;
}

body.night-fall {
  color-scheme: dark;
  background-color: var(--sand-night);
  color: var(--text-night);
}

body.night-fall .info-button {
  border-color: var(--ink-soft-night);
  color: var(--title-night);
}

body.night-fall .info-button:hover,
body.night-fall .info-button:focus-visible {
  background: rgba(246, 234, 199, 0.08);
  border-color: rgba(246, 234, 199, 0.36);
  box-shadow: 0 0 0 3px rgba(246, 234, 199, 0.18);
}

body.night-fall h1 {
  color: var(--title-night);
}

body.night-fall blockquote {
  color: var(--text-night);
}

body.night-fall .author,
body.night-fall .tiny {
  color: var(--author-night);
}

body.night-fall .meta-link {
  background: transparent;
  color: rgba(223, 197, 132, 0.84);
}

body.night-fall .meta-work {
  color: rgba(207, 195, 164, 0.78);
}

body.night-fall .meta-link:hover,
body.night-fall .meta-link:focus-visible {
  background: rgba(246, 234, 199, 0.035);
  color: var(--title-night);
}

body.night-fall .literary-info-link:focus-visible {
  outline-color: rgba(246, 234, 199, 0.3);
}

body.night-fall .literary-info-link:active {
  background: rgba(246, 234, 199, 0.05);
}

body.night-fall .tiny::before {
  background: var(--ink-soft-night);
}

#quote-card.quote-card--capturing,
#quote-card.quote-card--capturing * {
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.night-fall blockquote::before,
body.night-fall blockquote::after {
  color: rgba(246, 234, 199, 0.28);
}


.mycelium-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  background: var(--sand);
}

.mycelium-layer--visible {
  opacity: 1;
}

.mycelium-layer--resting {
  opacity: 1;
}

.mycelium-layer[data-reduce-motion='true'] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .mycelium-layer {
    display: none;
  }
}

.mycelium-canvas {
  width: 100%;
  height: 100%;
  transition: opacity 2s ease;
}

.mycelium-path {
  stroke: rgba(200, 162, 90, 0.05);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.mycelium-path--accent {
  stroke: rgba(200, 162, 90, 0.08);
}

body[data-mode='day'] .mycelium-layer {
  background: linear-gradient(180deg, #121212 0%, #171717 100%);
}


.mycelium-layer--resting .mycelium-path[data-pulse='true'] {
  animation: mycelium-breathe var(--mycelium-pulse-duration, 18s) ease-in-out infinite;
}

.mycelium-layer--resting .mycelium-canvas {
  opacity: 0.82;
}

@keyframes mycelium-breathe {
  0%,
  100% {
    opacity: var(--mycelium-pulse-min-opacity, 0.4);
  }
  50% {
    opacity: var(--mycelium-pulse-max-opacity, 0.48);
  }
}

.paramo-illustration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease;
}

.mycelium-layer--visible .paramo-illustration {
  opacity: 0.3;
}

.mycelium-layer--resting .paramo-illustration {
  opacity: 0.5;
}

.mycelium-layer__clearing {
  position: absolute;
  inset: min(12vh, 18%);
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(200, 162, 90, 0.1) 0%,
    rgba(200, 162, 90, 0.06) 35%,
    rgba(200, 162, 90, 0.03) 62%,
    rgba(200, 162, 90, 0) 82%
  );
  mix-blend-mode: lighten;
  opacity: 0;
  transition: opacity 2s ease;
}

.mycelium-layer--visible .mycelium-layer__clearing {
  opacity: 0.35;
}

.mycelium-layer--resting .mycelium-layer__clearing {
  opacity: 0.28;
}

.day-motes-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 2s ease;
  background: transparent;
}

.day-motes-layer--visible {
  opacity: 0.35;
}

.day-mote {
  position: absolute;
  filter: blur(0.2px);
  bottom: -24px;
  border-radius: 50%;
  width: 3px;
  height: 3px;
  opacity: var(--mote-opacity, 0.26);
  pointer-events: none;
  box-shadow: 0 0 4px rgba(200, 162, 90, 0.2);
  transform: translate3d(0, 0, 0);
  animation-name: day-mote-ascend;
  animation-duration: var(--mote-duration, 16s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.day-mote--primary {
  background: radial-gradient(circle, rgba(200, 162, 90, 0.2) 0%, rgba(200, 162, 90, 0) 72%);
}

.day-mote--secondary {
  background: radial-gradient(circle, rgba(168, 132, 69, 0.18) 0%, rgba(168, 132, 69, 0) 72%);
}

.day-motes-layer[data-reduce-motion='true'] .day-mote {
  animation: none;
  transform: translate3d(0, 0, 0) scale(1);
}

@keyframes day-mote-ascend {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: var(--mote-opacity, 0.26);
  }
  45% {
    transform: translate3d(calc(var(--mote-drift-x, 0px) * 0.35), -80px, 0) scale(1.08);
    opacity: calc(var(--mote-opacity, 0.26) * 1.1);
  }
  100% {
    transform: translate3d(var(--mote-drift-x, 0px), -150px, 0) scale(1.2);
    opacity: 0;
  }
}

.fireflies-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
  mix-blend-mode: screen;
  contain: layout paint;
  --fireflies-layer-opacity: 1;
  opacity: 0;
  animation: fireflies-layer-in var(--firefly-fade-in, 2400ms) ease-out forwards;
}

.fireflies-back {
  z-index: 2;
}

.fireflies-front {
  z-index: 4;
  --firefly-fade-in: 3200ms;
  --fireflies-layer-opacity: 0.88;
}

.firefly {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255, 246, 177, 1) 0%, rgba(252, 218, 96, var(--firefly-core-alpha, 0.48)) 56%, rgba(248, 187, 70, 0) 100%);
  box-shadow:
    0 0 var(--firefly-tight-glow, 19px) var(--firefly-tight-spread, 6px) rgba(255, 220, 93, var(--firefly-glow-alpha, 0.42)),
    0 0 var(--firefly-wide-glow, 46px) var(--firefly-wide-spread, 16px) rgba(255, 202, 82, var(--firefly-halo-alpha, 0.24));
  filter: blur(var(--firefly-blur, 0.16px)) saturate(1.12);
  opacity: var(--firefly-base-opacity, 0.75);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  animation-name: firefly-flicker;
  animation-duration: var(--flicker-duration, 2.6s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: var(--flicker-delay, 0s);
}

.fireflies-front .firefly {
  filter: blur(var(--firefly-blur, 0.16px)) saturate(1.22) drop-shadow(0 0 10px rgba(255, 217, 108, 0.28));
}

.fireflies-layer[data-reduce-motion='true'] {
  --fireflies-layer-opacity: 0.68;
}

.fireflies-layer[data-reduce-motion='true'] .firefly {
  animation-name: firefly-flicker;
  animation-duration: 7.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: var(--flicker-delay, 0s);
}

@keyframes firefly-flicker {
  0% {
    opacity: calc(var(--firefly-base-opacity, 0.75) * 0.6);
  }
  45% {
    opacity: calc(var(--firefly-base-opacity, 0.75) * 1.05);
  }
  70% {
    opacity: calc(var(--firefly-base-opacity, 0.75) * 0.5);
  }
  100% {
    opacity: calc(var(--firefly-base-opacity, 0.75) * 0.9);
  }
}

@keyframes fireflies-layer-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: var(--fireflies-layer-opacity, 1);
  }
}

.modal {
  transition: opacity 0.8s ease;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  z-index: 12;
  pointer-events: none;
  opacity: 0;
}

.modal:not(.is-hidden) {
  opacity: 1;
  pointer-events: auto;
}

.modal.is-hidden {
  display: none;
}

.modal__overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(37, 29, 22, 0.18), rgba(8, 7, 6, 0.72) 72%),
    rgba(12, 10, 8, 0.58);
  -webkit-backdrop-filter: blur(9px) saturate(0.62);
  backdrop-filter: blur(9px) saturate(0.62);
}

.modal__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(90dvh, 850px);
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    linear-gradient(180deg, rgba(211, 184, 133, 0.035), transparent 24%),
    linear-gradient(145deg, rgba(31, 27, 23, 0.985), rgba(20, 18, 16, 0.98));
  border-radius: 3px;
  padding: 0;
  width: min(700px, calc(100vw - 2rem));
  box-shadow:
    0 36px 90px rgba(5, 4, 3, 0.58),
    0 2px 12px rgba(5, 4, 3, 0.28);
  border: 1px solid rgba(221, 199, 157, 0.12);
  border-top-color: rgba(221, 199, 157, 0.24);
}

body[data-mode='day'] .modal__subtitle,
body[data-mode='day'] .modal__close,
body[data-mode='day'] .modal__content {
  color: var(--author);
}


.modal__header {
  flex: 0 0 auto;
  padding: clamp(2.25rem, 5vw, 3.35rem) clamp(4.25rem, 8vw, 5.3rem)
    clamp(1.65rem, 4vw, 2.25rem) clamp(1.5rem, 6vw, 4rem);
  background: none;
}

.modal__title {
  margin: 0;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  max-width: 20ch;
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #d7b978;
  text-wrap: balance;
}

.modal__subtitle {
  margin: 0 0 0.85rem;
  color: rgba(205, 195, 177, 0.58);
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.23em;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
}

.modal__content {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(0.94rem, 1.6vw, 1rem);
  color: #ddd6c9;
  line-height: 1.8;
}

.modal__body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 clamp(1.5rem, 6vw, 4rem) clamp(2.6rem, 6vw, 4rem);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 173, 118, 0.28) transparent;
}

.modal__dialog .modal__content {
  color: #ddd6c9;
}

body.modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.author-portrait {
  width: clamp(130px, 30%, 170px);
  max-width: 170px;
  margin: 0.45rem auto 1.1rem;
}

.author-portrait__frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  color: inherit;
  font: inherit;
  cursor: zoom-in;
  border: 1px solid rgba(205, 179, 126, 0.14);
  border-radius: 18px;
  background: rgba(20, 18, 16, 0.38);
  box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.12);
}

.author-portrait__frame:focus-visible {
  outline: 2px solid rgba(215, 185, 120, 0.72);
  outline-offset: 4px;
}

.author-portrait__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--portrait-fit, cover);
  object-position: var(--portrait-position, 50% 38%);
  transform:
    translate(
      var(--portrait-translate-x, 0%),
      var(--portrait-translate-y, 0%)
    )
    scale(var(--portrait-scale, 1));
  transform-origin: center center;
}

.author-portrait__caption {
  margin-top: 0.35rem;
  color: rgba(198, 190, 176, 0.42);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.56rem;
  line-height: 1.35;
  text-align: center;
}

.author-portrait__caption a {
  color: inherit;
  text-decoration-color: rgba(205, 179, 126, 0.24);
  text-underline-offset: 0.18em;
}

.portrait-lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.portrait-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.portrait-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 7, 6, 0.88);
}

.portrait-lightbox__figure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: min(86vw, 520px);
  max-height: 88dvh;
  margin: 0;
  transform: scale(0.92);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(0.22, 0.72, 0.24, 1),
    opacity 220ms ease;
}

.portrait-lightbox.is-open .portrait-lightbox__figure {
  transform: scale(1);
  opacity: 1;
}

.portrait-lightbox__image {
  display: block;
  width: auto;
  max-width: min(86vw, 520px);
  height: auto;
  max-height: 76dvh;
  object-fit: contain;
  border: 1px solid rgba(211, 187, 141, 0.18);
  border-radius: 22px;
  background: rgba(20, 18, 16, 0.92);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.34);
}

.portrait-lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 0.65rem;
  max-width: min(82vw, 500px);
  margin-top: 0.55rem;
  color: rgba(211, 203, 189, 0.58);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.58rem;
  line-height: 1.45;
  text-align: center;
}

.portrait-lightbox__caption a {
  color: rgba(215, 185, 120, 0.7);
  text-decoration-color: rgba(215, 185, 120, 0.28);
  text-underline-offset: 0.18em;
}

.portrait-lightbox__close {
  position: absolute;
  z-index: 2;
  top: max(0.85rem, env(safe-area-inset-top));
  right: max(0.85rem, env(safe-area-inset-right));
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  padding: 0;
  place-items: center;
  color: rgba(228, 217, 198, 0.78);
  font: 300 1.75rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid rgba(211, 187, 141, 0.2);
  border-radius: 50%;
  background: rgba(24, 21, 18, 0.76);
}

.portrait-lightbox__close:hover {
  color: rgba(240, 228, 207, 0.96);
  border-color: rgba(211, 187, 141, 0.38);
}

.portrait-lightbox__close:focus-visible {
  outline: 2px solid rgba(215, 185, 120, 0.72);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .portrait-lightbox {
    transition-duration: 100ms;
  }

  .portrait-lightbox__figure {
    transform: none;
    transition: opacity 100ms ease;
  }

  .portrait-lightbox.is-open .portrait-lightbox__figure {
    transform: none;
  }
}

.profile-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  color: rgba(221, 214, 201, 0.72);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.015em;
}

.profile-meta__item {
  display: inline;
}

.profile-meta__item + .profile-meta__item::before {
  content: '·';
  margin: 0 0.62em;
  color: rgba(200, 174, 119, 0.48);
}

.profile-meta--secondary {
  margin-top: 0.12rem;
  color: rgba(198, 190, 176, 0.52);
  font-size: 0.74rem;
  letter-spacing: 0.025em;
}

.profile-meta + .profile-section {
  margin-top: clamp(2.25rem, 5vw, 3.2rem);
}

.profile-section + .profile-section {
  margin-top: clamp(2rem, 4.5vw, 2.75rem);
}

.profile-section__title {
  margin: 0 0 0.9rem;
  color: rgba(205, 175, 116, 0.7);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.profile-section__text {
  max-width: 64ch;
  margin: 0;
  color: #ddd6c9;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.88;
  white-space: pre-line;
  text-wrap: pretty;
}

.profile-section__text + .profile-section__text {
  margin-top: 0.9em;
}

.profile-section--compact .profile-section__text {
  font-size: 0.74rem;
  line-height: 1.72;
  color: rgba(198, 190, 176, 0.58);
}

.profile-section--compact {
  margin-top: clamp(2.8rem, 6vw, 3.8rem) !important;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(205, 179, 126, 0.09);
}

.profile-section--compact .profile-section__title {
  margin-bottom: 0.65rem;
  color: rgba(198, 181, 149, 0.5);
  font-size: 0.58rem;
}

.profile-themes,
.profile-list {
  margin: 0;
  padding: 0;
}

.profile-themes {
  display: block;
  list-style: none;
  max-width: 64ch;
  color: rgba(218, 209, 193, 0.76);
  font-size: 0.82rem;
  line-height: 1.85;
}

.profile-themes li {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

.profile-themes li + li::before {
  content: ' · ';
  color: rgba(200, 174, 119, 0.5);
}

.profile-list {
  list-style: none;
  max-width: 64ch;
  color: rgba(198, 190, 176, 0.58);
  font-size: 0.74rem;
  line-height: 1.72;
}

.profile-list li {
  display: inline;
}

.profile-list li + li::before {
  content: '; ';
}

.modal__close {
  position: absolute;
  z-index: 2;
  top: 1.15rem;
  right: 1.15rem;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  color: rgba(213, 204, 188, 0.55);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.modal__close:hover,
.modal__close:focus-visible {
  color: #d7b978;
  border-color: transparent;
  outline: 1px solid rgba(200, 174, 119, 0.28);
  outline-offset: 0;
}

.modal__dialog:focus-visible {
  outline: 3px solid rgba(86, 92, 51, 0.35);
}

body.night-fall .modal__dialog {
  background:
    linear-gradient(180deg, rgba(216, 198, 160, 0.025), transparent 24%),
    linear-gradient(145deg, rgba(18, 15, 20, 0.988), rgba(12, 11, 15, 0.982));
  color: var(--text-night);
  border-color: rgba(235, 220, 185, 0.12);
  border-top-color: rgba(235, 220, 185, 0.22);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.62);
}

body.night-fall .modal__title {
  color: var(--title-night);
}

body.night-fall .modal__subtitle,
body.night-fall .modal__close,
body.night-fall .modal__content {
  color: var(--author-night);
}

body.night-fall .modal__close:hover,
body.night-fall .modal__close:focus-visible {
  color: var(--title-night);
}

.modal__dialog {
  max-width: min(720px, calc(100vw - 2rem));
}

@media (min-width: 961px) {
  main.wrap {
    width: min(780px, 100%);
  }

  #quote-card {
    width: min(780px, 100%);
    padding-left: clamp(2.7rem, 4.8vw, 3.7rem);
    padding-right: clamp(2.7rem, 4.8vw, 3.7rem);
  }

  blockquote {
    max-width: 92%;
    font-size: clamp(1.55rem, var(--quote-font-size, 1.92rem), 2.12rem);
    line-height: var(--quote-line-height, 1.34);
  }

  .quote-text--prose {
    max-width: min(100%, 64ch);
    font-size: clamp(1.22rem, var(--quote-font-size, 1.55rem), 1.68rem);
    line-height: clamp(1.32, var(--quote-line-height, 1.38), 1.42);
  }

  .quote-text--poem {
    max-width: min(100%, 36rem);
    font-size: clamp(1.32rem, 2.2vw, 1.72rem);
    line-height: 1.18;
  }

  .quote-text--poem.quote-text--medium {
    font-size: clamp(1.18rem, 1.8vw, 1.42rem);
    line-height: 1.16;
  }

  .quote-text--poem.quote-text--long {
    font-size: clamp(1.12rem, 1.65vw, 1.32rem);
    line-height: 1.14;
  }

  .quote-text--poem.quote-text--very-long {
    font-size: clamp(1.06rem, 1.5vw, 1.2rem);
    line-height: 1.12;
  }

  .author {
    font-size: 1rem;
  }

  .meta-author {
    font-size: 1.04rem;
  }

  .meta-work {
    font-size: 0.94rem;
  }
}

@media (max-width: 960px) {
  .modal__dialog {
    max-width: min(720px, calc(100vw - 2rem));
  }
}


@media (max-width: 480px) {
  .quote-text {
    font-size: clamp(1.25rem, 4.8vw, 1.75rem);
    max-width: 90%;
    line-height: 1.3;
  }
}

@media (max-width: 600px) {
  .modal {
    align-items: flex-end;
    padding: 0.5rem;
  }

  .modal__dialog {
    width: 100%;
    max-width: none;
    max-height: 91dvh;
    border-radius: 3px;
  }

  .modal__header {
    padding: 2rem 3.65rem 1.35rem 1.4rem;
  }

  .modal__title {
    max-width: 16ch;
    font-size: clamp(1.85rem, 8.6vw, 2.45rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
  }

  .modal__body {
    padding: 0 1.4rem 2.5rem;
    scrollbar-gutter: auto;
  }

  .modal__close {
    top: 0.85rem;
    right: 0.75rem;
  }

  .profile-section + .profile-section {
    margin-top: 1.9rem;
  }

  .profile-section__text {
    font-size: 0.92rem;
    line-height: 1.82;
  }

  .profile-meta {
    font-size: 0.78rem;
    line-height: 1.7;
  }

  .author-portrait {
    width: clamp(125px, 34vw, 155px);
    max-width: 155px;
  }

  .profile-meta--secondary {
    font-size: 0.7rem;
  }

  .profile-themes {
    font-size: 0.78rem;
    line-height: 1.8;
  }

  body {
    min-height: 100dvh;
    padding-inline: 18px;
    padding-block: clamp(0.75rem, 2.8dvh, 1.35rem);
    align-items: center;
  }

  main.wrap {
    width: 100%;
  }

  .quote-flow {
    min-height: calc(100dvh - clamp(1.5rem, 5.6dvh, 2.7rem));
    justify-content: center;
    gap: 0.6rem;
  }

  #quote-card {
    width: 100%;
    padding: 0.85rem 0.9rem 0;
  }

  h1 {
    margin-bottom: 0.45rem;
    max-width: 100%;
    font-size: clamp(1.05rem, 5vw, 1.36rem);
    letter-spacing: 0.12em;
  }

  .quote-rule {
    width: min(220px, 52%);
    height: 0.7rem;
    margin-bottom: 0.55rem;
  }

  .quote-rule span {
    width: 0.42rem;
    height: 0.42rem;
    margin-inline: 0.25rem;
  }

  .quote-rule--short {
    width: min(72px, 22%);
    height: 0.55rem;
    margin: 0.75rem 0 0.35rem;
  }

  .quote-rule--short span {
    width: 0.32rem;
    height: 0.32rem;
  }

  blockquote {
    padding-inline: 0;
    font-size: clamp(1.08rem, var(--quote-mobile-font-size, 1.32rem), 1.46rem);
    max-width: 92%;
    line-height: var(--quote-mobile-line-height, 1.22);
  }

  .quote-text--prose {
    max-width: 100%;
    font-size: clamp(1.02rem, var(--quote-mobile-font-size, 1.2rem), 1.24rem);
    line-height: clamp(1.28, var(--quote-mobile-line-height, 1.32), 1.38);
  }

  .quote-text--poem {
    max-width: calc(100% - 0.4rem);
    font-size: clamp(1.12rem, 4.4vw, 1.36rem);
    line-height: 1.18;
  }

  .quote-text--poem.quote-text--medium {
    font-size: clamp(1.06rem, 4vw, 1.2rem);
    line-height: 1.16;
  }

  .quote-text--poem.quote-text--long {
    font-size: clamp(1.02rem, 3.8vw, 1.12rem);
    line-height: 1.14;
  }

  .quote-text--poem.quote-text--very-long {
    font-size: clamp(1rem, 3.6vw, 1.08rem);
    line-height: 1.12;
  }

  .quote-text--poem.quote-text--medium + .quote-rule--short,
  .quote-text--poem.quote-text--long + .quote-rule--short,
  .quote-text--poem.quote-text--very-long + .quote-rule--short {
    margin-top: 0.55rem;
    margin-bottom: 0.25rem;
  }

  .author {
    margin-top: 0.25rem;
    gap: 0;
  }

  .meta-author {
    width: auto;
    max-width: calc(100% - 1.5rem);
    min-height: 2.5rem;
    padding: 0.28rem 0.34rem;
    font-size: 0.92rem;
    letter-spacing: 0.035em;
  }

  .meta-work {
    width: auto;
    max-width: 90%;
    min-height: 2.5rem;
    padding: 0.22rem 0.34rem;
    font-size: 0.84rem;
  }

  .watermark {
    margin: 0.45rem 0 0.8rem;
    font-size: 0.72rem;
    opacity: 0.3;
  }

  .floating-action {
    bottom: calc(1.35rem + env(safe-area-inset-bottom));
    width: 2.875rem;
    height: 2.875rem;
  }

  .floating-action--voice {
    left: calc(1rem + env(safe-area-inset-left));
  }

  .floating-action--share {
    right: calc(1rem + env(safe-area-inset-right));
  }

  .tiny {
    font-size: 0.78rem;
    max-width: 28ch;
    opacity: 0.5;
  }

  .firefly {
    background: radial-gradient(circle at center, rgba(255, 246, 177, 0.96) 0%, rgba(252, 218, 96, var(--firefly-core-alpha, 0.46)) 58%, rgba(248, 187, 70, 0) 100%);
    box-shadow:
      0 0 var(--firefly-tight-glow, 16px) var(--firefly-tight-spread, 5px) rgba(255, 220, 93, var(--firefly-glow-alpha, 0.34)),
      0 0 var(--firefly-wide-glow, 34px) var(--firefly-wide-spread, 12px) rgba(255, 202, 82, var(--firefly-halo-alpha, 0.2));
  }

  .fireflies-front {
    --fireflies-layer-opacity: 0.76;
  }
}