.relax-dialog{width:min(900px,calc(100vw - 24px));max-width:none;max-height:min(92dvh,900px);padding:0;overflow:hidden;border:1px solid #dce9ed;border-radius:26px;background:#f5fafb;color:#172534;box-shadow:0 24px 80px #163b4a40}
.relax-dialog::backdrop{background:#142c38a8;backdrop-filter:blur(4px)}
.relax-shell{display:flex;flex-direction:column;max-height:min(92dvh,900px);min-height:min(640px,84dvh);background:linear-gradient(155deg,#f6fbfc,#e8f4f6)}
.relax-header{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid #dbe8eb;background:#ffffffd9}
.relax-header-copy{flex:1;min-width:0}.relax-kicker{margin:0 0 3px;color:#718793;font-size:12px;font-weight:700}.relax-header h2{margin:0;font-size:21px;line-height:1.2}.relax-close{width:42px;height:42px;flex:none;border:1px solid #d9e4e7;border-radius:50%;background:#fff;color:#47616d;font-size:27px;line-height:1}
.relax-content{flex:1;min-height:0;overflow:auto;padding:clamp(12px,3vw,24px);overscroll-behavior:contain}
.relax-modebar{display:flex;gap:8px;margin-bottom:15px}.relax-modebar button{flex:1;min-height:44px;border:1px solid #d8e5e8;border-radius:15px;background:#fff;color:#526b76;font-weight:800}.relax-modebar button[aria-pressed=true]{border-color:#087d98;background:#e0f2f5;color:#086d83;box-shadow:inset 0 0 0 1px #087d9820}
.relax-intro{margin:0 0 14px;color:#687f89;font-size:14px;line-height:1.5;text-align:center}
.relax-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.relax-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:220px;padding:19px 15px;border:1px solid #dce9ec;border-radius:22px;background:#ffffffdb;color:#263d49;text-align:center;box-shadow:0 10px 25px #315b6b12;transition:transform .16s,border-color .16s,box-shadow .16s}.relax-choice:hover{transform:translateY(-2px);border-color:#9bcfd8;box-shadow:0 14px 30px #315b6b1a}.relax-choice b{font-size:19px}.relax-choice span:not(.relax-choice-icon){color:#687f89;font-size:14px;line-height:1.4}.relax-choice small{color:#087d98;font-size:12px;font-weight:750}.relax-choice-icon{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;background:#e4f4f4;font-size:33px}.relax-gentle-note{margin:13px 0 0;color:#7a8e98;font-size:12px;text-align:center}
.breath-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,.72fr);align-items:center;gap:clamp(10px,3vw,28px);min-height:390px;padding:clamp(14px,4vw,28px);border:1px solid #dce9ec;border-radius:24px;background:#ffffffd9;box-shadow:0 12px 30px #315b6b12}
.breath-visual{display:grid;place-items:center;min-height:260px;overflow:hidden;position:relative;border-radius:22px;background:radial-gradient(circle at 50% 50%,#e7f6f6,#f7fbfc 70%)}
.breath-visual::before{position:absolute;inset:12%;border:1px solid #cde8e8;border-radius:50%;content:"";opacity:.55}
.breath-flower{width:min(24vw,112px);height:min(24vw,112px);max-width:100%;overflow:visible;transform:scale(.84);transition:transform 4s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 4px 8px #42a99c24)}
.breath-flower .petal{fill:#69c8d3;stroke:#43adba;stroke-width:1.5;transform-box:fill-box;transform-origin:center center;transition:transform 4s cubic-bezier(.2,.7,.2,1)}
.breath-flower .flower-center{fill:#f3ce77;stroke:#e5b956;stroke-width:1.5}
.breath-visual.inhale .breath-flower{transform:scale(1)}.breath-visual.inhale .petal{transform:scale(1)}.breath-visual.exhale .breath-flower{transform:scale(.84)}.breath-visual.exhale .petal{transform:scale(.9)}
.breath-candle{width:min(44vw,190px);height:min(44vw,190px);max-width:100%;display:none;filter:drop-shadow(0 8px 12px #e08a3750)}
.breath-visual.exhale .breath-flower{display:none}.breath-visual.exhale .breath-candle{display:block}.flame{transform-box:fill-box;transform-origin:center bottom;animation:relax-flame .8s ease-in-out infinite alternate}
@keyframes relax-flame{from{transform:rotate(-4deg) scale(.94,.95)}to{transform:rotate(4deg) scale(1.04,1.07)}}
.breath-info{text-align:center}.breath-phase{margin:0;color:#087d98;font-size:clamp(23px,5vw,34px);font-weight:900}.breath-subtitle{min-height:25px;margin:7px 0;color:#6f8490;font-size:14px}.breath-count{display:block;margin:8px 0 18px;color:#172534;font-size:clamp(44px,11vw,68px);line-height:1;font-variant-numeric:tabular-nums;font-weight:850}.breath-controls{display:flex;justify-content:center;gap:9px}.breath-controls button{min-width:116px}.breath-note{margin:15px 0 0;color:#6d818b;font-size:12px;line-height:1.5}
.kids-stage{position:relative;isolation:isolate;min-height:min(62dvh,570px);overflow:hidden;border:1px solid #cfe4e9;border-radius:24px;background:radial-gradient(ellipse at 50% 100%,#d8f1e7,#eaf7f7 58%,#e8f2fd);box-shadow:inset 0 -35px 70px #89cda522}
.kids-stage::before,.kids-stage::after{position:absolute;z-index:-1;content:"";width:44vw;height:44vw;max-width:300px;max-height:300px;border-radius:50%;background:#fff9;filter:blur(1px)}.kids-stage::before{top:-22%;right:-9%}.kids-stage::after{bottom:-25%;left:-8%;background:#bde7d977}
.kids-score{display:flex;align-items:center;justify-content:center;gap:7px;margin:0 0 11px;color:#455f6b;font-weight:850}.kids-score strong{display:inline-grid;place-items:center;min-width:42px;height:34px;padding:0 8px;border:1px solid #f2d98a;border-radius:18px;background:#fff4c9;color:#9a6c06;font-size:17px}
.kids-bubble{--x:50%;--y:50%;--size:86px;position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:var(--size);height:var(--size);padding:0;transform:translate(-50%,-50%);border:1px solid #ffffffd9;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffffffed 0 8%,#fff9 22%,#b9e9f2a6 70%,#87cfe0aa);box-shadow:inset -6px -8px 14px #65b5d633,inset 5px 5px 14px #fff,0 7px 15px #458aa129;cursor:pointer;animation:relax-float var(--float,4.8s) ease-in-out infinite alternate;transition:opacity .2s,scale .2s}
.kids-bubble::after{position:absolute;top:17%;left:24%;width:20%;height:10%;border-radius:50%;background:#ffffffc9;content:"";transform:rotate(-28deg)}.kids-bubble span{font-size:calc(var(--size)*.47);filter:drop-shadow(0 2px 1px #355b5b20)}
@keyframes relax-float{from{translate:0 8px}to{translate:0 -13px}}
.kids-bubble.popping{pointer-events:none;opacity:0;scale:1.42;animation:none}.kids-bubble.popping span{filter:none}
.kids-burst{position:absolute;left:var(--x);top:var(--y);pointer-events:none;color:#d79716;font-size:25px;animation:relax-burst .7s ease-out forwards}
@keyframes relax-burst{0%{opacity:1;transform:translate(-50%,-50%) scale(.4)}70%{opacity:1;transform:translate(-50%,-85%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-115%) scale(.8)}}
.kids-controls{display:flex;justify-content:center;gap:9px;margin-top:12px}.kids-controls button{min-height:42px}.relax-dialog button:disabled{opacity:.55;cursor:default}
@media(max-width:580px){.relax-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 20px);border-radius:21px}.relax-shell{min-height:min(620px,88dvh);max-height:calc(100dvh - 20px)}.relax-header{padding:12px}.relax-header h2{font-size:18px}.relax-content{padding:12px}.relax-choice-grid{grid-template-columns:1fr;gap:9px}.relax-choice{min-height:150px;padding:14px}.relax-choice-icon{width:52px;height:52px;font-size:27px}.relax-choice b{font-size:17px}.breath-panel{grid-template-columns:1fr;gap:6px;min-height:unset;padding:12px}.breath-visual{min-height:clamp(190px,37dvh,300px)}.breath-flower{width:min(48vw,210px);height:min(48vw,210px)}.breath-candle{width:min(43vw,180px);height:min(43vw,180px)}.breath-count{font-size:54px;margin:4px 0 12px}.breath-note{margin-top:10px}.kids-stage{min-height:52dvh}.kids-bubble{--size:clamp(62px,19vw,82px)}}
@media(max-height:650px) and (max-width:580px){.relax-shell{min-height:unset}.breath-visual{min-height:160px}.breath-flower{width:140px;height:140px}.breath-candle{width:130px;height:130px}.kids-stage{min-height:44dvh}}
@media(prefers-reduced-motion:reduce){.breath-flower,.breath-flower .petal,.kids-bubble{transition:none;animation:none}.flame{animation:none}}

/* Immersive layout modeled on the reference app, using this app's light palette. */
.relax-dialog.relax-breath-mode,.relax-dialog.relax-kids-mode{position:fixed;inset:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;border:0;border-radius:0;padding:0;background:#e8f4f7}
.relax-dialog.relax-breath-mode .relax-shell,.relax-dialog.relax-kids-mode .relax-shell{position:relative;width:100%;height:100%;min-height:100dvh;max-height:100dvh;border-radius:0;overflow:hidden}
.relax-dialog.relax-breath-mode .relax-header{position:absolute;z-index:5;top:env(safe-area-inset-top);left:0;right:0;height:58px;padding:7px 17px;border:0;background:transparent;direction:rtl}
.relax-dialog.relax-breath-mode .relax-kicker{display:none}.relax-dialog.relax-breath-mode .relax-header h2{color:#315a68;font-size:16px;text-shadow:0 1px 0 #fff9}
.relax-dialog.relax-breath-mode .relax-close{order:2;width:39px;height:39px;border-color:#a9cbd4;background:#ffffffa8;color:#436672;font-size:25px}
.relax-dialog.relax-breath-mode .relax-content,.relax-dialog.relax-kids-mode .relax-content{width:100%;height:100%;max-height:100%;padding:0;overflow:hidden}
.breath-screen{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;min-height:100dvh;padding:calc(72px + env(safe-area-inset-top)) 20px calc(105px + env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(ellipse at 18% 46%,#d5f0f0 0,#e8f5f6 45%,#eef2ff 100%)}
.breath-phase{position:absolute;z-index:2;top:clamp(78px,14dvh,138px);left:10px;right:10px;margin:0;color:#287989;font-size:clamp(32px,7vw,52px);font-weight:900;line-height:1.1;text-align:center;text-shadow:0 2px 0 #fff8;transition:color .5s,opacity .5s}
.breath-visual{z-index:1;width:clamp(185px,38vmin,260px);height:clamp(185px,38vmin,260px);min-height:0;overflow:visible;border-radius:50%;background:transparent;transition:background .5s}
.relax-dialog.relax-breath-mode .breath-visual::before{display:none}
.relax-dialog.relax-breath-mode .breath-flower{width:min(9vw,112px);height:min(9vw,112px);transform:scale(.84);filter:drop-shadow(0 4px 8px #51a9b82e)}
.relax-dialog.relax-breath-mode .breath-flower .petal{fill:#69c8d3;stroke:#43adba;transform:scale(.9);transform-origin:center center}
.relax-dialog.relax-breath-mode .breath-flower .flower-center{fill:#f3ce77;stroke:#e5b956}
.relax-dialog.relax-breath-mode .breath-visual.inhale .breath-flower{transform:scale(1)}.relax-dialog.relax-breath-mode .breath-visual.inhale .petal{transform:scale(1)}
.relax-dialog.relax-breath-mode .breath-visual.exhale .breath-flower{transform:scale(.84)}.relax-dialog.relax-breath-mode .breath-visual.exhale .petal{transform:scale(.9)}
.breath-candle{width:67%;height:78%;filter:drop-shadow(0 8px 14px #eba13d4a)}
.breath-subtitle{position:absolute;z-index:2;bottom:calc(93px + env(safe-area-inset-bottom));left:12px;right:12px;min-height:20px;margin:0;color:#507986;font-size:13px;font-weight:750;text-align:center}
.breath-controls{position:absolute;z-index:3;left:18px;right:18px;bottom:calc(17px + env(safe-area-inset-bottom));display:grid;grid-template-columns:72px 1fr;gap:12px;direction:ltr;max-width:620px;margin:auto}
.breath-main-control{width:100%;min-height:64px;border-radius:34px;background:#35a9d8;color:#fff;font-size:21px;box-shadow:0 8px 24px #1683b83b}.breath-main-control.secondary{background:#d8eaf2;color:#24586a;border:1px solid #b5d4df}
.breath-sound{width:62px;height:62px;align-self:center;border:1px solid #aacbd5;border-radius:50%;background:#ffffff78;color:#456c77;font-size:24px}
.breath-note{display:none}
.relax-particles{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none}.relax-particles i{position:absolute;width:clamp(8px,2.5vw,17px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#a7dbe477 65%,#91c6dc22);box-shadow:0 0 12px #8cc9dc33;animation:relax-particle-float var(--duration,8s) ease-in-out infinite alternate}.relax-particles i:nth-child(1){left:10%;top:30%;--duration:8s}.relax-particles i:nth-child(2){left:72%;top:22%;width:22px;--duration:11s}.relax-particles i:nth-child(3){left:85%;top:50%;--duration:9s}.relax-particles i:nth-child(4){left:25%;top:70%;width:25px;--duration:12s}.relax-particles i:nth-child(5){left:50%;top:18%;--duration:10s}.relax-particles i:nth-child(6){left:64%;top:78%;--duration:8s}.relax-particles i:nth-child(7){left:7%;top:55%;width:12px;--duration:9s}.relax-particles i:nth-child(8){left:38%;top:84%;--duration:11s}.relax-particles i:nth-child(9){left:92%;top:35%;--duration:10s}.relax-particles i:nth-child(10){left:15%;top:87%;--duration:7s}.relax-particles i:nth-child(11){left:57%;top:43%;width:10px;--duration:12s}.relax-particles i:nth-child(12){left:32%;top:23%;width:20px;--duration:9s}
@keyframes relax-particle-float{from{transform:translate3d(0,8px,0) scale(.88);opacity:.32}to{transform:translate3d(6px,-17px,0) scale(1.12);opacity:.78}}
.relax-dialog.relax-kids-mode .relax-header{display:none}
.kids-screen{position:relative;width:100%;height:100%;min-height:100dvh;overflow:clip;background:linear-gradient(154deg,#cfe8f0 0%,#d7eaf7 48%,#d2f0ed 100%)}
.kids-screen::before,.kids-screen::after{position:absolute;z-index:0;content:"";width:68vmax;height:68vmax;border-radius:50%;filter:blur(10px);opacity:.55;pointer-events:none}.kids-screen::before{top:-42vmax;left:-20vmax;background:radial-gradient(circle,#fff 0,#f2fbff 38%,transparent 70%)}.kids-screen::after{right:-32vmax;bottom:-46vmax;background:radial-gradient(circle,#bde9e8 0,#ddf1ee 45%,transparent 70%)}
.kids-topbar{position:absolute;z-index:3;top:calc(10px + env(safe-area-inset-top));left:16px;right:16px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;direction:ltr}
.kids-exit,.kids-sound{display:flex;align-items:center;justify-content:center;gap:4px;justify-self:start;min-height:42px;padding:5px 12px;border:1px solid #ffffffd1;border-radius:24px;background:#ffffff70;color:#526e79;font-size:12px;font-weight:750;backdrop-filter:blur(8px)}
.kids-exit span{font-size:17px}.kids-sound{justify-self:end;width:44px;height:44px;padding:0;font-size:20px}
.kids-score{z-index:2;justify-content:center;margin:0}.kids-score strong{min-width:68px;height:42px;padding:0 12px;border-color:#ffffffcf;background:#ffffff9c;color:#395966;font-size:20px;box-shadow:0 4px 14px #426b7817}
.kids-hint{position:absolute;z-index:2;top:calc(65px + env(safe-area-inset-top));left:10px;right:10px;margin:0;color:#55737f9c;font-size:11px;text-align:center}
.kids-stage{position:absolute;z-index:1;inset:0;min-height:100%;overflow:clip;border:0;border-radius:0;background:transparent;box-shadow:none}
.kids-bubble{border:1px solid #ffffffdd;background:radial-gradient(circle at 32% 25%,#ffffffeb 0 8%,#fff9 19%,#d3eaf1ae 58%,#afd6e9b8 100%);box-shadow:inset -6px -8px 15px #68a3c42c,inset 5px 5px 13px #fff,0 6px 16px #526d8722;backdrop-filter:blur(1px)}
.kids-bubble span{font-size:calc(var(--size)*.51);filter:drop-shadow(0 3px 2px #344e5b2b)}
.kids-burst{font-size:31px;z-index:4;filter:drop-shadow(0 2px 4px #fff)}
@media(max-width:580px){.relax-dialog.relax-breath-mode,.relax-dialog.relax-kids-mode{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.relax-dialog.relax-breath-mode .relax-shell,.relax-dialog.relax-kids-mode .relax-shell{min-height:100dvh;max-height:100dvh}.relax-dialog.relax-breath-mode .relax-header{top:env(safe-area-inset-top);height:54px;padding-inline:13px}.breath-screen{padding-top:calc(75px + env(safe-area-inset-top));padding-bottom:calc(112px + env(safe-area-inset-bottom))}.breath-phase{top:clamp(84px,15dvh,128px);font-size:clamp(29px,8vw,40px)}.breath-visual{width:clamp(170px,52vw,230px);height:clamp(170px,52vw,230px)}.relax-dialog.relax-breath-mode .breath-flower{width:min(17vw,100px);height:min(17vw,100px)}.breath-subtitle{bottom:calc(91px + env(safe-area-inset-bottom))}.breath-controls{left:14px;right:14px;bottom:calc(15px + env(safe-area-inset-bottom));grid-template-columns:62px 1fr;gap:9px}.breath-sound{width:54px;height:54px}.breath-main-control{min-height:58px;font-size:19px}.breath-note{font-size:9px}.kids-topbar{left:14px;right:14px}.kids-bubble{--size:clamp(62px,22vw,88px)}}
@media(max-height:650px){.breath-screen{padding-top:65px;padding-bottom:95px}.breath-phase{top:70px;font-size:clamp(27px,6vw,38px)}.breath-visual{width:min(36vh,190px);height:min(36vh,190px)}.breath-subtitle{bottom:78px}.breath-controls{bottom:10px}.breath-main-control{min-height:52px}.breath-sound{height:48px;width:48px}}
@media(prefers-reduced-motion:reduce){.relax-particles i{animation:none}.kids-screen::before,.kids-screen::after{filter:none}}