.environment-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.environment-layer::before,
.environment-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}

.environment-layer::before {
  inset: -12%;
  background:
    radial-gradient(22% 16% at 18% 30%, rgba(255, 247, 218, 0.38), transparent 72%),
    radial-gradient(16% 12% at 68% 18%, rgba(255, 241, 207, 0.24), transparent 74%),
    radial-gradient(20% 14% at 82% 62%, rgba(255, 232, 200, 0.18), transparent 76%);
  mix-blend-mode: screen;
  filter: blur(16px);
  animation: env-day-light-spots 22s ease-in-out infinite alternate;
}

.environment-layer::after {
  inset: -10% -8% auto auto;
  width: min(26vw, 260px);
  height: min(26vw, 260px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 247, 224, 0.76) 0, rgba(255, 239, 205, 0.34) 20%, rgba(255, 226, 186, 0.12) 42%, transparent 68%);
  filter: blur(3px);
  mix-blend-mode: screen;
  animation: env-day-lens-flare 17s ease-in-out infinite;
}

.env-day-haze {
  position: absolute;
  inset: -10%;
  opacity: 0.22;
  background:
    radial-gradient(42% 34% at 18% 24%, rgba(255, 229, 177, 0.46), transparent 72%),
    radial-gradient(46% 38% at 82% 22%, rgba(255, 220, 189, 0.28), transparent 74%),
    radial-gradient(54% 40% at 52% 80%, rgba(255, 238, 212, 0.18), transparent 76%);
  filter: blur(16px) saturate(1.12);
  mix-blend-mode: screen;
  animation: env-day-heat-haze 13s ease-in-out infinite alternate;
  transition: opacity 500ms ease;
}

.env-night-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 25, 52, 0.55), rgba(24, 16, 38, 0.66));
  opacity: 0;
  transition: opacity 500ms ease;
}

body.theme-night {
  color: #f5e9f1;
  background:
    radial-gradient(50% 40% at 12% 16%, rgba(92, 87, 160, 0.34), transparent 70%),
    radial-gradient(45% 36% at 86% 14%, rgba(66, 91, 170, 0.28), transparent 72%),
    radial-gradient(62% 42% at 50% 92%, rgba(74, 54, 106, 0.3), transparent 74%),
    linear-gradient(145deg, #1a1630 0%, #201936 44%, #191427 100%);
}

body.theme-night .env-night-scrim {
  opacity: 1;
}

body.theme-night .env-day-haze {
  opacity: 0;
}

body:not(.theme-night) {
  animation: env-day-background-shift 28s ease-in-out infinite alternate;
}

body:not(.theme-night) .environment-layer::before,
body:not(.theme-night) .environment-layer::after {
  opacity: 1;
}

body:not(.theme-night) .tabs,
body:not(.theme-night) .letters-grid,
body:not(.theme-night) .tab-btn.active,
body:not(.theme-night) .admin-tab-btn.active,
body:not(.theme-night) button.action-btn:not(.ghost) {
  position: relative;
  overflow: hidden;
}

body:not(.theme-night) .tab-btn.active::after,
body:not(.theme-night) .admin-tab-btn.active::after,
body:not(.theme-night) button.action-btn:not(.ghost)::after,
body:not(.theme-night) .letters-grid::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

body:not(.theme-night) .tab-btn.active::after,
body:not(.theme-night) .admin-tab-btn.active::after,
body:not(.theme-night) button.action-btn:not(.ghost)::after {
  top: -18%;
  bottom: -18%;
  width: 34%;
  left: -44%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.42), transparent);
  transform: skewX(-20deg);
  animation: env-day-button-gloss 6.8s ease-in-out infinite;
}

body:not(.theme-night) .letters-grid::after {
  top: -22%;
  bottom: -22%;
  width: 18%;
  left: -28%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), rgba(255, 244, 228, 0.34), transparent);
  transform: rotate(16deg);
  filter: blur(1px);
  opacity: 1;
  animation: env-day-board-glint 8.8s ease-in-out infinite;
}

body:not(.theme-night) .letters-grid::before {
  content: "";
  position: absolute;
  inset: -4%;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(155, 172, 185, 0.12) 38%, rgba(122, 136, 148, 0.18) 50%, rgba(155, 172, 185, 0.1) 62%, transparent 100%);
  filter: blur(16px);
  opacity: 0;
  transform: translate3d(-12%, -4%, 0);
  animation: env-day-board-shadow 14s ease-in-out infinite;
}

body:not(.theme-night) h1 {
  transform-origin: center center;
  animation: env-day-headline-breathe 7.4s ease-in-out infinite;
}

body:not(.theme-night) .drift-photo {
  animation:
    float-photo var(--pd, 14s) linear forwards,
    env-day-photo-glint 12s ease-in-out infinite;
}

body:not(.theme-night) .drift-photo:nth-child(3n) {
  animation-delay: 0s, 5.2s;
}

body:not(.theme-night) .drift-photo:nth-child(4n) {
  animation-delay: 0s, 9.6s;
}

body:not(.theme-night) .drift-photo:nth-child(5n) {
  animation-delay: 0s, 12.8s;
}

body:not(.theme-night) .note-card:not(:hover):not(.dragging)::after {
  content: "";
  position: absolute;
  inset: 12px 10px 18px auto;
  width: 1px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 246, 250, 0.18), transparent 88%);
  opacity: 0.72;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
  transform: rotate(8deg);
  pointer-events: none;
}

body:not(.theme-night) .note-card {
  box-shadow:
    var(--shadow-x, 0px) var(--shadow-y, 10px) var(--shadow-blur, 22px) rgba(83, 30, 58, 0.16),
    inset 0 -1px 0 rgba(210, 169, 188, 0.42);
  transform: translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(var(--card-depth, 1));
}

body:not(.theme-night) .note-card:hover {
  box-shadow:
    calc(var(--shadow-x, 0px) * 1.1) calc(var(--shadow-y, 10px) + 6px) calc(var(--shadow-blur, 22px) + 8px) rgba(83, 30, 58, 0.22),
    inset 0 -1px 0 rgba(210, 169, 188, 0.42);
}

body.is-dragging-letter .letters-grid {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 0 0 1px rgba(255, 234, 215, 0.28),
    0 18px 42px rgba(255, 221, 192, 0.14);
}

body.is-dragging-letter .note-card.dragging {
  filter: saturate(1.08) brightness(1.03);
  box-shadow:
    0 0 0 1px rgba(255, 240, 228, 0.6),
    0 24px 36px rgba(103, 38, 66, 0.24),
    0 0 34px rgba(255, 231, 200, 0.22);
}

body:not(.theme-night) .tab-btn:hover,
body:not(.theme-night) .admin-tab-btn:hover,
body:not(.theme-night) .music-loop-btn:hover,
body:not(.theme-night) .music-control:hover,
body:not(.theme-night) button.action-btn:not(:disabled):hover {
  box-shadow: 0 10px 26px rgba(255, 224, 200, 0.18), 0 0 26px rgba(255, 234, 214, 0.12);
}

body:not(.theme-night) .letters-grid {
  animation: env-board-parallax 26s ease-in-out infinite alternate;
  background-size: 108% 108%, 100% 100%;
}

body.theme-twilight {
  color: #f3eaf2;
}

body[data-theme-phase="dusk"] {
  background:
    radial-gradient(50% 40% at 12% 16%, rgba(229, 170, 151, 0.24), transparent 70%),
    radial-gradient(45% 36% at 86% 14%, rgba(167, 132, 180, 0.16), transparent 72%),
    radial-gradient(62% 42% at 50% 92%, rgba(208, 149, 126, 0.12), transparent 74%),
    linear-gradient(145deg, #f6ddd6 0%, #efcfd1 44%, #e0cadf 100%);
}

body[data-theme-phase="dawn"] {
  background:
    radial-gradient(50% 40% at 12% 16%, rgba(255, 222, 173, 0.22), transparent 70%),
    radial-gradient(45% 36% at 86% 14%, rgba(190, 189, 235, 0.16), transparent 72%),
    radial-gradient(62% 42% at 50% 92%, rgba(255, 224, 199, 0.14), transparent 74%),
    linear-gradient(145deg, #eee6f4 0%, #f2dde8 44%, #f6e7dc 100%);
}

body.theme-twilight .env-night-scrim {
  opacity: 0.34;
}

body.theme-twilight .env-day-haze {
  opacity: 0.18;
}

body.theme-twilight .environment-layer.show-stars .env-star {
  opacity: 0.46;
}

body.theme-twilight .environment-layer.show-stars .env-shooting-field {
  opacity: 0.34;
}

body[data-day-segment="morning"]:not(.theme-night) .env-day-haze {
  background:
    radial-gradient(42% 34% at 18% 24%, rgba(255, 223, 171, 0.5), transparent 72%),
    radial-gradient(46% 38% at 82% 22%, rgba(255, 210, 187, 0.28), transparent 74%),
    radial-gradient(54% 40% at 52% 80%, rgba(255, 238, 212, 0.2), transparent 76%);
}

body[data-day-segment="midday"]:not(.theme-night) .env-day-haze {
  background:
    radial-gradient(42% 34% at 18% 24%, rgba(255, 238, 193, 0.44), transparent 72%),
    radial-gradient(46% 38% at 82% 22%, rgba(241, 232, 209, 0.22), transparent 74%),
    radial-gradient(54% 40% at 52% 80%, rgba(255, 244, 226, 0.18), transparent 76%);
}

body[data-day-segment="evening"]:not(.theme-night) .env-day-haze {
  background:
    radial-gradient(42% 34% at 18% 24%, rgba(255, 206, 163, 0.52), transparent 72%),
    radial-gradient(46% 38% at 82% 22%, rgba(239, 180, 162, 0.28), transparent 74%),
    radial-gradient(54% 40% at 52% 80%, rgba(255, 222, 198, 0.2), transparent 76%);
}

body[data-season="spring"]:not(.theme-night) .environment-layer::before {
  background:
    radial-gradient(22% 16% at 18% 30%, rgba(241, 255, 218, 0.34), transparent 72%),
    radial-gradient(16% 12% at 68% 18%, rgba(255, 241, 207, 0.22), transparent 74%),
    radial-gradient(20% 14% at 82% 62%, rgba(220, 255, 215, 0.16), transparent 76%);
}

body[data-season="summer"]:not(.theme-night) .environment-layer::before {
  background:
    radial-gradient(22% 16% at 18% 30%, rgba(255, 246, 203, 0.4), transparent 72%),
    radial-gradient(16% 12% at 68% 18%, rgba(255, 231, 180, 0.24), transparent 74%),
    radial-gradient(20% 14% at 82% 62%, rgba(255, 237, 196, 0.18), transparent 76%);
}

body[data-season="autumn"]:not(.theme-night) .environment-layer::before {
  background:
    radial-gradient(22% 16% at 18% 30%, rgba(255, 224, 189, 0.38), transparent 72%),
    radial-gradient(16% 12% at 68% 18%, rgba(255, 213, 170, 0.24), transparent 74%),
    radial-gradient(20% 14% at 82% 62%, rgba(255, 210, 176, 0.18), transparent 76%);
}

body[data-season="winter"]:not(.theme-night) .environment-layer::before {
  background:
    radial-gradient(22% 16% at 18% 30%, rgba(232, 240, 255, 0.32), transparent 72%),
    radial-gradient(16% 12% at 68% 18%, rgba(225, 237, 255, 0.2), transparent 74%),
    radial-gradient(20% 14% at 82% 62%, rgba(239, 246, 255, 0.16), transparent 76%);
}

body[data-weather-light="sunny"]:not(.theme-night) .env-day-haze,
body[data-weather-light="sunny"]:not(.theme-night) .environment-layer::after {
  opacity: 0.28;
}

body[data-weather-light="cloudy"]:not(.theme-night) .env-day-haze {
  opacity: 0.16;
  filter: blur(18px) saturate(1.04);
}

body[data-weather-light="cloudy"]:not(.theme-night) .letters-grid,
body[data-weather-light="cloudy"]:not(.theme-night) .tabs,
body[data-weather-light="cloudy"]:not(.theme-night) .music-control {
  box-shadow: 0 10px 22px rgba(110, 117, 133, 0.1);
}

body[data-weather-light="rainy"]:not(.theme-night),
body[data-weather-light="snowy"]:not(.theme-night) {
  filter: saturate(0.95);
}

body[data-weather-light="rainy"]:not(.theme-night) .env-day-haze {
  opacity: 0.12;
  filter: blur(20px) saturate(0.96);
}

body[data-weather-light="snowy"]:not(.theme-night) .env-day-haze {
  opacity: 0.18;
  filter: blur(18px) saturate(0.98) brightness(1.05);
}

body.music-playing:not(.music-muted):not(.theme-night) .tabs,
body.music-playing:not(.music-muted):not(.theme-night) .music-control,
body.music-playing:not(.music-muted):not(.theme-night) .tab-btn.active,
body.music-playing:not(.music-muted):not(.theme-night) .admin-tab-btn.active {
  animation: env-music-pulse 4.2s ease-in-out infinite;
}

body.music-playing:not(.music-muted):not(.theme-night) h1 {
  animation:
    env-day-headline-breathe 7.4s ease-in-out infinite,
    env-headline-pulse 4.2s ease-in-out infinite;
}

body[data-theme-phase="day"] .tabs,
body[data-theme-phase="day"] .music-control,
body[data-theme-phase="day"] .admin-tab-btn {
  border-color: rgba(204, 79, 131, 0.26);
}

body[data-theme-phase="dawn"] .tabs,
body[data-theme-phase="dawn"] .music-control,
body[data-theme-phase="dusk"] .tabs,
body[data-theme-phase="dusk"] .music-control {
  background: rgba(255, 246, 252, 0.6);
  border-color: rgba(193, 137, 164, 0.28);
  box-shadow: 0 10px 24px rgba(171, 118, 132, 0.12);
}

body[data-theme-phase="night"] .tabs,
body[data-theme-phase="night"] .music-control,
body[data-theme-phase="dusk"] .admin-tab-btn,
body[data-theme-phase="dawn"] .admin-tab-btn {
  transition: background 500ms ease, border-color 500ms ease, box-shadow 500ms ease, color 500ms ease;
}

body.theme-night .sub {
  color: #d5c5d5;
}

body.theme-night .tabs,
body.theme-night .music-control,
body.theme-night .admin-trigger {
  background: rgba(38, 31, 54, 0.78);
  border-color: rgba(199, 171, 209, 0.32);
  color: #f7ecf8;
}

body.theme-night .letters-grid {
  background:
    radial-gradient(78% 82% at 50% 18%, rgba(60, 68, 119, 0.18), rgba(39, 30, 62, 0.12)),
    linear-gradient(180deg, rgba(26, 24, 46, 0.38), rgba(22, 18, 36, 0.28));
  border-color: rgba(201, 179, 216, 0.18);
  box-shadow: inset 0 0 0 1px rgba(223, 207, 232, 0.08);
  backdrop-filter: blur(10px);
}

body.theme-night .note-card {
  background: linear-gradient(180deg, rgba(255, 253, 254, 0.99), rgba(253, 242, 248, 0.96));
  border-color: rgba(208, 166, 188, 0.9);
}

body.theme-night .note-card h3 {
  color: #5c1f3b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.theme-night .letter-paper .letter-title {
  color: #4a2738;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52), 0 0 1px rgba(52, 29, 41, 0.28);
}

body.theme-night #openedLetterView {
  opacity: 1;
}

body.theme-night .letter-paper.author-admin1 .letter-title {
  color: #5f1028;
}

body.theme-night .letter-paper.author-admin2 .letter-title {
  color: #6a1e53;
}

body.theme-night .tab-btn,
body.theme-night .translate-dot,
body.theme-night .music-loop-btn,
body.theme-night .admin-tab-btn,
body.theme-night .admin-mini-btn,
body.theme-night .music-select-all,
body.theme-night .music-delete-selected-btn,
body.theme-night .music-play-btn,
body.theme-night .icon-btn,
body.theme-night .admin-gallery-disclosure,
body.theme-night .upload-dropzone,
body.theme-night .composer-panel,
body.theme-night .special-day-banner {
  background: rgba(38, 31, 54, 0.62);
  border-color: rgba(199, 171, 209, 0.24);
  color: #f2e7f3;
  box-shadow: 0 10px 24px rgba(14, 10, 25, 0.16);
  backdrop-filter: blur(10px);
}

body.theme-night .tab-btn:hover,
body.theme-night .translate-dot:hover,
body.theme-night .translate-dot:focus-visible,
body.theme-night .music-loop-btn:hover,
body.theme-night .admin-mini-btn:hover,
body.theme-night .music-select-all:hover,
body.theme-night .music-delete-selected-btn:hover:not(:disabled),
body.theme-night .music-play-btn:hover,
body.theme-night .icon-btn:hover,
body.theme-night .upload-dropzone:hover,
body.theme-night .upload-dropzone:focus-within {
  background: rgba(48, 40, 69, 0.72);
  border-color: rgba(216, 190, 224, 0.34);
}

body.theme-night .tab-btn.active,
body.theme-night .admin-tab-btn.active,
body.theme-night button.action-btn:not(.ghost) {
  background: linear-gradient(135deg, rgba(205, 84, 132, 0.88), rgba(151, 74, 125, 0.82));
  color: #fff7fb;
  box-shadow: 0 12px 24px rgba(120, 38, 80, 0.28);
}

body.theme-night button.action-btn.ghost,
body.theme-night .admin-logout-btn {
  background: rgba(38, 31, 54, 0.58);
  color: #f1e7f2;
  box-shadow: 0 8px 20px rgba(14, 10, 25, 0.14);
}

body.theme-night .admin-logout-btn {
  border-radius: 999px;
  padding: 7px 12px;
  text-decoration: none;
  border: 1px solid rgba(199, 171, 209, 0.24);
}

body.theme-night .admin-logout-btn:hover {
  background: rgba(48, 40, 69, 0.72);
  color: #fff4fb;
  text-decoration: none;
}

body.theme-night .upload-dropzone.is-dragover {
  background: rgba(59, 42, 78, 0.76);
  border-color: rgba(220, 153, 193, 0.42);
  box-shadow: 0 12px 26px rgba(86, 34, 64, 0.24);
}

body.theme-night .upload-dropzone-copy,
body.theme-night .upload-dropzone-title,
body.theme-night .upload-dropzone-hint,
body.theme-night .admin-gallery-summary,
body.theme-night .music-track-row,
body.theme-night .music-track-title,
body.theme-night .admin-section-title {
  color: #efe5f3;
}

.env-stars {
  position: absolute;
  inset: 0;
}

.env-star {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 249, 255, 0.95);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.65);
  opacity: 0;
  animation: env-star-twinkle var(--tw, 4.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transition: opacity 360ms ease;
}

.environment-layer.show-stars .env-star {
  opacity: 1;
}

.env-shooting-field {
  position: absolute;
  inset: -28vmax;
  transform: rotateZ(45deg);
  opacity: 0;
  transition: opacity 360ms ease;
}

.environment-layer.show-stars .env-shooting-field {
  opacity: 1;
}

.env-shooting-star {
  position: absolute;
  height: 2px;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(-45deg, rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
  filter: drop-shadow(0 0 6px rgba(105, 155, 255, 1));
  opacity: 1;
  will-change: width, transform;
  animation:
    env-shooting-tail var(--star-dur, 3000ms) ease-in-out infinite,
    env-shooting-flight var(--star-dur, 3000ms) ease-in-out infinite;
  animation-delay: var(--star-delay, 0ms), var(--star-delay, 0ms);
}

.env-shooting-star::before,
.env-shooting-star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), rgba(95, 145, 255, 1), rgba(0, 0, 255, 0));
  border-radius: 100%;
  animation: env-shooting-shining var(--star-dur, 3000ms) ease-in-out infinite;
  animation-delay: var(--star-delay, 0ms);
}

.env-shooting-star::before {
  transform: translateX(50%) rotateZ(45deg);
}

.env-shooting-star::after {
  transform: translateX(50%) rotateZ(-45deg);
}

@keyframes env-star-twinkle {
  0%, 100% { opacity: 0.28; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes env-day-heat-haze {
  0% {
    transform: translate3d(-1.8%, -1%, 0) scale(1);
    opacity: 0.16;
  }
  50% {
    transform: translate3d(1.8%, 0.9%, 0) scale(1.05);
    opacity: 0.26;
  }
  100% {
    transform: translate3d(-0.9%, 1.6%, 0) scale(1.03);
    opacity: 0.18;
  }
}

@keyframes env-day-background-shift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%;
    filter: saturate(1) brightness(1);
  }
  50% {
    background-position: 4% 3%, 96% 2%, 50% 98%, 0% 0%;
    filter: saturate(1.05) brightness(1.02);
  }
  100% {
    background-position: -3% 4%, 104% -2%, 47% 103%, 0% 0%;
    filter: saturate(1.01) brightness(1);
  }
}

@keyframes env-day-light-spots {
  0% {
    transform: translate3d(-2%, 0%, 0) scale(1);
    opacity: 0.48;
  }
  50% {
    transform: translate3d(3.2%, 2.2%, 0) scale(1.06);
    opacity: 0.68;
  }
  100% {
    transform: translate3d(6.6%, -1.6%, 0) scale(1.1);
    opacity: 0.52;
  }
}

@keyframes env-day-lens-flare {
  0%, 76% {
    transform: translate3d(0, 0, 0) scale(0.9);
    opacity: 0;
  }
  80% {
    opacity: 0.38;
  }
  88% {
    transform: translate3d(-3vw, 1vh, 0) scale(1.12);
    opacity: 0.68;
  }
  100% {
    transform: translate3d(-6vw, 2vh, 0) scale(1.22);
    opacity: 0;
  }
}

@keyframes env-day-button-gloss {
  0%, 60% {
    left: -44%;
    opacity: 0;
  }
  68% {
    opacity: 1;
  }
  84% {
    left: 118%;
    opacity: 1;
  }
  100% {
    left: 118%;
    opacity: 0;
  }
}

@keyframes env-day-board-glint {
  0%, 54% {
    left: -28%;
    opacity: 0;
  }
  62% {
    opacity: 0.86;
  }
  82% {
    left: 116%;
    opacity: 1;
  }
  100% {
    left: 116%;
    opacity: 0;
  }
}

@keyframes env-day-board-shadow {
  0%, 22% {
    opacity: 0;
    transform: translate3d(-12%, -4%, 0);
  }
  32% {
    opacity: 0.34;
  }
  56% {
    opacity: 0.24;
    transform: translate3d(10%, 2.4%, 0);
  }
  74%,
  100% {
    opacity: 0;
    transform: translate3d(14%, 4%, 0);
  }
}

@keyframes env-day-photo-glint {
  0%, 66%, 100% {
    filter: saturate(0.92) brightness(1);
    box-shadow: 0 8px 20px rgba(22, 10, 17, 0.22);
  }
  74% {
    filter: saturate(1) brightness(1.08);
    box-shadow: 0 8px 20px rgba(22, 10, 17, 0.22), 0 0 22px rgba(255, 244, 220, 0.22);
  }
  80% {
    filter: saturate(1.06) brightness(1.18);
    box-shadow: 0 8px 20px rgba(22, 10, 17, 0.22), 0 0 34px rgba(255, 247, 228, 0.32);
  }
  88% {
    filter: saturate(0.98) brightness(1.06);
    box-shadow: 0 8px 20px rgba(22, 10, 17, 0.22), 0 0 16px rgba(255, 244, 220, 0.14);
  }
}

@keyframes env-day-headline-breathe {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    transform: scale(1.018);
    text-shadow: 0 0 24px rgba(255, 247, 241, 0.22);
  }
}

@keyframes env-board-parallax {
  0% {
    background-position: 50% 18%, 50% 50%;
  }
  100% {
    background-position: 52% 23%, 48% 50%;
  }
}

@keyframes env-music-pulse {
  0%, 100% {
    box-shadow: 0 10px 24px rgba(255, 219, 196, 0.12);
  }
  50% {
    box-shadow: 0 12px 28px rgba(255, 214, 191, 0.22), 0 0 22px rgba(255, 231, 212, 0.16);
  }
}

@keyframes env-headline-pulse {
  0%, 100% {
    text-shadow: 0 0 0 rgba(255, 240, 228, 0);
  }
  50% {
    text-shadow: 0 0 28px rgba(255, 237, 220, 0.28);
  }
}

@keyframes env-shooting-tail {
  0% {
    width: 0;
    opacity: 0;
  }
  30% {
    width: var(--trail-max, 190px);
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

@keyframes env-shooting-shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}

@keyframes env-shooting-flight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--flight-distance, 380px));
  }
}

@media (max-width: 768px) {
  .env-shooting-field {
    inset: -36vmax;
  }

  .env-day-haze {
    opacity: 0.17;
    filter: blur(13px) saturate(1.08);
  }

  .environment-layer::before {
    filter: blur(12px);
    animation-duration: 26s;
  }

  .environment-layer::after {
    width: min(34vw, 180px);
    height: min(34vw, 180px);
    animation-duration: 20s;
  }

  body:not(.theme-night) .tab-btn.active::after,
  body:not(.theme-night) .admin-tab-btn.active::after,
  body:not(.theme-night) button.action-btn:not(.ghost)::after {
    width: 44%;
    animation-duration: 8.2s;
  }

  body:not(.theme-night) .letters-grid::after {
    width: 24%;
    opacity: 0.8;
    animation-duration: 10.8s;
  }

  body:not(.theme-night) .letters-grid::before {
    opacity: 0.82;
    animation-duration: 16s;
  }

  body:not(.theme-night) h1 {
    animation-duration: 8.6s;
  }

  body:not(.theme-night) .drift-photo {
    animation-duration: var(--pd, 14s), 15s;
  }

  body:not(.theme-night) .note-card:not(:hover):not(.dragging)::after {
    opacity: 0.56;
  }

  body.music-playing:not(.music-muted):not(.theme-night) .tabs,
  body.music-playing:not(.music-muted):not(.theme-night) .music-control,
  body.music-playing:not(.music-muted):not(.theme-night) .tab-btn.active,
  body.music-playing:not(.music-muted):not(.theme-night) .admin-tab-btn.active {
    animation-duration: 5.2s;
  }

  body.music-playing:not(.music-muted):not(.theme-night) h1 {
    animation:
      env-day-headline-breathe 8.6s ease-in-out infinite,
      env-headline-pulse 5.2s ease-in-out infinite;
  }

  body[data-weather-light="sunny"]:not(.theme-night) .env-day-haze,
  body[data-weather-light="sunny"]:not(.theme-night) .environment-layer::after {
    opacity: 0.22;
  }

  body.theme-twilight .environment-layer.show-stars .env-shooting-field {
    opacity: 0.24;
  }

  body.theme-night .letters-grid {
    background:
      radial-gradient(86% 90% at 50% 18%, rgba(60, 68, 119, 0.14), rgba(39, 30, 62, 0.08)),
      linear-gradient(180deg, rgba(23, 22, 42, 0.22), rgba(19, 16, 33, 0.14));
    border-color: rgba(201, 179, 216, 0.12);
    box-shadow: inset 0 0 0 1px rgba(223, 207, 232, 0.06);
  }

  body.theme-night .tabs,
  body.theme-night .music-control,
  body.theme-night .admin-trigger,
  body.theme-night .tab-btn,
  body.theme-night .music-loop-btn,
  body.theme-night .translate-dot,
  body.theme-night .admin-tab-btn,
  body.theme-night .admin-mini-btn,
  body.theme-night .music-select-all,
  body.theme-night .music-delete-selected-btn,
  body.theme-night .music-play-btn,
  body.theme-night .icon-btn,
  body.theme-night .upload-dropzone,
  body.theme-night .composer-panel,
  body.theme-night .admin-gallery-disclosure,
  body.theme-night .special-day-banner,
  body.theme-night button.action-btn.ghost,
  body.theme-night .admin-logout-btn {
    background: rgba(28, 24, 45, 0.5);
    border-color: rgba(199, 171, 209, 0.18);
    box-shadow: 0 8px 18px rgba(10, 8, 19, 0.12);
  }

  body.theme-night .tab-btn.active,
  body.theme-night .admin-tab-btn.active,
  body.theme-night button.action-btn:not(.ghost) {
    background: linear-gradient(135deg, rgba(205, 84, 132, 0.82), rgba(151, 74, 125, 0.74));
  }
}