#onboarding{position:fixed;z-index:1000;box-sizing:border-box;overflow:hidden;font-family:'Neue Machina',system-ui,sans-serif;color:var(--ob-ink);background:var(--ob-bg);--ob-bg:#fff;--ob-ink:#171717;--ob-sub:#77777c;--ob-line:#e6e6e9;--ob-card:#f5f5f6;--ob-blue:#a8cfda;--ob-accent:#3e899a;--ob-purple:#b8a8e3;--ob-gold:#edc568}
@media(prefers-color-scheme:dark){#onboarding{--ob-bg:#0d0d0e;--ob-ink:#f4f3f1;--ob-sub:#a6a3a3;--ob-line:#303034;--ob-card:#1b1b1e;--ob-accent:#9dced9}}
#onboarding[data-theme=light]{--ob-bg:#fff;--ob-ink:#171717;--ob-sub:#77777c;--ob-line:#e6e6e9;--ob-card:#f5f5f6;--ob-accent:#3e899a}
#onboarding[data-theme=dark]{--ob-bg:#0d0d0e;--ob-ink:#f4f3f1;--ob-sub:#a6a3a3;--ob-line:#303034;--ob-card:#1b1b1e;--ob-accent:#9dced9}
#onboarding .ob-theme-toggle{position:absolute;top:26px;right:22px;z-index:12;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--ob-line);border-radius:50%;background:var(--ob-bg);color:var(--ob-ink);box-shadow:0 2px 10px rgba(0,0,0,.04)}
#onboarding *{box-sizing:border-box}
#onboarding button,#onboarding input{font:inherit}
#onboarding button{cursor:pointer;-webkit-tap-highlight-color:transparent}
#onboarding .ob-shell{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;padding:26px 22px 20px;background:var(--ob-bg)}
#onboarding .ob-brand{font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 20px;font-weight:600;color:var(--ob-accent);letter-spacing:-.04em;display:flex;align-items:center;gap:6px}
#onboarding .ob-top{display:flex;align-items:center;justify-content:space-between;min-height:34px;position:relative;z-index:3;padding-right:43px}
#onboarding .ob-top-note{font-size: 13px;letter-spacing:.13em;color:var(--ob-sub)}
#onboarding .ob-back{width:34px;height:34px;border:1px solid var(--ob-line);border-radius:50%;background:transparent;color:var(--ob-ink);font-size: 22px;line-height:1;display:grid;place-items:center}
#onboarding .ob-progress{display:flex;gap:5px;margin:18px 0 16px}
#onboarding .ob-progress i{height:3px;flex:1;border-radius:99px;background:var(--ob-line)}
#onboarding .ob-progress i.on{background:var(--ob-accent)}
#onboarding .ob-title{font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 28px;line-height:1.06;letter-spacing:-.035em;margin:0 0 8px;font-weight:600}
#onboarding .ob-body{font-size: 15px;line-height:1.5;color:var(--ob-sub);margin:0;max-width:310px}
#onboarding .ob-page{flex:1;min-height:0;display:flex;flex-direction:column}
#onboarding .ob-page-main{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}
#onboarding .ob-bottom{display:flex;flex-direction:column;gap:9px;margin-top:auto;z-index:3}
#onboarding .ob-primary,#onboarding .ob-secondary{width:100%;min-height:46px;border-radius:13px;border:1px solid var(--ob-ink);font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 16px;font-weight:600}
#onboarding .ob-primary{background:var(--ob-ink);color:var(--ob-bg)}
#onboarding .ob-primary.blue{background:#c8eaf1;border-color:#c8eaf1;color:#152226}
#onboarding .ob-secondary{background:transparent;color:var(--ob-ink);border-color:var(--ob-line)}
#onboarding .ob-text-button{border:0;background:transparent;color:var(--ob-accent);font-size: 14px;padding:6px;text-align:center}
#onboarding .ob-caption{font-size: 13px;color:var(--ob-sub);line-height:1.4;text-align:center}
#onboarding .ob-welcome{padding:40px 30px 38px}
#onboarding[data-screen=welcome] .ob-theme-toggle{top:40px;right:30px}
#onboarding .ob-welcome .ob-top{min-height:35px}
#onboarding .ob-welcome-brand{display:block;width:99px;height:auto;object-fit:contain}
#onboarding .ob-welcome-wave-wrap{flex:1;min-height:180px;margin:18px -30px 4px;position:relative;overflow:hidden}
#onboarding .ob-welcome-wave{display:block;width:100%;height:100%}
#onboarding .ob-welcome-bottom{position:relative;z-index:2;flex:none}
#onboarding .ob-welcome-bottom h1{font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 30px;line-height:1.08;letter-spacing:-.045em;font-weight:600;margin:0 0 25px}
#onboarding .ob-welcome-bottom p{font-size: 15px;line-height:1.45;color:var(--ob-sub);margin:0 0 26px}
#onboarding .ob-welcome-actions{display:flex;flex-direction:column;gap:10px}
#onboarding .ob-welcome-actions .ob-primary,#onboarding .ob-welcome-actions .ob-secondary{min-height:52px;border-radius:14px}
#onboarding .ob-welcome-actions .ob-primary{background:var(--ob-ink);border-color:var(--ob-ink);color:var(--ob-bg)}
#onboarding .ob-welcome-actions .ob-secondary{border-color:var(--ob-ink)}
#onboarding .ob-auth{background:radial-gradient(ellipse 150px 290px at 50% 51%,rgba(168,207,218,.24),transparent 75%),var(--ob-bg)}
#onboarding .ob-auth .ob-shell{background:transparent}
#onboarding .ob-auth-hint{font-size: 13px;color:var(--ob-sub)}
#onboarding .ob-auth-pill-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
#onboarding .ob-auth-glow{position:absolute;width:70%;height:75%;border-radius:999px;background:conic-gradient(from 20deg,rgba(168,207,218,.4),rgba(186,171,232,.38),rgba(237,197,104,.26),rgba(168,207,218,.4));filter:blur(34px);animation:ob-aura 9s ease-in-out infinite alternate}
#onboarding .ob-auth-pill{position:relative;z-index:1;width:min(100%,320px);height:min(92%,600px);min-height:430px;border-radius:999px;border:1px solid rgba(178,181,190,.45);background:color-mix(in srgb,var(--ob-bg) 74%,transparent);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 20px 60px rgba(30,35,50,.08);padding:32px 26px;display:flex;flex-direction:column;justify-content:center}
#onboarding .ob-auth-eyebrow{font-size: 13px;letter-spacing:.14em;color:var(--ob-accent);text-align:center}
#onboarding .ob-auth-title{font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 29px;line-height:1.05;letter-spacing:-.04em;text-align:center;margin:10px 0 6px}
#onboarding .ob-auth-sub{color:var(--ob-sub);font-size: 14px;line-height:1.4;text-align:center;margin:0 0 17px}
#onboarding .ob-auth-tabs{display:flex;margin:0 auto 15px;padding:3px;background:var(--ob-card);border-radius:99px;width:190px}
#onboarding .ob-auth-tabs button{width:50%;height:30px;border:0;border-radius:99px;background:transparent;color:var(--ob-sub);font-size: 14px}
#onboarding .ob-auth-tabs button.active{background:var(--ob-ink);color:var(--ob-bg)}
#onboarding .ob-fields{display:flex;flex-direction:column;gap:8px}
#onboarding .ob-field{display:flex;flex-direction:column;gap:4px;font-size: 13px;color:var(--ob-sub)}
#onboarding .ob-field input{height:39px;border:1px solid var(--ob-line);border-radius:11px;background:color-mix(in srgb,var(--ob-bg) 78%,transparent);padding:0 12px;color:var(--ob-ink);font-size: 15px;outline:none;width:100%}
#onboarding .ob-field input:focus{border-color:var(--ob-accent);box-shadow:0 0 0 2px rgba(112,181,197,.18)}
#onboarding .ob-auth-submit{margin-top:12px}
#onboarding .ob-auth-divider{display:flex;align-items:center;gap:11px;margin:4px 0 13px;color:var(--ob-sub);font-size: 14px}
#onboarding .ob-auth-divider::before,#onboarding .ob-auth-divider::after{content:'';height:1px;flex:1;background:var(--ob-line)}
#onboarding .ob-google-button{width:100%;min-height:43px;border:1px solid var(--ob-line);border-radius:13px;background:var(--ob-bg);color:var(--ob-ink);display:flex;align-items:center;justify-content:center;gap:10px;font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 15px;font-weight:600}
#onboarding .ob-google-button:hover{border-color:var(--ob-accent)}
#onboarding .ob-google-button:focus-visible{outline:2px solid var(--ob-accent);outline-offset:2px}
#onboarding .ob-auth-skip{margin-top:5px}
#onboarding .ob-error{min-height:16px;font-size: 13px;color:#c96042;text-align:center;margin-top:5px}
#onboarding .ob-visual-card{width:100%;height:82%;min-height:240px;border-radius:24px;background:var(--ob-card);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
#onboarding .ob-scan-frame{width:min(65%,220px);aspect-ratio:1;border:1px solid var(--ob-line);border-radius:18px;position:relative;display:grid;place-items:center;background:var(--ob-bg)}
#onboarding .ob-scan-frame::before,#onboarding .ob-scan-frame::after{content:'';position:absolute;inset:8px;border:2px solid transparent;border-radius:12px;pointer-events:none}
#onboarding .ob-scan-frame::before{border-top-color:#8ac3d1;border-left-color:#8ac3d1}
#onboarding .ob-scan-frame::after{border-bottom-color:#e5b8c8;border-right-color:#edc568}
#onboarding .ob-qr{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;width:48%;aspect-ratio:1}
#onboarding .ob-qr i{background:var(--ob-ink);border-radius:1px;opacity:.12}
#onboarding .ob-qr i.on{opacity:.9}
#onboarding .ob-scan-line{position:absolute;left:13%;right:13%;height:2px;top:15%;background:#80c2d1;box-shadow:0 0 14px 3px rgba(132,204,217,.7);animation:ob-scan 2.6s ease-in-out infinite alternate}
#onboarding .ob-pair-stage{width:100%;height:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;position:relative}
#onboarding .ob-p1-panel{width:100%;height:72px;flex:none;border-radius:999px;background:#111214;box-shadow:0 14px 28px -16px rgba(0,0,0,.6);overflow:hidden;position:relative}
#onboarding .ob-p1-led{display:block;width:100%;height:100%}
#onboarding .ob-p1-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none}
#onboarding .ob-p1-loading i{width:8px;height:8px;border-radius:50%;background:#a6b0e0;box-shadow:0 0 9px rgba(166,176,224,.6);animation:ob-p1-loading-dot 1.35s ease-in-out infinite}
#onboarding .ob-p1-loading i:nth-child(2){animation-delay:.18s}
#onboarding .ob-p1-loading i:nth-child(3){animation-delay:.36s}
@keyframes ob-p1-loading-dot{0%,65%,100%{opacity:.52;transform:scale(.85)}30%{opacity:1;transform:scale(1.2)}}
#onboarding .ob-bluetooth-pulse{width:148px;height:148px;flex:none;position:relative;display:grid;place-items:center;color:var(--ob-accent);opacity:0;transition:opacity .35s}
#onboarding .ob-bluetooth-pulse i{position:absolute;width:26px;height:26px;border:1px solid currentColor;border-radius:50%;opacity:0}
#onboarding .ob-bluetooth-pulse svg{width:25px;height:25px;position:relative;z-index:1;filter:drop-shadow(0 0 8px rgba(121,190,209,.25))}
#onboarding .ob-pair-stage.is-pairing .ob-bluetooth-pulse{opacity:1}
#onboarding .ob-pair-stage.is-pairing .ob-bluetooth-pulse i{animation:ob-bluetooth-ring 2.7s cubic-bezier(.19,.46,.38,.99) infinite}
#onboarding .ob-pair-stage.is-pairing .ob-bluetooth-pulse i:nth-child(2){animation-delay:.67s}
#onboarding .ob-pair-stage.is-pairing .ob-bluetooth-pulse i:nth-child(3){animation-delay:1.34s}
#onboarding .ob-pair-stage.is-pairing .ob-bluetooth-pulse i:nth-child(4){animation-delay:2.01s}
#onboarding .ob-pair-stage.is-connected .ob-bluetooth-pulse{opacity:.75}
#onboarding .ob-pair-stage.is-connected .ob-bluetooth-pulse i{width:54px;height:54px;opacity:.28;border-color:var(--ob-accent)}
@keyframes ob-bluetooth-ring{0%{transform:scale(.4);opacity:0}16%{opacity:.3}72%{opacity:.11}100%{transform:scale(5.5);opacity:0}}
#onboarding[data-screen=pair] .ob-page-main{position:static}
#onboarding[data-screen=pair] .ob-pair-stage{position:absolute;top:50%;left:22px;width:calc(100% - 44px);height:72px;min-height:0;transform:translateY(-50%);gap:0}
#onboarding[data-screen=pair] .ob-bluetooth-pulse{display:none}
@media(max-height:660px){#onboarding .ob-pair-stage{gap:16px}#onboarding .ob-bluetooth-pulse{width:106px;height:106px}#onboarding .ob-p1-panel{height:64px}}
#onboarding .ob-system-scrim{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:10px;background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#onboarding .ob-system-permission{width:min(272px,100%);overflow:hidden;text-align:center;background:rgba(246,246,250,.98);color:#17171a;box-shadow:0 12px 35px rgba(0,0,0,.13)}
#onboarding .ob-ios-permission{border-radius:14px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
#onboarding .ob-system-copy{padding:18px 15px 14px}
#onboarding .ob-system-copy h2{font-family:inherit;font-size: 16px;font-weight:600;line-height:1.25;letter-spacing:0;margin:0 0 6px}
#onboarding .ob-system-copy p{font-family:inherit;font-size: 15px;line-height:1.35;margin:0}
#onboarding .ob-system-actions{display:flex;border-top:1px solid rgba(60,60,67,.14)}
#onboarding .ob-system-actions button{flex:1;min-height:45px;border:0;background:transparent;color:#007aff;font-family:inherit;font-size: 16px;font-weight:400;padding:8px 5px}
#onboarding .ob-system-actions button+button{border-left:1px solid rgba(60,60,67,.14);font-weight:600}
#onboarding .ob-system-actions button:focus-visible{outline:2px solid #007aff;outline-offset:-3px}
#onboarding[data-theme=dark] .ob-system-permission{background:rgba(43,43,46,.98);color:#f5f5f7}
#onboarding[data-theme=dark] .ob-system-actions{border-color:rgba(255,255,255,.18)}
#onboarding[data-theme=dark] .ob-system-actions button{color:#5cbbff}
#onboarding[data-theme=dark] .ob-system-actions button+button{border-color:rgba(255,255,255,.18)}
#onboarding .ob-android-permission{border-radius:28px;text-align:left;padding:8px 20px 18px;font-family:Roboto,'Segoe UI',sans-serif}
#onboarding .ob-android-permission .ob-system-copy{padding:18px 4px 20px}
#onboarding .ob-android-permission .ob-system-copy h2{font-size: 17px;line-height:1.3}
#onboarding .ob-android-permission .ob-system-copy p{color:#626269;font-size: 15px;margin-top:11px}
#onboarding[data-theme=dark] .ob-android-permission .ob-system-copy p{color:#babac0}
#onboarding .ob-android-permission .ob-system-actions{border:0;flex-direction:column;gap:7px}
#onboarding .ob-android-permission .ob-system-actions button{min-height:42px;flex:none;border:0;border-radius:99px;background:#d6e3ff;color:#182f61;font-size: 16px;font-weight:600}
#onboarding .ob-android-permission .ob-system-actions button+button{border:0;background:transparent;color:#415a8d}
#onboarding[data-theme=dark] .ob-android-permission .ob-system-actions button{background:#344b78;color:#e0e9ff}
#onboarding[data-theme=dark] .ob-android-permission .ob-system-actions button+button{background:transparent;color:#a8c8ff}
#onboarding .ob-permission{width:100%;padding:24px 18px;border-radius:22px;background:var(--ob-card);border:1px solid var(--ob-line);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
#onboarding .ob-fingerprint{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--ob-bg);color:var(--ob-accent);font-size: 45px;line-height:1;border:1px solid var(--ob-line)}
#onboarding .ob-permission strong{font-family:'Lay Grotesk',system-ui,sans-serif;font-size: 16px}
#onboarding .ob-permission p{font-size: 14px;line-height:1.5;color:var(--ob-sub);margin:0}
#onboarding .ob-network{width:100%;border-radius:19px;padding:18px;background:var(--ob-card);border:1px solid var(--ob-line)}
#onboarding .ob-network-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
#onboarding .ob-network-icon{width:42px;height:42px;border-radius:50%;background:#d7f0f5;color:#367c8e;display:grid;place-items:center;font-size: 22px}
#onboarding .ob-network strong{font-size: 16px}
#onboarding .ob-network small{display:block;color:var(--ob-sub);font-size: 13px;margin-top:4px}
#onboarding .ob-network-list{width:100%;display:flex;flex-direction:column;gap:7px}
#onboarding .ob-network-choice{min-height:52px;border:1px solid var(--ob-line);border-radius:13px;background:var(--ob-card);color:var(--ob-ink);display:flex;justify-content:space-between;align-items:center;padding:0 13px;font-size: 15px;text-align:left}
#onboarding .ob-network-choice span:last-child{color:var(--ob-sub)}
#onboarding .ob-password-card{width:100%;background:var(--ob-card);border:1px solid var(--ob-line);border-radius:19px;padding:18px}
#onboarding .ob-password-card .ob-field{margin-top:16px}
#onboarding .ob-connect-visual{width:100%}
#onboarding .ob-status-list{display:flex;flex-direction:column;width:100%;margin-top:10px;border-top:1px solid var(--ob-line)}
#onboarding .ob-status{min-height:39px;border-bottom:1px solid var(--ob-line);padding:0 3px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size: 15px;font-weight:500}
#onboarding .ob-status-indicator{color:var(--ob-accent);font-size: 16px;line-height:1;white-space:nowrap;min-width:20px;text-align:center}
#onboarding .ob-status-indicator.pending{font-size: 13px;letter-spacing:1px;animation:ob-status-wait 1.5s ease-in-out infinite}
#onboarding .ob-orbit-canvas{width:232px;height:176px;display:block}
#onboarding .ob-orbit-wrap{display:grid;place-items:center;width:232px;height:176px;margin:auto;position:relative;background:transparent}
#onboarding[data-screen=unlocking] .ob-visual-card,#onboarding[data-screen=wifiSearching] .ob-visual-card{background:transparent}
#onboarding .ob-success-ring{width:160px;height:160px;border-radius:50%;border:1px solid rgba(168,207,218,.45);box-shadow:0 0 45px rgba(168,207,218,.24),inset 0 0 35px rgba(168,207,218,.12);display:grid;place-items:center;color:var(--ob-accent);font-size: 54px;animation:ob-breathe 3s ease-in-out infinite}
#onboarding .ob-success-label{font-size: 13px;letter-spacing:.13em;color:var(--ob-accent);text-align:center;margin-top:14px}
#onboarding .ob-fade-in{animation:ob-enter .4s ease both}
#onboarding[data-screen=connecting] .ob-page-main{align-items:flex-start}
#onboarding[data-screen=connecting] .ob-orbit-wrap{margin:0 auto 7px}
#onboarding[data-screen=connecting] .ob-status-list{margin-top:8px}
#onboarding[data-screen=connecting] .ob-bottom{margin-top:7px}
@keyframes ob-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes ob-aura{from{transform:rotate(-8deg) scale(.94);opacity:.65}to{transform:rotate(9deg) scale(1.04);opacity:1}}
@keyframes ob-scan{to{top:84%}}
@keyframes ob-pulse{50%{opacity:.35;transform:scale(1.1)}}
@keyframes ob-link{0%,100%{opacity:.25;box-shadow:none}50%{opacity:1;box-shadow:0 0 7px #a8cfda}}
@keyframes ob-status-wait{50%{opacity:.35}}
@keyframes ob-breathe{50%{box-shadow:0 0 65px rgba(168,207,218,.32),inset 0 0 44px rgba(168,207,218,.16);transform:scale(1.03)}}
@media(max-height:660px){#onboarding .ob-shell{padding:17px 18px 15px}#onboarding .ob-theme-toggle{top:17px;right:18px}#onboarding .ob-progress{margin:10px 0 11px}#onboarding .ob-title{font-size: 24px}#onboarding .ob-visual-card{min-height:180px}#onboarding .ob-auth-pill{padding:22px 21px;min-height:380px}#onboarding .ob-auth-sub{margin-bottom:10px}#onboarding .ob-auth-tabs{margin-bottom:10px}#onboarding .ob-field input{height:34px}#onboarding .ob-primary,#onboarding .ob-secondary{min-height:40px}}
@media(max-height:660px){#onboarding .ob-welcome{padding:26px 22px 23px}#onboarding .ob-welcome-wave-wrap{margin:12px -22px 2px;min-height:145px}#onboarding .ob-welcome-bottom h1{font-size: 26px}#onboarding .ob-welcome-bottom p{margin-bottom:18px}#onboarding .ob-welcome-actions .ob-primary,#onboarding .ob-welcome-actions .ob-secondary{min-height:43px}}
@media(max-height:660px){#onboarding[data-screen=welcome] .ob-theme-toggle{top:26px;right:22px}}

/* Reuse the reference opening-page wave above the existing login capsule. */
#onboarding .ob-auth-wave-wrap{position:relative;flex:0 0 clamp(115px,21vh,180px);min-height:0;margin:10px -22px 0;overflow:hidden}
#onboarding .ob-auth .ob-auth-pill-wrap{min-height:0}
#onboarding .ob-auth .ob-auth-pill{height:min(94%,540px)}
@media(max-height:660px){#onboarding .ob-auth-wave-wrap{flex-basis:100px;margin:5px -18px 0}#onboarding .ob-auth .ob-auth-pill{min-height:350px;padding:22px 21px}}
@media(prefers-reduced-motion:reduce){#onboarding .ob-auth-glow{animation:none}}