:root{--white: #FDFCFB;--cream: #F7F5F2;--sand: #EBE6DF;--stone: #D4CEC4;--warm-gray: #A69F94;--charcoal: #4A4640;--deep: #2C2925;--accent: #C4A77D;--accent-soft: #D4C4A8}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Sans,-apple-system,sans-serif;background-color:var(--white);color:var(--charcoal);min-height:100vh;overflow-x:hidden}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;position:relative}.app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 30% 20%,var(--cream) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,var(--sand) 0%,transparent 40%),var(--white);pointer-events:none;z-index:-1}.container{width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:3.5rem}.header{text-align:center;animation:fadeDown .8s ease-out}.title{font-family:Cormorant,Georgia,serif;font-size:3rem;font-weight:300;letter-spacing:.02em;color:var(--deep);margin-bottom:.5rem}.subtitle{font-size:.875rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;color:var(--warm-gray)}.circle-container{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center;animation:fadeIn 1s ease-out .2s both}.outer-ring{position:absolute;width:100%;height:100%;border-radius:50%;border:1px solid var(--sand)}.progress-ring{position:absolute;width:100%;height:100%;transform:rotate(-90deg)}.progress-ring circle{fill:none;stroke-width:1;stroke-linecap:round}.progress-ring .bg{stroke:var(--sand)}.progress-ring .progress{stroke:var(--accent);stroke-dasharray:879.6;stroke-dashoffset:879.6;transition:stroke-dashoffset 1s linear}.breathing-circle{width:180px;height:180px;border-radius:50%;background:linear-gradient(145deg,var(--cream),var(--white));box-shadow:20px 20px 60px #0000000d,-20px -20px 60px #fffc,inset 0 0 0 1px #ffffff80;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.4,0,.2,1);position:relative}.breathing-circle:after{content:"";position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border-radius:50%;border:1px solid var(--stone);opacity:.5}.timer{font-family:Cormorant,Georgia,serif;font-size:4rem;font-weight:300;color:var(--deep);line-height:1}.phase-name{font-size:.75rem;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-gray);margin-top:.25rem}.stats-row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 1rem;animation:fadeIn .8s ease-out .4s both}.stat{font-size:.8125rem;color:var(--warm-gray);font-weight:300}.stat-value{color:var(--charcoal);font-weight:400}.sound-toggle{display:flex;align-items:center;gap:.625rem;cursor:pointer}.sound-toggle span{font-size:.8125rem;color:var(--warm-gray);font-weight:300}.toggle{width:36px;height:20px;background:var(--sand);border-radius:10px;position:relative;transition:background .3s ease;border:none;cursor:pointer}.toggle.active{background:var(--accent-soft)}.toggle:after{content:"";position:absolute;width:16px;height:16px;background:var(--white);border-radius:50%;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 1px 3px #0000001a}.toggle.active:after{transform:translate(16px)}.sound-controls{display:flex;align-items:center;gap:1rem}.sound-mode{display:flex;gap:.25rem;background:var(--sand);padding:.25rem;border-radius:.5rem}.mode-btn{font-family:DM Sans,sans-serif;font-size:.6875rem;font-weight:400;letter-spacing:.05em;padding:.375rem .75rem;border:none;border-radius:.375rem;background:transparent;color:var(--warm-gray);cursor:pointer;transition:all .2s ease}.mode-btn:hover{color:var(--charcoal)}.mode-btn.active{background:var(--white);color:var(--charcoal);box-shadow:0 1px 3px #00000014}.controls{display:flex;gap:1rem;animation:fadeUp .8s ease-out .5s both}.btn{font-family:DM Sans,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;padding:1rem 2.5rem;border-radius:100px;border:none;cursor:pointer;transition:all .3s ease}.btn-primary{background:var(--deep);color:var(--white)}.btn-primary:hover{background:var(--charcoal);transform:translateY(-1px)}.btn-secondary{background:transparent;color:var(--charcoal);border:1px solid var(--stone)}.btn-secondary:hover{background:var(--cream);border-color:var(--warm-gray)}.settings{width:100%;background:var(--cream);border-radius:1.5rem;padding:1.75rem;animation:fadeUp .8s ease-out .6s both}.settings-title{font-size:.6875rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--warm-gray);text-align:center;margin-bottom:1.25rem}.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.setting-item{display:flex;flex-direction:column;align-items:center;gap:.5rem}.setting-label{font-size:.6875rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-gray)}.setting-input{width:100%;text-align:center;font-family:Cormorant,Georgia,serif;font-size:1.5rem;font-weight:400;color:var(--deep);background:var(--white);border:1px solid var(--sand);border-radius:.75rem;padding:.625rem;transition:all .2s ease}.setting-input:focus{outline:none;border-color:var(--accent)}.setting-input:disabled{opacity:.5;cursor:not-allowed}.footer{font-family:Cormorant,Georgia,serif;font-size:.9375rem;font-style:italic;font-weight:300;color:var(--warm-gray);text-align:center;animation:fadeIn .8s ease-out .7s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 480px){.container{gap:2.5rem}.title{font-size:2.5rem}.circle-container{width:240px;height:240px}.breathing-circle{width:150px;height:150px}.timer{font-size:3rem}.settings-grid{grid-template-columns:repeat(2,1fr)}.btn{padding:.875rem 1.75rem;font-size:.75rem}}