/* A quiet living sky. Pointer and touch share the same lightweight controls. */
.hero{min-height:280px;isolation:isolate;touch-action:pan-y;background:radial-gradient(ellipse at 86% 40%,#ffd78742,transparent 38%),linear-gradient(180deg,#d7e9f8,var(--bg))}
:root[data-theme=dark] .hero{background:radial-gradient(ellipse at 86% 40%,#829cd322,transparent 36%),linear-gradient(180deg,#12243e,var(--bg))}
.hero .hin{z-index:3;pointer-events:none;padding-right:140px;min-height:280px}
.hero #ttl{pointer-events:auto;text-wrap:balance}
.sky-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;transform:translate(calc(var(--hx,0)*-7px),calc(var(--hy,0)*-4px));transition:transform .45s ease-out}
.hero>.sky{z-index:1;pointer-events:none}
.sky-stars{position:absolute;inset:0;width:100%;height:100%;color:#dbe9ff;opacity:0;transition:opacity .5s}
:root[data-theme=dark] .sky-stars{opacity:1}
.sky-star{animation:sky-twinkle var(--twinkle,4s) ease-in-out infinite alternate;animation-delay:var(--delay,0s);transform-box:fill-box;transform-origin:center}
@keyframes sky-twinkle{from{opacity:.2;transform:scale(.8)}to{opacity:.8;transform:scale(1.2)}}
.celestial{position:absolute;right:clamp(20px,8vw,140px);top:78px;width:90px;height:90px;padding:0;border:0;border-radius:50%;background:none;color:inherit;pointer-events:auto;z-index:4;transform:translate(calc(var(--hx,0)*9px),calc(var(--hy,0)*7px));transition:transform .5s ease,filter .4s;filter:drop-shadow(0 0 18px #ffc94740)}
.celestial:hover{transform:translate(calc(var(--hx,0)*9px),calc(var(--hy,0)*7px)) scale(1.08)}
.celestial:focus-visible{outline:2px dashed var(--accent);outline-offset:8px}
.celestial svg{display:block;width:100%;height:100%;overflow:visible}
.celestial .moon-art{display:none}
:root[data-theme=dark] .celestial{filter:drop-shadow(0 0 20px #cfddff44)}
:root[data-theme=dark] .sun-art{display:none}
:root[data-theme=dark] .moon-art{display:block}
.sun-rays{transform-origin:44px 44px;animation:sun-turn 36s linear infinite}
@keyframes sun-turn{to{transform:rotate(360deg)}}
.air-route{position:absolute;left:-90px;top:170px;z-index:2;animation:air-cross 27s linear infinite;animation-delay:-6s;pointer-events:none}
.aircraft{position:relative;display:block;width:70px;height:44px;border:0;padding:0;background:none;color:#3777a2;pointer-events:auto;filter:drop-shadow(0 3px 3px #23445e22);transform:rotate(calc(var(--hx,0)*5deg));transition:transform .5s}
.aircraft svg{width:100%;height:100%;overflow:visible;animation:air-bob 4s ease-in-out infinite}
.aircraft::before{content:'';position:absolute;right:60px;top:25px;width:90px;height:1px;background:linear-gradient(90deg,transparent,#fff9);opacity:.6}
@keyframes air-cross{from{transform:translateX(-10px)}to{transform:translateX(calc(100vw + 160px))}}
@keyframes air-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
:root[data-theme=dark] .air-route{display:none}
.hero.sky-play .celestial{filter:drop-shadow(0 0 30px #f8dc90aa)}
.hero.sky-play .sky-star{opacity:1;animation-duration:.6s}
.hero.sky-play .aircraft svg{animation:plane-wave .9s ease-in-out}
@keyframes plane-wave{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-24px) rotate(-16deg)}}
.sky-ripple{position:absolute;left:var(--tap-x);top:var(--tap-y);width:16px;height:16px;margin:-8px;border:1px solid #e8bc6099;border-radius:50%;pointer-events:none;z-index:2;animation:sky-ripple 1.1s ease-out forwards}
:root[data-theme=dark] .sky-ripple{border-color:#c6d8ff99}
@keyframes sky-ripple{to{transform:scale(7);opacity:0}}
.sky-meteor{position:absolute;left:var(--tap-x);top:var(--tap-y);width:90px;height:2px;background:linear-gradient(90deg,transparent,#d5e6ff);border-radius:100%;pointer-events:none;z-index:2;animation:sky-meteor 1.1s ease-out forwards}
@keyframes sky-meteor{from{opacity:0;transform:translate(-75px,-50px) rotate(32deg)}20%{opacity:.9}to{opacity:0;transform:translate(100px,60px) rotate(32deg)}}
.sky-hint{position:absolute;right:25px;bottom:26px;z-index:3;font:500 10px/1.4 var(--body);color:var(--muted);opacity:.65;pointer-events:none;letter-spacing:.02em}
@media(max-width:699px){.hero,.hero .hin{min-height:280px}.hero .hin{padding-right:90px}.celestial{width:58px;height:58px;right:18px;top:90px}.air-route{top:205px;animation-duration:19s}.aircraft{width:56px;height:36px}.sky-hint{right:20px;bottom:18px;font-size:9px}.sky-scene{transform:translate(calc(var(--hx,0)*-4px),calc(var(--hy,0)*-3px))}}
@media(prefers-reduced-motion:reduce){.sky-scene,.celestial{transform:none!important;transition:none}.sky-star,.sun-rays,.aircraft svg{animation:none!important}.air-route{animation:none!important;left:auto;right:24%;top:190px}.sky-ripple,.sky-meteor{display:none}.hero.sky-play .celestial{outline:2px solid var(--accent);outline-offset:8px}}
@media print{.sky-scene,.celestial,.air-route,.sky-hint{display:none!important}.hero,.hero .hin{min-height:0}}
/* Viewport companions appear after the header scrolls away. */
.hero{position:relative;z-index:1}
.wrap{position:relative;z-index:auto}
.wrap>main{position:relative;z-index:1}
.wrap>#toc{z-index:1}
.ambient-sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:0;transition:opacity .7s ease;color:#bdd2f7}
.ambient-sky.is-visible{opacity:1}
.ambient-stars{position:absolute;inset:0;width:100%;height:100%;display:none;transform:translateY(calc(var(--sky-scroll,0)*-16px))}
:root[data-theme=dark] .ambient-stars{display:block}
.ambient-stars .sky-star{opacity:.55;filter:drop-shadow(0 0 3px #b8d1ff44)}
.ambient-plane{position:absolute;right:20px;top:40%;width:58px;height:40px;opacity:.45;animation:ambient-glide 12s ease-in-out infinite;transform-origin:center}
.ambient-plane svg{display:block;width:100%;height:100%;overflow:visible}
:root[data-theme=dark] .ambient-plane{display:none}
@keyframes ambient-glide{0%,100%{transform:translateY(-25px) rotate(-7deg)}50%{transform:translateY(80px) rotate(6deg)}}
@media(max-width:699px){.ambient-plane{width:23px;height:20px;right:1px;opacity:.3}}
@media(prefers-reduced-motion:reduce){.ambient-plane{animation:none!important}.ambient-stars{transform:none}.ambient-sky{transition:none}}
@media print{.ambient-sky{display:none!important}}