:root{--bg:#04111f;--panel:#091d2e;--line:#29435b;--green:#72c441;--orange:#ff6800;--muted:#9cafc2;color:#f5f7fa;background:var(--bg);font-family:Manrope,sans-serif}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:var(--bg)}
button,input,select{font:inherit}
.material-symbols-outlined{font-size:20px}
.ob-shell{min-height:100vh;background:linear-gradient(rgba(4,17,31,.86),rgba(4,17,31,.96)),url('/assets/onboarding-beta-stadium.png') center/cover fixed}
.ob-top{height:84px;display:flex;align-items:center;gap:15px;padding:12px clamp(18px,5vw,76px);border-bottom:1px solid rgba(255,255,255,.1);background:rgba(3,15,28,.94)}
.ob-top>a,.ob-top picture{display:flex;flex:0 0 auto}
.ob-top img{width:70px;height:52px;object-fit:contain}
.ob-top div{display:grid}
.ob-top strong{font:800 21px Lexend}
.ob-top mark{padding:3px 6px;border-radius:99px;background:var(--orange);color:white;font-size:9px;text-transform:uppercase}
.ob-top small{color:var(--muted)}
.ob-top>span{display:flex;align-items:center;gap:7px;margin-left:auto;color:#c8d5e0;font-size:12px}
.ob-top>span i{color:var(--green)}
.ob-progress{display:grid;grid-template-columns:repeat(4,1fr);max-width:940px;margin:0 auto;padding:21px 20px 13px;list-style:none}
.ob-progress li{position:relative;display:flex;justify-content:center;align-items:center;gap:9px;color:#73889b}
.ob-progress li:not(:last-child):after{content:"";position:absolute;top:17px;left:65%;right:-35%;height:2px;background:#40566a}
.ob-progress li.is-done:after{background:var(--green)}
.ob-progress b{z-index:1;display:grid;width:35px;height:35px;place-items:center;border:2px solid #607487;border-radius:50%;background:#0a1a29;font:800 12px Lexend}
.ob-progress span{display:grid;font:700 12px Lexend}
.ob-progress small{font:500 9px Manrope}
.ob-progress .is-active,.ob-progress .is-done{color:white}
.ob-progress .is-active b{border-color:var(--orange);background:var(--orange)}
.ob-progress .is-done b{border-color:var(--green);background:var(--green)}
.ob-feedback{position:sticky;top:8px;z-index:10;max-width:680px;margin:8px auto;padding:12px 16px;border-radius:9px;background:#b42318;color:white;text-align:center}
.ob-stage{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:18px;max-width:1220px;margin:auto;padding:18px 26px 48px}
.ob-stage--single,.ob-stage--success{display:grid;grid-template-columns:1fr;max-width:1260px}
.ob-card,.ob-preview{min-width:0;border:1px solid rgba(115,144,170,.38);border-radius:20px;background:rgba(7,25,40,.97);box-shadow:0 22px 60px rgba(0,0,0,.25)}
.ob-card{padding:clamp(23px,3vw,42px)}
.ob-form{display:flex;flex-direction:column;gap:14px}
.ob-kicker{color:#8bdc56;font:800 11px Lexend;letter-spacing:.12em;text-transform:uppercase}
.ob-card h1{margin:3px 0 4px;font:800 clamp(31px,4vw,49px)/1.06 Lexend;letter-spacing:-.04em}
.ob-card h1 em{color:#87d752;font-style:normal}
.ob-card>p,.ob-preview>p{margin:0 0 10px;color:var(--muted);line-height:1.55}
.ob-form label,.ob-form legend,.ob-cycle{color:#dce6ee;font-size:12px;font-weight:800}
.ob-form label>b{color:var(--orange)}
.ob-form input:not([type=checkbox]):not([type=color]),.ob-cycle select{width:100%;height:49px;margin-top:7px;padding:0 14px;border:1px solid #3a536a;border-radius:9px;background:#0c2235;color:white;outline:0}
.ob-form input:focus,.ob-cycle select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(114,196,65,.15)}
.ob-form input[type=file]{padding:11px}
.ob-form input[type=color]{display:block;width:100%;height:48px;margin-top:7px;border:1px solid #3a536a;border-radius:9px;background:#0c2235}
.ob-primary,.ob-secondary,.ob-google{display:flex;min-height:49px;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;font:800 13px Lexend;text-decoration:none;cursor:pointer}
.ob-primary{background:var(--orange);color:white;box-shadow:0 10px 24px rgba(255,104,0,.2)}
.ob-primary:disabled{opacity:.45;cursor:not-allowed}
.ob-secondary{border:1px solid #52708a;background:#10283b;color:white}
.ob-google{background:white;color:#172533}
.ob-google img{width:20px}
.ob-divider{display:flex;align-items:center;gap:12px;color:#71879a;font-size:10px;text-transform:uppercase}
.ob-divider:before,.ob-divider:after{content:"";height:1px;flex:1;background:#31485d}
.ob-check{display:flex;align-items:flex-start;gap:9px;font-weight:600!important;line-height:1.45}
.ob-check input{width:17px;height:17px;margin:2px 0;accent-color:var(--green)}
.ob-check a,.ob-login a,.ob-link{color:#91db62}
.ob-login{text-align:center;color:var(--muted)}
.ob-preview{display:flex;flex-direction:column;gap:14px;padding:20px;overflow:hidden}
.ob-live{position:relative;min-height:330px;overflow:hidden;border-radius:14px;background:#020910}
.ob-live img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.76}
.ob-live span{position:absolute;top:18px;left:18px;padding:7px 9px;background:#dd2830;font:800 9px Lexend}
.ob-live strong{position:absolute;right:18px;bottom:18px;left:18px;padding:15px;border-left:4px solid var(--green);background:rgba(3,15,25,.94);font:800 15px Lexend}
.ob-preview h2{margin:3px 0 0;font:800 25px/1.2 Lexend}
.ob-platforms,.ob-themes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:7px}
.ob-platforms button,.ob-themes button{min-height:48px;border:1px solid #39536b;border-radius:8px;background:#0b2032;color:#dce7ef;font-weight:800}
.ob-platforms button{display:flex;align-items:center;justify-content:center;gap:9px}
.ob-platforms button img{width:21px;height:21px;object-fit:contain}
.ob-platforms .is-selected,.ob-themes .is-selected{border-color:var(--green);background:rgba(114,196,65,.11)}
fieldset{margin:0;padding:0;border:0}
.ob-found{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:11px;padding:12px;border:1px solid rgba(114,196,65,.5);border-radius:10px;background:rgba(114,196,65,.08)}
.ob-found--waiting{border-color:#39536b;background:#0b2032}
.ob-found--waiting small,.ob-found--waiting>i{color:#8fa4b7}
.ob-channel-placeholder{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;background:#20374b;color:#9cafc2}
.ob-found [hidden]{display:none!important}
.ob-found img{width:46px;height:46px;border-radius:50%;object-fit:cover;background:#20374b}
.ob-found div{display:grid}
.ob-found small,.ob-found>i{color:#8bdc56}
.ob-found strong{font:800 14px Lexend}
.ob-found span{color:var(--muted);font-size:10px}
.ob-link,.ob-back{border:0;background:none;font-weight:800;cursor:pointer}
.ob-back{padding:10px;color:#9fb1c2}
.ob-plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
.ob-plan-grid>button{position:relative;display:flex;min-height:285px;flex-direction:column;align-items:flex-start;padding:25px;border:1px solid #385169;border-radius:14px;background:#0b2032;color:white;text-align:left;cursor:pointer}
.ob-plan-grid>button.is-selected{border:2px solid var(--orange)}
.ob-plan-grid mark{position:absolute;top:-11px;padding:5px 9px;border-radius:99px;background:var(--orange);color:white;font:800 9px Lexend;text-transform:uppercase}
.ob-plan-grid i{color:var(--green)}
.ob-plan-grid h2{margin:13px 0 6px;font:800 21px Lexend}
.ob-plan-grid strong{color:#8bdc56;font:900 25px Lexend}
.ob-plan-grid small{margin:8px 0;color:var(--muted)}
.ob-plan-grid span{width:100%;margin-top:auto;padding:11px;border:1px solid #506980;border-radius:7px;text-align:center;font-weight:800}
.ob-plan-grid .is-selected span{border-color:var(--orange);background:var(--orange)}
.ob-cycle{display:block;max-width:300px}
.ob-actions{display:flex;justify-content:flex-end;gap:12px}
.ob-actions .ob-primary{padding:0 22px}
.ob-colors{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.ob-themes{grid-template-columns:1fr 1fr}
.ob-form legend small{display:block;margin-top:4px;color:var(--muted);font-weight:500;line-height:1.35}
.ob-themes button{display:flex;align-items:center;justify-content:center;gap:9px;text-align:left}
.ob-themes button>span{display:grid}
.ob-themes button small{color:var(--muted);font-size:9px;font-weight:600}
.ob-identity-preview{--preview-primary:#65b535;--preview-secondary:#ff6b00;border-color:color-mix(in srgb,var(--preview-primary) 55%,#29435b)}
.ob-identity-preview .ob-live strong{border-left-color:var(--preview-primary);box-shadow:inset 0 -4px 0 var(--preview-secondary)}
.ob-identity-preview[data-theme-preview="light"] .ob-live strong{background:rgba(248,250,252,.94);color:#071522}
.ob-identity-preview[data-theme-preview="dark"] .ob-live strong{background:rgba(3,15,25,.94);color:#fff}
.ob-stage--success{min-height:610px;place-items:center;text-align:center}
.ob-stage--success .ob-card{max-width:690px}
.ob-stage--success .ob-card>i{display:grid;width:76px;height:76px;margin:0 auto 18px;place-items:center;border-radius:50%;background:var(--green);color:#071522;font-size:38px}
.ob-stage--success .ob-primary{margin-top:24px}
.ob-stage[hidden]{display:none!important}

@media(max-width:760px){.ob-shell{background-attachment:scroll}
.ob-top{height:70px;padding:9px 13px}
.ob-top img{width:54px;height:42px}
.ob-top>a,.ob-top picture,.ob-top picture img{width:46px;height:46px}
.ob-top picture img{object-fit:contain}
.ob-top strong{font-size:16px}
.ob-top small{font-size:8px}
.ob-top>span{font-size:0}
.ob-progress{padding:13px 10px 9px}
.ob-progress li{min-width:0;flex-direction:column;gap:5px;text-align:center}
.ob-progress b{width:29px;height:29px;flex:0 0 29px;font-size:10px}
.ob-progress span{width:100%;overflow:hidden;font-size:8px;line-height:1.1;white-space:nowrap;text-overflow:ellipsis}
.ob-progress small{display:none}
.ob-progress li:not(:last-child):after{top:14px;left:calc(50% + 15px);right:calc(-50% + 15px)}
.ob-stage{grid-template-columns:minmax(0,1fr);padding:10px 11px 28px}
.ob-card,.ob-preview{border-radius:15px}
.ob-card{padding:21px 17px}
.ob-card h1{font-size:30px}
.ob-preview{display:none}
.ob-stage[data-step="4"] .ob-preview{display:flex}
.ob-live{min-height:215px}
.ob-platforms{grid-template-columns:1fr}
.ob-plan-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:20px -17px;padding:10px 17px 18px}
.ob-plan-grid>button{min-width:82vw;scroll-snap-align:center}
.ob-actions{position:sticky;bottom:0;margin:0 -17px -21px;padding:12px 17px;background:#081b2c}
.ob-actions .ob-primary{flex:1}
.ob-colors{grid-template-columns:1fr}
}