:root{color-scheme:light;font-family:Segoe UI,ui-sans-serif,system-ui,-apple-system,sans-serif;line-height:1.6;--sky: #7dd3fc;--lavender: #c4b5fd;--mint: #86efac;--peach: #fdba74;--rose: #fda4af;--lemon: #fde68a;--ocean: #67e8f9;--deep-blue: #1e3a5f;--soft-white: #fefce8;--bg: #f0f9ff}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--bg);color:#1e293b;overflow-x:hidden}#root{min-height:100vh}.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;background:linear-gradient(160deg,#e0f2fe,#ede9fe 40%,#fce7f3,#fef9c3);position:relative;overflow:hidden}.hero:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 15% 25%,rgba(125,211,252,.3) 0%,transparent 40%),radial-gradient(circle at 85% 75%,rgba(253,186,116,.3) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(196,181,253,.2) 0%,transparent 50%);pointer-events:none}.hero-content{position:relative;z-index:1;max-width:48rem}.hero-emoji{font-size:5rem;margin-bottom:1rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.hero h1{font-size:clamp(2rem,6vw,3.5rem);font-weight:900;letter-spacing:-.03em;line-height:1.15;background:linear-gradient(135deg,#1e3a5f,#7c3aed,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.hero p{font-size:clamp(1rem,2.5vw,1.35rem);color:#475569;max-width:36rem;margin:0 auto 2rem;font-weight:600}.scroll-hint{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#7c3aed;font-size:1rem;animation:bounce 2s ease-in-out infinite;text-decoration:none;cursor:pointer;background:none;border:none}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}.section{padding:5rem 1.5rem;max-width:72rem;margin:0 auto}.section-header{text-align:center;margin-bottom:3rem}.section-header h2{font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;letter-spacing:-.02em;margin-bottom:.5rem}.section-header p{font-size:1.1rem;color:#64748b;font-weight:600;max-width:32rem;margin:0 auto}.why-section{background:linear-gradient(180deg,#fefce8,#fef9c3)}.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.5rem}.why-card{background:#fff;border-radius:1.25rem;padding:2rem 1.5rem;text-align:center;box-shadow:0 4px 24px #0000000f;border:2px solid transparent;transition:transform .25s,border-color .25s,box-shadow .25s}.why-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px #0000001a}.why-card:nth-child(1){border-color:var(--sky)}.why-card:nth-child(2){border-color:var(--lavender)}.why-card:nth-child(3){border-color:var(--mint)}.why-card .icon{font-size:2.5rem;margin-bottom:.75rem}.why-card h3{font-size:1.15rem;font-weight:800;margin-bottom:.5rem;color:var(--deep-blue)}.why-card p{font-size:.95rem;color:#64748b;line-height:1.6}.techniques-section{background:linear-gradient(180deg,#ede9fe,#e0e7ff)}.techniques-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:2rem}.technique-card{background:#fff;border-radius:1.5rem;overflow:hidden;box-shadow:0 4px 24px #0000000f;transition:transform .3s,box-shadow .3s;cursor:default}.technique-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px #0000001f}.technique-banner{padding:1.5rem;display:flex;align-items:center;gap:1rem}.technique-banner .step-num{width:2.75rem;height:2.75rem;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:1.15rem;color:#fff;flex-shrink:0}.technique-banner h3{font-size:1.2rem;font-weight:800;color:#1e293b}.technique-body{padding:0 1.5rem 1.5rem}.technique-body p{color:#475569;font-size:.95rem;line-height:1.7;margin-bottom:1rem}.how-to{background:#f8fafc;border-radius:.75rem;padding:1rem 1.25rem;border-left:4px solid}.how-to h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:#94a3b8;margin-bottom:.5rem;font-weight:700}.how-to ol{padding-left:1.25rem;color:#475569;font-size:.9rem;line-height:1.8}.banner-sky .step-num{background:#0ea5e9}.banner-sky{background:linear-gradient(135deg,#e0f2fe,#bae6fd)}.how-to-sky{border-color:#0ea5e9}.banner-lavender .step-num{background:#8b5cf6}.banner-lavender{background:linear-gradient(135deg,#ede9fe,#ddd6fe)}.how-to-lavender{border-color:#8b5cf6}.banner-mint .step-num{background:#22c55e}.banner-mint{background:linear-gradient(135deg,#ecfdf5,#d1fae5)}.how-to-mint{border-color:#22c55e}.banner-peach .step-num{background:#f97316}.banner-peach{background:linear-gradient(135deg,#fff7ed,#fed7aa)}.how-to-peach{border-color:#f97316}.banner-rose .step-num{background:#e11d48}.banner-rose{background:linear-gradient(135deg,#fff1f2,#fecdd3)}.how-to-rose{border-color:#e11d48}.banner-ocean .step-num{background:#06b6d4}.banner-ocean{background:linear-gradient(135deg,#ecfeff,#cffafe)}.how-to-ocean{border-color:#06b6d4}.timer-section{background:linear-gradient(180deg,#ecfdf5,#d1fae5);text-align:center}.timer-area{display:flex;flex-direction:column;align-items:center;gap:2rem}.timer-circle{width:14rem;height:14rem;border-radius:50%;border:8px solid #86efac;display:grid;place-items:center;background:#fff;box-shadow:0 8px 40px #22c55e26;transition:border-color .3s}.timer-circle.breathing{animation:breathe 8s ease-in-out infinite;border-color:#22c55e}@keyframes breathe{0%,to{transform:scale(1);border-color:#86efac}25%{transform:scale(1.08);border-color:#22c55e}50%{transform:scale(1);border-color:#4ade80}75%{transform:scale(1.08);border-color:#22c55e}}.timer-text{font-size:1.1rem;font-weight:700;color:#166534}.timer-seconds{font-size:3.5rem;font-weight:900;color:#15803d;line-height:1}.timer-controls{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.timer-btn{padding:.75rem 1.75rem;border-radius:2rem;border:none;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}.timer-btn:hover{transform:scale(1.05)}.btn-start{background:#22c55e;color:#fff;box-shadow:0 4px 16px #22c55e4d}.btn-reset{background:#fff;color:#166534;border:2px solid #86efac}.mood-section{background:linear-gradient(180deg,#fce7f3,#fecdd3);text-align:center}.mood-options{display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem;margin-bottom:2rem}.mood-btn{width:5.5rem;height:5.5rem;border-radius:1.25rem;border:3px solid transparent;background:#fff;font-size:2.25rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;box-shadow:0 2px 12px #0000000f;transition:transform .2s,border-color .2s,box-shadow .2s}.mood-btn span{font-size:.65rem;font-weight:700;color:#64748b}.mood-btn:hover{transform:scale(1.1)}.mood-btn.selected{border-color:#ec4899;box-shadow:0 4px 20px #ec489933}.mood-response{background:#fff;border-radius:1.25rem;padding:2rem;max-width:28rem;margin:0 auto;box-shadow:0 4px 24px #0000000f}.mood-response h3{font-size:1.2rem;font-weight:800;color:#be185d;margin-bottom:.75rem}.mood-response p{color:#475569;font-size:.95rem;line-height:1.7}.tips-section{background:linear-gradient(180deg,#fef9c3,#fef3c7)}.tips-carousel{display:flex;gap:1.5rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem 0 1.5rem;-webkit-overflow-scrolling:touch}.tips-carousel::-webkit-scrollbar{height:8px}.tips-carousel::-webkit-scrollbar-track{background:#fde68a;border-radius:4px}.tips-carousel::-webkit-scrollbar-thumb{background:#f59e0b;border-radius:4px}.tip-card{min-width:16rem;scroll-snap-align:start;background:#fff;border-radius:1.25rem;padding:1.75rem;box-shadow:0 4px 24px #0000000f;flex-shrink:0}.tip-card .tip-icon{font-size:2rem;margin-bottom:.75rem}.tip-card h3{font-size:1rem;font-weight:800;color:#92400e;margin-bottom:.5rem}.tip-card p{color:#64748b;font-size:.9rem;line-height:1.6}.pledge-section{background:linear-gradient(180deg,#e0e7ff,#c7d2fe);text-align:center}.pledge-box{background:#fff;border-radius:1.5rem;padding:2.5rem;max-width:36rem;margin:0 auto;box-shadow:0 8px 40px #6366f126;border:3px solid #a5b4fc}.pledge-box .pledge-emoji{font-size:3rem;margin-bottom:1rem}.pledge-box p{font-size:1.1rem;color:#475569;line-height:1.8;margin-bottom:1.5rem;font-weight:600}.pledge-box p strong{color:#4338ca}.pledge-sign{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}.pledge-input{padding:.75rem 1.25rem;border:2px solid #c7d2fe;border-radius:2rem;font-family:inherit;font-size:1rem;font-weight:600;outline:none;width:14rem;transition:border-color .2s}.pledge-input:focus{border-color:#6366f1}.pledge-sign-btn{padding:.75rem 1.75rem;border-radius:2rem;border:none;background:#6366f1;color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .15s,background .2s}.pledge-sign-btn:hover{transform:scale(1.05);background:#4f46e5}.pledge-signed{font-size:1.25rem;font-weight:800;color:#4338ca;animation:pop .4s ease}@keyframes pop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.footer{text-align:center;padding:3rem 1.5rem;background:#1e293b;color:#94a3b8;font-size:.9rem;font-weight:600}.footer span{color:#f472b6}@media(max-width:640px){.section{padding:3rem 1rem}.techniques-grid,.why-grid{grid-template-columns:1fr}.mood-btn{width:4.5rem;height:4.5rem;font-size:1.75rem}.timer-circle{width:11rem;height:11rem}}