:root{--pink:#ff71ce;--yellow:#ffce5c;--teal:#86ccca;--purple:#6a7bb4;--peach:#fdbcb4;--mint:#98ff98;--lilac:#e6e6fa;--baby-blue:#add8e6;--bg:#fff5f0;--bg-card:#fff;--text:#2d2b55;--text-soft:#6b6b8d;--border-color:#2d2b55;--radius:20px;--radius-lg:28px;--radius-pill:50px;--border-w:3px;--shadow-clay:6px 6px 0px #00000014, inset -2px -2px 6px #0000000a;--shadow-clay-hover:8px 8px 0px #0000001f, inset -2px -2px 6px #0000000a;--shadow-float:0 20px 60px #00000014;--font-display:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--gap:20px;--gap-lg:40px;--bounce:cubic-bezier(.34, 1.56, .64, 1);--smooth:cubic-bezier(.4, 0, .2, 1)}[data-theme=dark]{--bg:#1a1a2e;--bg-card:#16213e;--text:#e0e0ff;--text-soft:#a0a0c0;--border-color:#4a4a7a;--shadow-clay:6px 6px 0px #00000040, inset -2px -2px 6px #00000026;--shadow-clay-hover:8px 8px 0px #00000059, inset -2px -2px 6px #00000026;--shadow-float:0 20px 60px #0000004d}[data-theme=dark] .card--pink:before{background:var(--pink)}[data-theme=dark] .card--yellow:before{background:var(--yellow)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;transition:background .5s var(--smooth), color .3s var(--smooth);position:relative;overflow-x:hidden}#particle-canvas{z-index:0;pointer-events:none;opacity:.6;position:fixed;inset:0}#app{z-index:1;max-width:900px;padding:var(--gap-lg) var(--gap);margin:0 auto;position:relative}.theme-toggle{z-index:50;border:var(--border-w) solid var(--border-color);background:var(--bg-card);cursor:pointer;width:52px;height:52px;box-shadow:var(--shadow-clay);transition:transform .3s var(--bounce), box-shadow .3s var(--smooth), background .3s;border-radius:50%;justify-content:center;align-items:center;font-size:22px;line-height:1;display:flex;position:fixed;top:20px;right:20px}.theme-toggle:hover{box-shadow:var(--shadow-clay-hover);transform:scale(1.15)rotate(20deg)}.theme-toggle:active{transform:scale(.95)}.hero{text-align:center;opacity:0;animation:fade-up .8s var(--smooth) .1s forwards;padding:60px 0 40px}.hero__emoji{cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .3s var(--bounce);font-size:72px;animation:2s ease-in-out infinite wiggle;display:inline-block}.hero__emoji:hover{transform:scale(1.3)rotate(10deg)}.hero__emoji:active{transform:scale(.9)}.hero__title{font-family:var(--font-display);background:linear-gradient(135deg, var(--pink), var(--purple), var(--teal));-webkit-text-fill-color:transparent;background-size:200% 200%;-webkit-background-clip:text;background-clip:text;margin:16px 0 8px;font-size:clamp(2.5rem,6vw,4rem);font-weight:900;line-height:1.1;animation:4s ease-in-out infinite gradient-shift}.hero__sub{color:var(--text-soft);font-size:1.15rem;font-weight:500}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}@keyframes gradient-shift{0%,to{background-position:0%}50%{background-position:100%}}@keyframes fade-up{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.cards{gap:var(--gap);margin-top:var(--gap-lg);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));display:grid}.card{background:var(--bg-card);border:var(--border-w) solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-clay);transition:transform .3s var(--bounce), box-shadow .3s var(--smooth), background .3s;cursor:pointer;opacity:0;animation:fade-up .6s var(--smooth) forwards;padding:28px;position:relative;overflow:hidden}.card:first-child{animation-delay:.15s}.card:nth-child(2){animation-delay:.25s}.card:nth-child(3){animation-delay:.35s}.card:nth-child(4){animation-delay:.45s}.card:nth-child(5){animation-delay:.55s}.card:nth-child(6){animation-delay:.65s}.card:nth-child(7){animation-delay:.75s}.card:hover{box-shadow:var(--shadow-clay-hover);transform:translateY(-6px)scale(1.02)}.card:active{transform:translateY(0)scale(.98)}.card:after{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.card:hover:after{left:100%}.card__icon{transition:transform .3s var(--bounce);margin-bottom:12px;font-size:40px;display:block}.card:hover .card__icon{transform:scale(1.2)rotate(-5deg)}.card__title{font-family:var(--font-display);margin-bottom:6px;font-size:1.3rem;font-weight:800}.card__desc{color:var(--text-soft);font-size:.9rem;line-height:1.5}.card:before{content:"";z-index:2;height:5px;position:absolute;top:0;left:0;right:0}.card--pink:before{background:var(--pink)}.card--yellow:before{background:var(--yellow)}.card--teal:before{background:var(--teal)}.card--purple:before{background:var(--purple)}.card--mint:before{background:var(--mint)}.card--peach:before{background:var(--peach)}.card--blue:before{background:var(--baby-blue)}.modal-overlay{-webkit-backdrop-filter:blur(12px);z-index:100;padding:var(--gap);opacity:0;pointer-events:none;transition:opacity .3s var(--smooth);background:#2d2b5566;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}[data-theme=dark] .modal-overlay{background:#0a0a1e99}.modal-overlay.active{opacity:1;pointer-events:all}.modal{background:var(--bg-card);border:var(--border-w) solid var(--border-color);border-radius:var(--radius-lg);width:100%;max-width:480px;box-shadow:var(--shadow-float);transition:transform .4s var(--bounce), background .3s;padding:36px;position:relative;transform:translateY(20px)scale(.95)}.modal-overlay.active .modal{transform:translateY(0)scale(1)}.modal__close{border:2px solid var(--border-color);background:var(--bg);cursor:pointer;width:36px;height:36px;transition:transform .2s var(--bounce), background .2s;color:var(--text);border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex;position:absolute;top:14px;right:14px}.modal__close:hover{background:var(--pink);color:#fff;border-color:var(--pink);transform:scale(1.1)rotate(90deg)}.modal__title{font-family:var(--font-display);margin-bottom:16px;font-size:1.5rem;font-weight:800}.wheel-container{flex-direction:column;align-items:center;gap:20px;display:flex}.wheel-wrapper{width:280px;height:280px;position:relative}.wheel-canvas{border:4px solid var(--border-color);width:100%;height:100%;box-shadow:var(--shadow-clay);border-radius:50%}.wheel-pointer{filter:drop-shadow(0 2px 4px #0003);z-index:2;font-size:28px;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.btn{font-family:var(--font-display);border:var(--border-w) solid var(--border-color);border-radius:var(--radius-pill);background:var(--yellow);color:var(--text);cursor:pointer;transition:transform .2s var(--bounce), box-shadow .2s;-webkit-user-select:none;user-select:none;padding:14px 32px;font-size:1rem;font-weight:700;box-shadow:4px 4px #0000001a}.btn:hover{transform:translateY(-2px);box-shadow:6px 6px #00000026}.btn:active{transform:translateY(1px);box-shadow:2px 2px #0000001a}.btn--pink{background:var(--pink);color:#fff}.btn--teal{background:var(--teal)}.btn--purple{background:var(--purple);color:#fff}.btn--yellow{background:var(--yellow)}.btn--mint{background:var(--mint)}.dice-area{flex-direction:column;align-items:center;gap:24px;display:flex}.dice-display{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.die{background:var(--bg-card);border:3px solid var(--border-color);width:80px;height:80px;font-size:36px;font-weight:900;font-family:var(--font-display);box-shadow:var(--shadow-clay);transition:transform .3s var(--bounce);color:var(--text);border-radius:16px;justify-content:center;align-items:center;display:flex}.die.rolling{animation:.4s ease-in-out dice-roll}@keyframes dice-roll{0%{transform:rotateX(0)rotateY(0)scale(1)}25%{transform:rotateX(90deg)rotateY(45deg)scale(.8)}50%{transform:rotateX(180deg)rotateY(90deg)scale(1.1)}75%{transform:rotateX(270deg)rotateY(135deg)scale(.9)}to{transform:rotateX(360deg)rotateY(180deg)scale(1)}}.mood-grid{grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;display:grid}.mood-btn{border-radius:var(--radius);background:var(--bg);cursor:pointer;transition:transform .3s var(--bounce), border-color .2s, background .2s;border:3px solid #0000;padding:16px;font-size:36px}.mood-btn:hover{border-color:var(--border-color);transform:scale(1.15)}.mood-btn.selected{border-color:var(--pink);background:#ff71ce1a;transform:scale(1.1)}.mood-result{text-align:center;border-radius:var(--radius);background:var(--bg);min-height:60px;padding:16px;font-size:1rem;line-height:1.6;transition:background .3s}.color-display{border-radius:var(--radius);border:3px solid var(--border-color);width:100%;height:160px;font-family:var(--font-display);transition:background .5s var(--smooth);cursor:pointer;justify-content:center;align-items:center;margin-bottom:16px;font-size:1.2rem;font-weight:700;display:flex;position:relative}.color-display__hex{border-radius:var(--radius-pill);border:2px solid var(--border-color);color:#2d2b55;background:#ffffffd9;padding:6px 16px;font-size:.95rem}.color-sliders{flex-direction:column;gap:12px;display:flex}.slider-row{align-items:center;gap:12px;display:flex}.slider-row label{font-weight:700;font-family:var(--font-display);width:20px}.slider-row input[type=range]{appearance:none;border-radius:4px;outline:none;flex:1;height:8px}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:3px solid var(--border-color);cursor:pointer;border-radius:50%;width:22px;height:22px;box-shadow:2px 2px #0000001a}.slider-r input[type=range]{background:linear-gradient(90deg,#000,red)}.slider-r input[type=range]::-webkit-slider-thumb{background:#ff6b6b}.slider-g input[type=range]{background:linear-gradient(90deg,#000,#0f0)}.slider-g input[type=range]::-webkit-slider-thumb{background:#51cf66}.slider-b input[type=range]{background:linear-gradient(90deg,#000,#00f)}.slider-b input[type=range]::-webkit-slider-thumb{background:#748ffc}.clicker-area{flex-direction:column;align-items:center;gap:20px;display:flex}.clicker-count{font-family:var(--font-display);background:linear-gradient(135deg, var(--pink), var(--purple));-webkit-text-fill-color:transparent;transition:transform .15s var(--bounce);-webkit-background-clip:text;background-clip:text;font-size:4rem;font-weight:900;line-height:1}.clicker-count.bump{transform:scale(1.2)}.clicker-big-btn{border:4px solid var(--border-color);background:linear-gradient(135deg, var(--pink), var(--peach));cursor:pointer;width:120px;height:120px;box-shadow:var(--shadow-clay);transition:transform .2s var(--bounce), box-shadow .2s;border-radius:50%;justify-content:center;align-items:center;font-size:48px;display:flex}.clicker-big-btn:hover{box-shadow:var(--shadow-clay-hover);transform:scale(1.05)}.clicker-big-btn:active{transform:scale(.92);box-shadow:2px 2px #0000000d}.reaction-area{text-align:center;flex-direction:column;align-items:center;gap:20px;display:flex}.reaction-zone{border-radius:var(--radius);border:3px solid var(--border-color);width:100%;height:200px;font-family:var(--font-display);cursor:pointer;transition:background .3s, color .3s, transform .2s var(--bounce);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;font-size:1.2rem;font-weight:700;display:flex}.reaction-zone--waiting{background:var(--yellow);color:var(--text)}.reaction-zone--ready{color:#fff;background:#51cf66;animation:.5s ease-in-out infinite alternate pulse-green}.reaction-zone--result{background:var(--bg)}.reaction-zone:active{transform:scale(.98)}.reaction-zone--too-early{color:#fff;background:#ff6b6b}@keyframes pulse-green{0%{box-shadow:0 0 #51cf6666}to{box-shadow:0 0 0 20px #51cf6600}}.reaction-stats{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.reaction-stat{background:var(--bg);border-radius:var(--radius);font-family:var(--font-display);padding:12px 20px;font-weight:700}.reaction-stat__value{background:linear-gradient(135deg, var(--pink), var(--teal));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.8rem;display:block}.reaction-stat__label{color:var(--text-soft);font-size:.75rem;font-weight:500}.confetti{pointer-events:none;z-index:200;font-size:20px;animation:1.5s ease-out forwards confetti-fall;position:fixed}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}to{opacity:0;transform:translateY(400px)rotate(720deg)scale(.3)}}.toast{background:var(--text);color:var(--bg);border-radius:var(--radius-pill);font-family:var(--font-display);z-index:300;opacity:0;transition:transform .4s var(--bounce), opacity .3s;white-space:nowrap;text-overflow:ellipsis;max-width:90vw;padding:14px 28px;font-size:.95rem;font-weight:600;position:fixed;bottom:30px;left:50%;overflow:hidden;transform:translate(-50%)translateY(100px)}.toast.show{opacity:1;transform:translate(-50%)translateY(0)}.footer{text-align:center;color:var(--text-soft);opacity:0;animation:fade-up .6s var(--smooth) .9s forwards;padding:60px 0 30px;font-size:.85rem}.footer a{color:var(--purple);font-weight:600;text-decoration:none;transition:color .2s}.footer a:hover{color:var(--pink)}@media (width<=600px){.hero{padding:40px 0 24px}.hero__emoji{font-size:56px}.cards{grid-template-columns:1fr}.modal{padding:24px}.wheel-wrapper{width:240px;height:240px}.die{width:64px;height:64px;font-size:28px}.mood-grid{grid-template-columns:repeat(3,1fr);gap:8px}.mood-btn{padding:12px;font-size:28px}.theme-toggle{width:44px;height:44px;font-size:18px;top:14px;right:14px}.reaction-zone{height:160px;font-size:1rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}