@import"https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden;height:auto}html{height:100%;overflow:hidden;height:auto;min-height:100%}.circle-container{position:relative;display:grid;place-items:center;width:clamp(180px,35vw,280px);height:clamp(180px,35vh,280px);margin:clamp(15px,2vh,25px) auto 0;padding:clamp(25px,4vw,40px);overflow:visible;isolation:isolate;min-width:min(180px,40vw);min-height:min(180px,40vh)}.progress-ring-container{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;pointer-events:none;z-index:3;overflow:visible;transform-origin:center}.progress-ring{fill:none;stroke:rgba(var(--primary-color),.35);stroke-width:2.5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset var(--transition-small) var(--ease-standard);vector-effect:non-scaling-stroke}.progress-ring.inhale{stroke:url(#progressGradientInhale)}.progress-ring.hold{stroke:url(#progressGradientHold)}.progress-ring.exhale{stroke:url(#progressGradientExhale)}.outer-ring{width:clamp(130px,24vw,180px);height:clamp(130px,24vw,180px);border-radius:50%;display:grid;place-items:center;box-shadow:0 10px 30px #4a7c594d,0 5px 15px #8daa9d33;position:relative;z-index:2;background:linear-gradient(135deg,var(--background-color),var(--light-text-color));transition:transform var(--transition-small) var(--ease-standard),background var(--transition-small) var(--ease-standard);will-change:transform;overflow:visible}.outer-ring.inhale{background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));box-shadow:0 10px 30px #4a7c594d,0 5px 15px #8daa9d33}.outer-ring.hold{background:linear-gradient(45deg,var(--secondary-color),var(--accent-color));box-shadow:0 10px 30px #8daa9d4d,0 5px 15px #c9a66b33}.outer-ring.exhale{background:linear-gradient(135deg,var(--accent-color),var(--light-text-color));box-shadow:0 10px 30px #c9a66b4d,0 5px 15px #e2ede133}.outer-ring.idle{background:linear-gradient(90deg,var(--background-color),var(--light-text-color));box-shadow:0 5px 20px #4a7c5933,0 3px 10px #c9a66b1a}.inner-circle{width:clamp(65px,12vw,90px);height:clamp(65px,12vw,90px);border-radius:50%;background-color:rgba(var(--light-text-color),.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);box-shadow:inset 0 0 15px #ffffff80,0 2px 5px #0000000d}.ripple-effect{position:absolute;width:clamp(130px,24vw,180px);height:clamp(130px,24vw,180px);border-radius:50%;background:rgba(var(--accent-color),.3);z-index:1;opacity:.6;will-change:transform,opacity;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%)}.ripple-effect.secondary{background:rgba(var(--secondary-color),.2);opacity:.4}.ripple-effect.tertiary{background:rgba(var(--primary-color),.1);opacity:.2}.circle-container{width:clamp(180px,35vw,280px);height:clamp(180px,35vw,280px);padding:clamp(25px,4vw,40px)}.outer-ring{width:clamp(130px,24vw,180px);height:clamp(130px,24vw,180px)}.inner-circle{width:clamp(65px,12vw,90px);height:clamp(65px,12vw,90px)}.ripple-effect{width:clamp(130px,24vw,180px);height:clamp(130px,24vw,180px)}@media screen and (min-width: 1441px){.circle-container{width:320px;height:320px;padding:50px}.outer-ring{width:200px;height:200px}.inner-circle{width:100px;height:100px}.ripple-effect{width:200px;height:200px}}@media screen and (min-width: 1025px) and (max-width: 1440px){.circle-container{width:clamp(240px,26vw,300px);height:clamp(240px,26vw,300px);padding:45px}.outer-ring{width:clamp(170px,19vw,190px);height:clamp(170px,19vw,190px)}.inner-circle{width:clamp(85px,9.5vw,95px);height:clamp(85px,9.5vw,95px)}.ripple-effect{width:clamp(170px,19vw,190px);height:clamp(170px,19vw,190px)}}@media screen and (min-width: 769px) and (max-width: 1024px){.circle-container{width:260px;height:260px;padding:40px}.outer-ring{width:170px;height:170px}.inner-circle{width:85px;height:85px}.ripple-effect{width:170px;height:170px}}@media screen and (min-width: 481px) and (max-width: 768px){.circle-container{width:clamp(200px,48vw,240px);height:clamp(200px,48vw,240px);padding:35px}.outer-ring{width:clamp(140px,34vw,170px);height:clamp(140px,34vw,170px)}.inner-circle{width:clamp(70px,17vw,85px);height:clamp(70px,17vw,85px)}.ripple-effect{width:clamp(140px,34vw,170px);height:clamp(140px,34vw,170px)}}@media screen and (max-width: 480px){.circle-container{width:clamp(160px,60vw,200px);height:clamp(160px,60vw,200px);padding:30px}.outer-ring{width:clamp(110px,42vw,150px);height:clamp(110px,42vw,150px)}.inner-circle{width:clamp(55px,21vw,75px);height:clamp(55px,21vw,75px)}.ripple-effect{width:clamp(110px,42vw,150px);height:clamp(110px,42vw,150px)}}.control-container{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:clamp(.75rem,1.5vh,1.25rem);overflow:visible;padding:clamp(12px,2vh,20px) clamp(.5rem,2vw,1rem);flex-shrink:0}.cycle-selector{margin-bottom:clamp(.75rem,1.2vh,1.25rem);display:flex;align-items:center;min-height:clamp(2rem,3vh,2.5rem)}.cycle-selector label{font-weight:var(--font-weight-info);margin-right:10px;font-size:var(--font-size-info);line-height:var(--line-height-info);letter-spacing:var(--letter-spacing-subtitle)}.cycle-selector select{background:rgba(var(--secondary-color),.2);border:1px solid rgba(var(--primary-color),.4);border-radius:8px;color:var(--text-color);padding:8px 30px 8px 12px;margin-left:10px;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233C4F3C'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 8px center;background-size:16px;transition:all var(--transition-tiny) var(--ease-standard);box-shadow:0 2px 5px #3c4f3c1a;font-size:var(--font-size-dropdown);font-weight:var(--font-weight-dropdown);line-height:var(--line-height-info);font-family:var(--font-primary);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.cycle-selector select option{background-color:var(--light-text-color);color:var(--text-color);font-weight:var(--font-weight-dropdown);font-family:var(--font-primary);font-size:var(--font-size-dropdown)}.cycle-selector select:hover{background-color:rgba(var(--secondary-color),.3);border-color:rgba(var(--primary-color),.6)}.cycle-selector select:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--primary-color),.4)}.cycle-selector select:disabled{opacity:.6;cursor:not-allowed;background-color:rgba(var(--secondary-color),.1)}.button-container{margin-bottom:clamp(.75rem,1.2vh,1.25rem);min-height:clamp(3rem,4vh,3.5rem);display:flex;align-items:center;justify-content:center}.active-buttons{display:flex;gap:clamp(.75rem,2vw,1rem)}.button{padding:clamp(10px,2vh,14px) clamp(28px,5vw,36px);border:2px solid transparent;border-radius:32px;font-size:var(--font-size-button);font-weight:var(--font-weight-button);cursor:pointer;box-shadow:0 4px 15px #4a7c5933;transition:all var(--transition-small) var(--ease-standard);position:relative;overflow:hidden;letter-spacing:.02em;font-family:var(--font-primary);display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;touch-action:manipulation;line-height:var(--line-height-button);min-width:clamp(120px,20vw,160px);max-width:100%}.button:focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4a7c5940}.button:active{transform:translateY(1px);box-shadow:0 2px 10px #4a7c5933}.button:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:0 2px 10px #4a7c591a}.button:disabled:hover{transform:none;box-shadow:0 2px 10px #4a7c591a}.start-button{background:linear-gradient(135deg,var(--accent-color),var(--primary-color));color:#fff;border-color:var(--accent-color);box-shadow:0 6px 20px #c9a66b4d;text-shadow:0 1px 2px rgba(0,0,0,.1)}.start-button:hover{background:linear-gradient(135deg,#d4b47a,#558c69);border-color:#d4b47a;box-shadow:0 8px 25px #c9a66b66;transform:translateY(-3px)}.start-button:active{background:linear-gradient(135deg,#ba975a,#3e6b4c);border-color:#ba975a;box-shadow:0 3px 12px #c9a66b4d;transform:translateY(1px)}.start-button:disabled{background:linear-gradient(135deg,var(--accent-color),var(--primary-color));box-shadow:0 3px 10px #c9a66b33}.stop-button{background:#fff;color:var(--primary-color);border:2px solid var(--primary-color);box-shadow:0 4px 15px #4a7c5933}.stop-button:hover{background:var(--background-color);border-color:#558c69;box-shadow:0 6px 20px #4a7c594d;transform:translateY(-2px)}.stop-button:active{background:#eef1eb;border-color:#3e6b4c;box-shadow:0 2px 10px #4a7c5933;transform:translateY(1px)}.stop-button:disabled{background:#fff;border-color:var(--primary-color);box-shadow:0 2px 10px #4a7c591a}.skip-button{background:#fff;color:var(--primary-color);border:2px solid var(--primary-color);box-shadow:0 4px 15px #4a7c5933}.skip-button:hover{background:var(--background-color);border-color:#558c69;box-shadow:0 6px 20px #4a7c594d;transform:translateY(-2px)}.skip-button:active{background:#eef1eb;border-color:#3e6b4c;box-shadow:0 2px 10px #4a7c5933;transform:translateY(1px)}.skip-button:disabled{background:#fff;border-color:var(--primary-color);box-shadow:0 2px 10px #4a7c591a}.info-text{text-align:center;font-size:var(--font-size-info);opacity:.9;max-width:clamp(280px,80vw,400px);line-height:var(--line-height-info);color:var(--text-color);font-weight:var(--font-weight-info);font-family:var(--font-primary);min-height:clamp(2.5rem,4vh,3.5rem);display:flex;align-items:center;justify-content:center;margin:0 auto;padding:0 clamp(.5rem,2vw,1rem)}@media screen and (min-width: 481px) and (max-width: 768px){.control-container{margin-top:.5rem;padding-top:14px}.button{padding:12px 32px;font-size:var(--font-size-button);line-height:var(--line-height-button)}.info-text{max-width:350px;font-size:var(--font-size-info);line-height:var(--line-height-info);min-height:3.5rem}.cycle-selector{margin-bottom:1rem;min-height:2.3rem}.cycle-selector select{padding:7px 28px 7px 11px;font-size:var(--font-size-dropdown);line-height:var(--line-height-info)}.button-container{margin-bottom:1rem;min-height:3.2rem}}@media screen and (max-width: 480px){.control-container{margin-top:.5rem;padding:12px clamp(.5rem,3vw,1rem)}.cycle-selector{margin-bottom:.75rem;min-height:2.2rem}.cycle-selector select{padding:6px 25px 6px 10px;font-size:.9rem}.button-container{margin-bottom:.75rem;min-height:3rem}.button{padding:10px clamp(20px,5vw,28px);font-size:var(--font-size-button);line-height:var(--line-height-button);width:clamp(120px,40vw,160px)}.info-text{max-width:280px;font-size:var(--font-size-info);line-height:var(--line-height-info);min-height:4.5rem}.active-buttons{flex-direction:column;gap:.75rem;width:100%;align-items:center}}@media screen and (min-width: 769px) and (max-width: 1024px){.control-container{margin-top:.75rem;padding-top:16px}.button{padding:13px 34px;font-size:var(--font-size-button);line-height:var(--line-height-button)}.info-text{max-width:375px;font-size:var(--font-size-info);line-height:var(--line-height-info);min-height:3rem}.cycle-selector{margin-bottom:1.1rem;min-height:2.4rem}.button-container{margin-bottom:1.1rem;min-height:3.3rem}}@media screen and (min-width: 1025px) and (max-width: 1440px){.control-container{margin-top:.75rem;padding-top:18px}.button{padding:14px 36px;font-size:var(--font-size-button);line-height:var(--line-height-button)}.info-text{max-width:400px;font-size:var(--font-size-info);line-height:var(--line-height-info);min-height:3rem}.cycle-selector{margin-bottom:1.25rem;min-height:2.5rem}.button-container{margin-bottom:1.25rem;min-height:3.5rem}}@media screen and (min-width: 1441px){.control-container{margin-top:1rem;padding-top:20px}.button{padding:15px 38px;font-size:var(--font-size-button);line-height:var(--line-height-button)}.info-text{max-width:450px;font-size:var(--font-size-info);line-height:var(--line-height-info);min-height:3rem}.cycle-selector{margin-bottom:1.5rem;min-height:2.5rem}.button-container{margin-bottom:1.5rem;min-height:3.5rem}}.error-boundary{padding:24px;margin:20px auto;border-radius:8px;box-shadow:0 4px 6px #0000001a;max-width:600px;z-index:100}.error-boundary h2{margin-top:0;margin-bottom:16px;font-size:24px;font-weight:600}.error-boundary.error-critical{background-color:#fee;border:1px solid #fcc;color:#c33}.error-boundary.error-functional{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.error-boundary.error-ui{background-color:#e7f3ff;border:1px solid #b3d9ff;color:#0056b3}.error-boundary.error-network{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.error-boundary.error-timeout{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.error-content{display:flex;flex-direction:column;gap:16px}.error-message{font-size:16px;line-height:1.5;margin:0}.error-details{background-color:#0000000d;padding:12px;border-radius:4px;font-family:Courier New,monospace;font-size:12px;max-height:200px;overflow-y:auto}.error-details summary{cursor:pointer;font-weight:600;margin-bottom:8px}.error-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}.error-action{padding:8px 16px;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.error-action.retry{background-color:#007bff;color:#fff}.error-action.retry:hover{background-color:#0056b3}.error-action.reset{background-color:#6c757d;color:#fff}.error-action.reset:hover{background-color:#545b62}.error-action.continue{background-color:#28a745;color:#fff}.error-action.continue:hover{background-color:#218838}.error-action.refresh{background-color:#ffc107;color:#212529}.error-action.refresh:hover{background-color:#e0a800}@media screen and (max-width: 768px){.error-boundary{margin:10px;padding:16px}.error-boundary h2{font-size:20px;margin-bottom:12px}.error-message{font-size:14px}.error-actions{flex-direction:column;gap:8px}.error-action{width:100%;text-align:center}}@media screen and (max-width: 480px){.error-boundary{margin:5px;padding:12px}.error-boundary h2{font-size:18px;margin-bottom:10px}.error-message{font-size:13px}.error-details{font-size:11px;max-height:150px}}:root{--primary-color: #4A7C59;--secondary-color: #8DAA9D;--accent-color: #C9A66B;--background-color: #F8F9F3;--text-color: #2E3D2F;--light-text-color: #E2EDE1;--error-color: #E74C3C;--font-primary: "Noto Sans", sans-serif;--font-size-title: 2.8rem;--font-size-subtitle: 1.3rem;--font-size-instruction: 1.4rem;--font-size-progress: 1.1rem;--font-size-button: 1.1rem;--font-size-info: 1rem;--font-size-dropdown: 1rem;--font-weight-title: 800;--font-weight-subtitle: 500;--font-weight-instruction: 500;--font-weight-progress: 400;--font-weight-button: 600;--font-weight-info: 400;--font-weight-dropdown: 500;--line-height-title: 1.1;--line-height-subtitle: 1.3;--line-height-instruction: 1.5;--line-height-progress: 1.4;--line-height-button: 1.2;--line-height-info: 1.5;--letter-spacing-title: .02em;--letter-spacing-subtitle: .01em;--transition-micro: .1s;--transition-tiny: .2s;--transition-small: .3s;--transition-medium: .5s;--transition-large: .8s;--ease-standard: cubic-bezier(.4, 0, .2, 1);--ease-entrance: cubic-bezier(0, 0, .2, 1);--ease-exit: cubic-bezier(.4, 0, 1, 1);--ease-attention: cubic-bezier(.5, 0, .5, 1);--focus-color: #C9A66B;--focus-width: 2px;--focus-offset: 2px}#root{width:100%;margin:0 auto;text-align:center}body{margin:0;padding:0;font-family:var(--font-primary);overflow:hidden;min-height:100dvh;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);scroll-behavior:smooth}*:focus{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}*:focus:not(:focus-visible){outline:none}*:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}button,select{font-family:inherit}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.app-container{animation:none}}.card{padding:2em}.read-the-docs{color:#888}.app-container{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(.5rem,1.5vh,1rem);gap:clamp(.25rem,1vh,.5rem);background:linear-gradient(135deg,var(--background-color),var(--light-text-color),var(--secondary-color));background-size:400% 400%;animation:gradient 15s ease infinite;color:var(--text-color);box-sizing:border-box;position:relative;overflow:hidden}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.title{font-size:clamp(1.5rem,5vw,2.5rem);margin:0 0 .25rem;font-weight:var(--font-weight-title);color:var(--text-color);line-height:var(--line-height-title);letter-spacing:var(--letter-spacing-title)}.subtitle{font-size:clamp(.8rem,2.5vw,1.2rem);margin:0 0 .5rem;opacity:.9;color:var(--primary-color);font-weight:var(--font-weight-subtitle);line-height:var(--line-height-subtitle);letter-spacing:var(--letter-spacing-subtitle)}.main-content{display:flex;flex-direction:column;align-items:center;max-width:800px;width:100%;margin:0 auto;gap:clamp(.5rem,1.5vh,1rem);overflow:visible;flex-shrink:0;padding:0 clamp(.5rem,2vw,1rem)}.instruction-text{font-size:clamp(.9rem,2.2vw,1.2rem);margin:0;font-weight:var(--font-weight-instruction);text-align:center;color:var(--text-color);line-height:var(--line-height-instruction);min-height:clamp(1.8rem,3.5vh,2.5rem);display:flex;align-items:center;justify-content:center;padding:0 clamp(.5rem,2vw,1rem);width:100%}.progress-text{font-size:clamp(.8rem,2vw,1rem);margin:0;opacity:.9;color:var(--primary-color);font-weight:var(--font-weight-progress);line-height:var(--line-height-progress)}.error-message{position:fixed;top:20px;background-color:rgba(var(--secondary-color),.9);padding:15px 20px;border-radius:8px;display:flex;align-items:center;z-index:100;color:var(--text-color);border:1px solid var(--primary-color)}.error-message button{margin-left:15px;background:rgba(var(--primary-color),.7);border:none;border-radius:4px;padding:5px 10px;color:var(--background-color);cursor:pointer}.error-notification{position:fixed;top:20px;right:20px;max-width:400px;padding:16px;border-radius:8px;box-shadow:0 4px 12px #00000026;z-index:9999;animation:slideIn .3s ease-out}.error-notification.critical{background-color:#fee;border:1px solid #fcc;color:#c33}.error-notification.functional{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.error-notification.ui{background-color:#e7f3ff;border:1px solid #b3d9ff;color:#0056b3}.error-notification.network{background-color:#f8d7da;border:1px solid #f5c6cb;color:#721c24}.error-notification.user_input,.error-notification.timeout{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.error-notification .error-content{display:flex;justify-content:space-between;align-items:flex-start}.error-notification .error-dismiss{background:none;border:none;font-size:20px;cursor:pointer;color:inherit;opacity:.7;margin-left:16px;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center}.error-notification .error-dismiss:hover{opacity:1}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.error-notification.hiding{animation:slideOut .3s ease-out forwards}