/* First run: one chat with G Bot (js/onb.js). Ported from the mockup, docs/mockups/first-start.html. Everything is
   under .onb and ob-, so none of it leaks into the app. Only your own pieces wear your color; the rest is the night grey */
.onb{--raise2:#2e2e31;--faint:#6c6c72;--warn:#ffbe7a;--friend:#f5a3e6;position:absolute;inset:0;z-index:30;display:flex;padding:0;overflow:hidden;
  background:radial-gradient(110% 55% at 100% 0%,color-mix(in srgb,var(--me2) 11%,transparent),transparent 60%),radial-gradient(90% 45% at 0% 100%,color-mix(in srgb,var(--me) 8%,transparent),transparent 65%),var(--night)}
.onb[hidden]{display:none}
body.live .device .onb{padding-top:0}
.onb.out{animation:obOut .3s ease-in both}@keyframes obOut{to{opacity:0;transform:scale(1.02)}}
.onb button{font:inherit;color:inherit;cursor:pointer}
.onb .ob-main{flex:1;min-width:0;max-width:600px;margin:0 auto;display:flex;flex-direction:column;min-height:0;padding-top:max(8px,env(safe-area-inset-top))}
html.winapp .onb .ob-main{padding-top:40px}
.onb .ob-pv{display:none}
.device.desktop .ob-pv{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:30px;position:relative;overflow:hidden;
  background:radial-gradient(80% 60% at 70% 30%,color-mix(in srgb,var(--me2) 14%,transparent),transparent 70%),#111113}
.device.desktop .ob-main{flex:none;width:440px;margin:0;box-shadow:-1px 0 0 var(--line)}
.device.desktop .ob-thread>.ob-hero{display:none}
.onb .ob-head,.ob-hero,.ob-ringcap,.ob-welh,.ob-day,.ob-comp button,.ob-pv,.ob-who,.ob-card h4,.ob-card small,.ob-card .step,.ob-rx,.ob-top,.ob-f>span,.ob-body h2,.ob-sub,.ob-tip{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.ob-nosel,body.ob-nosel *{-webkit-user-select:none!important;user-select:none!important}

/* header: G Bot, and a thin progress line */
.onb .ob-head{flex:none;display:flex;align-items:center;gap:10px;padding:8px 16px 10px;position:relative}
.onb .ob-bot{width:38px;height:38px;border-radius:50%;background:var(--raise);display:grid;place-items:center;flex:none}
.onb .ob-bot .gmark,.ob-who .gmark{width:24px;height:24px}
.onb .ob-head b{display:block;font-weight:800;font-size:16px;line-height:1.2}
.onb .ob-head small{display:block;color:var(--muted);font-size:12px}
.onb .ob-skip{margin-left:auto;color:var(--muted);font-weight:700;font-size:14px;padding:8px 6px}
.onb .ob-skip:hover{color:var(--text)}
.onb .ob-prog{position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:999px;background:var(--raise2);overflow:hidden}
.onb .ob-prog i{position:absolute;inset:0;background:linear-gradient(90deg,var(--me),var(--me2));transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1)}

/* the thread, and its always-there scroll bar */
.onb .ob-twrap{flex:1;min-height:0;position:relative;display:flex}
.onb .ob-thread{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;padding:12px 24px 18px 16px;display:flex;flex-direction:column;gap:6px;overscroll-behavior:contain}
.onb .ob-thread::-webkit-scrollbar{display:none}
.onb .ob-sbt{position:absolute;right:5px;top:8px;bottom:8px;width:6px;border-radius:999px;background:color-mix(in srgb,var(--text) 9%,transparent);transition:width .15s;touch-action:none}
.onb .ob-sbt[hidden]{display:none}
.onb .ob-sbt:hover,.ob-sbt.drag{width:9px}
.onb .ob-sbb{position:absolute;left:0;right:0;top:0;border-radius:999px;background:linear-gradient(180deg,var(--me),var(--me2));cursor:grab;touch-action:none;min-height:28px}
.onb .ob-sbt.drag .ob-sbb{cursor:grabbing}
.onb .ob-day{align-self:center;font-size:11.5px;color:var(--muted);font-weight:700;margin:2px 0 6px}

/* the welcome: one row of every color, sliding behind the G */
.onb .ob-hero{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0 18px}
.onb .ob-ringbox{position:relative;width:100%;height:108px;align-self:stretch;flex:none;--mk:92px;-webkit-user-select:none;user-select:none}
.onb .ob-ring{position:absolute;inset:0;display:flex;align-items:center;gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 calc(50% - 11px);overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 16%,#000 calc(50% - var(--mk)/2 - 18px),transparent calc(50% - var(--mk)/2 + 6px),transparent calc(50% + var(--mk)/2 - 6px),#000 calc(50% + var(--mk)/2 + 18px),#000 84%,transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 16%,#000 calc(50% - var(--mk)/2 - 18px),transparent calc(50% - var(--mk)/2 + 6px),transparent calc(50% + var(--mk)/2 - 6px),#000 calc(50% + var(--mk)/2 + 18px),#000 84%,transparent 100%)}
.onb .ob-ring::-webkit-scrollbar{display:none}
.onb .ob-ring.drag{cursor:grabbing;scroll-snap-type:none}
.onb .ob-ring button{flex:none;width:22px;height:22px;border-radius:50%;padding:0;background:var(--c);scroll-snap-align:center;transition:transform .2s}
.onb .ob-ring button:hover{transform:scale(1.15)}
.onb .ob-mark{position:absolute;left:50%;top:50%;width:var(--mk);height:var(--mk);margin:calc(var(--mk)/-2) 0 0 calc(var(--mk)/-2);pointer-events:none;filter:drop-shadow(0 14px 26px color-mix(in srgb,var(--me) 35%,transparent))}
.onb .ob-ringcap{text-align:center;font-size:13px;font-weight:700;color:var(--muted);min-height:20px;margin-top:6px}
.onb .ob-ringcap b{color:var(--me)}
.onb .ob-ringcap .hint{opacity:.7}
.onb .ob-welh{margin:0;text-align:center;font-family:var(--display);font-weight:600;font-size:25px;line-height:1.15;text-wrap:balance}
.onb .ob-pvwel{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.onb .ob-pvwel .ob-ringbox{width:420px;height:160px;align-self:center;--mk:140px}
.onb .ob-pvwel .ob-ring{gap:16px;padding:0 calc(50% - 13px)}
.onb .ob-pvwel .ob-ring button{width:26px;height:26px}
.onb .ob-pvwel .ob-welh{font-size:40px}

/* bubbles */
.onb .ob-msg{display:flex;align-items:flex-end;gap:8px;animation:obRise .4s cubic-bezier(.2,.9,.3,1.2)}
@keyframes obRise{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.onb .ob-msg.me{justify-content:flex-end}
.onb .ob-msg.me.hasrx{margin-bottom:12px}
.onb .ob-who{width:28px;height:28px;flex:none;display:grid;place-items:center}
.onb .ob-who.blank{visibility:hidden}
.onb .ob-who .ob-av{width:28px;height:28px;font-size:13px}
.onb .ob-b{max-width:78%;padding:8px 12px;border-radius:18px;font-size:14.5px;line-height:1.35;position:relative;overflow-wrap:anywhere}
.onb .ob-b.in{background:#2a2a2e;border-bottom-left-radius:6px}
.onb .ob-b.out{background:linear-gradient(135deg,var(--me),var(--me2));color:var(--ink);border-bottom-right-radius:6px;font-weight:600}
.onb .ob-msg[data-who="friend"] .ob-b.in{background:color-mix(in srgb,var(--friend) 18%,#2a2a2e)}
.onb .ob-swdot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--ink);opacity:.35;vertical-align:-2px;margin-right:6px}
.onb .ob-gif{border-radius:16px;border-bottom-left-radius:6px;overflow:visible;width:192px;max-width:72%;line-height:0;background:#2a2a2e;position:relative}
.onb .ob-gif img{width:100%;height:auto;display:block;border-radius:inherit}
.onb .ob-phw{display:block;position:relative}
.onb .ob-photo{width:120px;height:120px;border-radius:18px;border-bottom-right-radius:6px;object-fit:cover;display:block}
.onb .ob-rx{position:absolute;left:-12px;bottom:-13px;font-size:14px;line-height:1;background:var(--raise2);border-radius:999px;padding:3px 5px;box-shadow:0 0 0 2px var(--night);animation:obRx .45s cubic-bezier(.2,1.7,.4,1)}
@keyframes obRx{from{transform:scale(0) rotate(-20deg)}}
.onb .ob-typing{background:#2a2a2e;border-radius:18px;border-bottom-left-radius:6px;padding:11px 14px;display:flex;gap:4px}
.onb .ob-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:obTd 1.2s infinite}
.onb .ob-typing i:nth-child(2){animation-delay:.15s}.ob-typing i:nth-child(3){animation-delay:.3s}
@keyframes obTd{0%,60%,100%{opacity:.3}30%{opacity:1}}
.onb .ob-av{width:44px;height:44px;font-size:18px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--ink);background:linear-gradient(135deg,var(--me),var(--me2));flex:none;overflow:hidden}
.onb .ob-av img{width:100%;height:100%;object-fit:cover;display:block}
.onb .ob-av.fr{background:var(--friend)}

/* cards he sends */
.onb .ob-card{background:#2a2a2e;border-radius:18px;border-bottom-left-radius:6px;padding:10px;max-width:88%;display:flex;flex-direction:column;gap:8px;font-size:14px}
.onb .ob-card h4{margin:0;font-family:var(--display);font-weight:600;font-size:16px}
.onb .ob-card p{margin:0;color:#c9c9ce;line-height:1.4}
.onb .ob-card .tdemo{height:150px;border-radius:14px;padding:10px;background:var(--ink);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.onb .ob-card .gifrow{display:flex;gap:6px;margin-bottom:10px;opacity:0;transform:translateY(8px);animation:obGifIn .4s 3.2s forwards;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent)}
.onb .ob-card .gifrow span{flex:none;width:60px;height:46px;font-size:22px;border-radius:10px;display:grid;place-items:center;animation:obBob 1.4s ease-in-out infinite}
.onb .ob-card .gifrow span:nth-child(2){animation-delay:.2s}.ob-card .gifrow span:nth-child(3){animation-delay:.4s}.ob-card .gifrow span:nth-child(4){animation-delay:.6s}
@keyframes obGifIn{to{opacity:1;transform:none}}
@keyframes obBob{50%{transform:translateY(-3px) rotate(-3deg)}}
.onb .ob-card .comp{height:44px;border-radius:999px;background:var(--raise);position:relative;display:flex;align-items:center;padding:0 16px;font-weight:600;overflow:hidden}
.onb .ob-card .comp::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:linear-gradient(90deg,var(--me),var(--me2)) left/0% 100% no-repeat;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:obFill 3s .3s linear forwards}
@keyframes obFill{to{background-size:100% 100%}}
.onb .ob-card .typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;animation:obType 1s steps(12) forwards;border-right:2px solid var(--me)}
@keyframes obType{to{width:12ch}}
.onb .ob-card .vbub{align-self:flex-end;width:100%;background:linear-gradient(135deg,var(--me),var(--me2));color:var(--ink);border-radius:20px;border-bottom-right-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.onb .ob-card .vtop{display:flex;align-items:center;gap:8px}
.onb .ob-card .vplay{width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--me);display:grid;place-items:center;flex:none}
.onb .ob-card .vplay svg{width:14px;height:14px}
.onb .ob-card .vwave{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.onb .ob-card .vwave i{flex:1;border-radius:2px;background:var(--ink);opacity:.35;animation:5s linear infinite}
.onb .ob-card .vlen{font-size:12px;font-weight:800}
.onb .ob-card .vtext{font-size:14px;font-weight:600;line-height:1.35}
.onb .ob-card .vtext span{opacity:.5;animation:5s infinite}
.onb .ob-card .callcard{background:var(--raise);border-radius:18px;padding:10px 12px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.onb .ob-card .callcard .ob-av{width:36px;height:36px;font-size:16px}
.onb .ob-card .callcard b{display:block;font-weight:800;font-size:14px}
.onb .ob-card .callcard small{color:var(--ok,#8fe0c8);font-size:12px;font-variant-numeric:tabular-nums}
.onb .ob-card .callcard .btns{margin-left:auto;display:flex;gap:6px}
.onb .ob-card .callcard .btns span{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--raise2)}
.onb .ob-card .callcard .btns span.end{background:#ff6b6b;color:#1a0a0a}
.onb .ob-card .callcard svg{width:16px;height:16px}
.onb .ob-card .ob-c4{align-self:center;display:grid;grid-template-columns:repeat(6,16px);gap:4px;padding:8px;border-radius:14px;background:#2b2a3a}
.onb .ob-card .ob-c4 i{width:16px;height:16px;border-radius:50%;background:var(--ink);position:relative;overflow:hidden}
.onb .ob-card .ob-c4 i b{position:absolute;inset:0;border-radius:50%;transform:translateY(-160px);animation:obDrop .5s cubic-bezier(.5,0,.6,1.3) forwards}
.onb .ob-card .ob-c4 i b.me{background:linear-gradient(135deg,var(--me),var(--me2))}
.onb .ob-card .ob-c4 i b.fr{background:var(--friend)}
@keyframes obDrop{to{transform:none}}
.onb .ob-card .gcard{display:flex;align-items:center;gap:12px}
.onb .ob-card .ob-c4.sm{grid-template-columns:repeat(6,13px);gap:3px;padding:6px;border-radius:10px;flex:none}
.onb .ob-card .ob-c4.sm i{width:13px;height:13px}
.onb .ob-card .ob-c4.sm i b{transform:none;animation:none}
.onb .ob-card .gcard small,.ob-card .suspect small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.onb .ob-card .gcard b,.ob-card .suspect b{display:block;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2}
.onb .ob-card .gcard em,.ob-card .suspect em{display:block;font-style:normal;color:var(--muted);font-size:12.5px;line-height:1.35}
.onb .ob-card .suspect{display:flex;align-items:center;gap:10px;background:var(--raise2);border-radius:14px;padding:10px 12px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--me) 30%,transparent)}
.onb .ob-card .suspect .mg{margin-left:auto;font-size:22px}
.onb .ob-card .brow{display:flex;align-items:center;gap:12px;background:var(--raise2);border-radius:14px;padding:9px 10px}
.onb .ob-card .brow .bi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink)}
.onb .ob-card .brow b{display:block;font-weight:800;font-size:14.5px}
.onb .ob-card .brow small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.onb .ob-card .brow em{font-style:normal;font-weight:800;color:var(--ok,#8fe0c8)}
.onb .ob-card .brow.warn{background:color-mix(in srgb,var(--warn) 10%,var(--raise2));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--warn) 45%,transparent)}
.onb .ob-card .brow.warn em{color:var(--warn)}
.onb .ob-card .steps{display:flex;flex-direction:column;gap:6px}
.onb .ob-card .step{display:flex;gap:10px;align-items:center;background:var(--raise2);border-radius:12px;padding:9px 10px;font-size:13.5px}
.onb .ob-card .step .n{width:24px;height:24px;border-radius:50%;background:var(--night);display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:13px;flex:none}
.onb .ob-card .kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:6px;background:var(--night);color:var(--text);font-weight:800;font-size:13px;vertical-align:-5px}
.onb .ob-card .kbd svg{width:15px;height:15px}
.onb .ob-card .banner{background:rgba(40,40,44,.92);border-radius:16px;padding:10px 12px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.onb .ob-card .banner .ic{width:36px;height:36px;border-radius:10px;background:#1b1b1f;display:grid;place-items:center;flex:none}
.onb .ob-card .banner .ic .gmark{width:24px;height:24px}
.onb .ob-card .banner>div{flex:1;min-width:0}
.onb .ob-card .banner b{font-size:14px;font-weight:800;display:flex;justify-content:space-between;gap:8px}
.onb .ob-card .banner b em{font-style:normal;color:var(--muted);font-weight:600;font-size:12px}
.onb .ob-card .banner small{font-size:13px;color:#d4d4d8;display:block}
.onb .whoami{align-self:flex-start;display:flex;align-items:center;gap:10px;background:var(--raise2);border-radius:999px;padding:6px 16px 6px 6px}
.onb .whoami .ob-av{width:34px;height:34px;font-size:15px}
.onb .whoami b{font-weight:800;font-size:14px}
.onb .whoami small{color:var(--muted);font-size:12.5px}

/* the box at the bottom: whatever you can answer with */
.onb .ob-comp{flex:none;padding:10px 14px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px;box-shadow:0 -14px 22px -16px rgba(0,0,0,.7);background:var(--night);position:relative;z-index:1}
.onb .ob-comp:empty{display:none}
.onb .ob-comp>*{animation:obRise .3s cubic-bezier(.2,.9,.3,1.2)}
.onb .ob-cin{display:flex;gap:8px;align-items:center}
.onb .ob-inp{flex:1;display:flex;align-items:center;gap:4px;height:46px;border-radius:999px;background:var(--raise);padding:0 16px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s;min-width:0}
.onb .ob-inp:focus-within{box-shadow:inset 0 0 0 2px var(--me)}
.onb .ob-inp input{flex:1;min-width:0;border:0;background:none;color:var(--text);font:600 16px var(--body);outline:none;height:100%;caret-color:var(--me);padding:0}
.onb .ob-inp input::placeholder{color:var(--faint)}
.onb .ob-inp .at{color:var(--muted);font-weight:700;font-size:16px}
.onb .ob-inp .eye{color:var(--muted);padding:4px;display:grid}
.onb .ob-inp .eye svg{width:20px;height:20px}
.onb .ob-send{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--me),var(--me2));color:var(--ink)!important;display:grid;place-items:center;flex:none;transition:opacity .2s,transform .15s}
.onb .ob-send:disabled{opacity:.3;cursor:default}
.onb .ob-send:not(:disabled):active{transform:scale(.94)}
.onb .ob-send svg{width:20px;height:20px}
.onb .ob-hint{font-size:13px;color:var(--faint);min-height:18px;display:flex;align-items:center;gap:6px;padding-left:16px;margin:0}
.onb .ob-hint:empty{min-height:0}
.onb .ob-cin+.ob-hint:empty{min-height:18px}
.onb .ob-hint.ok{color:var(--ok,#8fe0c8)}
.onb .ob-hint.bad{color:var(--warn)}
.onb .ob-hint button{color:var(--me)!important;font-weight:800;font-size:13px;padding:0;text-decoration:underline;text-underline-offset:2px}
.onb .ob-spin{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line);border-top:2px solid var(--me);box-sizing:border-box;animation:obSp .7s linear infinite}
@keyframes obSp{to{transform:rotate(360deg)}}
.onb .ob-cbtns{display:flex;flex-wrap:wrap;gap:8px}
.onb .ob-cta{flex:1 1 auto;height:46px;border-radius:999px;background:linear-gradient(135deg,var(--me),var(--me2));color:var(--ink)!important;font-family:var(--display);font-weight:600;font-size:16px;padding:0 18px;transition:transform .15s,opacity .2s,filter .2s;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--me) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.onb .ob-cta:hover{filter:brightness(1.05)}
.onb .ob-cta:active{transform:scale(.98)}
.onb .ob-cta:disabled{opacity:.35;cursor:default;filter:saturate(.4)}
.onb .ob-sec{flex:0 1 auto;height:46px;border-radius:999px;background:var(--raise2);font-weight:800;font-size:15px;padding:0 18px}
.onb .ob-sec:hover{background:#38383c}
.onb .ob-link{color:var(--muted)!important;font-weight:700;font-size:15px;height:34px}
.onb .ob-link:hover{color:var(--text)!important}
.onb .ob-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.onb .ob-chip{background:var(--raise);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;box-shadow:inset 0 0 0 1px var(--line)}
.onb .ob-chip:hover{background:color-mix(in srgb,var(--me) 18%,var(--raise))}
.onb .ob-sws{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.onb .ob-sw{aspect-ratio:1;max-width:100%;border-radius:50%;padding:0;background:var(--c);transition:transform .15s}
.onb .ob-sw:hover{transform:scale(1.1)}
.onb .ob-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--night),0 0 0 4px var(--c)}
.onb .ob-row2{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 2px}
.onb .fine{font-size:12.5px;color:var(--faint);margin:0;line-height:1.4}
.onb .ob-fine{text-align:center}

/* desktop preview */
.onb .ob-pv .pvcap{color:var(--faint);font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.onb .ob-pv .pvwin{width:min(440px,100%);border-radius:22px;background:var(--night);box-shadow:0 20px 50px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(180deg,color-mix(in srgb,var(--friend) 10%,var(--night)),color-mix(in srgb,var(--friend) 5%,var(--night)))}
.onb .ob-pv .pvhead{display:flex;align-items:center;gap:10px;padding:12px 14px 8px}
.onb .ob-pv .pvhead b{display:block;font-weight:800;font-size:16px}
.onb .ob-pv .pvhead small{color:var(--muted);font-size:12px}
.onb .ob-pv .pvmsgs{min-height:200px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.onb .ob-pv .pvmsgs .in{align-self:flex-start}.ob-pv .pvmsgs .out{align-self:flex-end}
.onb .ob-pv .pvcomp{display:flex;gap:8px;align-items:center;padding:8px 12px 14px}
.onb .ob-pv .pvplus{width:40px;height:40px;border-radius:50%;background:var(--raise2);display:grid;place-items:center;flex:none;font-size:20px}
.onb .ob-pv .pvbox{flex:1;height:42px;border-radius:999px;background:var(--raise);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--me) 35%,transparent);display:flex;align-items:center;padding:0 16px;color:var(--faint);font-size:15px}
.onb .ob-pv .whoami{align-self:center}
.onb .ob-pvbig{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.onb .ob-pvbig .ob-mark{position:static;margin:0;width:150px;height:150px}
.onb .ob-pvbig .wm{font-family:var(--display);font-weight:600;font-size:64px;line-height:1;letter-spacing:-.01em}
.onb .ob-pvbig p{color:var(--muted);font-size:16px;margin:0;max-width:30ch}

/* sign in */
.onb .ob-top{height:46px;display:flex;align-items:center;padding:0 10px;flex:none}
.onb .ob-back{width:40px;height:40px;font-size:32px;border-radius:50%;display:grid;place-items:center;line-height:1;padding-bottom:4px}
.onb .ob-back:hover{background:var(--raise)}
.onb .ob-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:10px 24px}
.onb .ob-body h2{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;margin:0}
.onb .ob-sub{color:var(--muted);margin:4px 0 0;font-size:15px}
.onb .ob-f{display:flex;flex-direction:column;gap:6px}
.onb .ob-f>span{font-size:13px;font-weight:800;color:var(--muted)}
.onb .ob-f .ob-inp{flex:none;height:50px;border-radius:14px}
.onb .ob-body .ob-hint{padding-left:0}
.onb .ob-foot{flex:none;padding:10px 24px max(22px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:6px}
.onb .ob-foot .ob-cta{height:52px;font-size:18px}

/* the photo crop opens over setup */
#device:has(.onb:not([hidden])) .crop{z-index:31}

/* one-time tip on the chats list after setup */
.ob-tip{position:absolute;left:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:6;padding:10px 12px 10px 14px;border-radius:16px;background:var(--raise);box-shadow:0 10px 28px rgba(0,0,0,.45),inset 0 0 0 1px var(--line);display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);animation:obRise .4s cubic-bezier(.2,.9,.3,1.2)}
.ob-tip b{color:var(--text)}
.ob-tip button{margin-left:auto;color:var(--faint,#6c6c72);font-size:16px;padding:4px 6px}
.ob-tip.out{opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}

@media (prefers-reduced-motion:reduce){.onb *,.onb *::before,.ob-tip{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}}
.onb .ob-f input{height:100%;border:0;background:none;padding:0;border-radius:0;width:auto}