:root{--pink: #ff6b9d;--purple: #c084fc;--blue: #60a5fa;--green: #4ade80;--yellow: #fbbf24;--orange: #fb923c;--red: #f87171;--teal: #2dd4bf;--bg: #fefce8;--card-bg: #ffffff;--text: #1e293b;--text-light: #64748b;font-family:Segoe UI,Comic Sans MS,cursive,sans-serif;line-height:1.6}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body{background-image:radial-gradient(circle at 10% 20%,rgba(255,107,157,.08) 0%,transparent 50%),radial-gradient(circle at 90% 80%,rgba(96,165,250,.08) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(192,132,252,.06) 0%,transparent 50%)}.app{max-width:960px;margin:0 auto;padding:1.5rem}.header{text-align:center;padding:2.5rem 1rem 2rem}.header-emoji{font-size:3.5rem;display:block;margin-bottom:.75rem;animation:bounce 2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.header h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,var(--pink),var(--purple),var(--blue));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.header p{font-size:1.1rem;color:var(--text-light);max-width:500px;margin:0 auto}.section-title{text-align:center;margin:2.5rem 0 1.5rem;font-size:1.6rem;font-weight:700;color:var(--text)}.section-title span{display:block;font-size:2rem;margin-bottom:.25rem}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}.behavior-card{background:var(--card-bg);border-radius:1.25rem;padding:1.75rem 1.5rem;border:2px solid transparent;box-shadow:0 2px 12px #0000000f;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;cursor:default;position:relative;overflow:hidden}.behavior-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:1.25rem 1.25rem 0 0}.behavior-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.behavior-card.pink:before{background:var(--pink)}.behavior-card.purple:before{background:var(--purple)}.behavior-card.blue:before{background:var(--blue)}.behavior-card.green:before{background:var(--green)}.behavior-card.yellow:before{background:var(--yellow)}.behavior-card.orange:before{background:var(--orange)}.behavior-card.teal:before{background:var(--teal)}.behavior-card.red:before{background:var(--red)}.behavior-card.pink:hover{border-color:var(--pink)}.behavior-card.purple:hover{border-color:var(--purple)}.behavior-card.blue:hover{border-color:var(--blue)}.behavior-card.green:hover{border-color:var(--green)}.behavior-card.yellow:hover{border-color:var(--yellow)}.behavior-card.orange:hover{border-color:var(--orange)}.behavior-card.teal:hover{border-color:var(--teal)}.behavior-card.red:hover{border-color:var(--red)}.card-emoji{font-size:2.5rem;margin-bottom:.75rem;display:block}.behavior-card h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem;color:var(--text)}.behavior-card p{font-size:.95rem;color:var(--text-light);line-height:1.55}.tips-list{list-style:none;display:flex;flex-direction:column;gap:.75rem;max-width:600px;margin:0 auto}.tip-item{background:var(--card-bg);border-radius:1rem;padding:1rem 1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 8px #0000000d;font-size:1rem;transition:transform .15s ease}.tip-item:hover{transform:translate(6px)}.tip-emoji{font-size:1.6rem;flex-shrink:0}.pledge{background:linear-gradient(135deg,var(--purple),var(--blue));border-radius:1.5rem;padding:2.5rem 2rem;text-align:center;color:#fff;margin:2.5rem 0;box-shadow:0 4px 20px #c084fc40}.pledge h2{font-size:1.6rem;font-weight:800;margin-bottom:1rem}.pledge-text{font-size:1.1rem;line-height:1.8;max-width:550px;margin:0 auto;opacity:.95}.star-section{text-align:center;margin:2rem 0}.star-section h2{font-size:1.4rem;font-weight:700;margin-bottom:1rem}.star-row{display:flex;justify-content:center;gap:.5rem;margin-bottom:.75rem}.star{font-size:2.5rem;cursor:pointer;transition:transform .15s ease;filter:grayscale(1) opacity(.3)}.star.active{filter:none;animation:pop .3s ease}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.star:hover{transform:scale(1.2)}.star-label{font-size:1rem;color:var(--text-light);font-weight:600}.footer{text-align:center;padding:2rem 1rem;color:var(--text-light);font-size:.9rem}.footer-hearts{font-size:1.4rem;display:block;margin-bottom:.5rem}@media(max-width:600px){.header h1{font-size:1.7rem}.card-grid{grid-template-columns:1fr}.pledge{padding:2rem 1.25rem}}