:root{--bg-color: #f4f7f5;--text-color: #4a5c53;--accent-color: #8da399;--circle-color: #b6c9bf;--circle-active-color: #8da399;--button-bg: #4a5c53;--button-text: #ffffff;--font-main: "Outfit", sans-serif;--shadow-soft: 0 10px 30px rgba(74, 92, 83, .1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}.app-container{text-align:center;width:100%;max-width:400px;padding:2px;display:flex;flex-direction:column;justify-content:space-between;height:90vh}header h1{font-weight:600;font-size:2rem;margin-bottom:.5rem;letter-spacing:-.02em}header p{font-weight:300;opacity:.8}main{flex-grow:1;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.practice-page main{width:100vw;height:100vh;position:fixed;top:0;left:0;z-index:5}.breathing-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vmin;height:100vmin;display:flex;justify-content:center;align-items:center;z-index:0}.circle-outer{position:absolute;width:80vmin;height:80vmin;background-color:#b6c9bf1a;border-radius:50%;z-index:1;transform:scale(.8);transition:transform .5s ease}.circle-inner{width:80vmin;height:80vmin;background-color:var(--circle-color);border-radius:50%;z-index:2;transform:scale(.6);box-shadow:0 0 50px 20px #b6c9bf4d;transition:transform .5s ease,background-color .5s ease}.instruction-text{position:absolute;z-index:3;font-size:8vmin;font-weight:300;color:var(--text-color);pointer-events:none;transition:opacity .5s ease;text-shadow:0 2px 10px rgba(255,255,255,.5);mix-blend-mode:multiply}.pattern-description{position:absolute;bottom:15%;width:100%;text-align:center;font-size:1rem;color:var(--text-color);opacity:.7;pointer-events:none;padding:0 2rem;transition:opacity .3s}.timer{position:absolute;top:15%;font-size:1.5rem;font-weight:300;font-variant-numeric:tabular-nums;opacity:.7;transition:opacity .3s}.controls{position:absolute;bottom:2rem;width:100%;display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;align-items:center;z-index:10;padding:0 1rem;transition:opacity .5s ease,transform .5s ease}.breathing-container.is-active~.controls,.breathing-container.is-active~header,.breathing-container.is-active~footer{opacity:.2;pointer-events:none}.breathing-container.is-active~.controls{opacity:1;pointer-events:auto;bottom:2rem}.breathing-container.is-active~.controls #pattern-select,.breathing-container.is-active~.controls #reset-btn{display:none}.breathing-container.is-active .pattern-description{opacity:0}.breathing-container.is-active .timer{opacity:.5}.inhale .circle-inner{background-color:#a8c0b3;box-shadow:0 0 80px 30px #a8c0b380}.hold .circle-inner{background-color:#9ab3a6}.exhale .circle-inner{background-color:var(--circle-color);box-shadow:0 0 50px 20px #b6c9bf4d}.practice-page header{position:absolute;top:0;width:100%;padding:1rem;z-index:10;transition:opacity .5s}.practice-page footer{position:absolute;bottom:.5rem;width:100%;z-index:10;transition:opacity .5s}.guide-page{height:auto;overflow-y:auto;padding:4rem 1rem;align-items:flex-start}.guide-container{width:100%;max-width:700px;margin:0 auto;text-align:left}.back-link{text-decoration:none;color:var(--text-color);font-size:.9rem;opacity:.7;margin-bottom:2rem;display:inline-block}.back-link:hover{opacity:1}.blog-content article{margin-bottom:4rem;border-bottom:1px solid rgba(74,92,83,.1);padding-bottom:2rem}.blog-content h2{font-size:1.1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-color);margin-bottom:.5rem}.blog-content h3{font-size:1.8rem;margin-bottom:1.5rem;font-weight:600}.blog-content p,.blog-content li{font-size:1.1rem;line-height:1.7;margin-bottom:1.5rem;color:var(--text-color)}.blog-content ul{list-style-type:none;padding-left:0}.blog-content li{margin-bottom:1rem;padding-left:1.5rem;position:relative}.blog-content li:before{content:"•";color:var(--accent-color);position:absolute;left:0;font-weight:700}.highlight-box{background-color:#b6c9bf33;padding:2rem;border-radius:1rem;margin:2rem 0}.highlight-box h4{margin-top:0}.pattern-card{background-color:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 4px 20px #4a5c530d;margin-bottom:1.5rem;border:1px solid rgba(74,92,83,.1)}.pattern-card h4{color:var(--text-color);margin-bottom:.5rem;font-size:1.2rem}.guide-container footer{text-align:center;margin-top:4rem;padding-top:2rem;border-top:1px solid rgba(74,92,83,.2)}.guide-container footer a{color:var(--text-color);text-decoration:none;font-weight:600}.catalog-page{background:linear-gradient(135deg,#f4f7f5,#e8f0eb);display:block;overflow-y:auto;height:auto;min-height:100vh}.catalog-container{max-width:800px;margin:0 auto;padding:2rem}.hero{display:flex;justify-content:space-between;align-items:center;padding:4rem 0;margin-bottom:2rem}.hero-content{flex:1}.hero h1{font-size:3.5rem;font-weight:600;line-height:1.1;margin-bottom:1rem;background:linear-gradient(90deg,#4a5c53,#6b8276);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero p{font-size:1.2rem;opacity:.8;margin-bottom:2rem;max-width:400px}.cta-button{display:inline-block;background-color:var(--button-bg);color:#fff;padding:1rem 2rem;border-radius:50px;text-decoration:none;font-weight:500;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 20px #4a5c5333}.cta-button:hover{transform:translateY(-2px);box-shadow:0 15px 30px #4a5c534d}.hero-visual{flex:1;display:flex;justify-content:flex-end}.visual-circle{width:200px;height:200px;background:radial-gradient(circle at 30% 30%,#b6c9bf,#8da399);border-radius:50%;filter:blur(40px);opacity:.6;animation:float 6s ease-in-out infinite}@keyframes float{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.05)}to{transform:translateY(0) scale(1)}}.catalog-grid{display:flex;flex-direction:column;gap:3rem}.section-title h2{font-size:1.5rem;margin-bottom:.2rem}.section-title p{opacity:.6}.cards-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}.card{background:#fff;border-radius:20px;padding:1.5rem;text-decoration:none;color:var(--text-color);transition:transform .3s ease,box-shadow .3s ease;border:1px solid rgba(255,255,255,.5);box-shadow:0 4px 10px #00000008;display:flex;flex-direction:column;justify-content:space-between}.card:hover{transform:translateY(-5px);box-shadow:0 15px 30px #4a5c531a}.check-in-card{flex-direction:row;align-items:center;background:linear-gradient(135deg,#fff,#f0f7f4);padding:2rem}.check-in-card .card-icon{font-size:2rem;margin-right:1.5rem}.check-in-card h3{margin-bottom:.2rem;font-size:1.3rem}.check-in-card p{opacity:.7;margin:0}.check-in-card .card-action{margin-left:auto;font-weight:600;color:var(--accent-color)}.learn-card{min-height:180px}.learn-card .tag{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-color);margin-bottom:1rem;display:block}.learn-card h3{font-size:1.2rem;margin-bottom:.5rem}.learn-card p{font-size:.9rem;opacity:.7;line-height:1.5}.quote-block{text-align:center;padding:3rem 0;font-style:italic;opacity:.6;font-size:1.1rem}.footer-links{display:flex;justify-content:center;gap:2rem;padding-top:2rem;border-top:1px solid rgba(74,92,83,.1);color:var(--text-color)}.footer-links a{color:inherit;text-decoration:none;opacity:.6}.footer-links a:hover{opacity:1}.top-nav{position:absolute;top:1.5rem;left:1.5rem}.icon-link{color:var(--text-color);opacity:.5;transition:opacity .2s}.icon-link:hover{opacity:1}@media(max-width:600px){.hero{flex-direction:column-reverse;text-align:center}.hero-content{margin-top:2rem}.hero h1{font-size:2.5rem}.check-in-card{flex-direction:column;text-align:center}.check-in-card .card-icon{margin-right:0;margin-bottom:1rem}.check-in-card .card-action{margin-left:0;margin-top:1rem}.cards-row{grid-template-columns:1fr}}
