:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cream: #fff8e8;
  --ink: #183333;
  --sage: #89a99a;
  --amber: #f1b75b;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

button { font: inherit; }

.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 28px 18px 58px;
  background: #234340 url("assets/yosemite-valley-photo.jpg") center / cover no-repeat;
}

.scene::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, transparent 0 20%, rgba(6, 19, 22, .12) 60%),
    linear-gradient(180deg, rgba(13, 34, 39, .06), rgba(7, 26, 27, .34));
}

.atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.08), transparent 42%, rgba(255,193,106,.08));
  animation: breathe 12s ease-in-out infinite alternate;
}

.clouds { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.clouds i {
  position: absolute;
  display: block;
  width: 34vw;
  min-width: 320px;
  aspect-ratio: 2.9;
  border-radius: 50%;
  opacity: .48;
  filter: blur(16px);
  mix-blend-mode: screen;
  will-change: translate;
  background:
    radial-gradient(ellipse at 28% 60%, rgba(255,255,255,.92) 0 23%, transparent 25%),
    radial-gradient(ellipse at 52% 44%, rgba(255,255,255,.88) 0 29%, transparent 31%),
    radial-gradient(ellipse at 74% 62%, rgba(255,255,255,.82) 0 23%, transparent 25%);
  animation: drift 74s linear infinite;
}

.clouds-far i:nth-child(1) { top: 7%; left: -38vw; animation-delay: -9s; }
.clouds-far i:nth-child(2) { top: 19%; left: -42vw; transform: scale(.75); animation-delay: -31s; }
.clouds-far i:nth-child(3) { top: 41%; left: -40vw; transform: scale(1.25); animation-delay: -48s; opacity: .28; }
.clouds-far i:nth-child(4) { top: 28%; left: -35vw; transform: scale(.62); animation-delay: -19s; }
.clouds-near i { width: 48vw; opacity: .24; filter: blur(28px); animation-duration: 106s; }
.clouds-near i:nth-child(1) { top: 56%; left: -54vw; animation-delay: -12s; }
.clouds-near i:nth-child(2) { top: 69%; left: -52vw; transform: scale(.72); animation-delay: -53s; }
.clouds-near i:nth-child(3) { top: 34%; left: -50vw; transform: scale(.82); animation-delay: -72s; }

.waterfall {
  position: absolute;
  z-index: -1;
  top: 45%;
  left: 67.5%;
  width: 26px;
  height: 24vh;
  min-height: 145px;
  max-height: 270px;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(211, 240, 244, .42));
  opacity: .74;
}

.waterfall-stream {
  position: absolute;
  top: 0;
  left: 8px;
  width: 8px;
  height: 88%;
  border-radius: 50% 50% 45% 55%;
  background:
    linear-gradient(90deg, transparent, rgba(235,250,250,.92) 38%, rgba(170,220,226,.7) 62%, transparent),
    repeating-linear-gradient(180deg, rgba(255,255,255,.8) 0 8px, rgba(201,235,238,.22) 11px 18px);
  background-size: 100% 100%, 100% 36px;
  animation: water-flow 1.9s linear infinite, water-breathe 5s ease-in-out infinite alternate;
  transform: perspective(120px) rotateX(4deg);
}

.waterfall-stream::before,
.waterfall-stream::after {
  content: "";
  position: absolute;
  inset: 8% auto 0;
  width: 3px;
  border-radius: 50%;
  background: rgba(236, 251, 251, .46);
  animation: water-flow 1.35s linear infinite reverse;
}
.waterfall-stream::before { left: -3px; height: 80%; }
.waterfall-stream::after { right: -3px; top: 18%; height: 68%; }

.waterfall-mist {
  position: absolute;
  left: -25px;
  bottom: 0;
  width: 68px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(231,247,247,.68), rgba(220,242,242,.18) 52%, transparent 73%);
  filter: blur(7px);
  animation: mist-drift 8s ease-in-out infinite alternate;
}

.calculator {
  width: min(390px, 92vw);
  padding: 22px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 32px;
  color: var(--cream);
  background: linear-gradient(145deg, rgba(26, 59, 54, .66), rgba(13, 40, 40, .56));
  box-shadow: 0 22px 65px rgba(2, 13, 14, .28), inset 0 1px rgba(255,255,255,.13);
  backdrop-filter: blur(13px) saturate(108%);
  -webkit-backdrop-filter: blur(13px) saturate(108%);
  transition: background .8s ease, box-shadow .8s ease, border-color .8s ease;
}

.calculator:hover,
.calculator:focus-within {
  border-color: rgba(255,255,255,.38);
  background: linear-gradient(145deg, rgba(22, 56, 54, .8), rgba(16, 42, 43, .7));
  box-shadow: 0 28px 76px rgba(2, 13, 14, .38), inset 0 1px rgba(255,255,255,.17);
}

.calculator-header { display: flex; align-items: center; justify-content: space-between; margin: 1px 5px 16px; }
.eyebrow { margin: 0 0 3px; color: #c9ddcf; font-size: .67rem; font-weight: 750; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.42rem; font-weight: 500; letter-spacing: -.02em; }
.sun { width: 27px; height: 27px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 24px rgba(241,183,91,.48); }

.display {
  min-height: 104px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 14px 14px 12px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 19px;
  background: rgba(4, 22, 23, .27);
}

.expression { min-height: 21px; color: #aac4b8; font-size: .83rem; letter-spacing: .04em; }
output { display: block; width: 100%; overflow: hidden; color: #fffdf3; font-size: clamp(2.3rem, 11vw, 3.25rem); font-weight: 300; line-height: 1.05; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.key {
  min-height: 58px;
  border: 0;
  border-radius: 17px;
  color: #f6f5e9;
  background: rgba(218, 235, 224, .11);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 6px 12px rgba(0,0,0,.08);
  cursor: pointer;
  font-size: 1.14rem;
  font-weight: 620;
  transition: transform .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.key:hover { background: rgba(232,244,235,.22); }
.key:active, .key.pressed { transform: translateY(2px) scale(.97); }
.key:focus-visible, .fullscreen:focus-visible { outline: 3px solid #ffe19f; outline-offset: 2px; }
.key-soft { color: #173b39; background: rgba(207, 222, 208, .72); }
.key-soft:hover { background: rgba(231, 238, 226, .94); }
.key-operator { color: #203d39; background: rgba(226,185,111,.78); }
.key-operator:hover { background: #efca86; }
.key-equals { color: #173733; background: rgba(168,200,174,.8); }
.key-equals:hover { background: #bcdbbf; }
.key-zero { grid-column: span 2; }

.fullscreen {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: white;
  background: rgba(12,39,41,.42);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.about-panel {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 142px;
  color: #fff8e8;
}
.about-panel details { position: relative; }
.about-panel summary {
  display: block;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(12,39,41,.42);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font-size: .82rem;
  list-style: none;
}
.about-panel summary::-webkit-details-marker { display: none; }
.about-panel summary:hover { background: rgba(12,39,41,.62); }
.about-panel summary:focus-visible { outline: 3px solid #ffe19f; outline-offset: 2px; }
.about-content {
  position: absolute;
  top: 48px;
  right: 0;
  width: min(540px, calc(100vw - 36px));
  max-height: calc(100svh - 90px);
  overflow: auto;
  padding: 25px 27px 27px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 24px;
  background: rgba(10,34,35,.94);
  box-shadow: 0 24px 70px rgba(2,13,14,.42);
  backdrop-filter: blur(18px);
  line-height: 1.62;
  scrollbar-color: #9eb8aa transparent;
}
.about-content h2,
.about-content h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.about-content h2 { margin: 4px 0 13px; font-size: 1.55rem; line-height: 1.18; }
.about-content h3 { margin: 22px 0 5px; color: #e7d3a5; font-size: 1.04rem; }
.about-content p { margin: 0; color: #dae7df; font-size: .9rem; }
.about-content .about-kicker { color: #b9cec2; font-size: .67rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.about-content .about-note { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); color: #afc4b9; font-size: .76rem; }
.about-content kbd { padding: 1px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; background: rgba(255,255,255,.1); font-family: inherit; }
.quiet-note { position: absolute; bottom: 18px; margin: 0; color: rgba(255,255,255,.72); font-family: Georgia, serif; font-size: .88rem; font-style: italic; letter-spacing: .05em; text-shadow: 0 2px 12px #082323; }
.photo-credit { position: absolute; right: 14px; bottom: 12px; color: rgba(255,255,255,.62); font-size: .62rem; letter-spacing: .02em; text-decoration: none; text-shadow: 0 1px 8px #082323; }
.photo-credit:hover { color: white; text-decoration: underline; }

@keyframes drift { from { translate: 0 0; } to { translate: 155vw 0; } }
@keyframes breathe { from { opacity: .72; } to { opacity: 1; } }
@keyframes water-flow { from { background-position: 0 0, 0 0; } to { background-position: 0 0, 0 36px; } }
@keyframes water-breathe { from { opacity: .62; transform: scaleX(.86); } to { opacity: .95; transform: scaleX(1.12); } }
@keyframes mist-drift { from { translate: -7px 0; opacity: .44; } to { translate: 9px -3px; opacity: .76; } }

@media (max-height: 720px) {
  .scene { padding-block: 15px 36px; }
  .calculator { padding: 16px; border-radius: 25px; }
  .calculator-header { margin-bottom: 10px; }
  .display { min-height: 78px; margin-bottom: 10px; }
  .keypad { gap: 7px; }
  .key { min-height: 47px; border-radius: 14px; }
  .quiet-note { bottom: 9px; }
}

@media (max-width: 520px) {
  .fullscreen-label { display: none; }
  .fullscreen { padding: 9px 12px; }
  .about-panel { top: 12px; right: 58px; }
  .about-panel summary { padding: 9px 11px; }
  .about-content { position: fixed; top: 58px; right: 9px; width: calc(100vw - 18px); max-height: calc(100svh - 68px); padding: 21px 20px 24px; border-radius: 20px; }
  .photo-credit { right: 8px; bottom: 6px; font-size: .54rem; }
  .waterfall { left: 75%; top: 47%; transform: scale(.72); transform-origin: top center; }
}

@media (prefers-reduced-motion: reduce) {
  .clouds i, .atmosphere, .waterfall-stream, .waterfall-stream::before, .waterfall-stream::after, .waterfall-mist { animation-play-state: paused; }
}

/* The landscape changes; the calculator remains steady and readable. */
.season-landscapes { position:absolute; inset:0; z-index:-4; pointer-events:none; background:#234340; }
.landscape { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s linear; }
.landscape:first-child { opacity:1; }
.scene { background:#234340; --winter:0; }
.scene::before { z-index:-2; }
.season-light { position:absolute; inset:0; z-index:-3; pointer-events:none; background:rgba(255,213,139,.05); transition:background 2s linear; }
.clouds { z-index:-1; overflow:hidden; }
.clouds i { opacity:.58; filter:blur(22px); width:44vw; min-width:360px; animation-duration:210s; }
.clouds-far i:nth-child(1) { top:0%; animation-delay:-48s; }
.clouds-far i:nth-child(2) { top:9%; animation-delay:-136s; }
.clouds-far i:nth-child(3) { top:17%; animation-delay:-182s; opacity:.32; }
.clouds-far i:nth-child(4) { top:2%; animation-delay:-98s; }
.clouds-near i { width:65vw; opacity:.18; animation-duration:310s; filter:blur(38px); }
.clouds-near i:nth-child(1) { top:30%; animation-delay:-85s; }
.clouds-near i:nth-child(2) { top:47%; animation-delay:-214s; }
.clouds-near i:nth-child(3) { top:20%; animation-delay:-272s; }
.snowfall { position:absolute; inset:0; z-index:-1; opacity:var(--winter); pointer-events:none; transition:opacity 2s; overflow:hidden; }
.snowfall i { position:absolute; inset:-100px 0; background-image:radial-gradient(circle, #fff9 1px, transparent 2px),radial-gradient(circle, #fff7 1.5px, transparent 2.5px); background-size:137px 181px,223px 271px; animation:snow-fall 32s linear infinite; }
.snowfall i:nth-child(2) { opacity:.4; background-size:193px 233px,311px 347px; animation-duration:48s; animation-delay:-15s; }
.snowfall i:nth-child(3) { opacity:.3; background-size:251px 291px,383px 421px; animation-duration:60s; animation-delay:-30s; }
@keyframes snow-fall { from { transform:translate3d(-20px,-85px,0); } to { transform:translate3d(35px,96px,0); } }
.season-panel { position:absolute; top:18px; left:18px; z-index:3; color:#fff8e8; font-size:12px; width:min(292px,calc(100vw - 90px)); }
.season-panel details { border:1px solid #ffffff40; border-radius:19px; background:#0e282bd9; backdrop-filter:blur(16px); box-shadow:0 8px 32px #03191622; }
.season-panel summary { display:flex; align-items:center; gap:9px; cursor:pointer; padding:12px 14px; list-style:none; }
.season-panel summary::-webkit-details-marker { display:none; }
.season-panel summary::after { content:'⌄'; margin-left:auto; color:#dfeddf; }
.season-dot { width:7px; height:7px; border-radius:50%; background:#d8dfac; box-shadow:0 0 12px #d8dfac66; }
#season-name { font-weight:600; }
.season-caption { font-size:10px; color:#c5d4cb; }
.season-settings { padding:0 15px 16px; display:grid; gap:10px; }
.season-settings p { margin:2px 0 6px; color:#dae0d4; font:italic 16px Georgia,serif; }
.season-settings label { color:#c8d8cf; font-size:11px; }
.season-settings select { width:100%; background:#173a39; color:#fff8e8; padding:9px; border:1px solid #ffffff35; border-radius:9px; font:inherit; }
.scene-actions { display:flex; gap:7px; margin-top:3px; }
.scene-actions button { flex:1; background:#e5e7d8; color:#183333; border:0; border-radius:9px; padding:10px 6px; font-size:11px; cursor:pointer; }
.season-settings small { color:#b3c6bc; line-height:1.5; font-size:10px; }
.season-panel :focus-visible { outline:2px solid #ffe19f; outline-offset:3px; }
.scene.motion-paused *, .scene.motion-paused *::before, .scene.motion-paused *::after { animation-play-state:paused!important; }
.scene.motion-paused .landscape { transition:none; }
.scene.scenery-only .calculator { visibility:hidden; pointer-events:none; }
.scene.scenery-only .quiet-note { opacity:.55; }
.photo-credit { max-width:45%; text-align:right; }
@media (max-width:650px) { .quiet-note { left:14px; font-size:11px; bottom:14px; } .photo-credit { font-size:8px; bottom:10px; } .season-panel { top:12px; left:12px; } .fullscreen { top:12px; right:12px; } .about-panel { top:12px; right:62px; } .scene { padding-top:76px; padding-bottom:48px; } }
@media (max-height:650px) { html,body { overflow:auto; } .scene { min-height:650px; padding-top:76px; padding-bottom:48px; } }
@media (prefers-reduced-motion:reduce) { .snowfall i { animation-play-state:paused; } .landscape { transition:none; } }