/* Small seasonal variations only. Photos, text ink and action colours stay intact. */
:root[data-diary-season="autumn"] {
  --paper: #f8f1ea;
  --line: #e5d6cc;
  --season-accent: #aa7756;
  --season-tint: #f1e6d8;
}
:root[data-diary-season="winter"] {
  --paper: #f7f3f0;
  --line: #e1d9d8;
  --season-accent: #839496;
  --season-tint: #e9eded;
}
:root[data-diary-season="spring"] {
  --paper: #f9f2ef;
  --line: #e7d7d8;
  --season-accent: #b17d89;
  --season-tint: #f1e0e4;
}
:root[data-diary-season="summer"] {
  --paper: #f8f4eb;
  --line: #e1dccc;
  --season-accent: #839071;
  --season-tint: #ececde;
}
:root[data-diary-season="none"] {
  --season-accent: #9e8388;
  --season-tint: #eee3e4;
}
[data-atmosphere-slot] {
  min-width: 0;
}
.diary-margin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  position: relative;
  min-height: 76px;
  margin: -12px 0 18px;
  isolation: isolate;
}
.diary-margin::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 48px;
  left: 0;
  right: 0;
  border-bottom: 1px solid var(--line);
}
.atmo-season-button {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  max-width: calc(100% - 142px);
  padding: 0 10px 0 0;
  margin-top: 12px;
  background: var(--paper);
  text-align: left;
  color: #82716f;
}
.atmo-season-button svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}
.atmo-season-name {
  font: italic 15px/1.25 var(--serif);
}
.atmo-season-button:hover .atmo-season-name {
  color: var(--berry);
}
.atmo-scene {
  width: 158px;
  flex: 0 0 158px;
}
.atmo-touch {
  display: block;
  position: relative;
  width: 100%;
  min-height: 76px;
  padding: 0;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}
.atmo-stage {
  position: absolute;
  width: 142px;
  height: 76px;
  bottom: 10px;
  right: 0;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  pointer-events: none;
}
.atmo-ground {
  position: absolute;
  bottom: 17px;
  left: 4px;
  right: 0;
  border-bottom: 1px solid var(--line);
  z-index: 0;
}
.atmo-pile {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.atmo-particle {
  position: absolute;
  bottom: calc(14px + var(--y));
  left: var(--x);
  width: 32px;
  height: 32px;
  transform: rotate(var(--turn));
  transform-origin: center;
}
.atmo-snow {
  width: 44px;
  height: 29px;
}
.atmo-particle svg {
  width: 100%;
  height: 100%;
}
.atmo-sprig {
  position: absolute;
  width: 61px;
  height: 55px;
  right: 20px;
  bottom: 13px;
  transform: rotate(-10deg);
}
.atmo-touch-hint {
  position: absolute;
  right: 13px;
  bottom: -1px;
  font: italic 11px/1.2 var(--serif);
  color: #8a7775;
}
.atmo-actor {
  position: absolute;
  bottom: 12px;
  right: 27px;
  width: 68px;
  height: 68px;
  transform-origin: 50% 90%;
  animation: atmo-peek var(--visit-duration) both;
  z-index: 1;
  pointer-events: none;
}
.atmo-actor::after {
  content: "";
  display: block;
  position: absolute;
  height: 13px;
  left: -15px;
  right: -15px;
  bottom: -1px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}
.atmo-actor svg {
  width: 100%;
  height: 100%;
}
.atmo-actor .atmo-happy-eyes {
  opacity: 0;
  animation: atmo-smile-eyes var(--visit-duration) both;
}
.atmo-actor .atmo-eyes {
  animation: atmo-open-eyes var(--visit-duration) both;
}
.atmo-paw {
  transform-origin: 74px 82px;
  animation: atmo-wave var(--visit-duration) both;
}
.atmo-frog {
  animation-name: atmo-hop;
}
.atmo-frog .atmo-eyes {
  animation: none;
}
.atmo-bird {
  animation-name: atmo-fly;
  width: 66px;
  height: 66px;
}
.atmo-bird .atmo-wing {
  transform-origin: 39px 44px;
  animation: atmo-wing var(--visit-duration) both;
}
.atmo-candy,.atmo-croissant,.atmo-cake {
  animation-name: atmo-treat;
  width: 59px;
  height: 59px;
}
.atmo-static,.atmo-static * {
  animation: none !important;
}
.atmo-static {
  transform: translateY(0);
  opacity: 1;
}
.atmo-static .atmo-happy-eyes {
  opacity: 1;
}
.atmo-static .atmo-eyes {
  opacity: 0;
}
.atmo-static.atmo-frog .atmo-eyes,.atmo-static.atmo-bird .atmo-eyes {
  opacity: 1;
}
.atmo-scatter {
  animation: atmo-sweep 500ms var(--delay,0ms) ease-out both;
}
.atmo-settling {
  animation: atmo-settle 1300ms cubic-bezier(.24,.6,.25,1) both;
}
.atmo-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 23px;
  min-width: 0;
}
.atmo-fieldset legend {
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  margin-bottom: 10px;
}
.atmo-mode-options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
}
.atmo-mode-options label {
  position: relative;
  display: block;
  cursor: pointer;
}
.atmo-mode-options input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.atmo-mode-options span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 12px;
}
.atmo-mode-options input:checked+span {
  background: var(--rose);
  border-color: #c493a2;
  color: #6f3045;
}
.atmo-mode-options input:focus-visible+span {
  outline: 3px solid #9b576c;
  outline-offset: 3px;
}
.atmo-preferences .form-help {
  margin-top: 9px;
}
.atmo-auto-details {
  margin-top: 12px;
}
.atmo-auto-details summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #786466;
}
.atmo-auto-details .input {
  margin: 8px 0;
}
.atmo-preview-card {
  position: relative;
  padding: 19px 18px 14px;
  background: var(--season-tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 20px 0 12px;
}
.atmo-preview-card h3 {
  margin: 0 !important;
  font: italic 24px/1.2 var(--serif) !important;
}
.atmo-preview-label {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7e6a6c;
}
.atmo-preview-stage {
  width: 100%;
  height: 118px;
  margin-top: 0;
}
.atmo-preview-stage .atmo-touch {
  height: 115px;
  max-width: 260px;
  margin: auto;
}
.atmo-preview-stage .atmo-stage {
  right: calc(50% - 87px);
  width: 174px;
  height: 101px;
  bottom: 10px;
}
.atmo-preview-stage .atmo-actor {
  width: 87px;
  height: 87px;
  right: 43px;
}
.atmo-preview-stage .atmo-touch-hint {
  right: 0;
  left: 0;
  text-align: center;
  bottom: -1px;
}
.atmo-preview-stage .atmo-particle {
  left: calc(var(--x) + 12px);
}
.atmo-preview-stage .atmo-sprig {
  right: 44px;
}
.atmo-guests {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  margin: 12px 0;
}
.atmo-guests button {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 70px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 4px 2px;
  font-size: 10px;
  color: #7f666a;
}
.atmo-guests button svg {
  width: 38px;
  height: 38px;
}
.atmo-guests button[aria-pressed="true"] {
  background: #fff8f0;
  border-color: #d9b3be;
}
.atmo-guests button:hover {
  background: #fff8f0;
}
.atmo-preview-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.atmo-preview-actions button {
  min-height: 44px;
  font-size: 12px;
  color: var(--berry);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.atmo-preview-description {
  min-height: 22px;
  font: italic 13px/1.5 var(--serif);
  color: #7c676c;
  margin: 0 0 6px !important;
}
.atmo-state-note {
  padding: 9px 12px;
  background: var(--white);
  border-radius: 8px;
  font-size: 12px;
  margin: 12px 0;
}
.atmo-link-settings {
  min-height: 44px;
  margin-top: 8px;
}
@keyframes atmo-peek {
  0%,100% {
    transform: translateY(75px) rotate(-7deg);
    opacity: 0;
  }
  18% {
    transform: translateY(2px) rotate(3deg);
    opacity: 1;
  }
  28%,72% {
    transform: translateY(0) rotate(0);
    opacity: 1;
  }
  85% {
    transform: translateY(4px) rotate(-4deg);
    opacity: 1;
  }
}
@keyframes atmo-hop {
  0%,100% {
    transform: translateY(77px) scale(.95);
    opacity: 0;
  }
  16% {
    transform: translateY(-8px) scale(1);
    opacity: 1;
  }
  28%,74% {
    transform: translateY(0);
    opacity: 1;
  }
  85% {
    transform: translateY(-5px);
    opacity: 1;
  }
}
@keyframes atmo-fly {
  0% {
    transform: translate(88px,-38px) rotate(-14deg);
    opacity: 0;
  }
  25% {
    transform: translate(0,2px) rotate(5deg);
    opacity: 1;
  }
  33%,68% {
    transform: translate(0,0);
    opacity: 1;
  }
  100% {
    transform: translate(-97px,-51px) rotate(-15deg);
    opacity: 0;
  }
}
@keyframes atmo-treat {
  0%,100% {
    transform: translateY(65px) rotate(-15deg);
    opacity: 0;
  }
  24% {
    transform: translateY(0) rotate(5deg);
    opacity: 1;
  }
  37%,70% {
    transform: translateY(0) rotate(-3deg);
    opacity: 1;
  }
}
@keyframes atmo-smile-eyes {
  0%,25%,87%,100% {
    opacity: 0;
  }
  32%,79% {
    opacity: 1;
  }
}
@keyframes atmo-open-eyes {
  0%,25%,87%,100% {
    opacity: 1;
  }
  32%,79% {
    opacity: 0;
  }
}
@keyframes atmo-wave {
  0%,25%,75%,100% {
    transform: rotate(0);
  }
  38%,60% {
    transform: rotate(-13deg);
  }
  48%,69% {
    transform: rotate(5deg);
  }
}
@keyframes atmo-wing {
  0%,12%,82%,94% {
    transform: rotate(-30deg);
  }
  7%,18%,88%,100% {
    transform: rotate(10deg);
  }
  28%,72% {
    transform: rotate(0);
  }
}
@keyframes atmo-sweep {
  from {
    transform: translate(0,0) rotate(var(--turn));
    opacity: 1;
  }
  to {
    transform: translate(var(--scatter),-24px) rotate(var(--spin));
    opacity: 0;
  }
}
@keyframes atmo-settle {
  0% {
    transform: translate(18px,-45px) rotate(-40deg);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  65% {
    transform: translate(-5px,-14px) rotate(10deg);
  }
  100% {
    transform: translate(0,0) rotate(var(--turn));
    opacity: 1;
  }
}
/* No animated movement in reduced motion, including deliberate previews. */
@media (prefers-reduced-motion:reduce) {
  .atmo-actor,.atmo-actor *,.atmo-particle {
    animation: none !important;
  }
}
.reduce-motion .atmo-actor,.reduce-motion .atmo-actor *,.reduce-motion .atmo-particle {
  animation: none !important;
}
@media (max-width:720px) {
  .diary-margin {
    margin-top: -12px;
    margin-bottom: 12px;
  }
  .atmo-season-name {
    font-size: 13px;
  }
  .atmo-season-button {
    padding-right: 4px;
  }
}
@media (max-width:350px) {
  .atmo-scene {
    width: 137px;
    flex-basis: 137px;
  }
  .atmo-season-button {
    max-width: calc(100% - 147px);
  }
  .atmo-guests {
    gap: 3px;
  }
  .atmo-mode-options span {
    font-size: 11px;
  }
}