@import "https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;700&display=swap";:root{--bg-color:#a3b18a;--title-color:#d4e09b;--outline-color:#588157;--btn-bg:#588157;--btn-border:#344e41;--drawer-bg:#fefefa;--overlay-bg:#344e4166;--text-dark:#344e41;--pill-bg:#e9edc9;--pill-active:#588157}body{background-color:var(--bg-color);overscroll-behavior-y:none;justify-content:center;margin:0;padding:0;font-family:Fredoka,sans-serif;display:flex;overflow:hidden}#canvas-container{z-index:1;width:100vw;height:100dvh;position:fixed;top:0;left:0;transform:translateY(-5vh)}#ui-layer{pointer-events:none;width:100vw;height:100dvh;padding-top:max(40px, env(safe-area-inset-top));padding-bottom:max(40px, env(safe-area-inset-bottom));box-sizing:border-box;z-index:10;flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0}#drawer-overlay{background-color:var(--overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;z-index:20;width:100vw;height:100dvh;transition:opacity .3s;position:fixed;top:0;left:0}#drawer-overlay.open{opacity:1;pointer-events:auto}.header,.footer{pointer-events:auto;flex-direction:column;align-items:center;width:100%;display:flex}.action-row{justify-content:center;align-items:center;gap:16px;display:flex;position:relative}.title{color:var(--title-color);text-align:center;text-shadow:-4px -4px 0 var(--outline-color), 0px -4px 0 var(--outline-color), 4px -4px 0 var(--outline-color), 4px 0px 0 var(--outline-color), 4px 4px 0 var(--outline-color), 0px 4px 0 var(--outline-color), -4px 4px 0 var(--outline-color), -4px 0px 0 var(--outline-color);margin:0;font-size:clamp(2.5rem,10vw,5rem);font-weight:700}.timer-display{color:#fff;text-align:center;text-shadow:2px 2px #0000001a;margin-bottom:15px;font-size:clamp(4rem,15vw,5rem);font-weight:700}#start-btn{background-color:var(--title-color);color:#fff;border:5px solid var(--outline-color);box-sizing:border-box;cursor:pointer;width:calc(100vw - 180px);max-width:280px;text-shadow:-2px -2px 0 var(--outline-color), 0px -2px 0 var(--outline-color), 2px -2px 0 var(--outline-color), 2px 0px 0 var(--outline-color), 2px 2px 0 var(--outline-color), 0px 2px 0 var(--outline-color), -2px 2px 0 var(--outline-color), -2px 0px 0 var(--outline-color);border-radius:100px;padding:12px 0;font-family:Fredoka,sans-serif;font-size:2.2rem;font-weight:700;transition:transform .1s cubic-bezier(.4,0,.2,1)}#start-btn:active{transform:scale(.96)}#settings-btn{background-color:var(--title-color);border:5px solid var(--outline-color);color:#fff;cursor:pointer;pointer-events:auto;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .1s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;top:50%;left:calc(100% + 12px);transform:translateY(-50%)}#settings-btn:active{transform:translateY(-50%)scale(.92)}#settings-btn svg{width:32px;height:32px;overflow:visible}#settings-btn svg path{stroke:var(--outline-color);stroke-width:60px;stroke-linejoin:round}#settings-modal,.hidden-modal{background-color:var(--drawer-bg);box-sizing:border-box;color:var(--text-dark);z-index:21;border-radius:24px;padding:24px;position:fixed}#settings-modal{top:max(16px, env(safe-area-inset-top));bottom:max(16px, env(safe-area-inset-bottom));right:max(16px, env(safe-area-inset-right));pointer-events:none;overscroll-behavior-y:contain;-ms-overflow-style:none;scrollbar-width:none;width:calc(100vw - 32px);max-width:340px;height:auto;transition:transform .4s cubic-bezier(.16,1,.3,1);overflow-y:auto;transform:translate(calc(100% + 50px));box-shadow:-8px 0 32px #0000001a}#settings-modal::-webkit-scrollbar{display:none}#settings-modal.open{pointer-events:auto;transform:translate(0)}.drawer-action-btn{background-color:var(--pill-active);color:#fff;cursor:pointer;border:none;border-radius:16px;justify-content:center;align-items:center;gap:12px;width:100%;margin-top:32px;margin-bottom:0;padding:16px;font-family:Fredoka,sans-serif;font-size:1.1rem;font-weight:600;transition:transform .1s;display:flex;box-shadow:0 4px 12px #0000001a}.drawer-action-btn:active{transform:scale(.96)}.hidden-modal{opacity:0;pointer-events:none;text-align:center;width:calc(100vw - 32px);max-width:340px;transition:all .3s cubic-bezier(.16,1,.3,1);top:50%;left:50%;transform:translate(-50%,-40%);box-shadow:0 12px 32px #0003}.hidden-modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)}.ios-modal-content h3{margin:0 0 16px;font-size:1.4rem}.ios-modal-content p{opacity:.9;margin:0 0 16px;line-height:1.4}.ios-modal-content ol{text-align:left;margin-bottom:24px;padding-left:20px;line-height:1.5}#close-ios-btn{background-color:var(--pill-active);color:#fff;cursor:pointer;border:none;border-radius:12px;width:100%;padding:12px 24px;font-family:Fredoka,sans-serif;font-size:1.1rem;font-weight:500;transition:transform .1s}#close-ios-btn:active{transform:scale(.96)}.settings-section{margin-bottom:32px}.settings-section:last-of-type{margin-bottom:0}.settings-title{text-align:center;margin:0 0 16px;font-size:1.4rem;font-weight:700}.flavor-list{justify-content:center;gap:16px;display:flex}.flavor-btn{cursor:pointer;background:0 0;border:4px solid #0000;border-radius:16px;padding:0;transition:all .2s cubic-bezier(.34,1.56,.64,1);overflow:hidden;box-shadow:0 4px 12px #0000000d}.flavor-btn img{object-fit:cover;width:72px;height:72px;transition:transform .2s;display:block}.flavor-btn.active{border-color:var(--pill-active);transform:scale(1.1);box-shadow:0 8px 16px #00000026}.flavor-btn:hover:not(.active) img{transform:scale(1.1)}.pattern-list{flex-direction:column;gap:20px;display:flex}.pattern-card h3{opacity:.8;margin:0 0 10px;font-size:1rem;font-weight:500}.phase-toggles{background-color:var(--pill-bg);border-radius:12px;gap:4px;padding:4px;display:flex}.step-btn{color:var(--text-dark);cursor:pointer;box-shadow:none;background:0 0;border:none;border-radius:8px;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:10px 0;transition:all .2s;display:flex}.phase-time{opacity:.7;font-size:.85rem;font-weight:500}.step-btn.active{background-color:var(--pill-active);color:#fff;transform:none;box-shadow:0 2px 8px #0000001a}.step-btn.active .phase-time{opacity:1;font-weight:700}.step-btn:hover:not(.active){background-color:#ffffff80}.step-btn:active{box-shadow:none;transform:scale(.95)}