.onboard-dialog{position:fixed;inset:0;width:100%;max-width:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--bg-panel);color:var(--text-primary);overflow:auto;z-index:2000}.onboard-dialog::backdrop{background:var(--bg-panel)}
.onboard-dialog.onboard-preflight-gate{opacity:0!important;pointer-events:none!important;background:transparent!important}.onboard-dialog.onboard-preflight-gate::backdrop{background:transparent!important}
.onboard-scene{--ob-cyan:color-mix(in srgb,var(--pixel-cyan) 50%,var(--betooth-paper));--ob-orange:var(--betooth-orange);position:relative;isolation:isolate;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 22px 40px;background:var(--bg-panel) url('../assets/onboarding/study-room.png') center/cover no-repeat;font-family:inherit}
.onboard-brand{position:relative;z-index:2;text-align:center;margin-bottom:20px}.onboard-logo{font-family:BetoothPixel,monospace;font-weight:700;font-size:clamp(46px,5.2vw,78px);line-height:1;color:var(--ob-cyan);letter-spacing:-2px}.onboard-logo span:first-child,.onboard-logo sup{color:var(--ob-orange)}.onboard-logo sup{font-size:.6em;vertical-align:super}.onboard-brand p{color:var(--ob-cyan);font-size:14px;letter-spacing:3px;margin:10px 0 0}
.onboard-card{position:relative;z-index:2;width:min(700px,100%);padding:28px 42px 34px;background:color-mix(in srgb,var(--bg-panel) 94%,transparent);border:2px solid var(--pixel-cyan);box-shadow:0 0 0 4px var(--bg-panel),0 0 0 6px var(--pixel-cyan),8px 8px 0 color-mix(in srgb,var(--bg-page) 70%,transparent);clip-path:polygon(0 18px,6px 18px,6px 8px,18px 8px,18px 0,calc(100% - 18px) 0,calc(100% - 18px) 8px,calc(100% - 6px) 8px,calc(100% - 6px) 18px,100% 18px,100% calc(100% - 18px),calc(100% - 6px) calc(100% - 18px),calc(100% - 6px) calc(100% - 8px),calc(100% - 18px) calc(100% - 8px),calc(100% - 18px) 100%,18px 100%,18px calc(100% - 8px),6px calc(100% - 8px),6px calc(100% - 18px),0 calc(100% - 18px))}
.onboard-progress{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin-bottom:24px}.onboard-dots{display:flex;gap:12px}.onboard-dots i{display:block;width:15px;height:15px;border:2px solid var(--pixel-cyan);clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}.onboard-dots i.done{background:var(--text-primary);border-color:var(--betooth-orange);box-shadow:0 0 10px var(--betooth-orange)}
.onboard-card h1{font-family:BetoothPixel,monospace;font-size:clamp(32px,3.4vw,48px);font-weight:700;line-height:1.1;text-align:center;margin:0 0 10px;outline:none}.onboard-welcome-brand{display:block;font-size:clamp(48px,6vw,76px);color:var(--ob-cyan);letter-spacing:2px;margin-top:6px}.onboard-subtitle{color:var(--ob-cyan);text-align:center;font-size:20px;line-height:1.5;margin:0 0 24px}.onboard-body{min-width:0}
.onboard-field{display:block;margin:0 0 18px;font-size:16px;color:var(--text-primary)}.onboard-field input,.onboard-field select{display:block;width:100%;margin-top:8px;height:50px;padding:10px 16px;border:2px solid var(--pixel-cyan);border-radius:0;background:var(--bg-panel);color:var(--text-primary);font:inherit;box-sizing:border-box}.onboard-field select option{background:var(--bg-panel);color:var(--text-primary)}.onboard-help{color:var(--text-secondary);font-size:14px;line-height:1.5;margin:12px 0}.onboard-actions{display:flex;gap:18px;margin-top:26px}.onboard-actions button{flex:1;min-height:58px;font-size:26px;font-family:BetoothPixel,monospace;font-weight:700}
.onboard-dialog button{border-radius:0;cursor:pointer}.onboard-primary{background:linear-gradient(var(--betooth-orange),var(--betooth-orange));border:3px solid var(--betooth-orange);color:var(--text-primary);box-shadow:inset 0 0 0 3px var(--betooth-orange),4px 4px 0 var(--betooth-orange);font-weight:700;clip-path:polygon(0 12px,6px 12px,6px 6px,12px 6px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 6px,calc(100% - 6px) 6px,calc(100% - 6px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 6px) calc(100% - 12px),calc(100% - 6px) calc(100% - 6px),calc(100% - 12px) calc(100% - 6px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 6px),6px calc(100% - 6px),6px calc(100% - 12px),0 calc(100% - 12px))}.onboard-secondary{color:var(--text-primary);border:2px solid var(--pixel-cyan);background:var(--bg-panel);box-shadow:inset 0 0 0 3px var(--bg-panel)}
.onboard-modes{display:flex;gap:16px;margin-bottom:22px}.onboard-modes button{flex:1;min-height:58px;font-size:17px}.onboard-modes button[aria-pressed=true],.onboard-choice[aria-pressed=true]{border-color:var(--betooth-orange);box-shadow:inset 0 0 0 2px var(--betooth-orange),0 0 20px var(--betooth-orange)}
.onboard-genders{display:grid;grid-template-columns:1fr 1fr;gap:28px}.onboard-choice{border:2px solid var(--pixel-cyan);background:var(--bg-panel);padding:8px;color:var(--text-primary);font:700 25px BetoothPixel,monospace;min-width:0}.onboard-genders .onboard-portrait{height:205px;width:100%;margin-bottom:12px}.onboard-portrait{display:block;background-image:url('../assets/onboarding/avatars.png');background-size:200% 300%;background-repeat:no-repeat;image-rendering:pixelated;aspect-ratio:1.5/1}.onboard-avatar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.onboard-avatar-grid .onboard-portrait{width:100%;height:auto}.onboard-photo-preview{display:block;width:160px;height:160px;object-fit:cover;margin:18px auto;border:3px solid var(--text-secondary)}.onboard-review{display:flex;align-items:center;gap:28px;padding:20px;border:1px dashed var(--pixel-cyan)}.onboard-review .profile-avatar{flex-shrink:0;width:110px;height:110px;border-radius:0}.onboard-review dl{min-width:0;margin:0}.onboard-review dt{color:var(--text-secondary);font-size:13px;margin:12px 0 2px}.onboard-review dd{margin:0;font-size:17px;overflow-wrap:anywhere}.onboard-ready{text-align:center;color:var(--text-secondary);font-size:16px;margin:20px 0 0}.onboard-error{color:var(--text-secondary);padding:12px;background:var(--surface-orange);border-left:3px solid var(--text-secondary);font-size:15px}
.onboard-beto{position:absolute;z-index:3;pointer-events:none;width:clamp(180px,24vw,310px);left:max(12px,calc(50% - 650px));bottom:8%;filter:drop-shadow(8px 10px 0 color-mix(in srgb,var(--bg-page) 70%,transparent))}.onboard-beto img{display:block;width:100%;height:auto;image-rendering:pixelated}.step-1 .onboard-card{width:min(610px,100%)}.step-1 .onboard-body{height:270px;position:relative}.step-1 .onboard-beto{width:270px;left:calc(50% - 135px);bottom:140px}.step-1 .onboard-guide-copy{text-align:center;margin:0;color:var(--text-secondary);font-size:15px}.onboard-spark{font-size:40px;color:var(--pixel-cyan)}
.onboard-dialog button:hover:not(:disabled){filter:brightness(1.1)}.onboard-dialog button:active:not(:disabled){translate:0 2px}.onboard-dialog :is(button,input,select):focus-visible{outline:3px solid var(--text-secondary);outline-offset:4px}.onboard-dialog button:disabled{opacity:.6;cursor:wait}.profile-avatar .onboard-portrait{width:100%;height:100%;position:absolute;inset:0}.profile-avatar:has(.onboard-portrait){border-radius:0}
@media(max-width:1100px){.onboard-card{width:min(640px,100%)}.onboard-beto{width:150px;left:8px;bottom:22px}.step-1 .onboard-beto{width:240px;left:calc(50% - 120px);bottom:130px}.onboard-genders .onboard-portrait{height:180px}}
@media(max-width:760px){.onboard-scene{padding:22px 16px 110px;justify-content:flex-start;background-position:58% center}.onboard-brand{margin-bottom:18px}.onboard-brand p{font-size:11px;letter-spacing:2px}.onboard-card{padding:22px 22px 28px}.onboard-card h1{font-size:32px}.onboard-subtitle{font-size:16px;margin-bottom:18px}.onboard-progress{margin-bottom:20px}.onboard-beto{position:absolute;width:100px;bottom:5px;left:calc(50% - 50px)}.step-1 .onboard-body{height:220px}.step-1 .onboard-beto{width:200px;left:calc(50% - 100px);bottom:208px}.onboard-genders{gap:14px}.onboard-genders .onboard-portrait{height:140px}.onboard-avatar-grid{gap:10px}.onboard-modes{gap:10px}.onboard-modes button{font-size:14px;min-height:52px}.onboard-actions{gap:12px}.onboard-actions button{font-size:22px;min-height:54px}.onboard-review{gap:16px;padding:12px}.onboard-review .profile-avatar{width:76px;height:76px}.onboard-review dd{font-size:15px}}
@media(max-width:390px){.onboard-genders .onboard-portrait{height:112px}.onboard-card{padding:22px 16px}.onboard-review{align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){.onboard-dialog button{transition:none}.onboard-dialog button:active{translate:none}}
/* Local box sizing also keeps independently hosted previews faithful to production. */
.onboard-scene,.onboard-scene *{box-sizing:border-box}
.step-1 .onboard-body{height:auto;display:flex;flex-direction:column;align-items:center}
.step-1 .onboard-spark{display:none}
.step-1 .onboard-beto{position:relative;left:auto;bottom:auto;width:300px;margin:8px auto 0}
.onboard-welcome-brand span:first-child{color:var(--betooth-orange)}
@media(max-width:760px){.step-1 .onboard-beto{width:210px}.step-1 .onboard-body{height:auto}}
.profile-avatar:has(.onboard-portrait){position:relative;overflow:hidden;display:inline-flex}
.onboard-review .profile-avatar{position:relative;display:inline-flex;overflow:hidden}
.onboard-review .profile-avatar img{width:100%;height:100%;object-fit:cover}
.onboard-load-error{position:fixed;bottom:20px;inset-inline:20px;z-index:700;max-width:500px;padding:16px;border:2px solid var(--betooth-orange);background:var(--bg-panel);color:var(--text-primary);box-shadow:4px 4px 0 var(--bg-page)}
.onboard-load-error button{min-height:44px;padding:8px 16px;border:1px solid var(--pixel-cyan);background:var(--bg-card);color:var(--text-primary);margin-inline-end:10px}
@media(max-width:390px){.onboard-actions{flex-direction:column-reverse}.onboard-actions button{width:100%;flex:none;font-size:20px;min-height:54px}}
.onboard-scene[dir=rtl] :is(h1,.onboard-actions button,.onboard-choice){font-family:Arial,sans-serif}
.beto-tour-panel{position:fixed;z-index:1100;inset:auto 24px 24px auto;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:18px;background:var(--bg-panel);color:var(--text-primary);border:2px solid var(--border-active);box-shadow:4px 4px 0 var(--bg-page);line-height:1.7}
.beto-tour-overlay{position:fixed;inset:0;z-index:1098;background:color-mix(in srgb,var(--bg-page) 72%,transparent);touch-action:none}
.sidebar:has(.beto-tour-highlight){z-index:1099}
.sidebar:has(.beto-tour-highlight) .nav-item:not(.beto-tour-highlight){opacity:.35}
.beto-tour-highlight{position:relative;z-index:1099;isolation:isolate;background:var(--bg-panel)}
.beto-tour-panel img{float:inline-end;width:70px;height:90px;object-fit:contain}.beto-tour-panel h2{font-size:22px;margin:4px 0}.beto-tour-panel p{margin:6px 0}.beto-tour-panel button{min-height:44px;padding:8px 14px;margin:4px;border:1px solid var(--border-active);background:var(--bg-card);color:var(--text-primary)}.beto-tour-panel button:focus-visible{outline:3px solid var(--accent-orange);outline-offset:2px}.beto-tour-highlight{outline:3px solid var(--accent-orange)!important;outline-offset:3px}
@media(max-width:600px){.beto-tour-panel{inset:auto 16px 16px;width:calc(100vw - 32px)}}