:root{--bg-color: #FBE9E7;--bg-alt: #FFF5F2;--accent-primary: #FF2D87;--accent-soft: #FFB3D1;--accent-deep: #2D0A1F;--text-primary: #2D0A1F;--text-secondary: #7A5A66;--text-on-dark: #FBE9E7;--card-bg: #FFFFFF;--card-border: rgba(255, 45, 135, .18);--card-border-soft: rgba(255, 45, 135, .1);--shadow-soft: 0 20px 40px rgba(255, 45, 135, .08);--shadow-pill: 0 10px 25px rgba(255, 45, 135, .35)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-color);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden;padding:24px 20px 40px;position:relative}.nebula-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:var(--bg-color);overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}.orb-1{top:-8%;right:-12%;width:55%;height:40%;background:var(--accent-soft);opacity:.7;animation:pulse-orb 8s infinite ease-in-out}.orb-2{bottom:-15%;left:-20%;width:60%;height:45%;background:#ffd9e5;opacity:.5;animation:pulse-orb 10s infinite ease-in-out;animation-delay:-3s}.orb-3{display:none}@keyframes pulse-orb{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.08);opacity:.7}}#app{width:100%;max-width:460px;z-index:10}.masthead{display:flex;justify-content:space-between;align-items:center;padding:0 4px 28px;border-bottom:1px solid var(--card-border-soft);margin-bottom:28px}.masthead-brand{font-family:Fraunces,Playfair Display,Georgia,serif;font-size:1.15rem;font-weight:600;color:var(--accent-deep);letter-spacing:-.01em}.masthead-brand em{color:var(--accent-primary);font-style:italic;font-weight:600;margin-left:2px}.masthead-meta{font-size:.62rem;font-weight:600;color:var(--text-secondary);letter-spacing:.18em;text-transform:uppercase}.menu-indicator{position:fixed;top:calc(20px + env(safe-area-inset-top));right:calc(15px + env(safe-area-inset-right));z-index:9999;animation:bounceDiagonal 2.5s infinite ease-in-out,fadeIn 1s ease-out both;animation-delay:1s}.indicator-main{display:flex;align-items:center;gap:12px}.indicator-text-group{display:flex;flex-direction:column;align-items:flex-end}#indicator-text{background:var(--accent-primary);color:#fff;padding:7px 14px;border-radius:999px;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--shadow-pill);white-space:nowrap}#indicator-extra{font-size:.6rem;font-weight:600;color:var(--accent-primary);margin-top:4px;letter-spacing:.04em}.indicator-arrow-svg{width:30px;height:30px;color:var(--accent-primary);filter:drop-shadow(0 4px 10px rgba(255,45,135,.4));margin-top:-22px;align-self:flex-start}@keyframes bounceDiagonal{0%,to{transform:translate(0)}50%{transform:translate(4px,-4px)}}.content-wrapper{display:flex;flex-direction:column}.stagger-1{animation:fadeIn .8s ease-out both .2s}.stagger-2{animation:fadeIn .8s ease-out both .4s}.stagger-3{animation:fadeIn .8s ease-out both .6s}.stagger-4{animation:fadeIn .8s ease-out both .8s}@keyframes fadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}header{display:flex;justify-content:center;margin-bottom:24px}.logo-container{position:relative;width:110px;height:110px;display:flex;justify-content:center;align-items:center}.logo{width:100%;height:auto;z-index:2;border-radius:26px;box-shadow:0 18px 40px #ff2d8740}.logo-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150%;height:150%;background:radial-gradient(circle,rgba(255,179,209,.6) 0%,transparent 65%);z-index:1;filter:blur(24px);animation:pulse 4s infinite ease-in-out}@keyframes pulse{0%,to{opacity:.6;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.08)}}main{display:flex;flex-direction:column}.eyebrow{font-size:.7rem;font-weight:600;color:var(--accent-primary);letter-spacing:.22em;text-transform:uppercase;text-align:center;margin-bottom:18px}h1{font-family:Fraunces,Playfair Display,Georgia,serif;font-size:2.6rem;font-weight:600;letter-spacing:-.02em;line-height:1.05;color:var(--accent-deep);text-align:center;margin-bottom:18px}h1 em{color:var(--accent-primary);font-style:italic;font-weight:600}#subtitle{font-family:Fraunces,Playfair Display,Georgia,serif;font-size:1.05rem;font-style:italic;color:var(--text-secondary);line-height:1.5;text-align:center;margin-bottom:32px;padding:0 12px}.steps-card{background:var(--card-bg);border:1px solid var(--card-border-soft);border-radius:28px;padding:28px 24px;display:flex;flex-direction:column;gap:22px;text-align:left;box-shadow:var(--shadow-soft);transition:transform .3s ease-out,box-shadow .3s ease-out}.steps-card:hover{transform:translateY(-2px);box-shadow:0 24px 48px #ff2d871f}.step{display:flex;align-items:center;gap:18px}.step-number{width:38px;height:38px;min-width:38px;background:var(--bg-alt);color:var(--accent-primary);border-radius:50%;display:flex;justify-content:center;align-items:center;font-family:Fraunces,Playfair Display,Georgia,serif;font-style:italic;font-weight:600;font-size:1.05rem;border:1px solid var(--card-border)}.step-text{font-size:.98rem;color:var(--text-primary);line-height:1.45}.step-text strong{color:var(--accent-primary);font-weight:600}.tip-card{background:var(--bg-alt);border:1px solid var(--card-border-soft);border-radius:18px;padding:16px 18px;margin-top:18px;position:relative}.tip-card:before{content:"BIOTIP";position:absolute;top:-8px;left:16px;background:var(--bg-color);padding:0 8px;font-size:.6rem;font-weight:700;letter-spacing:.18em;color:var(--accent-primary)}#tip{font-family:Fraunces,Playfair Display,Georgia,serif;font-size:.92rem;color:var(--text-secondary);font-style:italic;line-height:1.45}@media (max-width: 480px){body{padding:20px 18px 32px}.masthead{padding-bottom:22px;margin-bottom:22px}h1{font-size:2.1rem}#subtitle{font-size:.95rem;margin-bottom:24px}.steps-card{padding:22px 18px;gap:18px;border-radius:24px}.step-text{font-size:.9rem}.step-number{width:34px;height:34px;min-width:34px;font-size:1rem}.logo-container{width:96px;height:96px}}@media (max-width: 360px){h1{font-size:1.85rem}.eyebrow{font-size:.65rem}}
