.dandelion-test{height:1080svh;background:#b8dce8}

.dandelion-test .bloom-stage{background:#b8dce8;min-height:0}

.dandelion-test .bloom-wash,.dandelion-test .bloom-orbit,.dandelion-test .bloom-watermark{display:none}

.dandelion-test .bloom-visual{z-index:1}

.dandelion-test .bloom-intro{top:9%}

.dandelion-test .bloom-intro h2{font-size:clamp(30px,3.5vw,54px)}

.dandelion-test .bloom-description{font-size:16px}

.dandelion-test .bloom-eyebrow{color:#355e76}

.dandelion-test .bloom-finale{bottom:13%}

.dandelion-test .bloom-finale::before{content:'';position:absolute;inset:-25px -35px;z-index:-1;background:radial-gradient(ellipse,#f7faf0a8 12%,#f7faf060 46%,transparent 73%);filter:blur(12px);pointer-events:none}

.dandelion-test .bloom-story::before{background:radial-gradient(ellipse,#f5faf2b0,transparent 74%)}

.test-comparison{position:fixed;right:16px;bottom:16px;z-index:9999;padding:10px 17px;background:#ffffffde;border:1px solid #fff;border-radius:30px;color:#274e66;font:12px sans-serif;box-shadow:0 3px 16px #2344}

@media(max-width:680px){.dandelion-test{height:960svh}.dandelion-test .bloom-intro{top:9%}.dandelion-test .bloom-intro h2{font-size:30px}.dandelion-test .bloom-story{bottom:14%}.dandelion-test .bloom-finale{bottom:15%}.dandelion-test .bloom-finale h3{font-size:30px}.dandelion-test .bloom-description{font-size:14px}}



/* Reading veils follow the text only, leaving the landscape clear. */

.dandelion-test .bloom-copy,.dandelion-test .bloom-story{isolation:isolate}

.dandelion-test .bloom-copy::before,.dandelion-test .bloom-story::before{content:'';display:block;position:absolute;inset:-24px -30px;z-index:-1;background:radial-gradient(ellipse,#ffffffed 12%,#f8fcffd9 44%,#f7fbff77 65%,transparent 82%);filter:blur(10px);pointer-events:none}

@media(max-width:680px){.dandelion-test .bloom-copy::before,.dandelion-test .bloom-story::before{inset:-20px -18px;filter:blur(8px)}}


/* Keep the opening title directly on the clear sky. */
.dandelion-test .bloom-intro::before{display:none}

/* Larger side captions, with enough width to keep the intended line breaks. */
.dandelion-test .bloom-story h3{font-size:clamp(38px,3.5vw,58px);line-height:1.28}
@media(min-width:901px){.dandelion-test .bloom-story{width:28%;max-width:440px}}
@media(min-width:681px) and (max-width:900px){.dandelion-test .bloom-story{width:36%}.dandelion-test .bloom-story h3{font-size:38px}}
@media(max-width:680px){.dandelion-test .bloom-story h3{font-size:clamp(36px,10.25vw,42px);line-height:1.28}}