/* Scene 07 · Cú chốt của 06 (LỆNH 40, 42). A WebGL canvas of its own (.ch-gl, pb-chain.js mode "b": the same night model as 06) under the
   DOM that scene-fit06.js writes from one clock (NQ_CK). Every label is the deck's dark see-through pill (24 px semibold, a 1 px light edge: the
   --nq-pill-* tokens of pitch.css) with a 1 px leader ending in a dot; blue = NEXQUOTE only (its card, its rings, "1 nguồn giá", the fields it reads,
   the three call-outs); the old way's files warm; the rooms after the pilot neutral, dashed. Face-on, the real UI is spotlit (the rest 60 % dark).
   Text ≥ 24 px. Nothing in the bottom 140 px (the page's bar). */
#s-fit,#s-fit.active{filter:none!important;transform:none!important}
#s-fit .c6{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#s-fit .c6 *{box-sizing:border-box}
#s-fit .c6 p{margin:0}
#s-fit .c6>*{position:absolute;margin:0;left:0;top:0}
#s-fit .head{z-index:6}
#s-fit.scene .head::before{background:rgba(1,4,12,.85);bottom:-83px;--nqp-fade:200px;   /* LỆNH 42: the title band 85 % dark, solid down to y 228, gone by y 262 and out to x 1770 (what is lit behind the title never runs through it) */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--nqp-fade)),transparent 100%),linear-gradient(180deg,transparent 0,#000 34%,#000 86%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - var(--nqp-fade)),transparent 100%),linear-gradient(180deg,transparent 0,#000 34%,#000 86%,transparent 100%)}
#s-fit .c6 .ch-gl{width:1920px;height:1080px;display:block;background:#0A1428}
#s-fit .c6-still{width:1920px;height:1080px;max-width:none;display:none}
#s-fit.c6-still-on .c6-still{display:block}
#s-fit.c6-still-on .c6 .ch-gl{display:none}
#s-fit .c6-bot{top:740px;width:1920px;height:340px;opacity:0;background:linear-gradient(0deg,rgba(4,8,18,.92) 0,rgba(4,8,18,.78) 55%,rgba(4,8,18,0) 100%)}
#s-fit .c6-svg{width:1920px;height:1080px;overflow:visible}
/* a leader: 1 px, its head a filled dot (the subpath of the circle is the only one with an area) */
#s-fit .c6-svg path{fill:var(--nq-ld);stroke:var(--nq-ld);stroke-width:1}
#s-fit .c6-svg .dl{fill:none;stroke-dasharray:5 5}
/* the NEXQUOTE card laid over the 3D screen, face-on (the engine draws the same picture into the screen): the bar, then a view (the two crops of the
   real UI and the spotlight over them in one layer, nudged 1,15× by the scene) clipped to the card */
#s-fit .c6-card{width:1100px;height:576px;opacity:0;transform-origin:0 0;border-radius:10px;
  background:linear-gradient(180deg,#101A32 0,#070C19 30%);box-shadow:inset 0 0 0 1px rgba(143,184,255,.42)}   /* LỆNH 48: the 60 px glow dropped (the card moves) */
#s-fit .c6-cbar{position:absolute;left:24px;right:24px;top:18px;display:flex;align-items:baseline;justify-content:space-between}
#s-fit .c6-cbar b{font:800 24px/1 "Inter",sans-serif;letter-spacing:.22em;color:#CFE2FF}
#s-fit .c6-cbar span{font:500 24px/1 "Inter",sans-serif;color:#E1E8F2}
#s-fit .c6-view{position:absolute;left:0;top:60px;width:1100px;height:516px;overflow:hidden;border-radius:0 0 10px 10px}
#s-fit .c6-view.mf{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 var(--mf),#000 calc(100% - var(--mf)),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 var(--mf),#000 calc(100% - var(--mf)),transparent 100%)}
#s-fit .c6-zoom{position:absolute;left:0;top:-60px;width:1100px;height:576px;transform-origin:0 0}   /* no will-change: the nudge is re-rasterised at its scale (crisp text), a small layer */
#s-fit .c6-ui{position:absolute;left:24px;right:24px;overflow:hidden;border-radius:8px;background:#fff}
#s-fit .c6-ui img{display:block;height:auto;max-width:none}
#s-fit .c6-fx{position:absolute;left:0;top:0;overflow:visible}
/* the spotlight of one part: the dark over everything but its box(es), the ring (a faint wide one under a 3 px one), a fine line joining a pair, its number */
#s-fit .c6-g{opacity:0}
#s-fit .c6-dim{fill:#000;fill-opacity:.6;stroke:none}   /* everything but the lit part at 40 % of its brightness */
#s-fit .c6-h1{fill:none;stroke:#3F86FF;stroke-width:3}
#s-fit .c6-h2{fill:none;stroke:rgba(63,134,255,.28);stroke-width:9}
#s-fit .c6-g path.c6-ln{fill:none;stroke:#EAF0FA;stroke-width:1}
#s-fit .c6-dt{fill:#EAF0FA}
#s-fit .c6-bc{fill:#2A63E6;stroke:#fff;stroke-width:3}
#s-fit .c6-bt{font:800 24px "Inter",sans-serif;fill:#fff;text-anchor:middle;dominant-baseline:central}
html.proj #s-fit .c6-bc{fill:var(--nqp-fill)}
/* the three features at the right: blue pills (NEXQUOTE's), a white number each; they lie inside 96…1840 px */
#s-fit .c6-call{opacity:0;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:5px 18px 7px 8px;border-radius:999px;font:var(--nq-pill-font);color:#fff;background:var(--nq-pill-ai);box-shadow:inset 0 0 0 1px var(--nq-pill-ai-edge)}
#s-fit .c6-call i{flex:none;width:30px;height:30px;border-radius:50%;background:#fff;color:#1B44B4;font:800 20px/30px "Inter",sans-serif;font-style:normal;text-align:center}
/* the people's roles: the deck's pill */
#s-fit .c6-tag{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:var(--nq-pill-ink);background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
/* the old way's files (warm) */
#s-fit .c6-file{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:#FFB566;background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px #F2A24B}
/* NEXQUOTE: one source of prices; the fields it reads from the message (blue pills) */
#s-fit .c6-src,#s-fit .c6-field{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:#fff;background:var(--nq-pill-ai);box-shadow:inset 0 0 0 1px var(--nq-pill-ai-edge)}
html.proj #s-fit .c6-src{background:var(--nqp-fill)}
/* after the pilot: a quiet pill by the rooms */
#s-fit .c6-step{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:var(--nq-pill-ink);background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
#s-fit .c6-step::before,#s-fit .c6-step::after{content:"";position:absolute;top:-34px;width:1px;height:34px;background:rgba(232,226,214,.55)}
#s-fit .c6-step::before{left:22%}#s-fit .c6-step::after{right:22%}   /* a hanging sign: two fine wires up */
/* face-on: the lit wall under the title, dimmed */
#s-fit .c6-side{left:1180px!important;width:740px;height:1080px;opacity:0;background:linear-gradient(90deg,rgba(3,6,14,0) 0,rgba(3,6,14,.86) 34%,rgba(3,6,14,.92) 100%)}   /* face-on: the chips' side dark (the near shoulder out of focus there) */
#s-fit .c6-top{width:1920px;height:300px;opacity:0;background:linear-gradient(180deg,rgba(3,6,14,.62) 0,rgba(3,6,14,.45) 55%,rgba(3,6,14,0) 100%)}
#s-fit .c6-line{opacity:0;font:700 36px/1.2 "Inter",sans-serif;letter-spacing:-.01em;color:#fff;white-space:nowrap}
#s-fit .c6-pill{opacity:0;white-space:nowrap;padding:var(--nq-pill-pad);border-radius:999px;font:var(--nq-pill-font);color:var(--nq-pill-ink);background:var(--nq-pill-bg);box-shadow:inset 0 0 0 1px var(--nq-pill-edge)}
/* will-change only while something moves (the scene toggles .c6-mv): at rest the text is drawn as text, on whole device pixels */
#s-fit .c6.c6-mv :is(.c6-card,.c6-call,.c6-tag,.c6-file,.c6-src,.c6-field,.c6-step,.c6-line,.c6-pill){will-change:opacity,transform}
/* the match cut from 06: 06's last frame is 07's first, so 07 is there at once (no fade through the stage) while 06 leaves under it */
#s-compete.leaving+#s-fit.active{transition:none!important;opacity:1!important}
/* LỆNH 50 §A: the pre-rendered clips (nq-vid.js) under the DOM; while one stands in for the 3D the engine's canvas is hidden */
#s-fit .c6 .nq-vid{width:1920px;height:1080px;display:block;opacity:0;visibility:hidden;object-fit:cover;pointer-events:none;background:#0A1428}
#s-fit .c6 .nq-vid.on{opacity:1;visibility:visible}
#s-fit.nq-vmode .c6 .ch-gl{visibility:hidden}