.solar-intro{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;border:0;padding:0;background:#f47721;color:#fff9eb;overflow:auto;z-index:10000;font-family:Manrope,Arial,sans-serif}
.solar-intro::backdrop{background:#f47721}
.intro-skip{position:absolute;top:24px;right:28px;z-index:2;background:#fff1;color:#46210e;border:1px solid #64351366;border-radius:30px;padding:10px 18px;font:600 13px Manrope,Arial,sans-serif}
.intro-skip:hover{background:#fff4}.solar-intro button:focus-visible{outline:3px solid #173b54;outline-offset:5px}
.intro-content{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:55px 24px 26px;box-sizing:border-box;text-align:center;overflow:hidden}
.intro-kicker{font-size:12px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin:0 0 8px;color:#492612}
.intro-logo{position:relative;z-index:1}.intro-logo h1{font-size:clamp(58px,9vw,116px);font-weight:900;letter-spacing:-.065em;line-height:1.1;margin:0;color:#fff9eb;-webkit-text-stroke:2px #293440;paint-order:stroke fill;text-shadow:3px 5px 0 #293440}
.intro-logo h1 span{display:inline-block;animation:intro-letter .65s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.15s + var(--letter)*.075s)}
.intro-bolt{position:absolute;left:-65px;top:4px;color:#fff292;font-size:110px;line-height:1;transform:rotate(10deg);animation:intro-lightning 1.1s .15s both;pointer-events:none;text-shadow:2px 3px 0 #293440}
.intro-art{width:min(390px,58vh,80vw);aspect-ratio:1;margin:-4px 0 -20px;animation:intro-house 1s .3s both}.intro-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:normal;border-radius:50%;mask-image:radial-gradient(ellipse,black 52%,transparent 73%)}
.intro-caption{font-size:17px;font-weight:600;margin:0 0 20px;color:#492612;animation:intro-letter .7s .7s both}
.intro-enter{display:flex;align-items:center;gap:24px;border:2px solid #3e291d;background:#fff8e7;color:#3e291d;border-radius:14px;padding:15px 26px;font:bold 15px Manrope,Arial,sans-serif;box-shadow:0 5px 0 #803b1f;transition:transform .15s,box-shadow .15s}.intro-enter:hover{transform:translateY(-2px);box-shadow:0 7px 0 #803b1f}.intro-enter span{font-size:24px;line-height:1;color:#c34b0b}
.intro-progress{height:3px;width:110px;background:#75360e33;margin-top:24px;overflow:hidden;border-radius:4px}.intro-progress span{display:block;background:#fff6db;height:100%;transform-origin:left;animation:intro-progress 5.8s linear both}
@keyframes intro-letter{from{opacity:0;transform:translateY(30px) rotate(5deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes intro-house{from{opacity:0;transform:translateY(35px) scale(.8) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes intro-lightning{0%{opacity:0;transform:translateX(-40vw) rotate(10deg)}35%{opacity:1}65%{transform:translateX(40vw) rotate(10deg)}66%{opacity:0}100%{opacity:1;transform:translateX(0) rotate(10deg)}}
@keyframes intro-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:600px){.intro-skip{top:16px;right:16px}.intro-kicker{font-size:10px;letter-spacing:.09em}.intro-bolt{font-size:65px;left:-32px;top:1px}.intro-content{padding-top:70px}.intro-caption{font-size:15px}.intro-art{width:min(340px,45vh,87vw)}}
@media(prefers-reduced-motion:reduce){.solar-intro *{animation:none!important;transition:none!important}.intro-progress{display:none}}
@media print{.solar-intro{display:none!important}}

/* The title doubles as the welcome screen's enter button. */
.intro-logo h1{font-size:inherit;text-shadow:none;-webkit-text-stroke:0}
.intro-title-button{display:block;border:3px solid #293440;border-radius:50%;background:#ffdc55;color:#293440;padding:20px 52px 26px;font:900 clamp(48px,8vw,100px)/1.1 Manrope,Arial,sans-serif;letter-spacing:-.065em;box-shadow:0 7px 0 #293440;cursor:pointer;transition:transform .18s,box-shadow .18s}
.intro-title-button:hover{transform:translateY(-3px);box-shadow:0 10px 0 #293440;background:#ffe578}
.intro-title-button:active{transform:translateY(4px);box-shadow:0 3px 0 #293440}
.intro-hint{margin:0;color:#492612;font-size:14px;font-weight:700;letter-spacing:.03em}
.intro-kicker{margin-bottom:20px}.intro-art{margin-top:8px}.intro-caption{margin-bottom:12px}
@media(max-width:600px){.intro-title-button{font-size:clamp(40px,11vw,66px);padding:20px 30px 24px}.intro-bolt{left:-24px;top:18px}.intro-kicker{max-width:270px;line-height:1.6}}

/* A quieter welcome, with the house leading the composition. */
.solar-intro,.solar-intro::backdrop{background:#fff8ec}
.intro-content{padding-top:60px;padding-bottom:30px}
.intro-art{width:min(360px,44vh,78vw);margin:0 0 8px}
.intro-art img{mix-blend-mode:normal}
.intro-title-button{font-size:clamp(46px,7vw,82px);padding:16px 44px 22px}
.intro-caption{margin:24px 0 12px;color:#493b2e}
.intro-hint{color:#73604f;font-weight:500}
.intro-bolt{font-size:78px;left:-45px;top:14px;color:#f6b928}
.intro-skip{background:transparent;color:#493b2e;border-color:#493b2e44}
@media(max-width:600px){.intro-art{width:min(310px,40vh,80vw)}.intro-title-button{font-size:clamp(40px,10vw,60px);padding:16px 28px 20px}.intro-bolt{font-size:58px;left:-28px;top:12px}}