/* "Bring your own model" scene: one 600x444 3D set that scales to its box.
   Animated by assets/byom-scene.js (needs gsap). */
.cb-art{--cb-th:url(https://i.ytimg.com/vi/OhOmLqR5nN4/maxresdefault.jpg)}
.cb-stage{position:relative;width:100%;aspect-ratio:600/444;overflow:hidden;background:radial-gradient(95% 80% at 50% 0%,#ffffff 0%,#f7f8fa 52%,#e9ecf1 100%)}
.cb-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(10,10,10,0) 64%,rgba(10,10,10,.045));pointer-events:none}
.cb-art{position:absolute;left:50%;top:50%;width:600px;height:444px;margin:-222px 0 0 -300px;transform:scale(var(--cb-s,1));visibility:hidden;font-family:var(--sans);color:var(--ink);text-align:left;line-height:1.3}
.cb-art.cb-on{visibility:visible}
.cb-art *{box-sizing:border-box}
.cb-art svg{flex:none;display:block}
.cb-fade{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 44%}
.cb-cam{position:absolute;inset:0;transform-style:preserve-3d}
.cb-cam>*{position:absolute}
.cb-glow{left:60px;top:10px;width:480px;height:400px;border-radius:50%;background:radial-gradient(closest-side,rgba(59,130,217,.2),rgba(59,130,217,0));pointer-events:none}
.cb-sk{display:block;height:7px;border-radius:4px;background:#e4e4e4;transform-origin:left center}
.cb-tag{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.cb-capn{position:absolute;left:20px;bottom:16px;display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
.cb-stepn{font:500 10.5px var(--mono);color:var(--accent)}
.cb-pd{display:flex;gap:4px;margin-left:2px}
.cb-pd i{width:5px;height:5px;border-radius:3px;background:#cfd3da}
.cb-psh{left:50px;top:352px;width:340px;height:36px;border-radius:50%;background:rgba(10,10,10,.26);filter:blur(20px)}
.cb-br{left:30px;top:30px;width:372px;height:336px;border-radius:18px;background:#fff;border:1px solid var(--border);box-shadow:0px 0px 0px 0px rgba(59,130,217,0),0px 1px 0px 0px #e4e4e4,0px 30px 54px -24px rgba(10,10,10,.34)}
.cb-bh{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-bottom:1px solid var(--border-2);font-size:11px;font-weight:600;color:var(--muted)}
.cb-bh>i{width:7px;height:7px;border-radius:50%;background:var(--stroke)}
.cb-bh span{margin-left:6px}
.cb-vid{position:absolute;left:16px;top:48px;right:16px;display:flex;gap:11px;align-items:center}
.cb-th{position:relative;flex:none;width:112px;height:63px;border-radius:8px;overflow:hidden;background:#141414 var(--cb-th) center/cover no-repeat}
.cb-glare{position:absolute;top:-20%;bottom:-20%;left:0;width:55%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));transform:translateX(-140%)}
.cb-vid b{display:block;font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.cb-vid span{display:block;margin-top:3px;font-size:10.5px;color:var(--muted)}
.cb-sum{position:absolute;left:16px;right:16px;top:124px;height:134px;border:1px solid var(--border);border-radius:12px;background:var(--bg-tint);padding:11px 12px}
.cb-sh{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:-.01em}
.cb-sh svg{width:14px;height:14px}
.cb-mp{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:999px;padding:3px 9px 3px 7px;white-space:nowrap}
.cb-mp i{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.cb-tl{margin:8px 0 0;font-size:11.5px;line-height:1.45;color:var(--ink-2)}
.cb-tl .cb-tag{margin-right:5px}
.cb-tl span{display:inline-block;white-space:pre}
.cb-bd{position:relative;height:40px;margin-top:9px}
.cb-v{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px}
.cb-v div{display:flex;align-items:center;gap:6px}
.cb-v div::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.cb-v.n div::before{content:attr(data-n);width:13px;height:13px;border-radius:4px;background:var(--accent-bg);color:var(--accent-d);font:600 8.5px/13px var(--mono);text-align:center}
.cb-v.g{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;align-content:start}
.cb-kf{position:absolute;left:16px;right:16px;top:272px;height:46px;border:1.5px dashed var(--stroke);border-radius:12px;display:flex;align-items:center;gap:9px;padding:0 12px;background:rgba(234,242,252,0)}
.cb-kf>svg{width:15px;height:15px;color:var(--faint)}
.cb-kph{font-size:12px;color:var(--faint)}
.cb-lock{position:relative;margin-left:auto;width:16px;height:16px;color:var(--faint)}
.cb-lock svg{position:absolute;inset:0;width:16px;height:16px}
.cb-lock svg+svg{color:var(--accent);opacity:0}
.cb-key{left:0;top:0;display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono);color:var(--ink);background:#fff;border:1px solid #c4ddf6;border-radius:9px;padding:6px 11px 6px 9px;white-space:nowrap;box-shadow:0px 16px 32px -8px rgba(59,130,217,.6),0px 2px 6px 0px rgba(10,10,10,.1);opacity:0}
.cb-key svg{width:14px;height:14px;color:var(--accent)}
.cb-stay{left:104px;top:352px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--accent-d);background:#fff;border:1px solid var(--accent-bd);border-radius:999px;padding:6px 13px 6px 9px;box-shadow:0 14px 28px -12px rgba(59,130,217,.55);white-space:nowrap}
.cb-stay svg{width:15px;height:15px}
.cb-wires{left:0;top:0;width:600px;height:444px;pointer-events:none;overflow:visible}
.cb-wires path{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round}
.cb-wires .w{stroke-dasharray:1;stroke-dashoffset:1;opacity:.45}
.cb-wires .p{stroke-width:3;stroke-dasharray:.14 1;stroke-dashoffset:1.14;opacity:0}
.cb-m{left:448px;width:122px;height:86px;border-radius:16px;background:#fff;border:1px solid var(--border);box-shadow:0px 0px 0px 0px rgba(59,130,217,0),0px 1px 0px 0px #e4e4e4,0px 22px 40px -20px rgba(10,10,10,.36);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px}
.cb-m i{width:30px;height:30px;border-radius:10px;background:var(--bg-tint2);border:1px solid var(--border);display:grid;place-items:center;color:var(--slate)}
.cb-m i svg{width:16px;height:16px}
.cb-m b{font-size:13px;font-weight:600;letter-spacing:-.01em}
