.wbs-weather-studio [hidden] { display: none !important; }
.wbs-weather-studio .wbs-diff-hero { overflow: visible; }
.wbs-weather-studio .wbs-diff-cover { border-radius: inherit; object-position: center; }
.wbs-weather-studio .wbs-diff-hero-copy { padding-right: 5rem; }
.wbs-weather-studio [data-weather-studio] { align-items: start; }
.wbs-weather-studio .weather-options { border: 0; margin: 0 0 .85rem; padding: 0; min-width: 0; }
.weather-options legend { margin-bottom: .5rem; }
.weather-options > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.weather-options label { display: grid; cursor: pointer; }
.weather-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.weather-options label span, .weather-command button {
  padding: .55rem .65rem; border: 1px solid #717caa; border-radius: .7rem;
  background: #232947; color: #edf4ff;
}
.weather-options label span { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; justify-content: center; min-height: 3rem; }
.weather-options svg { color: #abdfff; }
.weather-options input:checked + span { background: #373059; border-color: #d5b8ff; box-shadow: inset 0 0 0 1px #b89cef55; }
.weather-options input:focus-visible + span { outline: 2px solid #9ce8ff; outline-offset: 2px; }
.weather-command { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; background: #0c162a; border-radius: .7rem; padding: .55rem; margin-bottom: .5rem; }
.weather-command code { flex: 1; min-width: 9rem; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; font-family: ui-monospace, monospace; }
.weather-command button { font: inherit; cursor: pointer; }
.weather-command button:hover, .weather-options label:hover span { border-color: #d5b8ff; }
.weather-scene {
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: 8rem; padding: .6rem; border: 1px solid #717caa; border-radius: .75rem;
  background: linear-gradient(0deg,#090d1dc7,transparent), url('weather-hero.webp') left 43% / cover;
}
.weather-scene[data-mode="rain"] { background-image: linear-gradient(0deg,#0b1929d4,#203e6277),url('weather-hero.webp'); background-position: center, right 43%; }
.weather-scene[data-mode="thunder"] { background-image: linear-gradient(0deg,#12132b99,#22213d55),url('weather-hero.webp'); background-position: center, right 30%; }
.weather-scene[data-mode="resume"] { background-position: center, center; }
.weather-scene:is([data-mode="rain"],[data-mode="thunder"])::before {
  content: ""; position: absolute; inset: -28px 0 0; z-index: -1; opacity: .55;
  background: repeating-linear-gradient(112deg,transparent 0 13px,#bddcff65 14px 15px,transparent 16px 24px);
  mask-image: repeating-linear-gradient(165deg,transparent 0 14px,#000 15px 20px,transparent 21px 32px);
  animation: weather-rain .38s linear infinite;
}
@keyframes weather-rain { to { transform: translateY(23px); } }
.weather-scene span { justify-self: start; background: #10162ce8; border-radius: .55rem; padding: .35rem .55rem; }
.wbs-weather-studio [data-weather-effect], .wbs-weather-studio [data-weather-status] { margin: .6rem 0 0; }
.wbs-weather-studio [data-weather-status]:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .weather-scene::before { animation: none !important; } }
.wbs-weather-studio .wbs-diff-photo::after { border-radius: inherit; }
@media (max-width: 720px) {
  .wbs-difficulty-pilot.wbs-weather-studio .wbs-diff-photo { padding-bottom: 65px; }
  .wbs-weather-studio .wbs-diff-hero-copy { padding-right: 0; }
  .wbs-weather-studio .wbs-diff-cover { object-position: 72% center; }
}