/* Have Harmonee member app. Carried over from the approved mockup; later rules refine earlier ones.
   Colors: Mind fuchsia #C9478F, Body blue #4C63E0, gold #E2C285 for buttons. Fonts: Fraunces and Hanken Grotesk. */
:root{
  --bg:#FFFFFF;--ink:#1D1F2E;--ink-2:#4A4C5E;--dim:#8B8C9E;--faint:#B9BAC6;--line:rgba(29,31,46,.08);
  --gold:#E0C188;--gold-ink:#8E6C2C;--glow:rgba(224,193,136,.5);--indigo:#2C3155;--lav:#9DA2CC;--amber:#DFAE74;--ok:#4F8A5E;--okbg:#E4F2D6;
  --g-bg:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.26));--g-edge:rgba(255,255,255,.9);--g-rim:rgba(224,193,136,.55);
  --g-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 0 24px rgba(255,255,255,.35),0 22px 48px -26px rgba(44,49,85,.38),0 3px 10px -4px rgba(44,49,85,.1);
  --o1:rgba(224,193,136,.75);--o2:rgba(157,162,204,.7);--o3:rgba(223,174,116,.55);--o4:rgba(190,196,255,.5);
  --ease:cubic-bezier(.2,.7,.2,1);color-scheme:light;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  font-family:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
}
:root[data-theme="night"]{
  --bg:#0F0F12;--ink:#F3F0E8;--ink-2:#CBC9D8;--dim:#8F8EAA;--faint:#444447;--line:rgba(255,255,255,.1);
  --gold-ink:#EBD3A3;--ok:#A6D58A;--okbg:rgba(166,213,138,.16);
  --g-bg:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04));--g-edge:rgba(255,255,255,.22);--g-rim:rgba(224,193,136,.45);
  --g-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 24px rgba(255,255,255,.04),0 24px 50px -24px rgba(0,0,0,.6);
  --o1:rgba(224,193,136,.42);--o2:rgba(88,96,190,.75);--o3:rgba(150,110,190,.4);--o4:rgba(60,70,160,.7);color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%;overscroll-behavior:none}
body{height:100%;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;overscroll-behavior:none;transition:background .8s var(--ease)}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
input,textarea{font-family:inherit;color:var(--ink);font-size:16px}
[hidden]{display:none!important}

/* the light behind the glass */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(38px);will-change:transform}
.o1{width:62vmax;height:62vmax;left:-22vmax;top:-12vmax;background:radial-gradient(circle,var(--o1),transparent 62%);animation:d1 26s var(--ease) infinite alternate}
.o2{width:58vmax;height:58vmax;right:-24vmax;top:18vh;background:radial-gradient(circle,var(--o2),transparent 62%);animation:d2 32s var(--ease) infinite alternate}
.o3{width:46vmax;height:46vmax;left:-8vmax;bottom:-14vmax;background:radial-gradient(circle,var(--o3),transparent 62%);animation:d3 28s var(--ease) infinite alternate}
.o4{width:40vmax;height:40vmax;right:-10vmax;bottom:-8vmax;background:radial-gradient(circle,var(--o4),transparent 62%);animation:d4 24s var(--ease) infinite alternate}
@keyframes d1{to{transform:translate(14vmax,10vmax) scale(1.12)}}
@keyframes d2{to{transform:translate(-12vmax,-8vmax) scale(1.08)}}
@keyframes d3{to{transform:translate(12vmax,-10vmax) scale(1.15)}}
@keyframes d4{to{transform:translate(-10vmax,-12vmax) scale(1.1)}}

/* glass with real refraction where the browser allows it */
.glass{position:relative;background:var(--g-bg);border:1px solid var(--g-edge);box-shadow:var(--g-shadow);
  -webkit-backdrop-filter:blur(22px) saturate(185%);backdrop-filter:blur(22px) saturate(185%)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.55),transparent 45%),radial-gradient(80% 50% at 100% 100%,rgba(224,193,136,.12),transparent 60%)}
.glass::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,var(--g-rim));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:root[data-theme="night"] .glass::before{background:radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.14),transparent 45%),radial-gradient(80% 50% at 100% 100%,rgba(224,193,136,.1),transparent 60%)}
@supports (backdrop-filter:url(#refract)){.glass.refract{backdrop-filter:url(#refract) blur(16px) saturate(190%)}}
.glass>*{position:relative;z-index:1}

.app{position:relative;z-index:1;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;transition:opacity .6s var(--ease)}
.app.on{opacity:1}.app::-webkit-scrollbar{display:none}
.wrap{max-width:460px;margin:0 auto;padding:14px 18px 136px}
.screen{display:none}.screen.on{display:block;animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.logo img{display:block;height:15px;width:auto}
.lg-d{display:none!important}:root[data-theme="night"] .lg-l{display:none!important}:root[data-theme="night"] .lg-d{display:block!important}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;margin:4px 0 20px}
.icbs{display:flex;gap:8px;align-items:center}
.icb{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.icb svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icb:active{transform:scale(.93)}
.aura{position:relative;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;font-weight:500;color:var(--indigo);background:radial-gradient(circle at 32% 26%,#fff,rgba(224,193,136,.75) 78%);box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(142,108,44,.5)}
.aura.d{background:radial-gradient(circle at 32% 26%,#fff,rgba(157,162,204,.85) 78%);box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(44,49,85,.45)}
.aura img{width:54%;height:auto}
.date{font-size:14px;color:var(--dim);font-weight:400}
.hi{font-size:33px;font-weight:500;letter-spacing:-.03em;line-height:1.08;margin-top:4px}
.pres{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 22px}
.pchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:13px;color:var(--ink-2)}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--okbg)}
.ldot.away{background:var(--faint);box-shadow:none}

/* the card deck: the heart of Home */
.deck{position:relative;height:296px;margin-top:8px}
.dcard{position:absolute;left:0;right:0;bottom:0;height:268px;border-radius:32px;padding:20px;text-align:left;display:flex;flex-direction:column;transition:transform .55s var(--ease),opacity .4s}
.dcard.back{transform:translateY(-26px) scale(.92);opacity:.85;z-index:0}
.dcard.front{z-index:2}
.dcard.front:active{transform:scale(.985)}
.dcard .tint{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:.9}
.dcard.k-daniel .tint{background:radial-gradient(90% 70% at 100% 0%,rgba(224,193,136,.55),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(157,162,204,.35),transparent 65%)}
.dcard.k-harmonee .tint{background:radial-gradient(90% 70% at 100% 0%,rgba(157,162,204,.6),transparent 60%),radial-gradient(70% 60% at 0% 100%,rgba(224,193,136,.3),transparent 65%)}
.dtop{display:flex;align-items:center;gap:11px}
.dtop b{display:block;font-size:16px;font-weight:600}.dtop span{font-size:12.5px;color:var(--dim)}
.dtop .new{margin-left:auto;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--gold);color:#2B2410}
.dquote{font-family:"Fraunces",serif;font-weight:300;font-size:21px;line-height:1.3;margin:16px 0 0;letter-spacing:-.005em}
.dstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.dstats div{padding:10px 12px;border-radius:18px;background:rgba(255,255,255,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
:root[data-theme="night"] .dstats div{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.dstats b{display:block;font-size:19px;font-weight:500;letter-spacing:-.02em}.dstats span{font-size:11.5px;color:var(--dim)}
.dcta{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:14px;font-weight:500}
.dcta i{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.dcta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dempty{position:absolute;inset:auto 0 0 0;height:268px;border-radius:32px;padding:26px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.dempty .pulse{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,var(--gold) 80%);box-shadow:0 0 0 0 var(--glow);animation:pulse 2.6s var(--ease) infinite;margin-bottom:8px}
@keyframes pulse{70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}}
.dempty b{font-size:22px;font-weight:500;letter-spacing:-.02em}.dempty span{font-size:14px;color:var(--ink-2);line-height:1.55}
.deckhint{font-size:12px;color:var(--dim);margin:12px 4px 0;line-height:1.5}

/* sections */
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:30px 4px 12px}
.sec h2{font-size:19px;font-weight:500;letter-spacing:-.02em}
.sec span{font-size:12.5px;color:var(--dim)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ci{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:108px;padding:14px 6px;border-radius:24px;font-size:13.5px;font-weight:500;color:var(--ink);transition:transform .14s ease-out}
.ci:active{transform:scale(.95)}
.ci .gi{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 26%,#fff,rgba(224,193,136,.7) 82%);box-shadow:inset 0 1px 0 #fff,0 6px 14px -6px rgba(142,108,44,.55);color:#3B2F12}
.ci .gi.mind{background:radial-gradient(circle at 32% 26%,#fff,rgba(157,162,204,.85) 82%);box-shadow:inset 0 1px 0 #fff,0 6px 14px -6px rgba(44,49,85,.5);color:#20244A}
.ci .gi.both{background:radial-gradient(circle at 32% 26%,#fff,rgba(223,174,116,.65) 82%);color:#3B2F12}
.ci svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ci small{font-size:11px;color:var(--dim);font-weight:400;margin-top:-6px}
.ci .sentdot{position:absolute;top:12px;right:13px;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px var(--glow)}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.door{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:150px;padding:16px;border-radius:28px;text-align:left;overflow:hidden;color:#1D1F2E;transition:transform .14s ease-out;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -16px 30px -12px rgba(0,0,0,.12),0 20px 36px -22px var(--tone)}
.door:active{transform:scale(.97)}
.door::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 22% 10%,rgba(255,255,255,.65),transparent 46%);pointer-events:none}
.door>*{position:relative;z-index:1}
.door.body{background:linear-gradient(155deg,#F3E4C2,#E0C188 48%,#C8A061);--tone:rgba(201,160,97,.8)}
.door.mind{background:linear-gradient(155deg,#DADCF3,#A3A8D2 50%,#6E74AA);--tone:rgba(110,116,170,.75)}
.door .dic{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.5);display:grid;place-items:center}
.door svg{fill:none;stroke:#1D1F2E;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.door .dic svg{width:19px;height:19px}
.door .go{position:absolute;top:18px;right:16px}.door .go svg{width:18px;height:18px}
.door .dt{font-size:26px;font-weight:500;letter-spacing:-.025em}
.door .ds{font-size:12.5px;opacity:.78}
.door .lkb{display:none;align-items:center;gap:5px;font-size:11.5px;font-weight:500;margin-top:10px;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.6)}
.door .lkb svg{width:12px;height:12px}
.door.locked{background:linear-gradient(155deg,#FFFFFF,#F1F0EC 55%,#E2E0DA);--tone:rgba(44,49,85,.25)}
.door.locked .lkb{display:inline-flex}.door.locked .go{display:none}.door.locked .dt,.door.locked .ds{opacity:.55}
:root[data-theme="night"] .door.locked{background:linear-gradient(155deg,#3E3E41,#2D2D30 55%,#202023);color:#F3F0E8}
:root[data-theme="night"] .door.locked svg{stroke:#F3F0E8}:root[data-theme="night"] .door.locked .lkb,:root[data-theme="night"] .door.locked .dic{background:rgba(255,255,255,.12)}
.nextrow{padding:6px;margin-top:12px;border-radius:24px}
.nr{display:flex;align-items:center;gap:12px;padding:10px}
.nr+.nr{border-top:1px solid var(--line)}
.nr div{flex:1}.nr b{display:block;font-size:14px;font-weight:500}.nr span{font-size:12.5px;color:var(--dim)}
.foot{text-align:center;font-size:12px;color:var(--dim);line-height:1.6;margin:28px 10px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 16px;border-radius:999px;font-size:14.5px;font-weight:500;transition:transform .14s ease-out}
.btn:active{transform:scale(.96)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.gold{background:linear-gradient(180deg,#F0DBB0,#E0C188 55%,#D2AC67);color:#2B2410;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 22px -12px rgba(201,160,97,.95)}
.btn.ink{background:var(--ink);color:var(--bg)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn.wide{width:100%}
.btn.done{opacity:.65}

/* section pages */
.stitle{font-size:33px;font-weight:500;letter-spacing:-.03em;margin:4px 4px 2px}
.ssub{font-size:14px;color:var(--dim);margin:0 4px 18px;line-height:1.45;max-width:20em}
.shead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
[data-section]{position:relative;min-height:70vh}
[data-section].locked .secbody{filter:blur(8px) saturate(.6);opacity:.45;pointer-events:none;-webkit-user-select:none;user-select:none;max-height:640px;overflow:hidden}
.lockpane{display:none}
[data-section].locked .lockpane{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:absolute;left:2px;right:2px;top:128px;padding:28px 22px 22px;border-radius:32px;z-index:3}
.lockpane .lk{width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff,var(--gold) 80%);display:grid;place-items:center;box-shadow:0 0 0 8px var(--glow);margin-bottom:6px}
.lockpane .lk svg{width:24px;height:24px;fill:none;stroke:#2B2410;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.lockpane b{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.lockpane>span{font-size:14px;color:var(--ink-2);line-height:1.55;max-width:22em}
.lockpane .btn{margin-top:8px}
.lockpane a{font-size:13px;color:var(--dim)}
.latest{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:26px;margin-top:14px;text-align:left}
.latest .lt{flex:1}.latest b{display:block;font-size:15.5px;font-weight:500}.latest span{font-size:12.5px;color:var(--dim);line-height:1.4}
.latest .spark{width:62px;height:34px}
.latest .spark path{fill:none;stroke:var(--gold-ink);stroke-width:2;stroke-linecap:round}
.whyline{font-size:12.5px;color:var(--dim);line-height:1.55;margin:12px 6px 0}
.writeline{text-align:center;padding:12px 10px 26px;cursor:text}
.writeline .q2{font-family:"Fraunces",serif;font-weight:300;font-size:23px;color:var(--ink-2)}
.writeline .caret{display:inline-block;width:1.5px;height:24px;background:var(--gold);margin-top:10px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.coach{padding:16px;margin-bottom:12px;border-radius:28px}
.crow{display:flex;align-items:center;gap:12px}
.cname{flex:1}.cname b{display:block;font-size:17px;font-weight:500}.cname span{font-size:12.5px;color:var(--dim)}
.cstat{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px}
.cacts{display:flex;gap:8px;margin-top:14px}.cacts .btn{flex:1}
.cacts .btn.plain{background:rgba(255,255,255,.55);box-shadow:inset 0 1px 0 #fff,0 6px 14px -10px rgba(44,49,85,.35)}
:root[data-theme="night"] .cacts .btn.plain{background:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cmeta{display:flex;flex-direction:column;gap:2px;margin-top:12px}
.cmeta div{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:9px 4px;border-top:1px solid var(--line)}
.cmeta span{color:var(--dim)}
.lockmini{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;margin-bottom:12px;border-radius:24px;text-align:left}
.lockmini .lkc{width:40px;height:40px;border-radius:50%;background:var(--line);display:grid;place-items:center}
.lockmini svg{width:17px;height:17px;fill:none;stroke:var(--dim);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lockmini b{display:block;font-size:14.5px;font-weight:500}.lockmini .lt span{font-size:12.5px;color:var(--dim)}
.clist{display:flex;flex-direction:column;gap:12px}

/* nav: every tab equal, one clear active state */
.navwrap{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:center;padding:0 0 calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.nav{pointer-events:auto;display:flex;gap:2px;padding:6px;border-radius:999px}
.nav button{position:relative;width:64px;height:56px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);transition:color .25s,background .25s}
.nav button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav button em{font-style:normal;font-size:10.5px;font-weight:500}
.nav button.on{color:var(--ink);background:rgba(255,255,255,.75);box-shadow:inset 0 1px 0 #fff,0 6px 14px -8px rgba(44,49,85,.4)}
:root[data-theme="night"] .nav button.on{background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.nav button .lk{position:absolute;top:6px;right:15px;width:14px;height:14px;border-radius:50%;background:var(--bg);display:none;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.nav button .lk svg{width:9px;height:9px;stroke-width:2.4}
.nav button.locked{color:var(--faint)}.nav button.locked .lk{display:grid}
.nav button:active{transform:scale(.93)}
@media(max-width:350px){.nav button{width:56px}}

/* the card experience */
.cx{position:fixed;inset:0;z-index:50;display:none;flex-direction:column;background:var(--bg)}
.cx.on{display:flex;animation:cxin .45s var(--ease)}
@keyframes cxin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.cx .sky .orb{filter:blur(34px)}
.cxtop{position:relative;z-index:2;padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 0;max-width:520px;width:100%;margin:0 auto}
.segs{display:flex;gap:5px}
.segs i{flex:1;height:3.5px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.segs i.past::after,.segs i.cur::after{content:"";position:absolute;inset:0;background:var(--ink);border-radius:3px}
.segs i.cur::after{animation:segfill .5s var(--ease)}
@keyframes segfill{from{transform:scaleX(0);transform-origin:left}to{transform:scaleX(1)}}
.cxhd{display:flex;align-items:center;gap:11px;margin-top:14px}
.cxhd b{display:block;font-size:15px;font-weight:600}.cxhd span{font-size:12.5px;color:var(--dim)}
.cxhd .x{margin-left:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.cxhd .x svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.cxstage{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;padding:14px 18px;max-width:520px;width:100%;margin:0 auto;min-height:0}
.pn{width:100%;max-height:100%;overflow-y:auto;border-radius:34px;padding:24px 22px;animation:pin .45s var(--ease)}
.pn::-webkit-scrollbar{display:none}
@keyframes pin{from{opacity:0;transform:translateX(var(--dir,18px))}to{opacity:1;transform:none}}
.cxfoot{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px calc(env(safe-area-inset-bottom,0px) + 18px);max-width:520px;width:100%;margin:0 auto}
.cxfoot button.arr{width:48px;height:48px;border-radius:50%;display:grid;place-items:center}
.cxfoot button.arr svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cxfoot button.arr:disabled{opacity:.3}
.cxfoot .cnt{font-size:13px;color:var(--dim)}
.pl{font-size:13.5px;color:var(--dim);font-weight:500;display:flex;align-items:center;gap:8px}
.pl i{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.pbig{font-weight:300;font-size:58px;letter-spacing:-.045em;line-height:1;margin-top:8px}
.pbig small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--dim);margin-left:6px}
.pcap{font-size:14px;color:var(--ink-2);margin-top:6px}
.says{font-family:"Fraunces",serif;font-weight:300;font-size:18px;line-height:1.45;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.says small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:12px;color:var(--dim);margin-top:6px}
.cover h1{font-size:40px;font-weight:500;letter-spacing:-.035em;line-height:1.05;margin-top:10px}
.cover .q{font-family:"Fraunces",serif;font-weight:300;font-size:22px;line-height:1.35;margin-top:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:13px;background:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 #fff}
:root[data-theme="night"] .chip{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.chip b{font-weight:600}
.hint{font-size:12.5px;color:var(--dim);margin-top:22px;display:flex;align-items:center;gap:6px}
.segbar{display:flex;gap:3.5px;height:34px;margin-top:16px}
.segbar i{flex:1;border-radius:6px;background:var(--line);transition:background .25s}
.segbar i.on{background:linear-gradient(180deg,#F7EBCB,#E0C188)}
.segbar i.edge{box-shadow:0 0 14px 3px var(--glow)}
.scale2{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:6px}
.rings{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px;text-align:center}
.ring{position:relative;width:84px;height:84px;margin:0 auto}
.ring svg{width:84px;height:84px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring .bgc{stroke:var(--line)}
.ring .fg{transition:stroke-dashoffset 1.2s var(--ease)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:1px;font-size:18px;font-weight:500}
.rings span{display:block;font-size:12.5px;color:var(--dim);margin-top:6px}
.drops{display:flex;gap:6px;align-items:center;margin-top:20px}
.drops svg{width:22px;height:26px}
.drops path{fill:var(--line);transition:fill .3s}
.drops .f path{fill:var(--lav)}
.drops .lab{font-size:13.5px;color:var(--ink-2);margin-left:8px}
.badge{display:inline-flex;align-items:center;gap:7px;margin-top:16px;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:500;background:var(--okbg);color:var(--ok)}
.bars{position:relative;display:flex;align-items:flex-end;gap:7px;height:130px;margin-top:20px}
.bars i{flex:1;height:0;border-radius:8px;background:linear-gradient(180deg,var(--lav),rgba(157,162,204,.45));transition:height .9s var(--ease)}
.bars i.short{background:linear-gradient(180deg,rgba(223,174,116,.95),rgba(223,174,116,.35))}
.bars i.none{background:none;border:1.5px dashed var(--line)}
.bars .gline{position:absolute;left:0;right:0;border-top:1.5px dashed var(--gold-ink);opacity:.6}
.bars .gline span{position:absolute;right:0;top:-18px;font-size:11px;color:var(--gold-ink)}
.days{display:flex;gap:7px;font-size:11px;color:var(--dim);margin-top:6px}.days span{flex:1;text-align:center}
.meters{display:grid;gap:10px;margin-top:20px}
.meter{display:flex;align-items:center;justify-content:space-between;font-size:13.5px}
.meter .dots{display:flex;gap:5px}
.meter .dots i{width:14px;height:14px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}
.meter .dots i.on{background:var(--gold);transform:scale(1.08)}
.chart{position:relative;height:190px;margin:12px -6px 0;touch-action:pan-y}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .ln{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.chart .gl{stroke:var(--gold-ink);stroke-width:1.2;stroke-dasharray:4 5;opacity:.7}
.ctip{position:absolute;top:0;font-size:13px;pointer-events:none;white-space:nowrap}.ctip b{font-weight:600;font-size:15px}.ctip span{display:block;color:var(--dim)}
.cguide{position:absolute;top:42px;bottom:4px;width:1.5px;background:var(--line);pointer-events:none}
.cknob{position:absolute;width:34px;height:22px;margin:-11px 0 0 -17px;border-radius:999px;background:#fff;box-shadow:0 6px 14px -4px rgba(0,0,0,.35);pointer-events:none;display:grid;place-items:center}
.cknob::after{content:"";width:12px;height:2.5px;border-radius:2px;background:#1D1F2E}
.pill{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--okbg);color:var(--ok)}
.goals{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.goal{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.45);box-shadow:inset 0 1px 0 #fff;font-size:14.5px;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
:root[data-theme="night"] .goal{background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.pn.in .goal{opacity:1;transform:none}
.goal .ck{width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;border:1.5px solid var(--faint)}
.goal.gd .ck{background:var(--gold);border-color:var(--gold)}
.goal .ck svg{width:13px;height:13px;stroke:#2B2410;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.goal.gd .ck svg{opacity:1}
.goal span{flex:1}.goal em{font-style:normal;font-size:12px;color:var(--dim)}
.medal{position:relative;margin:22px auto 0;width:150px;height:150px;border-radius:50%;display:grid;place-items:center;text-align:center;cursor:pointer;
  background:conic-gradient(from 200deg,#F6E7C3,#E0C188,#C8A061,#F6E7C3,#E7CC93,#F6E7C3);box-shadow:0 18px 40px -16px rgba(201,160,97,.9),inset 0 2px 0 rgba(255,255,255,.8)}
.medal::before{content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#FFF8E6,#EAD3A0 70%);box-shadow:inset 0 -6px 14px rgba(150,110,40,.25)}
.medal::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.medal span{position:relative;z-index:1;font-size:13px;font-weight:600;color:#5C4517;line-height:1.3;padding:0 22px}
.medal span b{display:block;font-size:30px;font-weight:500;letter-spacing:-.02em}
.spark{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);pointer-events:none;animation:spark .9s var(--ease) forwards}
@keyframes spark{to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
.orbs7{display:flex;justify-content:space-between;align-items:center;height:110px;margin-top:22px}
.orbs7 i{display:block;border-radius:50%;transform:scale(0);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.pn.in .orbs7 i{transform:scale(1)}
.breathe{position:relative;width:210px;height:210px;margin:26px auto 6px;display:grid;place-items:center;cursor:pointer}
.breathe .r1,.breathe .r2{position:absolute;inset:0;border-radius:50%}
.breathe .r1{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(157,162,204,.75) 70%);box-shadow:0 20px 50px -18px rgba(44,49,85,.6);transform:scale(.62)}
.breathe .r2{border:1.5px solid rgba(157,162,204,.55)}
.breathe.go .r1{animation:breath 10s ease-in-out infinite}
@keyframes breath{0%,100%{transform:scale(.62)}40%,50%{transform:scale(1)}}
.breathe b{position:relative;font-size:16px;font-weight:500;color:#20244A}
.cx .actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}

/* sheets, carried over and reglazed */
.over{position:fixed;inset:0;z-index:40;display:none;align-items:flex-end;justify-content:center;background:rgba(17,20,44,.22)}
.over.on{display:flex}
.sheet{width:100%;max-width:520px;max-height:90vh;overflow-y:auto;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));border-radius:34px 34px 0 0;animation:up .38s var(--ease)}
.sheet.glass{background:linear-gradient(160deg,rgba(255,255,255,.86),rgba(255,255,255,.7))}
:root[data-theme="night"] .sheet.glass{background:linear-gradient(160deg,rgba(28,28,31,.9),rgba(21,21,24,.86))}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.handle{width:40px;height:5px;border-radius:3px;background:var(--faint);opacity:.6;margin:0 auto 14px}
.sk{display:none}.sk.on{display:block}
.shd{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.shd .ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 26%,#fff,rgba(224,193,136,.7) 82%);color:#3B2F12;box-shadow:inset 0 1px 0 #fff}
.shd .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.shd b{display:block;font-size:21px;font-weight:500;letter-spacing:-.02em}.shd span{font-size:13px;color:var(--dim)}
.q{font-size:15px;color:var(--ink-2);margin:18px 2px 10px}
.pebs{display:flex;flex-wrap:wrap;gap:8px}
.peb{padding:11px 16px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 4px 12px -8px rgba(44,49,85,.4);font-size:14px;color:var(--ink-2)}
:root[data-theme="night"] .peb,:root[data-theme="night"] .scale5 button,:root[data-theme="night"] .stepper button,:root[data-theme="night"] .inp{background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.peb.on{background:var(--ink);color:var(--bg)}
.scale5{display:flex;gap:6px}
.scale5 button{flex:1;padding:12px 0;border-radius:16px;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 4px 12px -8px rgba(44,49,85,.4);font-size:15px;color:var(--ink-2)}
.scale5 button.on{background:linear-gradient(180deg,#F0DBB0,#E0C188);color:#2B2410;font-weight:600}
.sends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--dim);margin-top:6px}
.stepper{display:flex;align-items:center;justify-content:center;gap:22px;margin:8px 0 4px}
.stepper button{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:inset 0 1px 0 #fff,0 4px 12px -8px rgba(44,49,85,.4);font-size:24px;color:var(--ink)}
.stepper .val{font-weight:300;font-size:56px;letter-spacing:-.04em;min-width:170px;text-align:center}.stepper .val small{font-size:18px;color:var(--dim)}
.slider{width:100%;accent-color:#C8A061;margin-top:8px}
.sval{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.sval b{font-weight:300;font-size:44px;letter-spacing:-.04em}.sval span{font-size:14px;color:var(--gold-ink);font-weight:600}
.f5{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.f5 label{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--dim)}
.inp{width:100%;padding:13px 14px;border-radius:16px;border:0;background:rgba(255,255,255,.75);box-shadow:inset 0 1px 3px rgba(44,49,85,.1);outline:none}
.inp:focus{box-shadow:inset 0 1px 3px rgba(44,49,85,.1),0 0 0 2px var(--gold)}
.bignum{width:100%;text-align:center;font-weight:300;font-size:62px;letter-spacing:-.04em;background:none;border:0;outline:none;border-bottom:1.5px solid var(--line);padding:6px 0;caret-color:var(--gold)}
.sendbar{margin-top:22px}.sendbar .btn{width:100%}
.done{display:none;text-align:center;padding:30px 10px 20px}
.sheet.sent .sk.on>*:not(.done){display:none}
.sheet.sent .sk.on>.done{display:block}
.done .ck{width:62px;height:62px;border-radius:50%;margin:0 auto 16px;background:radial-gradient(circle at 32% 26%,#fff,var(--gold) 75%);display:grid;place-items:center;box-shadow:0 0 0 9px var(--glow)}
.done .ck svg{width:26px;height:26px;stroke:#2B2410;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.done b{display:block;font-size:24px;font-weight:500}.done span{display:block;font-size:14px;color:var(--ink-2);margin-top:6px}
.note{font-size:12.5px;color:var(--dim);line-height:1.5;margin-top:10px}
.cacts label.btn{flex:1}
.dialwrap{position:relative;margin:4px auto 0;max-width:320px}
.dial{display:block;width:100%;height:auto;touch-action:none}
.dial line{stroke:var(--faint);stroke-width:1.4;stroke-linecap:round;opacity:.6}
.dial line.on{stroke:var(--ink);opacity:1}
.dial .knob2{fill:var(--gold);filter:drop-shadow(0 0 8px var(--glow))}
.dnum{position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none}
.dnum b{display:block;font-weight:300;font-size:50px;letter-spacing:-.04em;line-height:1}
.dnum span{font-size:14px;color:var(--gold-ink);font-weight:600}
.dlab{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin:-4px 6px 0}

/* gate */
.gate{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 24px;text-align:center;transition:opacity .6s var(--ease)}
.gate.gone{opacity:0;pointer-events:none}
.gcard{width:100%;max-width:380px;padding:34px 24px 26px;border-radius:36px;display:flex;flex-direction:column;align-items:center}
.gate p{font-size:15.5px;color:var(--ink-2);margin-top:14px;max-width:18em;line-height:1.55}
.gate input{margin-top:26px;width:100%;text-align:center;font-weight:300;font-size:27px;letter-spacing:.16em;background:none;border:0;border-bottom:1.5px solid var(--line);padding:12px 0;outline:none;caret-color:var(--gold);text-transform:uppercase}
.gate input::placeholder{color:var(--faint)}
.samples{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.samples button{font-size:12px;padding:6px 11px;border-radius:999px;background:var(--line);color:var(--ink-2)}
.gate .hint2{font-size:12px;color:var(--dim);margin-top:16px;line-height:1.55}
.gate .btn{padding:14px 52px;margin-top:22px}

/* write moment */
.write{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;background:var(--bg)}
.write.on{display:flex}
.write>*{position:relative;z-index:1}
.write .wt{display:flex;justify-content:space-between;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 0}
.write .wt button{color:var(--dim);font-size:15px;padding:8px}
.write .wt .ctx{font-size:13.5px;color:var(--dim)}
.write .wc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 30px;text-align:center}
.write .wp{font-family:"Fraunces",serif;font-weight:300;font-size:22px;color:var(--dim);max-width:16em;line-height:1.3;margin-bottom:24px;transition:opacity .4s}
.write .wf{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(25px,7vw,31px);line-height:1.35;outline:none;width:100%;max-width:17em;min-height:1.4em;caret-color:var(--gold);word-break:break-word}
.write .ws{margin:0 auto calc(env(safe-area-inset-bottom,0px) + 28px);padding:14px 36px;opacity:0;pointer-events:none;transition:opacity .4s}
.write .ws.show{opacity:1;pointer-events:auto}
.write .wd{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}
.write.sent .wc,.write.sent .ws{display:none}.write.sent .wd{display:flex}

.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);z-index:70;opacity:0;pointer-events:none;padding:12px 18px;border-radius:999px;font-size:13.5px;transition:all .35s var(--ease);max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.orb,.medal::after,.breathe.go .r1,.dempty .pulse{animation:none!important}.screen.on,.sheet,.pn,.cx.on{animation:none!important}}

.dcard.front{background:linear-gradient(140deg,rgba(255,255,255,.8),rgba(255,255,255,.52))}
:root[data-theme="night"] .dcard.front{background:linear-gradient(140deg,rgba(34,34,37,.82),rgba(24,24,27,.7))}
.dcard.back{transform:translateY(-30px) scale(.9)}
.dcard.back>*:not(.tint):not(.peek){opacity:0}
.dcard .peek{display:none}
.dcard.back .peek{display:block;position:absolute;top:7px;left:0;right:0;text-align:center;font-size:12px;font-weight:500;color:var(--ink-2);z-index:2}

/* ===== two orbs: gold is the Body, lavender is the Mind ===== */
.sky .orb{display:none}
.ob,.om{position:absolute;border-radius:50%;filter:blur(26px);will-change:transform;transition:opacity 1.1s var(--ease)}
.ob{width:78vmax;height:78vmax;left:-34vmax;top:-30vmax;background:radial-gradient(circle,#E8C98A 0%,rgba(228,198,140,.85) 22%,rgba(224,193,136,.35) 45%,transparent 66%);animation:ob 15s cubic-bezier(.45,.05,.55,.95) infinite}
.om{width:74vmax;height:74vmax;right:-34vmax;bottom:-30vmax;background:radial-gradient(circle,#9AA2EA 0%,rgba(150,158,226,.85) 22%,rgba(157,162,204,.35) 45%,transparent 66%);animation:om 17s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes ob{0%,100%{transform:translate(0,0)}25%{transform:translate(46vw,14vh)}50%{transform:translate(56vw,62vh)}75%{transform:translate(4vw,46vh)}}
@keyframes om{0%,100%{transform:translate(0,0)}25%{transform:translate(-48vw,-16vh)}50%{transform:translate(-58vw,-62vh)}75%{transform:translate(-6vw,-44vh)}}
:root[data-theme="night"] .ob{background:radial-gradient(circle,#D9B66F 0%,rgba(224,193,136,.7) 22%,rgba(224,193,136,.22) 45%,transparent 66%)}
:root[data-theme="night"] .om{background:radial-gradient(circle,#7D86F0 0%,rgba(110,120,230,.8) 22%,rgba(110,120,230,.28) 45%,transparent 66%)}
body[data-zone="body"] .app~* .om,body[data-zone="body"] .sky .om{opacity:.18}
body[data-zone="mind"] .sky .ob{opacity:.18}
.cx[data-k="daniel"] .sky .om{opacity:.18}.cx[data-k="harmonee"] .sky .ob{opacity:.18}

/* ===== nearly monochrome ===== */
:root{--g-rim:rgba(29,31,46,.07)}:root[data-theme="night"]{--g-rim:rgba(255,255,255,.14)}
.glass::before{background:radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.6),transparent 45%)}
:root[data-theme="night"] .glass::before{background:radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.14),transparent 45%)}
.btn.gold{background:var(--ink);color:var(--bg);box-shadow:0 12px 24px -12px rgba(29,31,46,.55)}
:root[data-theme="night"] .btn.gold{box-shadow:0 12px 24px -12px rgba(0,0,0,.7)}
.dtop .new{background:var(--ink);color:var(--bg)}
.aura{background:radial-gradient(circle at 32% 26%,#fff,rgba(29,31,46,.16) 80%);color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(29,31,46,.35)}
.aura.d{background:radial-gradient(circle at 32% 26%,#fff,rgba(224,193,136,.9) 80%);color:#4A3814;box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(181,140,71,.55)}
.aura.h{background:radial-gradient(circle at 32% 26%,#fff,rgba(157,162,204,.95) 80%);box-shadow:inset 0 1px 0 #fff,0 6px 16px -6px rgba(63,69,131,.5)}
.aura.h img{filter:brightness(0) invert(1);opacity:.95}
.ldot{background:var(--ink);box-shadow:0 0 0 3px var(--line)}
.ci .sentdot{background:var(--ink);box-shadow:none}
.dial .knob2{fill:var(--ink);filter:none}
.dnum span{color:var(--ink-2)}
.scale5 button.on{background:var(--ink);color:var(--bg)}
.done .ck{background:var(--ink);box-shadow:0 0 0 9px var(--line)}.done .ck svg{stroke:var(--bg)}
.lockpane .lk{background:var(--ink);box-shadow:0 0 0 8px var(--line)}.lockpane .lk svg{stroke:var(--bg)}
.badge,.pill{background:var(--line);color:var(--ink-2)}
.writeline .caret{background:var(--ink)}
.bignum{caret-color:var(--ink)}
.dcard.k-daniel .tint{background:radial-gradient(90% 70% at 100% 0%,rgba(224,193,136,.6),transparent 62%)}
.dcard.k-harmonee .tint{background:radial-gradient(90% 70% at 100% 0%,rgba(157,162,204,.65),transparent 62%)}
.bars i{background:linear-gradient(180deg,#E0C188,rgba(224,193,136,.45))}
.bars i.short{background:linear-gradient(180deg,rgba(224,193,136,.5),rgba(224,193,136,.18))}
.meter .dots i.on{background:#CDAA6B}
.drops .f path{fill:#E0C188}
.cx[data-k="harmonee"] .pl i{background:#9DA2CC}
.shd .ic{background:radial-gradient(circle at 32% 26%,#fff,rgba(224,193,136,.75) 82%)}
.sk[data-k="mind"] .shd .ic,.sk[data-k="moment"] .shd .ic{background:radial-gradient(circle at 32% 26%,#fff,rgba(157,162,204,.9) 82%);color:#20244A}
.sk[data-k="mind"] .sval span{color:#5D63A0}.sk[data-k="mind"] .slider{accent-color:#7E84C0}
:root[data-theme="night"] .sk[data-k="mind"] .sval span{color:#B9BEEE}

/* ===== Today opens with attunement ===== */
.attcard{padding:18px 18px 20px;border-radius:32px}
.attcard .shd .ic{background:radial-gradient(circle at 32% 26%,#fff,rgba(29,31,46,.14) 82%);color:var(--ink)}
.sk.inline .sendbar{margin-top:18px}
.sk.inline .pebs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 2px}
.sk.inline .pebs::-webkit-scrollbar{display:none}
.sk.inline .peb{flex:0 0 auto}
.sk.inline.sent>*:not(.done){display:none}
.sk.inline.sent>.done{display:block;animation:rise .4s var(--ease)}
.writeout{display:flex;align-items:center;justify-content:center;gap:4px;font-size:13.5px;color:var(--dim);margin:12px 0 0;cursor:pointer}
.writeout svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ===== motion: sliding tab highlight, popping icons, screens that arrive ===== */
.nav{position:relative}
.ind{position:absolute;top:6px;left:0;height:56px;width:64px;border-radius:999px;z-index:0;background:rgba(255,255,255,.88);box-shadow:inset 0 1px 0 #fff,0 8px 18px -8px rgba(29,31,46,.4);transition:transform .55s cubic-bezier(.34,1.45,.64,1),width .3s var(--ease)}
:root[data-theme="night"] .ind{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.nav button{z-index:1}
.nav button.on{background:none!important;box-shadow:none!important}
.nav button.on svg{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.nav button.on em{animation:fadein .4s var(--ease)}
@keyframes pop{0%{transform:scale(.7) translateY(3px)}55%{transform:scale(1.18) translateY(-2px)}100%{transform:none}}
@keyframes fadein{from{opacity:.3}}
.screen.on{animation:slidein .5s cubic-bezier(.2,.8,.2,1)}
@keyframes slidein{from{opacity:0;transform:translateX(var(--dx,0))}to{opacity:1;transform:none}}
.screen.on>*:not(.lockpane){animation:arrive .6s cubic-bezier(.2,.8,.2,1) both}
.screen.on>*:nth-child(2){animation-delay:.04s}.screen.on>*:nth-child(3){animation-delay:.08s}.screen.on>*:nth-child(4){animation-delay:.12s}.screen.on>*:nth-child(5){animation-delay:.16s}
.screen.on>*:nth-child(6){animation-delay:.2s}.screen.on>*:nth-child(7){animation-delay:.24s}.screen.on>*:nth-child(8){animation-delay:.28s}.screen.on>*:nth-child(n+9){animation-delay:.32s}
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ci,.door,.dcard.front,.latest,.btn{will-change:transform}
.ci:active,.door:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.ob,.om,.nav button.on svg,.screen.on,.screen.on>*{animation:none!important}.ind{transition:none}}

:root[data-theme="night"]{--g-bg:linear-gradient(140deg,rgba(31,31,34,.62),rgba(18,18,21,.5))}
:root[data-theme="night"] .ob{opacity:.8}:root[data-theme="night"] .om{opacity:.85}
:root[data-theme="night"] body[data-zone="body"] .sky .om,:root[data-theme="night"] body[data-zone="mind"] .sky .ob{opacity:.15}
:root[data-theme="night"] .date,:root[data-theme="night"] .shd span{color:#B4B3C8}

/* ===== pure glass on two whites, under a matte finish ===== */
body,.cx,.write{background:linear-gradient(174deg,#FFFFFF 0%,#FFFFFF 38%,#F3F0EA 100%)}
:root[data-theme="night"] body,:root[data-theme="night"] .cx,:root[data-theme="night"] .write{background:linear-gradient(170deg,#111115 0%,#0B0B0E 60%,#08080A 100%)}
.matte{position:fixed;inset:0;z-index:0;pointer-events:none;background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(34px) saturate(118%);backdrop-filter:blur(34px) saturate(118%)}
.matte::after{content:"";position:absolute;inset:0;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
:root[data-theme="night"] .matte{background:rgba(19,19,22,.2)}
:root[data-theme="night"] .matte::after{mix-blend-mode:overlay;opacity:.35}
.ob,.om{opacity:1}
:root{--g-bg:linear-gradient(140deg,rgba(255,255,255,.52),rgba(255,255,255,.16));--g-edge:rgba(255,255,255,.95);--g-rim:rgba(255,255,255,.55);
  --g-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.4),0 14px 36px -14px rgba(29,31,46,.22)}
:root[data-theme="night"]{--bg:#17171A;--ink:#EDEDF0;--ink-2:rgba(255,255,255,.86);--dim:rgba(255,255,255,.64);--faint:rgba(255,255,255,.4);--line:rgba(255,255,255,.18);
  --g-bg:linear-gradient(140deg,rgba(255,255,255,.2),rgba(255,255,255,.07));--g-edge:rgba(255,255,255,.34);--g-rim:rgba(255,255,255,.14);
  --g-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 34px -8px rgba(8,8,11,.4)}
:root[data-theme="night"] .date,:root[data-theme="night"] .shd span{color:var(--dim)}
.glass{-webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%)}
.glass::before{background:radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.55),transparent 50%)}
:root[data-theme="night"] .glass::before{background:radial-gradient(120% 70% at 12% 0%,rgba(255,255,255,.2),transparent 50%)}
.dcard.front{background:linear-gradient(140deg,rgba(255,255,255,.62),rgba(255,255,255,.3))}
:root[data-theme="night"] .dcard.front{background:linear-gradient(140deg,rgba(255,255,255,.24),rgba(255,255,255,.1))}
.dcard .tint{opacity:.45}
/* every control is glass */
.btn.gold,.btn.ink,.dcta i,.dtop .new{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.58));color:var(--ink);border:1px solid #fff;font-weight:600;
  box-shadow:inset 0 1px 0 #fff,0 12px 26px -12px rgba(29,31,46,.38);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
:root[data-theme="night"] .btn.gold,:root[data-theme="night"] .btn.ink,:root[data-theme="night"] .dcta i,:root[data-theme="night"] .dtop .new{background:rgba(255,255,255,.22);color:#EDEDF0;border:1px solid rgba(255,255,255,.46);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -10px rgba(8,8,11,.55)}
.cacts .btn.plain,.peb,.scale5 button,.stepper button,.inp,.chip,.dstats div,.goal{background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 6px 16px -12px rgba(29,31,46,.3)}
:root[data-theme="night"] .cacts .btn.plain,:root[data-theme="night"] .peb,:root[data-theme="night"] .scale5 button,:root[data-theme="night"] .stepper button,:root[data-theme="night"] .inp,:root[data-theme="night"] .chip,:root[data-theme="night"] .dstats div,:root[data-theme="night"] .goal{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);color:#EDEDF0}
.peb.on,.scale5 button.on{background:var(--ink);color:var(--bg);border-color:transparent}
:root[data-theme="night"] .peb.on,:root[data-theme="night"] .scale5 button.on{background:rgba(255,255,255,.9);color:#17171A}
/* doors and icons: glass, with Body and Mind showing only as a glow */
.door{background:linear-gradient(150deg,rgba(255,255,255,.6),rgba(255,255,255,.22))!important;color:var(--ink);border:1px solid rgba(255,255,255,.95);-webkit-backdrop-filter:blur(26px) saturate(165%);backdrop-filter:blur(26px) saturate(165%);box-shadow:inset 0 1px 0 #fff,0 14px 36px -14px rgba(29,31,46,.25)}
:root[data-theme="night"] .door{background:linear-gradient(150deg,rgba(255,255,255,.24),rgba(255,255,255,.08))!important;color:#EDEDF0;border-color:rgba(255,255,255,.34);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 34px -8px rgba(8,8,11,.4)}
.door::after{background:radial-gradient(90% 70% at 0% 0%,var(--dglow),transparent 70%)}
.door.body{--dglow:rgba(232,201,138,.7)}.door.mind{--dglow:rgba(154,162,234,.7)}
.door svg{stroke:var(--ink)}.door .dic,.door .lkb{background:rgba(255,255,255,.55)}
:root[data-theme="night"] .door .dic,:root[data-theme="night"] .door .lkb{background:rgba(255,255,255,.16)}
.door.locked .dt,.door.locked .ds{opacity:.6}
.aura,.ci .gi,.shd .ic,.attcard .shd .ic,.lockpane .lk,.done .ck{background:linear-gradient(160deg,rgba(255,255,255,.85),rgba(255,255,255,.45))!important;color:var(--ink)!important;border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(29,31,46,.3)!important}
:root[data-theme="night"] .aura,:root[data-theme="night"] .ci .gi,:root[data-theme="night"] .shd .ic,:root[data-theme="night"] .lockpane .lk,:root[data-theme="night"] .done .ck{background:rgba(255,255,255,.16)!important;color:#EDEDF0!important;border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)!important}
.aura.d,.ci .gi:not(.mind):not(.both),.sk[data-k="sleep"] .shd .ic,.sk[data-k="nutrition"] .shd .ic,.sk[data-k="movement"] .shd .ic,.sk[data-k="weight"] .shd .ic,.sk[data-k="photo"] .shd .ic,.sk[data-k="body"] .shd .ic{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(232,201,138,.35),0 0 22px 2px rgba(232,201,138,.6)!important}
.aura.h,.ci .gi.mind,.sk[data-k="mind"] .shd .ic,.sk[data-k="moment"] .shd .ic{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(154,162,234,.35),0 0 22px 2px rgba(154,162,234,.65)!important}
.aura.d{color:#6B5222!important}.aura.h img{filter:brightness(0) saturate(100%) invert(30%) sepia(30%) hue-rotate(200deg) saturate(400%);opacity:.85}
:root[data-theme="night"] .aura.d{color:#EDEDF0!important}:root[data-theme="night"] .aura.h img{filter:brightness(0) invert(1)}
.done .ck svg,.lockpane .lk svg{stroke:var(--ink)}
:root[data-theme="night"] .dial .knob2{fill:#fff;filter:drop-shadow(0 0 10px rgba(255,255,255,.8))}
.ind{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.6));border:1px solid #fff}
:root[data-theme="night"] .ind{background:rgba(255,255,255,.24);border:1px solid rgba(255,255,255,.4)}
.sheet.glass{background:linear-gradient(160deg,rgba(255,255,255,.66),rgba(255,255,255,.46));-webkit-backdrop-filter:blur(32px) saturate(160%);backdrop-filter:blur(32px) saturate(160%)}
:root[data-theme="night"] .sheet.glass{background:linear-gradient(160deg,rgba(34,34,37,.55),rgba(25,25,28,.45))}
.over{background:rgba(29,31,46,.08)}
.badge,.pill{background:rgba(255,255,255,.5);border:1px solid #fff;color:var(--ink-2)}
:root[data-theme="night"] .badge,:root[data-theme="night"] .pill{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24);color:#EDEDF0}
.lg-l{display:block}
/* both coaches, always available */
.pres{gap:8px}
.pchip{flex:1;min-width:0;padding:6px 12px 6px 6px;gap:9px;text-align:left;border-radius:999px;color:var(--ink)}
.pchip .pt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.pchip .pt b{font-size:13.5px;font-weight:600}
.pchip .pt span{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2)}
.pchip .ldot{width:6px;height:6px;background:#5FAF6E;box-shadow:0 0 0 2.5px rgba(95,175,110,.22);animation:live 2.4s var(--ease) infinite}
@keyframes live{50%{box-shadow:0 0 0 5px rgba(95,175,110,0)}}
.pchip .pk{margin-left:auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(29,31,46,.07)}
:root[data-theme="night"] .pchip .pk{background:rgba(255,255,255,.12)}
.pchip .pk svg{width:11px;height:11px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pchip:active{transform:scale(.97)}
@media (prefers-reduced-motion:reduce){.pchip .ldot{animation:none}}

/* ===== palette: Mind is fuchsia, Body is blue, gold means press ===== */
:root{--mind:#C9478F;--mind-soft:#E39BC4;--body:#4C63E0;--body-soft:#9FAEF4;--press:#E2C285;--gold-ink:#3A4FC0;--glow:rgba(76,99,224,.45)}
:root[data-theme="night"]{--gold-ink:#AEBBFF}
/* the two orbs: Mind leads, top left */
.om{left:-34vmax;top:-30vmax;right:auto;bottom:auto;animation:ob 15s cubic-bezier(.45,.05,.55,.95) infinite;background:radial-gradient(circle,#D45A9C 0%,rgba(212,90,156,.82) 22%,rgba(201,71,143,.32) 45%,transparent 66%)}
.ob{right:-34vmax;bottom:-30vmax;left:auto;top:auto;animation:om 17s cubic-bezier(.45,.05,.55,.95) infinite;background:radial-gradient(circle,#5E74EC 0%,rgba(94,116,236,.82) 22%,rgba(76,99,224,.32) 45%,transparent 66%)}
:root[data-theme="night"] .om{background:radial-gradient(circle,#D8559C 0%,rgba(216,85,156,.72) 22%,rgba(201,71,143,.24) 45%,transparent 66%)}
:root[data-theme="night"] .ob{background:radial-gradient(circle,#5F78FF 0%,rgba(95,120,255,.76) 22%,rgba(76,99,224,.26) 45%,transparent 66%)}
/* glows */
.aura.d,.ci .gi:not(.mind):not(.both),.sk[data-k="sleep"] .shd .ic,.sk[data-k="nutrition"] .shd .ic,.sk[data-k="movement"] .shd .ic,.sk[data-k="weight"] .shd .ic,.sk[data-k="photo"] .shd .ic,.sk[data-k="body"] .shd .ic{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(76,99,224,.3),0 0 22px 2px rgba(76,99,224,.5)!important}
.aura.h,.ci .gi.mind,.sk[data-k="mind"] .shd .ic,.sk[data-k="moment"] .shd .ic{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(201,71,143,.3),0 0 22px 2px rgba(201,71,143,.5)!important}
.ci .gi:not(.mind):not(.both){color:#2C3C9E!important}.ci .gi.mind{color:#7E2457!important}
:root[data-theme="night"] .ci .gi:not(.mind):not(.both),:root[data-theme="night"] .ci .gi.mind{color:#EDEDF0!important}
.aura.d{color:#2C3C9E!important}:root[data-theme="night"] .aura.d{color:#EDEDF0!important}
.aura.h img{filter:brightness(0) saturate(100%) invert(22%) sepia(60%) saturate(2400%) hue-rotate(300deg) brightness(90%);opacity:.9}
:root[data-theme="night"] .aura.h img{filter:brightness(0) invert(1)}
.door.body{--dglow:rgba(94,116,236,.62)}.door.mind{--dglow:rgba(212,90,156,.6)}
.dcard.k-daniel .tint{background:radial-gradient(90% 70% at 100% 0%,rgba(76,99,224,.45),transparent 62%)}
.dcard.k-harmonee .tint{background:radial-gradient(90% 70% at 100% 0%,rgba(201,71,143,.45),transparent 62%)}
/* inside the Body card: blues */
.segbar i.on{background:linear-gradient(180deg,#9FAEF4,#4C63E0)}
.segbar i.edge{box-shadow:0 0 14px 3px rgba(76,99,224,.55)}
.bars i{background:linear-gradient(180deg,#5E74EC,rgba(76,99,224,.4))}
.bars i.short{background:linear-gradient(180deg,rgba(76,99,224,.42),rgba(76,99,224,.14))}
.meter .dots i.on{background:#4C63E0}
.drops .f path{fill:#6E82EC}
.pl i{background:#4C63E0}.cx[data-k="harmonee"] .pl i{background:#C9478F}
.medal{background:conic-gradient(from 200deg,#DCE2FF,#8C9DF2,#4C63E0,#DCE2FF,#A9B6F6,#DCE2FF);box-shadow:0 18px 40px -16px rgba(76,99,224,.8),inset 0 2px 0 rgba(255,255,255,.8)}
.medal::before{background:radial-gradient(circle at 35% 25%,#FFFFFF,#C9D1FA 70%);box-shadow:inset 0 -6px 14px rgba(44,60,158,.22)}
.medal span{color:#22327F}
/* inside the Mind card: fuchsia */
.breathe .r1{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(201,71,143,.62) 72%);box-shadow:0 20px 50px -18px rgba(142,47,102,.6)}
.breathe .r2{border-color:rgba(201,71,143,.45)}.breathe b{color:#5E1A42}
/* sheets */
.slider{accent-color:#4C63E0}.sk[data-k="mind"] .slider{accent-color:#C9478F}
.sk[data-k="mind"] .sval span{color:#A3346F}:root[data-theme="night"] .sk[data-k="mind"] .sval span{color:#F0A9CF}
/* gold means press: every primary button, ink text always */
.btn.gold,.btn.ink,.dcta i{background:linear-gradient(180deg,#F3E2BD,#E2C285 55%,#CFA65E)!important;color:#2B2410!important;border:1px solid rgba(255,255,255,.75)!important;font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 24px -12px rgba(190,150,80,.9)!important}
:root[data-theme="night"] .btn.gold,:root[data-theme="night"] .btn.ink,:root[data-theme="night"] .dcta i{border-color:rgba(255,255,255,.35)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 12px 26px -10px rgba(0,0,0,.55)!important}
.dtop .new{background:rgba(255,255,255,.62)!important;color:var(--ink)!important;border:1px solid #fff!important;box-shadow:none!important;font-weight:600}
:root[data-theme="night"] .dtop .new{background:rgba(255,255,255,.16)!important;color:#EDEDF0!important;border-color:rgba(255,255,255,.3)!important}

/* ===== together: fuchsia and blue meet in violet ===== */
:root{--both:#8A55B8}
.sky .pair{position:absolute;left:50%;top:44%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;animation:wander 23s ease-in-out infinite alternate}
.sky .spin{position:absolute;inset:0;animation:orbit 44s linear infinite}
.sky .spin .om,.sky .spin .ob{position:absolute!important;width:62vmax!important;height:62vmax!important;top:29%!important;bottom:auto!important;right:auto!important;filter:blur(30px)}
.sky .spin .om{left:11%!important;animation:breatheL 9s ease-in-out infinite alternate!important}
.sky .spin .ob{left:47%!important;animation:breatheR 9s ease-in-out infinite alternate!important}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes wander{0%{transform:translate(-9vw,-9vh)}100%{transform:translate(9vw,11vh)}}
@keyframes breatheL{0%{transform:translateX(-4vmax)}100%{transform:translateX(7vmax)}}
@keyframes breatheR{0%{transform:translateX(4vmax)}100%{transform:translateX(-7vmax)}}
.sky .spin .ob{mix-blend-mode:multiply}
:root[data-theme="night"] .sky .spin .ob{mix-blend-mode:screen}
.sky.meet .spin .om{animation:meetL 2.6s cubic-bezier(.2,.8,.2,1)!important}
.sky.meet .spin .ob{animation:meetR 2.6s cubic-bezier(.2,.8,.2,1)!important}
@keyframes meetL{45%{transform:translateX(14vmax) scale(1.12)}}
@keyframes meetR{45%{transform:translateX(-14vmax) scale(1.12)}}
/* attunement wears the shared color */
.dial line.on{stroke:var(--tc)!important;opacity:1}
.dial .knob2{fill:var(--both)!important;filter:drop-shadow(0 0 8px rgba(138,85,184,.6))!important}
.attcard .shd .ic{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(138,85,184,.3),0 0 22px 2px rgba(138,85,184,.5)!important}
.withyou{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--ink-2);margin-top:6px}
.withyou::before{content:"";width:14px;height:8px;border-radius:999px;background:linear-gradient(90deg,#C9478F,#8A55B8,#4C63E0)}
/* the shared card */
.duo{position:relative;display:inline-block;flex:0 0 auto}
.duo>.aura{position:absolute;top:0}.duo>.aura:first-child{left:0;z-index:2}.duo>.aura:last-child{right:0}
.dcard.k-together .tint{background:radial-gradient(80% 70% at 100% 0%,rgba(201,71,143,.38),transparent 62%),radial-gradient(80% 70% at 0% 100%,rgba(76,99,224,.36),transparent 64%)}
.dcard.back2{transform:translateY(-56px) scale(.82);opacity:.7;z-index:-1}
.dcard.back2>*:not(.tint):not(.peek){opacity:0}
.dcard.back2 .peek{display:block;position:absolute;top:5px;left:0;right:0;text-align:center;font-size:12px;font-weight:500;color:var(--ink-2);z-index:2}
.cx[data-k="together"] .pl i{background:linear-gradient(90deg,#C9478F,#4C63E0)}
.bars.pairs{gap:3px}
.bars.pairs i.m{background:linear-gradient(180deg,#D45A9C,rgba(201,71,143,.38))}
.bars.pairs i.b{background:linear-gradient(180deg,#5E74EC,rgba(76,99,224,.38))}
.bars.pairs i.b.none{background:none;border:1.5px dashed var(--line)}
.bars.pairs i.m:not(:first-child){margin-left:9px}
.dq{display:flex;gap:12px;align-items:flex-start;margin-top:18px}
.dq p{font-family:"Fraunces",serif;font-weight:300;font-size:17.5px;line-height:1.45}
.dq small{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:12px;color:var(--dim);margin-top:5px}
.shared{margin-top:22px;padding:16px;border-radius:22px;background:linear-gradient(120deg,rgba(201,71,143,.14),rgba(138,85,184,.14),rgba(76,99,224,.14));border:1px solid rgba(255,255,255,.7)}
:root[data-theme="night"] .shared{border-color:rgba(255,255,255,.18)}
.shared span{display:block;font-size:12.5px;color:var(--dim)}.shared b{display:block;font-size:17px;font-weight:500;margin-top:4px;line-height:1.4}
.two2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx .btn.plain{background:rgba(255,255,255,.5);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 6px 16px -12px rgba(29,31,46,.3)}
:root[data-theme="night"] .cx .btn.plain{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#EDEDF0}
@media (prefers-reduced-motion:reduce){.sky .pair,.sky .spin,.sky .spin .om,.sky .spin .ob{animation:none!important}}

.dquote{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcard.back2{transform:translateY(-62px) scale(.8)}
.sec h2{min-width:0}
:root[data-theme="night"] .dcard.front{background:linear-gradient(140deg,rgba(43,43,46,.86),rgba(30,30,33,.8))}

/* ===== navigation: gold pin home, and Mind, the bubble, Body ===== */
.wrap{padding-top:78px}
.homepin{position:fixed;z-index:25;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;transition:box-shadow .35s var(--ease),transform .2s}
.homepin img{height:28px;width:auto;position:relative;z-index:1}
.homepin:active{transform:translateX(-50%) scale(.92)}
.homepin.on{box-shadow:inset 0 1px 0 #fff,0 0 0 2px rgba(226,194,133,.95),0 10px 24px -8px rgba(190,150,80,.85)!important}
:root[data-theme="night"] .homepin.on{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 2px rgba(226,194,133,.9),0 10px 24px -8px rgba(0,0,0,.6)!important}
.ind{transition:transform .55s cubic-bezier(.34,1.45,.64,1),width .3s var(--ease),opacity .25s}
.nav button.nl{width:72px;height:56px}
.nav button.nl svg{width:26px;height:26px}
.nav button.bub{width:86px}.nav button.bub svg{width:30px;height:30px;stroke-width:1.5}
.nav button.mi{color:#B4528A}.nav button.bo{color:#5568D8}.nav button.bub{color:#7A55AE}
.nav button.mi.on{color:#A3346F}.nav button.bo.on{color:#2C3C9E}.nav button.bub.on{color:#4E2F86}
.nav button.mi.on svg{filter:drop-shadow(0 0 6px rgba(201,71,143,.55))}.nav button.bo.on svg{filter:drop-shadow(0 0 6px rgba(76,99,224,.55))}.nav button.bub.on svg{filter:drop-shadow(0 0 6px rgba(138,85,184,.5))}
:root[data-theme="night"] .nav button.mi{color:#E7A0C6}:root[data-theme="night"] .nav button.bo{color:#A9B6FF}:root[data-theme="night"] .nav button.bub{color:#C7A9EE}
:root[data-theme="night"] .nav button.mi.on{color:#FFC4E2}:root[data-theme="night"] .nav button.bo.on{color:#D2DAFF}:root[data-theme="night"] .nav button.bub.on{color:#E6D6FF}
.nav button.nl.locked{color:var(--faint)!important}.nav button.nl.locked svg{filter:none!important}
.nav button .lk{right:7px;top:5px;width:16px;height:16px}
@media(max-width:350px){.nav button.nl{width:62px}.nav button.bub{width:74px}}

/* ===== nav: Mind is the ring, Body the sphere, together the sphere held in the ring ===== */
.nav button.nl svg.nvi{width:31px;height:31px;opacity:.55;transition:opacity .3s,transform .3s,filter .3s;filter:saturate(.75)}
.nav button.bub svg.nvi{width:36px;height:36px}
.nav button.nl.on svg.nvi{opacity:1;filter:saturate(1)}
.nav button.mi.on svg.nvi{filter:drop-shadow(0 0 6px rgba(201,71,143,.6))}
.nav button.bo.on svg.nvi{filter:drop-shadow(0 0 7px rgba(76,99,224,.6))}
.nav button.bub.on svg.nvi{filter:drop-shadow(0 0 7px rgba(138,85,184,.6))}
:root[data-theme="night"] .nav button.nl svg.nvi{opacity:.7}
:root[data-theme="night"] .nav button.nl.on svg.nvi{opacity:1}
.nav button.nl.locked svg.nvi{filter:grayscale(1)!important;opacity:.35!important}

/* ===== glass nav icons, day and night, and finger sliding ===== */
#nav{touch-action:none}
.nav .nvi{display:block;width:36px;height:36px;object-fit:contain;opacity:.6;filter:saturate(.8);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1),filter .25s;pointer-events:none;-webkit-user-drag:none}
.nav button.bub .nvi{width:44px;height:44px}
.nav .nvi.nv{display:none}
:root[data-theme="night"] .nav .nvi.dv{display:none}:root[data-theme="night"] .nav .nvi.nv{display:block}
.nav button.on .nvi,.nav button.hov .nvi{opacity:1;filter:saturate(1)}
.nav button.hov .nvi{transform:scale(1.14)}
.nav button.on .nvi{animation:pop .5s cubic-bezier(.34,1.56,.64,1)}
.nav button.mi.on .nvi{filter:drop-shadow(0 0 7px rgba(201,71,143,.55))}
.nav button.bo.on .nvi{filter:drop-shadow(0 0 7px rgba(76,99,224,.55))}
.nav button.bub.on .nvi{filter:drop-shadow(0 0 8px rgba(138,85,184,.55))}
.nav.scrub .ind{box-shadow:inset 0 1px 0 #fff,0 12px 26px -10px rgba(29,31,46,.45)}
.nav button.nl.locked .nvi{filter:grayscale(1)!important;opacity:.35!important}
@media (prefers-reduced-motion:reduce){.nav .nvi{transition:none}.nav button.on .nvi{animation:none}}

.nav button.bo .nvi{width:39px;height:39px}
.nav.glass{background:linear-gradient(140deg,rgba(255,255,255,.82),rgba(255,255,255,.56))}
:root[data-theme="night"] .nav.glass{background:linear-gradient(140deg,rgba(39,39,42,.78),rgba(26,26,29,.7))}
:root[data-theme="night"] .nav button:not(.on):not(.locked) .nvi{opacity:.8}

/* ===== liquid glass for the gold pin and the bar ===== */
.liquid{background:linear-gradient(160deg,rgba(255,255,255,.36),rgba(255,255,255,.1))!important;border:1px solid rgba(255,255,255,.8)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.4),inset 0 0 22px rgba(255,255,255,.2),0 12px 32px -12px rgba(29,31,46,.3),0 2px 6px rgba(29,31,46,.07)!important;
  backdrop-filter:blur(8px) saturate(190%) brightness(1.05);-webkit-backdrop-filter:blur(8px) saturate(190%) brightness(1.05)}
@supports (backdrop-filter:url(#lensNav)){
  .nav.liquid{backdrop-filter:url(#lensNav) blur(3px) saturate(190%) brightness(1.05);-webkit-backdrop-filter:blur(8px) saturate(190%) brightness(1.05)}
  .homepin.liquid{backdrop-filter:url(#lensPin) blur(1px) saturate(190%) brightness(1.05);-webkit-backdrop-filter:blur(8px) saturate(190%) brightness(1.05)}
  .glass.refract{-webkit-backdrop-filter:blur(16px) saturate(190%)}
}
.liquid::before{background:radial-gradient(110% 70% at 28% -10%,rgba(255,255,255,.7),rgba(255,255,255,0) 52%),radial-gradient(60% 40% at 80% 115%,rgba(255,255,255,.35),transparent 70%)!important}
.liquid::after{background:linear-gradient(135deg,rgba(255,255,255,1),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.7))!important}
.homepin.liquid.on{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.95),inset 0 0 18px rgba(255,255,255,.25),0 0 0 2px rgba(226,194,133,.95),0 10px 24px -8px rgba(190,150,80,.85)!important}
:root[data-theme="night"] .liquid{background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04))!important;border-color:rgba(255,255,255,.32)!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),inset 0 0 22px rgba(255,255,255,.06),0 12px 32px -10px rgba(0,0,0,.5)!important}
:root[data-theme="night"] .liquid::before{background:radial-gradient(110% 70% at 28% -10%,rgba(255,255,255,.28),rgba(255,255,255,0) 52%)!important}
:root[data-theme="night"] .liquid::after{background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.3))!important}
:root[data-theme="night"] .homepin.liquid.on{box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 0 0 2px rgba(226,194,133,.9),0 10px 24px -8px rgba(0,0,0,.6)!important}
.nav.liquid .ind{background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.38))!important;border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(29,31,46,.35)!important}
:root[data-theme="night"] .nav.liquid .ind{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.35)}

:root[data-theme="night"] .liquid{background:linear-gradient(160deg,rgba(48,48,51,.5),rgba(26,26,29,.42))!important}
@supports (backdrop-filter:url(#lensNav)){:root[data-theme="night"] .nav.liquid{backdrop-filter:url(#lensNav) blur(7px) saturate(170%) brightness(.95)}}
:root[data-theme="night"] .nav.liquid{-webkit-backdrop-filter:blur(12px) saturate(170%)}

/* ===== pop-ups track the visible screen ===== */
.over{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%);overscroll-behavior:contain}
.sheet{max-height:calc(var(--vvh,100vh) - 14px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.write,.cx{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100%)}
body.lock .app{overflow:hidden}
/* ===== the 24 hour conversation ===== */
.thread{border-radius:26px;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.tb{display:flex;gap:9px;align-items:flex-end;padding:8px 0}
.tb.me{justify-content:flex-end}
.tbb{max-width:80%;padding:10px 13px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.62);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff}
.tb.me .tbb{border-radius:18px 18px 6px 18px;background:rgba(29,31,46,.07);border-color:transparent;box-shadow:none}
:root[data-theme="night"] .tbb{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
:root[data-theme="night"] .tb.me .tbb{background:rgba(255,255,255,.2)}
.tbb b{display:block;font-size:11.5px;font-weight:600;color:var(--ink-2)}
.tbb p{font-size:14.5px;line-height:1.42;margin-top:3px}
.tbb small{display:block;font-size:11px;color:var(--dim);margin-top:5px}
.tempty{font-size:13.5px;color:var(--dim);padding:14px 4px;line-height:1.5}

/* ===== settings ===== */
.set{border-radius:28px;padding:4px 16px;margin-bottom:12px}
.srow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);color:inherit;text-decoration:none}
.set>.srow:first-child{border-top:0}
.sl{flex:1;min-width:0}.sl b{display:block;font-size:15px;font-weight:500}.sl span{display:block;font-size:12.5px;color:var(--dim);margin-top:2px;line-height:1.45}
.sseg{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--line);flex:0 0 auto}
.sseg button{padding:7px 11px;border-radius:999px;font-size:12.5px;font-weight:500;color:var(--ink-2)}
.sseg button.on{background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 3px 10px -4px rgba(29,31,46,.35)}
:root[data-theme="night"] .sseg button.on{background:rgba(255,255,255,.22);color:#EDEDF0}
.sw{position:relative;width:50px;height:30px;border-radius:999px;background:var(--line);flex:0 0 auto;transition:background .25s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.34,1.45,.64,1)}
.sw.on{background:var(--ink)}.sw.on::after{transform:translateX(20px)}
:root[data-theme="night"] .sw.on{background:rgba(255,255,255,.85)}:root[data-theme="night"] .sw.on::after{background:#17171A}
.sbtn{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:500;background:rgba(255,255,255,.6);border:1px solid #fff;color:var(--ink);text-decoration:none;flex:0 0 auto;text-align:center}
:root[data-theme="night"] .sbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#EDEDF0}
.sbtn.danger{color:#B23A3A}:root[data-theme="night"] .sbtn.danger{color:#FFB4B4}
.sbtn:disabled{opacity:.6}
.sacts{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 14px}.sacts .sbtn{flex:1}
.lnk svg{width:16px;height:16px;stroke:var(--dim);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.sn{margin:0 0 12px}
.crisis{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(201,71,143,.18),0 14px 36px -14px rgba(29,31,46,.22)!important}
/* large text and reduced motion */
.lgtext .wrap,.lgtext .sheet,.lgtext .cx .pn,.lgtext .write .wc{zoom:1.12}
.rm *,.rm *::before,.rm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
.rm .sky .pair,.rm .sky .spin,.rm .sky .spin .om,.rm .sky .spin .ob{animation:none!important}

/* ===== front door ===== */
.gh{font-family:"Hanken Grotesk",sans-serif;font-weight:400;font-size:30px;letter-spacing:-.03em;margin:4px 0 6px}
#code.bad{box-shadow:0 0 0 2px rgba(178,58,58,.5)!important}
.gerr{min-height:18px;font-size:12.5px;color:#B23A3A;margin:6px 2px 2px;line-height:1.4}
:root[data-theme="night"] .gerr{color:#FFB4B4}
.glink{display:block;margin:12px auto 0;font-size:13.5px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.ghelp{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:10px;padding:12px 14px;border-radius:16px;background:var(--line);text-align:left}
.ghelp a{color:inherit}
.gdiv{display:flex;align-items:center;gap:10px;margin:20px 0 12px;font-size:12.5px;color:var(--dim)}
.gdiv::before,.gdiv::after{content:"";flex:1;height:1px;background:var(--line)}
.gbtn{width:100%;background:rgba(255,255,255,.62);border:1px solid #fff;color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 8px 20px -12px rgba(29,31,46,.35)}
:root[data-theme="night"] .gbtn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26);color:#EDEDF0}
.samples{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:14px}
.samples span{width:100%;text-align:center;font-size:11px;color:var(--dim);letter-spacing:.04em}
.gfoot{display:flex;justify-content:center;gap:22px;margin-top:18px;font-size:12.5px}
.gfoot a{color:var(--dim);text-decoration:none}
/* ===== memberships ===== */
.plans{position:fixed;left:0;right:0;top:var(--vvt,0px);height:var(--vvh,100%);z-index:80;overflow-y:auto;overscroll-behavior:contain;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(28px) saturate(150%);backdrop-filter:blur(28px) saturate(150%);opacity:0;transform:translateY(24px);transition:opacity .32s cubic-bezier(.2,.8,.2,1),transform .42s cubic-bezier(.2,.8,.2,1)}
.plans.on{opacity:1;transform:none}
:root[data-theme="night"] .plans{background:rgba(19,19,22,.62)}
.plwrap{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px calc(env(safe-area-inset-bottom,0px) + 40px)}
.plhd{display:flex;justify-content:flex-end}
.plx{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.7);border:1px solid #fff}
:root[data-theme="night"] .plx{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25)}
.plx svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round}
.plk{font-size:12.5px;color:var(--dim);margin-top:6px}
.plans h2{font-weight:400;font-size:28px;letter-spacing:-.03em;line-height:1.15;margin:4px 0 8px}
.pli{font-size:15px;line-height:1.5;color:var(--ink-2);margin-bottom:18px}
.plan{position:relative;border-radius:28px;padding:20px 18px 18px;margin-bottom:14px}
.plan .pt{display:flex;align-items:center;gap:12px}
.pdot{width:30px;height:30px;border-radius:50%;flex:0 0 auto}
.plan.mind .pdot{background:radial-gradient(circle at 35% 30%,#fff,#C9478F 78%);box-shadow:0 0 18px 2px rgba(201,71,143,.5)}
.plan.body .pdot{background:radial-gradient(circle at 35% 30%,#fff,#4C63E0 78%);box-shadow:0 0 18px 2px rgba(76,99,224,.5)}
.plan.whole .pdot{background:radial-gradient(circle at 35% 30%,#fff,#8A55B8 78%);box-shadow:0 0 18px 2px rgba(138,85,184,.5)}
.plan.whole{box-shadow:inset 0 1px 0 #fff,0 0 0 1.5px rgba(138,85,184,.35),0 16px 40px -16px rgba(138,85,184,.5)!important}
.plan .pt b{display:block;font-size:19px;font-weight:500}.plan .pt em{font-style:normal;font-size:13px;color:var(--dim)}
.ptag{position:absolute;top:16px;right:16px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(138,85,184,.12);color:#6E3F9C}
:root[data-theme="night"] .ptag{background:rgba(255,255,255,.14);color:#E6D6FF}
.pp{display:flex;align-items:baseline;gap:6px;margin:14px 0 10px}.pp b{font-weight:300;font-size:36px;letter-spacing:-.03em}.pp span{font-size:13.5px;color:var(--dim)}
.plan ul{list-style:none;margin:0 0 16px;padding:0}
.plan li{position:relative;padding:7px 0 7px 22px;font-size:14.5px;line-height:1.45;border-top:1px solid var(--line)}
.plan li:first-child{border-top:0}
.plan li::before{content:"";position:absolute;left:2px;top:13px;width:8px;height:8px;border-radius:50%;background:var(--ink-2);opacity:.5}
.plan .btn{display:block;width:100%;text-align:center;text-decoration:none}
.plnote{font-size:13px;color:var(--dim);line-height:1.5;text-align:center;margin-top:6px}
@media (prefers-reduced-motion:reduce){.plans{transition:none}}

/* ===== App Only: locked calls and rewards ===== */
.btn.clock{background:rgba(255,255,255,.45)!important;color:var(--ink-2)!important;border:1px dashed rgba(29,31,46,.25)!important;box-shadow:none!important}
:root[data-theme="night"] .btn.clock{background:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.8)!important;border-color:rgba(255,255,255,.3)!important}
.btn.clock svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rewards{border-radius:26px;padding:16px 16px 14px;margin-top:14px}
.rwtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rwk{font-size:12px;color:var(--dim)}.rwtop b{font-weight:400;font-size:24px;letter-spacing:-.02em}
.rwbar{height:8px;border-radius:999px;background:var(--line);overflow:hidden;margin:12px 0 8px}
.rwbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#C9478F,#8A55B8,#4C63E0);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.rewards small{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.btn.sm{padding:9px 14px;font-size:13px}
.rwbal{border-radius:24px;padding:16px 18px;margin-bottom:6px}.rwbal span{font-size:12.5px;color:var(--dim)}.rwbal b{display:block;font-weight:300;font-size:40px;letter-spacing:-.03em}.rwbal small{font-size:12.5px;color:var(--ink-2)}
.rwh{font-size:13px;font-weight:500;margin:18px 2px 8px}
.rwopt{display:flex;align-items:center;gap:12px;border-radius:22px;padding:12px 14px;margin-bottom:8px}
.rwn{flex:1;min-width:0}.rwn b{display:block;font-size:14.5px;font-weight:500}.rwn span{font-size:12.5px;color:var(--dim)}
.rwopt .btn:disabled{opacity:.7}
.rwearn{border-radius:22px;padding:4px 16px}.rwearn div{display:flex;justify-content:space-between;padding:11px 0;border-top:1px solid var(--line);font-size:14px}.rwearn div:first-child{border-top:0}.rwearn b{font-weight:500}
.plan.appo .pdot{background:radial-gradient(circle at 35% 30%,#fff,#B9B6C9 80%);box-shadow:0 0 16px 1px rgba(29,31,46,.18)}
.pp .pps{font-size:20px;font-weight:400;letter-spacing:-.01em}
.rwsoon{text-align:left}.rwsoonh{font-size:19px!important;font-weight:500!important;letter-spacing:-.01em}
.orbs{display:flex;justify-content:space-between;align-items:flex-end;height:90px;margin:18px 0 6px}.orbw{display:flex;flex-direction:column;align-items:center;gap:8px}.orbw span{font-size:11px;color:var(--dim)}.orb7{border-radius:50%;box-shadow:0 8px 18px -8px rgba(29,31,46,.4)}
:root{--gold:#E2C285;--gold-ink:#3A4FC0;--indigo:#1D1F2E;--lav:#C9478F;--amber:#6E82EC}

.psave{font-size:13px;color:#6E3F9C;margin:-4px 0 12px}:root[data-theme="night"] .psave{color:#E6D6FF}
.popts{display:grid;gap:8px}
.popt{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid #fff;color:var(--ink);text-decoration:none;box-shadow:inset 0 1px 0 #fff}
:root[data-theme="night"] .popt{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.popt .on{flex:1;font-size:14.5px;font-weight:500}.popt b{font-weight:400;font-size:20px;letter-spacing:-.02em}.popt small{font-size:12px;color:var(--dim)}
.odot{width:14px;height:14px;border-radius:50%;flex:0 0 auto}.odot.mind{background:#C9478F}.odot.body{background:#4C63E0}.odot.both{background:linear-gradient(135deg,#C9478F,#4C63E0)}
.popt:active{transform:scale(.98)}

/* check-in windows hold still: the rim sits inside the edge, nothing slides sideways or bounces */
.sheet.glass::after{inset:0!important}
.sheet{overflow-x:hidden!important;overscroll-behavior:none!important;touch-action:pan-y}
.sheet .dial,.sheet .slider,.sheet input[type=range]{touch-action:none}
.plans{overflow-x:hidden;overscroll-behavior:none}