.splash{min-height:100svh}
.frame{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 28px 86px;text-align:center}
.hero-content{display:flex;flex-direction:column;align-items:center;max-width:100%}
.mascot-art{position:relative;width:clamp(196px,32svh,296px);max-width:74vw;aspect-ratio:1;filter:drop-shadow(0 17px 13px #6c4d8a18)}
.mascot{display:block;width:100%;height:auto}
h1{max-width:min(100%,15em);margin:13px 0 14px;text-wrap:balance;font-family:"Baloo 2","Trebuchet MS",sans-serif;font-size:clamp(34px,4.8vw,58px);font-weight:600;line-height:1.13;letter-spacing:normal}
.description{max-width:460px;margin:0 0 27px;color:var(--quiet);font-size:clamp(16px,1.75vw,19px);font-weight:500;line-height:1.5;text-wrap:pretty}
.actions{display:flex;flex-direction:column;align-items:center;gap:19px;max-width:100%}
.install-well{display:inline-flex;max-width:100%;border-radius:999px;background:#857db9;box-shadow:0 2px 3px #6b63942e,inset 0 2px 4px #51497633}
.install{display:inline-flex;align-items:center;justify-content:center;min-height:52px;max-width:100%;padding:13px 27px;border:1px solid transparent;border-radius:999px;background:linear-gradient(#cecbf4,#aea7df) padding-box,linear-gradient(160deg,#f0edff,#c3bceb 42%,#9c92ce) border-box;color:#302745;transform:translateY(-5px);box-shadow:0 5px 0 #857db9,0 12px 24px #7770a625,inset 0 1px 1px #ffffffb3;font-size:15px;font-weight:650;text-align:center;line-height:1.3;text-decoration:none;cursor:pointer;transition:transform 170ms ease-out,box-shadow 170ms ease-out}
.install:hover,.install:focus-visible{transform:translateY(-8px);box-shadow:0 8px 0 #857db9,0 16px 26px #7770a62b,inset 0 1px 1px #ffffffb3}
.install:active{transform:translateY(0);box-shadow:0 0 0 #857db9,0 1px 3px #7770a61a,inset 0 2px 3px #8176ae33;transition-duration:70ms}
.install[aria-disabled="true"]{cursor:default}
.repository{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:37px;padding:8px 13px;border:1px solid #d0c3e2;border-radius:999px;background:#f8f4fe85;color:#5b426f;font-size:12px;font-weight:600;line-height:1.3;text-decoration:none;transition:background 160ms ease,border-color 160ms ease}
.repository:hover{background:#ffffffb3;border-color:#b59ccf}
.repository svg{width:16px;height:16px;flex:none;fill:currentColor}
.status{max-width:calc(100% - 36px);margin:24px auto 0;padding:9px 16px;border:1px solid #ffffff20;border-radius:999px;background:#4b355fe8;box-shadow:0 5px 18px #4b355f16;color:#faf6ff;font-size:13px;line-height:1.4;text-align:center;backdrop-filter:blur(8px)}
.meter-wrap,.fog{display:none}
/* Tagline switch: <html data-tagline="endless">. Each .tagline-* span hides unless selected. */
html:not([data-tagline="endless"]) .tagline-endless{display:none}
.enhanced .frame{padding-bottom:112px}
/* The footer rests under the fog, so it sinks away as resistance builds. */
.enhanced .site-footer{position:fixed;z-index:1;left:0;right:0;bottom:0;padding-block:10px max(10px,env(safe-area-inset-bottom))}
.enhanced .splash{height:calc(100svh + var(--travel))}
.enhanced .frame{height:100svh;min-height:0;position:sticky;top:0}
.enhanced .hero-content{transform:translateY(calc(var(--depth) * var(--content-travel) * -1 - var(--stretch) * .65));will-change:transform}
.enhanced .status{position:fixed;z-index:4;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 44px);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);margin:0;pointer-events:none}
.enhanced{overscroll-behavior-y:none}
.enhanced .meter-wrap{display:flex;align-items:center;gap:8px;position:fixed;z-index:3;right:6px;top:50%;transform:translateY(-50%)}
.meter{padding:7px;border:1px solid #af96ce73;border-radius:999px;background:#f8f3ffe0;box-shadow:0 2px 12px #6f4c9220;backdrop-filter:blur(8px)}
.meter-track{display:flex;align-items:flex-end;width:4px;height:88px;overflow:hidden;border-radius:2px;background:#a78dc32a}
.meter-fill{width:100%;height:var(--remaining);min-height:3%;border-radius:2px;background:linear-gradient(#bca1e1,#8b69b4);transition:height 140ms linear}
.meter-label{padding:7px 11px;border-radius:12px;background:#4b355fea;color:#faf6ff;font-size:11px;opacity:0;transition:opacity 140ms ease;pointer-events:none;white-space:nowrap}
.meter-wrap:hover .meter-label{opacity:1}
.enhanced .fog{display:block;position:fixed;z-index:2;left:0;right:0;bottom:0;height:42svh;pointer-events:none;opacity:var(--fog)}
.fog-blur,.fog-tint{position:absolute;inset:0}
.fog-blur{backdrop-filter:blur(7px);mask-image:linear-gradient(to top,#000 25%,transparent)}
.fog-tint{background:linear-gradient(to top,#cfbdebea,#ded1f28c 45%,transparent)}
@media(max-width:480px){.frame{padding-inline:27px}.description{max-width:330px}.mascot-art{width:clamp(176px,29svh,240px)}h1{max-width:330px;font-size:36px}.install{padding-inline:20px}.meter-label{display:none}}
@media(max-height:680px){.frame{padding-top:18px;padding-bottom:64px}.mascot-art{width:clamp(132px,27svh,206px)}h1{font-size:clamp(30px,4.3vw,44px);margin-block:7px 10px}.description{margin-bottom:20px;font-size:16px}.actions{gap:17px}.enhanced .frame{padding-bottom:88px}.enhanced .status{bottom:calc(max(6px,env(safe-area-inset-bottom)) + 36px)}.enhanced .site-footer{padding-block:6px max(6px,env(safe-area-inset-bottom))}:root{--content-travel:70px}}
@media(max-height:500px){.frame{padding-block:16px}.mascot-art{width:116px}h1{font-size:30px}.description{max-width:480px}.status{margin-block:20px}.enhanced .status{position:static;transform:none}}
@media(prefers-reduced-motion:reduce){.install,.repository,.meter-fill,.meter-label{transition:none}.install,.install:hover,.install:focus-visible,.install:active{transform:none}.enhanced .hero-content{transform:translateY(calc(var(--depth) * var(--content-travel) * -1));will-change:auto}}