.autumn-leaves-layer {
  position: fixed;
  inset: var(--header-height, 96px) 0 0;
  z-index: 24;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint style;
}
.autumn-leaf {
  position: absolute;
  top: -65px;
  left: var(--leaf-left);
  width: var(--leaf-size);
  height: calc(var(--leaf-size) * 1.35);
  opacity: 0;
  pointer-events: none;
  animation: autumn-fall var(--leaf-duration) linear var(--leaf-delay) infinite;
  will-change: transform;
}
.autumn-leaf-sway,
.autumn-leaf-turn {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.autumn-leaf-sway {
  animation: autumn-sway var(--leaf-sway-time) ease-in-out var(--leaf-sway-delay) infinite alternate;
}
.autumn-leaf-turn {
  transform-origin: 50% 55%;
  animation: autumn-turn var(--leaf-turn-time) ease-in-out var(--leaf-delay) infinite;
}
.autumn-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(1px 2px 1.6px #41280b20);
}
.autumn-leaf.is-distant svg { filter: blur(.5px); }
.autumn-leaves-layer.is-paused .autumn-leaf,
.autumn-leaves-layer.is-paused .autumn-leaf-sway,
.autumn-leaves-layer.is-paused .autumn-leaf-turn {
  animation-play-state: paused;
}
.autumn-toggle {
  position: fixed;
  left: 17px;
  bottom: calc(17px + env(safe-area-inset-bottom, 0px));
  z-index: 32;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid #c4c8b5;
  border-radius: 4px;
  background: #fcf8eced;
  color: #395237;
  box-shadow: 0 3px 12px #18382d10;
  font-family: var(--sans);
  font-size:14px;
  line-height: 1.3;
}
.autumn-toggle:hover { background: #fffdf5; border-color: #8e9f80; }
.autumn-toggle > svg { width: 15px; height: 17px; }
.autumn-toggle .autumn-status { width: 9px; height: 9px; fill: currentColor; margin-left: 3px; }
.autumn-toggle .autumn-play { display: none; }
.autumn-toggle[aria-pressed="false"] .autumn-play { display: block; }
.autumn-toggle[aria-pressed="false"] .autumn-pause { display: none; }
@keyframes autumn-fall {
  0% { transform: translate3d(0, -40px, 0); opacity: 0; }
  8% { opacity: var(--leaf-opacity); }
  88% { opacity: var(--leaf-opacity); }
  100% { transform: translate3d(var(--leaf-drift), calc(100vh + 150px), 0); opacity: 0; }
}
@keyframes autumn-sway {
  from { transform: translate3d(calc(var(--leaf-sway) * -1), 0, 0); }
  to { transform: translate3d(var(--leaf-sway), 10px, 0); }
}
@keyframes autumn-turn {
  0% { transform: perspective(180px) rotateZ(var(--leaf-angle)) rotateY(0deg) rotateX(12deg); }
  35% { transform: perspective(180px) rotateZ(calc(var(--leaf-angle) + 95deg)) rotateY(135deg) rotateX(-14deg); }
  70% { transform: perspective(180px) rotateZ(calc(var(--leaf-angle) + 205deg)) rotateY(255deg) rotateX(18deg); }
  100% { transform: perspective(180px) rotateZ(calc(var(--leaf-angle) + 360deg)) rotateY(360deg) rotateX(12deg); }
}
@media(max-width:700px) {
  .autumn-toggle { left: 11px; bottom: calc(11px + env(safe-area-inset-bottom, 0px)); min-height: 30px; padding: 7px 9px; font-size:14px; gap: 6px; }
  .autumn-toggle > svg { width: 13px; height: 14px; }
}
@media(prefers-reduced-motion:reduce) {
  .autumn-leaves-layer,
  .autumn-toggle { display: none !important; }
  .autumn-leaf,
  .autumn-leaf-sway,
  .autumn-leaf-turn { animation: none !important; }
}