.onboarding{--ink:#234237;--muted:#62765d;--brand:#2a503d;color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;box-sizing:border-box;width:100%;max-width:500px;margin:auto;padding:48px 24px;text-align:center}
.onboarding *{box-sizing:border-box}
#experience:has(#onboarding:not([hidden])){display:flex;min-height:100dvh;padding:0}
.panel{display:none}.panel[data-active]{display:block;animation:step-in .2s ease-out}
.onboarding h1{font-size:clamp(30px,6vw,42px);font-weight:700;line-height:1.15;letter-spacing:-1.2px;margin:0 0 22px;white-space:pre-line;overflow-wrap:normal}
.onboarding h1:focus{outline:none}
.onboarding p{font-size:16px;line-height:1.5;margin:0 0 28px}
.onboarding .intro{font-size:18px}
.onboarding .disclosure{font-size:13px;line-height:1.6;color:var(--muted);max-width:370px;margin:36px auto 24px}
.actions{display:flex;flex-direction:column;gap:12px}
.onboarding .btn{width:100%;min-height:52px;padding:14px 20px;font-family:inherit;font-size:16px;font-weight:600;line-height:1.4;border-radius:30px;cursor:pointer}
.onboarding .primary{background:var(--brand);color:white}
.onboarding .secondary{background:transparent;color:var(--muted);font-size:14px}
.onboarding .secondary:hover{background:#e8ede2}
.onboarding button:disabled{opacity:.45;cursor:default}
.onboarding button:focus-visible{outline:3px solid #609e76;outline-offset:4px}
.welcome-mark{display:flex;justify-content:center;align-items:center;gap:6px;height:64px;margin:0 auto 32px}
.welcome-mark span{width:8px;height:24px;border-radius:8px;background:#6f9167}.welcome-mark span:nth-child(2){height:44px}
.ring{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#e6edde;margin:24px auto 32px}.ring i{display:block;width:28px;height:28px;border-radius:50%;background:#6f9167;transform:scale(var(--lvl,.5));transition:transform 80ms linear}
.ready-orb{width:56px;height:56px;margin:0 auto 32px;border-radius:50%;background:#dfe9d8;border:10px solid #eaf0e4}.ready-orb.waiting{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.85);opacity:.6}}
.form-message:empty{display:none}.onboarding .form-message{font-size:14px;color:#865534}
#preview{display:none;background:#233e31;color:white;padding:8px 16px;font-size:12px;gap:12px;align-items:center;flex-wrap:wrap}#preview[data-on]{display:flex}#preview label{display:flex;align-items:center;gap:8px}#preview select{font:inherit;padding:4px}#preview button{font-size:12px;min-height:32px;padding:4px 10px;border:1px solid #829c89;background:transparent}#preview .preview-explanation{color:white}
body:has(#onboarding:not([hidden])){display:flex;flex-direction:column;min-height:100dvh}
body:has(#onboarding:not([hidden])) #experience{flex:1;min-height:0}
@media(prefers-reduced-motion:reduce){.panel[data-active],.ready-orb.waiting{animation:none}.ring i{transition:none}}
@media(max-height:650px){.onboarding{padding-top:24px;padding-bottom:24px}.welcome-mark{margin-bottom:20px}.onboarding .disclosure{margin-top:24px}}
/* Keep every setup screen and action slot anchored while state changes. */
.onboarding{position:relative;display:grid;align-items:center;min-height:480px}
.panel{grid-area:1/1;min-height:380px;display:none;flex-direction:column;justify-content:center}
.panel[data-active]{display:flex;animation:panel-in .28s cubic-bezier(.2,.7,.2,1) both}
.panel.transition-out{display:flex;position:absolute;inset:48px 24px;pointer-events:none;animation:panel-out .2s ease-in both;z-index:1}
@keyframes panel-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes panel-out{to{opacity:0;transform:translateY(-8px)}}
#micBody{position:relative;padding-bottom:52px}#micBody>.btn{position:absolute;bottom:0;left:0}
#micStatus,#speakerStatus{min-height:48px;margin-bottom:16px}
.ring{position:relative}.ring.success i{opacity:0}.ring.success::after,.sound-mark.success::after{content:'✓';position:absolute;font-size:36px;color:#2a503d;animation:check-in .25s ease-out}
@keyframes check-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.sound-mark{height:80px;display:flex;position:relative;align-items:center;justify-content:center;gap:6px;margin:8px auto 24px}.sound-mark i{width:7px;height:20px;background:#6f9167;border-radius:8px}.sound-mark i:nth-child(2){height:36px}.sound-mark.playing i{animation:sound-wave .55s ease-in-out infinite alternate}.sound-mark.playing i:nth-child(2){animation-delay:.15s}.sound-mark.playing i:nth-child(3){animation-delay:.3s}.sound-mark.success i{opacity:0}
@keyframes sound-wave{to{transform:scaleY(.4)}}
.sound-actions{position:relative;height:104px}.sound-actions #playSound:not(.replay),.sound-actions #heardSound{position:absolute;top:0;left:0}.sound-actions #playSound.replay{position:absolute;top:56px;left:0;min-height:40px;padding:8px}
.setup-progress{height:5px;overflow:hidden;border-radius:5px;background:#dfe7d9;margin:0 auto 32px;width:75%}.setup-progress span{display:block;height:100%;width:35%;border-radius:inherit;background:#77946b;animation:preparation-sweep 1.7s ease-in-out infinite}.setup-progress.complete span{animation:none;width:100%;transition:width .3s}.setup-progress.failed span{animation:none;background:#a98d65}
@keyframes preparation-sweep{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
#readyBody{min-height:48px}#readyActions{min-height:116px}
@media(prefers-reduced-motion:reduce){.panel[data-active],.panel.transition-out,.ring.success::after,.sound-mark.success::after,.sound-mark.playing i,.setup-progress span{animation:none}.setup-progress span{width:45%}}