: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;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;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:400px;display:flex;flex-direction:column;align-items:center;gap:2.5rem}.top-bar{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 .5rem}.title{font-family:Cormorant,Georgia,serif;font-size:1.75rem;font-weight:300;letter-spacing:.02em;color:var(--deep)}.icon-btn{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:50%;color:var(--warm-gray);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.icon-btn:hover{background:var(--sand);color:var(--charcoal)}.icon-btn:active{transform:scale(.95)}.icon-img{width:22px;height:22px;object-fit:contain;opacity:.7;transition:opacity .2s ease}.icon-btn:hover .icon-img{opacity:1}.circle-container{position:relative;width:280px;height:280px;display:flex;align-items:center;justify-content:center}.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}.cycle-count{position:absolute;bottom:1.25rem;font-size:.625rem;font-weight:400;letter-spacing:.1em;color:var(--stone);text-transform:lowercase}.controls{display:flex;gap:1rem;min-height:56px}.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 .2s ease;-webkit-tap-highlight-color:transparent}.btn-large{padding:1.125rem 3.5rem;font-size:1rem}.btn-primary{background:var(--deep);color:var(--white)}.btn-primary:hover{background:var(--charcoal)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:transparent;color:var(--charcoal);border:1px solid var(--stone)}.btn-secondary:hover{background:var(--cream);border-color:var(--warm-gray)}.settings-panel{width:100%;max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease;opacity:0}.settings-panel.open{max-height:300px;opacity:1}.settings-content{background:var(--cream);border-radius:1.25rem;padding:1.5rem}.slider-group{display:flex;flex-direction:column;gap:1.25rem}.slider-item{display:flex;align-items:center;gap:1rem}.slider-item label{font-size:.75rem;font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--warm-gray);width:60px;flex-shrink:0}.slider-item input[type=range]{flex:1;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--sand);border-radius:2px;outline:none}.slider-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;background:var(--white);border:1px solid var(--stone);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000001a;transition:transform .15s ease}.slider-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.slider-item input[type=range]::-webkit-slider-thumb:active{transform:scale(.95);background:var(--cream)}.slider-item input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--white);border:1px solid var(--stone);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #0000001a}.slider-item input[type=range]:disabled{opacity:.4;pointer-events:none}.slider-value{font-family:Cormorant,Georgia,serif;font-size:1.25rem;font-weight:400;color:var(--deep);width:32px;text-align:right;flex-shrink:0}.top-bar,.controls,.settings-panel{max-width:280px}@media (max-width: 480px){.container{gap:2rem}.title{font-size:1.5rem}.circle-container{width:min(280px,calc(100vw - 3rem));height:min(280px,calc(100vw - 3rem))}.breathing-circle{width:min(180px,calc(100vw - 6.5rem));height:min(180px,calc(100vw - 6.5rem))}.top-bar,.controls,.settings-panel{max-width:min(280px,calc(100vw - 3rem))}.btn{padding:.875rem 2rem}}@media (max-width: 374px){.app{padding:1rem}.container{gap:1.75rem}.title{font-size:1.35rem}.icon-btn{width:40px;height:40px}.icon-img{width:20px;height:20px}.circle-container{width:calc(100vw - 2rem);height:calc(100vw - 2rem);max-width:260px;max-height:260px}.breathing-circle{width:calc(100vw - 6rem);height:calc(100vw - 6rem);max-width:165px;max-height:165px}.top-bar,.controls,.settings-panel{max-width:calc(100vw - 2rem)}.timer{font-size:3rem}.phase-name{font-size:.7rem}.btn{padding:.75rem 1.75rem;font-size:.8125rem}.settings-content{padding:1.25rem}.slider-item label{width:50px;font-size:.7rem}.slider-value{font-size:1.1rem}}@supports (padding-bottom: env(safe-area-inset-bottom)){.app{padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}}