/* Scenes: tall wrapper + sticky stage, driven by --p and data-step (see js/engine.js).
   Without html.scenes-on every scene is a plain stacked section showing all steps. */

/* page progress */
.pbar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--red);z-index:90;pointer-events:none;
      transform-origin:0 50%;transform:scaleX(var(--page-p,0));}
@media (prefers-reduced-motion:reduce){.pbar{display:none;}}

.scene{position:relative;}
.scene .stage{position:relative;}
.scene .steps{margin:0;padding:0;list-style:none;}

/* ---- pinned layouts ---- */
.scenes-on .scene .stage{position:sticky;top:0;height:100svh;overflow:hidden;}

/* overlay: stage fills the screen, captions sit over it and switch by step */
.scenes-on .scene--overlay{height:calc(var(--len,5) * 100svh);}
.scenes-on .scene--overlay .steps{position:absolute;left:0;right:0;bottom:clamp(28px,8vh,96px);}
.scenes-on .scene--overlay .step{position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(14px);
                                 transition:opacity .3s ease,transform .3s cubic-bezier(.2,.7,.2,1);pointer-events:none;}
.scenes-on .scene--overlay .step.is-active{opacity:1;transform:none;pointer-events:auto;}

/* split: stage on the left, narrative blocks scroll on the right */
.scenes-on .scene--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start;}
.scenes-on .scene--split .stage{grid-column:1;grid-row:1;align-self:start;}
.scenes-on .scene--split .steps{grid-column:2;grid-row:1;}
.scenes-on .scene--split .step{min-height:88svh;display:flex;flex-direction:column;justify-content:center;
                               opacity:.28;transition:opacity .4s ease;}
.scenes-on .scene--split .step.is-active{opacity:1;}

/* stacked fallback spacing */
html:not(.scenes-on) .scene .step + .step{margin-top:clamp(28px,5vh,56px);}

/* ---------- shared scene typography ---------- */
.scene-band{background:var(--paper);color:var(--ink);}
.scene-band .scene{padding-block:clamp(40px,8vh,96px);}
.scenes-on .scene-band .scene{padding-block:0;}
.step .idx{display:block;margin-bottom:12px;font-family:var(--code);font-weight:600;font-size:var(--fs-xs);letter-spacing:.14em;color:var(--red);}
.step h3{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.028em;line-height:1.06;max-width:16ch;}
.step p{margin-top:16px;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--body);max-width:52ch;text-wrap:pretty;}
.step .stage-note,.stage-note{font-family:var(--code);font-size:var(--fs-xs);letter-spacing:.08em;color:var(--meta);}
.step .fig{margin-top:26px;max-width:520px;}
.step .kv{margin-top:20px;max-width:520px;}
.stage{display:flex;align-items:center;justify-content:center;}
.stage svg{width:100%;max-width:560px;height:auto;max-height:100%;}
/* the hero is a stage only for pinning; its icons (pill, cue) keep their own size */
.hero.stage{display:block;}
.hero.stage svg{width:auto;max-width:none;max-height:none;}
.hero.stage .pill svg{width:18px;height:18px;}
.hero.stage .cue svg{width:13px;height:13px;}
.next{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;margin-top:clamp(40px,7vh,72px);font-weight:600;}
.next span{font-family:var(--code);font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--meta);}
.next a{border-bottom:1px solid var(--rule-2);padding-bottom:2px;}
.next a::after{content:" \2192";}
.next a:hover{color:var(--red);border-bottom-color:var(--red);}

/* ---------- gimbal schematic: front cutaway in millimetres (y down), rotated by js/gimbal.js ---------- */
#gm-svg{max-height:min(100%,86svh);}
#gm-fade stop{stop-color:#fff;}
.gm-vert{stroke:var(--meta);stroke-width:.35;stroke-dasharray:.9 2.4;}
.gm-axis{stroke:var(--meta);stroke-width:.3;stroke-dasharray:4 1.4 .8 1.4;}
.gm-in{fill:#15181C;}
.gm-wall{fill:#C9CDD3;}
.gm-fixed{fill:#5B616B;stroke:#C9CDD3;stroke-width:.35;}
.gm-ring{fill:none;stroke:var(--red);stroke-width:.9;stroke-linejoin:round;}
.gm-pin{fill:var(--red);stroke:var(--d-paper);stroke-width:.4;}
.gm-joint{fill:var(--d-paper);stroke:var(--red);stroke-width:.6;}
.gm-servo{fill:#3B4048;stroke:#C9CDD3;stroke-width:.4;}
.gm-front{fill-opacity:.55;stroke-dasharray:1.4 .9;}
.gm-mount{fill:#C9CDD3;}
.gm-case{fill:#2A2D31;stroke:#5B616B;stroke-width:.35;}
.gm-horn{stroke:var(--red);stroke-width:1.5;stroke-linecap:round;}
.gm-horn-a{opacity:.7;}
.gm-hub{fill:#C9CDD3;}
.gm-rod{stroke:var(--red);stroke-width:.75;stroke-linecap:round;}
.gm-thrust{stroke:var(--red);stroke-width:.35;stroke-dasharray:2.2 1.4;}
.gm-flame{fill:#E8541E;opacity:.88;}
.gm-core{fill:#FFC266;opacity:.95;}
.gm-lead{stroke:var(--meta);stroke-width:.25;}
.gm-lab{font-family:var(--code);font-weight:500;font-size:3.7px;letter-spacing:.12em;text-transform:uppercase;fill:var(--meta);}
.gm-plan-tube{fill:#15181C;stroke:#C9CDD3;stroke-width:.5;}
.gm-plan-ring{fill:none;stroke:var(--red);stroke-width:.6;}
.gm-plan-mount{fill:#C9CDD3;}
.gm-plan-ax{stroke:var(--meta);stroke-width:.25;stroke-dasharray:1.6 .8;}
.gm-plan .gm-servo{stroke-width:.3;}

/* 3D view replaces the SVG once it is running */
.stage{position:relative;}
.scenes-on .stage.gm-3d svg{display:none;}
html:not(.scenes-on) .gm-canvas{display:none;}
.stage .gm-canvas{width:100%;height:100%;display:block;}
.gm-3d-note{position:absolute;left:0;bottom:clamp(12px,3vh,28px);margin:0;}

/* ---------- avionics: packet stage ---------- */
.pkt-stage{padding:0;}
.pkt{width:100%;max-width:520px;background:var(--d-paper);color:var(--d-ink);padding:clamp(20px,3vw,32px);border:1px solid var(--d-rule);}
.pkt-head{display:flex;justify-content:space-between;gap:12px;margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--d-rule);
          font-family:var(--code);font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--d-meta);}
.pkt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;}
.pkt-chips li{padding:8px 12px;border:1px solid #34373D;font-family:var(--code);font-weight:500;font-size:var(--fs-xs);letter-spacing:.06em;color:var(--d-ink);
              opacity:clamp(0.18, calc(var(--p, 1) * 14 - var(--i)), 1);transition:opacity .25s linear;}
.pkt-chips li:nth-child(3n+1){border-color:var(--red);}
.pkt-loop{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:18px;border-top:1px solid var(--d-rule);color:var(--d-body);font-size:var(--fs-sm);}
.pkt-loop b{font-size:var(--fs-xl);font-weight:600;color:var(--d-ink);letter-spacing:-.02em;margin-right:4px;}
.hz{position:relative;flex:none;width:44px;height:44px;border:1.5px solid #34373D;border-radius:50%;}
.hz i{position:absolute;left:50%;top:50%;width:1.5px;height:20px;background:var(--red);transform-origin:50% 0;transform:rotate(0deg);animation:hzsweep 1s linear infinite;}
@keyframes hzsweep{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.hz i{animation:none;}}
.pkt .stage-note{margin:18px 0 0;color:var(--d-meta);}

/* ---------- estimator demo ---------- */
.est-h{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.028em;line-height:1.06;}
.est-p{margin-top:16px;max-width:62ch;font-size:var(--fs-md);line-height:var(--lh-body);color:var(--body);text-wrap:pretty;}
.est{margin-top:clamp(24px,4vh,40px);max-width:960px;}
.est canvas{display:block;width:100%;aspect-ratio:16/6;background:var(--d-paper);border:1px solid var(--d-rule);}
.est-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:12px;}
.est-legend{font-family:var(--code);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--meta);flex:1 1 260px;}
.est-count{font-family:var(--code);font-size:var(--fs-xs);letter-spacing:.06em;color:var(--ink);}
.est-count b{color:var(--red);font-weight:600;}

/* ---------- recovery schematic ---------- */
.rc-tube{fill:none;stroke:var(--ink);stroke-width:2.5;}
.rc-part{fill:var(--paper-2);stroke:var(--ink);stroke-width:2;}
.rc-piston-body{fill:var(--ink);stroke:var(--ink);stroke-width:2;}
.rc-hole{fill:var(--paper);}
.rc-charge{fill:var(--red);stroke:var(--ink);stroke-width:2;}
.rc-pop{fill:#F2A63B;opacity:clamp(0, calc(1 - var(--p, 1) * 12), 1);}
.rc-cord{stroke:var(--red);stroke-width:2.5;stroke-dasharray:6 5;transform-origin:300px 610px;transform:scaleY(calc(1 + var(--p, 1) * 0.78));}
.rc-cone{transform:translateY(calc(clamp(0, (var(--p, 1) - 0.12) * 1.7, 1) * -190px));}
.rc-chute{transform:translateY(calc(clamp(0, (var(--p, 1) - 0.22) * 1.8, 1) * -150px));}
.rc-piston{transform:translateY(calc(clamp(0, (var(--p, 1) - 0.08) * 1.6, 1) * -90px));}
.rc-lab{font-family:var(--code);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;fill:var(--meta);}
.rc-note{position:absolute;left:0;bottom:clamp(12px,3vh,28px);margin:0;}
.seq{margin:18px 0 0;padding:0;list-style:none;counter-reset:s;max-width:52ch;}
.seq li{counter-increment:s;position:relative;padding:12px 0 12px 44px;border-top:1px solid var(--rule);font-size:var(--fs-md);line-height:1.5;color:var(--body);}
.seq li:last-child{border-bottom:1px solid var(--rule);}
.seq li::before{content:counter(s);position:absolute;left:0;top:12px;width:28px;height:28px;border:1.5px solid var(--red);border-radius:50%;
                display:flex;align-items:center;justify-content:center;font-family:var(--code);font-weight:600;font-size:var(--fs-xs);color:var(--red);}

/* ---------- hero: the disc, the mark and the headline move at different speeds while it scrolls out ---------- */
.scenes-on .hero-scene .hero{margin-top:-57px;}
.scenes-on .hero-scene .disc{transform:translateY(calc(var(--p, 0) * -9%)) scale(calc(1 + var(--p, 0) * .1));transform-origin:70% 40%;}
.scenes-on .hero-scene .mark{transform:translateY(calc(var(--p, 0) * -16%));}
.scenes-on .hero-scene .hero-body{opacity:calc(1 - var(--p, 0) * 1.5);transform:translateY(calc(var(--p, 0) * -48px));}
.scenes-on .hero-scene .hero-meta{opacity:calc(1 - var(--p, 0) * 2);}

/* ---------- flight scene ---------- */
.flight-rest{padding-top:clamp(40px,6vh,72px);}
.flight-stage{display:block;}
.fl-inner{width:100%;max-width:var(--wrap);margin-inline:auto;padding:clamp(28px,5vh,56px) var(--pad) 0;}
.scenes-on .flight-stage{display:flex;align-items:stretch;}
.scenes-on .fl-inner{height:100%;display:flex;flex-direction:column;padding-top:clamp(72px,11vh,110px);padding-bottom:clamp(230px,36svh,330px);}
.fl-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:10px;}
.fl-state{font-family:var(--code);font-weight:600;font-size:var(--fs-sm);letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.fl-read{font-family:var(--code);font-weight:500;font-size:var(--fs-sm);letter-spacing:.06em;color:var(--ink);}
.fl-read b{font-weight:600;font-variant-numeric:tabular-nums;}
#fl-svg{width:100%;height:auto;max-width:none;flex:1 1 auto;min-height:0;}
.fl-grid line{stroke:var(--rule);stroke-width:1;}
.fl-grid text,.fl-axis{font-family:var(--code);font-size:12px;letter-spacing:.08em;fill:var(--meta);}
.fl-dim{fill:none;stroke:#34373D;stroke-width:2;}
.fl-bright{fill:none;stroke:var(--red);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;}
#fl-dot{fill:var(--ink);stroke:var(--red);stroke-width:3;}
.fl-note{margin:8px 0 0;}
.flight-stage .steps{left:0;right:0;}
.scenes-on .flight-stage .steps{left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));right:var(--pad);bottom:clamp(24px,6vh,64px);}
.flight-stage .step{max-width:680px;}
.flight-stage .step p{max-width:60ch;}
html:not(.scenes-on) .flight-stage .steps{max-width:var(--wrap);margin:clamp(24px,4vh,40px) auto 0;padding-inline:var(--pad);padding-bottom:clamp(28px,5vh,56px);}
.fl-nodata #fl-svg{opacity:.35;}

/* ---------- architecture scene: the diagram builds up stage by stage ---------- */
.arch-stage .steps{left:0;right:0;}
.scenes-on .arch-stage{display:flex;align-items:stretch;}
.scenes-on .arch-stage .fl-inner{height:100%;display:flex;flex-direction:column;padding-top:clamp(64px,9vh,96px);padding-bottom:clamp(210px,31svh,290px);}
.scenes-on .arch-stage .fig{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.scenes-on .arch-stage .dia-wrap{flex:1 1 auto;min-height:0;border:0;background:none;padding:0;overflow:visible;}
.scenes-on .arch-stage .dia{min-width:0;width:100%;height:100%;}
.scenes-on .arch-stage .steps{left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));right:var(--pad);bottom:clamp(24px,6vh,64px);}
.arch-stage .step{max-width:680px;}
html:not(.scenes-on) .arch-stage .steps{max-width:var(--wrap);margin:clamp(24px,4vh,40px) auto 0;padding:0 var(--pad) clamp(28px,5vh,56px);}
.scenes-on .arch-scene [data-s]{opacity:.1;transition:opacity .45s ease;}
.scenes-on .arch-scene[data-step="0"] [data-s="0"]{opacity:1;}
.scenes-on .arch-scene[data-step="1"] [data-s="0"],
.scenes-on .arch-scene[data-step="1"] [data-s="1"]{opacity:1;}
.scenes-on .arch-scene[data-step="2"] [data-s="0"],
.scenes-on .arch-scene[data-step="2"] [data-s="1"],
.scenes-on .arch-scene[data-step="2"] [data-s="2"]{opacity:1;}
.scenes-on .arch-scene[data-step="3"] [data-s="0"],
.scenes-on .arch-scene[data-step="3"] [data-s="1"],
.scenes-on .arch-scene[data-step="3"] [data-s="2"],
.scenes-on .arch-scene[data-step="3"] [data-s="3"]{opacity:1;}
.scenes-on .arch-scene[data-step="4"] [data-s="0"],
.scenes-on .arch-scene[data-step="4"] [data-s="1"],
.scenes-on .arch-scene[data-step="4"] [data-s="2"],
.scenes-on .arch-scene[data-step="4"] [data-s="3"],
.scenes-on .arch-scene[data-step="4"] [data-s="4"]{opacity:1;}
.scenes-on .arch-scene .ln path,.scenes-on .arch-scene .ln-fb path{stroke-dasharray:7 6;animation:archflow 1.1s linear infinite;}
.scenes-on .arch-scene .ln-fb path{animation-direction:reverse;}
@keyframes archflow{to{stroke-dashoffset:-26;}}
.scenes-on .arch-stage .dia{max-width:none;}
.arch-stage .step h3,.flight-stage .step h3{max-width:none;}
.scenes-on .arch-stage .fl-inner{padding-bottom:clamp(250px,38svh,330px);}

/* ---------- operations scene ---------- */
.ops-grid{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,64px);align-items:start;}
@media(min-width:900px){.ops-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);}}
.ops-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px;counter-reset:none;}
@media(min-width:560px){.ops-list{grid-template-columns:1fr 1fr;}}
.ops-list li{display:flex;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid #34373D;font-size:var(--fs-sm);transition:opacity .35s ease,border-color .35s ease;}
.ops-list b{font-family:var(--code);font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;color:var(--meta);}
.ops-k{margin:0 0 12px;font-family:var(--code);font-weight:500;font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--meta);}
.ops-hot{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.ops-hot div{padding:12px 14px;border:1px solid #34373D;}
.ops-hot dt{font-family:var(--code);font-weight:600;font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--red);}
.ops-hot dd{margin:6px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--body);}
.ops-roles{margin:18px 0 0;font-size:var(--fs-sm);line-height:1.5;color:var(--body);}
.ops-side .btn{background:transparent;color:var(--ink);border-color:var(--ink);}
.ops-side .btn:hover{color:var(--red);border-color:var(--red);}
.ops-stage .steps{left:0;right:0;}
.ops-stage .step{max-width:680px;}
.scenes-on .ops-stage{display:flex;align-items:stretch;}
.scenes-on .ops-stage .fl-inner{height:100%;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(72px,10vh,100px);padding-bottom:clamp(240px,36svh,320px);}
.scenes-on .ops-stage .steps{left:max(var(--pad),calc((100% - var(--wrap)) / 2 + var(--pad)));right:var(--pad);bottom:clamp(24px,6vh,64px);}
html:not(.scenes-on) .ops-stage .steps{max-width:var(--wrap);margin:clamp(24px,4vh,40px) auto 0;padding:0 var(--pad) clamp(28px,5vh,56px);}
.scenes-on .ops-scene .ops-list li{opacity:.3;}
.scenes-on .ops-scene[data-step="0"] .ops-list li[data-ph~="0"]{opacity:1;border-color:var(--red);}
.scenes-on .ops-scene[data-step="1"] .ops-list li[data-ph~="1"]{opacity:1;border-color:var(--red);}
.scenes-on .ops-scene[data-step="2"] .ops-list li[data-ph~="2"]{opacity:1;border-color:var(--red);}
.scenes-on .ops-scene[data-step="3"] .ops-list li[data-ph~="3"]{opacity:1;border-color:var(--red);}
.scenes-on .ops-scene[data-step="4"] .ops-list li[data-ph~="4"]{opacity:1;border-color:var(--red);}

/* ---------- figures strip ---------- */
.gal:focus-visible{outline:2px solid var(--red);outline-offset:6px;}
@media(min-width:820px){
  .gal{display:flex;gap:clamp(14px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-width:thin;}
  .gal > .fig{flex:0 0 clamp(300px,31vw,420px);scroll-snap-align:center;transform:scale(calc(.9 + var(--r, 1) * .1));transform-origin:50% 60%;transition:transform .2s ease;}
}
/* stacked layout: the stage and its steps follow each other instead of sitting side by side */
.ops-stage,.arch-stage,.flight-stage{display:block;}
.scenes-on .ops-stage,.scenes-on .arch-stage,.scenes-on .flight-stage{display:flex;}

/* ================= compact: phones held upright (html.scenes-compact, set by js/engine.js) =================
   Overlay scenes keep a full-screen stage; the caption sits in a band at the bottom whose height (--cap) the
   engine measures from the longest caption, and the stage content stops above it. Split scenes pin the stage
   in the top half under the header; the steps scroll up underneath it. Heights use svh, never vh, so the
   iOS toolbar sliding in and out does not move anything. */
.scenes-compact{--hdr:57px;}

/* overlay: shorter runs on a tall narrow screen, a solid caption band at the bottom */
.scenes-compact .scene--overlay{height:calc((var(--len,5) * .75 + .25) * 100svh);}
.scenes-compact .scene--overlay .steps{left:0;right:0;bottom:0;}
.scenes-compact .scene--overlay .step{max-width:none;padding:22px var(--pad) 18px;
                                      background:linear-gradient(to bottom,rgba(0,0,0,0),var(--paper) 20px);}
.scenes-compact .scene--overlay .step .idx{margin-bottom:6px;}
.scenes-compact .scene--overlay .step h3{font-size:clamp(20px,5.6vw,25px);max-width:none;}
.scenes-compact .scene--overlay .step p{margin-top:8px;font-size:clamp(14px,3.85vw,15.5px);line-height:1.52;}
.scenes-compact .flight-stage .fl-inner,
.scenes-compact .arch-stage .fl-inner,
.scenes-compact .ops-stage .fl-inner{padding-top:calc(var(--hdr) + 14px);padding-bottom:calc(var(--cap,240px) + 6px);
                                      clip-path:inset(calc(var(--hdr) + 6px) 0 0 0);}
/* content taller than the room (--over > 0, measured by the engine) glides up between 10 % and 90 % of the scene */
.scenes-compact .scene--overlay .fl-inner > *{transform:translateY(calc(var(--over, 0px) * clamp(0, (var(--p, 0) - .1) * 1.25, 1) * -1));}

/* hero: the stage may be taller than a short phone; it pins while it fits and scrolls on after that */
.scenes-compact .hero-scene .stage{height:auto;min-height:100svh;}
/* on a phone the disc sits low: it rises into the room the headline leaves behind */
.scenes-compact .hero-scene .disc{transform:translateY(calc(var(--p, 0) * -24%)) scale(calc(1 + var(--p, 0) * .16));transform-origin:60% 60%;}
.scenes-compact .hero-scene .mark{transform:translateY(calc(var(--p, 0) * -52%));}

/* flight: js/flight.js redraws the chart in the stage's own pixels, so labels and lines keep their size */
.scenes-compact .flight-stage .fl-inner{justify-content:center;}
.scenes-compact .fl-top{flex-wrap:wrap;gap:2px 12px;}
.scenes-compact #fl-svg{flex:1 1 0;max-height:min(100%,112vw);}

/* architecture: js/arch.js frames one column of the diagram at a time, then the whole loop */
.scenes-compact .arch-stage .fig{flex:1 1 0;}
.scenes-compact .arch-stage .dia-wrap{flex:1 1 0;position:relative;}
.scenes-compact .arch-stage .dia{position:absolute;inset:0;}

/* operations: the twelve lists in two columns, everything smaller */
.scenes-compact .ops-stage .fl-inner{justify-content:flex-start;}
.scenes-compact .ops-grid{gap:14px;margin-block:auto;}   /* centred while it fits, top-aligned once it does not */
.scenes-compact .ops-list{grid-template-columns:1fr 1fr;gap:6px;}
.scenes-compact .ops-list li{gap:8px;padding:7px 9px;font-size:12.5px;line-height:1.25;}
.scenes-compact .ops-k{margin-bottom:8px;}
.scenes-compact .ops-hot{gap:6px;}
.scenes-compact .ops-hot div{padding:7px 9px;}
.scenes-compact .ops-hot dd{margin-top:3px;font-size:12.5px;line-height:1.35;}
.scenes-compact .ops-roles{margin-top:10px;font-size:12.5px;line-height:1.4;}

/* split: the stage is pinned under the header across the full width, the steps pass under it */
.scenes-compact .scene--split{display:block;--stage-h:clamp(230px,46svh,460px);}
.scenes-compact .scene--split .stage{top:var(--hdr);z-index:3;height:var(--stage-h);margin-inline:calc(var(--pad) * -1);
                                     padding:10px var(--pad);background:var(--paper);
                                     box-shadow:0 1px 0 var(--rule),0 16px 14px -4px var(--paper);}
.scenes-compact .scene--split .steps{padding-bottom:calc((100svh - var(--hdr) - var(--stage-h)) * .45);}
.scenes-compact .scene--split .step{min-height:calc(100svh - var(--hdr) - var(--stage-h));padding-block:28px;opacity:.32;}
.scenes-compact .scene--split .step.is-active{opacity:1;}
.scenes-compact #gimbal-scene .stage{padding:0;}
.scenes-compact .gm-3d-note,.scenes-compact .rc-note{left:var(--pad);bottom:8px;}
.scenes-compact .rc-lab{font-size:19px;letter-spacing:.08em;}   /* the drawing is scaled down about 2.5 times */
#packet-scene{--stage-h:clamp(300px,50svh,440px);}
.scenes-compact .pkt-stage{padding:10px var(--pad);}
.scenes-compact .pkt{padding:12px 14px;}
.scenes-compact .pkt-head{margin-bottom:10px;padding-bottom:8px;}
.scenes-compact .pkt-chips{gap:5px;}
.scenes-compact .pkt-chips li{padding:4px 7px;font-size:10.5px;letter-spacing:.03em;}
.scenes-compact .pkt-loop{gap:12px;margin-top:14px;padding-top:12px;}
.scenes-compact .pkt-loop b{font-size:var(--fs-lg);}
.scenes-compact .hz{width:34px;height:34px;}
.scenes-compact .hz i{height:15px;}
.scenes-compact .pkt .stage-note{margin-top:10px;}