*{box-sizing:border-box;margin:0}
html,body{height:100%;color:var(--ink);font-family:"Quicksand","Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;overflow:hidden;background:linear-gradient(180deg,#0E2B2A,#0A2020);transition:color 1.2s}
#wash{position:fixed;inset:0;opacity:0;background:var(--cr);transition:opacity 1.4s;overflow:hidden}
body.color #wash{opacity:1}
#wash i{position:absolute;aspect-ratio:1;border-radius:58% 42% 55% 45%/48% 56% 44% 52%;opacity:0;transform:scale(.2);transition:transform 1.8s cubic-bezier(.2,.9,.2,1),opacity 1s;animation:float 10s ease-in-out infinite alternate}
body.color #wash i{opacity:1;transform:none}
#wash i:nth-child(1){width:62%;top:-14%;right:-22%;background:var(--am)}
#wash i:nth-child(2){width:50%;top:34%;left:-24%;background:var(--mi);animation-delay:-3s}
#wash i:nth-child(3){width:58%;top:62%;right:-28%;background:var(--vi);animation-delay:-6s}
#wash i:nth-child(4){width:46%;bottom:-14%;left:-14%;background:var(--g);animation-delay:-9s}
@keyframes float{to{translate:12px -16px;rotate:8deg}}
#app{position:relative;height:100%;max-width:460px;margin:auto;overflow:hidden}
.scr{position:absolute;inset:0;display:none;flex-direction:column;gap:14px;padding:20px 20px 0;overflow-y:auto}
.scr.on{display:flex;animation:in .6s both}@keyframes in{from{opacity:0}}
.center{align-items:center;justify-content:safe center;text-align:center;padding-bottom:20px}
h1{font-size:33px;line-height:1.06;letter-spacing:-.02em;font-weight:700}h2{font-size:27px;line-height:1.1;letter-spacing:-.02em;font-weight:700}
.s{color:var(--mute);font-size:16px;line-height:1.45;max-width:310px;font-weight:600}.q{font-size:18px;line-height:1.4;font-weight:600}
.sp{flex:1}.row{display:flex;gap:8px}.wrap{flex-wrap:wrap}.center .wrap{justify-content:center}
.stack{display:flex;flex-direction:column;gap:10px;width:100%}
.top{display:flex;align-items:center;gap:12px}
.tl{font-size:11px;letter-spacing:.22em;color:var(--mute);max-width:250px;line-height:1.7;font-weight:700}