@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap";@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;color:#1a1a1a;background-color:#f9f9f9;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;min-height:100vh;position:relative;overflow:hidden;transition:background .7s ease}header{padding:.5rem 0;text-align:center;position:relative;z-index:10}header h1{font-family:Playfair Display,serif;font-weight:600;font-size:2.25rem;letter-spacing:-.5px;color:#333;margin:0}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:1rem 1.5rem 2rem;overflow-y:visible;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.2) transparent}main::-webkit-scrollbar{width:5px}main::-webkit-scrollbar-track{background:transparent}main::-webkit-scrollbar-thumb{background-color:#0003;border-radius:10px}.mood-selector{width:100%;max-width:600px;display:flex;flex-direction:column;align-items:center;margin-bottom:4rem}.mood-selector h2{font-family:Playfair Display,serif;font-weight:400;font-size:1.7rem;margin-bottom:1.5rem;text-align:center;line-height:1.3}.scrollable-container{width:100%;overflow-y:visible;padding:.5rem;-webkit-overflow-scrolling:touch}.mood-grid.initial-mood,.mood-grid.desired-mood{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mood-button{border:none;border-radius:12px;padding:14px 8px!important;font-family:Inter,sans-serif;font-size:.8rem!important;font-weight:500;color:#fff;box-shadow:0 4px 12px #0000000d;transition:all .3s ease;cursor:pointer;position:relative;overflow:hidden;transform:scale(1)}.mood-button:hover{box-shadow:0 6px 16px #00000014;filter:brightness(1.05)}.mood-button.selected{transform:scale(1.2)!important;box-shadow:0 0 20px #ffffff80!important;filter:brightness(1.1)!important;font-weight:600;animation:simple-glow 2s infinite alternate!important}@keyframes simple-glow{0%{box-shadow:0 0 15px #fff6!important}to{box-shadow:0 0 25px #fff9!important}}@keyframes gentle-shadow-pulse{0%{box-shadow:0 0 15px #ffffff4d}to{box-shadow:0 0 25px #ffffff80}}.mood-button.selected:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:12px;animation:subtle-breathing 3s infinite alternate ease-in-out;opacity:0;pointer-events:none}@keyframes subtle-breathing{0%{transform:scale(1);opacity:0}to{transform:scale(1.03);opacity:.1}}.mood-button:active{transform:scale(.98);box-shadow:0 2px 8px #0000001a;transition:all .2s ease}.mood-button.quadrant-1{background:linear-gradient(145deg,#ff7eb3,#ff758c)}.mood-button.quadrant-2{background:linear-gradient(145deg,#ffd166,#ffb347)}.mood-button.quadrant-3{background:linear-gradient(145deg,#4d80e4,#5e60ce)}.mood-button.quadrant-4{background:linear-gradient(145deg,#06d6a0,#1ac2ac)}.button-container{position:fixed;left:50%;bottom:40px;transform:translate(-50%) translateY(20px);opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility .3s;width:auto;display:flex;justify-content:center;padding:0;border-radius:40px;background:transparent;z-index:100}.button-container.visible{opacity:1;visibility:visible;transform:translate(-50%) translateY(0)}.next-button{position:relative;color:#fff;border:none;border-radius:30px;padding:14px 40px;font-family:Inter,sans-serif;font-size:1.4rem;font-weight:800;cursor:pointer;transition:all .3s ease,background .8s ease;background:linear-gradient(135deg,#5e60ce,#4ea8de);box-shadow:0 4px 12px #5e60ce80}.next-button span{position:relative;z-index:1}.next-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}.next-button.quadrant-1{background:linear-gradient(135deg,#ff758c,#ff7eb3);box-shadow:0 4px 12px #ff7b8980}.next-button.quadrant-1:hover:not(:disabled){box-shadow:0 6px 16px #ff7b8999}.next-button.quadrant-2{background:linear-gradient(135deg,#ffb347,#ffd166);box-shadow:0 4px 12px #ffb34780}.next-button.quadrant-2:hover:not(:disabled){box-shadow:0 6px 16px #ffb34799}.next-button.quadrant-3{background:linear-gradient(135deg,#5e60ce,#4d80e4);box-shadow:0 4px 12px #5e60ce80}.next-button.quadrant-3:hover:not(:disabled){box-shadow:0 6px 16px #5e60ce99}.next-button.quadrant-4{background:linear-gradient(135deg,#1ac2ac,#06d6a0);box-shadow:0 4px 12px #1ac2ac80}.next-button.quadrant-4:hover:not(:disabled){box-shadow:0 6px 16px #1ac2ac99}.next-button:disabled{opacity:.6;cursor:not-allowed}.transition-screen{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;text-align:center}.transition-screen h2{font-family:Playfair Display,serif;font-weight:400;font-size:1.7rem;margin-bottom:2rem}.animation-container{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2rem}.mood-from,.mood-to{padding:12px 24px;border-radius:14px;color:#fff;font-weight:500;box-shadow:0 6px 12px #0000001a;animation:pulse 2s infinite alternate}.mood-from.quadrant-1,.mood-to.quadrant-1,.mood-result.quadrant-1{background:linear-gradient(145deg,#ff7eb3,#ff758c)}.mood-from.quadrant-2,.mood-to.quadrant-2,.mood-result.quadrant-2{background:linear-gradient(145deg,#ffd166,#ffb347)}.mood-from.quadrant-3,.mood-to.quadrant-3,.mood-result.quadrant-3{background:linear-gradient(145deg,#4d80e4,#5e60ce)}.mood-from.quadrant-4,.mood-to.quadrant-4,.mood-result.quadrant-4{background:linear-gradient(145deg,#06d6a0,#1ac2ac)}.mood-arrow{font-size:1.5rem;color:#666}.pulse-animation{width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#4ea8de99,#5e60ce00 70%);margin-bottom:1.5rem;animation:pulse 1.5s infinite}@keyframes pulse{0%{transform:scale(.95);opacity:.7}to{transform:scale(1.05);opacity:1}}.tip-screen{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.tip-screen h2{font-family:Playfair Display,serif;font-weight:400;font-size:1.7rem;margin-bottom:.5rem;text-align:center}.mood-result{padding:16px 32px;border-radius:16px;color:#fff;font-weight:600;font-size:1.2rem;box-shadow:0 8px 16px #0000001a;margin-bottom:1rem}.witty-copy{background-color:#fff;padding:1.5rem;border-radius:16px;box-shadow:0 4px 12px #0000000d;text-align:center;font-size:1rem;line-height:1.6;margin-bottom:1.2rem}.tip-buttons{display:flex;gap:10px;margin:1rem 0 1.5rem;width:100%;justify-content:center}.tip-button{flex:1;padding:14px 8px;border:none;border-radius:14px;font-weight:500;cursor:pointer;transition:all .2s ease;color:#fff;box-shadow:0 4px 12px #00000014}.tip-button.small{background:linear-gradient(135deg,#4ea8de,#5e60ce)}.tip-button.medium{background:linear-gradient(135deg,#5e60ce,#6930c3)}.tip-button.large{background:linear-gradient(135deg,#6930c3,#7400b8)}.tip-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}.tip-button.processing{opacity:.7;cursor:not-allowed}.share-button{background:linear-gradient(135deg,#06d6a0,#1ac2ac);color:#fff;border:none;border-radius:30px;padding:14px 30px;font-family:Inter,sans-serif;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #06d6a033;margin-top:.5rem}.share-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #06d6a04d}.success-message{background-color:#fff;padding:2rem 1.5rem;border-radius:16px;box-shadow:0 4px 12px #0000000d;text-align:center;width:100%;margin:1rem 0 1.5rem}.success-message h3{font-family:Playfair Display,serif;margin-bottom:.5rem;font-size:1.4rem;color:#333}.success-message p{color:#666;line-height:1.5}.debug-info{background-color:#ffffffb3;padding:1rem;border-radius:12px;font-size:.85rem;color:#666;width:100%;margin-top:1rem}@media (max-width: 480px){header h1{font-size:2rem}.mood-selector h2,.transition-screen h2,.tip-screen h2{font-size:1.5rem}.mood-grid.initial-mood,.mood-grid.desired-mood{grid-template-columns:repeat(3,1fr);gap:10px}.mood-button{font-size:.9rem;padding:12px 6px}.tip-buttons{flex-direction:column}}@media (min-width: 768px){header h1{font-size:32px}.mood-grid.initial-mood,.mood-grid.desired-mood{grid-template-columns:repeat(4,1fr)}}:root{background-color:#181818;color:#ffffffde;color-scheme:light dark;font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}@media (prefers-color-scheme: light){:root{background-color:#f8f8f8;color:#181818}}