#onboarding{color-scheme:light;--ti-paper:#fbf8f4;--ti-card:#ffffff;--ti-ink:#221f1b;--ti-muted:#706656;--ti-coral:#fb7955;--ti-green:#46652b;--ti-out:var(--ease-out);font-family:system-ui,sans-serif;color:var(--ti-ink)}
#onboarding *{box-sizing:border-box}
#onboarding button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
#onboarding .ti-phone{max-width:390px;width:100%;margin:auto;padding:25px 19px 8px;border:1px solid #e9dfd0;border-radius:19px;background:var(--ti-paper);isolation:isolate}
#onboarding .ti-title{font:600 45px/1 Georgia,serif;letter-spacing:-1.8px;min-height:90px;margin:0}
#onboarding .ti-intro{margin-top:26px;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;min-height:48px}
#onboarding .ti-description{font-size:14px;line-height:1.4;margin:0;letter-spacing:-.2px}
#onboarding .ti-next{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ti-ink);border-radius:50%;background:transparent;color:var(--ti-ink);transition:transform 160ms var(--ti-out)}
#onboarding .ti-next svg{width:21px;height:21px;stroke-width:1.5px}
#onboarding .ti-stage{position:relative;height:484px;margin-top:20px;border-radius:12px;overflow:hidden;background:#f5eddf}
#onboarding .ti-panel{position:absolute;inset:0}
#onboarding .ti-panel[hidden]{display:none}
#onboarding .ti-art{display:block;width:100%;object-fit:contain;pointer-events:none}
#onboarding .ti-talk-art{height:409px;position:absolute;top:17px}
#onboarding .ti-topic{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 13px;border-radius:25px;background:var(--ti-card);font-size:11px;line-height:16px;font-weight:600;border:1px solid #e5d4bb;box-shadow:0 2px 0 #e9b991}
#onboarding .ti-dialogue{position:absolute;bottom:15px;left:13px;right:13px;display:flex;align-items:center;gap:15px;padding:15px;background:var(--ti-coral);border-radius:13px;box-shadow:0 4px 0 #d86343}
#onboarding .ti-dialogue h3{font:600 25px/1.06 Georgia,serif;letter-spacing:-.6px;margin:0}
#onboarding .ti-wave{display:flex;align-items:center;justify-content:center;gap:4px;width:44px;min-width:44px;height:38px}
#onboarding .ti-wave b{display:block;width:4px;height:var(--h);background:var(--ti-ink);border-radius:5px}
#onboarding .ti-playing .ti-wave b{animation:ti-voice 1400ms cubic-bezier(.77,0,.175,1) 2;animation-delay:var(--delay)}
@keyframes ti-voice{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.45)}70%{transform:scaleY(1.1)}}
#onboarding .ti-small-art{height:211px;margin:0 auto;object-position:center}
#onboarding .ti-details{position:absolute;top:211px;left:13px;right:13px}
#onboarding .ti-pattern-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px}
#onboarding .ti-pattern-heading h3{margin:0;font:600 25px/1.1 Georgia,serif;letter-spacing:-.5px}
#onboarding .ti-count{font-size:11px;line-height:15px;color:var(--ti-muted);white-space:nowrap}
#onboarding .ti-phrases{display:grid;gap:7px}
#onboarding .ti-phrase{display:grid;grid-template-columns:max-content 1fr max-content;align-items:center;gap:7px;min-height:41px;padding:10px;background:var(--ti-card);border-radius:9px;line-height:18px}
#onboarding .ti-phrase del{color:#a34e38;font-size:12px;text-decoration-thickness:1px}
#onboarding .ti-phrase mark{justify-self:center;background:#e1e9bc;color:#3a5725;font-size:12px;letter-spacing:-.2px;border-radius:4px;padding:0 3px;font-weight:600;white-space:nowrap}
#onboarding .ti-phrase strong{font:600 15px/18px Georgia,serif}
#onboarding .ti-added{display:flex;align-items:center;gap:10px;margin-top:13px;padding:12px;background:#f5d455;border-radius:10px;min-height:59px}
#onboarding .ti-added svg{flex:none;width:20px;height:20px}
#onboarding .ti-added strong,#onboarding .ti-routine strong{display:block;font-size:12px;line-height:17px;font-weight:600}
#onboarding .ti-added small,#onboarding .ti-routine small{display:block;font-size:11px;line-height:16px;margin-top:2px}
#onboarding .ti-adapt-art{height:194px}
#onboarding .ti-adapt-details{top:193px}
#onboarding .ti-profile{background:#f5d455;padding:12px;border-radius:11px}
#onboarding .ti-profile-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#onboarding .ti-profile h3{font:600 24px/1 Georgia,serif;letter-spacing:-.5px;margin:0}
#onboarding .ti-badge{display:inline-block;padding:5px 7px;border:1px solid #91772570;border-radius:20px;font-size:10px;line-height:13px;font-weight:600;white-space:nowrap}
#onboarding .ti-when{font-size:11px;line-height:16px;margin-top:8px}
#onboarding .ti-correct-list{display:grid;gap:6px;margin-top:10px}
#onboarding .ti-correct{display:flex;align-items:center;gap:10px;padding:8px 12px;min-height:36px;background:var(--ti-card);border-radius:9px;opacity:0;transform:translateY(9px);transition:opacity 240ms var(--ti-out),transform 500ms var(--ti-out)}
#onboarding .ti-correct.is-shown{opacity:1;transform:translateY(0)}
#onboarding .ti-correct svg{width:16px;height:16px;color:var(--ti-green);flex:none}
#onboarding .ti-correct p{font:500 18px/20px Georgia,serif;margin:0}
#onboarding .ti-correct em{font-style:normal;color:var(--ti-green)}
#onboarding .ti-routine{display:flex;align-items:center;gap:10px;background:#f5d455;border-radius:10px;padding:11px 12px;margin-top:10px;min-height:58px}
#onboarding .ti-routine svg{width:20px;height:20px;flex:none}
#onboarding .ti-improved .ti-profile,#onboarding .ti-improved .ti-routine{background:#dce8ae;color:#2c431c}
#onboarding .ti-improved .ti-badge{border-color:#6b854a70}
#onboarding .ti-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;min-height:48px}
#onboarding .ti-brand{display:flex;align-items:center;gap:7px;font:600 23px/1.1 Georgia,serif;letter-spacing:-.7px}
#onboarding .ti-logo{width:34px;height:34px;object-fit:contain;flex:none}
#onboarding .ti-skip{border:0;background:transparent;color:var(--ti-muted);font-size:12px;padding:14px 0 14px 14px;min-height:44px}
#onboarding .ti-dots{display:flex;justify-content:center}
#onboarding .ti-dots button{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;padding:0}
#onboarding .ti-dots button::after{content:'';height:4px;width:24px;border-radius:5px;background:#d8cebd}
#onboarding .ti-dots button[aria-current=step]::after{background:var(--ti-ink)}
#onboarding .ti-still *{transition:none!important;animation:none!important}
#onboarding button:active{transform:scale(.97)}
@media(max-width:360px){#onboarding .ti-phone{padding:20px 13px 8px}#onboarding .ti-title{font-size:39px;min-height:78px;letter-spacing:-1.4px}#onboarding .ti-description{font-size:13px}#onboarding .ti-phrase{padding:10px 7px;gap:4px}#onboarding .ti-phrase del{font-size:11px}#onboarding .ti-phrase mark{font-size:11px}#onboarding .ti-phrase strong{font-size:14px}#onboarding .ti-profile h3{font-size:22px}#onboarding .ti-badge{font-size:10px;padding:5px}#onboarding .ti-pattern-heading h3{font-size:23px}#onboarding .ti-dialogue h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){#onboarding *,#onboarding *::after{animation:none!important;transition:none!important}}
#onboarding .ti-panel[data-panel="0"]{background:#f3b2b6}
#onboarding .ti-panel[data-panel="1"]{background:#aed6e8}
#onboarding .ti-panel[data-panel="2"]{background:#bddbc6}
#onboarding .ti-talk-art{top:0;height:100%;object-fit:cover;object-position:center top}
#onboarding .ti-small-art{object-fit:cover;object-position:center top;mask-image:linear-gradient(to bottom,black 87%,transparent 100%)}
#onboarding .ti-dialogue{background:var(--ti-card);box-shadow:0 3px 0 #df8c84}
#onboarding .ti-topic{box-shadow:none;border-color:#dfaaa0}
#onboarding .ti-added{background:#285c42;color:#fffaf2}
#onboarding .ti-profile{background:var(--ti-card)}
#onboarding .ti-routine{background:var(--ti-card)}
#onboarding .ti-improved .ti-profile{background:var(--ti-card);color:var(--ti-ink)}
#onboarding .ti-improved .ti-badge{background:#dce8ae;color:#2c431c;border-color:transparent}
#onboarding .ti-improved .ti-routine{background:#285c42;color:#fffaf2}
/* The poster fills the app viewport, with safe-area padding and scrolling on
   smaller phones. Its palette stays cream in both system appearances. */
#onboarding{position:fixed;inset:0;z-index:49;overflow-y:auto;overscroll-behavior:contain;background:var(--ti-paper);padding:max(12px,env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);transition:opacity 220ms var(--ease-out)}
#onboarding[hidden]{display:none}
#onboarding.is-leaving{opacity:0;pointer-events:none}
#onboarding .ti-phone{border:0;border-radius:0;padding:16px 19px 0;min-height:0}
#onboarding .ti-stage{height:clamp(440px,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 300px),484px)}
#onboarding .ti-pattern-heading{margin-bottom:11px}
#onboarding .ti-phrase strong{font-weight:700}
#onboarding .ti-skip{min-width:44px}
#onboarding .ti-next:focus-visible,#onboarding .ti-dots button:focus-visible,#onboarding .ti-skip:focus-visible{outline:2px solid #285c42;outline-offset:3px}
#onboarding .ti-details{top:auto;bottom:16px}
#onboarding .ti-small-art{height:calc(100% - 265px)}
#onboarding .ti-adapt-art{height:calc(100% - 275px)}
#onboarding .ti-adapt-details{top:auto;bottom:16px}
#onboarding .ti-correct p{margin:0}
#onboarding .ti-badge{font-size:11px}
@media(max-width:360px){#onboarding .ti-phone{padding:12px 13px 0}#onboarding .ti-stage{min-height:484px}#onboarding .ti-small-art{height:211px}#onboarding .ti-adapt-art{height:180px}#onboarding .ti-badge{font-size:11px}#onboarding .ti-profile h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){#onboarding{transition:none}}

/* The second poster pairs a complete figure with a column of recurring phrases. */
#onboarding .ti-panel[data-panel="1"]{background:#a1d9ee}
#onboarding .ti-panel[data-panel="1"] .ti-notice-art{position:absolute;inset:20px auto auto 0;width:82%;height:auto;object-fit:contain;object-position:left center;mask-image:linear-gradient(to right,#000 78%,transparent 100%),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-composite:intersect}
#onboarding .ti-panel[data-panel="1"] .ti-details{inset:0}
#onboarding .ti-panel[data-panel="1"] .ti-pattern-heading{position:absolute;top:30px;right:13px;width:44%;display:block;margin:0}
#onboarding .ti-panel[data-panel="1"] .ti-pattern-heading h3{font-size:29px;line-height:1.02;max-width:130px;letter-spacing:-.7px}
#onboarding .ti-panel[data-panel="1"] .ti-count{display:block;margin-top:7px;color:#405e68}
#onboarding .ti-panel[data-panel="1"] .ti-phrases{position:absolute;top:124px;right:13px;width:44%;gap:10px}
#onboarding .ti-panel[data-panel="1"] .ti-phrase{grid-template-columns:1fr auto;gap:4px 3px;padding:9px 8px;min-height:61px;background:#fffaf2;border-radius:10px}
#onboarding .ti-panel[data-panel="1"] .ti-phrase del{grid-column:1/-1;font-size:12px;line-height:16px}
#onboarding .ti-panel[data-panel="1"] .ti-phrase mark{justify-self:start;font-size:12px;line-height:18px;padding:0 2px;letter-spacing:-.3px}
#onboarding .ti-panel[data-panel="1"] .ti-phrase strong{font-size:14px;line-height:18px}
#onboarding .ti-panel[data-panel="1"] .ti-added{position:absolute;bottom:13px;left:13px;right:13px;margin:0}
@media(max-width:360px){#onboarding .ti-panel[data-panel="1"] .ti-pattern-heading,#onboarding .ti-panel[data-panel="1"] .ti-phrases{right:10px;width:45%}#onboarding .ti-panel[data-panel="1"] .ti-phrase{padding:9px 6px}#onboarding .ti-panel[data-panel="1"] .ti-phrase mark{font-size:11px}#onboarding .ti-panel[data-panel="1"] .ti-phrase strong{font-size:13px}}