/* Original rendered Milo, with quiet contextual props. No layout animation. */
span.milo-scene{--milo-size:48px;position:relative;display:inline-grid;place-items:center;flex:0 0 auto;width:var(--milo-size);height:var(--milo-size);isolation:isolate;pointer-events:none;vertical-align:middle}
span.milo-scene[data-milo-size="40"]{--milo-size:40px}
span.milo-scene[data-milo-size="44"]{--milo-size:44px}
span.milo-scene[data-milo-size="48"]{--milo-size:48px}
span.milo-scene[data-milo-size="52"]{--milo-size:52px}
span.milo-scene[data-milo-size="56"]{--milo-size:56px}
span.milo-scene[data-milo-size="64"]{--milo-size:64px}
span.milo-scene[data-milo-size="154"]{--milo-size:154px}
.milo-scene>img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 78%;animation:none}
.milo-prop{position:absolute;right:-5%;bottom:0;display:grid;place-items:center;width:47%;height:47%;color:#686c54;transform:rotate(-8deg);filter:drop-shadow(0 2px 1px #283b2418)}
.milo-prop svg{display:block;width:100%;height:100%}
.milo-scene[data-milo-context=food] .milo-prop{color:#8a7048;transform:rotate(8deg)}
.milo-scene[data-milo-context=stay] .milo-prop{color:#786582}
.milo-scene[data-milo-context=charging] .milo-prop{color:#567448}
.milo-scene[data-milo-context=fuel] .milo-prop{color:#8b674d}
.milo-scene[data-milo-context=rest] .milo-prop{color:#79644c;transform:rotate(0)}
.milo-scene[data-milo-context=notice] .milo-prop{width:36%;height:36%;padding:2px;border:1px solid #d9d9cd;border-radius:50%;background:#f5f2e9;color:#736d52}
.milo-scene>img[data-milo-state=think][data-milo-playing=true]+.milo-prop{animation:milo-prop-consider 3000ms cubic-bezier(.37,0,.63,1) 120ms infinite backwards}
.milo-scene[data-milo-context=food]>img[data-milo-playing=true]+.milo-prop{animation-name:milo-menu-open}
.milo-scene[data-milo-context=rest]>img[data-milo-playing=true]+.milo-prop,
.milo-scene[data-milo-context=fuel]>img[data-milo-playing=true]+.milo-prop,
.milo-scene[data-milo-context=charging]>img[data-milo-playing=true]+.milo-prop{animation:none}
.milo-scene>img[data-milo-playing=true]+.milo-prop .milo-steam{animation:milo-steam 3000ms cubic-bezier(.37,0,.63,1) 120ms infinite backwards}
.milo-scene>img[data-milo-playing=true]+.milo-prop .milo-gauge-needle{transform-origin:32px 38px;animation:milo-gauge 3000ms cubic-bezier(.37,0,.63,1) 120ms infinite backwards}
.milo-scene>img[data-milo-playing=true]+.milo-prop .milo-plug{animation:milo-plug 3000ms cubic-bezier(.37,0,.63,1) 120ms infinite backwards}
@keyframes milo-prop-consider{0%,100%{transform:rotate(-8deg)}50%{transform:translateY(-2px) rotate(1deg)}}
@keyframes milo-menu-open{0%,100%{transform:rotate(8deg)}50%{transform:rotate(-5deg) scaleX(.94)}}
@keyframes milo-steam{0%,100%{opacity:.4;transform:translateY(1px)}50%{opacity:.9;transform:translateY(-2px)}}
@keyframes milo-gauge{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}
@keyframes milo-plug{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.search-scene:has(.milo-scene){display:grid;place-items:center;width:154px;height:154px;margin:0 auto 18px;background:radial-gradient(circle at 50% 50%,#eef3e9 0 48%,transparent 49%)}
.search-scene .milo-scene{--milo-size:154px}
.search-scene .milo-scene>img{width:154px;height:154px;animation:none}
.search-scene .milo-prop{width:62px;height:62px;right:0;bottom:6%}
.search-scene .search-orbit{display:none}
.panel-heading .milo-scene{--milo-size:44px;margin-inline:4px 6px}
.panel-heading h1{flex:1;min-width:0}
.toast .milo-scene{--milo-size:48px;align-self:center}
.toast[data-kind=warning]{border-color:#c39b53}
.toast[data-kind=error]{border-color:#bd766b}
.toast[data-kind=success] .milo-prop{color:#345d40;background:#e8f1e4}
.toast[data-kind=warning] .milo-prop{color:#805b20;background:#fff1d4}
.toast[data-kind=error] .milo-prop{color:#8d433a;background:#f9e9e5}
/* Gestures use the idle artwork. Existing WebP clips are never double-animated. */
img[data-milo-playing=true][data-milo-state=confirm]{animation:milo-confirm 250ms cubic-bezier(.65,0,.35,1) both}
img[data-milo-playing=true][data-milo-state=notice]{animation:milo-notice 250ms cubic-bezier(.65,0,.35,1) both}
img[data-milo-playing=true][data-milo-state=warning]{animation:milo-attend 300ms cubic-bezier(.65,0,.35,1) both}
img[data-milo-playing=true][data-milo-state=error]{animation:milo-concern 350ms cubic-bezier(.65,0,.35,1) both}
@keyframes milo-confirm{0%,100%{transform:none}40%{transform:translateY(2px) rotate(3deg)}}
@keyframes milo-notice{0%,100%{transform:none}40%{transform:translateX(2px) rotate(-3deg)}}
@keyframes milo-attend{0%,100%{transform:none}40%,65%{transform:rotate(-4deg)}}
@keyframes milo-concern{0%,100%{transform:none}35%,65%{transform:translateY(2px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.milo-scene *{animation:none!important}}

[data-motorway-status]:has(.milo-scene){display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:6px 10px;margin:12px 0}
[data-motorway-status]:has(.milo-scene)>button{grid-column:2;justify-self:start}