/* Dedicated 3D exhibit. UI and geometry never compete for the same mobile pixels. */
.cine{position:relative;width:100%;max-width:none;margin:0;padding:0;background:#101214;color:#f4f4f0;isolation:isolate;--scene-pad:clamp(20px,4vw,64px)}
.cine{scroll-margin-top:var(--header-height,64px)}
.cine-track{height:440svh;position:relative}
.cine-pin{position:sticky;top:var(--header-height,64px);height:calc(100svh - var(--header-height,64px) - var(--consent-h,0px));display:grid;grid-template-rows:auto minmax(225px,1fr) auto auto;overflow:clip}
.cine-head{grid-row:1;padding:22px var(--scene-pad) 0;position:relative;z-index:1}
.cine-head .mono{margin:0;color:#adb4b7;font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.cine-head h2{font-size:clamp(27px,5.8vw,40px);line-height:1.08;margin:10px 0 0;color:#f4f4f0;letter-spacing:-.04em}
.cine-hint{display:none}
.cine-media{grid-row:2;position:relative;min-width:0;min-height:225px;background:radial-gradient(ellipse at 50% 46%,#242b30 0%,#14181b 44%,#101214 72%)}
.cine-viewport{position:absolute;inset:0;touch-action:pan-y}
.cine-viewport canvas{display:block;width:100%;height:100%;pointer-events:none}
.cine-poster{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}
.cine[data-mode="webgl"] .cine-poster{display:none}
.cine-skeleton{position:absolute;inset:0;display:none;place-content:center;justify-items:center;gap:16px;background:#101214;color:#b4bdc2;font-size:12px}
.cine[data-mode="loading"] .cine-skeleton{display:grid}
.cine-skeleton b{width:80px;height:100px;border:1px solid #8798a1;transform:skewY(-12deg);box-shadow:12px 6px 0 -1px #101214,12px 6px 0 0 #61717c,24px 12px 0 -1px #101214,24px 12px 0 0 #414e56}
.cine-body{grid-row:3;padding:0 var(--scene-pad)}
.cine-stack{display:grid}
.cine-panel{grid-area:1/1;opacity:0;visibility:hidden;filter:blur(2px);transform:translateY(8px);transition:opacity 280ms var(--ease-out-quint),transform 280ms var(--ease-out-quint),filter 280ms var(--ease-out-quint),visibility 280ms}
.cine-panel[data-active="true"]{opacity:1;visibility:visible;filter:none;transform:none}
.cine-panel .num{display:none}
.cine-panel h3{margin:0;color:#f4f4f0;font-size:clamp(27px,6.9vw,34px);letter-spacing:-.04em;line-height:1.12}
.cine-panel p{font-size:14px;line-height:1.5;max-width:43ch;color:#b7bec2;margin:10px 0 0}
.cine-panel p .cine-mark{color:var(--accent);font-weight:700}
.cine-panel dl{display:none}
.cine-rail{display:flex;justify-content:space-between;gap:10px;margin-top:18px;border-top:1px solid #ffffff20;padding-top:10px}
.cine-rail[hidden]{display:none}
.cine-step{width:44px;height:44px;border:1px solid transparent;border-radius:50%;background:none;color:#9fa9af;font:500 12px/1 var(--sans);cursor:pointer;transition:background 160ms,color 160ms}
.cine-step[aria-current="true"]{background:var(--accent);color:#14181b}
.cine-step span:last-child{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.cine-foot{grid-row:4;padding:12px var(--scene-pad) max(12px,env(safe-area-inset-bottom));display:grid;gap:6px}
.cine-transport{display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px;align-items:center;gap:12px}
.cine-play,.cine-replay{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff30;border-radius:50%;background:transparent;color:#fff;cursor:pointer;padding:0}
.cine-play svg{width:18px;height:18px;grid-area:1/1;fill:currentColor}
.cine-play .i-pause{display:none}.cine[data-playing="true"] .i-pause{display:block}.cine[data-playing="true"] .i-play{display:none}
.cine-replay svg{width:20px;height:20px;fill:currentColor}
.cine-play-halo,.cine-drag{display:none}
.cine-scrub{position:relative;display:flex;align-items:center;height:44px;cursor:ew-resize;touch-action:none}
.cine-chapters{display:flex;width:100%;gap:4px}
.cine-chapter{display:block;flex:1;height:3px;background:#ffffff30;overflow:hidden;border-radius:2px}
.cine-chapter i{display:block;height:100%;background:var(--accent);transform:scaleX(var(--fill,0));transform-origin:left}
.cine-knob{position:absolute;left:calc(var(--progress,0)*100%);width:8px;height:8px;border-radius:50%;background:#fff;transform:translateX(-50%)}
.cine-time{font-size:11px;white-space:nowrap;font-variant-numeric:tabular-nums;color:#b7bec2;margin:0}
.cine-time em{font-style:normal;margin:0 4px;color:#8a969d}
.cine-subline{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px}
.cine-foot .note{font-size:10px;color:#929ea4;margin:0;text-transform:none;letter-spacing:0}
.cine-scroll-link{border:0;padding:4px 0;background:none;color:#eec246;font:400 11px/1.3 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:28px}
.cine-scroll-link[hidden]{display:none}
.cine :where(button,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.cine button:active{transform:scale(.97)}
.cine-fallback{font-size:13px;color:#b7bec2;padding:0 var(--scene-pad);margin:0}
.cine-fallback[hidden]{display:none}
.cine:not([data-mode="webgl"]) .cine-transport{pointer-events:none;opacity:.35}
.cine[data-layout="flow"] .cine-track,.cine[data-mode="static"] .cine-track{height:auto}
/* Flow is the escape hatch for screens too short to pin the scene. There the block scrolls,
   so the stage is sized from the viewport: once the heading scrolls away, model + copy +
   transport still share one screen instead of pushing Play below the fold. */
.cine[data-layout="flow"] .cine-pin{height:auto;position:relative;top:auto;overflow:visible;grid-template-rows:auto clamp(225px,34svh,300px) auto auto}
.cine[data-mode="static"] .cine-pin{position:relative;top:auto;height:auto;display:flex;flex-direction:column;overflow:visible;padding-bottom:30px}
.cine[data-mode="static"] .cine-media{height:300px;flex:none;order:1}
.cine[data-mode="static"] .cine-head{order:0}
.cine[data-mode="static"] .cine-body{order:2}
.cine[data-mode="static"] .cine-stack{gap:24px}
.cine[data-mode="static"] .cine-panel{grid-area:auto;opacity:1;visibility:visible;transform:none}
.cine[data-mode="static"] .cine-rail,.cine[data-mode="static"] .cine-foot{display:none}
@media(min-width:900px){
 /* One contained stage, as in the Quadcode reference: headline and tabs sit above;
    copy, 3D and transport share the same protected 16:9-ish scene below. */
 .cine-pin{grid-template-columns:1fr;grid-template-rows:auto minmax(390px,1fr);gap:0}
 .cine-head{grid-area:1/1;padding:32px var(--scene-pad) 20px;pointer-events:auto}
 .cine-head h2{font-size:clamp(34px,3.5vw,54px)}
 .cine-media{grid-area:2/1;min-height:0;margin:0 var(--scene-pad) 26px;border:1px solid rgba(255,255,255,.13);border-radius:22px;overflow:hidden}
 .cine-body{grid-area:2/1;z-index:2;align-self:center;width:min(43%,540px);padding:0 calc(var(--scene-pad) + 36px);pointer-events:none}
 .cine-body :is(button,a){pointer-events:auto}
 .cine-panel{padding:22px 24px 20px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:rgba(16,18,20,.76);backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(0,0,0,.2)}
 .cine-panel .num{display:flex;align-items:center;gap:10px;color:var(--accent);margin-bottom:14px;font:800 13px/1 var(--mono);letter-spacing:.1em}
 .cine-panel .num::after{content:'';flex:1;max-width:34px;height:1px;background:var(--accent);opacity:.5}
 .cine-panel h3{font-size:clamp(28px,3vw,48px)}
 .cine-panel p{font-size:15px;max-width:35ch;line-height:1.55;margin-top:14px}
 .cine-panel dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
 .cine-panel dl div{padding-left:10px;border-left:2px solid rgba(238,194,70,.45)}
 .cine-panel dt{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#9ba4a8}
 .cine-panel dd{margin:4px 0 0;font-size:13px;font-weight:700;line-height:1.32;color:#f3f1eb}
 .cine-rail{max-width:420px;margin-top:18px}
 .cine-foot{grid-area:2/1;z-index:4;align-self:end;justify-self:center;width:min(78%,1120px);margin-bottom:28px;padding:10px 14px;border:1px solid rgba(255,255,255,.13);border-radius:16px;background:rgba(13,14,18,.88);backdrop-filter:blur(14px);box-shadow:0 18px 44px rgba(0,0,0,.32)}
 .cine-foot .cine-transport{grid-template-columns:44px minmax(0,1fr) auto 44px}
 .cine-subline{display:none}
 .cine-head .mono{font-size:12px}
 .cine-orbit-hint{left:auto;right:24px;top:24px;bottom:auto!important}
 .cine-orbit-reset{right:24px;top:70px;bottom:auto!important}
 .cine[data-layout="flow"] .cine-pin{grid-template-rows:auto 450px auto}
}
@media(min-width:900px) and (max-height:760px){
 .cine-head{padding-top:20px;padding-bottom:12px}
 .cine-head h2{font-size:38px}
 .cine-media{margin-bottom:16px}
 .cine-body{padding-left:calc(var(--scene-pad) + 22px)}
 .cine-panel h3{font-size:34px}
 .cine-panel p{font-size:14px;line-height:1.5;margin-top:10px}
 .cine-rail{margin-top:14px}
 .cine-foot{margin-bottom:26px}
}
@media(max-width:359px){.cine{--scene-pad:16px}.cine-head{padding-top:16px}.cine-head h2{font-size:25px}.cine-panel h3{font-size:26px}.cine-panel p{font-size:13px}.cine-transport{gap:8px}.cine-time{font-size:10px}}
@media(prefers-reduced-motion:reduce){.cine-panel{transform:none;transition:opacity 100ms}.cine button:active{transform:none}}
@media(hover:hover) and (pointer:fine){.cine-play:hover,.cine-replay:hover{border-color:#eec246;color:#eec246}.cine-step:hover{border-color:#eec246}}

/* ---------- Free 360° inspection ---------- */
/* A quiet affordance: reads as an instrument label, not as a game control. */
.cine-viewport{cursor:grab}
.cine-viewport:focus-visible{outline:2px solid #eec246;outline-offset:3px}
.cine[data-orbiting="true"] .cine-viewport{cursor:grabbing}
.cine-orbit-hint,.cine-orbit-reset{
  position:absolute;bottom:12px;z-index:3;display:flex;align-items:center;gap:8px;
  margin:0;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(16,18,20,.64);backdrop-filter:blur(6px);
  color:#e8e4da;font-size:12.5px;letter-spacing:.01em;line-height:1
}
.cine-orbit-hint{left:12px;padding:8px 12px 8px 9px;pointer-events:none}
.cine-orbit-hint svg{width:19px;height:19px;flex:none;color:#eec246}
.cine-orbit-reset{right:12px;min-height:40px;padding:0 14px;font-family:inherit;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.cine-orbit-reset:hover{border-color:#eec246;color:#eec246}
.cine-orbit-reset:focus-visible{outline:2px solid #eec246;outline-offset:2px}
.cine:not([data-mode="webgl"]) .cine-orbit-hint,
.cine:not([data-mode="webgl"]) .cine-orbit-reset,
.cine-orbit-hint[hidden],.cine-orbit-reset[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){
  .cine-orbit-hint svg{animation:cine-orbit-nudge 4.2s ease-in-out infinite}
}
@keyframes cine-orbit-nudge{0%,58%,100%{transform:rotate(0)}70%{transform:rotate(-15deg)}84%{transform:rotate(13deg)}}
@media (max-width:899px){
  .cine-orbit-hint,.cine-orbit-reset{bottom:10px;font-size:12px}
  .cine-orbit-hint{left:10px;padding:7px 10px 7px 8px}
  .cine-orbit-reset{right:10px;min-height:44px}
}
/* Comes after the generic orbit rule: explicit auto bottom prevents a stretched reset button. */
@media(min-width:900px){.cine-orbit-hint{top:24px;bottom:auto}.cine-orbit-reset{top:70px;bottom:auto}}

/* Final desktop layout guard: one protected picture area, with no competing controls. */
@media (min-width: 900px) {
  .cine .cine-media {
    display:block !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .cine .cine-body {
    z-index:5 !important;
    width:min(39%, 470px) !important;
    padding:0 calc(var(--scene-pad) + 32px) !important;
    align-self:center !important;
  }
  .cine .cine-panel {
    max-height:none !important;
    overflow:visible !important;
    padding:18px 20px 16px !important;
    border-radius:14px !important;
  }
  .cine .cine-panel h3 { font-size:clamp(27px,2.7vw,42px) !important; }
  .cine .cine-panel p { margin-top:11px !important; font-size:14px !important; line-height:1.48 !important; }
  .cine .cine-panel dl { margin-top:13px !important; padding-top:11px !important; }
  .cine .cine-rail { display:none !important; }
  .cine .cine-foot {
    z-index:8 !important;
    width:min(74%, 1060px) !important;
    margin-bottom:20px !important;
  }
  .cine .cine-orbit-hint {
    inset:20px auto auto 20px !important;
    width:max-content !important;
    max-width:calc(100% - 40px) !important;
    min-height:0 !important;
  }
  .cine .cine-orbit-reset {
    top:20px !important;
    right:20px !important;
    bottom:auto !important;
    left:auto !important;
    width:auto !important;
    height:40px !important;
    min-height:40px !important;
  }
}
@media (min-width:900px) and (max-height:800px) {
  .cine .cine-head { padding-top:18px !important; padding-bottom:12px !important; }
  .cine .cine-head h2 { font-size:38px !important; }
  .cine .cine-media { margin-bottom:14px !important; }
  .cine .cine-panel { padding:14px 16px 13px !important; }
  .cine .cine-panel .num { margin-bottom:8px !important; }
  .cine .cine-panel h3 { font-size:30px !important; }
  .cine .cine-panel p { font-size:13px !important; line-height:1.42 !important; }
  .cine .cine-panel dl { margin-top:10px !important; padding-top:8px !important; }
  .cine .cine-foot { margin-bottom:14px !important; }
}