/* Twenty-two touch-first opposites pages, each contained in one viewport. */
.opposites-screen {
  position: relative; isolation: isolate; width: 100%; height: 100vh; height: 100dvh; min-height: 0; max-height: 100dvh;
  box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(4px, .8vh, 9px); padding: max(8px, env(safe-area-inset-top)) max(9px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(9px, env(safe-area-inset-left));
  color: #493766; background: radial-gradient(circle at 14% 13%, rgba(255,255,255,.8), transparent 30%), radial-gradient(circle at 89% 86%, rgba(255,255,255,.68), transparent 32%), linear-gradient(140deg, #fff2b5, #ffe0ec 53%, #c9f2ed);
  font-family: 'Baloo 2', Inter, system-ui, sans-serif;
}

/* The opposites picker reuses the app's tactile 3D card carousel. */
.opposites-carousel-screen .carousel-heading h1,
.opposites-carousel-screen .carousel-heading p { text-transform: uppercase; }
.opposites-carousel-screen .opposites-carousel-stage {
  inset: clamp(112px, 16vh, 152px) 0 max(66px, calc(env(safe-area-inset-bottom) + 50px));
  perspective: 1450px; perspective-origin: 50% 48%; transform-style: preserve-3d; touch-action: pan-y;
}
.opposites-carousel-screen .opposites-carousel-stage.is-dragging { touch-action: none; }
.opposites-carousel-card {
  width: min(540px, 64vw, 58dvh); aspect-ratio: .96;
  gap: clamp(9px, 1.8vh, 17px); --card-radius: clamp(27px, 4vw, 42px);
}
.opposites-carousel-card .opposites-carousel-icon {
  width: clamp(100px, 19vh, 170px); font-size: clamp(55px, 10vh, 92px);
}
.opposites-carousel-card .carousel-card-title {
  max-width: 100%; font-size: clamp(22px, 3.4vw, 42px); line-height: 1.02; text-transform: uppercase;
}
.opposites-carousel-card .carousel-card-description {
  max-width: 100%; font-size: clamp(15px, 2.2vw, 22px); line-height: 1.12;
}
.opposites-carousel-completion {
  position: absolute; top: 14px; left: 15px; z-index: 3; display: none; place-items: center;
  width: clamp(31px, 4vw, 43px); aspect-ratio: 1; border: 2px solid #fff; border-radius: 50%;
  color: #246a48; background: #c9f6c9; box-shadow: 0 2px 6px rgba(30,60,50,.2);
  font-size: clamp(20px, 2.7vw, 28px); font-weight: 900; line-height: 1;
}
.opposites-carousel-card.is-complete .opposites-carousel-completion { display: grid; }
.opposites-carousel-progress { max-width: min(90vw, 460px); }
@media (max-width: 560px) {
  .opposites-carousel-screen .opposites-carousel-stage { inset: 105px 0 max(61px, calc(env(safe-area-inset-bottom) + 48px)); }
  .opposites-arrow-stage { inset: 105px 0 max(61px, calc(env(safe-area-inset-bottom) + 48px)); }
  .opposites-carousel-card { width: min(520px, 68vw, 56dvh); gap: clamp(7px, 1.5vh, 12px); padding: clamp(17px, 4vw, 25px); }
  .opposites-carousel-card .opposites-carousel-icon { width: clamp(78px, 15vh, 118px); font-size: clamp(46px, 9vh, 68px); }
  .opposites-carousel-card .carousel-card-title { font-size: clamp(21px, 5.8vw, 32px); }
  .opposites-carousel-card .carousel-card-description { font-size: clamp(14px, 3.8vw, 18px); }
  .opposites-carousel-completion { top: 10px; left: 10px; }
}
@media (max-height: 560px) {
  .opposites-carousel-screen .opposites-carousel-stage { inset: 77px 0 53px; }
  .opposites-arrow-stage { inset: 77px 0 53px; }
  .opposites-carousel-card { width: min(430px, 48vw, 74dvh); gap: 6px; padding: 15px; }
  .opposites-carousel-card .opposites-carousel-icon { width: clamp(58px, 13vh, 86px); font-size: clamp(38px, 8vh, 58px); }
  .opposites-carousel-card .carousel-card-title { font-size: clamp(20px, 4vh, 32px); }
  .opposites-carousel-card .carousel-card-description { font-size: clamp(13px, 2.7vh, 18px); }
}
.opposites-toolbar { position: relative; z-index: 2; flex: 0 0 auto; min-height: clamp(42px, 7vh, 58px); padding-right: 62px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.opposites-back {
  min-height: clamp(38px, 6vh, 52px); box-sizing: border-box; border: 3px solid #fff; border-radius: 17px; color: #fff;
  background: linear-gradient(145deg, #55cbbf, #218e98); box-shadow: 0 4px 0 #176c75, 0 7px 12px rgba(45,48,85,.14);
  font: 800 clamp(15px, 2.1vh, 22px)/1 'Baloo 2', sans-serif; cursor: pointer; touch-action: manipulation; transition: transform .14s, filter .14s;
}
.opposites-back { justify-self: start; padding: 4px clamp(10px, 2vw, 20px); }
.opposites-page-count { color: #563681; font-size: clamp(16px, 2.5vh, 24px); font-weight: 800; text-shadow: 0 1px #fff; }
.opposites-progress-badge { justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 2px solid #fff; border-radius: 999px; color: #704b00; background: #fff1a8; box-shadow: 0 3px 8px rgba(65,47,79,.12); font-size: clamp(14px, 2vh, 19px); font-weight: 800; white-space: nowrap; }
.opposites-back:hover { transform: translateY(-2px); filter: brightness(1.07); }
.opposites-back:active { transform: translateY(3px); }
.opposites-back:focus-visible, .carousel-arrow:focus-visible, .opposites-state-button:focus-visible, .opp-scene-tap:focus-visible { outline: 4px solid #423171; outline-offset: 3px; }
.opposites-panel { flex: 1 1 0; min-height: 0; width: min(1000px, 100%); align-self: center; display: flex; flex-direction: column; align-items: center; gap: clamp(3px, .7vh, 8px); transition: transform .22s ease, opacity .22s ease; }
.opposites-panel.is-entering-next { opacity: .45; transform: translateX(18px); }
.opposites-panel.is-entering-previous { opacity: .45; transform: translateX(-18px); }
.opposites-heading { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: clamp(2px, .45vh, 5px); }
.opposites-title { max-width: 98%; margin: 0; color: #563681; font-size: clamp(24px, 4.2vh, 43px); font-weight: 800; line-height: .98; text-align: center; text-shadow: 0 2px 0 #fff, 0 5px 12px rgba(43,34,80,.14); }
.opposites-prompt { max-width: 96%; margin: 0; padding: 3px 12px; border: 2px solid rgba(255,255,255,.94); border-radius: 999px; color: #514173; background: rgba(255,255,255,.86); box-shadow: 0 3px 9px rgba(40,45,90,.09); font-size: clamp(13px, 1.9vh, 19px); font-weight: 800; line-height: 1.08; text-align: center; }
.opposites-art-wrap { flex: 1 1 0; min-height: 0; width: min(820px, 100%); display: grid; place-items: center; }
.opp-scene { position: relative; isolation: isolate; width: min(100%, 680px); height: 100%; min-height: 0; max-height: 100%; overflow: hidden; box-sizing: border-box; border: clamp(4px, .75vw, 8px) solid #fff; border-radius: clamp(22px, 3.2vw, 34px); background: linear-gradient(180deg, #c5f0ff, #e9fbff 65%, #b9e4a2 66%, #83cc7a); box-shadow: 0 8px 0 rgba(94,76,132,.13), 0 15px 25px rgba(47,39,86,.15); }
.opposites-state-controls { flex: 0 0 auto; width: min(820px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(6px, 1vw, 10px); }
.opposites-state-controls.is-four-states { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.opposites-state-button { min-width: 0; min-height: clamp(39px, 6.2vh, 54px); padding: 3px 6px; border: 3px solid #fff; border-radius: 16px; color: #fff; background: linear-gradient(145deg, #8b65d1, #6742a9); box-shadow: 0 5px 0 #4d3185, 0 8px 12px rgba(49,36,80,.13); font: 800 clamp(16px, 2.4vh, 24px)/1.02 'Baloo 2', sans-serif; cursor: pointer; touch-action: manipulation; transition: transform .13s, filter .13s, background .13s; }
.opposites-state-button[aria-pressed="true"] { color: #49330a; background: linear-gradient(145deg, #ffe68b, #ffc447); box-shadow: 0 5px 0 #cf8d24, 0 0 0 3px rgba(255,209,31,.38); }
.opposites-state-button:hover { transform: translateY(-2px); filter: brightness(1.05); }
.opposites-state-button:active { transform: translateY(2px); }
.opposites-discovery-hint { flex: 0 0 auto; max-width: 96%; margin: 0; color: #594478; font-size: clamp(12px, 1.55vh, 15px); font-weight: 700; line-height: 1; text-align: center; }
.opposites-navigation { flex: 0 0 auto; width: min(1000px, 100%); display: flex; align-items: center; justify-content: center; gap: clamp(5px, 1vw, 12px); }
.opposites-arrow-stage { z-index: 9998; inset: clamp(112px, 16vh, 152px) 0 max(66px, calc(env(safe-area-inset-bottom) + 50px)); pointer-events: none; }
.opposites-arrow-stage .carousel-arrow { pointer-events: auto; }
.opposites-arrow-stage .carousel-arrow svg { display: block; width: 1em; height: 1em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.opposites-arrow-stage .carousel-arrow:disabled { opacity: .42; filter: grayscale(.2); cursor: default; }
.opposites-arrow-stage .carousel-arrow:disabled:hover { filter: grayscale(.2); transform: translateY(-50%); }
.opposites-page-dots { display: flex; justify-content: center; gap: 4px; max-width: 25vw; overflow: hidden; }
.opposites-dot { display: block; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(89,70,124,.26); }
.opposites-dot.is-current { background: #6842a8; transform: scale(1.35); }
.opposites-dot.is-complete { background: #2aab7b; }
.opposites-live-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.opp-scene-tap { position: absolute; z-index: 4; border: 0; font: inherit; cursor: pointer; touch-action: manipulation; }
.opp-touch-surface { inset: 0; width: 100%; height: 100%; padding: 0; background: transparent; }
.opp-fallback-icon { display: block; font-size: clamp(90px, 25vh, 210px); text-align: center; }

/* Day and night, with a child-sized light switch. */
.opp-day-scene { background: linear-gradient(#72d4ff 0%, #dff8ff 68%, #a9df91 68%, #76c576); transition: background .35s; }
.opp-day-scene[data-state="1"] { background: linear-gradient(#18245e 0%, #394881 68%, #6671a0 68%, #495c77); }
.opp-room-sky { position: absolute; inset: 0 0 27%; overflow: hidden; }
.opp-day-sun, .opp-night-moon { position: absolute; top: 10%; right: 14%; font-size: clamp(42px, 10vh, 92px); filter: drop-shadow(0 3px 3px rgba(40,40,80,.16)); transition: transform .35s, opacity .35s; }
.opp-night-moon { opacity: 0; transform: translateY(20px) rotate(-30deg); }
.opp-night-stars { position: absolute; top: 22%; left: 12%; color: #fff3a5; font-size: clamp(20px, 4vh, 38px); opacity: 0; transition: opacity .35s; }
[data-state="1"] .opp-day-sun { opacity: 0; transform: translateY(28px) scale(.65); }
[data-state="1"] .opp-night-moon, [data-state="1"] .opp-night-stars { opacity: 1; transform: none; }
.opp-room-hill { position: absolute; left: -10%; right: -10%; bottom: 17%; height: 24%; border-radius: 50% 50% 0 0; background: #69c980; }
[data-state="1"] .opp-room-hill { background: #485b78; }
.opp-little-house { position: absolute; left: 21%; bottom: 24%; font-size: clamp(58px, 12vh, 112px); filter: drop-shadow(0 4px 3px rgba(40,50,65,.19)); }
.opp-switch { top: 50%; right: 7%; width: clamp(72px, 15vw, 118px); height: clamp(110px, 23vh, 170px); display: flex; flex-direction: column; align-items: center; justify-content: space-around; padding: 8px; border: 5px solid #fff; border-radius: 22px; color: #684989; background: linear-gradient(145deg, #fff, #e9e6ff); box-shadow: 0 8px 0 #bcb2d5, 0 12px 18px rgba(40,30,70,.2); transform: translateY(-50%); }
.opp-switch-label { font-size: clamp(10px, 1.6vh, 14px); font-weight: 800; letter-spacing: .08em; }
.opp-switch-lever { position: relative; width: 42%; height: 48%; border: 4px solid #c1b7d5; border-radius: 999px; background: #ded9e8; }
.opp-switch-lever::after { position: absolute; top: 5px; left: 50%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #ffda5c, #ff9d3d); box-shadow: 0 3px 5px rgba(70,55,90,.2); content: ''; transform: translateX(-50%); transition: top .2s, background .2s; }
[data-state="1"] .opp-switch-lever::after { top: calc(100% - 78% - 5px); background: linear-gradient(145deg, #a9b8e8, #6b77b5); }
.opp-switch-state { color: #503b72; font-size: clamp(12px, 1.8vh, 16px); font-weight: 800; }

/* Tea temperatures. */
.opp-tea-scene { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 60%, #fff9de, #f5e9ff 75%); }
.opp-cup-wrap { position: relative; z-index: 1; width: min(48%, 260px); height: 72%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.opp-cup { position: relative; z-index: 2; width: 74%; height: 55%; overflow: hidden; border: 7px solid #fff; border-radius: 12px 12px 42px 42px; background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(211,238,255,.68)); box-shadow: inset 0 7px 10px rgba(105,80,135,.11), 0 9px 0 #c9bdd9, 0 15px 24px rgba(72,52,108,.17); }
.opp-cup-handle { position: absolute; z-index: 1; top: 35%; right: 1%; width: 32%; height: 32%; border: 12px solid #fff; border-left: 0; border-radius: 0 50% 50% 0; box-shadow: 4px 5px 0 #c9bdd9; }
.opp-tea-liquid { position: absolute; inset: 17% 0 0; background: linear-gradient(#f3a137, #c66a24); transition: background .3s, top .3s; }
[data-state="0"] .opp-tea-liquid { top: 6%; background: linear-gradient(#ff5944, #ce271e); }
[data-state="1"] .opp-tea-liquid { top: 12%; background: linear-gradient(#f48a42, #cf562c); }
[data-state="2"] .opp-tea-liquid { top: 17%; background: linear-gradient(#ffc05b, #e78529); }
[data-state="3"] .opp-tea-liquid { top: 12%; background: linear-gradient(#70d9f6, #328fda); }
.opp-cup-glint { position: absolute; top: 15%; left: 13%; width: 9%; height: 62%; border-radius: 99px; background: rgba(255,255,255,.74); }
.opp-ice { position: absolute; z-index: 2; top: 28%; left: 28%; opacity: 0; font-size: clamp(28px, 5vh, 50px); transition: opacity .2s; }
[data-state="3"] .opp-ice { opacity: 1; }
.opp-cup-saucer { width: 100%; height: 12%; margin-top: -2%; border: 5px solid #fff; border-radius: 50%; background: #b8a5d3; box-shadow: 0 5px 0 #9480b2; }
.opp-steam { position: absolute; z-index: 3; top: 10%; left: 50%; display: flex; gap: clamp(13px, 3vw, 30px); opacity: 0; transform: translateX(-50%); }
.opp-steam i { display: block; width: 12px; height: clamp(35px, 9vh, 76px); border-radius: 50%; border-left: 5px solid rgba(255,255,255,.82); filter: drop-shadow(1px 0 1px rgba(130,103,150,.35)); animation: opp-steam-rise 1.5s ease-in-out infinite; }
.opp-steam i:nth-child(2) { animation-delay: .35s; }.opp-steam i:nth-child(3) { animation-delay: .7s; }
[data-state="0"] .opp-steam { opacity: 1; filter: drop-shadow(0 0 9px #ff6b4a); }
[data-state="1"] .opp-steam { opacity: .65; transform: translateX(-50%) scale(.72); }
[data-state="2"] .opp-steam, [data-state="3"] .opp-steam { opacity: 0; }
.opp-tea-scene[data-state="0"] { background: radial-gradient(ellipse at 50% 60%, #ffd1b9, #fff0dd 75%); }
.opp-tea-scene[data-state="1"] { background: radial-gradient(ellipse at 50% 60%, #ffe2bf, #fff6e3 75%); }
.opp-tea-scene[data-state="3"] { background: radial-gradient(ellipse at 50% 60%, #c9f4ff, #e5f5ff 75%); }
.opp-tea-sparkles { position: absolute; top: 20%; color: #f1a442; font-size: clamp(18px, 4vh, 36px); }
.opp-tea-state { position: absolute; bottom: 7%; padding: 4px 18px; border-radius: 999px; color: #5e3c72; background: rgba(255,255,255,.86); font-size: clamp(19px, 3vh, 29px); font-weight: 800; }
@keyframes opp-steam-rise { 50% { transform: translateY(-12px) skewX(-9deg); opacity: .5; } }

/* Loud and quiet, including generated bark and soft snore clips. */
.opp-sound-scene { display: grid; place-items: center; background: radial-gradient(circle at center, #fff2be, #f4e9ff 74%); }
.opp-sound-object { position: absolute; top: 45%; left: 50%; font-size: clamp(90px, 23vh, 190px); transform: translate(-50%, -50%); filter: drop-shadow(0 7px 6px rgba(65,40,80,.19)); }
.opp-sound-rays { position: absolute; top: 45%; right: 13%; color: #ff9e3f; font-size: clamp(45px, 9vh, 80px); font-weight: 800; transform: translateY(-50%); }
[data-state="1"] .opp-sound-rays { right: 18%; opacity: .45; transform: translateY(-50%) scale(.65); }
.opp-sound-caption { position: absolute; bottom: 8%; padding: 4px 18px; border-radius: 999px; color: #563681; background: rgba(255,255,255,.84); font-size: clamp(20px, 3.4vh, 32px); font-weight: 800; }
.opp-sound-scene[data-state="0"] { animation: opp-loud-jiggle .22s ease-in-out 2; }
@keyframes opp-loud-jiggle { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* A perspective road and head-on car create a clear sense of distance. */
.opp-distance-scene { background: linear-gradient(#8bdcff 0 27%, #75c879 27%); }
.opp-distance-scene[data-state="1"] { overflow: visible; }
.opp-distance-horizon { position: absolute; inset: 15% 0 auto; display: flex; justify-content: space-around; color: #fff; font-size: clamp(24px, 5vh, 46px); }
.opp-road { position: absolute; left: 0; right: 0; bottom: 0; height: 76%; background: #555d73; clip-path: polygon(42% 0,58% 0,100% 100%,0 100%); }
.opp-road i { position: absolute; left: 50%; border-radius: 3px; background: #ffe879; box-shadow: 0 0 5px rgba(255,232,121,.45); transform: translateX(-50%); }
.opp-road i:nth-child(1) { top: 10%; width: 5%; height: 3%; }
.opp-road i:nth-child(2) { top: 34%; width: 9%; height: 4%; }
.opp-road i:nth-child(3) { top: 59%; width: 15%; height: 5.5%; }
.opp-road i:nth-child(4) { top: 83%; width: 22%; height: 7%; }
.opp-distance-car { position: absolute; z-index: 2; left: 50%; top: 34%; width: min(24%, 18vh, 150px); height: auto; transform: translate(-50%, -50%) scale(.48); transform-origin: center; transition: top .68s cubic-bezier(.18,.85,.25,1), width .68s cubic-bezier(.18,.85,.25,1), transform .68s cubic-bezier(.18,.85,.25,1); filter: drop-shadow(0 7px 4px rgba(35,42,60,.2)); }
.opp-distance-scene[data-state="1"] .opp-distance-car { top: 82%; z-index: 4; width: min(76%, 50vh, 460px); transform: translate(-50%, -50%) scale(1.16); }
.opp-distance-caption, .opp-train-speed { position: absolute; z-index: 3; bottom: 4%; left: 50%; padding: 4px 15px; border-radius: 999px; color: #563681; background: rgba(255,255,255,.86); font-size: clamp(18px, 3vh, 28px); font-weight: 800; white-space: nowrap; transform: translateX(-50%); }
.opp-distance-caption { top: 4%; bottom: auto; }
.opp-train-scene { background: linear-gradient(#9ae4ff, #e7f7ff 63%, #79c877 64%); }
.opp-train-clouds { position: absolute; top: 7%; left: 8%; right: 8%; color: #fff; font-size: clamp(27px, 6vh, 54px); text-align: center; }
.opp-train-track { position: absolute; left: 0; right: 0; bottom: 23%; height: 12px; display: flex; justify-content: space-around; border-top: 4px solid #727084; border-bottom: 4px solid #727084; }
.opp-train-track i { width: 4px; height: 25px; margin-top: -7px; background: #74697d; }
.opp-train { position: absolute; z-index: 2; bottom: calc(23% + 10px); left: 0; font-size: clamp(66px, 16vh, 140px); line-height: 1; filter: drop-shadow(0 6px 4px rgba(60,43,75,.22)); animation: opp-train-fast .9s linear infinite; }
[data-state="1"] .opp-train { animation: opp-train-slow 6s linear infinite; }
@keyframes opp-train-fast { from { left: 100%; } to { left: -20%; } }
@keyframes opp-train-slow { from { left: 100%; } to { left: -20%; } }
.opp-train-scene[data-state="0"]::after { position: absolute; top: 45%; left: 10%; width: 70%; height: 14px; border-radius: 50%; background: rgba(255,255,255,.48); content: ''; filter: blur(5px); }

/* Stretchy little caterpillar. */
.opp-worm-scene { display: flex; align-items: center; justify-content: center; background: linear-gradient(#d5f4ff 0 72%, #7cd38b 72%); }
.opp-worm-ground { position: absolute; bottom: 16%; left: 8%; right: 8%; height: 7px; border-radius: 50%; background: rgba(67,104,67,.25); }
.opp-worm { position: relative; z-index: 1; display: flex; align-items: center; transform: scaleX(1.18); transform-origin: center; transition: transform .42s cubic-bezier(.2,.8,.25,1); filter: drop-shadow(0 6px 3px rgba(45,85,63,.2)); }
.opp-worm > i { display: block; width: clamp(25px, 5.2vh, 48px); aspect-ratio: 1; margin-left: -7px; border: 3px solid #fff; border-radius: 50%; background: #51c985; box-shadow: inset -4px -5px 0 rgba(28,133,78,.16); }
.opp-worm > i:nth-of-type(2n) { background: #91db60; transform: translateY(-8px); }
.opp-worm-head { z-index: 2; font-size: clamp(40px, 8vh, 76px); line-height: 1; }
[data-state="1"] .opp-worm { transform: scaleX(.58); }
.opp-worm-caption, .opp-window-caption, .opp-crown-caption, .opp-marker-caption, .opp-touch-caption, .opp-weather-caption, .opp-juice-caption, .opp-weight-caption, .opp-updown-caption { position: absolute; z-index: 5; bottom: 6%; left: 50%; max-width: 92%; padding: 4px 14px; border-radius: 999px; color: #563681; background: rgba(255,255,255,.86); font-size: clamp(17px, 2.8vh, 26px); font-weight: 800; text-align: center; white-space: nowrap; transform: translateX(-50%); }

/* The tree is visible through clear glass, then hidden behind frosted glass. */
.opp-window-scene { background: linear-gradient(#91dcff, #e2f7ff 66%, #a6dc8c 66%); }
.opp-window-garden { position: absolute; inset: 6% 5% 15%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; font-size: clamp(24px, 5vh, 48px); }
.opp-tree { font-size: clamp(68px, 15vh, 138px); filter: drop-shadow(0 6px 4px rgba(30,75,40,.18)); transition: opacity .28s, filter .28s; }
.opp-window-glass { position: absolute; z-index: 2; inset: 10% 20% 20%; padding: 0; appearance: none; border: clamp(8px, 1.5vw, 15px) solid #fff; border-radius: 13px; color: inherit; background: rgba(174,237,255,.17); box-shadow: inset 0 0 0 4px rgba(98,160,190,.54), 0 10px 0 rgba(68,107,131,.34), 0 14px 25px rgba(40,55,80,.18); cursor: pointer; transition: background .28s; }
.opp-window-glass::before { position: absolute; top: 0; bottom: 0; left: 50%; width: 9px; background: rgba(255,255,255,.88); content: ''; transform: translateX(-50%); }
.opp-window-glass::after { position: absolute; top: 50%; left: 0; right: 0; height: 9px; background: rgba(255,255,255,.88); content: ''; transform: translateY(-50%); }
.opp-window-glass i, .opp-window-glass b { position: absolute; top: 12%; left: 11%; width: 24%; height: 47%; background: rgba(255,255,255,.45); clip-path: polygon(0 0,100% 0,0 100%); }
.opp-window-glass b { top: auto; left: auto; right: 11%; bottom: 12%; transform: rotate(180deg); }
[data-state="1"] .opp-window-glass { background: rgba(234,242,248,.98); }
[data-state="1"] .opp-window-garden .opp-tree { opacity: .08; filter: blur(3px); }

/* A gold crown and a matte grey crown. */
.opp-crown-scene { display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, #fff9d3, #f4eaff 72%); }
.opp-crown { position: relative; z-index: 2; width: min(48%, 260px); max-height: 66%; overflow: visible; filter: drop-shadow(0 9px 7px rgba(105,74,18,.24)); transition: filter .2s, transform .2s; }
.opp-crown-shape { fill: url(#opp-gold); stroke: #ce8f20; stroke-width: 7; stroke-linejoin: round; }
.opp-crown-band { fill: #f8c447; stroke: #c1841d; stroke-width: 5; }
.opp-crown circle { fill: #ff748e; stroke: #fff0bb; stroke-width: 4; }
.opp-crown-scene[data-state="0"] .opp-crown-shape { fill: #f8c331; }
.opp-crown-scene[data-state="1"] .opp-crown-shape { fill: #aeb1bb; stroke: #777b86; }
.opp-crown-scene[data-state="1"] .opp-crown-band { fill: #9296a1; stroke: #70747e; }
.opp-crown-scene[data-state="1"] .opp-crown circle { fill: #777b86; stroke: #d0d2d8; }
.opp-crown-stars { position: absolute; inset: 10% 10%; color: #ffbf2f; }
.opp-crown-stars i { position: absolute; font-style: normal; font-size: clamp(18px, 4vh, 36px); animation: opp-twinkle 1.2s ease-in-out infinite alternate; }
.opp-crown-stars i:nth-child(1) { top: 8%; left: 13%; }.opp-crown-stars i:nth-child(2) { top: 18%; right: 11%; animation-delay: .2s; }.opp-crown-stars i:nth-child(3) { top: 54%; left: 4%; animation-delay: .4s; }.opp-crown-stars i:nth-child(4) { top: 67%; right: 4%; animation-delay: .6s; }.opp-crown-stars i:nth-child(5) { top: 38%; left: 25%; animation-delay: .3s; }.opp-crown-stars i:nth-child(6) { top: 3%; right: 34%; animation-delay: .1s; }.opp-crown-stars i:nth-child(7) { bottom: 9%; left: 31%; animation-delay: .5s; }.opp-crown-stars i:nth-child(8) { bottom: 12%; right: 29%; animation-delay: .7s; }
[data-state="1"] .opp-crown-stars { opacity: 0; }
[data-state="0"] .opp-crown { animation: opp-crown-flash .75s ease-in-out infinite alternate; }
@keyframes opp-twinkle { to { opacity: .28; transform: scale(.58) rotate(30deg); } }
@keyframes opp-crown-flash { to { filter: drop-shadow(0 0 23px #fff5a7) drop-shadow(0 8px 7px rgba(105,74,18,.2)); transform: scale(1.04); } }

/* One matching tool and one matching stroke demonstrate thin and thick. */
.opp-marker-scene { display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(0deg, #fff 0 38px, #dce8fa 39px 41px); }
.opp-writing-tool { position: absolute; z-index: 2; top: 49%; left: 9%; width: clamp(125px, 35%, 250px); height: clamp(27px, 5.5vh, 48px); align-items: center; filter: drop-shadow(0 5px 4px rgba(50,40,75,.22)); transform: translateY(-50%) rotate(-9deg); }
.opp-pencil-tool { display: flex; }
.opp-pencil-eraser { flex: 0 0 11%; height: 78%; border-radius: 9px 3px 3px 9px; background: linear-gradient(180deg, #ff9eb5, #ec5d81); }
.opp-pencil-ferrule { flex: 0 0 8%; height: 82%; background: repeating-linear-gradient(90deg, #9ca7b4 0 3px, #e2e7e9 3px 6px); }
.opp-pencil-body { flex: 1 1 auto; height: 72%; background: linear-gradient(180deg, #ffe47a, #f4b735 55%, #d99024); }
.opp-pencil-wood { flex: 0 0 12%; height: 72%; background: #e6c49a; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.opp-pencil-lead { flex: 0 0 4%; height: 23%; margin-left: -1px; background: #48434c; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.opp-crayon-tool { display: none; }
.opp-crayon-body { position: relative; flex: 1 1 auto; height: 100%; overflow: hidden; border-radius: 10px 5px 5px 10px; background: linear-gradient(180deg, #ff91b6, #e95086 54%, #bb3374); }
.opp-crayon-body::before { position: absolute; top: 18%; bottom: 18%; left: 15%; width: 7px; border-radius: 99px; background: rgba(255,255,255,.55); content: ''; }
.opp-crayon-body::after { position: absolute; top: 0; bottom: 0; right: 12%; width: 7px; background: rgba(126,31,94,.25); content: ''; }
.opp-marker-scene[data-state="1"] { --opp-thick-mark-size: 23px; }
.opp-crayon-tip { flex: 0 0 22%; height: var(--opp-thick-mark-size, 100%); background: linear-gradient(90deg, #d3437d, #a62d6b); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.opp-drawn-lines { position: absolute; top: 50%; right: 8%; left: 48%; display: flex; align-items: center; transform: translateY(-50%); }
.opp-sample-line { display: block; width: 100%; height: 4px; border-radius: 999px; background: #554078; box-shadow: 0 1px 0 rgba(255,255,255,.45); transition: height .25s ease; }
.opp-marker-scene[data-state="1"] .opp-pencil-tool { display: none; }
.opp-marker-scene[data-state="1"] .opp-crayon-tool { display: flex; }
.opp-marker-scene[data-state="1"] .opp-sample-line { height: var(--opp-thick-mark-size); }

/* Hard rock impact and a pillow that gives way on touch. */
.opp-touch-scene { background: linear-gradient(#d9f3ff, #f6fcff 64%, #bae2a5 64%); }
.opp-hard-art, .opp-soft-art { position: absolute; inset: 10% 0 15%; display: flex; align-items: center; justify-content: center; gap: 12%; transition: opacity .25s, transform .25s; }
.opp-hard-art > span { font-size: clamp(58px, 13vh, 118px); filter: drop-shadow(0 7px 5px rgba(50,42,75,.18)); }
.opp-hammer { transform: rotate(-22deg); }
.opp-impact { position: absolute; top: 35%; right: 24%; color: #ffaf32; opacity: 0; }
.opp-soft-art { opacity: 0; transform: scale(.85); }
.opp-pillow { font-size: clamp(82px, 18vh, 165px); filter: drop-shadow(0 9px 6px rgba(82,66,105,.2)); }
.opp-soft-stars { color: #876db2; font-size: clamp(23px, 4vh, 38px); font-weight: 800; }
[data-state="1"] .opp-hard-art { opacity: 0; transform: scale(.85); }
[data-state="1"] .opp-soft-art { opacity: 1; transform: scale(1); }
.opp-touch-scene.is-interacting[data-state="0"] .opp-hammer { animation: opp-hammer-hit .34s ease-in; }
.opp-touch-scene.is-interacting[data-state="0"] .opp-impact { animation: opp-impact-flash .45s ease-out; }
.opp-touch-scene.is-interacting[data-state="1"] .opp-pillow { animation: opp-pillow-squish .48s ease-in-out; }
@keyframes opp-hammer-hit { 50% { transform: rotate(28deg) translate(14px, 14px); } }
@keyframes opp-impact-flash { 20%, 65% { opacity: 1; transform: scale(1.5); } }
@keyframes opp-pillow-squish { 38% { transform: scale(1.22,.7); } 72% { transform: scale(.91,1.08); } }

/* Weather, volume, weight and vertical direction. */
.opp-weather-scene { background: linear-gradient(#92dcff 0 65%, #80d483 65%); }
.opp-weather-sky { position: absolute; inset: 6% 0 30%; display: flex; align-items: center; justify-content: space-around; }
.opp-raincloud, .opp-weather-sun { font-size: clamp(64px, 14vh, 128px); transition: transform .35s, opacity .35s; }
.opp-weather-sun { opacity: 0; transform: translateY(30px) scale(.7); }
.opp-weather-rays { position: absolute; right: 15%; top: 12%; color: #ffdc69; font-size: clamp(20px, 4vh, 38px); opacity: 0; }
.opp-weather-ground { position: absolute; inset: 67% 4% 15%; display: flex; flex-direction: column; align-items: center; justify-content: space-around; font-size: clamp(19px, 3vh, 29px); }
.opp-puddles { transition: opacity .35s, transform .35s; }
[data-state="1"] .opp-raincloud { opacity: 0; transform: translateY(-20px) scale(.75); }
[data-state="1"] .opp-weather-sun, [data-state="1"] .opp-weather-rays { opacity: 1; transform: none; }
[data-state="1"] .opp-puddles { opacity: 0; transform: translateY(20px); }
.opp-juice-scene { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3%; background: radial-gradient(circle, #fff8dc, #e7f7ff 78%); }
.opp-juice-glass { position: relative; width: clamp(105px, 22vh, 200px); height: 70%; max-height: 300px; overflow: hidden; border: 8px solid rgba(255,255,255,.95); border-top-width: 10px; border-radius: 12px 12px 29px 29px; background: rgba(188,237,250,.43); box-shadow: inset 0 0 0 3px rgba(75,140,168,.56), 0 10px 0 rgba(88,109,143,.3), 0 16px 24px rgba(54,53,89,.18); }
.opp-juice-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 84%; background: linear-gradient(#ffc35a, #f18a2e); transition: height .58s cubic-bezier(.2,.75,.25,1); }
[data-state="1"] .opp-juice-fill { height: 0; }
.opp-juice-bubbles { position: absolute; z-index: 2; left: 10%; top: 25%; color: rgba(255,248,210,.75); font-size: clamp(8px, 1.4vh, 14px); }
.opp-juice-straw { position: absolute; z-index: 3; top: -3%; right: 24%; width: 9px; height: 42%; border: 3px solid #fff; border-bottom: 0; background: #fb6987; transform: rotate(9deg); }
.opp-juice-glint { position: absolute; z-index: 3; top: 13%; left: 13%; width: 8px; height: 48%; border-radius: 8px; background: rgba(255,255,255,.73); }
.opp-juice-level { position: absolute; top: 7%; color: #5a3d7b; font-size: clamp(24px, 5vh, 43px); font-weight: 800; text-shadow: 0 2px #fff; }
.opp-juice-caption { bottom: 5%; }
.opp-weight-scene { background: linear-gradient(#c7efff, #f0fbff 67%, #a8da92 67%); }
.opp-wind-lines { position: absolute; top: 21%; left: 12%; display: flex; flex-direction: column; gap: 20px; }.opp-wind-lines i { width: clamp(65px, 17vw, 155px); height: 5px; border-radius: 99px; background: rgba(255,255,255,.85); animation: opp-breeze 1.5s ease-in-out infinite alternate; }.opp-wind-lines i:nth-child(2) { width: 72%; animation-delay: .3s; }.opp-wind-lines i:nth-child(3) { width: 48%; animation-delay: .6s; }
.opp-feather, .opp-anchor { position: absolute; left: 50%; font-size: clamp(75px, 17vh, 155px); transition: opacity .35s, transform .55s cubic-bezier(.18,.8,.25,1); filter: drop-shadow(0 8px 5px rgba(48,49,76,.2)); }
.opp-feather { top: 31%; transform: translateX(-50%) rotate(-18deg); animation: opp-feather-float 2s ease-in-out infinite alternate; }
.opp-anchor { top: 22%; opacity: 0; transform: translate(-50%, -80px) scale(1.1); }
[data-state="1"] .opp-feather { opacity: 0; transform: translate(-50%, -30px) rotate(25deg); }
[data-state="1"] .opp-anchor { opacity: 1; transform: translate(-50%, 30px) scale(1); }
@keyframes opp-breeze { to { transform: translateX(20px); opacity: .45; } }
@keyframes opp-feather-float { to { transform: translate(-50%, -13px) rotate(15deg); } }
.opp-updown-scene { background: linear-gradient(#75d7ff 0%, #dff6ff 63%, #68bbda 63%, #297eac 100%); }
.opp-updown-clouds { position: absolute; top: 8%; left: 4%; right: 4%; text-align: center; font-size: clamp(24px, 5vh, 47px); }
.opp-updown-sea { position: absolute; bottom: 4%; left: 0; right: 0; height: 31%; display: flex; flex-direction: column; justify-content: space-around; color: rgba(230,251,255,.9); font-size: clamp(20px, 4vh, 38px); text-align: center; }
.opp-balloon { position: absolute; z-index: 2; left: 50%; top: 38%; font-size: clamp(75px, 17vh, 155px); transform: translate(-50%, 0); transition: transform .6s cubic-bezier(.16,.85,.22,1), opacity .3s; filter: drop-shadow(0 8px 5px rgba(54,50,90,.19)); animation: opp-balloon-lift 2.1s ease-in-out infinite alternate; }
.opp-ship-anchor { position: absolute; z-index: 2; left: 50%; bottom: 22%; display: flex; flex-direction: column; align-items: center; font-size: clamp(44px, 10vh, 92px); opacity: 0; transform: translate(-50%, 90px); transition: transform .6s cubic-bezier(.16,.85,.22,1), opacity .3s; }
.opp-ship-anchor b { color: #555; font-size: .72em; }
[data-state="1"] .opp-balloon { opacity: .25; transform: translate(-50%, -125%); animation: none; }
[data-state="1"] .opp-ship-anchor { opacity: 1; transform: translate(-50%, 0); }
@keyframes opp-balloon-lift { to { transform: translate(-50%, -18px); } }

@media (max-width: 560px) {
  .opposites-screen { gap: 4px; padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .opposites-toolbar { min-height: 40px; }
  .opposites-panel { gap: 3px; }
  .opposites-title { font-size: clamp(22px, 6vw, 34px); }
  .opposites-prompt { padding: 2px 9px; font-size: clamp(12px, 3.2vw, 16px); }
  .opposites-art-wrap { width: 100%; }
  .opp-scene { width: 100%; border-width: 4px; border-radius: 20px; }
  .opposites-state-controls { gap: 5px; }
  .opposites-state-button { min-height: 39px; border-radius: 13px; font-size: clamp(15px, 4.2vw, 20px); }
  .opposites-discovery-hint { font-size: 11px; }
  .opposites-navigation { gap: 5px; }
  .opposites-page-dots { gap: 3px; max-width: 22vw; }
  .opposites-dot { flex-basis: 5px; width: 5px; height: 5px; }
  .opp-switch { right: 5%; }
  .opp-little-house { left: 12%; }
  .opp-writing-tool { left: 5%; width: 42%; height: clamp(25px, 6vw, 38px); }
  .opp-drawn-lines { right: 6%; left: 50%; }
}
@media (max-height: 600px) {
  .opposites-screen { gap: 3px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  .opposites-toolbar { min-height: 34px; }
  .opposites-back { min-height: 32px; border-width: 2px; border-radius: 12px; font-size: clamp(13px, 3.2vh, 17px); }
  .opposites-title { font-size: clamp(19px, 5vh, 31px); }
  .opposites-prompt { padding-block: 2px; font-size: clamp(11px, 2.7vh, 15px); }
  .opposites-state-button { min-height: 34px; font-size: clamp(14px, 3.3vh, 18px); }
  .opposites-discovery-hint { display: none; }
  .opp-switch { height: clamp(82px, 20vh, 115px); }
  .opp-cup-wrap { height: 68%; }
  .opp-worm > i { width: clamp(20px, 5vh, 31px); }
  .opp-writing-tool { height: clamp(22px, 5vh, 36px); }
  .opp-drawn-lines { top: 49%; }
  .opp-marker-scene[data-state="1"] .opp-sample-line { height: 18px; }
  .opp-pillow { font-size: clamp(66px, 17vh, 100px); }
  .opp-juice-glass { height: 66%; }
  .opp-feather, .opp-anchor { font-size: clamp(60px, 16vh, 105px); }
  .opp-balloon { font-size: clamp(62px, 15vh, 100px); }
  .opp-ship-anchor { font-size: clamp(39px, 9vh, 64px); }
}
@media (max-width: 560px) and (max-height: 600px) {
  .opposites-back { padding-inline: 8px; }
  .opposites-progress-badge { padding: 2px 7px; }
  .opposites-navigation { justify-content: center; }
  .opposites-page-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opposites-panel, .opposites-back, .carousel-arrow, .opposites-state-button,
  .opp-scene *, .opp-scene::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Smooth, keyboard-accessible gauges for darkness, battery charge and car washing. */
.opposites-state-controls.is-slider { display: flex; justify-content: center; }
.opposites-slider-group {
  width: min(760px, 100%); display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2px; box-sizing: border-box; padding: 4px clamp(10px, 2vw, 22px);
  border: 2px solid rgba(255,255,255,.92); border-radius: 18px;
  background: rgba(255,255,255,.72); box-shadow: 0 3px 8px rgba(50,40,90,.1);
}
.opposites-slider-label { display: grid; gap: 0; color: #514173; font-size: clamp(12px, 1.6vh, 16px); font-weight: 800; line-height: 1.05; text-align: center; }
.opposites-slider {
  width: 100%; min-width: 0; height: clamp(30px, 4.8vh, 42px); margin: 0; appearance: none;
  background: transparent; cursor: ew-resize; touch-action: pan-x;
}
.opposites-slider::-webkit-slider-runnable-track { height: clamp(11px, 1.6vh, 16px); border: 2px solid #fff; border-radius: 999px; background: linear-gradient(90deg, #605276, #c8c5d8 48%, #ffe077); box-shadow: inset 0 2px 5px rgba(47,37,73,.22); }
.opposites-slider::-moz-range-track { height: clamp(11px, 1.6vh, 16px); border: 2px solid #fff; border-radius: 999px; background: linear-gradient(90deg, #605276, #c8c5d8 48%, #ffe077); box-shadow: inset 0 2px 5px rgba(47,37,73,.22); }
.opposites-slider::-webkit-slider-thumb { width: clamp(25px, 4vh, 36px); height: clamp(25px, 4vh, 36px); margin-top: -9px; appearance: none; border: 4px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #ffdd70, #ff9f43); box-shadow: 0 3px 7px rgba(53,40,80,.3); }
.opposites-slider::-moz-range-thumb { width: clamp(18px, 3vh, 28px); height: clamp(18px, 3vh, 28px); border: 4px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #ffdd70, #ff9f43); box-shadow: 0 3px 7px rgba(53,40,80,.3); }
.opposites-slider:focus-visible { outline: 4px solid #423171; outline-offset: 2px; border-radius: 12px; }
.opposites-slider-ends { display: flex; justify-content: space-between; gap: 10px; color: #55377e; font-size: clamp(14px, 2vh, 20px); font-weight: 800; line-height: 1; text-transform: uppercase; }
.opp-slider-scene { overflow: hidden; }
.opp-light-slider-scene { background: linear-gradient(#87d8ff 0 63%, #9de7a1 63% 100%); }
.opp-light-day { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #80d6ff 0 65%, #9be18c 65%); }
.opp-light-sun { position: absolute; top: 12%; right: 13%; font-size: clamp(58px, 13vh, 118px); filter: drop-shadow(0 5px 5px rgba(143,112,27,.24)); }
.opp-light-cloud { position: absolute; top: 17%; left: 16%; font-size: clamp(42px, 9vh, 80px); }
.opp-light-hills { position: absolute; bottom: 14%; left: 50%; width: 100%; color: #286d51; font-size: clamp(34px, 7vh, 68px); text-align: center; transform: translateX(-50%); }
.opp-darkness-overlay { position: absolute; z-index: 2; inset: 0; background: #080916; opacity: .5; pointer-events: none; transition: opacity .12s linear; }
.opp-light-caption { position: absolute; z-index: 3; left: 50%; bottom: 6%; max-width: 92%; padding: 4px 14px; border-radius: 999px; color: #563681; background: rgba(255,255,255,.88); font-size: clamp(17px, 2.7vh, 25px); font-weight: 800; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.opp-battery-scene { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 52%, #fffdf1, #dbe9ff 76%); }
.opp-battery { position: relative; width: min(36%, 235px); height: 69%; min-width: 95px; min-height: 100px; transform: scale(var(--battery-scale, .88)); transition: transform .2s cubic-bezier(.2,.8,.25,1), filter .2s; filter: drop-shadow(0 8px 8px rgba(37,62,118,.18)); }
.opp-battery-terminal { position: absolute; top: 0; left: 50%; width: 36%; height: 11%; border: 4px solid #fff; border-bottom: 0; border-radius: 12px 12px 0 0; background: #818da5; transform: translateX(-50%); }
.opp-battery-body { position: absolute; inset: 9% 0 0; overflow: hidden; border: clamp(6px, 1.1vw, 11px) solid #fff; border-radius: 24px; background: linear-gradient(145deg, #6b7891, #3c4b6b); box-shadow: inset 0 0 0 3px rgba(42,54,80,.34), 0 0 0 4px rgba(65,77,108,.25); }
.opp-battery-fill { position: absolute; right: 5%; bottom: 5%; left: 5%; height: var(--charge, 50%); border-radius: 13px; background: linear-gradient(0deg, #39b855, #b7f35d 68%, #fff998); box-shadow: 0 0 22px rgba(150,243,78,.72); transition: height .12s linear, filter .16s; }
.opp-battery-bolt { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #fff7a8; font-size: clamp(48px, 12vh, 110px); font-weight: 900; text-shadow: 0 0 12px #faffad; opacity: calc(.2 + var(--opp-progress, .5) * .8); }
.opp-battery-caption { position: absolute; z-index: 3; bottom: 7%; max-width: 92%; padding: 4px 16px; border-radius: 999px; color: #563681; background: rgba(255,255,255,.88); font-size: clamp(18px, 3vh, 29px); font-weight: 800; text-align: center; }
.opp-battery-spark { position: absolute; top: 12%; color: #e6b22b; font-size: clamp(18px, 4vh, 36px); opacity: .2; transition: opacity .18s, filter .18s; }
.opp-battery-scene:not(.is-high-charge) .opp-battery-body { animation: opp-low-battery-flicker 1.3s steps(2, end) infinite; }
.opp-battery-scene.is-high-charge .opp-battery { filter: drop-shadow(0 0 13px rgba(138,245,77,.85)) drop-shadow(0 8px 8px rgba(37,62,118,.18)); }
.opp-battery-scene.is-high-charge .opp-battery-fill { filter: brightness(1.2); }
.opp-battery-scene.is-high-charge .opp-battery-spark { opacity: .95; filter: drop-shadow(0 0 7px #ffe56c); }
@keyframes opp-low-battery-flicker { 0%, 100% { opacity: .55; } 48% { opacity: .85; } 52% { opacity: .38; } }
.opp-carwash-scene { background: linear-gradient(#a8e6ff 0 65%, #b7e6a0 65%); }
.opp-carwash-sky { position: absolute; inset: 5% 10% auto; display: flex; justify-content: space-between; font-size: clamp(27px, 5vh, 48px); }
.opp-carwash-road { position: absolute; left: -5%; right: -5%; bottom: 12%; height: 24%; border-radius: 50% 50% 0 0; background: #72798a; box-shadow: inset 0 9px 0 rgba(255,255,255,.17); }
.opp-carwash-road::after { position: absolute; top: 54%; left: 14%; right: 14%; height: 5px; border-radius: 99px; background: repeating-linear-gradient(90deg, #fff1a5 0 34px, transparent 34px 63px); content: ''; }
.opp-car-art { position: absolute; z-index: 2; left: 50%; top: 52%; width: min(84%, 610px); transform: translate(-50%, -50%); }
.opp-car-image { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: drop-shadow(0 9px 8px rgba(36,43,65,.25)); transition: filter .22s, transform .22s; }
.opp-car-mud-layer { position: absolute; z-index: 2; inset: 2% 0 4%; opacity: var(--mud-opacity, .5); pointer-events: none; transition: opacity .15s linear; }
.opp-car-mud-layer i { position: absolute; width: 12%; height: 15%; border-radius: 45% 55% 62% 38%; background: radial-gradient(ellipse at 32% 25%, #a56a35, #6f4327 68%); filter: drop-shadow(0 2px 1px rgba(54,34,20,.24)); transform: rotate(-17deg); }
.opp-car-mud-layer i:nth-child(1) { left: 17%; top: 34%; width: 10%; height: 20%; }
.opp-car-mud-layer i:nth-child(2) { left: 28%; top: 51%; width: 15%; height: 17%; transform: rotate(11deg); }
.opp-car-mud-layer i:nth-child(3) { left: 44%; top: 32%; width: 11%; height: 21%; }
.opp-car-mud-layer i:nth-child(4) { left: 59%; top: 48%; width: 14%; height: 16%; transform: rotate(24deg); }
.opp-car-mud-layer i:nth-child(5) { left: 71%; top: 28%; width: 9%; height: 18%; }
.opp-car-mud-layer i:nth-child(6) { left: 82%; top: 52%; width: 8%; height: 15%; transform: rotate(8deg); }
.opp-car-mud-layer i:nth-child(7) { left: 34%; top: 22%; width: 7%; height: 14%; }
.opp-car-shine { position: absolute; z-index: 3; top: 22%; left: 50%; width: 100%; color: #fff; font-size: clamp(21px, 4vh, 40px); text-align: center; opacity: 0; transform: translateX(-50%) scale(.6); transition: opacity .2s, transform .25s; pointer-events: none; }
.opp-carwash-scene.is-car-clean .opp-car-image { filter: drop-shadow(0 0 12px rgba(255,255,221,.96)) drop-shadow(0 9px 8px rgba(36,43,65,.22)); transform: translateY(-3px); }
.opp-carwash-scene.is-car-clean .opp-car-shine { opacity: 1; transform: translateX(-50%) scale(1); }
.opp-car-caption { position: absolute; z-index: 4; left: 50%; bottom: 5%; max-width: 92%; padding: 4px 15px; border-radius: 999px; color: #563681; background: rgba(255,255,255,.88); font-size: clamp(17px, 2.8vh, 26px); font-weight: 800; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.opp-mud-particle { position: absolute; z-index: 5; width: 19px; height: 15px; border-radius: 50% 50% 56% 38%; background: radial-gradient(circle at 35% 25%, #b47a44, #634024 73%); box-shadow: 0 2px 3px rgba(60,39,21,.2); pointer-events: none; animation: opp-mud-splat .72s cubic-bezier(.18,.72,.32,1) both; }
@keyframes opp-mud-splat { 0% { opacity: 0; transform: translate(0,0) scale(.2) rotate(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--mud-x),var(--mud-y)) scale(1.1) rotate(150deg); } }
@media (max-width: 560px) {
  .opposites-slider-group { padding: 3px 9px; }
  .opposites-slider-ends { font-size: clamp(13px, 3.6vw, 17px); }
  .opp-car-art { width: 92%; }
  .opp-battery { width: min(42%, 180px); height: 66%; }
}
@media (max-height: 600px) {
  .opposites-slider-group { padding-block: 1px; }
  .opposites-slider-label { font-size: 11px; }
  .opposites-slider { height: 27px; }
  .opposites-slider-ends { font-size: clamp(12px, 2.8vh, 15px); }
  .opp-light-caption, .opp-car-caption, .opp-battery-caption { bottom: 4%; font-size: clamp(15px, 3.2vh, 20px); }
  .opp-battery { height: 62%; }
  .opp-car-art { width: min(80%, 500px); }
}
@media (prefers-reduced-motion: reduce) {
  .opp-battery-scene:not(.is-high-charge) .opp-battery-body { animation: none; }
  .opp-mud-particle { animation: none; opacity: 0; }
}

/* Re-mapped child-friendly pages: clothes, pencils and a puppy. */
.opp-clothes-scene, .opp-pencil-scene, .opp-puppy-scene { background: radial-gradient(circle at 50% 10%, #fffef2, #fff0dc 58%, #d9f4e5); }
.opp-clothes-room { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, #fff8e8 0 78%, #f4d5bf 78%); }
.opp-clothes-room::before { position: absolute; top: 10%; left: 8%; width: 31%; height: 49%; border: 8px solid #fff; border-radius: 16px; background: linear-gradient(145deg, #c9edfa, #fff); box-shadow: 0 5px 0 #dfc8b4; content: ''; }
.opp-clothes-room::after { position: absolute; top: 10%; left: 23%; bottom: 22%; width: 7px; border-radius: 8px; background: rgba(113,153,173,.28); content: ''; }
.opp-clothes-sparkle { position: absolute; top: 14%; left: 50%; color: #e6aa46; font-size: clamp(18px, 3.5vh, 32px); transform: translateX(-50%); }
.opp-clothes-hanger { position: absolute; top: 14%; right: 12%; font-size: clamp(34px, 7vh, 66px); opacity: .75; transform: rotate(-10deg); }
.opp-clothes-rug { position: absolute; right: 5%; bottom: 9%; width: 35%; height: 9%; border-radius: 50%; background: #e7a8b0; opacity: .55; }
.opp-jerko-clothes { position: absolute; z-index: 2; left: 50%; bottom: 7%; width: min(66%, 390px); height: 87%; overflow: visible; filter: drop-shadow(0 5px 4px rgba(79,55,66,.14)); transform: translateX(-50%); }
.opp-pants-baggy, .opp-jerko-smile { display: none; }
.opp-clothes-scene[data-state="1"] .opp-pants-tight, .opp-clothes-scene[data-state="1"] .opp-jerko-worried, .opp-clothes-scene[data-state="1"] .opp-tight-squeeze { display: none; }
.opp-clothes-scene[data-state="1"] .opp-pants-baggy, .opp-clothes-scene[data-state="1"] .opp-jerko-smile { display: initial; }
.opp-clothes-scene[data-state="0"] .opp-jerko-clothes { transform: translateX(-50%) scaleX(.96); }
.opp-clothes-scene.is-interacting[data-state="1"] .opp-jerko-clothes { animation: opp-clothes-happy-bounce .48s ease-out; }
@keyframes opp-clothes-happy-bounce { 45% { transform: translate(-50%, -10px) rotate(-2deg); } }

.opp-pencil-scene { background: linear-gradient(145deg, #d9f2ff, #f3fbff 48%, #ecf8da); }
.opp-pencil-supplies { position: absolute; top: 10%; left: 8%; z-index: 1; display: flex; gap: clamp(6px, 1vw, 12px); transform: rotate(-8deg); }
.opp-pencil-supplies span { display: block; font-size: clamp(23px, 4.4vh, 43px); filter: drop-shadow(0 3px 2px rgba(60,45,75,.15)); }
.opp-paper { position: absolute; top: 11%; right: 7%; width: 54%; height: 76%; box-sizing: border-box; display: grid; place-items: center; overflow: hidden; border: 5px solid #fff; border-radius: 12px; background: repeating-linear-gradient(180deg, #fff 0 29px, #dceafa 30px 32px); box-shadow: 0 8px 0 rgba(93,111,145,.18), 0 12px 22px rgba(51,63,92,.13); transform: rotate(2deg); }
.opp-paper-lines { position: absolute; inset: 12px; border: 1px dashed rgba(131,159,193,.25); }
.opp-star-drawing { position: relative; width: min(72%, 210px); height: 70%; overflow: visible; transition: opacity .2s, transform .3s; }
.opp-pencil-smudge { position: absolute; left: 12%; top: 38%; width: 76%; height: 34%; border-radius: 49% 42% 48% 37%; background: radial-gradient(ellipse at 55% 45%, rgba(88,89,96,.76), rgba(126,128,132,.6) 45%, rgba(155,157,160,.2) 76%, transparent 100%); filter: blur(5px); opacity: 0; transform: rotate(-17deg) scale(.5); transition: opacity .25s, transform .25s; }
.opp-drawing-pencil { position: absolute; z-index: 2; left: 4%; bottom: 22%; width: 56%; height: 47%; overflow: visible; filter: drop-shadow(0 5px 3px rgba(52,45,70,.18)); transform: rotate(-1deg); }
.opp-dull-pencil { display: none; }
.opp-pencil-scene.is-interacting[data-state="0"] .opp-drawing-pencil { animation: opp-pencil-draw .85s ease-out; }
.opp-pencil-scene.is-interacting[data-state="0"] .opp-star-drawing path { animation: opp-star-line-draw .85s ease-out both; }
@keyframes opp-pencil-draw { 35% { transform: translate(4px, -4px) rotate(-2deg); } }
@keyframes opp-star-line-draw { from { stroke-dasharray: 600; stroke-dashoffset: 600; } to { stroke-dasharray: 600; stroke-dashoffset: 0; } }
.opp-pencil-scene[data-state="1"] .opp-sharp-pencil, .opp-pencil-scene[data-state="1"] .opp-star-drawing { display: none; }
.opp-pencil-scene[data-state="1"] .opp-dull-pencil { display: initial; }
.opp-pencil-scene[data-state="1"] .opp-pencil-smudge { opacity: 1; transform: rotate(-17deg) scale(1); }

.opp-puppy-scene { background: linear-gradient(180deg, #d9f4ff 0 70%, #b9e6a4 70%); }
.opp-puppy-yard { position: absolute; inset: 7% 8% auto; display: flex; justify-content: space-between; color: #edaf5b; font-size: clamp(18px, 3vh, 30px); opacity: .8; }
.opp-puppy-art { position: absolute; z-index: 2; left: 6%; bottom: 13%; width: min(59%, 390px); height: 78%; overflow: visible; filter: drop-shadow(0 6px 4px rgba(65,50,52,.17)); }
.opp-puppy-tail { transform-box: view-box; transform-origin: 228px 148px; }
.opp-puppy-scene[data-state="1"] .opp-puppy-tail { animation: opp-puppy-tail-wag .22s ease-in-out infinite alternate; }
@keyframes opp-puppy-tail-wag { to { transform: rotate(18deg); } }
.opp-puppy-happy-eyes, .opp-puppy-happy-mouth, .opp-puppy-cheek, .opp-puppy-bone, .opp-puppy-sparkles { display: none; }
.opp-puppy-scene[data-state="1"] .opp-puppy-sad-eyes, .opp-puppy-scene[data-state="1"] .opp-puppy-sad-mouth { display: none; }
.opp-puppy-scene[data-state="1"] .opp-puppy-happy-eyes, .opp-puppy-scene[data-state="1"] .opp-puppy-happy-mouth, .opp-puppy-scene[data-state="1"] .opp-puppy-cheek, .opp-puppy-scene[data-state="1"] .opp-puppy-bone, .opp-puppy-scene[data-state="1"] .opp-puppy-sparkles { display: initial; }
.opp-puppy-bowl { display: none; position: absolute; z-index: 3; right: 8%; bottom: 18%; width: min(34%, 205px); height: 28%; filter: drop-shadow(0 5px 3px rgba(55,65,85,.17)); transition: opacity .2s, transform .25s; }
.opp-puppy-scene[data-state="1"] .opp-puppy-bowl { opacity: 0; transform: translateY(12px) scale(.82); }
.opp-puppy-bone { position: absolute; z-index: 3; left: 22%; top: 40%; width: min(27%, 170px); height: auto; filter: drop-shadow(0 5px 4px rgba(118,91,44,.3)); transform: rotate(-9deg); }
.opp-puppy-scene[data-state="1"] .opp-puppy-bone { animation: opp-bone-pop .38s cubic-bezier(.2,.8,.25,1) both; }
.opp-puppy-sparkles { position: absolute; z-index: 4; top: 16%; right: 14%; color: #efb936; font-size: clamp(20px, 4vh, 37px); }
.opp-puppy-scene.is-interacting[data-state="1"] .opp-puppy-art { animation: opp-puppy-happy-bounce .46s ease-out; }
@keyframes opp-bone-pop { from { opacity: 0; transform: scale(.65) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(-9deg); } }
@keyframes opp-puppy-happy-bounce { 45% { transform: translateY(-8px); } }

.opp-scene-caption { position: absolute; z-index: 5; left: 50%; bottom: 4%; width: max-content; max-width: 94%; box-sizing: border-box; margin: 0; padding: 4px clamp(10px, 1.8vw, 18px); border: 2px solid #fff; border-radius: 18px; color: #55377e; background: rgba(255,255,255,.92); box-shadow: 0 3px 8px rgba(49,42,77,.12); font-size: clamp(13px, 2vh, 19px); font-weight: 800; line-height: 1.12; text-align: center; transform: translateX(-50%); }
@media (max-width: 560px) {
  .opp-jerko-clothes { width: 77%; height: 82%; bottom: 9%; }
  .opp-clothes-room::before { left: 4%; width: 32%; height: 45%; border-width: 5px; }
  .opp-clothes-hanger { right: 8%; }
  .opp-pencil-supplies { top: 7%; left: 5%; }
  .opp-paper { top: 14%; right: 4%; width: 59%; height: 68%; }
  .opp-drawing-pencil { left: 0; bottom: 25%; width: 59%; height: 42%; }
  .opp-puppy-art { left: 0; bottom: 16%; width: 62%; height: 74%; }
  .opp-puppy-bowl { right: 4%; width: 38%; }
  .opp-puppy-bone { left: 15%; top: 43%; width: min(36%, 140px); }
  .opp-scene-caption { bottom: 3%; max-width: 96%; padding: 4px 8px; font-size: clamp(12px, 3.3vw, 17px); }
}
@media (max-height: 600px) {
  .opp-jerko-clothes { height: 82%; }
  .opp-paper { top: 9%; height: 72%; }
  .opp-drawing-pencil { bottom: 23%; height: 46%; }
  .opp-puppy-art { height: 74%; bottom: 14%; }
  .opp-puppy-bowl { bottom: 16%; height: 30%; }
  .opp-puppy-bone { top: 41%; }
  .opp-scene-caption { bottom: 2%; font-size: clamp(12px, 3vh, 17px); }
}
@media (prefers-reduced-motion: reduce) {
  .opp-clothes-scene.is-interacting[data-state="1"] .opp-jerko-clothes,
  .opp-puppy-scene[data-state="1"] .opp-puppy-tail,
  .opp-puppy-scene.is-interacting[data-state="1"] .opp-puppy-art,
  .opp-puppy-bone { animation: none !important; }
}

.opp-ocean-scene { background: linear-gradient(180deg, #9be4ff 0%, #daf8ff 48%, #64b9d1 49%, #267fba 100%); transition: background .45s, filter .3s; }
.opp-ocean-sky { position: absolute; inset: 0 0 49%; overflow: hidden; background: linear-gradient(180deg, #76d5ff, #e2fbff); transition: background .35s; }
.opp-ocean-sun { position: absolute; top: 13%; right: 13%; font-size: clamp(34px, 7vh, 70px); filter: drop-shadow(0 3px 5px rgba(255,184,70,.35)); }
.opp-seabirds { position: absolute; top: 16%; left: 8%; color: #344f75; font-size: clamp(20px, 4vh, 37px); animation: opp-birds-drift 3s ease-in-out infinite alternate; }
@keyframes opp-birds-drift { to { transform: translate(18px, -5px); } }
.opp-storm-clouds { position: absolute; top: 3%; left: 10%; right: 8%; color: #364259; font-size: clamp(34px, 7.5vh, 74px); opacity: 0; transform: translateY(-35px); transition: opacity .35s, transform .35s; }
.opp-lightning { position: absolute; z-index: 4; top: 23%; left: 50%; color: #fff5a1; font-size: clamp(42px, 9vh, 86px); text-shadow: 0 0 18px #fff, 0 0 28px #8cdcff; opacity: 0; transform: translateX(-50%) scale(.4); }
.opp-ocean-horizon { position: absolute; z-index: 1; top: 49%; left: 0; right: 0; border-top: 4px solid rgba(255,255,255,.8); }
.opp-calm-water, .opp-storm-waves { position: absolute; inset: 51% 0 0; overflow: hidden; }
.opp-calm-water { background: linear-gradient(180deg, #72d7e9, #328fca); transition: opacity .3s; }
.opp-calm-water i { position: absolute; left: 9%; width: 25%; height: 10px; border-top: 4px solid rgba(255,255,255,.76); border-radius: 50%; animation: opp-water-glide 2.3s ease-in-out infinite alternate; }
.opp-calm-water i:nth-child(1) { top: 25%; }.opp-calm-water i:nth-child(2) { top: 49%; left: 38%; animation-delay: .6s; }.opp-calm-water i:nth-child(3) { top: 72%; left: 14%; animation-delay: .9s; }.opp-calm-water i:nth-child(4) { top: 34%; left: 69%; animation-delay: .3s; }
@keyframes opp-water-glide { to { transform: translateX(28px) scaleX(1.25); opacity: .55; } }
.opp-storm-waves { z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 3%; background: linear-gradient(180deg, rgba(35,63,103,.8), #16446f); opacity: 0; transition: opacity .35s; }
.opp-storm-waves i { flex: 0 0 31%; display: block; border-radius: 48% 52% 0 0 / 58% 45% 0 0; background: linear-gradient(180deg, #4b7195, #184875); box-shadow: inset 0 12px 0 rgba(189,234,245,.62); transform: translateX(-8%) skewY(-3deg); animation: opp-storm-surge .65s ease-in-out infinite alternate; }
.opp-storm-waves i:nth-child(2) { margin-left: 18%; animation-delay: .2s; }.opp-storm-waves i:nth-child(3) { margin-left: -8%; animation-delay: .38s; }
@keyframes opp-storm-surge { to { transform: translateX(8%) skewY(4deg) scaleY(1.08); } }
.opp-sailboat { position: absolute; z-index: 3; left: 24%; top: 47%; font-size: clamp(44px, 9vh, 85px); line-height: 1; filter: drop-shadow(0 5px 3px rgba(24,51,82,.2)); animation: opp-sail-drift 3s ease-in-out infinite alternate; }
@keyframes opp-sail-drift { to { transform: translate(55px, -3px) rotate(2deg); } }
.opp-storm-ship { position: absolute; z-index: 4; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; color: #fff; font-size: clamp(41px, 8vh, 82px); line-height: .92; opacity: 0; transform: translate(-50%, 30px) scale(.75); transition: opacity .25s, transform .35s; filter: drop-shadow(0 5px 4px rgba(14,32,55,.3)); }
.opp-storm-ship b { font-size: .6em; white-space: nowrap; }
.opp-ocean-caption { position: absolute; z-index: 5; left: 50%; bottom: 4%; max-width: 92%; padding: 3px 12px; border: 2px solid #fff; border-radius: 999px; color: #4e3a72; background: rgba(255,255,255,.9); box-shadow: 0 3px 8px rgba(30,45,65,.17); font-size: clamp(13px, 2vh, 19px); font-weight: 800; line-height: 1.1; text-align: center; white-space: nowrap; transform: translateX(-50%); }
.opp-ocean-scene[data-state="1"] { background: #263c59; }
.opp-ocean-scene[data-state="1"] .opp-ocean-sky { background: linear-gradient(180deg, #27334c, #5a6575); }
.opp-ocean-scene[data-state="1"] .opp-ocean-sun, .opp-ocean-scene[data-state="1"] .opp-seabirds, .opp-ocean-scene[data-state="1"] .opp-sailboat { opacity: 0; }
.opp-ocean-scene[data-state="1"] .opp-storm-clouds { opacity: 1; transform: translateY(0); }
.opp-ocean-scene[data-state="1"] .opp-calm-water { opacity: 0; }
.opp-ocean-scene[data-state="1"] .opp-storm-waves, .opp-ocean-scene[data-state="1"] .opp-storm-ship { opacity: 1; }
.opp-ocean-scene[data-state="1"] .opp-storm-ship { animation: opp-ship-toss .7s ease-in-out infinite alternate; }
@keyframes opp-ship-toss { to { transform: translate(-50%, 30px) rotate(8deg) scale(.75); } }
.opp-ocean-scene[data-state="1"].is-interacting .opp-lightning { animation: opp-lightning-flash .78s ease-out; }
.opp-ocean-scene[data-state="1"].is-interacting::after { position: absolute; z-index: 6; inset: 0; background: rgba(246,251,255,.75); content: ''; pointer-events: none; animation: opp-light-flash .45s ease-out both; }
@keyframes opp-lightning-flash { 18%, 48% { opacity: 1; transform: translateX(-50%) scale(1.15); } }
@keyframes opp-light-flash { 0%, 100% { opacity: 0; } 22% { opacity: .75; } 52% { opacity: .18; } }

@media (max-width: 560px) {
  .opp-ocean-caption { max-width: 96%; font-size: clamp(12px, 3.3vw, 17px); }
}
@media (max-height: 600px) {
  .opp-ocean-caption { bottom: 3%; font-size: clamp(12px, 3vh, 17px); }
}
@media (prefers-reduced-motion: reduce) {
  .opp-seabirds, .opp-calm-water i, .opp-sailboat, .opp-storm-waves i, .opp-storm-ship { animation: none !important; }
}