/* One introduction, with all account setup kept in the actual workspace. */
html body #onboarding-sheet#onboarding-sheet{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
html body #onboarding-sheet#onboarding-sheet > .sheet-surface {
  max-width:1200px!important;min-height:0;padding:32px clamp(20px,4vw,48px)!important;
  margin:clamp(0px,4vh,48px) auto;color:#142448;
}
#onboarding-sheet .setup-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
html body #onboarding-sheet .setup-brand{margin:0;font-size:21px}
#onboarding-sheet .setup-motion{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 16px;border:1px solid #fff;border-radius:99px;background:#ffffffb8;font:700 13px Manrope,system-ui,sans-serif;cursor:pointer}
#onboarding-sheet .setup-motion input{width:18px;height:18px;margin:0;accent-color:#164ac4;flex:none}
html body #onboarding-sheet#onboarding-sheet .welcome-intro:not([hidden]){display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);align-items:stretch;gap:clamp(24px,4vw,48px);padding:0!important;flex:none;text-align:left}
#onboarding-sheet .welcome-companion{position:relative;min-width:0;display:flex;align-items:center;flex-direction:column;padding:26px 20px 20px;border:1px solid #8299e7;border-radius:30px;overflow:hidden;text-align:center;color:#f1f8ff;background:radial-gradient(ellipse at 10% 5%,#376ed8,transparent 60%),radial-gradient(ellipse at 95% 85%,#32527d,transparent 65%),#0c1958;box-shadow:0 20px 45px -24px #233b82aa}
#onboarding-sheet .welcome-companion__eyebrow{margin:0;color:#b2f4df;font:800 10px/1.5 Manrope,sans-serif;letter-spacing:.12em}
html body #onboarding-sheet .setup-coda{float:none;position:relative;isolation:isolate;flex:1;justify-content:center;width:100%;min-width:0;max-width:none;min-height:220px;margin:10px 0 0}
html body #onboarding-sheet .setup-coda img{position:relative;z-index:1;width:min(100%,250px);height:250px;object-fit:contain;filter:drop-shadow(0 10px 26px #63cffe40)}
#onboarding-sheet .welcome-orbit{position:absolute;width:230px;height:230px;border:1px solid #a0c7ff35;border-radius:50%;background:radial-gradient(circle,#8fcfff22,transparent 70%);box-shadow:0 0 0 23px #9bbfff08,0 0 0 24px #9bbfff16}
#onboarding-sheet .welcome-orbit::after{content:'';position:absolute;top:33px;right:22px;width:7px;height:7px;background:#b6ffe2;border-radius:50%;box-shadow:0 0 18px #b6ffe2}
#onboarding-sheet .welcome-companion h3{margin:10px 0 8px;font:800 28px/1.2 Manrope,sans-serif;letter-spacing:-.03em;color:#fff}
#onboarding-sheet .welcome-companion>p:not(.welcome-companion__eyebrow){margin:0;color:#cedcf9;font-size:14px;line-height:1.65}
#onboarding-sheet .welcome-picker{width:100%;margin-top:28px;padding-top:20px;border-top:1px solid #d1e0ff26}
#onboarding-sheet .welcome-picker>p{margin:0 0 14px;text-align:left;font:800 13px/1.5 Manrope,sans-serif;color:#f1f8ff}
#onboarding-sheet .welcome-picker>p span{display:block;font-weight:500;font-size:11px;color:#c2d3f6}
#onboarding-sheet .design-welcome-choices{gap:8px;margin:0;max-width:none}
#onboarding-sheet .design-welcome-choices button{min-height:88px;min-width:0;padding:6px 3px;border:1px solid #bccdff30;border-radius:14px;background:#ffffff0c;font-size:11px;transition:background-color .18s,border-color .18s}
#onboarding-sheet .design-welcome-choices button[aria-pressed=true]{outline:2px solid #b4ffe2;outline-offset:2px;background:#b4ffe21c;border-color:transparent}
#onboarding-sheet .design-welcome-choices button:hover{background:#ffffff20}
#onboarding-sheet .design-welcome-choices img{width:100%;height:55px;margin:0 0 4px}
#onboarding-sheet .welcome-story{min-width:0;align-self:center;padding:12px 0}
#onboarding-sheet .welcome-kicker{margin:0 0 14px;font:800 10px/1.5 Manrope,sans-serif;letter-spacing:.13em;color:#345a93}
html body #onboarding-sheet#onboarding-sheet h2{margin:0;text-align:left;font-size:clamp(36px,4.8vw,58px)!important;line-height:1.08!important;letter-spacing:-.045em!important}
#onboarding-sheet .design-welcome-tagline{margin:16px 0;font-size:clamp(24px,2.8vw,32px);text-align:left;color:#267667}
#onboarding-sheet .welcome-description{max-width:46ch;margin:0;color:#506483;font-size:15px;line-height:1.7}
#onboarding-sheet .welcome-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:28px 0 22px}
#onboarding-sheet .welcome-feature{min-width:0;padding:10px 10px 16px;background:#ffffffb3;border:1px solid #ffffff;border-radius:18px;box-shadow:0 8px 20px -15px #4a5a9c66}
#onboarding-sheet .welcome-feature h3{margin:14px 2px 7px;font:800 14px/1.3 Manrope,sans-serif;letter-spacing:-.02em;color:#142448}
#onboarding-sheet .welcome-feature p{margin:0 2px;color:#506483;font-size:12px;line-height:1.55}
#onboarding-sheet .welcome-feature__art{height:98px;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:10px;border-radius:11px;background:#e9edff;overflow:hidden}
#onboarding-sheet .welcome-mini-day{display:flex;align-items:center;gap:5px;font-size:9px;padding:7px 5px;border-radius:6px;background:#fff;color:#2b3764;white-space:nowrap;box-shadow:0 2px 6px #253e6910}
#onboarding-sheet .welcome-mini-day i{height:17px;width:3px;border-radius:4px;background:#8177d9;flex:none}
#onboarding-sheet .welcome-mini-day:nth-child(2){background:#c9f5e3}
#onboarding-sheet .welcome-mini-day:nth-child(2) i{background:#2a987c}
#onboarding-sheet .welcome-mini-day small{margin-left:auto;font-size:8px}
#onboarding-sheet .welcome-feature--notes .welcome-feature__art{background:#e2eeff}
#onboarding-sheet .welcome-mini-note{padding:8px;background:#fff;border-radius:7px;transform:rotate(-3deg);font-size:8px;box-shadow:0 4px 10px #3a4f6c16}
#onboarding-sheet .welcome-mini-note b{display:block;font-size:8px;white-space:nowrap}
#onboarding-sheet .welcome-mini-note i{display:block;height:3px;border-radius:3px;background:#d8d8ef;margin:6px 0;width:90%}
#onboarding-sheet .welcome-mini-note i:nth-of-type(2){width:64%}
#onboarding-sheet .welcome-mini-note span{display:block;color:#45628b;font-size:7px}
#onboarding-sheet .welcome-feature--focus .welcome-feature__art{background:#dff5ec;align-items:center}
#onboarding-sheet .welcome-mini-timer{display:flex;align-items:center;justify-content:center;flex-direction:column;width:74px;height:74px;flex:none;border:3px solid #63c1a1;border-left-color:#b9e5d4;border-radius:50%;color:#245b50}
#onboarding-sheet .welcome-mini-timer strong{font:800 17px Manrope,sans-serif}
#onboarding-sheet .welcome-mini-timer span{font-size:5px;margin-top:2px}
#onboarding-sheet .welcome-ready{display:flex;align-items:flex-start;gap:9px;margin:0;color:#53647f;font-size:12px;line-height:1.6;max-width:52ch}
#onboarding-sheet .welcome-ready svg{width:17px;height:17px;flex:none;color:#267667;margin-top:2px}
html body #onboarding-sheet#onboarding-sheet .onboarding-actions{justify-content:flex-start!important;margin-top:22px;padding:0!important;gap:10px!important}
html body #onboarding-sheet#onboarding-sheet [data-onboarding-next]{box-shadow:0 8px 20px -10px #152d85;gap:14px;min-height:48px}
html body #onboarding-sheet#onboarding-sheet [data-setup-tour]{min-height:48px;margin:0!important;border-color:#bacce0;background:#ffffff70;color:#243659;box-shadow:none}
/* Fade in place. Coda never travels, spins or bounces into this introduction. */
html body #onboarding-sheet[open]{animation:welcome-soft-in 220ms ease-out both}
@keyframes welcome-soft-in{from{opacity:.7}to{opacity:1}}
@media(max-width:900px){
  html body #onboarding-sheet#onboarding-sheet .welcome-intro:not([hidden]){grid-template-columns:minmax(220px,.8fr) minmax(0,1.4fr);gap:24px}
  #onboarding-sheet .welcome-features{grid-template-columns:1fr;gap:8px;margin:20px 0}
  #onboarding-sheet .welcome-feature{display:grid;grid-template-columns:70px 1fr;column-gap:12px;padding:9px 12px 9px 9px}
  #onboarding-sheet .welcome-feature__art{grid-row:1/3;height:70px;padding:4px;gap:4px}
  #onboarding-sheet .welcome-feature h3{align-self:end;margin:0 0 4px}
  #onboarding-sheet .welcome-feature p{margin:0;max-width:32ch}
  #onboarding-sheet .welcome-mini-day{font-size:6px;padding:5px 3px;gap:3px}
  #onboarding-sheet .welcome-mini-day small{font-size:5px}
  #onboarding-sheet .welcome-mini-note{padding:5px}
  #onboarding-sheet .welcome-mini-note b{font-size:5px}
  #onboarding-sheet .welcome-mini-note span{font-size:5px}
  #onboarding-sheet .welcome-mini-timer{width:58px;height:58px}
}
@media(max-width:620px){
  html body #onboarding-sheet#onboarding-sheet>.sheet-surface{margin:0 auto;padding:20px!important}
  #onboarding-sheet .setup-header{gap:8px;margin-bottom:20px}
  html body #onboarding-sheet .setup-brand{font-size:17px;gap:8px}
  html body #onboarding-sheet .setup-brand img{width:32px;height:32px}
  #onboarding-sheet .setup-motion{font-size:11px;padding:8px 11px;gap:7px}
  html body #onboarding-sheet#onboarding-sheet .welcome-intro:not([hidden]){grid-template-columns:1fr;gap:24px}
  #onboarding-sheet .welcome-companion{padding:18px 16px;border-radius:24px;display:grid;grid-template-columns:112px minmax(0,1fr);gap:0 16px;text-align:left}
  #onboarding-sheet .welcome-companion__eyebrow{grid-column:2;font-size:8px;align-self:end}
  html body #onboarding-sheet .setup-coda{grid-column:1;grid-row:1/4;width:112px;min-height:126px;height:126px;margin:0}
  html body #onboarding-sheet .setup-coda img{width:126px;height:126px;max-width:none}
  #onboarding-sheet .welcome-orbit{width:106px;height:106px;box-shadow:0 0 0 12px #9bbfff08,0 0 0 13px #9bbfff16}
  #onboarding-sheet .welcome-orbit::after{top:9px;right:13px;width:5px;height:5px}
  #onboarding-sheet .welcome-companion h3{grid-column:2;font-size:24px;margin:8px 0 6px}
  #onboarding-sheet .welcome-companion>p:not(.welcome-companion__eyebrow){grid-column:2;font-size:12px;align-self:start}
  #onboarding-sheet .welcome-picker{grid-column:1/-1;margin-top:14px;padding-top:14px}
  #onboarding-sheet .welcome-picker>p{font-size:11px;margin-bottom:12px}
  #onboarding-sheet .welcome-picker>p span{display:inline;margin-left:6px;font-size:10px}
  #onboarding-sheet .design-welcome-choices button{min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #onboarding-sheet .design-welcome-choices img{height:36px;width:40px;margin-bottom:2px}
  #onboarding-sheet .welcome-story{padding:0}
  html body #onboarding-sheet#onboarding-sheet h2{font-size:40px!important}
  #onboarding-sheet .welcome-kicker{font-size:9px;margin-bottom:10px}
  #onboarding-sheet .design-welcome-tagline{font-size:25px;margin:12px 0}
  #onboarding-sheet .welcome-description{font-size:14px}
  html body #onboarding-sheet#onboarding-sheet .onboarding-actions button{flex:1 1 100%!important;justify-content:center;min-height:48px}
}
