:root{--bg-top:#e8f0f5;--bg-mid:#d4e4ed;--bg-bot:#e0ecf3;--accent:#4a7a9e;--accent-rgb:70, 130, 170;--text-muted:#8ab0c0;--ink:0, 0, 0;--transition-speed:.6s}*{box-sizing:border-box;margin:0;padding:0}body{background:linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 50%, var(--bg-bot) 100%);min-height:100vh;transition:background var(--transition-speed) ease;-webkit-font-smoothing:antialiased;justify-content:center;align-items:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,sans-serif;display:flex}#app{width:100%;max-width:480px;padding:24px 16px;position:relative}.app-container{flex-direction:column;align-items:center;gap:0;display:flex}.app-header{letter-spacing:3px;text-transform:uppercase;color:rgba(var(--accent-rgb), .5);text-align:center;transition:color var(--transition-speed) ease;margin-bottom:16px;font-size:11px}.techniques{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:8px;display:flex}.tech-pill{cursor:pointer;border:1px solid rgba(var(--ink), .06);background:rgba(var(--ink), .03);color:var(--text-muted);-webkit-tap-highlight-color:transparent;border-radius:16px;padding:7px 16px;font-size:13px;transition:all .3s;display:inline-block}.tech-pill:hover{background:rgba(var(--accent-rgb), .06)}.tech-pill.active{background:rgba(var(--accent-rgb), .12);border-color:rgba(var(--accent-rgb), .25);color:var(--accent)}.technique-desc{color:rgba(var(--accent-rgb), .5);text-align:center;min-height:18px;transition:color var(--transition-speed) ease;margin-bottom:20px;font-size:12px}.breath-area{justify-content:center;align-items:center;width:100%;height:260px;margin-bottom:8px;display:flex;position:relative}.glow{background:radial-gradient(circle, rgba(var(--accent-rgb), .2) 0%, rgba(var(--accent-rgb), .06) 50%, transparent 70%);width:240px;height:240px;transition:background var(--transition-speed) ease, transform .3s ease, opacity .3s ease;pointer-events:none;border-radius:50%;position:absolute}.breath-circle{border:2.5px solid rgba(var(--accent-rgb), .6);background:rgba(var(--accent-rgb), .1);width:160px;height:160px;box-shadow:0 0 24px rgba(var(--accent-rgb), .12), inset 0 0 24px rgba(var(--accent-rgb), .06);transition:border-color var(--transition-speed) ease, background var(--transition-speed) ease, box-shadow var(--transition-speed) ease;border-radius:50%;justify-content:center;align-items:center;display:flex}.breath-orb{background:radial-gradient(circle, rgba(var(--accent-rgb), .6) 0%, rgba(var(--accent-rgb), .3) 35%, rgba(var(--accent-rgb), .08) 65%, transparent 100%);width:160px;height:160px;box-shadow:0 0 40px rgba(var(--accent-rgb), .2), 0 0 80px rgba(var(--accent-rgb), .1);transition:background var(--transition-speed) ease, box-shadow var(--transition-speed) ease;border-radius:50%;justify-content:center;align-items:center;display:flex}.countdown{color:var(--accent);transition:color var(--transition-speed) ease;-webkit-user-select:none;user-select:none;font-size:32px;font-weight:200}.phase-info{text-align:center;margin-bottom:20px}.phase-text{letter-spacing:5px;text-transform:uppercase;color:var(--accent);transition:color var(--transition-speed) ease;font-size:17px;font-weight:300}.phase-sub{color:rgba(var(--accent-rgb), .45);transition:color var(--transition-speed) ease;margin-top:5px;font-size:12px}.visual-toggles{justify-content:center;gap:8px;margin-bottom:16px;display:flex}.toggle-btn{cursor:pointer;border:1px solid rgba(var(--accent-rgb), .15);background:rgba(var(--accent-rgb), .06);color:var(--accent);-webkit-tap-highlight-color:transparent;border-radius:18px;padding:7px 16px;font-size:12px;transition:all .3s}.toggle-btn.active{background:rgba(var(--accent-rgb), .18);border-color:rgba(var(--accent-rgb), .35)}.session-modes{justify-content:center;gap:6px;margin-bottom:20px;display:flex}.mode-pill{cursor:pointer;border:1px solid rgba(var(--ink), .06);background:rgba(var(--ink), .03);color:var(--text-muted);-webkit-tap-highlight-color:transparent;border-radius:16px;padding:7px 16px;font-size:12px;transition:all .3s}.mode-pill.active{background:rgba(var(--accent-rgb), .12);border-color:rgba(var(--accent-rgb), .25);color:var(--accent)}.controls{justify-content:center;align-items:center;gap:14px;margin-bottom:24px;display:flex}.play-btn{background:rgba(var(--accent-rgb), .12);border:1.5px solid rgba(var(--accent-rgb), .3);width:56px;height:56px;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.play-btn:hover{background:rgba(var(--accent-rgb), .2);border-color:rgba(var(--accent-rgb), .5)}.play-btn svg{margin-left:2px}.stop-btn{background:rgba(var(--ink), .04);border:1px solid rgba(var(--ink), .08);width:40px;height:40px;color:rgba(var(--accent-rgb), .5);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.stop-btn:disabled{opacity:.3;cursor:default}.settings-btn{background:rgba(var(--ink), .04);border:1px solid rgba(var(--ink), .08);width:40px;height:40px;color:rgba(var(--accent-rgb), .5);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex}.settings-btn:hover{background:rgba(var(--accent-rgb), .08)}.swatches{justify-content:center;gap:12px;margin-bottom:16px;display:flex}.swatch{cursor:pointer;border:2.5px solid rgba(var(--ink), .08);-webkit-tap-highlight-color:transparent;border-radius:50%;width:28px;height:28px;transition:border-color .3s,transform .2s}.swatch:hover{transform:scale(1.15)}.swatch.active{border-color:var(--accent)}.timing-info{text-align:center}.timing-preset{letter-spacing:1px;color:rgba(var(--accent-rgb), .4);transition:color var(--transition-speed) ease;font-size:11px}.timing-link{cursor:pointer;color:rgba(var(--accent-rgb), .55);text-decoration:underline;-webkit-text-decoration-color:rgba(var(--accent-rgb), .25);text-decoration-color:rgba(var(--accent-rgb), .25);transition:color var(--transition-speed) ease;background:0 0;border:none;margin-top:5px;font-family:inherit;font-size:12px}.timing-link:hover{color:var(--accent)}.completion-overlay{background:rgba(var(--accent-rgb), .08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;justify-content:center;align-items:center;animation:.5s fadeIn;display:flex;position:fixed;inset:0}.completion-content{text-align:center}.completion-title{letter-spacing:3px;color:var(--accent);margin-bottom:12px;font-size:22px;font-weight:300}.completion-stats{color:rgba(var(--accent-rgb), .6);font-size:14px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.settings-backdrop{background:rgba(var(--ink), .2);z-index:200;animation:.3s fadeIn;position:fixed;inset:0}.settings-panel{background:linear-gradient(180deg, var(--bg-top), var(--bg-mid));box-shadow:0 -4px 30px rgba(var(--ink), .1);z-index:201;transition:transform .4s cubic-bezier(.16, 1, .3, 1), background var(--transition-speed) ease;border-radius:20px 20px 0 0;max-height:70vh;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;transform:translateY(100%)}.settings-panel.open{transform:translateY(0)}.settings-header{color:var(--accent);letter-spacing:1px;justify-content:space-between;align-items:center;padding:18px 24px 12px;font-size:15px;font-weight:500;display:flex}.settings-close{color:rgba(var(--accent-rgb), .5);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:24px;line-height:1}.settings-body{padding:0 24px 28px}.settings-techniques{flex-wrap:wrap;gap:8px;display:flex}.settings-tech-pill{cursor:pointer;border:1px solid rgba(var(--ink), .06);background:rgba(var(--ink), .03);color:var(--text-muted);-webkit-tap-highlight-color:transparent;border-radius:14px;padding:8px 16px;font-family:inherit;font-size:12px;transition:all .3s}.settings-tech-pill.active{background:rgba(var(--accent-rgb), .12);border-color:rgba(var(--accent-rgb), .25);color:var(--accent)}.settings-section{margin-bottom:22px}.settings-label{letter-spacing:2px;text-transform:uppercase;color:rgba(var(--accent-rgb), .5);margin-bottom:10px;font-size:11px}.preset-buttons,.round-buttons,.duration-buttons{gap:8px;display:flex}.preset-btn,.round-btn,.dur-btn{cursor:pointer;border:1px solid rgba(var(--ink), .06);background:rgba(var(--ink), .03);color:var(--text-muted);-webkit-tap-highlight-color:transparent;border-radius:14px;padding:8px 16px;font-family:inherit;font-size:12px;transition:all .3s}.preset-btn.active,.round-btn.active,.dur-btn.active{background:rgba(var(--accent-rgb), .12);border-color:rgba(var(--accent-rgb), .25);color:var(--accent)}.phase-sliders{flex-direction:column;gap:12px;display:flex}.phase-slider-row{align-items:center;gap:12px;display:flex}.phase-slider-label{color:rgba(var(--accent-rgb), .6);text-transform:capitalize;min-width:60px;font-size:12px}.phase-slider-row input[type=range]{appearance:none;background:rgba(var(--accent-rgb), .15);border-radius:2px;outline:none;flex:1;height:4px}.phase-slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);cursor:pointer;border:2px solid var(--bg-top);width:18px;height:18px;box-shadow:0 1px 4px rgba(var(--ink), .15);border-radius:50%}.phase-number-input{border:1px solid rgba(var(--accent-rgb), .2);background:rgba(var(--accent-rgb), .06);width:46px;color:var(--accent);font-variant-numeric:tabular-nums;text-align:center;-moz-appearance:textfield;border-radius:8px;outline:none;padding:5px 4px;font-family:inherit;font-size:13px}.phase-number-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.phase-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.phase-number-input:focus{border-color:rgba(var(--accent-rgb), .45);background:rgba(var(--accent-rgb), .1)}.phase-slider-unit{color:rgba(var(--accent-rgb), .45);min-width:10px;font-size:12px}.settings-label-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.settings-label-row .settings-label{margin-bottom:0}.relative-toggle{cursor:pointer;border:1px solid rgba(var(--ink), .06);background:rgba(var(--ink), .03);color:var(--text-muted);-webkit-tap-highlight-color:transparent;border-radius:12px;align-items:center;gap:5px;padding:4px 10px;font-family:inherit;font-size:11px;transition:all .3s;display:flex}.relative-toggle.active{background:rgba(var(--accent-rgb), .14);border-color:rgba(var(--accent-rgb), .3);color:var(--accent)}.custom-input{border:1px solid rgba(var(--accent-rgb), .2);background:rgba(var(--accent-rgb), .06);width:60px;color:var(--accent);border-radius:10px;outline:none;margin-top:8px;padding:6px 10px;font-family:inherit;font-size:13px}.custom-input:focus{border-color:rgba(var(--accent-rgb), .4)}@media (width<=480px){#app{padding:20px 12px}.breath-area{height:220px}.breath-circle,.breath-orb{width:140px;height:140px}.glow{width:200px;height:200px}}