.connection-status-host{align-items:center;margin-right:8px;display:flex}.connection-status-viewer{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#6fa8ff26;border:1px solid #6fa8ff4d;border-radius:20px;align-items:center;gap:8px;margin-right:8px;padding:6px 12px;display:flex}.session-info{color:#6fa8ff;align-items:center;gap:6px;margin-right:4px;font-size:.875rem;font-weight:500;display:flex}.session-info svg{width:16px;height:16px}.beacon-container{cursor:pointer;color:#4ade80;justify-content:center;align-items:center;display:flex;position:relative}.beacon-container.host-online{color:#4ade80}.beacon-container.host-offline{color:#ef4444}.beacon-icon{animation:3s cubic-bezier(.4,0,.6,1) infinite pulse}.beacon-count{color:#fff;text-align:center;background:#3b82f6;border-radius:10px;min-width:16px;padding:2px 5px;font-size:10px;font-weight:700;line-height:1;position:absolute;top:-6px;right:-6px}.host-offline-indicator{background:#ef4444e6;border-radius:50%;justify-content:center;align-items:center;width:14px;height:14px;font-size:10px;line-height:1;display:flex;position:absolute;top:-2px;left:-2px}.take-control-btn,.leave-btn{color:#fffc;cursor:pointer;background:#ffffff1a;border:none;border-radius:6px;padding:4px 10px;font-size:11px;transition:background .2s}.take-control-btn{background:#3b82f64d}.take-control-btn:hover{color:#fff;background:#3b82f680}.leave-btn:hover{color:#fff;background:#ff3b304d}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
.morph-play-btn{cursor:pointer;background:var(--control-bg);color:var(--control-text);font:inherit;-webkit-backdrop-filter:saturate(120%)blur(4px);backdrop-filter:saturate(120%)blur(4px);-webkit-user-select:none;user-select:none;--morph-w-play:52px;--morph-h-play:52px;--morph-r-play:52px;--morph-w-complete:142px;--morph-h-complete:40px;--morph-r-complete:9999px;width:var(--morph-w,var(--morph-w-play));height:var(--morph-h,var(--morph-h-play));min-width:var(--morph-w,var(--morph-w-play));min-height:var(--morph-h,var(--morph-h-play));border-radius:var(--morph-r,var(--morph-r-play));--morph-duration:.36s;--morph-ease:var(--ease-panel,cubic-bezier(.22,1,.36,1));transition:width var(--morph-duration)var(--morph-ease),height var(--morph-duration)var(--morph-ease),min-width var(--morph-duration)var(--morph-ease),min-height var(--morph-duration)var(--morph-ease),border-radius var(--morph-duration)var(--morph-ease),background var(--morph-duration)var(--morph-ease),color var(--morph-duration)var(--morph-ease),box-shadow var(--morph-duration)var(--morph-ease),transform .12s ease;border:none;justify-content:center;align-items:center;display:inline-flex;position:relative;overflow:hidden}.morph-play-btn--play{--morph-w:var(--morph-w-play);--morph-h:var(--morph-h-play);--morph-r:var(--morph-r-play)}.morph-play-btn--complete{--morph-w:var(--morph-w-complete);--morph-h:var(--morph-h-complete);--morph-r:var(--morph-r-complete);color:#a5b4fc;background:#6366f126}.morph-play-btn--complete:hover:not(:disabled){color:#fff;background:#6366f140}.morph-play-btn:hover:not(:disabled){transform:scale(1.02)}.morph-play-btn:active:not(:disabled){transform:scale(.96)}.morph-play-btn:focus-visible{box-shadow:var(--control-shadow-focus);outline:none}.morph-play-btn:disabled{opacity:.35;filter:saturate(.4);cursor:not-allowed;pointer-events:none}.morph-play-btn__layer{pointer-events:none;white-space:nowrap;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0}.morph-play-btn__layer--play svg{fill:currentColor}.morph-play-btn__layer[data-layer=current]{opacity:1;filter:blur();transform:scale(1)}.morph-play-btn__layer[data-layer=prev]{opacity:0;filter:blur(6px);transform:scale(.85)}@keyframes morph-layer-enter{0%{opacity:0;filter:blur(6px);transform:scale(.85)}to{opacity:1;filter:blur();transform:scale(1)}}@keyframes morph-layer-exit{0%{opacity:1;filter:blur();transform:scale(1)}to{opacity:0;filter:blur(6px);transform:scale(.85)}}.morph-play-btn--animating .morph-play-btn__layer[data-layer=current]{animation:morph-layer-enter .32s var(--morph-ease)both;will-change:opacity,filter,transform;animation-delay:40ms}.morph-play-btn--animating .morph-play-btn__layer[data-layer=prev]{will-change:opacity,filter,transform;animation:.24s ease-out both morph-layer-exit}.morph-play-btn__label{letter-spacing:.01em;font-size:.8rem;font-weight:600}#flowco-app-root[data-ui-mode=panel] .morph-play-btn{--morph-w-play:44px;--morph-h-play:44px;--morph-r-play:44px;--morph-w-complete:130px;--morph-h-complete:34px}@media (prefers-reduced-motion:reduce){.morph-play-btn{transition-duration:0s!important}.morph-play-btn--animating .morph-play-btn__layer[data-layer=current],.morph-play-btn--animating .morph-play-btn__layer[data-layer=prev]{animation-duration:0s!important;animation-delay:0s!important}}
@property --spread-phase{syntax:"<number>";inherits:true;initial-value:0}@property --scale-factor{syntax:"<number>";inherits:true;initial-value:.01}@property --rotation-angle{syntax:"<angle>";inherits:true;initial-value:360deg}body.breathe-mode #app{--ui-blur-effective:var(--ui-blur-max,12px)}body.breathe-mode #bg-root{filter:blur(var(--ui-blur-max,12px))!important}body.breathe-mode #bottom-progress{opacity:0;pointer-events:none;transition:opacity .4s}#breathe-timer{display:none}body.breathe-mode .timer-stack-content,body.breathe-mode .flowco-stack,body.breathe-mode #upcoming-wrap{opacity:0;filter:blur(30px);pointer-events:none}body.breathe-mode .app-header,body.breathe-mode #flowco-bottom{opacity:0;z-index:-1}.breathe-panel{box-shadow:none;opacity:0;pointer-events:none;background:0 0;border:none;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);padding:clamp(20px,4vw,36px);transition:opacity 1s;display:flex;position:relative}body.breathe-mode .breathe-panel{opacity:1;pointer-events:auto}.breathe-panel-stage{flex-direction:column;align-items:center;gap:clamp(1.25rem,3vw,2.5rem);margin:0 auto;display:flex}.breathe-panel .stage{aspect-ratio:1;place-items:center;display:grid}.breathe-panel .prompt.overlay{pointer-events:none;text-align:center;z-index:3;mix-blend-mode:difference;width:100%;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)scale(.75)}.instruction{--text-letter-spacing:0em;--text-font-size:2em;--text-duration:4s;--text-fade-duration:1.2s;opacity:0;filter:blur(10px);text-align:center;width:100%;font-size:var(--text-font-size,2em);letter-spacing:var(--text-letter-spacing,0em);transform-origin:50%;transition:letter-spacing var(--text-duration,6s)ease,font-size var(--text-duration,6s)ease,color .4s ease;margin:0 auto;font-weight:400}@keyframes instructionPulse{0%{opacity:0;filter:blur(8px)}30%{opacity:.5;filter:blur()}80%{opacity:.5;filter:blur()}to{opacity:0;filter:blur(8px)}}.instruction.visible{animation:instructionPulse var(--breathe-step-ms,4s)ease-in-out forwards}.instruction.goodluck{opacity:0;filter:blur(8px);transition:opacity 1s,filter 1s}.instruction.goodluck.visible{opacity:1;filter:blur()}.instruction.breath-in,.instruction.hold-breath-in{letter-spacing:.2em;font-size:calc(var(--text-font-size) + .5em)}@keyframes countdownPulse{0%{opacity:0;filter:blur(10px);transform:scale(1)}40%{opacity:.5;filter:blur();transform:scale(1)}60%{opacity:.5;filter:blur();transform:scale(1)}to{opacity:0;filter:blur(10px);transform:scale(1)}}.instruction.countdown{letter-spacing:.12em;font-weight:600;animation:1s ease-in-out 3 forwards countdownPulse}.breathe-panel .watch-shell{--face-size:min(270px,72vw);width:var(--face-size);height:var(--face-size);transition:opacity var(--text-fade-duration,2.2s)ease-in-out,filter var(--text-fade-duration,2.2s)ease-in-out;place-items:center;position:relative}.breathe-panel .watch-face{--duration:4s;transform-origin:50%;width:100%;height:100%;transform:rotate(var(--rotation-angle))scale(var(--scale-factor));transition:transform var(--duration)cubic-bezier(.5,0,.5,1),opacity calc(var(--duration)/1)ease-in-out;filter:drop-shadow(0 0 40px #64b9ff73);margin:auto;position:absolute;inset:0}.breathe-panel .watch-face.primary:after{content:"";filter:blur(30px);opacity:.7;pointer-events:none;background:radial-gradient(circle,#7edcff33,#0000 60%);border-radius:50%;transition:opacity .6s;position:absolute;inset:15%}.breathe-panel .watch-face.ghost{opacity:0;filter:blur(3px);pointer-events:none;transition:transform var(--duration)cubic-bezier(.5,0,.5,1),opacity .6s ease}.breathe-panel .watch-face.ghost.ghost-active{opacity:.45}.breathe-panel .watch-face.ghost.ghost-active[data-ghost="0.6"]{opacity:.3}.breathe-panel .watch-face.ghost.ghost-active[data-ghost="0.9"]{opacity:.2}.breathe-panel .watch-face.ghost.ghost-active.phase-out,.breathe-panel .watch-face.ghost.ghost-active.phase-hold-empty{opacity:.12}.breathe-panel .watch-face.ghost:not(.ghost-active).phase-out,.breathe-panel .watch-face.ghost:not(.ghost-active).phase-hold-empty{opacity:0}.breathe-panel .watch-face.phase-pre,.breathe-panel .watch-face.phase-countdown{--spread-phase:0;--scale-factor:0;--rotation-angle:360deg;opacity:0}.breathe-panel .watch-face.phase-in{--spread-phase:1;--scale-factor:1;--rotation-angle:0deg;--letter-spacing:.2em;--instruction-size:clamp(2.1rem,5.6vw,3.4rem)}.breathe-panel .watch-face.phase-hold-full{--spread-phase:1;--scale-factor:1.05;--rotation-angle:0deg;--letter-spacing:.2em;--instruction-size:clamp(2.15rem,5.7vw,3.45rem)}.breathe-panel .watch-face.phase-out{--spread-phase:0;--scale-factor:0;--rotation-angle:360deg;--letter-spacing:.05em;--instruction-size:clamp(1.8rem,5vw,3rem)}.breathe-panel .watch-face.phase-hold-empty{--spread-phase:0;--scale-factor:0;--rotation-angle:360deg;--letter-spacing:.05em;--instruction-size:clamp(1.8rem,5vw,3rem);opacity:0}.breathe-panel .circle{aspect-ratio:1;mix-blend-mode:screen;width:190px;transform:translate(-50%,-50%)translate(calc(var(--offset-x)*var(--spread-phase)),calc(var(--offset-y)*var(--spread-phase)));transition:transform var(--duration)cubic-bezier(.5,0,.5,1);background:#ffffff80;border-radius:50%;position:absolute;top:50%;left:50%;box-shadow:0 0 20px #ffffff59,0 0 50px #ffffff40}.breathe-panel .circle:first-child{--offset-x:calc(var(--face-size)*-.1575);--offset-y:calc(var(--face-size)*-.27)}.breathe-panel .circle:nth-child(2){--offset-x:calc(var(--face-size)*.1575);--offset-y:calc(var(--face-size)*.27)}.breathe-panel .circle:nth-child(3){--offset-x:calc(var(--face-size)*-.315);--offset-y:0px}.breathe-panel .circle:nth-child(4){--offset-x:calc(var(--face-size)*.315);--offset-y:0px}.breathe-panel .circle:nth-child(5){--offset-x:calc(var(--face-size)*-.1575);--offset-y:calc(var(--face-size)*.27)}.breathe-panel .circle:nth-child(6){--offset-x:calc(var(--face-size)*.1575);--offset-y:calc(var(--face-size)*-.27)}.flowco-bottom-actions .breathe-actions{opacity:0;pointer-events:none;justify-content:center;align-items:center;gap:12px;transition:opacity .24s,transform .24s;display:flex;transform:translateY(8px)}body.breathe-mode .flowco-bottom-actions .breathe-actions{opacity:1;pointer-events:auto;transform:translateY(0)}body.breathe-goodluck .flowco-bottom-actions .breathe-actions{opacity:0;pointer-events:none}.flowco-bottom-actions .breathe-actions .btn-icon [data-lucide=skip-forward]{fill:currentColor}.breathe-overlay{pointer-events:none;opacity:0;z-index:5;justify-content:center;align-items:center;padding:clamp(12px,4vw,32px);transition:opacity .36s;display:flex;position:absolute;inset:clamp(0px,5vw,56px)}.breathe-overlay.open{pointer-events:auto;opacity:1}.breathe-overlay.hidden{display:none}.breathe-overlay .breathe-panel{width:min(760px,96vw);box-shadow:none;background:0 0}body[data-viewer-mode=true] #breathe-reset,body[data-viewer-mode=true] #breathe-skip,body[data-viewer-mode=true] .breathe-actions{pointer-events:none!important;display:none!important}
:root{--popout-radius:32px}.popout-body{color:#f8f9fc;width:100vw;height:100vh;margin:0;padding:0;position:relative;overflow:hidden auto}#bg-dynamic{position:fixed;inset:0}.popout-body #bg-root{z-index:0;position:fixed;inset:0}.popout-shell{z-index:1;border-radius:var(--popout-radius);opacity:1;filter:blur();flex-direction:column;gap:6px;width:100%;margin:0 auto;padding:0 12px;transition:filter .75s,opacity .75s;display:flex;position:relative}.breathe-panel .breathe-actions{margin-top:0}.breathe-mode .popout-shell{opacity:0;filter:blur(10px)}.popout-content{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;gap:4px;width:100%;margin-top:0;padding:0 0 8px;display:flex;position:relative}.popout-time-display{--timer-ref-em:2.8;font-size:min(clamp(36px,calc((var(--timer-scale,14)/25)*(100vw/var(--timer-ref-em,2.8))),100vw));letter-spacing:-.05em;font-weight:600;font-family:var(--timer-font,inherit);text-align:center;text-shadow:0 5px 30px #0000008c;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;margin-left:-.05em;line-height:1em}.popout-phase-pills{justify-content:center;width:100%;margin:0 auto;display:flex;transform:scale(.85)}.popout-controls-wrapper{justify-content:center;width:100%;margin-top:2px;display:flex}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.popout-body #bg-overlay{-webkit-backdrop-filter:blur(60px);backdrop-filter:blur(60px)}.popout-controls-wrapper #btn-fullscreen,.popout-controls-wrapper #btn-popout,.popout-controls-wrapper .takeover-controls{display:none!important}.popout-progress-bar{z-index:10;pointer-events:none;width:100%;position:fixed;bottom:0;left:0}.popout-mantra-container{margin-bottom:2px;transform:scale(.85)}