.breath-bubble-app{min-height:100dvh;padding:1rem;padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px));background:linear-gradient(#e8f4f8 0%,#d4e8f2 30%,#c5dce8 60%,#b8d4e3 100%);font-family:Nunito,system-ui,sans-serif;position:relative;overflow:clip auto}.breath-bubble-app:before{content:"";pointer-events:none;background:radial-gradient(300px 150px at 10% 20%,#fff9 0%,#0000 70%),radial-gradient(250px 120px at 80% 30%,#ffffff80 0%,#0000 70%),radial-gradient(200px 100px at 30% 70%,#fff6 0%,#0000 70%),radial-gradient(280px 140px at 70% 80%,#ffffff80 0%,#0000 70%);animation:30s ease-in-out infinite floatClouds;position:fixed;inset:0}@keyframes floatClouds{0%,to{transform:translate(0)}50%{transform:translate(20px)}}.breath-bubble-app .app-header{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;background:#ffffffb3;border-radius:24px;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1rem 1.5rem;display:flex;position:relative;box-shadow:0 4px 20px #88abbd26}.breath-bubble-app .app-header h1{color:#5a8fa8;margin:0;font-size:1.3rem;font-weight:800}.breath-bubble-app .back-link{color:#7ba3b8;background:#fff9;border-radius:12px;padding:.5rem 1rem;font-size:.9rem;font-weight:700;text-decoration:none;transition:all .3s}.breath-bubble-app .back-link:hover{background:#ffffffe6;transform:translate(-3px)}.breath-bubble-app .acorn-badge{color:#fff;background:linear-gradient(135deg,#8b5a2b,#a67548);border-radius:20px;padding:.5rem 1rem;font-size:.9rem;font-weight:700}.bubble-section{z-index:5;flex-direction:column;justify-content:center;align-items:center;min-height:50vh;display:flex;position:relative}.breath-bubble{background:radial-gradient(circle at 30% 30%,#ffffffe6 0%,#c8e6ff99 40%,#96c8f066 70%,#78b4dc4d 100%);border-radius:50%;justify-content:center;align-items:center;width:200px;height:200px;transition:transform 4s ease-in-out;display:flex;position:relative;box-shadow:0 0 60px #78b4dc66,inset 0 0 30px #ffffff80,0 20px 60px #64a0c833}.breath-bubble:before{content:"";filter:blur(5px);background:#ffffffb3;border-radius:50%;width:30%;height:20%;position:absolute;top:15%;left:20%}.breath-bubble.inhale{transform:scale(1.5)}.breath-bubble.exhale{transform:scale(1)}.breath-bubble.hold{transform:scale(1.5)}.bubble-text{color:#5a8fa8;text-shadow:0 2px 10px #fffc;z-index:2;font-size:1.5rem;font-weight:800}.breath-timer{color:#5a8fa8;text-shadow:0 2px 10px #fffc;margin-top:2rem;font-size:3rem;font-weight:800}.pattern-info{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffffb3;border-radius:20px;margin-top:1rem;padding:1rem 2rem}.pattern-name{color:#5a8fa8;margin-bottom:.5rem;font-size:1.1rem;font-weight:700}button.pattern-name{background:0 0;border:0;width:100%;padding:0;font-family:inherit}.pattern-sequence{color:#7ba3b8;font-size:.85rem}.breath-controls{flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem;display:flex}.control-btn{cursor:pointer;border:none;border-radius:20px;padding:1rem 2rem;font-size:1rem;font-weight:700;transition:all .3s}.start-btn{color:#fff;background:linear-gradient(135deg,#7ec8e3,#5aa9c9);box-shadow:0 4px 15px #7ec8e366}.start-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7ec8e380}.stop-btn{color:#7ba3b8;background:#fffc;border:2px solid #c5dce8}.stop-btn:hover{background:#fff}.patterns-section{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);z-index:5;background:#fff9;border-radius:24px;margin-top:2rem;padding:1.5rem;position:relative}.patterns-section h2{color:#5a8fa8;text-align:center;margin-bottom:1rem;font-size:1.1rem;font-weight:700}.pattern-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;display:grid}.pattern-card{text-align:center;cursor:pointer;background:#fffc;border:2px solid #0000;border-radius:16px;width:100%;padding:1rem;font-family:inherit;transition:all .3s}.pattern-card:disabled,button.pattern-name:disabled{cursor:default}.pattern-card:hover{transform:translateY(-2px);box-shadow:0 4px 15px #7ec8e34d}.pattern-card.active{background:#fff;border-color:#7ec8e3}.pattern-card .pattern-emoji{margin-bottom:.5rem;font-size:2rem}.pattern-card .pattern-title{color:#5a8fa8;margin-bottom:.25rem;font-size:.85rem;font-weight:700}.pattern-card .pattern-desc{color:#7ba3b8;font-size:.7rem}.stats-section{z-index:5;gap:1rem;margin-top:1.5rem;display:flex;position:relative}.stat-card{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;background:#ffffffb3;border-radius:20px;flex:1;padding:1rem}.stat-card .stat-icon{margin-bottom:.5rem;font-size:1.5rem}.stat-card .stat-value{color:#5a8fa8;font-size:1.5rem;font-weight:800}.stat-card .stat-label{color:#7ba3b8;margin-top:.25rem;font-size:.75rem}.session-toast{color:#fff;z-index:1000;background:linear-gradient(135deg,#7ec8e3,#5aa9c9);border-radius:20px;align-items:center;gap:.75rem;padding:1rem 2rem;animation:.5s toastSlide;display:flex;position:fixed;top:100px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #7ec8e366}@keyframes toastSlide{0%{opacity:0;transform:translate(-50%)translateY(-30px)}to{opacity:1;transform:translate(-50%)translateY(0)}}.session-toast .toast-icon{font-size:1.5rem}.session-toast .toast-text{font-weight:700}.today-breath-intro,.breath-storage-warning,.today-breath-next{z-index:5;text-align:center;max-width:34rem;margin-left:auto;margin-right:auto;position:relative}.today-breath-intro{background:#ffffffb8;border-radius:20px;padding:1rem 1.25rem}.today-breath-intro h2{color:#47798f;margin:0 0 .35rem;font-size:1.15rem}.today-breath-intro p{color:#587f91;margin:0;line-height:1.5}.today-breath-intro .today-breath-safety{color:#466b7c;margin-top:.45rem;font-size:.9rem;font-weight:700}.breath-storage-warning{color:#665021;background:#fff9e2eb;border:1px solid #7e602659;border-radius:14px;margin-top:.75rem;padding:.75rem 1rem;line-height:1.45}.today-breath-next{color:#fff;background:#386f88;border-radius:16px;justify-content:center;align-items:center;min-height:44px;margin-top:1.25rem;padding:.75rem 1.25rem;font-weight:800;text-decoration:none;display:inline-flex;box-shadow:0 5px 18px #386f8840}.today-breath-next:hover{background:#2e6178}.today-breath-next:focus-visible,.control-btn:focus-visible,.breath-bubble-app .sound-btn:focus-visible,.icon-btn:focus-visible,.pattern-card:focus-visible,button.pattern-name:focus-visible,.close-btn:focus-visible,.select-pattern-btn:focus-visible{outline-offset:3px;outline:3px solid #214f64}.motivation-section{text-align:center;z-index:5;margin-top:1.5rem;padding:1rem;position:relative}.motivation-section p{color:#7ba3b8;font-size:.9rem;font-style:italic}@media (max-width:600px){.breath-bubble{width:160px;height:160px}.breath-bubble.inhale{transform:scale(1.4)}.breath-timer{font-size:2.5rem}.pattern-grid{grid-template-columns:repeat(2,1fr)}}.breath-bubble-app .header-right{align-items:center;gap:.75rem;display:flex}.breath-bubble-app .icon-btn{cursor:pointer;background:#7ec8e326;border:none;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.1rem;transition:all .2s;display:flex}.breath-bubble-app .icon-btn:hover{background:#7ec8e34d;transform:scale(1.1)}.sound-section{z-index:10;margin-bottom:1rem;position:relative}.breath-bubble-app .sound-selector{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#fff9;border-radius:20px;justify-content:center;gap:.5rem;padding:.75rem;display:flex}.breath-bubble-app .sound-btn{cursor:pointer;background:#ffffffb3;border:2px solid #0000;border-radius:12px;width:44px;height:44px;font-size:1.25rem;transition:all .2s}.breath-bubble-app .sound-btn:hover{background:#fff;transform:scale(1.1)}.breath-bubble-app .sound-btn.active{background:#fff;border-color:#7ec8e3;box-shadow:0 2px 10px #7ec8e34d}.breath-bubble .bubble-inner{z-index:2;flex-direction:column;justify-content:center;align-items:center;display:flex}.breath-bubble .bubble-timer{color:#5a8fa8;margin-top:.5rem;font-size:2rem;font-weight:800}.breath-bubble.complete{animation:.5s completePulse}@keyframes completePulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.progress-ring{pointer-events:none;width:100%;height:100%;position:absolute;transform:scale(1.15)}.breath-bubble.inhale .progress-ring{transition:transform 4s ease-in-out;transform:scale(1.7)}.breath-bubble.hold .progress-ring{transform:scale(1.7)}.breath-bubble.exhale .progress-ring{transition:transform 4s ease-in-out;transform:scale(1.15)}.progress-ring-fill{transition:stroke-dashoffset 50ms linear}.pattern-name.clickable{cursor:pointer;justify-content:center;align-items:center;gap:.5rem;display:flex}.pattern-name .info-icon{opacity:.6;font-size:.85rem}.pattern-name.clickable:hover .info-icon{opacity:1}.stat-card.highlight{background:linear-gradient(135deg,#7ec8e34d,#5aa9c933)}.breath-bubble-app .modal-overlay{z-index:1000;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;animation:.2s fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.breath-bubble-app .modal-content{background:linear-gradient(135deg,#f4fafc,#e8f4f8);border-radius:24px;width:100%;max-width:450px;max-height:80vh;padding:2rem;animation:.3s modalSlide;position:relative;overflow-y:auto;box-shadow:0 20px 60px #5a8fa84d}@keyframes modalSlide{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.breath-bubble-app .modal-content h2{color:#5a8fa8;text-align:center;margin-bottom:1.5rem;font-size:1.5rem;font-weight:800}.breath-bubble-app .close-btn{cursor:pointer;color:#5a8fa8;background:#0000001a;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:1.5rem;transition:all .2s;display:flex;position:absolute;top:1rem;right:1rem}.breath-bubble-app .close-btn:hover{background:#0003}.stats-overview{grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.5rem;display:grid}.overview-card{text-align:center;background:#ffffffb3;border-radius:16px;flex-direction:column;align-items:center;gap:.25rem;padding:1rem;display:flex}.overview-card.highlight{background:linear-gradient(135deg,#c5e8f2,#b8dce8)}.overview-card .ov-icon{font-size:1.5rem}.overview-card .ov-number{color:#5a8fa8;font-size:1.5rem;font-weight:800}.overview-card .ov-label{color:#7ba3b8;font-size:.7rem}.history-section{background:#fff9;border-radius:16px;padding:1rem}.history-section h3{color:#5a8fa8;margin:0 0 1rem;font-size:1rem;font-weight:700}.empty-history{text-align:center;color:#7ba3b8;padding:2rem;font-size:.9rem}.history-list{flex-direction:column;gap:.5rem;display:flex}.history-item{background:#fffc;border-radius:12px;align-items:center;gap:.75rem;padding:.75rem;display:flex}.history-emoji{font-size:1.25rem}.history-name{color:#5a8fa8;flex:1;font-size:.85rem;font-weight:600}.history-duration{color:#7ba3b8;background:#7ec8e326;border-radius:8px;padding:.25rem .5rem;font-size:.8rem}.history-date{color:#9bb8c8;font-size:.75rem}.pattern-modal{text-align:center}.pattern-detail-emoji{margin-bottom:.5rem;font-size:4rem}.pattern-detail-desc{color:#7ba3b8;margin-bottom:1.5rem}.pattern-timing{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.timing-item{background:#fffc;border-radius:12px;flex-direction:column;align-items:center;min-width:70px;padding:.75rem 1rem;display:flex}.timing-label{color:#7ba3b8;margin-bottom:.25rem;font-size:.7rem}.timing-value{color:#5a8fa8;font-size:1.25rem;font-weight:800}.pattern-benefit{background:#7ec8e326;border-radius:12px;margin-bottom:1.5rem;padding:1rem}.pattern-benefit strong{color:#5a8fa8;margin-bottom:.5rem;display:block}.pattern-benefit p{color:#7ba3b8;margin:0;font-size:.9rem}.select-pattern-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#7ec8e3,#5aa9c9);border:none;border-radius:16px;width:100%;padding:1rem;font-size:1rem;font-weight:700;transition:all .2s}.select-pattern-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #7ec8e366}@media (max-width:480px){.breath-bubble-app{padding-left:.75rem;padding-right:.75rem}.breath-bubble-app .app-header{flex-wrap:wrap;gap:.5rem;padding:.75rem}.breath-bubble-app .app-header h1{text-align:center;flex-basis:100%;order:-1}.breath-bubble-app .header-right{gap:.35rem}.breath-bubble-app .acorn-badge{padding:.45rem .65rem}.breath-bubble-app .sound-selector{gap:.4rem}.breath-bubble-app .sound-btn{width:38px;height:38px;font-size:1.1rem}.stats-overview{grid-template-columns:1fr 1fr}.breath-bubble-app .modal-content{max-height:85vh;padding:1.5rem}.pattern-timing{gap:.5rem}.timing-item{min-width:60px;padding:.5rem .75rem}}@media (prefers-reduced-motion:reduce){.breath-bubble-app:before,.session-toast,.breath-bubble.complete,.breath-bubble-app .modal-overlay,.breath-bubble-app .modal-content{animation:none}.breath-bubble,.breath-bubble.inhale,.breath-bubble.exhale,.breath-bubble.hold,.progress-ring,.breath-bubble.inhale .progress-ring,.breath-bubble.exhale .progress-ring,.progress-ring-fill,.control-btn,.breath-bubble-app .sound-btn,.icon-btn,.pattern-card,.select-pattern-btn{transition:none}.breath-bubble.inhale,.breath-bubble.exhale,.breath-bubble.hold{transform:scale(1)}}