.clarity-card {
  background: radial-gradient(ellipse at 100% 0, #e0f0ee, transparent 55%), linear-gradient(145deg, #f5faf8, #fffdf9);
}
.clarity-sky {
  --photo-sky-top: #237ba7;
  --photo-sky-mid: #7dcedd;
  --photo-horizon: #e6f3e7;
  --photo-sea-far: #308d9f;
  --photo-sea-mid: #50bdbb;
  --photo-sea-near: #53cec2;
  --photo-sea-deep: #078b9f;
  --photo-cloud-top: #fffef2;
  --photo-cloud-base: #aacbd2;
  --photo-overcast-top: #8daab7;
  --photo-overcast-base: #d4dfda;
  --photo-veil-color: #d8e3de;
  --photo-land-light: 1;
  --photo-haze: .15;
  --photo-cloud: .4;
  --photo-overcast: 0;
  --photo-sun: .7;
  --photo-distant: .85;
  --photo-blur: .4px;
  --photo-saturation: 1;
  --photo-warmth: .1;
  --photo-sun-x: 400px;
  --photo-sun-y: 60px;
  position: relative;
  isolation: isolate;
  height: clamp(205px, 18vw, 250px);
  margin-top: 18px;
  overflow: hidden;
  border-radius: 16px;
  background: #79c8d0;
  box-shadow: 0 12px 24px -16px #17485266, inset 0 0 0 1px #194e5a14;
}
.clarity-sky[data-light="morning"] { --photo-sky-top: #5794b7; --photo-horizon: #f0e8cc; }
.clarity-sky[data-light="golden"] { --photo-sky-top: #7b91b2; --photo-sky-mid: #e7bea3; --photo-horizon: #f4d8aa; --photo-sea-far: #7ba6a2; --photo-sea-mid: #60aaa5; }
.clarity-sky[data-light="twilight"] { --photo-sky-top: #3d4369; --photo-sky-mid: #8687a7; --photo-horizon: #c0a4ab; --photo-sea-far: #53677f; --photo-sea-mid: #3e667c; --photo-sea-near: #386e7e; --photo-sea-deep: #253d57; --photo-cloud-top: #a7a6bf; --photo-cloud-base: #788298; --photo-overcast-top: #596783; --photo-overcast-base: #9ca0b0; --photo-veil-color: #7d8eaa; --photo-land-light: .55; }
.clarity-sky[data-light="night"] { --photo-sky-top: #0d203b; --photo-sky-mid: #213c58; --photo-horizon: #4e6379; --photo-sea-far: #2b4963; --photo-sea-mid: #23485d; --photo-sea-near: #20526a; --photo-sea-deep: #0e2a40; --photo-cloud-top: #667d95; --photo-cloud-base: #384f68; --photo-overcast-top: #22364c; --photo-overcast-base: #4d6074; --photo-veil-color: #344d67; --photo-land-light: .29; }
.clarity-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px #163c4824;
  background: linear-gradient(0deg, #082d403d, transparent 28%, transparent 85%, #12394d14);
}
.photo-world { display: block; width: 100%; height: 100%; filter: saturate(var(--photo-saturation)); transition: filter .65s ease; }
.photo-world stop { transition: stop-color .65s ease; }
.photo-sun { transform: translate(var(--photo-sun-x), var(--photo-sun-y)); opacity: var(--photo-sun); transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .65s ease; }
.photo-moon { opacity: var(--photo-moon, 0); transition: opacity .65s ease; }
.photo-stars { opacity: var(--photo-stars, 0); transition: opacity .65s ease; }
.photo-clouds { opacity: var(--photo-cloud); transition: opacity .65s ease; }
.photo-overcast { opacity: var(--photo-overcast); transition: opacity .65s ease; }
.photo-cloud-drift { animation: photoCloudDrift 24s ease-in-out infinite alternate; }
.photo-cloud-back { animation-delay: -10s; animation-duration: 32s; }
.photo-distant { opacity: var(--photo-distant); filter: blur(var(--photo-blur)) brightness(var(--photo-land-light)); transition: opacity .65s ease, filter .65s ease; }
.photo-midground { opacity: calc(1 - var(--photo-haze) * .35); }
.photo-midground, .photo-foreground { filter: brightness(var(--photo-land-light)); transition: filter .65s ease, opacity .65s ease; }
.photo-airveil { opacity: var(--photo-haze); transition: opacity .65s ease; pointer-events: none; }
.photo-warmth { opacity: var(--photo-warmth); transition: opacity .75s ease; pointer-events: none; }
.photo-water { animation: photoWaterBreathe 7s ease-in-out infinite alternate; }
.photo-water-light { opacity: calc(var(--photo-sun) * .4); transform: translateX(calc(var(--photo-sun-x) - 470px)); transition: opacity .65s ease, transform .75s ease; }
.photo-moon-water { opacity: calc(var(--photo-moon, 0) * .25); transition: opacity .65s ease; }
.clarity-sky[data-light="night"] .photo-water { filter: brightness(.4); }
.photo-palm-crown { transform-origin: 90px 88px; animation: photoPalmBreathe var(--photo-palm-period, 9s) ease-in-out infinite alternate; }
.photo-rain { display: none; }
.clarity-sky[data-raining="true"] .photo-rain { display: block; animation: photoRain 1.2s linear infinite; }
.photo-shore { animation: photoShoreBreathe 6s ease-in-out infinite alternate; }
.photo-preview-label, .photo-scene-caption { position: absolute; z-index: 1; font: 600 11px/1.4 system-ui, sans-serif; }
.photo-preview-label { top: 12px; right: 12px; padding: 4px 8px; border-radius: 6px; color: #fffef3; background: #164351ad; }
.photo-scene-caption { bottom: 13px; left: 14px; display: flex; align-items: center; gap: 6px; color: #fffdf0; text-shadow: 0 1px 5px #073e50; font-size: 13px; }
.photo-scene-caption::before { content: ""; width: 5px; height: 5px; background: #e2eeb1; border-radius: 50%; }
.photo-reading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; }
.photo-reading > div:first-child { min-width: 0; }
.photo-light-label { display: block; margin-bottom: 5px; color: #807047; font-size: 11px; font-weight: 650; letter-spacing: .08em; }
.photo-advice-title { display: block; color: #183d43; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.5; font-weight: 650; }
.photo-score { flex-shrink: 0; text-align: end; }
.photo-score b { display: block; font: 400 32px/1 Georgia, serif; color: #245f66; font-variant-numeric: tabular-nums; }
.photo-score span { display: block; margin-top: 5px; font-size: 10px; color: #607c7f; white-space: nowrap; }
.intelligence-card .photo-advice { margin-top: 9px; min-height: 36px; font-size: 12px; line-height: 1.55; color: #526e73; }
.photo-facts { display: grid; grid-template-columns: 1fr .8fr 1.1fr; gap: 10px; padding: 12px 0; margin: 10px 0 0; border-block: 1px solid #214f5014; }
.photo-facts > div { min-width: 0; }
.photo-facts > div + div { padding-inline-start: 10px; border-inline-start: 1px solid #214f5014; }
.photo-facts dt { color: #678084; font-size: 10px; line-height: 1.4; }
.photo-facts dd { margin: 5px 0 0; color: #204e54; font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.4; }
.clarity-timebar { margin-top: 14px; padding: 0; border: 0; background: none; min-width: 0; }
.photo-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.photo-current-time { color: #194c56; font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.photo-controls > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.photo-controls button { min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid #cedfde; color: #365e63; background: #fffdf9; font: 650 12px/1.2 system-ui, sans-serif; cursor: pointer; box-shadow: none; transition: background .2s ease, border-color .2s ease; }
.photo-controls button:hover { background: #e8f3ef; border-color: #739e9c; transform: none; }
.photo-controls .photo-play[aria-pressed="true"] { background: #154f59; color: white; border-color: #154f59; }
.photo-controls .photo-best.is-selected { background: #f8f0d8; border-color: #e1d4b3; color: #78653d; }
.photo-controls button:focus-visible { outline: 2px solid #138a97; outline-offset: 3px; }
.photo-controls button:disabled { opacity: .45; cursor: default; }
.photo-scrub-label { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: 9px; color: #315d63; font-size: 11px; line-height: 1.5; }
.photo-scrub-label span { color: #71878a; font-size: 10px; }
.photo-scrubber { position: relative; height: 54px; margin: 1px 0 0; direction: ltr; }
.photo-scrubber svg { position: absolute; top: 0; left: 13px; width: calc(100% - 26px); height: 34px; pointer-events: none; }
.photo-scrubber input { position: absolute; inset: 10px 0 0; width: 100%; height: 44px; margin: 0; padding: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; touch-action: pan-y; border: 0; box-shadow: none; border-radius: 8px; direction: ltr; }
.photo-scrubber input::-webkit-slider-runnable-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #478f94 var(--scrub-progress, 0%), #bed5d4 var(--scrub-progress, 0%)); }
.photo-scrubber input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; border: 5px solid #fffef9; background: #277b82; box-shadow: 0 0 0 1px #7ba6a5, 0 3px 7px #164a522b; }
.photo-scrubber input::-moz-range-track { height: 4px; border-radius: 10px; background: linear-gradient(to right, #478f94 var(--scrub-progress, 0%), #bed5d4 var(--scrub-progress, 0%)); }
.photo-scrubber input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: 5px solid #fffef9; background: #277b82; box-shadow: 0 0 0 1px #7ba6a5; }
.photo-scrubber input:focus-visible { outline: 2px solid #178994; outline-offset: 2px; }
.is-time-scrubbing .photo-scrubber input::-webkit-slider-thumb { box-shadow: 0 0 0 1px #277b82, 0 0 0 7px #277b821c; }
.is-time-scrubbing .photo-scrubber input::-moz-range-thumb { box-shadow: 0 0 0 1px #277b82, 0 0 0 7px #277b821c; }
.is-time-scrubbing .photo-world, .is-time-scrubbing .photo-world * { transition-duration: .12s; }
.photo-time-endpoints { display: flex; justify-content: space-between; gap: 12px; margin-top: -4px; color: #688084; font-size: 10px; font-variant-numeric: tabular-nums; direction: ltr; }
.clarity-card .intelligence-foot { margin-top: 14px; padding-top: 12px; }
.photo-still .photo-world * { animation-play-state: paused !important; }
@keyframes photoCloudDrift { from { transform: translateX(-5px); } to { transform: translateX(7px); } }
@keyframes photoWaterBreathe { from { opacity: .6; transform: translateY(0); } to { opacity: 1; transform: translateY(1px); } }
@keyframes photoPalmBreathe { from { transform: rotate(calc(var(--photo-palm-angle, 1deg) * -.8)); } to { transform: rotate(var(--photo-palm-angle, 1deg)); } }
@keyframes photoRain { from { transform: translate(3px, -10px); } to { transform: translate(-3px, 12px); } }
@keyframes photoShoreBreathe { from { opacity: .4; } to { opacity: .85; } }
@media (max-width: 600px) {
  .clarity-sky { height: 205px; margin-top: 16px; }
  .photo-controls { flex-wrap: wrap; }
  .photo-controls button { padding-inline: 10px; }
  .photo-advice-title { font-size: 15px; }
  .photo-current-time { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-world, .photo-world * { animation: none !important; transition: none !important; }
}