.skybg{position:absolute;left:0;right:0;top:0;height:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.2s,background 1.2s;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
html[data-sky=morning] .skybg{opacity:.8;background:linear-gradient(#ffe3cf,#fff1e4 70%)}
html[data-sky=sunset] .skybg{opacity:.85;background:linear-gradient(#ffb49c,#ffd3a6 55%,#ffeede)}
html[data-sky=night] .skybg{opacity:1;background:linear-gradient(#0e1531,#1d2852 55%,#3a4576)}
.skybg i{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;opacity:0;animation:twinkle var(--d) ease-in-out var(--l) infinite}
html:not([data-sky=night]) .skybg i,html:not([data-sky=night]) .skybg b{display:none}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
.skybg b{position:absolute;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);opacity:0;transform:rotate(-25deg)}
.skybg b.go{animation:shoot 1.1s ease-out forwards}
@keyframes shoot{0%{opacity:0;translate:0 0}15%{opacity:1}100%{opacity:0;translate:-360px 170px}}
html[data-sky=night] .hero h1{color:#f3f5ff}
html[data-sky=night] .hero .rot{color:#9cc1ff}
html[data-sky=night] .hero .trust{color:#d4daf2}
html[data-sky=night] .road .cloud{opacity:calc(var(--o)*.45)}
.fx-eyes{transform-box:fill-box;transform-origin:center;animation:fxBlink 5s infinite}
@keyframes fxBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.fx-awake path[d^="M150 42"]{opacity:0}
.bus path[d^="M172 75"]{transition:d .3s}
.fx-hl,.fx-glint{transform-box:fill-box;transform-origin:center}
.fx-hl{animation:fxHl 3s ease-in-out infinite}
.fx-glint{opacity:0;animation:fxGlint 3s ease-in-out infinite}
.fx-eyes g+ellipse+g .fx-hl,.fx-eyes g+ellipse+g .fx-glint{animation-delay:-.4s}
@keyframes fxHl{0%,55%,100%{opacity:.85;transform:scale(.9);filter:none}70%{opacity:1;transform:scale(1.5);fill:#fff3a6;filter:drop-shadow(0 0 1.2px #ffe066) drop-shadow(0 0 3px #ffc53d)}}
@keyframes fxGlint{0%,58%,90%,100%{opacity:0;transform:scale(.3) rotate(0)}72%{opacity:1;transform:scale(1.6) rotate(45deg);fill:#ffe066;filter:drop-shadow(0 0 2px #ffc53d)}}
.fx-eyes ellipse{animation:fxLit 3s ease-in-out infinite}
@keyframes fxLit{0%,55%,100%{filter:none}70%{fill:#fff8d6;filter:drop-shadow(0 0 2px #ffe066) drop-shadow(0 0 6px #ffc53d)}}
.fx-route{position:fixed;right:22px;top:90px;bottom:120px;width:4px;z-index:40;cursor:pointer;touch-action:none}
.fx-route:before{content:"";position:absolute;inset:-10px -14px}
.fx-route.drag,.fx-route.drag .fx-bus{cursor:grabbing}
.fx-route.drag .fx-bus,.fx-route.drag .fx-done{transition:none}
html.fx-noscroll{scrollbar-width:none}
html.fx-noscroll::-webkit-scrollbar{display:none}
.fx-line,.fx-done{position:absolute;left:1.25px;top:0;width:1.5px;border-radius:2px}
.fx-line{bottom:0;background:repeating-linear-gradient(rgba(140,150,180,.6) 0 4px,transparent 4px 9px)}
.fx-done{background:linear-gradient(#ff8f4d,#ff6a3d 60%,#ff5f9e);box-shadow:0 0 6px rgba(255,106,61,.35);transition:height .15s linear}
.fx-stop{position:absolute;left:2px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px rgba(120,130,165,.55),0 2px 6px rgba(24,32,58,.15);cursor:pointer;transition:.35s}
.fx-stop:hover{transform:scale(1.35)}
.fx-stop.on{background:#fff;box-shadow:0 0 0 2.5px var(--coral),0 0 0 6px rgba(255,122,89,.16),0 0 12px rgba(255,122,89,.5)}
.fx-stop span{position:absolute;right:20px;top:50%;translate:0 -50%;padding:4px 10px;border-radius:999px;background:var(--text);color:#fff;font-size:12px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s}
.fx-stop:hover span,.fx-route.arrived .fx-end span{opacity:1}
.fx-end{width:13px;height:13px;margin:-6.5px 0 0 -6.5px;background:radial-gradient(var(--text) 34%,#fff 38%);box-shadow:0 0 0 1.5px var(--text),0 2px 8px rgba(24,32,58,.2)}
.fx-end.on{background:radial-gradient(var(--coral) 34%,#fff 38%)}
.fx-bus{position:absolute;display:block;left:2px;width:46px;translate:-50% -50%;rotate:90deg;transition:top .15s linear,rotate .4s;filter:drop-shadow(0 4px 6px rgba(40,60,140,.25));cursor:grab}
.fx-bus.up{rotate:-90deg;scale:1 -1}
.fx-bus svg{display:block;width:100%;animation:bounce .5s ease-in-out infinite alternate}
.fx-arrive{position:absolute;right:22px;bottom:-6px;padding:6px 12px;border-radius:999px;background:var(--grad);color:#fff;font-size:13px;font-weight:800;font-style:normal;white-space:nowrap;opacity:0;translate:10px 0;transition:.4s;pointer-events:none}
.fx-route.arrived .fx-arrive{opacity:1;translate:0 0}
.fx-route.arrived .fx-end span{display:none}