@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap";:root{color-scheme:dark;font-family:Cormorant Garamond,Georgia,serif;line-height:1.6;--bg-deep: #050a08;--bg-card: rgba(15, 25, 20, .85);--gold: #c9a84c;--gold-glow: rgba(201, 168, 76, .3);--ember: #e85d3a;--ember-glow: rgba(232, 93, 58, .25);--forest: #2d5a3d;--forest-light: #3a7a52;--water: #3a7a8c;--water-glow: rgba(58, 122, 140, .3);--spirit: #8a6bbf;--spirit-glow: rgba(138, 107, 191, .3);--text: #e8e0d4;--text-muted: rgba(232, 224, 212, .55);--text-dim: rgba(232, 224, 212, .35);--border: rgba(201, 168, 76, .12)}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg-deep);color:var(--text)}body{overflow-x:hidden}.bg-ambience{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;overflow:hidden}.bg-ambience:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at 20% 50%,rgba(45,90,61,.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(58,122,140,.1) 0%,transparent 40%),radial-gradient(ellipse at 50% 80%,rgba(138,107,191,.08) 0%,transparent 45%);animation:ambientDrift 20s ease-in-out infinite alternate}@keyframes ambientDrift{0%{transform:translate(0) rotate(0)}to{transform:translate(-3%,2%) rotate(2deg)}}.app{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem 1.5rem 4rem}.nav{display:flex;justify-content:center;gap:.5rem;margin-bottom:3rem;flex-wrap:wrap}.nav-btn{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);background:transparent;border:1px solid var(--border);padding:.55rem 1.2rem;border-radius:2rem;cursor:pointer;transition:all .3s ease}.nav-btn:hover{color:var(--gold);border-color:var(--gold-glow)}.nav-btn.active{color:var(--gold);border-color:var(--gold);background:#c9a84c14;box-shadow:0 0 20px var(--gold-glow)}.hero{text-align:center;padding:3rem 0 2rem}.hero-icon{font-size:3rem;margin-bottom:1rem;filter:drop-shadow(0 0 20px var(--gold-glow));animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.hero h1{font-family:Cinzel,serif;font-size:2.8rem;font-weight:600;letter-spacing:.08em;color:var(--gold);text-shadow:0 0 40px var(--gold-glow);margin-bottom:.5rem}.hero p{font-size:1.15rem;font-style:italic;color:var(--text-muted);max-width:30rem;margin:0 auto}.section-title{font-family:Cinzel,serif;font-size:1.3rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:var(--gold);margin-bottom:2rem}.breathing-section{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:2rem 0}.breath-circle-outer{width:220px;height:220px;border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(45,90,61,.2),transparent 70%)}.breath-circle{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 35%,var(--forest-light),var(--forest));box-shadow:0 0 30px #2d5a3d80,0 0 60px #2d5a3d33,inset 0 0 20px #ffffff1a;transition:transform .1s linear;display:grid;place-items:center}.breath-circle.inhale{animation:inhaleAnim 4s ease-in-out forwards}.breath-circle.hold{transform:scale(1.6);box-shadow:0 0 50px #c9a84c66,0 0 100px #c9a84c26,inset 0 0 20px #ffffff26}.breath-circle.exhale{animation:exhaleAnim 4s ease-in-out forwards}@keyframes inhaleAnim{0%{transform:scale(1)}to{transform:scale(1.6)}}@keyframes exhaleAnim{0%{transform:scale(1.6)}to{transform:scale(1)}}.breath-label{font-family:Cinzel,serif;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text);text-shadow:0 2px 8px rgba(0,0,0,.5)}.breath-ring{position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border-radius:50%;border:1px solid var(--border);animation:ringPulse 4s ease-in-out infinite}.breath-ring:nth-child(2){top:-20px;right:-20px;bottom:-20px;left:-20px;animation-delay:.5s;opacity:.5}.breath-ring:nth-child(3){top:-34px;right:-34px;bottom:-34px;left:-34px;animation-delay:1s;opacity:.3}@keyframes ringPulse{0%,to{opacity:.2;transform:scale(1)}50%{opacity:.6;transform:scale(1.02)}}.breath-controls{display:flex;gap:1rem}.btn{font-family:Cinzel,serif;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;padding:.7rem 2rem;border-radius:2rem;cursor:pointer;transition:all .3s ease;border:1px solid var(--gold);background:#c9a84c14;color:var(--gold)}.btn:hover{background:#c9a84c2e;box-shadow:0 0 25px var(--gold-glow)}.btn-secondary{border-color:var(--border);color:var(--text-muted);background:transparent}.btn-secondary:hover{border-color:var(--text-muted);color:var(--text);box-shadow:none}.elements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;padding:0 0 2rem}.element-card{position:relative;border:1px solid var(--border);border-radius:1rem;padding:1.75rem 1.25rem;text-align:center;cursor:pointer;transition:all .4s ease;overflow:hidden;background:var(--bg-card)}.element-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .4s ease;border-radius:inherit}.element-card:hover{transform:translateY(-4px)}.element-card:hover:before{opacity:1}.element-card[data-element=earth]:before{background:radial-gradient(circle at 50% 80%,rgba(45,90,61,.2),transparent 70%)}.element-card[data-element=earth]:hover{border-color:#2d5a3d66;box-shadow:0 8px 30px #2d5a3d26}.element-card[data-element=water]:before{background:radial-gradient(circle at 50% 80%,var(--water-glow),transparent 70%)}.element-card[data-element=water]:hover{border-color:#3a7a8c66;box-shadow:0 8px 30px #3a7a8c26}.element-card[data-element=fire]:before{background:radial-gradient(circle at 50% 80%,var(--ember-glow),transparent 70%)}.element-card[data-element=fire]:hover{border-color:#e85d3a66;box-shadow:0 8px 30px #e85d3a26}.element-card[data-element=air]:before{background:radial-gradient(circle at 50% 80%,rgba(201,168,76,.15),transparent 70%)}.element-card[data-element=air]:hover{border-color:#c9a84c66;box-shadow:0 8px 30px #c9a84c1a}.element-card[data-element=spirit]:before{background:radial-gradient(circle at 50% 80%,var(--spirit-glow),transparent 70%)}.element-card[data-element=spirit]:hover{border-color:#8a6bbf66;box-shadow:0 8px 30px #8a6bbf26}.element-card .icon{font-size:2.5rem;margin-bottom:.75rem;position:relative}.element-card h3{font-family:Cinzel,serif;font-size:1rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;position:relative}.element-card .wisdom{font-size:.9rem;font-style:italic;color:var(--text-muted);line-height:1.5;position:relative;min-height:3.5rem}.element-card .drawn{display:block;margin-top:.75rem;font-family:Cinzel,serif;font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);position:relative}.timer-section{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 0}.timer-display{font-family:Cinzel,serif;font-size:4rem;font-weight:300;letter-spacing:.05em;color:var(--gold);text-shadow:0 0 30px var(--gold-glow)}.timer-presets{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.preset-btn{font-family:Cinzel,serif;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem 1.25rem;border-radius:2rem;cursor:pointer;transition:all .3s ease;border:1px solid var(--border);background:transparent;color:var(--text-muted)}.preset-btn:hover{border-color:var(--gold);color:var(--gold)}.preset-btn.active{border-color:var(--gold);color:var(--gold);background:#c9a84c1a}.timer-progress{width:200px;height:200px;border-radius:50%;position:relative;display:grid;place-items:center}.timer-progress svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.timer-progress .track{fill:none;stroke:var(--border);stroke-width:2}.timer-progress .fill{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px var(--gold-glow))}.timer-time{font-family:Cinzel,serif;font-size:2.5rem;font-weight:300;color:var(--text);z-index:1}.guidance-card{max-width:600px;margin:0 auto;border:1px solid var(--border);border-radius:1rem;padding:2.5rem 2rem;text-align:center;background:var(--bg-card);position:relative;overflow:hidden}.guidance-card:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:80%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.guidance-card .guidance-icon{font-size:2rem;margin-bottom:1rem}.guidance-card .guidance-text{font-size:1.2rem;font-style:italic;line-height:1.7;color:var(--text);margin-bottom:1rem}.guidance-card .guidance-source{font-family:Cinzel,serif;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim)}.guidance-card .refresh-btn{margin-top:1.5rem;font-family:Cinzel,serif;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.5rem 1.5rem;border-radius:2rem;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--text-muted);transition:all .3s ease}.guidance-card .refresh-btn:hover{border-color:var(--gold);color:var(--gold)}.sound-toggle{position:fixed;bottom:1.5rem;right:1.5rem;width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);cursor:pointer;display:grid;place-items:center;font-size:1.2rem;transition:all .3s ease;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.sound-toggle:hover{border-color:var(--gold);color:var(--gold)}.footer{text-align:center;padding:3rem 0 1rem;color:var(--text-dim);font-size:.8rem;font-style:italic}.footer-divider{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 auto 1rem}@media(max-width:600px){.hero h1{font-size:2rem}.elements-grid{grid-template-columns:1fr 1fr}.timer-display{font-size:3rem}}