/* Onboarding (#/welcome, js/welcome.js), rs-wire: the Riverside-review mockup (.orch/qa/flow-design/riverside-review/onboarding.html).
   Every rule is scoped to the welcome section (.onb); keyframes carry an onb- prefix. Shell tokens (--rs-*) from css/rs-shell.css.
   Layout: a slim bar (bird, Volare, Skip for now), the page head with the step pill, then Review's split: the decision in a white
   panel on the left, the preview (their own video, in the look) in a sticky white panel on the right, the looks strip or the style
   specimens under the frame. Type 20 / 15 / 13 / 12, weights 400 / 500; 12 inside panels, 16 between panels and to the page edge.
   The frame's own colours and fonts (--b-*) are the creator's look, set per look by js/welcome.js, not UI colours. */
:root .onb, :root .onb *, :root .onb *::before, :root .onb *::after { box-sizing: border-box; }
:root .onb { --colw: 380px; display: block; min-height: 100vh; padding: 0 0 var(--rs-s32); color: var(--rs-tx); font: var(--rs-w-reg) var(--rs-fs-body)/1.5 var(--rs-font); letter-spacing: var(--rs-ls); -webkit-font-smoothing: antialiased; overflow-x: clip; }
:root .onb [hidden] { display: none !important; }
:root .onb .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root .onb h1, :root .onb h2, :root .onb p, :root .onb ol, :root .onb ul { margin: 0; padding: 0; }
:root .onb ol, :root .onb ul { list-style: none; }
:where(:root .onb) :where(button, input, textarea, select) { font: inherit; letter-spacing: inherit; color: inherit; }
:where(:root .onb) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
/* the app's own .dot rule (styles.css) must not reach the sentence's punctuation */
:root .onb .dot { position: static; width: auto; height: auto; border-radius: 0; display: inline; background: none; box-shadow: none; border: 0; z-index: auto; }
:root .onb a { color: inherit; }
:root .onb :focus-visible { outline: none; box-shadow: var(--rs-ring); }
:root .onb svg.oi { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root .onb .faint { color: var(--rs-tx-3); }
:root .onb .cap2 { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .spin { width: 14px; height: 14px; flex: none; display: inline-block; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: onb-spin .8s linear infinite; }
@keyframes onb-spin { to { transform: rotate(360deg); } }

/* ---------- the slim bar ---------- */
:root .onb .otop { height: var(--rs-top-h); display: flex; align-items: center; gap: var(--rs-s12); }
:root .onb .obrand { display: inline-flex; align-items: center; gap: var(--rs-s8); font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); }
:root .onb .obrand img { display: block; width: 24px; height: 24px; }
:root .onb .oskip { margin-left: auto; height: 32px; padding: 0 var(--rs-s12); border-radius: var(--rs-r-pill); font-size: var(--rs-fs-body); color: var(--rs-tx-2); transition: background var(--rs-t), box-shadow var(--rs-t), color var(--rs-t); }
:root .onb .oskip:hover { color: var(--rs-tx); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); }

/* ---------- page head + step pill ---------- */
:root .onb .page { display: grid; gap: var(--rs-gap); }
:root .onb .head { display: flex; align-items: flex-end; gap: var(--rs-gap); min-width: 0; }
:root .onb .tbox { min-width: 0; }
:root .onb .tbox h1 { font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); line-height: 1.3; letter-spacing: -.01em; outline: none; view-transition-name: h1; }
:root .onb .tbox h1:focus-visible { box-shadow: none; }
:root .onb .tbox p { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); max-width: 720px; }
:root .onb .prog { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: var(--rs-s8); height: 40px; padding: 0 var(--rs-s12) 0 var(--rs-s8); border-radius: var(--rs-r-pill); background: var(--rs-panel); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); white-space: nowrap; }
:root .onb .prog .faint { font-weight: var(--rs-w-reg); }
:root .onb .pgs { display: inline-flex; align-items: center; gap: var(--rs-s4); }
:root .onb .pg { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: var(--rs-tx-3); box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .onb .pg.done { background: var(--rs-sel); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); box-shadow: none; }
:root .onb button.pg:hover { box-shadow: 0 0 0 3px var(--rs-peri-soft); }
:root .onb .pg.now { background: var(--rs-peri-deep); box-shadow: 0 0 0 3px var(--rs-peri-soft); }

/* ---------- the split ---------- */
:root .onb .split { display: grid; grid-template-columns: var(--colw) minmax(0, 1fr); gap: var(--rs-gap); align-items: start; view-transition-name: split; }
:root .onb .colp { display: flex; flex-direction: column; gap: var(--rs-pad); min-width: 0; }
:root .onb .pvp { position: sticky; top: var(--rs-gap); display: grid; gap: var(--rs-pad); min-width: 0; }
:root .onb .sh { min-width: 0; }
:root .onb .sh h2 { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); line-height: 1.4; }
:root .onb .sh p { margin-top: var(--rs-s4); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .cfoot { display: flex; align-items: center; gap: var(--rs-s8); padding-top: var(--rs-pad); border-top: 1px solid var(--rs-line); }
:root .onb .cfoot > .rs-btn { margin-left: auto; }
:root .onb .cfoot-cap { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .cfoot .lnk + .cfoot-cap { margin-left: auto; color: var(--rs-tx-3); }
:root .onb .rs-btn .spin { width: 12px; height: 12px; }
:root .onb .rs-btn[aria-busy="true"] { opacity: .8; cursor: progress; }
:root .onb .lnk { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--rs-s8); margin-left: calc(-1 * var(--rs-s8)); border-radius: var(--rs-r-sm); font-size: var(--rs-fs-body); color: var(--rs-tx-2); cursor: pointer; transition: background var(--rs-t), color var(--rs-t); }
:root .onb .lnk:hover { color: var(--rs-tx); background: var(--rs-inset); }
:root .onb .lnk.peri { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .onb .lnk.peri:hover { background: var(--rs-sel); }
:root .onb .lnk:disabled { opacity: .45; cursor: default; }
:root .onb .ib { width: 32px; height: 32px; flex: none; border-radius: var(--rs-r-sm); display: grid; place-items: center; color: var(--rs-tx-2); transition: background var(--rs-t), color var(--rs-t); }
:root .onb .ib:hover { background: var(--rs-inset); color: var(--rs-tx); }
:root .onb .ib:disabled { opacity: .45; cursor: default; }
:root .onb .alert, :root .onb .cnote:not(:empty) { display: flex; align-items: flex-start; gap: var(--rs-s8); padding: var(--rs-s8) var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-neg-soft); color: var(--dk-tx-rs-neg, var(--rs-neg)); font-size: var(--rs-fs-cap); }
:root .onb .cnote:empty { display: none; }
:root .onb .alert svg, :root .onb .cnote svg, :root .onb .field-err svg, :root .onb .err svg, :root .onb .readline svg { margin-top: 1px; }
:root .onb .field-err, :root .onb .err { display: flex; align-items: flex-start; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-neg, var(--rs-neg)); }

/* fields */
:root .onb .fld { display: grid; gap: var(--rs-s4); min-width: 0; }
:root .onb .fld > label, :root .onb .fld > .lbl, :root .onb .lbl { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); line-height: 1.4; }
:root .onb .opt { font-size: var(--rs-fs-cap); font-weight: var(--rs-w-reg); color: var(--rs-tx-3); }
:root .onb .hint { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb textarea.rs-in { height: auto; min-height: 80px; field-sizing: content; max-height: 240px; padding: var(--rs-s8) var(--rs-s12); line-height: 1.5; resize: vertical; }
:root .onb .rs-in:disabled { opacity: .55; }

/* switch (Brand's) */
:root .onb .switch { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--rs-s4) var(--rs-s12); align-items: start; cursor: pointer; font-size: var(--rs-fs-body); }
:root .onb .switch input { appearance: none; -webkit-appearance: none; width: 32px; height: 20px; margin: 1px 0 0; border-radius: var(--rs-r-pill); background: var(--rs-raise); box-shadow: inset 0 0 0 1px var(--rs-line-2); position: relative; cursor: pointer; transition: background var(--rs-t); }
:root .onb .switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--dk-paper, #fff); box-shadow: 0 1px 2px rgba(31,31,33,.2); transition: transform var(--rs-t); }
:root .onb .switch input:checked { background: var(--rs-peri-deep); box-shadow: none; }
:root .onb .switch input:checked::after { transform: translateX(12px); }

/* ---------- step 1: the sentences ---------- */
:root .onb .sent { font-size: var(--rs-fs-sec); line-height: 2; color: var(--rs-tx-2); transition: color var(--rs-t); }
:root .onb .sent.is-quiet { color: var(--rs-tx-3); }
:root .onb .sent.is-quiet:focus-within { color: var(--rs-tx-2); }
:root .onb .slot { display: inline-flex; align-items: center; gap: var(--rs-s4); max-width: 100%; vertical-align: baseline; }
:root .onb .blank { height: 28px; min-width: 64px; max-width: 100%; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -1px 0 var(--rs-line-2); padding: 0 2px; font-size: var(--rs-fs-sec); color: var(--rs-tx); outline: none; transition: box-shadow var(--rs-t); }
:root .onb .blank::placeholder { color: var(--rs-tx-3); }
:root .onb .blank:focus, :root .onb .blank:focus-visible { box-shadow: inset 0 -2px 0 var(--rs-peri-deep); }
:root .onb .blank.bad { box-shadow: inset 0 -2px 0 var(--rs-neg); }
:root .onb select.blank { appearance: none; -webkit-appearance: none; padding-right: 18px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23636366' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 2px center no-repeat; }
:root .onb select.blank.is-empty { color: var(--rs-tx-3); }
:root .onb .sent-link label { display: block; }
:root .onb .slot-link { display: flex; width: 100%; }
:root .onb .slot-link .blank { width: 100%; }
:root .onb .tick { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--rs-pos); color: #fff; opacity: 0; transform: scale(.6); transition: opacity var(--rs-t), transform var(--rs-t); }
:root .onb .tick svg.oi { stroke-width: 2.4; }
:root .onb .sent-link.is-valid .tick { opacity: 1; transform: none; }
:root .onb .dot { color: inherit; }
:root .onb .or { display: flex; align-items: center; gap: var(--rs-s12); font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .onb .or::before, :root .onb .or::after { content: ""; flex: 1; height: 1px; background: var(--rs-line); }
:root .onb .discl { display: grid; gap: var(--rs-s8); padding-top: var(--rs-pad); border-top: 1px solid var(--rs-line); }
:root .onb .disc-meta { display: flex; justify-content: space-between; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .readline { display: flex; align-items: flex-start; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .readline .spin { width: 12px; height: 12px; margin-top: 2px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb .readline > svg { color: var(--dk-tx-rs-pos, var(--rs-pos)); }
:root .onb .readline.bad, :root .onb .readline.bad > svg { color: var(--dk-tx-rs-neg, var(--rs-neg)); }
:root .onb .discl textarea, :root .onb .field-err { scroll-margin-bottom: 120px; }

/* ---------- step 2: the look ---------- */
:root .onb .kick { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .onb .kick.is-preview { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb .kick .spin { width: 12px; height: 12px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb .lname { margin-top: var(--rs-s4); font-size: var(--rs-fs-title); font-weight: var(--rs-w-med); line-height: 1.3; }
:root .onb .lblurb { margin-top: var(--rs-s4); font-size: var(--rs-fs-body); color: var(--rs-tx-2); }
:root .onb .lhead.wait .lname, :root .onb .lhead.wait .lblurb { background: var(--rs-inset); color: transparent; border-radius: var(--rs-r-xs); }
:root .onb .lhead.wait .lname { width: 60%; }
:root .onb .lhead.wait .lblurb { width: 90%; }
:root .onb .swap { animation: onb-swapin var(--rs-t) var(--rs-ease); }
@keyframes onb-swapin { from { opacity: 0; transform: translateY(3px); } }
:root .onb .boldrow { display: grid; gap: var(--rs-s8); }
:root .onb .boldrow .r { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-s8); }
:root .onb .welcome-sentence { transition: color var(--rs-t); }

/* ---------- the preview panel ---------- */
:root .onb .pvs { position: relative; display: grid; place-items: center; padding: calc(var(--rs-gap) - 1px); border-radius: var(--rs-r-inner); background: var(--rs-inset); border: 1px solid var(--rs-line); }   /* a tinted well (hairline as a border, no shadow) */
:root .onb .frame { width: min(100%, max(420px, calc((100vh - 344px) * 16 / 9))); }
:root .onb .ftag { position: absolute; left: 12px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rs-r-pill); background: rgba(20,21,25,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); white-space: nowrap; }
:root .onb .ftag svg.oi { stroke-width: 2.2; }
:root .onb .ftag.pv { background: rgba(76,95,146,.85); }
:root .onb .ftag.land { animation: onb-stampin var(--rs-t) var(--rs-ease); }
@keyframes onb-stampin { from { transform: scale(.8); opacity: .4; } }
/* nothing yet: empty slots, breathing slowly */
:root .onb .fl-empty { background: var(--dk-b-efede8, #EFEDE8); }
:root .onb .ghost { position: absolute; display: grid; place-items: center; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(31,31,33,.12); background: var(--dk-b-ffffffa55, rgba(255,255,255,.55)); font: var(--rs-w-reg) max(12px, 1.3cqw)/1.2 var(--rs-font); color: var(--rs-tx-3); }
:root .onb .ghost-gfx { right: 3.6%; top: 6%; width: 32%; height: 40%; }
:root .onb .ghost-card { left: 3.6%; bottom: 19%; width: 28%; height: 13%; }
:root .onb .ghost-cap { left: 30%; right: 30%; bottom: 9%; height: 4%; border-radius: var(--rs-r-pill); }
:root .onb .fl-empty.breathe .ghost { animation: onb-breathe 5.6s ease-in-out infinite; }
:root .onb .fl-empty.breathe .ghost-card { animation-delay: .8s; }
:root .onb .fl-empty.breathe .ghost-cap { animation-delay: 1.6s; }
@keyframes onb-breathe { 50% { opacity: .55; } }
:root .onb .e-msg { position: absolute; left: 7%; top: 12%; max-width: 46%; font: var(--rs-w-reg) max(12px, 1.3cqw)/1.5 var(--rs-font); color: var(--rs-tx-2); }
:root .onb .e-msg b { display: block; font-weight: var(--rs-w-med); color: var(--rs-tx); font-size: max(13px, 1.6cqw); }
/* reading: the faceted bird; loading looks: the frame waits */
:root .onb .fl-read { background: var(--dk-b-f3f2ee, #F3F2EE); display: grid; place-items: center; align-content: center; gap: var(--rs-gap); }
:root .onb .rd-bird { position: relative; width: 16cqw; height: 16cqw; min-width: 72px; min-height: 72px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb .rd-t { font: var(--rs-w-med) max(13px, 1.5cqw)/1.4 var(--rs-font); color: var(--rs-tx); text-align: center; }
:root .onb .rd-t small { display: block; font-weight: var(--rs-w-reg); font-size: max(12px, 1.2cqw); color: var(--rs-tx-2); margin-top: var(--rs-s4); }
:root .onb .fl-wait { background: var(--dk-b-efede8, #EFEDE8); display: grid; place-items: center; }
:root .onb .fl-wait .rd-t { display: inline-flex; align-items: center; gap: var(--rs-s8); color: var(--rs-tx-2); font-weight: var(--rs-w-reg); }
:root .onb .fl-wait .spin { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }

/* what the read found */
:root .onb .found { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .found .lbl { font-size: var(--rs-fs-cap); color: var(--rs-tx); }
:root .onb .qchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--rs-r-pill); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); white-space: nowrap; }
:root .onb .qchip svg.oi { color: var(--dk-tx-rs-pos, var(--rs-pos)); stroke-width: 2.2; }
:root .onb .qchip .dots { display: inline-flex; gap: 2px; }
:root .onb .qchip .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31,31,33,.12); }

/* the looks strip */
:root .onb .rail { display: grid; gap: var(--rs-s8); min-width: 0; }
:root .onb .rail:empty { display: none; }
:root .onb .rail-h { display: flex; align-items: center; gap: var(--rs-s12); min-width: 0; }
:root .onb .rail-h b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .onb .rail-h .r { margin-left: auto; }
:root .onb .rail-h .cap2:empty { display: none; }
:root .onb .strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: var(--rs-s8); }
:root .onb .ltile { position: relative; display: grid; gap: 6px; padding: 4px 4px 6px; border-radius: var(--rs-r-inner); text-align: left; min-width: 0; transition: background var(--rs-t), box-shadow var(--rs-t); }
:root .onb .ltile:hover { background: var(--rs-inset); }
:root .onb .ltile .lm { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--rs-r-xs); overflow: hidden; background: var(--rs-inset); box-shadow: 0 0 0 1px var(--rs-line); }
:root .onb .ltile .lm img { width: 100%; height: 100%; object-fit: cover; display: block; }
:root .onb .ltile .ln { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); line-height: 1.3; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root .onb .ltile[aria-checked="true"] { background: var(--rs-sel); box-shadow: inset 0 0 0 1.5px var(--rs-peri); }
:root .onb .ltile[aria-checked="true"] .ln { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .onb .ltile .ck { position: absolute; right: 8px; top: 8px; width: 18px; height: 18px; border-radius: 50%; display: none; place-items: center; background: var(--rs-peri-deep); color: #fff; box-shadow: 0 0 0 2px #fff; }
:root .onb .ltile .ck svg.oi { stroke-width: 2.4; }
:root .onb .ltile[aria-checked="true"] .ck { display: grid; }
:root .onb .ltile .sg + .ck { display: none !important; }
:root .onb .ltile .sg { position: absolute; left: 8px; top: 8px; height: 18px; padding: 0 6px; border-radius: var(--rs-r-xs); background: var(--dk-b-ffffffa92, rgba(255,255,255,.92)); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); display: inline-flex; align-items: center; gap: 3px; }
:root .onb .ltile.mine .lm { display: grid; align-content: center; gap: 6px; padding: 8px; background: var(--mc); color: var(--mt); font: var(--rs-w-med) var(--rs-fs-cap)/1.2 var(--rs-font); }
:root .onb .ltile.mine .mt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .onb .ltile.mine .mini { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
:root .onb .ltile.mine .mini i { width: 8px; background: var(--ma); border-radius: 2px; }
:root .onb .ltile.mine .mini i:nth-child(1) { height: 40%; opacity: .5; }
:root .onb .ltile.mine .mini i:nth-child(2) { height: 70%; opacity: .75; }
:root .onb .ltile.mine .mini i:nth-child(3) { height: 100%; }
:root .onb .ltile.wait { pointer-events: none; }
:root .onb .ltile.wait .lm { background: linear-gradient(100deg, var(--rs-inset) 30%, var(--dk-paper, #fff) 50%, var(--rs-inset) 70%) 0 0 / 300% 100%; animation: onb-shimmer 1.6s linear infinite; }
:root .onb .ltile.wait .ln { height: 12px; width: 70%; border-radius: 4px; background: var(--rs-inset); }
:root .onb .ltile.bad .lm { background: var(--rs-inset); animation: none; box-shadow: inset 0 0 0 1px var(--rs-line-2); }
@keyframes onb-shimmer { to { background-position: -150% 0; } }
:root .onb .railnote { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .onb .railerr { display: flex; align-items: center; gap: var(--rs-s12); flex-wrap: wrap; }

/* ---------- the style builder ---------- */
:root .onb .bhead { display: flex; align-items: center; gap: var(--rs-s8); }
:root .onb .bhead h2 { font-size: var(--rs-fs-sec); font-weight: var(--rs-w-med); }
:root .onb .bfrom { display: flex; align-items: center; gap: var(--rs-s8); padding: var(--rs-s8) var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); min-width: 0; }
:root .onb .bfrom .bq { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: pretty; }
:root .onb .hint svg.oi { display: inline-block; vertical-align: -2px; }
:root .onb .parts { display: grid; }
:root .onb .part { border-top: 1px solid var(--rs-line); }
:root .onb .part-row { display: flex; align-items: center; gap: var(--rs-s4); }
:root .onb .part-h { flex: 1; min-width: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr) 16px; align-items: center; gap: var(--rs-s8); min-height: 44px; padding: var(--rs-s8) var(--rs-s4); border-radius: var(--rs-r-sm); text-align: left; transition: background var(--rs-t); }
:root .onb .part-h:hover { background: var(--rs-inset); }
:root .onb .part.open .part-h { background: var(--rs-sel); }
:root .onb .part-l { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .onb .part-v { font-size: var(--rs-fs-body); color: var(--rs-tx-2); min-width: 0; line-height: 1.4; overflow-wrap: anywhere; }
:root .onb .part-h svg.oi { color: var(--rs-tx-3); transition: transform var(--rs-t); }
:root .onb .part.open .part-h svg.oi { transform: rotate(180deg); }
:root .onb .part.fresh .part-v { animation: onb-fresh .9s var(--rs-ease); }
@keyframes onb-fresh { 0% { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); } 100% { color: var(--rs-tx-2); } }
:root .onb .regen:disabled svg.oi { animation: onb-spin .8s linear infinite; }
:root .onb .part-b { display: grid; gap: var(--rs-s8); padding: var(--rs-s8) var(--rs-s4) var(--rs-s12); }
:root .onb .pdots { display: inline-flex; gap: var(--rs-s4); vertical-align: -2px; }
:root .onb .pdots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31,31,33,.14); }
:root .onb .sws { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rs-s8); }
:root .onb .sw { position: relative; display: grid; justify-items: center; gap: var(--rs-s4); padding: var(--rs-s8) var(--rs-s4); border-radius: var(--rs-r-inner); cursor: pointer; text-align: center; }
:root .onb .sw:hover { background: var(--rs-inset); }
:root .onb .sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:root .onb .sw i { width: 36px; height: 36px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(31,31,33,.14); }
:root .onb .sw:focus-within i { box-shadow: inset 0 0 0 1px rgba(31,31,33,.14), 0 0 0 2px var(--dk-paper, #fff), 0 0 0 4px var(--rs-peri); }
:root .onb .sw span { font-size: var(--rs-fs-cap); line-height: 1.3; }
:root .onb .sw small { font-size: var(--rs-fs-cap); color: var(--rs-tx-3); }
:root .onb .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--rs-s8); }
:root .onb .chips.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .onb .chip { display: grid; justify-items: center; align-content: center; gap: 6px; height: auto; min-height: 64px; min-width: 0; padding: var(--rs-s8) var(--rs-s4); font-family: var(--rs-font); line-height: 1.3; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); transition: background var(--rs-t), box-shadow var(--rs-t); }
:root .onb .chip:hover { box-shadow: inset 0 0 0 1px var(--rs-line-2); }
:root .onb .chip[aria-checked="true"] { background: var(--rs-sel); box-shadow: inset 0 0 0 1.5px var(--rs-peri); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .onb .chip .aa { font-size: 24px; line-height: 32px; color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .onb .chip[aria-checked="true"] .aa { color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb .gt { display: flex; align-items: flex-end; gap: 3px; height: 28px; width: 44px; padding: 4px; border-radius: 4px; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line); }
:root .onb .gt i { flex: 1; background: var(--rs-peri); border-radius: 1px; }
:root .onb .gt i:nth-child(1) { height: 35%; } :root .onb .gt i:nth-child(2) { height: 65%; } :root .onb .gt i:nth-child(3) { height: 100%; background: var(--rs-peri-deep); }
:root .onb .gt-lines i { background: transparent !important; box-shadow: inset 0 0 0 1px var(--rs-peri-deep); }
:root .onb .gt-blocks { background: var(--rs-peri-deep); } :root .onb .gt-blocks i { background: var(--dk-b-ffffffa55, rgba(255,255,255,.55)); } :root .onb .gt-blocks i:nth-child(3) { background: var(--dk-paper, #fff); }
:root .onb .gt-chalk { background: #2E352F; } :root .onb .gt-chalk i { background: transparent !important; box-shadow: inset 0 0 0 1px var(--dk-l-f3f0e6, #F3F0E6); } :root .onb .gt-chalk i:nth-child(3) { box-shadow: inset 0 0 0 1px var(--dk-l-f3d27a, #F3D27A); }
:root .onb .cs-demo { display: inline-flex; gap: 3px; height: 28px; align-items: center; font-size: var(--rs-fs-cap); font-weight: var(--rs-w-med); color: var(--rs-tx); }
:root .onb .cs-demo em { font-style: normal; padding: 0 2px; border-radius: 3px; }
:root .onb .cs-underline em:last-child { box-shadow: inset 0 -2px 0 var(--rs-peri-deep); }
:root .onb .cs-highlight em:last-child { background: var(--rs-peri-deep); color: #fff; }
:root .onb .cs-pop em:last-child { transform: scale(1.18); display: inline-block; }
:root .onb .cs-follow em:first-child { opacity: .45; }
:root .onb .mo { display: block; width: 44px; height: 28px; border-radius: 4px; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line); position: relative; overflow: hidden; }
:root .onb .mo i { position: absolute; left: 8px; top: 8px; width: 12px; height: 12px; border-radius: 3px; background: var(--rs-peri-deep); }
:root .onb .chip:hover .mo-gentle i { animation: onb-moG 1.6s ease-in-out infinite; }
:root .onb .chip:hover .mo-crisp i { animation: onb-moC 1s var(--rs-ease) infinite; }
:root .onb .chip:hover .mo-lively i { animation: onb-moL 1.2s var(--rs-ease) infinite; }
@keyframes onb-moG { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes onb-moC { 0% { transform: translateX(-16px); } 40%, 100% { transform: none; } }
@keyframes onb-moL { 0% { transform: scale(.3); } 40% { transform: scale(1.25); } 60%, 100% { transform: none; } }
:root .onb .shp { display: block; width: 36px; height: 28px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1.5px var(--rs-peri-deep); border-radius: var(--r); }
:root .onb .part-note { display: flex; align-items: center; gap: var(--rs-s8); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .part-note .spin { width: 12px; height: 12px; color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb #bContrastSlot:empty { display: none; }
:root .onb .contrast { display: flex; align-items: flex-start; gap: var(--rs-s8); padding: var(--rs-s8) var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--dk-b-fbf3e4, #FBF3E4); color: var(--dk-t-7a5a1e, #7A5A1E); font-size: var(--rs-fs-cap); }
:root .onb .refchip { display: inline-flex; align-items: center; gap: var(--rs-s8); height: 36px; padding: 0 4px; border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); max-width: 100%; }
:root .onb .refchip .rc-th { width: 40px; height: 28px; border-radius: var(--rs-r-xs); background: center / cover; flex: none; }
:root .onb .refchip .rc-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:root .onb .refchip .ib { width: 28px; height: 28px; }
:root .onb .addimg { cursor: pointer; }
:root .onb .addimg:focus-within { box-shadow: var(--rs-ring); }
:root .onb .btries { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); padding: var(--rs-s8) var(--rs-s12); border-radius: var(--rs-r-inner); background: var(--rs-inset); }

/* ---------- step 3: the four starts ---------- */
:root .onb .starts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-s8); }
:root .onb .starts li { display: contents; }
:root .onb .start { position: relative; display: grid; gap: var(--rs-s4); align-content: start; min-height: 112px; padding: var(--rs-pad); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); color: var(--rs-tx); text-decoration: none; transition: background var(--rs-t), box-shadow var(--rs-t), transform var(--rs-t); }
:root .onb .start:hover { background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2), 0 4px 12px rgba(41,52,92,.08); }
:root .onb .start:active { transform: scale(.98); }
:root .onb .start .sg { width: 32px; height: 32px; margin-bottom: var(--rs-s4); border-radius: var(--rs-r-sm); display: grid; place-items: center; background: var(--dk-paper, #fff); box-shadow: 0 0 0 1px var(--rs-line); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); }
:root .onb .start b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); }
:root .onb .start > span:last-child { font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb kbd { position: absolute; right: var(--rs-s12); top: var(--rs-s12); display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--rs-r-xs); background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--rs-line-2); font: var(--rs-w-med) var(--rs-fs-cap)/1 var(--rs-font); color: var(--rs-tx); }
:root .onb .lookchip { display: flex; align-items: center; gap: var(--rs-s8); padding: var(--rs-s4); border-radius: var(--rs-r-inner); background: var(--rs-inset); box-shadow: inset 0 0 0 1px var(--rs-line); font-size: var(--rs-fs-cap); color: var(--rs-tx-2); }
:root .onb .lookchip .lc-th { width: 48px; height: 27px; border-radius: var(--rs-r-xs); background: center / cover; flex: none; box-shadow: 0 0 0 1px var(--rs-line); }
:root .onb .lookchip .lc-th.own { background: var(--mc, var(--dk-b-efeae1, #EFEAE1)); }
:root .onb .lookchip b { color: var(--rs-tx); font-weight: var(--rs-w-med); }
:root .onb .lookchip > span:nth-child(2) { flex: 1; min-width: 0; }
:root .onb .lookchip .rs-tbtn { margin-right: var(--rs-s4); }
:root .onb .w-samplerow { display: flex; align-items: center; gap: var(--rs-s12); padding: var(--rs-s8); border-radius: var(--rs-r-inner); background: var(--rs-sel); }
:root .onb .w-samplerow .sr-th { width: 64px; height: 36px; border-radius: var(--rs-r-xs); background: var(--rs-inset) center / cover; flex: none; }
:root .onb .w-samplerow .sr-t { flex: 1; min-width: 0; display: grid; line-height: 1.35; }
:root .onb .w-samplerow small { font-size: var(--rs-fs-cap); color: var(--dk-tx-rs-peri-deep, var(--rs-peri-deep)); font-weight: var(--rs-w-med); }
:root .onb .w-samplerow b { font-size: var(--rs-fs-body); font-weight: var(--rs-w-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- the frame: their own take, in the look (kept from the stage port; sizes are the look's, in cqw) ---------- */
:root .onb .frame { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; container-type: inline-size; background: var(--b-paper, var(--dk-b-f3f2ed, #F3F2ED)); box-shadow: 0 0 0 1px var(--rs-line), 0 12px 32px rgba(41,52,92,.14); }
:root .onb .fl { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity var(--t-medium) var(--ease-out), visibility 0s linear var(--t-medium); }
:root .onb .fl.on { opacity: 1; visibility: visible; transition: opacity var(--t-medium) var(--ease-out), visibility 0s; }
:root .onb .clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #2a2a2c; }
:root .onb .clip-still { display: none; }
:root .onb.stills .clip-still { display: block; }
:root .onb.stills video.clip { display: none; }
:root .onb .fl-content.wipe { animation: onb-wipe var(--t-large) var(--ease-out); }
@keyframes onb-wipe {from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); }}
:root .onb .frame { --b-base: var(--dk-paper, #FFFFFF); --b-text: var(--dk-t-151515, #151515); --b-accent: #62779A; --b-c1: #9C93B0; --b-c2: #3B3A39; --b-c3: #56684F; --b-paper: var(--dk-b-efeae1, #EFEAE1); --b-font: Inter, system-ui, sans-serif; }
:root .onb .fl-content * { transition-property: background-color, color, border-color, opacity, transform, border-radius, box-shadow; transition-duration: var(--t-small); transition-timing-function: var(--ease-out); }
:root .onb .frame.restyle .gfx, :root .onb .frame.restyle .ncard, :root .onb .frame.restyle .cap, :root .onb .frame.restyle .tcard { animation: onb-restyle var(--t-small) var(--ease-out); }
@keyframes onb-restyle {from { opacity: .35; }}
:root .onb .tcard { position: absolute; inset: 0; display: none; flex-direction: column; justify-content: center; gap: 1.6cqw; padding: 0 46cqw 8cqw 5.5cqw; background: var(--b-paper); color: var(--b-text); font-family: var(--b-font); }
:root .onb .frame[data-content="words"] .tcard { display: flex; }
:root .onb .frame[data-content="words"] .clip { visibility: hidden; }
:root .onb .tc-k { font-size: 1.5cqw; letter-spacing: .14em; text-transform: uppercase; opacity: .6; font-weight: 600; }
:root .onb .tc-h { font-size: 4.6cqw; line-height: 1.08; letter-spacing: -.03em; font-weight: 600; text-wrap: balance; }
:root .onb .tc-h em { font-style: normal; color: var(--b-accent); }
:root .onb .frame[data-gt="screen"] .tcard { background: #151515; }
:root .onb .frame[data-gt="chalk"] .tcard { background: #2E352F; }
:root .onb .frame[data-gt="lines"] .tcard { background: #1E3A66 linear-gradient(var(--dk-b-ffffffa7, rgba(255,255,255,.07)) 1px, transparent 1px) 0 0 / 2cqw 2cqw, #1E3A66; }
:root .onb .frame[data-gt="blocks"] .tc-h { text-transform: uppercase; font-weight: 800; }
:root .onb .gfx { position: absolute; right: 3.6cqw; top: 3.6cqw; width: 34cqw; padding: 2.4cqw 2.6cqw 2.2cqw; border-radius: 1.4cqw; background: var(--b-base); color: var(--b-text); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.22); font-family: var(--b-font); }
:root .onb .gfx-k { font-size: 1.35cqw; letter-spacing: .12em; text-transform: uppercase; opacity: .6; font-weight: 600; }
:root .onb .gfx-big { font-size: 5.2cqw; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; color: var(--b-accent); margin-top: .3cqw; }
:root .onb .bars { display: flex; align-items: flex-end; gap: 1.6cqw; height: 14cqw; margin-top: 1.4cqw; }
:root .onb .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
:root .onb .bar i { display: block; width: 100%; height: calc(var(--h) * 10cqw); background: var(--b-c1); border-radius: .4cqw .4cqw 0 0; transform-origin: bottom; animation: onb-grow 1.1s var(--ease-out) both; }
:root .onb .bar:nth-child(2) i { background: var(--b-c2); animation-delay: 90ms; }
:root .onb .bar:nth-child(3) i { background: var(--b-c3); animation-delay: 180ms; }
:root .onb .bar.hi i { background: var(--b-accent); animation-delay: 270ms; }
:root .onb .bar em { font-style: normal; font-size: 1.2cqw; font-weight: 600; margin-bottom: .4cqw; }
:root .onb .bar small { font-size: 1.05cqw; opacity: .6; margin-top: .4cqw; }
@keyframes onb-grow {from { transform: scaleY(0); }}
:root .onb .frame[data-gt="paper"] .gfx { box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.16); border-radius: .3cqw; }
:root .onb .frame[data-gt="paper"] .gfx-big { font-weight: 400; letter-spacing: -.02em; }
:root .onb .frame[data-gt="paper"] .gfx-k { letter-spacing: .06em; text-transform: none; font-style: italic; font-size: 1.6cqw; }
:root .onb .frame[data-gt="lines"] .gfx { background: #1E3A66; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 2cqw 2cqw; color: #fff; box-shadow: inset 0 0 0 .15cqw rgba(255,255,255,.45), 0 1cqw 3cqw rgba(0,0,0,.25); border-radius: .3cqw; }
:root .onb .frame[data-gt="lines"] .gfx-big { color: var(--b-accent); }
:root .onb .frame[data-gt="lines"] .bar i { background: transparent !important; border: .15cqw solid currentColor; border-bottom: 0; }
:root .onb .frame[data-gt="lines"] .bar.hi i { border-color: var(--b-accent); }
:root .onb .frame[data-gt="blocks"] .gfx { border-radius: 0; text-transform: uppercase; }
:root .onb .frame[data-gt="blocks"] .gfx-big { display: inline-block; background: var(--b-accent); color: var(--b-base); padding: 0 1cqw; transform: rotate(-2deg); font-weight: 800; }
:root .onb .frame[data-gt="blocks"] .bar i { border-radius: 0; }
:root .onb .frame[data-gt="cards"] .gfx { box-shadow: 0 .4cqw 1.6cqw rgba(0,0,0,.14); border-radius: .5cqw; }
:root .onb .frame[data-gt="cards"] .bar i { background: var(--b-accent) !important; opacity: .45; }
:root .onb .frame[data-gt="cards"] .bar.hi i { opacity: 1; }
:root .onb .frame[data-gt="chalk"] .gfx { background: #2E352F; color: #F3F0E6; border-radius: .4cqw; box-shadow: inset 0 0 0 .4cqw var(--dk-l-4a3a2a, #4a3a2a), 0 1cqw 3cqw rgba(0,0,0,.25); }
:root .onb .frame[data-gt="chalk"] .gfx-big { color: var(--b-accent); font-weight: 400; }
:root .onb .frame[data-gt="chalk"] .bar i { background: repeating-linear-gradient(45deg, var(--b-accent) 0 .3cqw, transparent .3cqw .8cqw) !important; border: .15cqw solid var(--dk-l-f3f0e6a80, rgba(243,240,230,.8)); }
:root .onb .frame[data-gt="screen"] .gfx { background: #151515; color: #E9E6DF; border-radius: .6cqw; box-shadow: 0 0 0 .12cqw rgba(242,179,61,.35), 0 1cqw 3cqw rgba(0,0,0,.3); }
:root .onb .frame[data-gt="screen"] .gfx-big { color: var(--b-accent); text-shadow: 0 0 1.4cqw rgba(242,179,61,.55); }
:root .onb .frame[data-gt="screen"] .bar i { background: var(--b-accent) !important; opacity: .45; }
:root .onb .frame[data-gt="screen"] .bar.hi i { opacity: 1; }
:root .onb .frame[data-gt="dots"] .gfx { border-radius: 2.4cqw; }
:root .onb .frame[data-gt="dots"] .bar i { border-radius: 9cqw; background: radial-gradient(circle, var(--b-c1) 40%, transparent 42%) 0 0 / 2cqw 2cqw !important; }
:root .onb .frame[data-gt="dots"] .bar.hi i { background: radial-gradient(circle, var(--b-accent) 40%, transparent 42%) 0 0 / 2cqw 2cqw !important; }
:root .onb .ncard { position: absolute; left: 3.6cqw; bottom: 12cqw; display: flex; align-items: stretch; background: var(--b-base); color: var(--b-text); border-radius: .9cqw; overflow: hidden; box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.22); font-family: var(--b-font); }
:root .onb .nc-logo { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 1.8cqw; background: var(--b-accent); color: var(--b-base); }
:root .onb .nc-logo .wm { font-size: 1.9cqw; }
:root .onb .nc-logo .wm-s { font-size: .75cqw; }
:root .onb .ncard.nologo .nc-logo { display: none; }
:root .onb .nc-t { display: flex; flex-direction: column; padding: 1.2cqw 2.2cqw 1.3cqw 1.8cqw; }
:root .onb .nc-t b { font-size: 2.5cqw; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
:root .onb .nc-t span { font-size: 1.6cqw; opacity: .7; white-space: nowrap; }
:root .onb .wm { font-weight: 500; letter-spacing: .32em; line-height: 1; padding-left: .32em; }
:root .onb .wm-s { letter-spacing: .24em; text-transform: uppercase; margin-top: .5em; opacity: .85; white-space: nowrap; }
:root .onb .frame[data-gt="paper"] .ncard { border-radius: .2cqw; background: var(--b-paper); }
:root .onb .frame[data-gt="paper"] .nc-t b { font-weight: 400; font-size: 2.7cqw; }
:root .onb .frame[data-gt="blocks"] .ncard { border-radius: 0; text-transform: uppercase; }
:root .onb .frame[data-gt="blocks"] .nc-t b { font-weight: 800; }
:root .onb .frame[data-gt="chalk"] .ncard { background: #2E352F; color: #F3F0E6; box-shadow: inset 0 0 0 .2cqw rgba(243,240,230,.55), 0 .8cqw 2.4cqw rgba(0,0,0,.25); }
:root .onb .frame[data-gt="chalk"] .nc-logo { background: transparent; color: var(--b-accent); }
:root .onb .frame[data-gt="screen"] .ncard { background: #151515; color: #E9E6DF; border-radius: .4cqw; }
:root .onb .frame[data-gt="screen"] .nc-logo { background: #262626; color: var(--b-accent); }
:root .onb .frame[data-gt="dots"] .ncard { border-radius: 4cqw; }
:root .onb .frame[data-gt="dots"] .nc-logo { border-radius: 4cqw; margin: .5cqw; }
:root .onb .frame[data-gt="lines"] .ncard { background: #1E3A66; color: #fff; box-shadow: inset 0 0 0 .15cqw rgba(255,255,255,.6), 0 .8cqw 2.4cqw rgba(0,0,0,.22); border-radius: .2cqw; }
:root .onb .frame[data-gt="lines"] .nc-logo { background: transparent; color: var(--b-accent); }
:root .onb .ncard.land { animation: onb-land 760ms var(--ease-spring); }
@keyframes onb-land {0% { transform: scale(.94); } 50% { transform: scale(1.04); } 100% { transform: none; }}
:root .onb .cap { position: absolute; left: 3.6cqw; right: 40cqw; bottom: 5.6cqw; display: flex; justify-content: center; flex-wrap: wrap; gap: .8cqw; font-family: var(--b-font); font-weight: 700; font-size: 3cqw; color: #fff; text-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.45); }
:root .onb .cap .w { position: relative; padding: .2cqw .6cqw; border-radius: .5cqw; }
:root .onb .cap .w.hide { display: none; }
:root .onb .cap[data-cs="highlight"] .w.on { background: var(--b-accent); color: var(--b-base); text-shadow: none; }
:root .onb .cap[data-cs="underline"] .w.on::after { content: ""; position: absolute; left: .6cqw; right: .6cqw; bottom: -.2cqw; height: .5cqw; background: var(--b-accent); transform-origin: left; animation: onb-uline 480ms var(--ease-out); }
@keyframes onb-uline {from { transform: scaleX(0); }}
:root .onb .cap[data-cs="follow"] .w.on { background: var(--b-base); color: var(--b-text); text-shadow: none; }
:root .onb .cap[data-cs="pop"] .w.on { animation: onb-capPop 380ms var(--ease-spring); color: var(--b-accent); }
:root .onb .frame[data-gt="chalk"] .cap, :root .onb .frame[data-gt="screen"] .cap { color: #F3F0E6; }
@keyframes onb-capPop {from { opacity: 0; transform: scale(.5); }}
:root .onb .frame[data-content="words"] .cap { color: var(--b-text); text-shadow: none; right: 40cqw; }
:root .onb .frame[data-content="words"][data-gt="lines"] .cap, :root .onb .frame[data-content="words"][data-gt="chalk"] .cap, :root .onb .frame[data-content="words"][data-gt="screen"] .cap { color: #fff; }
:root .onb .disc { position: absolute; left: 0; right: 0; bottom: 0; padding: .9cqw 3.6cqw 1cqw; font-size: 1.2cqw; line-height: 1.35; color: #fff; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0)); font-family: var(--b-font); opacity: 0; transform: translateY(100%); transition: opacity var(--t-medium) var(--ease-out), transform var(--t-medium) var(--ease-out); }
:root .onb .disc.on { opacity: 1; transform: none; }
:root .onb .frame[data-content="words"] .disc { color: var(--b-text); background: none; opacity: 0; }
:root .onb .frame[data-content="words"] .disc.on { opacity: .75; }
:root .onb .specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
:root .onb .spec { margin: 0; min-width: 0; }
:root .onb .spec figcaption { margin-top: 6px; font-size: 12.5px; color: #fff; text-shadow: 0 1px 4px rgba(31,31,33,.2); }
:root .onb .sp-box { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; container-type: inline-size; border-radius: 10px; background: var(--b-base); color: var(--b-text); font-family: var(--b-font); box-shadow: 0 2px 10px rgba(31,31,33,.14); transition: background var(--t-small), color var(--t-small), border-radius var(--t-small); }
:root .onb .specs.restyle .sp-box > * { animation: onb-spIn var(--b-dur) var(--ease-out) backwards; }
:root .onb .specs[data-motion="lively"].restyle .sp-box > * { animation-timing-function: var(--ease-spring); }
:root .onb .specs[data-motion="gentle"].restyle .sp-box > * { animation-name: onb-spfade; }
:root .onb .spec:nth-child(2) .sp-box > * { animation-delay: 60ms; }
:root .onb .spec:nth-child(3) .sp-box > * { animation-delay: 120ms; }
:root .onb .spec:nth-child(4) .sp-box > * { animation-delay: 180ms; }
@keyframes onb-spIn {from { opacity: 0; transform: translateY(10px) scale(.96); }}
@keyframes onb-spfade {from { opacity: 0; }}
:root .onb .sp-chart { border-radius: var(--b-r); padding: 8% 9%; }
:root .onb .sp-k { display: block; font-family: Inter, system-ui, sans-serif; font-size: 5.6cqw; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
:root .onb .sp-big { display: block; margin-top: 2cqw; font-size: 15cqw; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
:root .onb .sp-bars { position: absolute; right: 8cqw; bottom: 9cqw; display: flex; align-items: flex-end; gap: 3cqw; height: 40cqw; }
:root .onb .sp-bars i { width: 7cqw; height: calc(var(--h) * 100%); background: var(--b-c1); border-radius: min(var(--b-r), 4px) min(var(--b-r), 4px) 0 0; }
:root .onb .sp-bars i.hi { background: var(--b-accent); }
:root .onb .specs[data-gt="lines"] .sp-bars i { background: transparent; border: 1.5px solid var(--b-c1); border-bottom: 0; }
:root .onb .specs[data-gt="lines"] .sp-bars i.hi { border-color: var(--b-accent); }
:root .onb .specs[data-gt="lines"] .sp-chart, :root .onb .specs[data-gt="lines"] .sp-quote { background: transparent; box-shadow: inset 0 0 0 1.5px var(--b-base); color: #fff; }
:root .onb .specs[data-gt="blocks"] .sp-chart, :root .onb .specs[data-gt="blocks"] .sp-quote { background: var(--b-text); color: var(--b-base); }
:root .onb .specs[data-gt="blocks"] .sp-bars i { background: var(--b-base); border-radius: 0; }
:root .onb .specs[data-gt="blocks"] .sp-bars i.hi { background: var(--b-accent); }
:root .onb .specs[data-gt="chalk"] .sp-chart, :root .onb .specs[data-gt="chalk"] .sp-quote { background: #2E352F; color: #F3F0E6; }
:root .onb .specs[data-gt="chalk"] .sp-bars i { background: repeating-linear-gradient(45deg, var(--b-c1) 0 2px, transparent 2px 4px); border: 1px solid var(--dk-l-f3f0e6a80, rgba(243,240,230,.8)); }
:root .onb .specs[data-gt="chalk"] .sp-bars i.hi { background: repeating-linear-gradient(45deg, var(--b-accent) 0 2px, transparent 2px 4px); }
:root .onb .sp-name, :root .onb .sp-cap { background: #2a2a2c var(--onb-poster, none) center 28% / cover; }
:root .onb .sp-card { position: absolute; left: 6cqw; bottom: 8cqw; display: flex; align-items: center; gap: 4cqw; padding: 3.5cqw 7cqw 3.5cqw 3.5cqw; border-radius: var(--b-r); background: var(--b-base); color: var(--b-text); }
:root .onb .sp-mark { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: calc(var(--b-r) * .7); background: var(--b-accent); color: var(--b-base); font-size: 7.5cqw; font-weight: 700; }
:root .onb .sp-card b { display: block; font-size: 7.2cqw; line-height: 1.15; }
:root .onb .sp-card small { display: block; font-family: Inter, system-ui, sans-serif; font-size: 5.2cqw; opacity: .72; }
:root .onb .specs[data-gt="lines"] .sp-card { background: rgba(21,21,21,.45); color: #fff; box-shadow: inset 0 0 0 1.5px var(--b-c1); }
:root .onb .specs[data-gt="blocks"] .sp-card { background: var(--b-text); color: var(--b-base); }
:root .onb .specs[data-gt="chalk"] .sp-card { background: #2E352F; color: #F3F0E6; }
:root .onb .sp-quote { border-radius: var(--b-r); display: flex; flex-direction: column; justify-content: center; padding: 6% 10% 8%; }
:root .onb .sp-qm { display: block; height: 11cqw; font-size: 28cqw; line-height: .9; color: var(--b-accent); }
:root .onb .sp-quote b { font-size: 9cqw; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; }
:root .onb .sp-words { position: absolute; left: 0; right: 0; bottom: 10cqw; display: flex; justify-content: center; gap: 1.2cqw; font-size: 7cqw; font-weight: 700; color: #fff; white-space: nowrap; text-shadow: 0 .4cqw 1.6cqw rgba(0,0,0,.5); }
:root .onb .sp-words em { position: relative; padding: .4cqw 1.4cqw; font-style: normal; border-radius: min(var(--b-r), 1.6cqw); }
:root .onb .specs[data-cs="highlight"] .sp-words em:nth-child(2) { background: var(--b-accent); color: var(--b-base); text-shadow: none; }
:root .onb .specs[data-cs="follow"] .sp-words em:nth-child(2) { background: var(--b-base); color: var(--b-text); text-shadow: none; }
:root .onb .specs[data-cs="pop"] .sp-words em:nth-child(2) { color: var(--b-accent); display: inline-block; transform: scale(1.14); }
:root .onb .specs[data-cs="underline"] .sp-words em:nth-child(2)::after { content: ""; position: absolute; left: 1.4cqw; right: 1.4cqw; bottom: -.4cqw; height: 1.1cqw; background: var(--b-accent); }
@media (prefers-reduced-motion: reduce) {
  :root .onb .specs.restyle .sp-box > * { animation: none; }
}
:root .onb .clip-still { display: block; }
:root .onb .fl-content > :is(.tcard, .gfx, .ncard, .cap, .disc, .stamp, .ghost) { z-index: 1; }
:root .onb .frame[data-content="words"] .clip-still { visibility: hidden; }
:root .onb .nc-logo img { display: block; max-height: 4.6cqw; max-width: 12cqw; object-fit: contain; }
:root .onb .nc-logo { padding: 0 1.6cqw; }
:root .onb .gfx[hidden], :root .onb .ncard[hidden] { display: none; }
:root .onb .fl-content > .ghost { z-index: 1; }
:root .onb .bars .bar small:empty { display: none; }
:root .onb .sp-card .sp-mark img { width: 100%; height: 100%; object-fit: contain; }
:root[data-motion="reduce"] .onb *, :root[data-motion="reduce"] .onb *::before, :root[data-motion="reduce"] .onb *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root .onb *, :root .onb *::before, :root .onb *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
:root .onb .fl { display: grid; }                       /* every layer child is absolute; grid only stops the frame reading as an icon row */
:root .onb .tcard .tc-k:empty { display: none; }        /* an empty kicker must not take a gap and push the title off centre */
:root .onb .cap .w { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* rs-fix: the frame's graphics at the mockup's sizes and places (onboarding.html .gfx / .ncard / .cap / .disc) */
:root .onb .frame .gfx { right: 3.6%; top: 6%; width: 32%; padding: 2.2cqw; border-radius: 1cqw; }
:root .onb .frame .gfx-k { font-size: 1.05cqw; letter-spacing: .14em; opacity: .75; font-weight: 500; }
:root .onb .frame .gfx-big { font-size: 4.6cqw; margin-top: .4cqw; line-height: 1.1; }
:root .onb .frame .bars { gap: 1.1cqw; height: 11cqw; margin-top: 1.4cqw; }
:root .onb .frame .bar { gap: .4cqw; }
:root .onb .frame .bar i { height: calc(var(--h) * 7.7cqw); border-radius: .3cqw; }
:root .onb .frame .bar em { font-size: .85cqw; margin: 0; }
:root .onb .frame .bar small { font-size: .75cqw; margin: 0; }
:root .onb .frame[data-gt="cards"] .bar i, :root .onb .frame[data-gt="cards"] .bar:nth-child(n) i { background: var(--b-c1) !important; opacity: 1; }
:root .onb .frame[data-gt="cards"] .bar.hi i { background: var(--b-accent) !important; }
:root .onb .frame .ncard { left: 3.6%; bottom: 19%; border-radius: 1cqw; box-shadow: 0 .6cqw 2cqw rgba(0,0,0,.18); }
:root .onb .frame .nc-t { padding: 1.2cqw 2cqw 1.2cqw 1.6cqw; line-height: 1.25; }
:root .onb .frame .nc-t b { font-size: 1.9cqw; }
:root .onb .frame .nc-t span { font-size: 1.15cqw; }
:root .onb .frame .nc-logo img { max-height: 3.4cqw; max-width: 9cqw; }
:root .onb .frame .cap, :root .onb .frame[data-content="words"] .cap { left: 6%; right: 6%; bottom: 9%; gap: 0; font-size: 2.7cqw; font-weight: 600; line-height: 1.3; min-height: 3.6cqw; }
:root .onb .frame .cap .w { margin: 0 .35cqw; padding: 0 .35cqw; border-radius: .3cqw; }
:root .onb .frame .disc { left: 3.6%; right: 3.6%; bottom: 2.4%; padding: 0; background: none; font: 400 .95cqw/1.3 var(--rs-font); color: rgba(255,255,255,.88); text-shadow: 0 .1cqw .4cqw rgba(0,0,0,.5); }
:root .onb .frame[data-content="words"] .disc { color: var(--b-text); text-shadow: none; }

/* ---------- specimens on the white panel ---------- */
:root .onb .rail-h.sp-h .r { margin-left: auto; }
:root .onb .specs { margin-top: 0; gap: var(--rs-s8); }
:root .onb .spec { display: grid; gap: var(--rs-s4); }
:root .onb .spec figcaption { margin: 0; font-size: var(--rs-fs-cap); color: var(--rs-tx-2); text-shadow: none; }
:root .onb .sp-box { aspect-ratio: 16 / 10; border-radius: 8px; box-shadow: 0 0 0 1px var(--rs-line); }

/* ---------- the sample dialog (#modalRoot) ---------- */
.modal.welcome-modal-box .wm-head { display: flex; align-items: flex-start; gap: var(--rs-gap); }
.modal.welcome-modal-box .wm-head > div { flex: 1; min-width: 0; }
.modal.welcome-modal-box .wm-x { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--rs-r-sm); background: none; color: var(--rs-tx-2); cursor: pointer; }
.modal.welcome-modal-box .wm-x:hover { background: var(--rs-inset); color: var(--rs-tx); }
.modal.welcome-modal-box .wm-x svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- smaller desktops / phones ---------- */
@media (max-width: 1180px) { :root .onb { --colw: 352px; } }
@media (max-width: 760px) {
  :root .onb .head { flex-wrap: wrap; align-items: flex-start; gap: var(--rs-s8); }
  :root .onb .prog { margin-left: 0; width: 100%; justify-content: space-between; }
  :root .onb .split { grid-template-columns: minmax(0, 1fr); }
  :root .onb .pvp { position: static; order: -1; }
  :root .onb .pvs { padding: calc(var(--rs-s8) - 1px); }
  :root .onb .frame { width: 100%; }
  :root .onb .rail-h { flex-wrap: wrap; }
  :root .onb .rail-h .cap2 { order: 3; width: 100%; }
  :root .onb .rail-h.sp-h .cap2 { order: 0; width: auto; }
  :root .onb .strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .onb .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .onb .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .onb .chips.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :root .onb .ftag { left: 8px; top: 8px; height: 22px; }
  :root .onb .e-msg { max-width: 54%; }
  :root .onb .bfrom .bq { display: block; -webkit-line-clamp: unset; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  :root .onb .spin { animation-duration: 2.4s; }
  :root .onb .ltile.wait .lm, :root .onb .chip .mo i { animation: none; }
}
:root .onb .sp-chart { display: flex; flex-direction: column; justify-content: space-between; }
:root .onb .sp-chart .sp-big { margin-top: 0; }