:root{--p:#6b5bd6;--p2:#8a7cf0;--ink:#2c2860;--mut:#77739c;--glass:rgba(255,255,255,.62);--line:rgba(255,255,255,.85);
--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:#e9e4f8}
body{font-family:Nunito,"SF Pro Rounded",ui-rounded,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
#app{position:relative;width:100%;max-width:430px;height:100%;margin:0 auto;overflow:hidden;background:#eef0fb}
@media (min-width:600px){#app{height:min(100%,932px);top:50%;transform:translateY(-50%);border-radius:44px;box-shadow:0 30px 80px rgba(60,40,140,.25)}}
/* ---------- scene ---------- */
.bg{position:absolute;inset:0;background:url(img/bg.webp) 32% 50%/cover no-repeat;transition:opacity .8s,filter .8s}
.bg.light{opacity:0}
.bglight{position:absolute;inset:0;opacity:0;transition:opacity .6s;
 background:url(img/bg.webp) 100% 0/auto 100% no-repeat}
.bglight::after{content:"";position:absolute;inset:0;background:
 radial-gradient(85% 46% at 100% 0%,rgba(246,244,253,0) 0 22%,rgba(246,244,253,.55) 42%,rgba(245,243,252,.97) 72%)}
#app.lightbg .bglight{opacity:1}
.scene{position:absolute;inset:0;transition:opacity .6s}
#app.lightbg .scene{opacity:0;pointer-events:none}
.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.35),transparent 18%,transparent 70%,rgba(240,236,255,.35))}
/* companion */
.buddy{position:absolute;left:50%;top:calc(var(--st) + 15%);width:56%;aspect-ratio:720/683;transform:translateX(-50%);transition:top .9s cubic-bezier(.4,.1,.2,1),width .9s cubic-bezier(.4,.1,.2,1)}
.buddy .float{position:absolute;inset:0;will-change:transform}
.buddy img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .9s;opacity:0;filter:drop-shadow(0 10px 18px rgba(80,60,160,.18))}
.buddy img.on{opacity:1}
.aura{position:absolute;left:50%;top:48%;width:135%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity;
 background:radial-gradient(circle,rgba(255,255,255,.95) 0,rgba(214,204,255,.6) 28%,rgba(170,160,255,.22) 50%,transparent 70%);pointer-events:none}
.ring{position:absolute;left:50%;bottom:-11%;width:72%;height:14%;transform:translateX(-50%);border-radius:50%;opacity:var(--ro,0);transition:opacity 1s;
 border:2px solid rgba(150,190,255,.85);box-shadow:0 0 14px rgba(140,170,255,.9),inset 0 0 12px rgba(160,190,255,.7);pointer-events:none}
.halo{position:absolute;left:50%;top:62%;width:108%;height:28%;transform:translate(-50%,-50%) scale(.6);border-radius:50%;opacity:0;transition:all 1.4s cubic-bezier(.2,.8,.2,1);
 border:2.5px solid rgba(140,175,255,.9);box-shadow:0 0 18px rgba(130,160,255,.95),inset 0 0 14px rgba(170,200,255,.8);pointer-events:none}
.halo.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4.5%)}}
/* lotus */
.pond{position:absolute;left:50%;top:61%;width:0;height:0}
.lotus{position:absolute;left:0;bottom:0;width:var(--lw,140px);aspect-ratio:500/330;transform:translateX(-50%) translateY(var(--ly,0px)) rotate(var(--lr,0deg)) scale(var(--ls,1)) scaleX(var(--lx,1));transform-origin:50% 100%;transition:width .9s cubic-bezier(.4,.1,.2,1)}
#app.s-sess .lotus{transition:none}
.glow{position:absolute;left:0;bottom:6%;width:250px;aspect-ratio:1.6;transform:translate(-50%,40%);border-radius:50%;opacity:.15;will-change:transform,opacity;pointer-events:none;
 background:radial-gradient(ellipse at 50% 50%,rgba(255,236,170,.95),rgba(255,214,235,.55) 35%,transparent 68%);filter:blur(4px)}
.ripples{position:absolute;left:0;top:0;pointer-events:none}
.ripples i{position:absolute;left:0;top:0;width:120px;height:28px;margin:-14px 0 0 -60px;border-radius:50%;
 border:1.6px solid rgba(255,255,255,.92);box-shadow:0 2px 1px rgba(80,100,170,.28),inset 0 -1px 1px rgba(80,100,170,.18);opacity:0;will-change:transform,opacity}
@keyframes rip{0%{transform:scale(.5);opacity:0}10%{opacity:.95}100%{transform:scale(3.4);opacity:0}}
.bigrip{position:absolute;left:0;top:0;width:110px;height:26px;margin:-13px 0 0 -55px;border-radius:50%;border:2px solid rgba(255,255,255,.95);
 box-shadow:0 0 12px rgba(255,240,210,.8);opacity:0;pointer-events:none}
.bigrip.go{animation:bigrip 3.2s cubic-bezier(.15,.6,.3,1) forwards}
.bigrip.go.b{animation-delay:.45s}
@keyframes bigrip{0%{transform:scale(.5);opacity:.95}100%{transform:scale(9);opacity:0}}
.motes{position:absolute;left:0;top:0;pointer-events:none;opacity:0;will-change:opacity}
.motes b{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff8dc;box-shadow:0 0 8px 2px rgba(255,230,160,.9);left:0;top:0;opacity:0;will-change:transform,opacity}
@keyframes mote{0%{transform:translate(0,0);opacity:0}20%{opacity:.9}100%{transform:translate(var(--dx),-170px);opacity:0}}
.spark{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;border-radius:50%;background:#fff;opacity:0;pointer-events:none;
 box-shadow:0 0 14px 6px rgba(255,236,170,.95),0 0 34px 12px rgba(200,180,255,.6)}
.spark.go{animation:spark 1.7s cubic-bezier(.5,0,.3,1) forwards}
@keyframes spark{0%{opacity:0;transform:translateY(-20px) scale(.4)}15%{opacity:1;transform:translateY(-40px) scale(1)}85%{opacity:1}100%{opacity:0;transform:translateY(var(--sy)) scale(.6)}}
/* alt meditations */
.orb{position:absolute;left:0;bottom:30%;width:180px;aspect-ratio:1;margin-left:-90px;border-radius:50%;opacity:0;transform:scale(.3);will-change:transform;transition:opacity .8s;pointer-events:none;
 background:radial-gradient(circle,#fff 0,#fff3c4 14%,rgba(255,206,110,.85) 30%,rgba(255,190,120,.35) 50%,transparent 70%);filter:drop-shadow(0 0 20px rgba(255,210,120,.7))}
.drop{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px;border-radius:50%;opacity:0;pointer-events:none;transform:scale(.6);will-change:transform;
 background:radial-gradient(circle,#fff,rgba(200,230,255,.8) 40%,transparent 70%);box-shadow:0 0 22px 8px rgba(190,220,255,.7)}
#app.m-light .lotus,#app.m-ripple .lotus{opacity:0}
#app.m-light .orb{opacity:1}
#app.m-ripple .drop{opacity:1}
#app.m-ripple .ripples i{border-width:2px}
/* ---------- screens ---------- */
.screen{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .5s}
.screen.on{opacity:1;pointer-events:auto}
.top{position:absolute;left:0;right:0;top:calc(var(--st) + 14px);height:48px;padding:0 18px;display:flex;align-items:center;justify-content:space-between}
.circ{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);border:1px solid var(--line);
 box-shadow:0 6px 18px rgba(90,80,170,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink)}
.brand{position:absolute;left:0;right:0;top:calc(var(--st) + 26px);text-align:center;pointer-events:none}
.brand svg{width:44px;height:32px}
.brand h1{font-size:23px;font-weight:800;letter-spacing:.2px;color:#3a3477;margin-top:2px}
#home .gear{position:absolute;right:18px;top:calc(var(--st) + 26px)}
.q{position:absolute;left:0;right:0;top:69.5%;text-align:center;font-size:22px;line-height:1.3;font-weight:700;color:#2a2758;text-shadow:0 1px 12px rgba(255,255,255,.8)}
.cta{position:absolute;left:50%;top:79%;transform:translateX(-50%);width:62%;height:54px;border-radius:30px;color:#fff;font-size:17.5px;font-weight:700;
 background:linear-gradient(180deg,#8576ee,#5f4fcf);box-shadow:0 10px 24px rgba(95,79,207,.38),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s}
.cta:active{transform:translateX(-50%) scale(.97)}
.modelink{position:absolute;left:50%;top:calc(79% + 62px);transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--p);opacity:.85;padding:6px 12px;border-radius:20px;background:rgba(255,255,255,.45);white-space:nowrap}
.tabs{position:absolute;left:0;right:0;bottom:0;height:calc(80px + var(--sb));padding-bottom:var(--sb);display:flex;background:rgba(255,255,255,.8);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(255,255,255,.9);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(90,80,170,.08);z-index:5;transition:opacity .5s}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12.5px;font-weight:700;color:#77739c;position:relative}
.tabs button svg{width:26px;height:26px}
.tabs button.on{color:var(--p)}
.tabs button.on::before{content:"";position:absolute;top:0;width:44px;height:3px;border-radius:3px;background:var(--p)}
#app.notabs .tabs{opacity:0;pointer-events:none}
/* session */
.pill{height:40px;padding:0 14px;border-radius:22px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;background:rgba(255,255,255,.72);border:1px solid var(--line);
 box-shadow:0 6px 18px rgba(90,80,170,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-variant-numeric:tabular-nums}
.pill svg{width:18px;height:18px}
.chrome{transition:opacity 1.2s}
#app.active .chrome{opacity:.22}
.card{position:absolute;left:9%;right:9%;top:74.5%;min-height:108px;padding:14px 18px 18px;border-radius:26px;text-align:center;background:var(--glass);border:1px solid var(--line);
 box-shadow:0 12px 34px rgba(90,80,170,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:opacity .6s,transform .6s}
.card .ic{color:#8b7be6;height:26px;display:flex;justify-content:center}
.card .ic svg{width:28px;height:22px}
.card p{font-size:17px;line-height:1.45;font-weight:600;color:#38345f;margin-top:4px;will-change:opacity}
.card .ic{will-change:opacity}
.card p.fade{opacity:0}
.zone{position:absolute;left:0;right:0;top:38%;height:35%;touch-action:none;z-index:2}
.done{position:absolute;left:0;right:0;top:73%;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .9s,transform .9s;pointer-events:none}
.done.on{opacity:1;transform:none;pointer-events:auto}
.done .ic svg{width:34px;height:26px}
.done h2{font-size:21px;font-weight:800;margin-top:6px;color:#2c2860}
.done p{font-size:14.5px;color:#5e5a86;margin-top:4px;font-weight:600}
.done button{margin-top:18px;width:92px;height:46px;border-radius:26px;color:#fff;background:linear-gradient(180deg,#8576ee,#5f4fcf);box-shadow:0 10px 22px rgba(95,79,207,.35);display:inline-grid;place-items:center}
.done button svg{width:24px;height:24px;stroke-width:2.6}
#sess.complete .card{opacity:0;transform:translateY(10px);pointer-events:none}
#sess.complete .chrome{opacity:0;pointer-events:none}
.menu{position:absolute;right:18px;top:calc(var(--st) + 68px);border-radius:20px;padding:6px;background:rgba(255,255,255,.92);box-shadow:0 14px 34px rgba(80,60,160,.2);
 backdrop-filter:blur(14px);opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top right;transition:all .25s;pointer-events:none;z-index:6}
.menu.on{opacity:1;transform:none;pointer-events:auto}
.menu button{display:block;width:120px;padding:10px 14px;border-radius:14px;text-align:left;font-weight:700;font-size:15px}
.menu button.on{background:#ece8ff;color:var(--p)}
/* light pages */
.page{padding:calc(var(--st) + 22px) 18px calc(100px + var(--sb));height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.page h1{font-size:25px;font-weight:800;color:#2c2860;display:flex;align-items:center;gap:10px;height:44px}
.page h1 button{margin-left:-6px;padding:4px;display:grid}
.gcard{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.95);border-radius:22px;box-shadow:0 8px 26px rgba(90,80,170,.09);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.bud-hero{position:relative;width:84%;margin:18px auto 6px;aspect-ratio:720/683}
.bud-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(80,60,160,.18))}
.bud-hero::before{content:"";position:absolute;left:50%;top:50%;width:112%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(220,212,255,.5) 40%,transparent 68%)}
.bud-name{text-align:center;font-size:19px;font-weight:800;margin-top:6px}
.bud-stage{text-align:center;font-size:14px;color:var(--mut);font-weight:700;margin-top:2px}
.evo{margin-top:18px;padding:16px 18px}
.evo .row{display:flex;justify-content:space-between;font-size:14px;font-weight:700;color:#3a3666}
.bar{height:9px;border-radius:9px;background:#ebe8f7;margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,#8a7cf0,#6b5bd6);transition:width 1s}
.chips{display:flex;justify-content:space-between;margin-top:20px;gap:8px}
.chip{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--mut)}
.chip .b{aspect-ratio:1;border-radius:18px;background:rgba(255,255,255,.75);border:1.5px solid rgba(255,255,255,.95);box-shadow:0 6px 16px rgba(90,80,170,.08);display:grid;place-items:center;overflow:hidden;margin-bottom:6px}
.chip .b img{width:72%;height:80%;object-fit:contain}
.chip.lock .b img{filter:grayscale(1) brightness(1.08);opacity:.6}
.chip.lock .b svg{width:24px;height:24px;color:#9b98b8}
.chip.cur{color:var(--p)}
.chip.cur .b{border-color:#8f80ee;background:linear-gradient(#f3efff,#e6e0ff);box-shadow:0 6px 18px rgba(107,91,214,.22)}
.seg{display:flex;width:76%;margin:14px auto 0;padding:4px;border-radius:24px;background:rgba(255,255,255,.75);border:1px solid #fff;box-shadow:0 4px 14px rgba(90,80,170,.08)}
.seg button{flex:1;height:36px;border-radius:20px;font-weight:700;font-size:14px;color:#4b4777}
.seg button.on{background:linear-gradient(180deg,#8576ee,#5f4fcf);color:#fff;box-shadow:0 6px 14px rgba(95,79,207,.3)}
.cal{margin-top:16px;padding:16px 12px 14px}
.cal .hd{display:flex;align-items:center;justify-content:space-between;padding:0 6px;font-weight:800;font-size:17px}
.cal .hd button{padding:4px;display:grid;color:#4b4777}
.cal .hd svg{width:20px;height:20px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:8px;margin-top:12px;text-align:center}
.grid .w{font-size:11.5px;font-weight:700;color:#9a97b6;padding-bottom:2px}
.grid .d{height:34px;display:grid;place-items:center;font-size:12.5px;font-weight:700;color:#55517e}
.grid .d span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.grid .d.today span{box-shadow:inset 0 0 0 1.5px #b9b0f2;color:var(--p)}
.grid .d.fut{color:#c7c4dc}
.grid .d.m span{background:radial-gradient(circle at 50% 40%,#f3efff,#d9d1ff);box-shadow:0 0 0 1.5px #a99bf3,0 3px 8px rgba(107,91,214,.25)}
.grid .d.m svg{width:20px;height:15px}
.stats{display:flex;gap:10px;margin-top:14px}
.stat{flex:1;padding:14px 6px 12px;text-align:center}
.stat .ic{height:26px;display:flex;justify-content:center;align-items:center;color:#8b7be6}
.stat .ic svg{width:24px;height:22px}
.stat b{display:block;font-size:22px;font-weight:800;margin-top:4px;color:#2c2860}
.stat small{font-size:12.5px;font-weight:700;color:var(--mut)}
.mlist{margin-top:16px;display:flex;flex-direction:column;gap:14px}
.mitem{display:flex;align-items:center;gap:14px;padding:10px;text-align:left;width:100%;transition:transform .2s}
.mitem:active{transform:scale(.98)}
.mitem img{width:66px;height:66px;border-radius:16px;object-fit:cover;flex:none}
.mitem .tx{flex:1}
.mitem b{display:block;font-size:16px;font-weight:800;color:#2c2860}
.mitem small{font-size:13px;color:var(--mut);font-weight:600}
.mitem .st{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;margin-right:6px}
.mitem.sel{background:linear-gradient(rgba(243,240,255,.95),rgba(234,229,255,.9));border-color:#cfc6fb;box-shadow:0 8px 24px rgba(107,91,214,.18)}
.mitem.sel .st{background:var(--p);color:#fff}
.mitem.sel .st svg{width:15px;height:15px;stroke-width:3}
.mitem.locked{opacity:.92}
.mitem.locked .st svg{width:18px;height:18px;color:#9b98b8}
.mitem .soon{font-size:11px;font-weight:800;color:var(--p);background:#eeeaff;border-radius:10px;padding:2px 7px;margin-left:6px;vertical-align:2px}
.set{margin-top:16px;display:flex;flex-direction:column;gap:12px}
.srow{display:flex;align-items:center;gap:12px;padding:0 16px;height:58px;width:100%;text-align:left;font-size:14.5px;font-weight:700;color:#38345f}
.srow svg.i{width:20px;height:20px;color:#5c5888}
.srow .l{flex:1}
.srow .v{font-size:13.5px;color:#6f6b96;font-weight:600;display:flex;align-items:center;gap:4px}
.srow .v svg{width:18px;height:18px}
.tg{width:50px;height:30px;border-radius:16px;background:#d9d6ea;position:relative;transition:background .25s;flex:none}
.tg::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .25s}
.tg.on{background:linear-gradient(180deg,#8576ee,#5f4fcf)}
.tg.on::after{transform:translateX(20px)}
.about{text-align:center;font-size:12px;color:#9a97b6;font-weight:600;margin-top:26px}
.sheet-bg{position:absolute;inset:0;background:rgba(40,30,90,.22);opacity:0;pointer-events:none;transition:opacity .3s;z-index:20}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:10px;right:10px;bottom:calc(10px + var(--sb));padding:18px 14px 14px;border-radius:28px;background:rgba(255,255,255,.96);box-shadow:0 20px 50px rgba(60,40,140,.25);
 transform:translateY(calc(100% + 80px));visibility:hidden;transition:transform .35s cubic-bezier(.2,.9,.3,1),visibility 0s .35s;z-index:21}
.sheet.on{transform:none;visibility:visible;transition:transform .35s cubic-bezier(.2,.9,.3,1)}
.sheet h3{font-size:17px;font-weight:800;text-align:center;margin-bottom:10px}
.sheet p{font-size:14px;color:#5e5a86;text-align:center;font-weight:600;line-height:1.5;padding:0 8px 8px}
.sheet .opt{display:flex;justify-content:space-between;align-items:center;width:100%;padding:14px 16px;border-radius:16px;font-weight:700;font-size:15.5px}
.sheet .opt.on{background:#efebff;color:var(--p)}
.sheet .opt small{display:block;font-size:12.5px;color:var(--mut);font-weight:600}
.sheet .opt svg{width:18px;height:18px;stroke-width:3}
.sheet .close{display:block;width:100%;margin-top:8px;height:48px;border-radius:24px;background:linear-gradient(180deg,#8576ee,#5f4fcf);color:#fff;font-weight:700}
@media (prefers-reduced-motion:reduce){
 .bud-hero img{animation:none}
 .motes{display:none}
 .bigrip.go{animation-duration:1.5s}
 *{scroll-behavior:auto}
}
/* 3D lotus */
.l3{position:absolute;left:0;bottom:0;width:0;height:0;filter:saturate(.92) brightness(1.02);perspective:900px;perspective-origin:50% -120px;transform-origin:0 0;will-change:transform,opacity}
.l3s{position:absolute;left:0;top:0;transform-style:preserve-3d;transform:rotateX(-27deg)}
.l3 .pt,.l3 .up{position:absolute;transform-style:preserve-3d;transform-origin:50% 100%;will-change:transform}
.l3 .up{left:0}
.l3 i{position:absolute;left:0;top:0;background-repeat:no-repeat;backface-visibility:visible}
.l3 .stm{position:absolute;left:-52px;top:-52px;width:104px;height:104px;background:url(img/stamen.webp) center/contain no-repeat;will-change:transform}
.l3 .cgl{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,200,.95),rgba(255,220,150,.5) 35%,transparent 70%);opacity:0;pointer-events:none}
.l3.refl{opacity:.42;filter:blur(1.4px) saturate(.88)}
.lotus{width:0!important;height:0;aspect-ratio:auto;transform:none!important}
.budimg{position:absolute;left:-94.5px;bottom:-9px;width:189px;max-width:none;pointer-events:none;transform-origin:50% calc(100% - 9px);will-change:transform,opacity}
.budr{position:absolute;left:0;top:0;transform:scaleY(-.6);transform-origin:0 0;opacity:.42;filter:blur(1.4px) saturate(.88)}
@keyframes budsway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
/* ===== onboarding ===== */
.pond{transition:top .8s cubic-bezier(.4,.1,.2,1)}
.buddy{transition:top .9s cubic-bezier(.4,.1,.2,1),width .9s cubic-bezier(.4,.1,.2,1),opacity .6s}
#app.ob .pond{top:57%}
#app.ob:not(.ob-buddy) .buddy{opacity:0}
#app.ob .screen,#app.ob .tabs{opacity:0!important;pointer-events:none!important}
.onb{position:absolute;inset:0;z-index:40;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .6s;touch-action:pan-y}
.onb.on{opacity:1;pointer-events:auto}
.ob-track{position:absolute;top:0;bottom:0;left:0;width:700%;display:flex;transition:transform .55s cubic-bezier(.3,.8,.25,1);will-change:transform}
.obp{position:relative;flex:0 0 calc(100% / 7);height:100%;text-align:center;overflow:hidden}
.obp .an{opacity:0;transform:translateY(16px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.obp.in .an{opacity:1;transform:none}
.obp.in .an:nth-child(2){transition-delay:.12s}.obp.in .an:nth-child(3){transition-delay:.24s}
.obp h2{font-size:29px;line-height:1.15;font-weight:800;color:#2c2860}
.obp .sub{font-size:15px;line-height:1.5;color:#5e5a86;font-weight:600;margin-top:10px}
.obp .cap{position:absolute;left:0;right:0;font-size:16px;line-height:1.5;color:#2f2b63;font-weight:700;text-shadow:0 1px 10px rgba(255,255,255,.9)}
.obp .cap strong{font-weight:800;color:#4a3db8}
.ob-light{background:#f3effc}
.ob-light::before{content:"";position:absolute;inset:0;background:url(img/splash.webp) 0 0/100% auto no-repeat}
.ob-light::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(243,239,252,0) 0,rgba(243,239,252,.35) 12%,#f3effc 34%)}
.ob-light>*{position:relative;z-index:1}
/* 1 splash */
.ob-splash{background:url(img/splash.webp) 50% 100%/cover no-repeat}
.ob-splash .ob-logo{margin-top:calc(var(--st) + 27%)}
.ob-splash .ob-logo svg{width:74px;height:56px;filter:drop-shadow(0 6px 14px rgba(107,91,214,.3))}
.ob-splash h1{font-size:38px;font-weight:800;color:#4b3eb0;margin-top:8px;letter-spacing:-.3px}
.ob-splash p{font-size:16px;line-height:1.5;color:#4e4a7a;font-weight:700;margin-top:10px}
.spin{position:absolute;left:50%;bottom:calc(var(--sb) + 9%);width:30px;height:30px;margin-left:-15px;border-radius:50%;border:3px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 2 meet */
.ob-hero{width:74%;margin:calc(var(--st) + 14%) auto 0;aspect-ratio:720/683;position:relative}
.ob-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 14px 20px rgba(80,60,160,.2))}
.ob-hero .hg{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff,rgba(220,212,255,.55) 42%,transparent 68%)}
.ob-hero+h2{margin-top:18px}
/* 3 how */
.obp h2.t{margin-top:calc(var(--st) + 15%)}
.ob-cards{margin:22px 22px 0;display:flex;flex-direction:column;gap:12px}
.obc{display:flex;gap:14px;align-items:center;text-align:left;padding:16px;border-radius:22px;background:rgba(255,255,255,.82);border:1px solid #fff;box-shadow:0 8px 24px rgba(90,80,170,.1)}
.obc .ic{flex:none;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(#f4f1ff,#e9e3ff)}
.obc .ic.gold{background:linear-gradient(#fff8e6,#fdeec8)}
.obc .ic svg{width:34px;height:28px}
.obc b{display:block;font-size:16.5px;font-weight:800;color:#3b2f9e}
.obc small{display:block;font-size:13.5px;line-height:1.4;color:#5e5a86;font-weight:600;margin-top:2px}
.ob-cards .obc:nth-child(1){transition-delay:.3s}.ob-cards .obc:nth-child(2){transition-delay:.45s}.ob-cards .obc:nth-child(3){transition-delay:.6s}
/* 4/5 lotus pages (transparent: the real scene lotus shows through) */
.ob-clear .cap{top:72%}
.ob-zone{position:absolute;left:14%;right:14%;top:40%;height:30%;touch-action:none;border-radius:50%}
.ob-br{position:absolute;left:0;right:0;top:66.5%;font-size:15px;font-weight:800;color:#5a4bd0;opacity:0;text-shadow:0 1px 10px #fff}
.ob-hand{position:absolute;left:55%;top:57.5%;width:46px;height:46px;pointer-events:none;transition:opacity .4s}
.ob-hand svg{position:absolute;left:8px;top:6px;width:38px;height:38px;filter:drop-shadow(0 4px 8px rgba(80,60,160,.35));animation:tapy 2.4s ease-in-out infinite}
.ob-hand i{position:absolute;left:-2px;top:-4px;width:30px;height:30px;border-radius:50%;border:2.5px solid rgba(255,214,120,.95);box-shadow:0 0 12px rgba(255,200,90,.8);animation:tapr 2.4s ease-out infinite}
.ob-hand i+i{animation-delay:.5s}
@keyframes tapy{0%,100%{transform:translate(0,0)}45%,60%{transform:translate(-3px,-3px) scale(.94)}}
@keyframes tapr{0%,35%{transform:scale(.4);opacity:0}45%{opacity:1}100%{transform:scale(1.6);opacity:0}}
.onb.holding .ob-hand,.onb.holding .obp[data-hold] .cap{opacity:0}
.obp[data-hold] .cap{transition:opacity .5s}
/* 6 energy */
.ob-energy{position:absolute;left:50%;top:33%;width:120px;height:26%;margin-left:-60px;pointer-events:none}
.ob-energy b{position:absolute;left:50%;top:0;bottom:0;width:34px;margin-left:-17px;border-radius:20px;background:linear-gradient(rgba(255,226,140,0),rgba(255,226,140,.55) 40%,rgba(255,240,190,.8));filter:blur(6px);animation:beam 3s ease-in-out infinite}
.ob-energy i{position:absolute;left:50%;bottom:0;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff6d6;box-shadow:0 0 10px 3px rgba(255,205,90,.9);opacity:0;animation:rise 2.6s cubic-bezier(.4,0,.6,1) infinite}
.ob-energy i:nth-child(1){--x:-26px;animation-delay:0s}.ob-energy i:nth-child(2){--x:18px;animation-delay:.26s}.ob-energy i:nth-child(3){--x:-8px;animation-delay:.52s}
.ob-energy i:nth-child(4){--x:30px;animation-delay:.78s}.ob-energy i:nth-child(5){--x:-34px;animation-delay:1.04s}.ob-energy i:nth-child(6){--x:6px;animation-delay:1.3s}
.ob-energy i:nth-child(7){--x:-18px;animation-delay:1.56s}.ob-energy i:nth-child(8){--x:24px;animation-delay:1.82s}.ob-energy i:nth-child(9){--x:-2px;animation-delay:2.08s}.ob-energy i:nth-child(10){--x:12px;animation-delay:2.34s}
@keyframes rise{0%{transform:translate(var(--x),0) scale(.6);opacity:0}15%{opacity:1}80%{opacity:.9}100%{transform:translate(0,-170px) scale(.3);opacity:0}}
@keyframes beam{0%,100%{opacity:.55}50%{opacity:1}}
.ob-clear:nth-child(6) .cap{top:73%}
/* 7 evolution */
.ob-evo{margin:calc(var(--st) + 9%) auto 0;display:flex;flex-direction:column;align-items:center}
.ev{position:relative;aspect-ratio:720/683;opacity:0;transform:scale(.6) translateY(10px);transition:opacity .7s,transform .8s cubic-bezier(.2,1.3,.4,1)}
.ev img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(80,60,160,.2))}
.ev.e1{width:23%}.ev.e2{width:33%}.ev.e3{width:50%}
.ev .eg{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,244,200,.95),rgba(255,214,150,.5) 30%,rgba(200,180,255,.35) 50%,transparent 70%);animation:beam 3s ease-in-out infinite}
.ob-evo .ar{color:#8a7cf0;opacity:0;transition:opacity .5s;margin:2px 0}
.ob-evo .ar svg{width:22px;height:22px;stroke-width:2.6}
.obp.in .ev{opacity:1;transform:none}.obp.in .e1{transition-delay:.15s}.obp.in .e2{transition-delay:.75s}.obp.in .e3{transition-delay:1.35s}
.obp.in .ar{opacity:1;transition-delay:.5s}.obp.in .ar.a2{transition-delay:1.1s}
.ob-light:last-child .cap{top:auto;bottom:calc(var(--sb) + 23%)}
.obp.in .cap.an{transition-delay:.5s}.ob-light:last-child.in .cap.an{transition-delay:1.7s}
/* footer */
.ob-foot{position:absolute;left:0;right:0;bottom:calc(var(--sb) + 5.5%);display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .4s}
.onb.splash .ob-foot{opacity:0;pointer-events:none}
.dots{display:flex;gap:8px}
.dots i{width:7px;height:7px;border-radius:5px;background:rgba(120,110,180,.3);transition:all .35s}
.dots i.on{background:#6b5bd6;width:18px}
.ob-next{width:168px;height:52px;border-radius:28px;color:#fff;font-size:17px;font-weight:800;background:linear-gradient(180deg,#8f80f2,#6252d2);box-shadow:0 12px 26px rgba(95,79,207,.35)}
.ob-next:active{transform:scale(.97)}
/* ===== choose-duration sheet ===== */
.sheet-bg.dim{background:rgba(40,34,70,.42)}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:#d9d5ea;margin:-6px auto 12px}
.dlist{border-radius:18px;background:#f7f5ff;padding:4px}
.drow{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:14px;font-weight:700;font-size:15.5px;color:#3a3666;text-align:left}
.drow+.drow{border-top:1px solid #ece9f8}
.drow svg{color:#77739c}
.drow span{flex:1}
.drow .rad{width:24px;height:24px;border-radius:50%;border:2px solid #cfcae6;display:grid;place-items:center;transition:all .2s}
.drow .rad svg{width:14px;height:14px;stroke-width:3.4;color:#fff;opacity:0}
.drow.on{background:#ece7ff;color:#4a3db8}
.drow.on .rad{background:#6b5bd6;border-color:#6b5bd6}.drow.on .rad svg{opacity:1}
.sheet [data-start]{margin-top:14px;height:52px;font-size:16.5px;font-weight:800}
/* ===== reward ===== */
#reward{overflow:hidden;cursor:pointer}
.rw-bg{position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 40%,rgba(255,236,200,.35),transparent 70%),linear-gradient(rgba(80,64,160,.35),rgba(50,40,120,.55)),url(img/bg.webp) 32% 50%/cover}
.rw-buddy{position:absolute;left:50%;top:calc(var(--st) + 13%);width:72%;aspect-ratio:720/683;transform:translateX(-50%)}
.rw-buddy img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;animation:float 6s ease-in-out infinite;filter:drop-shadow(0 0 22px rgba(255,236,180,.55))}
.rw-glow{position:absolute;left:50%;top:52%;width:130%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,250,228,1) 0,rgba(255,226,160,.85) 22%,rgba(255,200,140,.45) 40%,rgba(200,180,255,.25) 55%,transparent 70%);animation:beam 3.5s ease-in-out infinite}
.rw-ring{position:absolute;left:50%;top:82%;width:120%;height:22%;transform:translate(-50%,-50%) rotate(-8deg);border-radius:50%;border:2.5px solid rgba(160,200,255,.95);box-shadow:0 0 18px rgba(140,180,255,.95),inset 0 0 14px rgba(170,210,255,.8)}
.rw-amt{position:absolute;left:0;right:0;top:66%;display:flex;justify-content:center;align-items:center;gap:10px;color:#fff;font-size:44px;font-weight:800;text-shadow:0 0 18px rgba(255,220,150,.8)}
.rw-amt svg{width:46px;height:34px;filter:drop-shadow(0 0 8px rgba(255,220,140,.9))}
.rw-amt svg path{fill:#ffd36b}
.rw-lbl{position:absolute;left:0;right:0;top:74%;text-align:center;color:#fff;font-size:19px;font-weight:800;text-shadow:0 2px 12px rgba(60,40,140,.5)}
.rw-tot{position:absolute;left:0;right:0;top:79%;text-align:center;color:rgba(255,255,255,.85);font-size:14px;font-weight:700}
.rw-go{position:absolute;left:50%;bottom:calc(var(--sb) + 6%);transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:14px;font-weight:700;padding:10px 18px}
#reward .rw-buddy,#reward .rw-amt,#reward .rw-lbl,#reward .rw-tot{opacity:0;transition:opacity .9s,transform 1s cubic-bezier(.2,1.2,.4,1)}
#reward .rw-amt{transform:scale(.6)}
#reward.in .rw-buddy,#reward.in .rw-lbl,#reward.in .rw-tot{opacity:1}#reward.in .rw-amt{opacity:1;transform:none;transition-delay:.4s}
#reward.in .rw-lbl{transition-delay:.7s}#reward.in .rw-tot{transition-delay:1.1s}
.rw-petals{position:absolute;inset:0;pointer-events:none}
.rw-petals i{position:absolute;top:-6%;width:calc(13px * var(--s));height:calc(19px * var(--s));border-radius:80% 0 80% 0;background:linear-gradient(135deg,#ffe3ee,#f59bc1);opacity:.85;animation:petal 9s linear infinite}
@keyframes petal{0%{transform:translate(0,0) rotate(var(--r))}50%{transform:translate(var(--sx),55vh) rotate(calc(var(--r) + 160deg))}100%{transform:translate(0,112vh) rotate(calc(var(--r) + 320deg))}}
/* ===== your buddy ===== */
.hdr{display:flex;align-items:center;height:48px;position:relative}
.hdr h1{position:absolute;left:0;right:0;text-align:center;justify-content:center;pointer-events:none}
.hdr .circ{position:relative;z-index:1}
.bud-hero .bh-ring{position:absolute;left:50%;top:84%;width:96%;height:20%;transform:translate(-50%,-50%) rotate(-6deg);border-radius:50%;border:2px solid rgba(150,190,255,.8);box-shadow:0 0 14px rgba(140,170,255,.8),inset 0 0 10px rgba(160,190,255,.6)}
#buddyS .bud-name{font-size:24px;color:#3b2f9e;margin-top:10px}
.evo2{margin:10px 34px 0}
.evo2 .bud-stage{font-size:14.5px}
@media (prefers-reduced-motion:reduce){.ob-energy i,.ob-hand svg,.ob-hand i,.rw-petals i,.spin{animation:none}.rw-petals{display:none}}