/* B253: the live product. A working miniature of the OKR app that plays one bottleneck from stuck to cleared. Sized in
   container units so it scales with its frame; without script, or with reduced motion, it shows the finished state. */
.lv{container-type:inline-size;position:relative;aspect-ratio:1080/700;background:#f5f7fc;font-family:Rubik,system-ui,sans-serif;color:#0a1633;overflow:hidden;display:grid;grid-template-columns:19cqw 1fr}
.lv *{box-sizing:border-box}
.lv-rail{background:#0b1530;padding:3.2cqw 2cqw;display:flex;flex-direction:column;gap:1.1cqw}
.lv-logo{height:2.4cqw;width:auto;margin-bottom:1.6cqw}
.lv-ask{display:flex;align-items:center;gap:.8cqw;padding:1cqw 1.2cqw;border-radius:1cqw;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#fff;font-size:1.3cqw;margin-bottom:1cqw}
.lv-ask i{width:1.3cqw;height:1.3cqw;border-radius:50%;background:#5b8cfa}
.lv-nav{display:flex;align-items:center;gap:1cqw;padding:.9cqw 1.2cqw;border-radius:1cqw;color:#c9d3ea;font-size:1.4cqw}
.lv-nav.on{background:rgba(255,255,255,.08);color:#fff}
.lv-nav b{width:1.4cqw;height:1.4cqw;border-radius:.4cqw;border:.18cqw solid currentColor;opacity:.8}
.lv-me{margin-top:auto;display:flex;align-items:center;gap:1cqw;color:#fff;font-size:1.25cqw}
.lv-me span{width:2.8cqw;height:2.8cqw;border-radius:50%;background:#1e2b4f;display:grid;place-items:center;font-size:1.05cqw;font-weight:600}
.lv-main{padding:3.4cqw 3.6cqw;display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:auto 1fr;gap:1.6cqw 2cqw;align-content:start}
.lv-top{grid-column:1/-1}
.lv-top small{display:block;font-size:1.2cqw;color:#566074}
.lv-top h3{margin:.4cqw 0 0;font-weight:600;font-size:3.1cqw;letter-spacing:-.03em;line-height:1.05}
.lv-card{background:#fff;border-radius:1.4cqw;box-shadow:0 0 0 1px #e3e8f2,0 1.6cqw 3cqw -2cqw rgba(11,21,48,.35);padding:1.8cqw}
.lv-kick{display:flex;align-items:center;gap:.8cqw;font-size:1.15cqw;color:#566074}
.lv-kick em{font-style:normal;padding:.25cqw .8cqw;border-radius:99px;background:#e8efff;color:#1559f5;font-weight:500}
.lv-brief p{margin:1.2cqw 0 0;font:400 1.75cqw/1.4 "Source Serif 4",Georgia,serif;color:#0a1633}
.lv-kr{margin-top:1.4cqw}
.lv-kr-t{display:flex;align-items:center;gap:1cqw}
.lv-n{display:grid;place-items:center;width:2.4cqw;height:2.4cqw;border-radius:.6cqw;background:#0b1530;color:#fff;font-size:1.2cqw;font-weight:600}
.lv-kr-t b{font-size:1.75cqw;font-weight:600}
.lv-kr-s{margin:.5cqw 0 0 3.4cqw;font-size:1.2cqw;color:#566074}
.lv-val{display:flex;align-items:baseline;gap:.6cqw;margin:1.2cqw 0 0 3.4cqw}
.lv-val strong{font-size:3cqw;font-weight:600;letter-spacing:-.02em}
.lv-val span{font-size:1.3cqw;color:#566074}
.lv-bar{display:flex;align-items:center;gap:1.2cqw;margin:1.2cqw 0 0 3.4cqw}
.lv-track{flex:1;height:.8cqw;border-radius:99px;background:#e9edf5;overflow:hidden}
.lv-fill{height:100%;width:100%;border-radius:99px;background:#1559f5;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.lv-pill{padding:.45cqw 1.1cqw;border-radius:99px;font-size:1.2cqw;font-weight:500;white-space:nowrap;transition:background .4s,color .4s}
.lv-pill.behind{background:#0b1530;color:#fff}
.lv-pill.ok{background:#e8efff;color:#1559f5}
.lv-go{margin:1.6cqw 0 0 3.4cqw;display:inline-flex;align-items:center;gap:.6cqw;padding:.9cqw 1.5cqw;border-radius:99px;background:#1559f5;color:#fff;font-size:1.3cqw;font-weight:500;transition:transform .2s,box-shadow .2s,opacity .4s}
.lv-go.press{transform:scale(.94);box-shadow:0 0 0 .5cqw rgba(21,89,245,.25)}
.lv-side{display:flex;flex-direction:column;gap:1.4cqw}
.lv-work h4{margin:0;font-size:1.45cqw;font-weight:600;display:flex;align-items:center;gap:.8cqw}
.lv-work h4 img{width:2cqw;height:2cqw}
.lv-steps{list-style:none;margin:1.2cqw 0 0;padding:0;display:grid;gap:.9cqw}
.lv-steps li{display:flex;gap:.9cqw;align-items:flex-start;font-size:1.3cqw;line-height:1.35;color:#425170;transition:opacity .45s,transform .45s}
.lv-steps li::before{content:"";flex:none;margin-top:.15cqw;width:1.6cqw;height:1.6cqw;border-radius:50%;background:#1559f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat}
.lv-ok{transition:opacity .45s,transform .45s}
.lv-ok p{margin:0;font-size:1.4cqw;line-height:1.4;color:#0a1633}
.lv-btns{display:flex;gap:.8cqw;margin-top:1.2cqw}
.lv-btns span{padding:.8cqw 1.4cqw;border-radius:99px;font-size:1.25cqw;font-weight:500;box-shadow:inset 0 0 0 1px #d5dcea;color:#0a1633;transition:transform .2s,box-shadow .2s}
.lv-btns .pri{background:#1559f5;color:#fff;box-shadow:none}
.lv-btns .pri.press{transform:scale(.94);box-shadow:0 0 0 .5cqw rgba(21,89,245,.25)}
.lv-done{display:flex;align-items:center;gap:.8cqw;font-size:1.25cqw;color:#1559f5;font-weight:500;transition:opacity .45s}
.lv-done::before{content:"";width:1.4cqw;height:1.4cqw;border-radius:50%;background:#1559f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat}
/* the states the script steps through; the markup alone shows the finished one */
.lv.s0 .lv-steps li,.lv.s0 .lv-ok,.lv.s0 .lv-done{opacity:0;transform:translateY(.8cqw)}
.lv.s1 .lv-steps li:nth-child(n+2),.lv.s1 .lv-ok,.lv.s1 .lv-done{opacity:0;transform:translateY(.8cqw)}
.lv.s2 .lv-steps li:nth-child(n+3),.lv.s2 .lv-ok,.lv.s2 .lv-done{opacity:0;transform:translateY(.8cqw)}
.lv.s3 .lv-ok,.lv.s3 .lv-done{opacity:0;transform:translateY(.8cqw)}
.lv.s4 .lv-done{opacity:0}
.lv:is(.s0,.s1,.s2,.s3,.s4,.s5) .lv-fill{width:var(--from)}
.lv.s6 .lv-fill,.lv:not([class*=" s"]) .lv-fill{width:var(--to)}
.lv-replay{position:absolute;right:1.4cqw;bottom:1.4cqw;border:0;padding:.7cqw 1.2cqw;border-radius:99px;background:rgba(11,21,48,.8);color:#fff;font:500 1.15cqw/1 Rubik,system-ui,sans-serif;cursor:pointer;opacity:0;transition:opacity .3s}
.lv:hover .lv-replay,.lv-replay:focus-visible{opacity:1}
.lv-replay:focus-visible{outline:2px solid #6e9bff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lv *{transition:none!important}.lv-replay{display:none}}
.sx-browser .lv img.lv-logo{width:auto;height:2.4cqw}
.sx-browser .lv .lv-work h4 img{width:2cqw;height:2cqw}
.sx-prod-live{padding:0}
.sx-prod-live .sx-browser{width:112%;max-width:none;margin:0}
@media (max-width:1099px){.sx-prod-live .sx-browser{width:100%}}
.sx-browser:has(.lv),.lv-frame{container-type:inline-size}
.lv-left{display:flex;flex-direction:column;gap:1.4cqw}
.lv-nums ul{list-style:none;margin:.8cqw 0 0;padding:0}
.lv-nums li{display:grid;grid-template-columns:1fr auto auto;gap:1.2cqw;align-items:center;padding:.8cqw 0;border-top:1px solid #eef1f7;font-size:1.25cqw}
.lv-nums li:first-child{border-top:0}
.lv-nums span{color:#425170}
.lv-nums b{font-weight:600}
.lv-nums em{font-style:normal;font-size:1.1cqw;padding:.25cqw .8cqw;border-radius:99px;background:#e8efff;color:#1559f5}
.lv-nums li:last-child em{background:#fff;box-shadow:inset 0 0 0 1px #c3cbdc;color:#425170}
/* on a phone the frame is narrow: one column, the bottleneck and the work, in readable sizes */
@container (max-width:560px){
 .lv{grid-template-columns:1fr;aspect-ratio:auto}
 .lv-rail,.lv-brief,.lv-nums{display:none}
 .lv-main{grid-template-columns:1fr;padding:16px;gap:12px}
 .lv-top small{font-size:11px}.lv-top h3{font-size:20px}
 .lv-left,.lv-side{gap:10px}
 .lv-card{padding:14px;border-radius:12px}
 .lv-kick{font-size:11px}
 .lv-n{width:20px;height:20px;font-size:11px;border-radius:5px}.lv-kr-t{gap:8px}.lv-kr-t b{font-size:15px}
 .lv-kr-s,.lv-val,.lv-bar,.lv-go{margin-left:28px}.lv-kr-s{font-size:11.5px}
 .lv-val strong{font-size:24px}.lv-val span{font-size:12px}
 .lv-track{height:6px}.lv-pill{font-size:11px;padding:3px 9px}
 .lv-go{font-size:12px;padding:7px 12px;margin-top:12px}
 .lv-work h4{font-size:13px}.sx-browser .lv .lv-work h4 img{width:16px;height:16px}
 .lv-steps{gap:7px;margin-top:10px}.lv-steps li{font-size:12px;gap:8px}.lv-steps li::before{width:14px;height:14px}
 .lv-ok p{font-size:13px}.lv-btns{gap:6px;margin-top:10px}.lv-btns span{font-size:11.5px;padding:6px 11px}
 .lv-done{font-size:11.5px;gap:6px}.lv-done::before{width:12px;height:12px}
 .lv-replay{font-size:11px;padding:6px 10px;right:10px;bottom:10px}
}
/* on a phone the frame is narrow: one column, the bottleneck and the work, in readable sizes */
@container (max-width:560px){
 .lv{grid-template-columns:1fr;aspect-ratio:auto}
 .lv-rail,.lv-brief,.lv-nums{display:none}
 .lv-main{grid-template-columns:1fr;padding:16px;gap:12px}
 .lv-top small{font-size:11px}.lv-top h3{font-size:20px}
 .lv-left,.lv-side{gap:10px}
 .lv-card{padding:14px;border-radius:12px}
 .lv-kick{font-size:11px}
 .lv-n{width:20px;height:20px;font-size:11px;border-radius:5px}.lv-kr-t{gap:8px}.lv-kr-t b{font-size:15px}
 .lv-kr-s,.lv-val,.lv-bar,.lv-go{margin-left:28px}.lv-kr-s{font-size:11.5px}
 .lv-val strong{font-size:24px}.lv-val span{font-size:12px}
 .lv-track{height:6px}.lv-pill{font-size:11px;padding:3px 9px}
 .lv-go{font-size:12px;padding:7px 12px;margin-top:12px}
 .lv-work h4{font-size:13px}.sx-browser .lv .lv-work h4 img{width:16px;height:16px}
 .lv-steps{gap:7px;margin-top:10px}.lv-steps li{font-size:12px;gap:8px}.lv-steps li::before{width:14px;height:14px}
 .lv-ok p{font-size:13px}.lv-btns{gap:6px;margin-top:10px}.lv-btns span{font-size:11.5px;padding:6px 11px}
 .lv-done{font-size:11.5px;gap:6px}.lv-done::before{width:12px;height:12px}
 .lv-replay{font-size:11px;padding:6px 10px;right:10px;bottom:10px}
}