.onboarding{height:100dvh;min-height:400px;background:var(--surface);color:var(--on-surface);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.onboarding-shell{display:flex;flex-direction:column;height:100%;width:100%;max-width:940px;margin:auto}.onboarding-header{display:flex;align-items:center;justify-content:space-between;padding:8px 18px}.onboarding-header-side{display:flex;align-items:center;width:64px;min-height:48px}.onboarding-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:999px;box-shadow:var(--clay-raised)}.onboarding-icon svg{width:23px;height:23px}.onboarding-icon:focus-visible,.onboarding-skip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.onboarding-skip{min-width:48px;min-height:48px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}.onboarding-progress{display:flex;align-items:center;gap:7px}.onboarding-progress span{height:7px;width:7px;border-radius:999px;background:var(--surface-container-highest)}.onboarding-progress span[data-current=true]{width:26px;background:var(--primary)}.onboarding-progress span[data-done=true]{background:var(--primary)}.onboarding-preview{margin:0;padding:0 20px 8px;text-align:center;font-size:13px;color:var(--muted)}.onboarding-scroll{display:flex;flex:1;min-height:0;overflow-y:auto;padding:8px 24px 24px;scrollbar-width:thin}.onboarding-content{display:grid;align-content:center;gap:32px;width:100%;max-width:432px;margin:auto}.onboarding-copy{display:grid;gap:12px;text-align:center}.onboarding-copy h1{font-size:29px;line-height:35px;font-weight:800;letter-spacing:-.025em}.onboarding-copy>p{font-size:17px;line-height:25px;color:var(--muted)}.onboarding-footer{width:100%;max-width:480px;margin:0 auto;padding:12px 24px 14px}.onboarding-scene{display:grid;align-content:center;min-height:315px;gap:16px}.onboarding-demo-card{display:grid;gap:20px;padding:22px;border-radius:28px;background:var(--surface-container);box-shadow:var(--clay-raised)}.onboarding-demo-card h2{font-size:21px;line-height:27px;font-weight:700}.onboarding-row{display:flex;align-items:center;gap:12px}.onboarding-friends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.onboarding-friend{display:grid;justify-items:center;gap:4px;font-size:13px;font-weight:600}.onboarding-invite{display:flex;align-items:center;gap:14px;padding:15px;border-radius:20px;background:var(--surface-container-low);box-shadow:var(--clay-inset)}.onboarding-invite p{font-size:13px;color:var(--muted)}.onboarding-invite strong{font-size:21px;letter-spacing:3px}.onboarding-complaint-character{display:flex;align-items:center;justify-content:center;gap:2px}.onboarding-speech{margin-top:-30px;padding:16px;border-radius:22px 22px 22px 6px;background:var(--surface-container-high);box-shadow:var(--clay-raised);font-size:21px;font-weight:700}.onboarding-vote-people{display:flex;justify-content:space-around}.onboarding-vote-person{display:grid;justify-items:center}.onboarding-vote-mark{display:grid;place-items:center;width:19px;height:19px;margin-top:-5px;border-radius:999px;background:var(--surface-container-highest)}.onboarding-vote-mark[data-checked=true]{background:var(--primary);color:var(--on-primary)}.onboarding-example{text-align:center;font-size:13px;color:var(--muted)}.onboarding-calendar{display:grid;place-items:center;width:54px;height:54px;flex-shrink:0;border-radius:18px;color:var(--primary);background:var(--surface-container-low);box-shadow:var(--clay-inset)}.onboarding-outing-people{display:flex;justify-content:center;gap:8px}.onboarding-outing-people>div{flex:0 1 60px;min-width:0}.onboarding-outing-people img{width:100%;height:auto}.onboarding-chat{display:flex;align-items:center;gap:10px;justify-self:end;margin-right:10px;padding:16px;border-radius:22px 22px 6px;background:var(--secondary-container);box-shadow:var(--clay-raised);font-size:16px}.onboarding-character .onboarding-content{align-content:start;margin-top:0;gap:24px}.onboarding-character .jelly-picker>div:first-child{box-shadow:var(--clay-raised)}.onboarding-step{animation:onboarding-fade .22s var(--ease-out, ease-out) both}.onboarding-arrival{animation:onboarding-arrive .35s cubic-bezier(.23,1,.32,1) both}@keyframes onboarding-arrive{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes onboarding-fade{0%{opacity:0}to{opacity:1}}@media(min-width:800px){.onboarding:not(.onboarding-character) .onboarding-content{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:60px}.onboarding:not(.onboarding-character) .onboarding-copy{text-align:left}.onboarding:not(.onboarding-character) .onboarding-copy h1{font-size:38px;line-height:44px}.onboarding:not(.onboarding-character) .onboarding-footer{width:calc(50% - 6px);max-width:none;margin-left:auto;margin-right:0;padding-bottom:30px}.onboarding-character .onboarding-shell{max-width:480px}}@media(prefers-reduced-motion:reduce){.onboarding-step,.onboarding-arrival{animation:onboarding-fade .1s ease-out both;animation-delay:0ms!important}}