@font-face { font-family: 'Echoo Fraunces'; src: url('fonts/Fraunces_500Medium.ttf') format('truetype'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Echoo Outfit'; src: url('fonts/Outfit_400Regular.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Echoo Outfit'; src: url('fonts/Outfit_600SemiBold.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
#onboarding { font-family: 'Echoo Outfit', system-ui, sans-serif; }
#onboarding #ob-title { font-family: 'Echoo Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
#onboarding .chip { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; max-width: 100%; white-space: normal; text-align: left; }
.echoo-activity-emoji { font-size: 1.15rem; flex-shrink: 0; }
.echoo-first-use { position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: 0; border: 0; margin: 0; background: transparent; color: #f8f5ef; font-family: 'Echoo Outfit', system-ui, sans-serif; overflow: hidden; }
.echoo-first-use::backdrop { background: transparent; }
.echoo-tour-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.8); }
.echoo-tour-ring { position: absolute; box-sizing: border-box; border: 2px solid #f7d5b2; border-radius: 20px; box-shadow: 0 0 0 200vmax rgba(0,0,0,.8); pointer-events: none; }
.echoo-tour-card { position: absolute; box-sizing: border-box; width: min(440px, calc(100% - 32px)); padding: 24px; border: 1px solid rgba(247,213,178,.32); border-radius: 24px; background: #181614; overflow: auto; overscroll-behavior: contain; }
.echoo-first-use h2 { font: 500 clamp(1.75rem, 4vw, 2rem)/1.2 'Echoo Fraunces', Georgia, serif; letter-spacing: -.035em; margin: 14px 0; text-wrap: balance; }
.echoo-first-use p { font-weight: 400; font-size: 1rem; line-height: 1.6; color: #c6c2ba; margin: 0 0 20px; }
.echoo-tour-eyebrow { color: #f7d5b2; font-size: .75rem; letter-spacing: .16em; font-weight: 600; }
.echoo-first-use button { cursor: pointer; min-height: 48px; border: 0; padding: 12px 18px; border-radius: 99px; background: #f7d5b2; color: #141311; font: 600 .95rem 'Echoo Outfit', system-ui, sans-serif; }
.echoo-first-use button:focus-visible { outline: 2px solid #f8f5ef; outline-offset: 4px; }
.echoo-first-use button:active { opacity: .75; }
.echoo-first-use .echoo-tour-quiet { background: transparent; color: #c6c2ba; }
.echoo-tour-next { width: 100%; }
.echoo-tour-actions { display: flex; justify-content: space-between; margin-top: 8px; }
.echoo-tour-completion { box-sizing: border-box; position: absolute; inset: 0; overflow: auto; background: #080808; padding: max(32px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom)); display: grid; align-items: center; justify-items: center; }
.echoo-tour-completion-inner { width: 100%; max-width: 460px; padding-block: 24px; animation: echoo-welcome-in 500ms cubic-bezier(.23,1,.32,1) both; }
.echoo-tour-completion h2 { font-size: clamp(2.25rem, 6vw, 3.25rem); margin: 20px 0; }
.echoo-tour-success { width: 88px; height: 88px; display: grid; place-items: center; border: 1px solid #10b981; border-radius: 50%; background: #10271f; color: #10b981; margin-bottom: 32px; }
.echoo-tour-success svg { width: 42px; height: 42px; animation: echoo-welcome-in 600ms cubic-bezier(.23,1,.32,1) both; }
.echoo-tour-signals { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
.echoo-tour-signals span { padding: 9px 13px; border-radius: 99px; color: #f7d5b2; background: rgba(247,213,178,.1); font-size: .875rem; }
.echoo-first-use .echoo-tour-note { font-size: .875rem; }
@keyframes echoo-welcome-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .echoo-tour-completion-inner, .echoo-tour-success svg { animation: none; } }