html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: one phone-width app column under a sticky logo bar; soft paper ground, pastel cards, dark pill actions — matching the original Aromiq CI. Light only, by design. */
:root{
  color-scheme:light;
  --paper:#F7F4EF; --cream:#F2E9E2; --card:#FFFEFA; --card-line:#EDE6E0; --ink:#252126; --muted:#76706F; --line:rgba(42,39,39,.12);
  --lav:#C4B5D5; --pink:#E5B0BD; --mint:#A9CFC7; --sand:#D3C5AA; --plum:#3B2F42; --dark:#29272A;
  --chip:#FBF8F5; --chip-on:#F1EDF3; --chip-on-line:#8F7E9F;
  --shadow:0 14px 50px rgba(56,42,54,.07);
  --font:"Inter", Arial, "Helvetica Neue", sans-serif;
  --radius:26px;
}
html,body{height:100%}
body{background:var(--paper); color:var(--ink); font-family:var(--font); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
*{box-sizing:border-box}
button{font:inherit; color:inherit; cursor:pointer}
button:disabled{opacity:.43; cursor:not-allowed}
button:focus-visible, textarea:focus-visible, summary:focus-visible{outline:3px solid #BA98D6; outline-offset:3px}
::selection{background:#DBD0DF}
h1,h2,h3{font-weight:650; line-height:1.05; letter-spacing:-.052em; text-wrap:balance; margin:0}
h1{font-size:38px} h2{font-size:30px} h3{font-size:18px; letter-spacing:-.03em}
p{margin:0}
.app{max-width:440px; margin:0 auto; min-height:100%; padding-block:0 128px; display:flex; flex-direction:column; gap:18px}
.header{position:sticky; top:env(safe-area-inset-top,0px); z-index:6; background:rgba(247,244,239,.9); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  display:flex; justify-content:space-between; align-items:center; padding-block:16px 12px; margin:0 -4px; padding-inline:4px}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper)}
.header img{display:block; width:118px; height:auto}
.header button{background:none; border:0; padding:0}
.help-btn{border:1px solid #E8DFDC!important; background:#FFFFFFA8!important; border-radius:100px; padding:8px 14px!important; font-size:12px; font-weight:610}
.eyebrow{text-transform:uppercase; font-size:10px; font-weight:780; letter-spacing:.2em; color:#7D706D}
.muted{color:var(--muted)}
.small{font-size:13px}
.fine{font-size:12px; color:#858080}
.card{background:var(--card); border:1px solid var(--card-line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:12px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.spread{justify-content:space-between}
.btn{border:1px solid transparent; border-radius:100px; padding:14px 22px; min-height:48px; font-size:14px; font-weight:650; display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:transform .2s ease, background .2s ease}
.btn-dark{background:var(--dark); color:#fff}
.btn-dark:hover{background:#484047; transform:translateY(-1px)}
.btn-light{background:#fff; border-color:#E7DEDC}
.btn-ghost{background:transparent; border-color:rgba(40,36,37,.23)}
.btn-text{background:none; border:0}
.btn-block{width:100%}
.sample-tag{font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; background:var(--chip-on); color:#7D706D; border-radius:100px; padding:3px 9px}

/* Marbles: conic swirl of the chosen colors with a glass highlight (original orb treatment) */
.orb{display:block; flex:none; aspect-ratio:1; border-radius:50%; position:relative; overflow:hidden; border:1px solid #FFFFFF82;
  background:radial-gradient(ellipse at 22% 18%, #FFFFFFD4 0%, #FFFFFF65 12%, transparent 39%),
    conic-gradient(from var(--rot,48deg) at 49% 53%, var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  box-shadow:inset -14px -17px 26px #29234718, inset 10px 11px 18px #FFFFFFAD, 2px 15px 24px #47404E30}
.orb::before{content:""; position:absolute; inset:0; border-radius:50%; mix-blend-mode:screen;
  background:radial-gradient(ellipse at 32% 22%, #FFFFFFA9 1%, transparent 29%), radial-gradient(ellipse at 84% 75%, #3C415E40, transparent 60%), radial-gradient(ellipse at 48% 50%, transparent 30%, #FFFFFF5C 93%)}
.orb::after{content:""; position:absolute; width:38%; height:16%; top:10%; left:19%; border-radius:50%; background:#FFFFFF9C; filter:blur(6px); transform:rotate(-25deg)}
.orb.sm{width:44px; box-shadow:inset -5px -6px 10px #29234718, inset 4px 4px 7px #FFFFFFAD, 1px 5px 9px #47404E26}
.orb.xs{width:26px; box-shadow:inset -3px -4px 6px #29234718, 1px 3px 6px #47404E26}
.orb.xs::after{filter:blur(2px)}

/* Home */
.intro-copy{display:flex; flex-direction:column; gap:10px; padding-top:6px}
.intro-copy p{color:#635E61}
.today{border-radius:var(--radius); border:1px solid var(--card-line); padding:20px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center;
  background:radial-gradient(ellipse at 20% 10%, #F7DBDD 0%, transparent 50%), linear-gradient(145deg, #F6EDE8, #E2E2EF 60%, #D7E8DB); box-shadow:var(--shadow)}
.today .head{display:flex; justify-content:space-between; width:100%; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#7D706D}
.today .head span:last-child{letter-spacing:.06em; text-transform:none; font-weight:700}
.today .orb{width:min(46vw,170px); margin:8px 0}
.today h3{font-size:20px}
.today p{font-size:13px; color:#6F676B}
.linkcard{display:flex; align-items:center; gap:14px; text-align:left; width:100%; background:var(--card); border:1px solid var(--card-line); border-radius:22px; padding:14px 16px; box-shadow:var(--shadow)}
.linkcard .ic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:#EEE9F2; flex:none; color:#6E5A7E}
.linkcard .ic svg{width:24px; height:24px}
.linkcard .tx{flex:1; min-width:0}
.linkcard b{display:block; font-weight:650}
.linkcard small{color:#7D7474; font-size:12px}
.linkcard .arr{font-size:20px}

.moments{display:flex; flex-direction:column}
.moment{display:flex; gap:12px; align-items:center; padding:10px 0; border:0; border-top:1px solid var(--line); background:none; width:100%; text-align:left}
.moment:first-child{border-top:0}
.moment .meta{min-width:0; flex:1}
.moment .time{font-variant-numeric:tabular-nums; font-size:12px; color:var(--muted); display:block}
.moment .words{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.moment .note{display:block; margin-top:4px; font-size:13px; line-height:1.45; color:#6E625F; white-space:pre-wrap; overflow-wrap:anywhere}
.notes-toggle{align-self:flex-start; font-weight:600}
.days{display:flex; gap:6px}
.days span{flex:1; height:10px; border-radius:6px; background:#EEE7E4}
.footer-note{text-align:center; display:flex; flex-direction:column; gap:6px; padding-top:8px}
.footer-note img{width:86px; margin:0 auto; opacity:.8}

/* Feel */
.stepbar{display:flex; gap:8px}
.stepbar span{flex:1; height:4px; border-radius:5px; background:#EEE7E4}
.stepbar span.on{background:#A99BBA}
.weather-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.weather{background:#F9F6F1; border:1px solid #EEE5E4; border-radius:17px; padding:9px 2px 8px; min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11.5px; font-weight:700; line-height:1.15; text-align:center; transition:transform .2s}
.weather:hover{transform:translateY(-2px)}
.weather svg{width:34px; height:34px}
.weather small{font-size:11px; color:#8A8386; font-weight:500}
.weather[aria-pressed="true"], .chip[aria-pressed="true"]{border-color:#766583; background:#EEE9F2; box-shadow:0 0 0 2px #A18CAD21}
.hint{background:#F2F0ED; border-radius:13px; padding:12px 15px; font-size:13px; color:#71696C}
.family{display:flex; flex-direction:column; gap:8px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{border:1px solid #EAE1E0; background:var(--chip); border-radius:100px; padding:9px 15px; display:inline-flex; align-items:center; gap:8px; min-height:40px; font-size:14px}
.chip .dot{width:10px; height:10px; border-radius:50%}
.chip[aria-pressed="true"]{font-weight:650}
.forming{position:sticky; bottom:calc(122px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:12px; background:#FFFEFAF2; backdrop-filter:blur(12px); border:1px solid var(--card-line); border-radius:100px; padding:7px 7px 7px 9px; box-shadow:0 15px 50px #6C656023}
.forming .orb{width:44px}
.forming .label{flex:1; min-width:0; font-size:13px; color:#756B75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
textarea{width:100%; min-height:120px; border-radius:15px; border:1px solid #E7DFDC; background:#FAF7F3; color:#343033; padding:14px 16px; font:inherit; resize:vertical}
.privacyline{background:#F2F0ED; border-radius:13px; padding:12px 15px; font-size:12px; color:#71696C}

/* Result */
.result{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; border-radius:var(--radius); padding:24px 18px;
  background:radial-gradient(ellipse at 38% 8%, #F7DBDD 0%, transparent 45%), linear-gradient(145deg, #F6EDE8, #E2E2EF 62%, #D7E8DB)}
.result .orb.big{width:min(58vw,210px); animation:settle .9s cubic-bezier(.2,.9,.3,1.2); margin:8px 0}
@keyframes settle{from{transform:scale(.5) translateY(30px); opacity:.4} to{transform:none; opacity:1}}
.result .chips{justify-content:center}
.result .chip{background:#FFFFFFAB}
.daily-mini{display:flex; align-items:center; gap:10px; font-size:13px; color:#6F676B; background:#FFFFFF9C; border-radius:100px; padding:6px 14px 6px 6px}
.softnotice{font-size:13px; color:#6F676B; background:#FFFFFFB3; padding:13px 15px; border-radius:14px; text-align:left}
.activities{display:flex; flex-direction:column; gap:8px; width:100%}
.activity{display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--card); border:1px solid var(--card-line); border-radius:18px; padding:14px 16px; text-align:left}
.activity small{display:block; color:#7D7474; font-size:12px}

/* World */
.world-canvas{width:100%; aspect-ratio:4/5; border-radius:45% 45% 32% 32% / 28% 28% 20% 20%; display:block; box-shadow:0 28px 90px #AEA3B626}
.wave{overflow:hidden}
.wave svg.wl{display:block; width:calc(100% + 40px); margin:0 -20px; height:150px}
.wl-dates{display:flex; justify-content:space-between; font-size:11px; font-weight:600; color:#8F8584; font-variant-numeric:tabular-nums; margin-top:-6px}
.wl-swatches{display:flex; justify-content:center; gap:12px; padding:4px 0 2px}
.wl-swatches span{width:22px; height:22px; border-radius:50%; box-shadow:inset 0 -2px 4px rgba(41,35,71,.10), 0 2px 6px rgba(71,64,78,.12)}
.wl-drift{animation:wl-drift linear infinite} .wl-drift.d1{animation-duration:46s} .wl-drift.d2{animation-duration:62s; animation-direction:reverse} .wl-drift.d3{animation-duration:38s}
@keyframes wl-drift{from{transform:translateX(0)} to{transform:translateX(-400px)}}
@media (prefers-reduced-motion: reduce){ .wl-drift{animation:none} }

/* Breathe */
.breath-stage{display:flex; flex-direction:column; align-items:center; gap:14px; padding:12px 0}
.breath-orb{width:210px; height:210px; display:grid; place-items:center; position:relative}
.breath-orb::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse at 30% 22%, #FFFFFFD4 0%, transparent 38%), conic-gradient(from 40deg, #E5B0BD, #C4B5D5, #A9CFC7, #D3C5AA, #E5B0BD);
  box-shadow:inset -14px -17px 26px #29234718, inset 10px 11px 18px #FFFFFFAD, 0 20px 40px #47404E30; transform:scale(var(--s,.62)); transition:transform var(--d,4s) ease-in-out}
.breath-orb .cue{position:relative; font-size:18px; font-weight:650; letter-spacing:-.03em; color:#3B2F42}
.seg{display:flex; background:#F2EEEA; border-radius:100px; padding:4px; gap:4px}
.seg button{flex:1; border:none; background:none; border-radius:100px; padding:9px 0; font-size:13px; font-weight:600; color:#6F676B; min-height:40px}
.seg button[aria-pressed="true"]{background:var(--dark); color:#fff}
.timer{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600}

/* Words */
.word-row{display:flex; gap:12px; align-items:baseline; padding:9px 0; border-top:1px solid var(--line)}
.word-row:first-child{border-top:0}
.word-row b{min-width:104px; font-weight:650}
.word-row span{color:#7D7474; font-size:13px}
.quiz-opts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.quiz-opts button{border:1px solid #EAE1E0; background:var(--chip); border-radius:15px; padding:12px; min-height:48px; font-weight:600}
.quiz-opts button.right{border-color:#7FB5A4; background:#E8F2EE}
.quiz-opts button.wrong{opacity:.55}

/* Bottom nav */
.nav{position:fixed; left:0; right:0; bottom:0; background:rgba(255,254,250,.94); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line);
  padding:8px max(16px, env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px)); z-index:5}
.nav-inner{max-width:440px; margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); align-items:end}
.nav button{border:none; background:none; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:12px; font-weight:600; color:#6F676B; padding:4px 0; min-height:52px}
.nav button .ni{width:44px; height:30px; border-radius:12px; display:grid; place-items:center}
.nav button svg{width:21px; height:21px}
.nav button[aria-current="page"]{color:var(--plum)}
.nav button[aria-current="page"] .ni{background:#EEE9F2}
.nav .feel-btn .fo{width:62px; height:58px; margin-top:-22px; border-radius:22px; background:var(--plum); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; box-shadow:0 10px 24px #3B2F4240; font-size:12px}
.nav .feel-btn .fo b{font-size:22px; line-height:1; font-weight:500}

/* Sheets */
.sheet-wrap{position:fixed; inset:0; background:rgba(60,52,62,.42); z-index:20; display:flex; align-items:flex-end; justify-content:center; padding-top:max(20px, env(safe-area-inset-top,0px))}
.sheet{background:var(--card); width:100%; max-width:480px; max-height:100%; overflow:auto; border-radius:28px 28px 0 0;
  padding:26px max(20px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px)); display:flex; flex-direction:column; gap:14px}
.sheet.center{text-align:center; align-items:stretch}
.sheet .orb.mid{width:120px; margin:6px auto}
.sheet .big-line{font-size:22px; font-weight:650; letter-spacing:-.04em; line-height:1.15}
details{border-top:1px solid #E6DFE6; border-bottom:1px solid #E6DFE6; padding:12px 0; text-align:left}
details + details{border-top:0}
details summary{font-weight:650; cursor:pointer}
details p{margin-top:8px; font-size:13px; color:#76706F}
.toast{position:fixed; left:50%; bottom:112px; transform:translateX(-50%); background:var(--dark); color:#fff; padding:10px 16px; border-radius:100px; font-size:13px; z-index:30; max-width:calc(100% - 32px); text-align:center}
.ground-step{font-size:26px; font-weight:650; letter-spacing:-.04em; line-height:1.15}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
/* v0.8 — iPhone fit: the page must never slide sideways or zoom by itself. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{max-width:100%;overflow-x:clip}
#app{overflow-x:clip}
textarea,input,select{font-size:16px}
/* v0.8 — Cloudy, gifts, founder note, word count, feel-first welcome. */
.welcome-promise{font-size:13px;color:#635E61;font-weight:600}
.gift{text-align:center;align-items:center;background:linear-gradient(150deg,#FFFDF8,#F6EEF6 60%,#EAF3EE)}
.gift-scene{position:relative;height:120px;width:100%;max-width:280px}
.gift-cloud{position:absolute;left:4%;top:8px;width:116px;animation:bob 4s ease-in-out infinite}
.gift-cloud svg,.breathe-cloud svg{width:100%;height:auto;display:block}
.gift-glow{position:absolute;right:6%;top:12px;width:104px;height:104px;border-radius:50%;background:radial-gradient(circle,#F6E2A473 0%,transparent 70%);display:grid;place-items:center;animation:giftpop .9s cubic-bezier(.2,1.4,.4,1) both .3s}
@keyframes giftpop{0%{transform:scale(.2) translateY(20px);opacity:0}100%{transform:none;opacity:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
.founder-note{background:#FFFDF8;border:1px solid #EFE4D6;border-radius:24px;padding:22px 20px;box-shadow:0 12px 28px #6B3E6E14;transform:rotate(-1deg);text-align:left;display:flex;flex-direction:column;gap:8px}
.founder-note .hand{font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:23px;line-height:1.3;color:#3A2E3F}
.founder-note .sign{font-size:28px;color:#6B3E6E}
.about-why,.about-close{text-align:left;display:flex;flex-direction:column;gap:10px}
.about-why p{font-size:15px;line-height:1.5;color:#5E5560}
.about-why .lead{font-size:20px;line-height:1.35;font-weight:650;color:#2E2531}
.about-close{padding:6px 0 4px}
.about-close p{font-size:14px;line-height:1.5;color:#6B3E6E}
details p + p{margin-top:6px}
.breathing-companion{display:flex;align-items:center;justify-content:center;gap:12px}
.breathe-cloud{width:80px;flex:none;animation:bob 4s ease-in-out infinite}
.breathing-companion p{font-size:14px;color:#514953;background:#FFFFFFF0;border-radius:16px;padding:10px 14px;box-shadow:0 6px 18px #6C656014}
.gift-row{display:flex;flex-wrap:wrap;gap:6px}.gift-item{display:inline-flex;background:#fff;border:1px solid var(--card-line);border-radius:12px;padding:4px}
.word-count{background:linear-gradient(160deg,#F3E8F6,#FFF3E6)}
.wc-num{font-size:40px;font-weight:700;letter-spacing:-.04em;color:#6B3E6E;line-height:1.05}
@media(prefers-reduced-motion:reduce){.gift-cloud,.breathe-cloud,.gift-glow{animation:none}}
/* v0.8.2 */
.accent{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;color:#9C8AAD;letter-spacing:-.02em}
textarea{display:block;max-width:100%;resize:none}
textarea:focus-visible{outline:none;border-color:#BA98D6;box-shadow:inset 0 0 0 2px #BA98D640}
.wsearch{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--card-line);border-radius:100px;padding:0 16px;min-height:48px;color:#7D706D}
.wsearch:focus-within{border-color:#BA98D6}
.wsearch input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none;-webkit-appearance:none;appearance:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.words-wrap{display:flex;flex-direction:column;gap:14px}
.words-wrap.searching .family>.eyebrow{display:none}
/* v0.8.4 */
.seg.wlang{flex:0 0 auto;margin:0}
.seg.wlang button{padding:6px 12px;min-width:44px}
/* v0.8.3 */
.saved{font-size:13px;font-weight:600;color:#4F7A68}
.backbar{align-self:flex-start;border:1px solid #E8DFDC;background:#FFFFFFA8;border-radius:100px;min-height:44px;padding:0 16px;font-size:13px;font-weight:650;color:var(--plum)}
.moment-tools{justify-content:center;gap:6px;color:#8A8086}
.moment-tools .btn-text{min-height:44px;padding:0 6px;color:#6E625F;text-decoration:underline;text-underline-offset:3px}
.nudge{background:linear-gradient(150deg,#FFFDF8,#F3EEF8);text-align:left}
.nudge-cloud{width:64px;flex:none}.nudge-cloud svg{width:100%;height:auto;display:block}
.warn{background:#FFF6EC;border-color:#F1D9BD}.warn p{color:#6B4E2E}
.cal-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:100px;background:#EEE9F2;color:var(--plum);font-size:13px;font-weight:650}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.wk{border:0;background:none;padding:2px 0;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px}
.wk .wd{font-size:11px;font-weight:700;color:#6E625F}
.wk .dot{width:32px;height:32px;border-radius:50%;border:1px dashed #DCD2CF}
.wk .dot.on{border:1px solid #FFFFFF82;box-shadow:inset -4px -5px 8px #29234718,inset 3px 3px 6px #FFFFFFAD,1px 4px 8px #47404E26}
.wk .n{font-size:11px;color:#6E625F}.wk.now .n{color:var(--plum);font-weight:800}
.cal{gap:10px}.cal h3{font-size:17px}
.cal-nav{width:44px;height:44px;border-radius:50%;border:1px solid var(--card-line);background:#FBF8F5;font-size:18px;color:var(--plum)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px 2px}
.cw{text-align:center;font-size:11px;font-weight:700;color:#6E625F;padding:4px 0}
.cd{height:50px;border:0;background:none;padding:0;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cd.sel{box-shadow:inset 0 0 0 2px #9C8AAD}
.cm{width:30px;height:30px;border-radius:50%;border:1px solid #FFFFFF82;box-shadow:inset -4px -5px 8px #29234718,inset 3px 3px 6px #FFFFFFAD,1px 4px 8px #47404E26}
.cn{font-size:10px;font-weight:600;color:#4A3D4F}.ce{font-size:13px;color:#8A8086}
.cd.now .cn,.cd.now .ce{color:var(--plum);font-weight:800}
.quiet{border-style:dashed;text-align:center}
/* v0.8.5 — 3-page intro */
.intro-wrap{position:fixed;inset:0;z-index:30;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(14px,env(safe-area-inset-top,0px)) 18px max(20px,env(safe-area-inset-bottom,0px))}
.intro{max-width:440px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;gap:12px}
.ix-head{display:flex;align-items:flex-start;gap:10px}.ix-head>div{flex:1}
.ix-head img{display:block;width:104px;height:auto}
.ix-sub{font-size:9px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#6E625F;margin-top:3px}
.ix-link{border:0;background:none;min-height:44px;padding:0 4px;font-size:14px;font-weight:600;color:#6E625F}
.ix-dots{display:flex;justify-content:center;gap:8px}.ix-dots span{width:8px;height:8px;border-radius:8px;background:#DCD2CF}.ix-dots span.on{width:22px;background:var(--plum)}
.ix-count{text-align:center;font-size:12px;color:#6E625F;margin-top:-6px}
.ix-title{text-align:center;font-size:36px;line-height:1.05}
.ix-text{text-align:center;font-size:16px;line-height:1.5;color:#4A3D4F}
.ix-stage{position:relative;height:min(470px,56vh);min-height:380px;border-radius:30px;overflow:hidden;background:radial-gradient(ellipse at 20% 8%,#F7DBDD 0%,transparent 48%),radial-gradient(ellipse at 90% 85%,#C9E4DA 0%,transparent 50%),linear-gradient(150deg,#F6EDE8,#E8E2F0 58%,#E3EEE7)}
.ix-chip{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:100px;background:#FFFFFF99;border:1px solid #FFFFFFB0;font-size:13px;font-weight:600;color:#4A3D4F;white-space:nowrap}
.ix-chip.big{font-size:16px;padding:9px 16px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none}
.ix-fine{position:absolute;left:50%;top:36%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:2}
.ix-bubble{background:#FFFEFA;border:1px solid #EFE4D6;border-radius:26px;padding:14px 28px;box-shadow:0 14px 34px #6C656026;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:32px;line-height:1;color:#29272A;white-space:nowrap}
.ix-fine svg{margin-top:-1px}
.orb.ix-orb{position:absolute;left:50%;top:58%;transform:translateX(-50%);width:140px}
.ix-card{padding:0;gap:0;overflow:hidden}.ix-card>.row{padding:16px 18px 8px}
.ix-orbs{position:relative;height:210px;background:radial-gradient(ellipse at 20% 10%,#F7DBDD 0%,transparent 50%),radial-gradient(ellipse at 85% 90%,#C9E4DA 0%,transparent 50%),linear-gradient(160deg,#F6E5D9,#DEDBEC 55%,#D7E8DB)}
.orb.ix-o{position:absolute}
.ix-moments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 12px 14px}
.ix-moments div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:14px;background:#FBF8F5;min-width:0}
.ix-moments b{display:flex;align-items:center;gap:5px;font-size:12px;letter-spacing:-.01em}.ix-moments span:not(.dot){font-size:12px;color:#6E625F}
.ix-steps{display:flex;flex-direction:column;gap:10px}
.ix-step{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--card-line);border-radius:22px;padding:12px 14px;box-shadow:0 10px 30px rgba(56,42,54,.06);text-align:left}
.ix-step>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ix-step b{font-size:16px;font-weight:650;letter-spacing:-.02em}.ix-step span{font-size:13px;line-height:1.4;color:#5B5259}
.ix-num{width:34px;height:34px;flex:none;border-radius:50%;background:#F1EDF3;display:grid;place-items:center;font-size:15px;font-weight:700;color:var(--plum)}
.ix-tile{width:52px;height:52px;flex:none;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.ix-tile.sun{background:#FFF4DA}.ix-tile.sun svg{width:34px;height:34px}.ix-tile.words{background:#F1EDF3}.ix-tile.words i{display:block;height:8px;border-radius:8px}.ix-tile.mint{background:#EAF3EE}.ix-tile .orb.xs{width:32px}
.ix-belongs{text-align:center;font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:28px;line-height:1.1;color:#9C8AAD;margin-top:2px}
.ix-fine-print{text-align:center;font-size:13px;color:#6E625F;margin-top:-4px}
.ix-more{display:flex;justify-content:center;align-items:center;gap:6px;color:#8A8086;margin-top:-8px}
.intro .btn-block{margin-top:auto}
.intro .ix-belongs+.btn-block{margin-top:4px}
@media(max-height:700px){.ix-title{font-size:30px}.ix-stage{min-height:330px}}

/* v0.9.0 — Emotional Weather, Phase 1 */
.wg-label{margin:6px 0 -4px 2px}
.same-weather{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; border:1px dashed #D9CFCB; border-radius:16px; padding:6px 14px; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer; text-align:left}
.same-weather svg{width:28px; height:28px; flex:none}
.today .sky{display:flex; flex-direction:column; align-items:center; gap:8px; width:100%; border-top:1px solid var(--card-line); padding-top:12px; margin-top:2px}
.sky-line{display:flex; align-items:flex-start; justify-content:center; gap:4px; flex-wrap:wrap}
.sky-step{display:flex; flex-direction:column; align-items:center; gap:1px; min-width:64px}
.sky-step svg{width:36px; height:36px}
.sky-step b{font-size:12.5px; font-weight:650}
.sky-step small{font-size:11px; color:#8F8584; font-variant-numeric:tabular-nums}
.sky-arrow{color:#C3B8B6; font-size:14px; padding-top:10px}
.sky-sum{font-size:13.5px; color:#4A3D4F}
.wweek{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px}
.wday{display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 6px; border-radius:14px; min-width:0}
.wday.now{background:#F4EFF5}
.wday .dname{font-size:10.5px; font-weight:700; color:#7D706D; letter-spacing:.04em}
.wday .dnum{font-size:11px; color:#A39A98; font-variant-numeric:tabular-nums}
.wday .ics{display:flex; flex-direction:column; align-items:center; min-height:92px}
.wday .ics svg{width:30px; height:30px; margin-top:-2px}
.wday .more{font-size:10px; color:#8F8584; font-weight:600}
.wday .none{width:24px; height:24px; border-radius:50%; border:1.5px dashed #DCD2CF; margin-top:3px}
.wobs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.wobs li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:#3F3540; line-height:1.45}
.wobs li svg{width:22px; height:22px; flex:none}

/* v0.9.2 — Little Challenges with Cloudy */
.challenge-card{gap:14px}
.ch-head{display:flex; gap:12px; align-items:center}
.ch-head h3{margin-top:2px}
.ch-cloud{width:64px; flex:none; animation:bob 4s ease-in-out infinite}
.ch-cloud svg{width:100%; height:auto; display:block}
.ch-cloud.big{width:110px; margin:0 auto}
.ch-actions{flex-wrap:wrap; justify-content:flex-start; gap:8px}
.ch-actions .btn{min-height:44px; padding:0 18px}
.ch-two{flex-wrap:wrap; gap:8px}
.ch-two .btn{flex:1 1 140px}
.ch-word{display:flex; align-items:center; gap:10px; font-size:24px; letter-spacing:-.02em}
.ch-word .dot{width:14px; height:14px; border-radius:50%}
.ch-example{font-family:Georgia, serif; font-style:italic; color:#5B4F60; background:#F7F3F8; border-radius:14px; padding:12px 14px}
.ch-thanks{display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; padding-top:6px}
.ch-line{font-family:Georgia, serif; font-style:italic; font-size:20px; color:#4A3D4F; line-height:1.35}
.ch-gift{display:flex; align-items:center; gap:12px; background:#FBF8F5; border:1px solid var(--card-line); border-radius:18px; padding:10px 14px; text-align:left}
.ch-gift svg{flex:none}
.ch-look{align-self:flex-start; margin-top:2px; color:#6E625F}
@media(prefers-reduced-motion:reduce){.ch-cloud{animation:none}}

/* v0.9.3 — Founding users questionnaires */
.sv-q{display:flex; flex-direction:column; gap:8px; padding:12px 0; border-top:1px solid var(--card-line)}
.sv-label{font-weight:650; font-size:15px; letter-spacing:-.01em}
.sv-opts{justify-content:flex-start}
.sv-scale{display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:4px}
.sv-scale .chip{justify-content:center; padding:0; min-height:40px; font-variant-numeric:tabular-nums}
.sv-ends{justify-content:space-between}
.sv-q textarea{min-height:84px}

/* v0.9.5 — shorter Home */
.today{gap:8px; padding:18px 18px 16px}
.today .orb{width:min(32vw,120px); margin:2px 0}
.today h3{font-size:18px}
.today .sky{gap:6px; padding-top:10px}
.today .sky-step svg{width:30px; height:30px}
.this-week{gap:12px}
.this-week .wl{margin-top:-4px}
.footer-note .btn-text{margin-top:2px}

/* v0.10.0 — early-access gate */
#gate{position:fixed;inset:0;z-index:60;background:var(--paper);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(16px,env(safe-area-inset-top,0px)) 20px max(24px,env(safe-area-inset-bottom,0px))}
html.gated body{overflow:hidden}
.gate-inner{max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:12px;min-height:100%}
.gate-top{display:flex;justify-content:center;padding:6px 0 4px}
.gate-logo{height:28px;width:auto}
.gate-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 0 8px}
.gate-hero h1{font-size:32px;line-height:1.08;letter-spacing:-.045em;font-weight:650;margin:4px 0 2px;text-wrap:balance}
.gate-hero h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent,#9C8AAD)}
.gate-hero h2{font-size:24px;letter-spacing:-.03em;margin:4px 0 0}
.gate-cloud{width:120px;animation:bob 4s ease-in-out infinite}
.gate-cloud svg{width:100%;height:auto;display:block}
@media(prefers-reduced-motion:reduce){.gate-cloud{animation:none}}
.gate-inner input{width:100%;min-height:48px;border-radius:15px;border:1px solid #E7DFDC;background:#FAF7F3;color:#343033;padding:12px 16px;font:inherit;font-size:16px}
.gate-err{color:#B2453F}
.gate-fine{text-align:center;margin-top:auto;padding-top:16px}
.gate-inner a.btn{text-decoration:none;display:flex;align-items:center;justify-content:center}

/* v0.11.0 — accounts: sign-up, login, waiting */
.gate-inner select{width:100%;min-height:48px;border-radius:15px;border:1px solid #E7DFDC;background:#FAF7F3;color:#343033;padding:12px 14px;font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.gate-inner h2{font-size:26px;line-height:1.12;letter-spacing:-.04em;margin:0;text-wrap:balance}
.g-l{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:650;color:#5d5759}
.g-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.g-chips{display:flex;flex-wrap:wrap;gap:6px}
.g-chip{border:1px solid #E7DFDC;background:#FBF8F5;border-radius:100px;padding:9px 13px;min-height:40px;font:inherit;font-size:13px;font-weight:600;color:#343033;cursor:pointer}
.g-chip.on{background:#F1EDF3;border-color:#8F7E9F}
.g-promise{background:#F1EDF3;border-radius:16px;padding:10px 12px;font-size:12.5px;color:#4E4456;line-height:1.45}
.g-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}
.g-check input{width:20px;height:20px;min-height:0;flex:none;margin:1px 0 0;padding:0}
.g-check a{color:inherit}
.g-captcha{min-height:78px;display:flex;justify-content:center}
.g-mark{width:20px;height:20px;border-radius:50%;border:1.5px solid #CFC7C4;display:inline-grid;place-items:center;font-size:11px;font-weight:800;color:#6c6466}
.g-or{display:flex;align-items:center;gap:10px;color:#9a9393;font-size:12px}.g-or::before,.g-or::after{content:"";flex:1;height:1px;background:#E7DFDC}
.gate-inner .btn[disabled]{opacity:.6}

/* v0.11.2 — calmer Home: brand line sits with the tagline, bigger marble */
.intro-copy{gap:8px; padding-top:2px}
.intro-copy .tagline{display:flex; flex-direction:column; gap:4px; margin:6px 0 0}
.intro-copy .tagline .eyebrow{margin:0}
.today .orb{width:min(40vw,152px); margin:4px 0}

/* v0.11.3 — Cloudy in World is the real Cloudy (SVG over the canvas), gently floating */
.world-stage{position:relative}
.world-cloudy{position:absolute; left:62%; top:20%; width:27%; transform:translate(-50%,-50%); filter:drop-shadow(0 10px 14px rgba(62,68,102,.16)); animation:bob 5s ease-in-out infinite; pointer-events:none}
.world-cloudy svg{display:block; width:100%; height:auto}
@media(prefers-reduced-motion:reduce){.world-cloudy{animation:none}}

/* v0.12.0 — World 2.0: garden of moments */
.w-chips{display:flex;flex-wrap:wrap;gap:6px;margin:-4px 0 12px}
.w-chips span{border:1px solid #E7DFDC;background:#FFFEFA;border-radius:100px;padding:5px 11px;font-size:12px;font-weight:650;color:#4E4456}
.w-stage{position:relative;border-radius:45% 45% 30% 30% / 26% 26% 18% 18%;overflow:hidden;box-shadow:0 28px 90px #AEA3B626;margin-bottom:14px;-webkit-tap-highlight-color:transparent}
.w-svg{display:block;width:100%;height:auto}
.w-plant{cursor:pointer}
.w-plant:focus{outline:none}.w-plant:focus-visible circle:first-child{stroke:#8F7E9F;stroke-width:2}
.w-stage.placing{outline:2px dashed #8F7E9F;outline-offset:-6px;cursor:crosshair}
.w-cloudy{position:absolute;left:62%;top:15%;width:27%;transform:translate(-50%,-50%);padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 10px 14px rgba(62,68,102,.16));animation:bob 5s ease-in-out infinite}
.w-cloudy.asleep{left:36%;top:55%;width:22%;animation-duration:8s}
.w-cloudy svg{display:block;width:100%;height:auto}
.w-placed{position:absolute;width:9%;transform:translate(-50%,-80%);padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(0 4px 6px rgba(62,68,102,.22))}
.w-placed svg{display:block;width:100%;height:auto}
.w-placed.sel{outline:2px dashed #fff;outline-offset:4px;border-radius:50%}
.w-bubble{position:absolute;left:8%;right:22%;top:24%;margin:0;background:#fff;border-radius:16px;padding:9px 13px;font-size:13px;font-weight:600;color:#3E3542;box-shadow:0 8px 20px #3B2F4222;animation:pop .25s ease-out}
.w-bubble.low{top:auto;bottom:52%;left:12%}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.w-fields{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-4px 0 12px}
.w-fields .btn{min-height:38px;padding:8px 14px;font-size:13px}
.w-gift{border:0;cursor:pointer;border-radius:14px;padding:4px}
.w-gift.sel{outline:2px solid #8F7E9F;outline-offset:2px;background:#F1EDF3}
.w-gift.placed{opacity:.45}
.w-hint{font-size:12.5px;color:#5F5862;background:#F1EDF3;border-radius:12px;padding:8px 10px;margin:0}
.w-hint .btn-text{background:none;border:0;padding:0 0 0 6px;font:inherit;font-weight:700;text-decoration:underline;color:inherit;cursor:pointer}
@media(prefers-reduced-motion:reduce){.w-cloudy,.w-bubble{animation:none}}