:root{--color-inhale: #5ce0d2;--color-hold: #7c9cf5;--color-exhale: #b88ced;--color-rest: #6b7fa3;--bg-primary: #0b0f1a;--bg-secondary: #111827;--text-primary: #e8ecf4;--text-secondary: #8896b0;--text-muted: #4a5568}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;min-height:100vh;min-height:100dvh}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-font-smoothing:antialiased}.app{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:2rem;overflow:hidden}.bg-particles{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(1.5px 1.5px at 20% 30%,rgba(92,224,210,.15) 0%,transparent 100%),radial-gradient(1.5px 1.5px at 80% 20%,rgba(124,156,245,.12) 0%,transparent 100%),radial-gradient(1px 1px at 40% 70%,rgba(184,140,237,.1) 0%,transparent 100%),radial-gradient(1px 1px at 60% 50%,rgba(92,224,210,.08) 0%,transparent 100%),radial-gradient(1px 1px at 10% 80%,rgba(124,156,245,.1) 0%,transparent 100%),radial-gradient(1px 1px at 90% 60%,rgba(184,140,237,.08) 0%,transparent 100%),radial-gradient(2px 2px at 50% 10%,rgba(92,224,210,.06) 0%,transparent 100%),radial-gradient(1px 1px at 70% 85%,rgba(124,156,245,.07) 0%,transparent 100%);animation:drift 30s linear infinite}@keyframes drift{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.idle-screen{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2.5rem;animation:fadeUp .8s ease-out}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.idle-header{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}.app-icon{width:64px;height:64px;color:var(--color-inhale);animation:gentle-pulse 4s ease-in-out infinite}@keyframes gentle-pulse{0%,to{transform:scale(1);opacity:.8}50%{transform:scale(1.05);opacity:1}}h1{font-size:2.5rem;font-weight:300;letter-spacing:.12em;text-transform:uppercase;color:var(--text-primary)}.subtitle{font-size:1rem;color:var(--text-secondary);font-weight:300;letter-spacing:.04em}.pattern-preview{position:relative;width:100%;max-width:300px}.pattern-selector-btn{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1.25rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:var(--text-primary);cursor:pointer;transition:all .2s ease;font-size:.95rem}.pattern-selector-btn:hover{background:#ffffff0f;border-color:#ffffff1f}.pattern-name{font-weight:500;flex:1;text-align:left}.pattern-duration{font-size:.8rem;color:var(--text-secondary);font-variant-numeric:tabular-nums}.chevron{width:18px;height:18px;color:var(--text-muted);transition:transform .2s ease}.pattern-picker{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--bg-secondary);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.5rem;z-index:10;animation:dropIn .2s ease-out;box-shadow:0 20px 60px #00000080}@keyframes dropIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.pattern-option{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;width:100%;padding:.75rem 1rem;background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text-primary);cursor:pointer;transition:all .15s ease;text-align:left}.pattern-option:hover{background:#ffffff0a}.pattern-option.selected{background:#5ce0d214;border-color:#5ce0d233}.option-name{font-weight:500;font-size:.9rem}.option-desc{font-size:.78rem;color:var(--text-secondary)}.option-duration{font-size:.72rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.start-btn{position:relative;width:160px;height:160px;border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;transition:transform .3s ease}.start-btn:hover{transform:scale(1.05)}.start-btn:active{transform:scale(.98)}.start-btn-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:2px solid var(--color-inhale);opacity:.4;animation:ring-pulse 3s ease-in-out infinite}@keyframes ring-pulse{0%,to{transform:scale(1);opacity:.4}50%{transform:scale(1.08);opacity:.2}}.start-btn-text{font-size:.95rem;font-weight:400;color:var(--text-primary);letter-spacing:.06em}.sound-toggle{position:absolute;bottom:0;background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.5rem;transition:color .2s ease}.sound-toggle:hover{color:var(--text-secondary)}.sound-toggle svg{width:22px;height:22px}.breathing-screen{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;width:100%;height:100%;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.session-info{position:absolute;top:0;display:flex;gap:1.5rem;font-size:.82rem;color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:.05em}.breath-container{position:relative;display:flex;align-items:center;justify-content:center;width:280px;height:280px}.breath-glow{position:absolute;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,var(--color-inhale) 0%,transparent 70%);filter:blur(60px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}.breath-circle{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid var(--color-inhale);background:radial-gradient(circle at 40% 40%,rgba(92,224,210,.06) 0%,transparent 70%);transition:transform .1s linear,opacity .1s linear,border-color .5s ease,box-shadow .5s ease}.breath-inner-ring{position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;border:1px solid rgba(255,255,255,.06);transition:transform .1s linear}.breath-phase-info{position:absolute;display:flex;flex-direction:column;align-items:center;gap:.25rem;z-index:2}.phase-label{font-size:1.1rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;transition:color .5s ease}.phase-countdown{font-size:2.8rem;font-weight:200;color:var(--text-primary);font-variant-numeric:tabular-nums;line-height:1;opacity:.9}.phase-dots{display:flex;gap:.5rem}.phase-dot{width:8px;height:8px;border-radius:50%;background:#ffffff1a;transition:all .3s ease}.phase-dot.active{transform:scale(1.3)}.phase-dot.done{background:#fff3}.stop-btn{padding:.75rem 2rem;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:100px;color:var(--text-secondary);font-size:.85rem;font-weight:400;letter-spacing:.06em;cursor:pointer;transition:all .2s ease}.stop-btn:hover{background:#ffffff0f;border-color:#ffffff1f;color:var(--text-primary)}@media(max-height:600px){.breath-container{width:200px;height:200px}.phase-countdown{font-size:2rem}}@media(min-width:768px){.breath-container{width:320px;height:320px}}