/* Porcelain, glass and small functional stories, shared by all four skins. */
.page-illustration{--ha-white:#fffffa;--ha-shade:#c5ddcf;--ha-accent:#aace7a;--ha-metal:#83aaa0;--ha-metal-light:#dbece3;--ha-stroke:#215d48;--ha-glass:#d2e8db88;--ha-soft:#b4d1bc;--ha-shadow:#255d4720;background:radial-gradient(ellipse at 28% 20%,#ffffff55,transparent 60%),var(--panel);border-radius:44% 56% 42% 58%;overflow:visible}
.page-hero>div{min-width:0}.page-illustration{min-width:0;width:100%}.page-illustration:before{display:none}.page-illustration-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 15px 18px #153e2d0c)}
.page-illustration .ha-tooth{fill:var(--ha-porcelain);stroke:var(--ha-stroke);stroke-opacity:.58;stroke-width:2.3;stroke-linejoin:round;stroke-linecap:round;shape-rendering:geometricPrecision}
.ha-metal{fill:var(--ha-metal-gradient);stroke:var(--ha-stroke);stroke-width:2;stroke-linejoin:round}.ha-bone{fill:var(--ha-soft);stroke:var(--ha-stroke);stroke-width:2.3;stroke-linejoin:round}
.ha-accent-fill{fill:var(--ha-accent)}.ha-outline{stroke:var(--ha-stroke);stroke-width:2.3;stroke-linejoin:round}.ha-ground{fill:var(--ha-shadow)}
.ha-shine{stroke:#fff;stroke-width:6;stroke-linecap:round;opacity:.8}.ha-muted-line{stroke:var(--ha-stroke);stroke-opacity:.35;stroke-width:2.5;stroke-linecap:round;fill:none}
.ha-wire{stroke:var(--ha-stroke);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;fill:none}.ha-strong-line{stroke:var(--ha-stroke);stroke-width:3;stroke-linecap:round;fill:none}
.ha-accent-line{stroke:var(--ha-accent);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;fill:none}.ha-dashed{stroke:var(--ha-stroke);stroke-opacity:.6;stroke-width:2;stroke-dasharray:7 9;stroke-linecap:round;fill:none}
.ha-glass{fill:var(--ha-glass);stroke:var(--ha-stroke);stroke-width:2;stroke-opacity:.5}.ha-handle{stroke:var(--ha-stroke);stroke-width:14;stroke-linecap:round;fill:none}
.ha-thread{stroke:var(--ha-stroke);stroke-width:4;stroke-linecap:round;opacity:.65}.ha-scan-band{fill:var(--ha-accent);opacity:.25}.ha-repair{fill:var(--ha-accent);stroke:var(--ha-stroke);stroke-width:2}
.ha-badge-symbol{fill:var(--ha-stroke);font:500 36px Arial,sans-serif}.ha-smile-shadow{fill:var(--ha-stroke)}.ha-smile-line{stroke:var(--ha-stroke);stroke-width:27;stroke-linecap:round;fill:none}
.ha-face{stroke:var(--ha-stroke);stroke-width:5;stroke-linecap:round;fill:none}.ha-friendly-hand{stroke:var(--ha-stroke);stroke-width:9;stroke-linecap:round;fill:none}.ha-calendar-day{fill:var(--ha-soft);opacity:.6}.ha-lock-arch{stroke:var(--ha-metal);stroke-width:27;stroke-linecap:round;fill:none}
.ha-guide{stroke:var(--ha-stroke);stroke-opacity:.12;stroke-width:1;stroke-dasharray:3 9}.ha-tick{stroke:var(--ha-stroke);stroke-opacity:.25;stroke-width:1.5}.ha-dot{fill:var(--ha-accent)}
.ha-composition{transform-origin:280px 240px;animation:ha-breathe 7s ease-in-out infinite alternate}.ha-detail{animation:ha-detail-float 4.5s ease-in-out infinite alternate}.ha-twinkle{animation:ha-glimmer 3s ease-in-out infinite alternate}.ha-twinkle:nth-child(odd){animation-delay:-1.4s}.ha-scanner{animation-name:ha-scan;animation-duration:5s}
.hero-mascot{display:none;position:absolute;right:-1%;top:0;width:84px;height:84px;z-index:4;padding:0;background:none;border:0;cursor:pointer;transform:rotate(12deg);pointer-events:auto}
.hero-mascot>img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(3px 4px 0 #16244b22);animation:ha-mascot-idle 4.6s ease-in-out infinite alternate}.hero-mascot>span{position:absolute;white-space:nowrap;right:0;top:-20px;color:#16244b;background:#fffaf0;border:1.5px solid #16244b;border-radius:15px;padding:4px 8px;font-size:10px;opacity:0;transition:opacity .2s;transform:rotate(-12deg)}.hero-mascot:hover>span,.hero-mascot:focus-visible>span{opacity:1}
:root[data-theme=dark] .page-illustration{--ha-white:#eff6e9;--ha-shade:#75978c;--ha-accent:#d8f58c;--ha-metal:#588779;--ha-metal-light:#bed5c8;--ha-stroke:#c4e7b5;--ha-glass:#74ae9850;--ha-soft:#376c56;--ha-shadow:#0003}
:root[data-theme=light] .page-illustration{--ha-shade:#dce7de;--ha-accent:#94b599;--ha-metal:#a7bdb3;--ha-soft:#d8e4d3}
:root[data-theme=akita] .page-illustration{--ha-white:#fffdf2;--ha-shade:#b9d3ff;--ha-accent:#ffad63;--ha-metal:#7caaff;--ha-metal-light:#d7e6ff;--ha-stroke:#16244b;--ha-glass:#c7e6ff90;--ha-soft:#ffd4a5;--ha-shadow:#2452e81a;background:radial-gradient(ellipse at 28% 20%,#ffffff66,transparent 65%),#bed9ff}
:root[data-theme=akita] .hero-mascot{display:block}:root[data-theme=akita] .ha-tooth{stroke-opacity:1;stroke-width:3}:root[data-theme=akita] .ha-accent-line{stroke:#2452e8}:root[data-theme=akita] .ha-guide{stroke-opacity:.22}
.pm-zone .ha-composition,.pm-zone .ha-detail,.pm-zone .ha-twinkle,.pm-zone .hero-mascot>img{animation-play-state:paused!important}
:root[data-page-motion=on] .pm-zone[data-pm-visible=true] .ha-composition,:root[data-page-motion=on] .pm-zone[data-pm-visible=true] .ha-detail,:root[data-page-motion=on] .pm-zone[data-pm-visible=true] .ha-twinkle,:root[data-page-motion=on] .pm-zone[data-pm-visible=true] .hero-mascot>img{animation-play-state:running!important}
body.readable .page-illustration{display:none}
@keyframes ha-breathe{from{transform:translateY(4px) rotate(-1deg)}to{transform:translateY(-7px) rotate(1deg)}}
@keyframes ha-detail-float{from{translate:0 0}to{translate:0 -9px}}@keyframes ha-glimmer{from{opacity:.5;scale:.82}to{opacity:1;scale:1.08}}@keyframes ha-scan{0%,100%{translate:0 -12px}50%{translate:0 22px}}@keyframes ha-mascot-idle{from{transform:translateY(3px) rotate(-5deg)}to{transform:translateY(-5px) rotate(5deg)}}
@media(max-width:700px){.page-illustration-svg{width:100%}.hero-mascot{width:65px;height:65px;right:1%;top:0}.hero-mascot>span{font-size:9px;top:-17px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion-preference=on]) .page-illustration *{animation:none!important}}