html,body{overflow-x:hidden}
body{background:linear-gradient(180deg,#e6f4fa,var(--crema) 40%);min-height:100vh}
#app{max-width:980px;margin:0 auto;padding:0 14px 96px}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 0 8px;gap:10px;flex-wrap:wrap}
.brand{display:flex;gap:10px;align-items:center}.brand small{opacity:.7}
.logo{font-size:1.8rem;background:var(--cielo);border-radius:50%;width:48px;height:48px;display:grid;place-items:center;box-shadow:var(--sombra)}
h1{font-size:1.25rem;margin:0;line-height:1.1}h2{margin:0}
.tools{display:flex;gap:8px}
.card-view{background:#fff;border-radius:30px;box-shadow:var(--sombra);padding:18px 16px;text-align:center}
.ttl{font-size:1.3rem;margin:4px 0 12px}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:center;gap:6px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(255,248,236,.95);backdrop-filter:blur(8px);border-top:2px solid var(--cielo)}
.nav button{flex:1;max-width:200px;border:0;background:transparent;border-radius:18px;padding:6px 4px;font-weight:800;font-size:.8rem;display:flex;flex-direction:column;align-items:center;min-height:56px;color:var(--marino)}
.nav button span{font-size:1.5rem}.nav button.on{background:var(--sol)}
/* timer */
.disc{position:relative;width:min(78vw,380px);margin:0 auto}
.disc svg{width:100%;display:block;transform:rotate(0)}
.rim{fill:#fff;stroke:var(--cielo);stroke-width:4}.bg{fill:#EAF6FB}.hub{fill:#fff;opacity:.9}
#pie{transition:fill .3s}
.disc .big{margin-top:6px;font-size:clamp(2.4rem,11vw,3.6rem);font-weight:900;text-shadow:0 2px 0 #fff;letter-spacing:.02em}
.disc .big.fin{font-size:clamp(1.8rem,8vw,2.6rem);color:var(--coral)}
.disc.done svg{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04)}}
.btns{display:flex;justify-content:center;gap:10px;margin:16px 0 14px;flex-wrap:wrap}
.btn.big{font-size:1.2rem;min-height:60px;padding:14px 34px}
.chips2{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:8px 0}
.chips2.sc{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
.chip2{border:2px solid var(--cielo);background:#fff;border-radius:999px;padding:9px 16px;font-weight:800;min-height:46px;flex:none}
.chip2.on{background:var(--marino);color:#fff;border-color:var(--marino)}
.cust{display:inline-flex;gap:6px;align-items:center}
.cust input{width:112px;border:2px solid var(--cielo);border-radius:999px;padding:9px 14px;min-height:46px}
.opts{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;font-weight:800}
.sw{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--cielo)}.sw.on{box-shadow:0 0 0 4px var(--marino)}
.chk{display:flex;align-items:center;gap:6px}.chk input{width:22px;height:22px;accent-color:var(--mar)}
.timer:fullscreen{background:var(--crema);display:flex;flex-direction:column;justify-content:center;border-radius:0}
.timer:fullscreen .disc{width:min(80vh,80vw)}
/* breathe */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pat{border:0;border-radius:26px;padding:16px 10px;background:linear-gradient(160deg,var(--menta),#fff);box-shadow:var(--sombra);display:flex;flex-direction:column;gap:4px;align-items:center}
.pat:nth-child(2){background:linear-gradient(160deg,#FFD6E0,#fff)}.pat:nth-child(3){background:linear-gradient(160deg,var(--cielo),#fff)}.pat:nth-child(4){background:linear-gradient(160deg,#FFE39A,#fff)}
.pe{font-size:3rem}.pat b{font-size:1.1rem}.pat small{opacity:.7;font-size:.8rem}
.stage{width:min(80vw,360px);display:block;margin:10px auto}
.balloon{fill:var(--coral)}.shine{fill:#fff;opacity:.5}.str{fill:none;stroke:var(--marino);stroke-width:2}
.petal{fill:#FF9EB5;stroke:#fff;stroke-width:2}.fcore{fill:var(--sol)}
.sqr{fill:#EAF6FB;stroke:var(--mar);stroke-width:6}.sun{fill:var(--sol);stroke:#fff;stroke-width:3}.sqt{font-size:46px;font-weight:900;fill:var(--mar);font-family:inherit}
.fing{fill:#F8DCC3}.ffill{fill:var(--coral);opacity:.85}.palm{fill:#F8DCC3}
.blab{font-size:2rem;font-weight:900;color:var(--mar);min-height:2.6rem;transition:opacity .2s}
.bsub{opacity:.6;margin:2px 0 14px}
.breathe .btn.small{float:left}
/* now next */
.board{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch;background:#fff;border-radius:30px;padding:16px 12px;box-shadow:var(--sombra);transition:transform .35s,opacity .35s}
.board.flip{transform:translateX(-30px);opacity:.3}
.board:fullscreen{background:linear-gradient(180deg,var(--cielo),var(--crema));border-radius:0;padding:20px}
.bcol{display:flex;flex-direction:column;gap:8px;min-width:0}
.lab{text-align:center;font-weight:900;font-size:1.3rem;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:6px}
.lab.now{background:var(--sol)}.lab.next{background:var(--menta)}
.nn{border:0;background:var(--c,#fff);border-radius:26px;padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;box-shadow:inset 0 0 0 4px #fff,var(--sombra);min-height:210px}
.nn .im{flex:1;display:block;border-radius:18px;overflow:hidden;min-height:140px;background:#fff;font-size:1.6rem}
.nn b{font-size:clamp(1.1rem,4.4vw,1.9rem)}
.nn.empty{background:#fff;border:4px dashed var(--cielo);justify-content:center;align-items:center;box-shadow:none}.pl{font-size:3rem;color:var(--mar)}
.arrow{align-self:center;font-size:2rem;color:var(--coral);font-weight:900}
.bb{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}.bb small{opacity:.7}
#picker{position:fixed;inset:0;z-index:30;background:rgba(2,48,71,.55);display:flex;align-items:flex-end;justify-content:center}
#picker[hidden]{display:none}
.pk{background:var(--crema);width:100%;max-width:760px;height:88vh;border-radius:28px 28px 0 0;padding:14px;display:flex;flex-direction:column;gap:8px}
.pkh{display:flex;justify-content:space-between;align-items:center}
.pk input{border:2px solid var(--cielo);border-radius:999px;padding:10px 16px;min-height:46px}
.pkg{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;align-content:start}
.pk1{border:0;background:#fff;border-radius:18px;padding:6px;display:flex;flex-direction:column;gap:3px;border-bottom:5px solid var(--c);font-size:.85rem}
.pk1 .im{aspect-ratio:1;display:block;border-radius:12px;overflow:hidden;font-size:.8rem;background:var(--c)}
/* calm place */
.calm{position:relative;overflow:hidden;border-radius:34px;padding:26px 16px 30px;text-align:center;background:linear-gradient(160deg,#d7efe0,#cfe9f5 55%,#fff0d2);box-shadow:var(--sombra);min-height:62vh}
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;animation:float 9s ease-in-out infinite}
.o1{width:180px;height:180px;background:#fff;left:-50px;top:-40px}.o2{width:140px;height:140px;background:var(--sol);right:-30px;bottom:30px;animation-delay:-4s;opacity:.3}
@keyframes float{50%{transform:translateY(18px) scale(1.06)}}
.calm .ttl,.calm .sub,.three,.calm .btn{position:relative}
.sub{margin:0 0 18px;font-size:1.05rem}
.three{display:grid;gap:14px;margin-bottom:20px}
.cact,.act{border:0;background:#fff;border-radius:28px;padding:18px;display:flex;align-items:center;gap:16px;box-shadow:var(--sombra);text-align:left;font-size:1.2rem;min-height:84px;animation:rise .6s both}
.cact:nth-child(2){animation-delay:.15s}.cact:nth-child(3){animation-delay:.3s}
@keyframes rise{from{transform:translateY(20px);opacity:0}}
.cact span,.act span{font-size:2.6rem}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.act{padding:10px;min-height:70px;font-size:.95rem;gap:8px;border:3px solid transparent;border-radius:20px}.act span{font-size:1.8rem}.act.on{border-color:var(--mar);background:#EAF6FB}
.calm.one{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.bubble{position:relative;background:#fff;border-radius:50%;width:min(80vw,320px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:26px;box-shadow:0 0 0 14px rgba(255,255,255,.5);animation:pulse 5s ease-in-out infinite}
.bubble h2{font-size:1.4rem}.bigemo{font-size:5rem}
@keyframes pulse{50%{transform:scale(1.07)}}
@media(min-width:760px){.three{grid-template-columns:repeat(3,1fr)}.cact{flex-direction:column;text-align:center;padding:30px 14px}.agrid{grid-template-columns:repeat(5,1fr)}.act{flex-direction:column;text-align:center}.pgrid{grid-template-columns:repeat(4,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}