/* An interactive cloud inside the landscape: same scene transform, light and scroll. */
.cloud-spirit{position:absolute;right:8%;top:120px;width:204px;height:138px;z-index:1;isolation:isolate;pointer-events:none;--look-x:0px;--look-y:0px;--lean:0deg}
.cloud-spirit[hidden],.cloud-spirit.is-offscreen{display:none}
.cloud-spirit-button{display:block;position:absolute;inset:8px 0 10px;width:100%;padding:0;border:0;border-radius:50%;background:transparent;color:#eaf8f5;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cloud-spirit-button:focus-visible{outline:2px solid #d3f5e4;outline-offset:3px;background:#c4eddd12}
.cloud-spirit-art{display:block;width:100%;height:100%;overflow:visible;stroke:none;opacity:.94;filter:saturate(.72)}
.cloud-spirit-float{transform-origin:80px 75px;animation:cloud-spirit-float 9s ease-in-out infinite}
.cloud-spirit-lean{transform-origin:80px 80px;transform:rotate(var(--lean))}
.cloud-spirit-face{opacity:.83;transform-box:fill-box;transform-origin:center;scale:.8;transform:translate(calc(var(--look-x) * .32),calc(var(--look-y) * .32))}
.cloud-spirit-gaze{transform:translate(var(--look-x),var(--look-y))}
.cloud-spirit-eye{transform-box:fill-box;transform-origin:center;animation:cloud-spirit-blink 6.4s linear infinite}
.cloud-spirit-cheek{opacity:.48;transition:opacity .25s}
.cloud-spirit-smile{transition:stroke-width .25s}
.cloud-spirit.is-near .cloud-spirit-cheek{opacity:.9}
.cloud-spirit.is-near .cloud-spirit-smile{stroke-width:3.2}
.cloud-spirit.is-near .cloud-spirit-brow{transform:translateY(-2px)}
.cloud-spirit-brow{transition:transform .25s}
.cloud-spirit-spark{opacity:.75;transform-box:fill-box;transform-origin:center;animation:cloud-spirit-spark 3.8s ease-in-out infinite}
.cloud-spirit-shadow{transform-origin:80px 116px;animation:cloud-spirit-shadow 4.8s ease-in-out infinite}
.cloud-spirit-hint{position:absolute;left:50%;bottom:-6px;translate:-50% 0;white-space:nowrap;padding:5px 10px;border:1px solid #d7f3e02b;border-radius:999px;background:#123742e8;color:#effff6;font-size:11px;line-height:1.5;letter-spacing:.6px;opacity:0;transition:opacity .2s;pointer-events:none}
.cloud-spirit-button:focus-visible~.cloud-spirit-hint{opacity:1}
@media(hover:hover) and (pointer:fine){.cloud-spirit-button:hover~.cloud-spirit-hint{opacity:1}}
.cloud-spirit-dismiss{position:absolute;right:0;top:0;width:24px;height:24px;padding:0;display:grid;place-items:center;border:1px solid #d9f4e02e;border-radius:50%;background:#153b46c9;color:#d7ece2;font-size:16px;line-height:1;opacity:0;pointer-events:none;transition:opacity .2s}
.cloud-spirit:hover .cloud-spirit-dismiss,.cloud-spirit:focus-within .cloud-spirit-dismiss{opacity:1;pointer-events:auto}
.cloud-spirit-dismiss:focus-visible{outline:2px solid #d3f5e4;outline-offset:3px}
.cloud-spirit-particle{opacity:0;transform-box:fill-box;transform-origin:center}
.cloud-spirit.is-burst .cloud-spirit-core{animation:cloud-spirit-disperse 1.25s ease-in-out both}
.cloud-spirit.is-burst .cloud-spirit-particle{animation:cloud-spirit-puff 1.25s ease-in-out both}
.cloud-spirit.is-still *{animation-play-state:paused!important;transition:none!important}
.cloud-spirit-message{position:absolute;top:34px;right:calc(100% - 16px);width:156px;margin:0;padding:12px 14px;border:1px solid #d7f3e052;border-radius:16px 16px 3px 16px;background:#123742f2;color:#f1fff6;font-size:12px;line-height:1.8;letter-spacing:.3px;box-shadow:0 8px 24px #07293118;opacity:0;translate:0 4px;transition:opacity .35s,translate .35s;pointer-events:none}
.cloud-spirit.is-speaking .cloud-spirit-message{opacity:1;translate:0 0}
.cloud-spirit.is-burst .cloud-spirit-hint{opacity:0}
@keyframes cloud-spirit-float{0%,100%{transform:translate(-5px,1px)}50%{transform:translate(6px,-3px)}}
@keyframes cloud-spirit-shadow{0%,100%{opacity:.22;transform:scaleX(1)}50%{opacity:.12;transform:scaleX(.8)}}
@keyframes cloud-spirit-blink{0%,42%,46%,76%,80%,100%{transform:scaleY(1)}44%,78%{transform:scaleY(.08)}}
@keyframes cloud-spirit-spark{0%,100%{opacity:.4;transform:scale(.8) rotate(-8deg)}50%{opacity:1;transform:scale(1.1) rotate(8deg)}}
@keyframes cloud-spirit-disperse{0%,100%{opacity:1;transform:scale(1)}18%{opacity:1;transform:scale(.9)}42%{opacity:0;transform:scale(1.18)}65%{opacity:0;transform:scale(.85)}86%{opacity:1;transform:scale(1.06)}}
@keyframes cloud-spirit-puff{0%,100%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.7}48%{opacity:.85;transform:translate(var(--puff-x),var(--puff-y)) scale(1.05)}70%{opacity:.4;transform:translate(var(--puff-x),var(--puff-y)) scale(.75)}}
.cloud-spirit-core{transform-box:fill-box;transform-origin:center}
@media(min-width:701px) and (max-width:1100px){.hero:has(.cloud-spirit) .intro{margin-top:160px}.cloud-spirit{width:180px;height:126px;right:12%;top:130px}}
@media(max-width:700px){.hero:has(.cloud-spirit) .intro{margin-top:160px}.cloud-spirit{position:absolute;right:10%;top:135px;width:162px;height:126px}.cloud-spirit-dismiss{width:22px;height:22px;opacity:0;pointer-events:none}.cloud-spirit:focus-within .cloud-spirit-dismiss{opacity:.65;pointer-events:auto}.cloud-spirit-hint{font-size:9px;bottom:-4px;padding:4px 7px}.cloud-spirit-button{inset:5px 0 0}}
@media(prefers-reduced-motion:reduce){.cloud-spirit *{animation:none!important;transition:none!important}.cloud-spirit-lean,.cloud-spirit-face,.cloud-spirit-gaze{transform:none}}

.hero:has(.cloud-spirit) .intro{pointer-events:none}

/* The native dialog stays above the landscape, outside its filters and clipping. */
.cloud-tutorial{position:fixed;inset:0;width:min(1040px,calc(100vw - 40px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid #cbe7db40;border-radius:24px;background:#0d252c;color:#ecf7ef;box-shadow:0 28px 120px #0008;color-scheme:dark}
.cloud-tutorial::backdrop{background:#04161ec4;backdrop-filter:blur(6px);animation:cloud-tutorial-backdrop .4s ease-out both}
.cloud-tutorial[open]{animation:cloud-tutorial-enter .45s ease-out both}
.cloud-tutorial-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 26px 19px;background:linear-gradient(120deg,#1b3e42,#10282f)}
.cloud-tutorial-kicker{margin:0 0 8px;font-size:12px;line-height:1.6;letter-spacing:1px;color:#acccbd}
.cloud-tutorial-header h2{font-size:23px;font-weight:550;line-height:1.4;letter-spacing:.3px}
#cloud-tutorial-description{margin-top:7px;font-size:12px;line-height:1.6;color:#b4cbc5}
.cloud-tutorial-close{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;margin-top:2px;border:1px solid #d8f3e539;border-radius:50%;background:#d8f3e50b;color:#e7f5ed;transition:background .2s}
.cloud-tutorial-close:hover{background:#d8f3e526}
.cloud-tutorial-close svg{width:18px;height:18px}
.cloud-tutorial-video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 232px);object-fit:contain;background:#000;outline-offset:-4px}
.cloud-tutorial-chapters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:18px 24px 20px}
.cloud-tutorial-chapters button{padding:10px 6px;border:1px solid #d0e8dc29;border-radius:10px;background:#d0e8dc07;color:#cfdfd5;font-size:12px;line-height:1.5;white-space:nowrap;transition:background .2s,border-color .2s}
.cloud-tutorial-chapters button:hover,.cloud-tutorial-chapters button:focus-visible{background:#d0e8dc18;border-color:#bfe1cc7d}
.cloud-tutorial-feedback{padding:10px 24px 0;color:#f4dcab;font-size:13px;line-height:1.7}
.cloud-tutorial button:focus-visible{outline:2px solid #d3f5e4;outline-offset:3px}
@keyframes cloud-tutorial-enter{0%,20%{opacity:0;transform:translateY(12px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes cloud-tutorial-backdrop{from{background:#04161e00;backdrop-filter:blur(0)}to{background:#04161ec4;backdrop-filter:blur(6px)}}
@media(min-width:1101px){.cloud-spirit-hint{bottom:14px}.cloud-spirit-message{top:calc(100% + 14px);right:0;width:244px;border-radius:3px 16px 16px 16px;text-align:center}}
@media(min-width:1250px){.cloud-spirit-message{top:28px;right:calc(100% - 10px);width:166px;border-radius:16px 16px 3px 16px;text-align:left}}
@media(max-width:700px){.cloud-spirit-message{top:30px;right:calc(100% - 22px);width:142px;padding:10px 12px;font-size:12px}.cloud-spirit-hint{font-size:10px}.cloud-spirit-dismiss{opacity:.55;pointer-events:auto}.cloud-tutorial{width:calc(100vw - 24px);border-radius:18px;max-height:calc(100dvh - 24px)}.cloud-tutorial-header{padding:17px 16px 16px;gap:10px}.cloud-tutorial-kicker{font-size:11px;letter-spacing:0;margin-bottom:6px}.cloud-tutorial-header h2{font-size:18px}.cloud-tutorial-close{flex-basis:32px;width:32px;height:32px}.cloud-tutorial-chapters{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px;gap:8px}.cloud-tutorial-video{max-height:calc(100dvh - 265px)}.cloud-tutorial-feedback{padding:10px 16px 0}}
@media(max-width:350px){.cloud-spirit-message{width:123px;right:calc(100% - 28px);padding:9px 10px;font-size:11px}.cloud-tutorial-header h2{font-size:16px}.cloud-tutorial-kicker{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cloud-tutorial,.cloud-tutorial::backdrop{animation:none!important;transition:none!important}}
.paused .cloud-tutorial,.paused .cloud-tutorial::backdrop{animation:none}