:root{--top-bar-bg: #FFAEC2;--bg-grad-start: #FFDDE6;--bg-grad-end: #FFF5F7;--text-pink-title: #FFFFFF;--text-pink-time: #F48BAC;--text-brown: #664A4A;--card-track: #FFDFE6;--card-fill: #FF9EBB;--btn-pink-bg: #FFA3BA;--btn-blue-bg: #A3D1FF;--btn-gray-bg: #D1D1D1}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Nunito,sans-serif;background:linear-gradient(180deg,var(--bg-grad-start) 0%,rgb(255,246,244) 100%);min-height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden;cursor:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23FF6B81" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,5A7,7 0 0,1 19,12A7,7 0 0,1 12,19A7,7 0 0,1 5,12A7,7 0 0,1 12,5Z" /></svg>') 12 12,auto;transition:background .8s ease}body.mode-study{background:linear-gradient(180deg,#ffdde6,#fff5f7)}body.mode-short-break{background:linear-gradient(180deg,#e8f5e9,#f1f8e9)}body.mode-long-break{background:linear-gradient(180deg,#e1bee7,#f3e5f5)}.top-bar{width:100%;background-color:var(--top-bar-bg);padding:10px 0;display:flex;justify-content:center;align-items:center;z-index:10}.top-bar-content{display:flex;align-items:center;gap:12px}.header-icon{width:44px;height:44px;object-fit:contain}.header-title{font-size:2rem;font-weight:900;color:var(--text-pink-title);text-shadow:-1px -1px 0 #F48BAC,1px -1px 0 #F48BAC,-1px 1px 0 #F48BAC,1px 1px 0 #F48BAC,0 3px 0px #F48BAC,0 4px 8px rgba(244,139,172,.4);letter-spacing:1px}.page{display:none;width:100%;flex:1}#page-timer.active{flex-direction:column;align-items:center}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;position:relative;z-index:5;gap:1.5rem}.timer-wrapper{position:relative;margin:20px 0}.timer-card{position:relative;width:500px;height:240px;background:#fff;border-radius:120px;box-shadow:0 10px 30px #ffaec233,0 0 0 6px #fff,0 0 0 12px #ffe6ebb3;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.progress-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:500px;height:240px;z-index:-1;pointer-events:none}.progress-track{fill:none;stroke:var(--card-track);stroke-width:14}.progress-fill{fill:none;stroke:var(--card-fill);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset 1s linear}.session-info{font-size:1.3rem;font-weight:800;color:var(--text-brown);margin-top:-15px;margin-bottom:5px}.time-display{font-size:6.5rem;font-weight:900;color:var(--text-pink-time);line-height:1;letter-spacing:2px}.mascot-image{position:absolute;right:-75px;bottom:-15px;height:180px;z-index:3;filter:drop-shadow(0px 8px 15px rgba(0,0,0,.1))}.mascot-idle{animation:float 4s ease-in-out infinite}.mascot-tea{animation:float-slow 5s ease-in-out infinite}.controls-row{display:flex;gap:16px;margin-top:5px}.btn{font-family:Nunito,sans-serif;font-size:1.25rem;font-weight:800;color:#fff;padding:10px 32px;border-radius:40px;border:4px solid #FFFFFF;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 5px 12px #0000000f;outline:none}.btn:active:not(:disabled){transform:translateY(3px)}.btn:hover:not(:disabled){filter:brightness(1.05)}.btn-pink{background-color:var(--btn-pink-bg)}.btn-blue{background-color:var(--btn-blue-bg)}.btn-gray{background-color:var(--btn-gray-bg)}.btn.disabled-btn{opacity:.8;background-color:var(--btn-gray-bg);cursor:not-allowed;transform:translateY(0)}.tracker-box{background:#fff;padding:10px 24px;border-radius:40px;border:3px solid #FFEDF1;display:flex;align-items:center;position:relative;box-shadow:0 4px 10px #ffaec226;min-width:250px;justify-content:center}.tracker-bg-line{position:absolute;top:50%;left:40px;right:40px;height:8px;background-color:#ffedf1;transform:translateY(-50%);z-index:1;border-radius:4px}.strawberry-container{display:flex;justify-content:space-between;width:200px;z-index:2}.strawberry-wrap{width:34px;height:34px;display:flex;justify-content:center;align-items:center}.strawberry{width:30px;height:30px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);filter:drop-shadow(1px 2px 3px rgba(0,0,0,.15))}.strawberry.empty{opacity:.3;filter:grayscale(100%);transform:scale(.85)}.bg-decor{position:absolute;inset:0;pointer-events:none;z-index:1}.star{position:absolute;width:22px;height:22px;animation:float-star 5s ease-in-out infinite alternate}.star:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:inherit;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.star.yellow{background:#ffea98}.star.purple{background:#ddc8fe}.star.green{background:#d1f2d6}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes float-slow{0%,to{transform:translateY(0) scale(.98)}50%{transform:translateY(-5px) scale(1)}}@keyframes float-star{0%{transform:translateY(0) rotate(-10deg) scale(.8);opacity:.8}to{transform:translateY(-15px) rotate(15deg) scale(1.2);opacity:1}}.back-btn{font-size:1rem;padding:7px 22px;margin-top:-4px;opacity:.75;transition:opacity .2s}.back-btn:hover{opacity:1}#page-landing.active{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;flex:1}.landing-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:800px;padding:0 1.5rem;animation:landing-entrance .65s cubic-bezier(.22,1,.36,1) both}.landing-mascot-wrapper{display:flex;justify-content:center;margin-bottom:-28px;position:relative;z-index:3}.landing-mascot{height:170px;filter:drop-shadow(0px 12px 24px rgba(255,100,150,.25));animation:float 3.5s ease-in-out infinite}.landing-cards-row{display:flex;gap:1.8rem;justify-content:center;align-items:stretch;width:100%;flex-wrap:wrap;z-index:1;position:relative}.landing-card{background:#ffffffd9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:36px;padding:2.4rem 2rem 2rem;width:280px;flex:0 0 280px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.2rem;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}.landing-card:before{content:"";position:absolute;top:0;left:10%;right:10%;height:3px;border-radius:0 0 6px 6px;transition:opacity .3s ease;opacity:.6}.landing-card:hover{transform:translateY(-8px) scale(1.02)}.pink-card{border:2.5px solid rgba(255,182,193,.7);box-shadow:0 8px 32px #ffa3ba38,0 2px 8px #ffa3ba1a,inset 0 1px #ffffffe6}.pink-card:before{background:linear-gradient(90deg,transparent,#FFB6C1,transparent)}.pink-card:hover{box-shadow:0 18px 48px #ffa3ba61,0 4px 16px #ffa3ba2e,inset 0 1px #ffffffe6}.white-card{border:2.5px solid rgba(163,209,255,.7);box-shadow:0 8px 32px #a3d1ff38,0 2px 8px #a3d1ff1a,inset 0 1px #ffffffe6}.white-card:before{background:linear-gradient(90deg,transparent,#A3D1FF,transparent)}.white-card:hover{box-shadow:0 18px 48px #a3d1ff61,0 4px 16px #a3d1ff2e,inset 0 1px #ffffffe6}.landing-card-title{color:#5a3a3a;font-size:1.35rem;font-weight:900;letter-spacing:-.01em;margin:0;line-height:1.2}.landing-card-content{display:flex;flex-direction:column;align-items:center;gap:.7rem;flex:1}.landing-emoji{font-size:3.2rem;line-height:1;animation:emoji-bounce 2.5s ease-in-out infinite}.white-card .landing-emoji{animation-delay:.6s}.landing-card-content p{color:#7a5050;font-size:1rem;margin:0;font-weight:700;line-height:1.5}.btn-pink-landing{background:linear-gradient(135deg,#ff9db8,#ffa3ba);color:#fff;box-shadow:0 6px 20px #ffa3ba8c;width:100%;letter-spacing:.02em;border:3px solid rgba(255,255,255,.7);transition:all .25s cubic-bezier(.4,0,.2,1)}.btn-pink-landing:hover{background:linear-gradient(135deg,#ff87a8,#ff8fb0);box-shadow:0 10px 28px #ff82aaa6;transform:translateY(-2px)}.btn-pink-landing:active{transform:translateY(1px);box-shadow:0 4px 12px #ffa3ba66}.btn-blue-landing{background:linear-gradient(135deg,#8ec8ff,#a3d1ff);color:#fff;box-shadow:0 6px 20px #a3d1ff8c;width:100%;letter-spacing:.02em;border:3px solid rgba(255,255,255,.7);transition:all .25s cubic-bezier(.4,0,.2,1)}.btn-blue-landing:hover{background:linear-gradient(135deg,#78baff,#8ec8ff);box-shadow:0 10px 28px #64b4ff99;transform:translateY(-2px)}.btn-blue-landing:active{transform:translateY(1px);box-shadow:0 4px 12px #a3d1ff66}.page{display:none;width:100%}.page.active{display:flex}#page-timer.active{display:flex;flex-direction:column;align-items:center}@keyframes landing-entrance{0%{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes emoji-bounce{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}@media(max-width:640px){.landing-card{width:100%;flex:0 0 100%;max-width:340px}.landing-cards-row{flex-direction:column;align-items:center}.landing-mascot{height:140px}}