/* The film surround: native platform surfaces live in the story documents. */
.op-player{--op-cyan:#7de4eb;--op-gold:#efb87d;--op-edge:rgba(171,196,219,.16);background:radial-gradient(ellipse at 50% 40%,#142237 0%,#070b15 74%)!important}
.op-player button,.op-player a{-webkit-tap-highlight-color:transparent}
.op-player button:focus-visible,.op-player a:focus-visible{outline:2px solid var(--op-cyan);outline-offset:5px}
.op-welcome-backdrop{position:absolute;inset:auto max(20px,env(safe-area-inset-right)) calc(144px + env(safe-area-inset-bottom)) auto;z-index:8;width:min(336px,calc(100% - 40px));box-sizing:border-box;pointer-events:none;background:none}
.op-welcome-backdrop:focus{outline:none}
.op-player[data-gated="true"] .op-welcome-backdrop,.op-player[data-final="true"] .op-welcome-backdrop{display:none}
.op-welcome-card{width:100%;max-height:calc(100dvh - 272px - env(safe-area-inset-bottom));box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:16px;border:1px solid rgba(239,184,125,.3);border-radius:15px;background:radial-gradient(ellipse at 100% 0%,rgba(65,119,144,.12),transparent 65%),linear-gradient(145deg,#182637,#0e1927);box-shadow:0 12px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06);pointer-events:auto;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#496074 transparent;text-align:start}
.op-welcome-card h2{grid-column:1/-1;margin:0;font:500 18px/1.2 'Space Grotesk',Inter,sans-serif;letter-spacing:-.02em;color:#f2f6fb;text-wrap:balance}
.op-welcome-card>p{grid-column:1/-1;margin:0 0 4px;color:#b3c2d1;font:400 12px/1.5 Inter,sans-serif;text-wrap:pretty}
.op-welcome-card>.op-welcome-primary{width:100%;min-height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;font-size:12px!important;white-space:normal!important}
.op-welcome-primary:disabled{opacity:.48;cursor:wait}
.op-welcome-card>.op-welcome-silent{display:flex;align-items:center;justify-content:center;width:auto;max-width:none;min-height:40px;margin:0;padding:8px 6px;text-align:center;color:#c1d1df!important;font-size:12px!important;white-space:normal}
.op-welcome-card>.op-welcome-note{margin:0;color:#8fa4b8;font-size:10px;line-height:1.4}
.op-welcome-card button:focus-visible{outline:2px solid #9cdde4;outline-offset:3px}
/* Portrait captions use the lower space, so keep the recommendation above them. */
@media(max-width:760px) and (orientation:portrait){.op-welcome-backdrop{right:max(12px,env(safe-area-inset-right));bottom:calc(100% - var(--op-caption-top,380px) + 8px);width:min(336px,calc(100% - 24px))}.op-welcome-card{padding:14px;max-height:calc(var(--op-caption-top,380px) - 124px)}.op-welcome-card h2{font-size:17px}}
/* Grid items refuse to shrink past their text by default, so a long label in
   another language would push its button out of the card instead of wrapping
   inside it. The pair keeps its single row: stacking them makes the card taller
   than the opening title above it can spare on a short phone. */
.op-welcome-card>.op-welcome-primary,.op-welcome-card>.op-welcome-silent{min-width:0}
@media(max-height:480px) and (min-aspect-ratio:1/1){.op-welcome-backdrop{right:max(12px,env(safe-area-inset-right));bottom:144px;width:min(316px,calc(100% - 24px))}.op-welcome-card{padding:10px 12px;gap:5px 10px}.op-welcome-card h2{font-size:16px}.op-welcome-card>p:not(.op-welcome-note){display:none}.op-welcome-card>.op-welcome-primary,.op-welcome-card>.op-welcome-silent{min-height:36px;padding-block:7px}.op-welcome-card>.op-welcome-note{font-size:10px}}
.op-header{background:linear-gradient(180deg,rgba(5,9,17,.94),rgba(5,9,17,.64),transparent)!important}
.op-header-note{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px!important;font:500 10px/1 'JetBrains Mono',monospace;letter-spacing:.13em;text-transform:uppercase;color:#92a8bb;white-space:nowrap;pointer-events:none}
.op-status-dot{display:inline-block;width:5px;height:5px;background:#8ee3c5;border-radius:50%;box-shadow:0 0 12px #58d9b9;flex:none}
.op-transport{position:absolute;inset:auto 0 0;height:104px;z-index:8;background:linear-gradient(180deg,rgba(11,18,31,.98),#080d18);box-shadow:0 -20px 50px rgba(4,8,15,.32),inset 0 1px 0 var(--op-edge);padding:0 28px!important;box-sizing:border-box}
.op-chapters{display:flex;gap:18px;height:43px;border-bottom:1px solid rgba(171,196,219,.08)}
.op-chapter-button{position:relative;display:flex;align-items:center;gap:9px;flex:1;min-width:0;max-width:none;padding:0 1px;border:0;background:transparent;color:#8293a8;cursor:pointer;text-align:start;transition:color .2s}
.op-chapter-button:hover,.op-chapter-button[aria-current="step"]{color:#edf5fb}
.op-chapter-number{font:400 9px/1 'JetBrains Mono',monospace;color:#61758c;letter-spacing:.06em}
.op-chapter-button[aria-current="step"] .op-chapter-number{color:var(--op-cyan)}
.op-chapter-name{font:500 11px/1.3 Inter,'IBM Plex Sans Arabic',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-chapter-track{position:absolute;bottom:-1px;inset-inline:0;height:2px;overflow:hidden;background:rgba(255,255,255,.04)}
.op-chapter-track>span{position:absolute;inset:0;background:linear-gradient(90deg,#4699aa,#95eced);box-shadow:0 0 10px rgba(125,228,235,.5);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .op-chapter-track>span{transform-origin:right}
.op-controls{height:60px;display:flex;align-items:center;gap:12px}
.op-icon-button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex:none;border:1px solid var(--op-edge);background:rgba(255,255,255,.02);border-radius:50%;color:#d9e5ef;padding:0;cursor:pointer;transition:background .2s,border-color .2s}
.op-icon-button:hover{background:rgba(125,228,235,.1);border-color:rgba(125,228,235,.4)}
.op-mode-switch{display:flex;padding:3px;border:1px solid var(--op-edge);border-radius:7px;background:#080d17;gap:2px}
.op-mode-switch button{border:0;border-radius:4px;background:transparent;color:#879aae;font:500 10px/1 Inter,'IBM Plex Sans Arabic',sans-serif;padding:8px 10px;cursor:pointer;white-space:nowrap}
.op-mode-switch button[aria-pressed="true"]{background:linear-gradient(180deg,#26384a,#1b293a);color:#daf9fa;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 5px rgba(0,0,0,.25)}
.op-playback-status{font:400 10px/1.4 Inter,'IBM Plex Sans Arabic',sans-serif;color:#8296ac;white-space:nowrap}
.op-time{margin-inline-start:auto;font:400 10px/1 'JetBrains Mono',monospace;color:#8da1b7;letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums}
.op-partner{display:flex;align-items:center;gap:10px;margin-inline:15px 6px;white-space:nowrap}
.op-partner>span{font:500 8px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#687d95}
.op-partner img{height:17px;width:auto;opacity:.8}
.op-player [data-fx="next"]{bottom:122px!important;border:1px solid rgba(145,226,233,.3)!important;font-size:11px!important;background:rgba(11,20,33,.85)!important}
.op-decision{position:absolute;z-index:7;inset:auto 28px 123px;max-width:890px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:21px 24px;box-sizing:border-box;background:linear-gradient(135deg,rgba(24,40,56,.97),rgba(9,17,29,.98));border:1px solid rgba(144,210,225,.3);border-radius:15px;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 50px rgba(78,163,178,.07),inset 0 1px 0 rgba(255,255,255,.13);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.op-decision[hidden],.op-native-hotspot[hidden]{display:none}
.op-decision-copy{min-width:0;flex:1}
.op-eyebrow{display:flex;align-items:center;gap:8px;font:500 9px/1 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em;color:#91e6e5}
.op-demo-pill{font-size:8px;letter-spacing:.03em;color:#8b9fb4;border-inline-start:1px solid #405568;padding-inline-start:8px}
.op-decision h2{font:500 20px/1.2 'Space Grotesk','IBM Plex Sans Arabic',sans-serif;letter-spacing:-.025em;margin:10px 0 6px;color:#f0f5fb;text-wrap:balance}
.op-decision p{font:400 12px/1.5 Inter,'IBM Plex Sans Arabic',sans-serif;color:#a2b2c2;margin:0;text-wrap:pretty;max-width:490px}
.op-decision-actions{display:flex;flex-direction:column;align-items:center;gap:10px;flex:none;max-width:310px}
.op-primary{border:1px solid rgba(255,234,196,.55);border-radius:8px;padding:12px 17px;color:#172332;font:600 12px/1.3 Inter,'IBM Plex Sans Arabic',sans-serif;cursor:pointer;background:linear-gradient(165deg,#ffe1ac,#e5a363);box-shadow:inset 0 1px 0 #fff2d8,0 6px 22px rgba(219,150,79,.16);transition:filter .2s,transform .2s}
.op-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.op-primary:active{transform:translateY(1px)}
.op-text-button{border:0;padding:4px 0;background:transparent;color:#a1b5c8;cursor:pointer;font:400 10px/1.2 Inter,'IBM Plex Sans Arabic',sans-serif}
.op-text-button:hover{color:#e5f3ff}
.op-native-hotspot{position:absolute;z-index:6;padding:0;border:1px solid #f8d19a;border-radius:8px;background:rgba(255,216,153,.05);box-shadow:0 0 0 4px rgba(239,184,125,.16),0 0 25px rgba(239,184,125,.2);cursor:pointer;animation:op-hotspot-breathe 2.4s ease-in-out infinite}
.op-native-hotspot:hover{background:rgba(255,216,153,.18)}
@keyframes op-hotspot-breathe{50%{box-shadow:0 0 0 6px rgba(239,184,125,.09),0 0 30px rgba(239,184,125,.35)}}
.op-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.op-mobile-caption{display:none;position:absolute;left:24px;right:24px;top:calc(50% + 122px);pointer-events:none;text-align:center;color:#91a5ba;z-index:3}
.op-mobile-caption>span{font:400 9px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:#7de4eb}
.op-mobile-caption h2{font:500 26px/1.1 'Space Grotesk','IBM Plex Sans Arabic',sans-serif;color:#e8f1fa;letter-spacing:-.03em;margin:12px 0 10px}
.op-mobile-caption p{font:400 12px/1.6 Inter,'IBM Plex Sans Arabic',sans-serif;max-width:340px;margin:auto}
@media(min-width:1800px){.op-chapters{gap:32px}.op-chapter-name{font-size:12px}}
@media(max-width:1050px){.op-header-note{display:none}.op-playback-status{display:none}.op-partner{margin-inline:5px}.op-partner>span{display:none}.op-chapters{gap:10px}.op-chapter-name{font-size:10px}}
@media(max-width:760px){.op-transport{padding:0 14px!important}.op-chapters{gap:10px}.op-chapter-number{display:none}.op-chapter-name{font-size:9px}.op-controls{gap:8px}.op-partner{display:none}.op-replay-control{display:none}.op-time{display:inline!important;font-size:9px}.op-mode-switch button{padding:8px}.op-decision{inset:auto 14px 118px;padding:17px;gap:14px;flex-direction:column;align-items:stretch}.op-decision h2{font-size:19px}.op-decision p{font-size:11px}.op-decision-actions{max-width:none;flex-direction:row;justify-content:space-between;gap:15px}.op-primary{font-size:11px;padding:11px 12px}.op-text-button{font-size:10px;max-width:100px;text-align:start}.op-player [data-fx="next"]{bottom:122px!important;inset-inline-end:14px!important}.op-mobile-caption{display:block}.op-player[data-gated="true"] .op-mobile-caption,.op-player[data-final="true"] .op-mobile-caption{display:none}.op-player[data-final="true"] .op-decision{display:none}}
@media(max-width:760px) and (max-height:620px){.op-mobile-caption{display:none}.op-decision{padding:12px;flex-direction:row}.op-decision h2{font-size:16px}.op-decision p{display:none}.op-decision-actions{flex-direction:column;gap:5px}.op-demo-pill{display:none}}
@media(prefers-reduced-motion:reduce){.op-player *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.op-finale-model{position:relative;display:flex;flex-direction:column;align-items:center;gap:20px;padding:34px 32px;background:radial-gradient(ellipse at 50% 30%,rgba(66,155,177,.14),transparent 70%),linear-gradient(135deg,rgba(36,53,73,.72),rgba(11,20,34,.94));border:1px solid rgba(135,182,203,.25);border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.32),inset 0 1px 0 rgba(235,246,255,.1);overflow:hidden}
.op-finale-model::before{content:"";position:absolute;left:10%;right:10%;top:0;height:1px;background:linear-gradient(90deg,transparent,#a1e7e8,transparent)}
.op-model-sphere{position:relative;width:170px;height:150px;display:flex;align-items:center;justify-content:center;margin:4px 0;background:radial-gradient(circle,rgba(131,225,230,.13),transparent 65%)}
.op-model-sphere>img{width:58px;height:58px;filter:drop-shadow(0 0 20px rgba(115,210,218,.4))}
.op-model-sphere>span{position:absolute;inset:8px;border:1px solid rgba(127,223,233,.4);border-radius:50%;transform:rotate(-25deg) scaleY(.44);box-shadow:0 0 16px rgba(127,223,233,.09),inset 0 0 12px rgba(127,223,233,.06)}
.op-model-sphere>span:nth-child(2){transform:rotate(35deg) scaleY(.44);border-color:rgba(168,191,218,.4)}
.op-model-sphere>span:nth-child(3){transform:rotate(95deg) scaleY(.44);border-color:rgba(228,179,125,.5)}
.op-model-metrics{display:flex;justify-content:center;gap:42px}.op-model-metrics>div{display:flex;align-items:center;gap:10px}.op-model-metrics strong{font:400 29px/1 'JetBrains Mono',monospace;color:#e8f4ff;letter-spacing:-.05em}.op-model-metrics span{font:400 11px/1 Inter,'IBM Plex Sans Arabic',sans-serif;color:#8dacc0}
.op-finale-model>p{max-width:330px;text-align:center;font:400 13px/1.6 Inter,'IBM Plex Sans Arabic',sans-serif;color:#9cb2c7;margin:0 0 2px}
.op-finale-model>.op-primary{width:100%;max-width:330px;display:flex;align-items:center;justify-content:space-between;padding:15px 18px}
.op-finale-model>a{font:400 10px/1 Inter,'IBM Plex Sans Arabic',sans-serif;color:#8bb4c4}
@media(max-width:760px){.op-finale-model{padding:25px 22px;gap:16px}.op-model-sphere{width:130px;height:110px}.op-model-metrics{gap:30px}}
/* Mobile is a portrait presentation: full-height bookends, picture, then narration. */
.op-mobile-bookend{display:none}
@media(max-width:760px){
  .op-mobile-bookend:not([hidden]){position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:space-between;gap:20px;box-sizing:border-box;padding:94px 28px 128px;background:radial-gradient(ellipse at 52% 32%,rgba(39,82,103,.44),transparent 46%),radial-gradient(ellipse at 100% 78%,rgba(171,115,67,.13),transparent 60%),#080e19;overflow:auto}
  .op-mobile-bookend-brand{display:flex;align-items:center;justify-content:center;gap:8px;text-transform:uppercase;letter-spacing:.16em;font:500 9px/1.4 'JetBrains Mono',monospace;color:#8dced7;text-align:center}
  .op-mobile-bookend-main{text-align:center;margin:auto 0}
  .op-mobile-orbit{position:relative;margin:0 auto 20px;width:clamp(136px,23vh,202px);height:clamp(136px,23vh,202px);display:flex;align-items:center;justify-content:center}
  .op-mobile-orbit img{width:66%;height:66%;filter:drop-shadow(0 0 36px rgba(125,221,230,.22));z-index:1}
  .op-mobile-orbit>span{position:absolute;inset:0;border:1px solid rgba(125,217,229,.3);border-radius:50%;box-shadow:inset 0 0 30px rgba(125,217,229,.05),0 0 30px rgba(125,217,229,.04)}
  .op-mobile-orbit>span:nth-child(2){inset:-13px;transform:rotate(-25deg) scaleY(.45);border-color:rgba(230,177,120,.42)}
  .op-mobile-orbit>span:nth-child(3){inset:-13px;transform:rotate(55deg) scaleY(.45)}
  .op-mobile-bookend h1{font:500 clamp(35px,10.5vw,48px)/1.04 'Space Grotesk','IBM Plex Sans Arabic',sans-serif;letter-spacing:-.045em;color:#edf5fc;margin:0 auto 18px;max-width:400px;text-wrap:balance}
  .op-mobile-bookend-main>p{font:400 15px/1.65 Inter,'IBM Plex Sans Arabic',sans-serif;color:#9fb4c7;max-width:345px;margin:0 auto;text-wrap:pretty}
  .op-mobile-bookend-footer{display:flex;align-items:center;flex-direction:column;gap:15px;margin-top:6px}
  .op-mobile-bookend-footer>.op-primary{width:100%;max-width:340px;padding:16px;font-size:13px;box-shadow:0 10px 36px rgba(218,159,92,.16),inset 0 1px 0 rgba(255,255,255,.6)}
  .op-mobile-bookend-footer>.op-text-button{font-size:11px;text-align:center;max-width:100%}
  .op-mobile-bookend small{font:400 9px/1.5 Inter,'IBM Plex Sans Arabic',sans-serif;color:#526f88;max-width:310px;text-align:center}
  .op-player[data-mobile-bookend="opening"] .op-transport,.op-player[data-mobile-bookend="outro"] .op-transport,.op-player[data-mobile-bookend="final"] .op-transport{background:rgba(7,12,21,.4);box-shadow:inset 0 1px 0 rgba(163,199,221,.08)}
  .op-player[data-mobile-bookend="opening"] [data-fx="stage"],.op-player[data-mobile-bookend="outro"] [data-fx="stage"],.op-player[data-mobile-bookend="final"] [data-fx="stage"],.op-player[data-mobile-bookend="final"] [data-fx="finale"]{visibility:hidden}
  .op-player[data-mobile-bookend="opening"] .op-mobile-caption,.op-player[data-mobile-bookend="outro"] .op-mobile-caption,.op-player[data-mobile-bookend="final"] .op-mobile-caption{display:none}
  .op-player .op-mobile-caption{display:block;top:var(--op-caption-top,420px);bottom:120px;left:25px;right:25px;overflow:auto;pointer-events:auto;overscroll-behavior:contain;padding:0 0 8px;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#314b62 transparent}
  .op-mobile-caption h2{font-size:23px;line-height:1.15;margin:11px 0 14px}
  .op-mobile-caption p{font-size:15px;line-height:1.7;text-wrap:pretty;color:#a5b8cb;max-width:560px}
  .op-mobile-caption[data-scene="chat"] p{font-size:14px;line-height:1.65;text-align:start}
  .op-player[data-gated="true"] .op-mobile-caption,.op-player[data-final="true"] .op-mobile-caption{display:none}
  .op-player .op-decision{top:var(--op-caption-top,420px);bottom:auto;max-height:calc(100% - var(--op-caption-top,420px) - 118px);overflow:auto;box-sizing:border-box;justify-content:flex-start}
  .op-player[data-mobile-bookend="outro"] [data-fx="next"]{visibility:hidden}
}
@media(max-width:760px) and (max-height:680px){
  .op-mobile-bookend:not([hidden]){padding:77px 25px 120px;gap:12px}
  .op-mobile-orbit{width:100px;height:100px;margin-bottom:16px}
  .op-mobile-bookend h1{font-size:34px;margin-bottom:13px}
  .op-mobile-bookend-main>p{font-size:13px;line-height:1.55}
  .op-mobile-bookend-footer{gap:10px}.op-mobile-bookend-footer>.op-primary{padding:13px}
  .op-mobile-bookend small{display:none}
  .op-player .op-mobile-caption h2{font-size:20px;margin:8px 0 10px}.op-player .op-mobile-caption p{font-size:13px;line-height:1.6}
  .op-player .op-decision{flex-direction:column;gap:9px}.op-player .op-decision p{display:block}.op-player .op-decision-actions{flex-direction:row;align-items:center}
}
/* Context above the picture; the story and its decisions have their own space below. */
.op-mobile-context{display:none}
@media(max-width:760px){
  .op-mobile-context{position:absolute;left:25px;right:25px;top:calc(var(--op-picture-top,155px) - 76px);height:68px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:3;pointer-events:none}
  .op-mobile-context>span{font:400 8px/1.4 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.09em;color:#84bfce}
  .op-mobile-context h2{font:500 23px/1.1 'Space Grotesk','IBM Plex Sans Arabic',sans-serif;letter-spacing:-.025em;color:#e8f3fd;margin:8px 0 0;text-wrap:balance;max-width:500px}
  .op-player[data-mobile-bookend="opening"] .op-mobile-context,.op-player[data-mobile-bookend="outro"] .op-mobile-context,.op-player[data-mobile-bookend="final"] .op-mobile-context{display:none}
  .op-player .op-mobile-caption{padding-top:0}
  .op-mobile-caption p{font-size:16px;line-height:1.7;color:#b1c1d0}
  .op-mobile-caption[data-scene="chat"] p{font-size:14px;line-height:1.7}
}
@media(max-width:760px) and (max-height:680px){.op-mobile-context h2{font-size:21px}.op-mobile-context>span{font-size:8px}.op-player .op-mobile-caption p{font-size:14px;line-height:1.6}}
.op-mobile-bookend-value{display:none}
.op-mobile-credits{display:none}
.op-player[data-mobile-bookend="final"] .op-mobile-credits{display:block;font:400 9px/1.3 Inter,sans-serif;color:#87a2b9}
@media(max-width:760px){
  .op-player[data-mobile-opening="data"] .op-mobile-orbit{display:none}
  .op-player[data-mobile-opening="data"] .op-mobile-bookend-value{display:block;margin:28px -10px 32px;font:500 clamp(58px,17vw,86px)/1 'JetBrains Mono',monospace;letter-spacing:-.07em;color:#e8f7ff;text-shadow:0 0 40px rgba(118,217,232,.2)}
}

/* Pinned navigation and a content-led composition. */
.op-player{--op-edge:rgba(170,193,212,.14);background:radial-gradient(ellipse at 25% 50%,rgba(36,74,90,.18),transparent 56%),#080d16!important}
.op-header{height:64px!important;border-bottom:1px solid rgba(146,182,203,.1);background:rgba(8,13,22,.95)!important}
.op-header-brand{flex:none}
.op-header-mark,.op-header-login-icon{display:none}
@media(max-width:480px){
 .op-player .op-header-brand{width:32px;height:32px}
 .op-player .op-header-wordmark{display:none!important}
 .op-player .op-header-mark{display:block;width:32px;height:32px!important;object-fit:contain}
}
@media(max-width:360px){
 .op-player .op-header .op-header-login{display:flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;width:32px;height:32px;padding:0!important}
 .op-player .op-header-login-label{display:none}
 .op-player .op-header-login-icon{display:block}
}
.op-player>.op-chapters{position:absolute;top:64px;left:0;right:0;height:48px;z-index:8;margin:0;padding:0 max(28px,calc((100vw - 1500px)/2));gap:4px;background:rgba(11,18,29,.97);border-bottom:1px solid var(--op-edge);overflow-x:auto;scrollbar-width:none;box-sizing:border-box}
.op-chapters::-webkit-scrollbar,.op-product-tabs::-webkit-scrollbar{display:none}
.op-chapter-button{padding:0 18px;gap:10px;border-inline-end:1px solid rgba(167,197,213,.06)}
.op-chapter-button:hover{background:rgba(103,212,223,.045)}
.op-chapter-button[aria-current="step"]{background:linear-gradient(180deg,rgba(98,173,188,.10),rgba(77,137,153,.03))}
.op-chapter-number{font-size:10px}.op-chapter-name{font-size:11px;letter-spacing:-.01em}
.op-chapter-track{height:2px;inset-inline:16px;background:transparent}
.op-chapter-track>span{background:#54b5c3;box-shadow:none}
.op-transport{height:64px;box-shadow:inset 0 1px 0 var(--op-edge);background:rgba(8,13,22,.98);padding:0 28px!important}
.op-controls{height:64px;gap:12px}.op-icon-button{width:38px;height:38px;border-radius:8px;background:#101b29}
.op-mode-switch{border-radius:8px}.op-mode-switch button{font-size:11px;min-height:32px}
.op-player [data-fx="stage"]{bottom:64px!important}
.op-player [data-fx="finale"]{top:112px!important;bottom:64px!important;padding-top:30px!important}
.op-player [data-fx="next"]{bottom:82px!important}
.op-decision{bottom:84px;border-radius:10px;border-color:rgba(220,162,94,.36);background:linear-gradient(125deg,#25231f,#111b28 56%);box-shadow:0 20px 60px rgba(0,0,0,.44)}
.op-decision .op-eyebrow{color:#e8b97d}.op-decision .op-status-dot{background:#e8b97d;box-shadow:0 0 12px rgba(232,185,125,.3)}
.op-decision .op-primary{min-height:44px}
.op-mobile-proof[hidden],.op-mobile-question[hidden],.op-product-tabs[hidden]{display:none!important}
.op-product-tabs{display:flex;position:relative;gap:20px;overflow:auto;scrollbar-width:none;border-bottom:1px solid var(--op-edge);width:100%;flex:none;pointer-events:auto}
.op-product-tabs button{position:relative;flex:none;min-height:36px;border:0;padding:0 1px 9px;background:transparent;color:#8395a8;font:500 11px/1.2 Inter,'IBM Plex Sans Arabic',sans-serif;cursor:pointer}
.op-product-tabs button[aria-pressed="true"]{color:#7bd0dc}
.op-product-tabs button[aria-pressed="true"]::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:#54b5c3;border-radius:2px}
.op-mobile-proof{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--op-edge)}
.op-mobile-proof>div{display:flex;flex-direction:column;gap:8px}
.op-mobile-proof [data-fx="proof-label"]{font:500 10px/1.2 Inter,'IBM Plex Sans Arabic',sans-serif;color:#8facbb;letter-spacing:.02em}
.op-mobile-proof strong{font:500 34px/1 'JetBrains Mono',monospace;letter-spacing:-.06em;color:#ecf7fb;font-variant-numeric:tabular-nums}
.op-proof-wave{height:30px;display:flex;align-items:center;gap:3px;opacity:.75}
.op-proof-wave i{display:block;width:3px;height:20%;background:#55acb9;border-radius:4px;animation:op-wave 2.3s ease-in-out infinite alternate}
.op-proof-wave i:nth-child(2n){height:65%;animation-delay:-.7s}.op-proof-wave i:nth-child(3n){height:100%;animation-delay:-1.4s}
.op-mobile-question{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;padding:16px;border:1px solid rgba(217,142,62,.22);border-radius:10px;background:rgba(217,142,62,.06)}
.op-question-mark{color:#dca262;font-size:20px;line-height:1.4}
.op-narrative-line{height:2px;width:30px;background:#498a99;margin-bottom:14px;border-radius:2px}
.op-mobile-proof:not([hidden])~.op-narrative-line,.op-mobile-question:not([hidden])~.op-narrative-line{display:none}
@keyframes op-wave{to{transform:scaleY(.35);opacity:.35}}
@keyframes op-beat-a{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes op-beat-b{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.op-player[data-portrait="true"][data-story-beat="0"] .op-context-heading,.op-player[data-portrait="true"][data-story-beat="0"] .op-mobile-caption{animation:op-beat-a .45s cubic-bezier(.2,.75,.2,1) both}
.op-player[data-portrait="true"][data-story-beat="1"] .op-context-heading,.op-player[data-portrait="true"][data-story-beat="1"] .op-mobile-caption{animation:op-beat-b .45s cubic-bezier(.2,.75,.2,1) both}
.op-player[data-portrait="false"] .op-mobile-context,.op-player[data-portrait="false"] .op-mobile-caption,.op-player[data-portrait="false"] .op-mobile-bookend{display:none!important}
.op-player[data-portrait="false"] .op-decision{top:auto;bottom:84px;max-height:calc(100% - 208px);overflow:auto;flex-direction:row}
@media(max-width:1050px){.op-player>.op-chapters{padding-inline:18px}.op-chapter-button{padding-inline:12px}}
@media(max-width:760px){
 .op-header{height:56px!important}
 .op-language-picker{position:static!important}
 .op-language-menu{inset-inline-end:14px!important;min-width:0!important;width:224px;max-width:calc(100vw - 28px);max-height:calc(100dvh - 80px);overflow-y:auto;box-sizing:border-box}
 .op-player>.op-chapters{top:56px;height:48px;padding-inline:15px;gap:7px}
 .op-chapter-button{flex:none;min-width:135px;padding:0 12px;border-inline-end:0;gap:9px}
 .op-chapter-number{display:block;font-size:9px}
 .op-chapter-name{font-size:10px;overflow:visible;text-overflow:clip}
 .op-chapter-track{inset-inline:12px}
 .op-controls{height:64px;gap:8px}.op-transport{height:64px;padding-inline:16px!important}
 .op-time{display:block!important;font-size:9px}.op-mode-switch button{min-height:32px;padding:8px 10px}
 .op-icon-button{width:36px;height:36px;border-radius:8px}
 .op-player .op-mobile-context{top:var(--op-context-top,112px);height:auto;min-height:44px;left:22px;right:22px;align-items:stretch;text-align:start;justify-content:flex-start;gap:10px}
 .op-context-heading>span{font:500 8px/1.2 'JetBrains Mono',monospace;letter-spacing:.08em;color:#7092a8}
 .op-context-heading h2{font-size:22px;line-height:1.15;margin:6px 0 0;letter-spacing:-.035em}
 .op-player .op-mobile-caption{top:var(--op-caption-top);bottom:80px;left:24px;right:24px;padding:4px 0 12px;text-align:start}
 .op-player .op-mobile-caption p{max-width:560px;margin:0;font-size:16px;line-height:1.65;color:#bbcbd7;text-align:start}
 .op-player .op-mobile-caption[data-scene="chat"]>p{font-size:14px;line-height:1.7}
 .op-player .op-mobile-question p{font-size:13px;line-height:1.6;color:#eed8bf}
 .op-player .op-decision{top:var(--op-decision-top);bottom:auto;max-height:calc(100% - var(--op-decision-top) - 80px);margin:0;inset-inline:16px;gap:15px;padding:18px;flex-direction:column;align-items:stretch}
 .op-player .op-decision h2{font-size:22px;line-height:1.12}.op-player .op-decision p{font-size:12px;line-height:1.55}
 .op-player .op-decision-actions{flex-direction:column;align-items:stretch;gap:12px}
 .op-player .op-decision-actions>.op-primary{font-size:12px;width:100%;padding:13px}
 .op-player .op-decision-actions>.op-text-button{max-width:none;text-align:center;font-size:11px}
 .op-mobile-bookend:not([hidden]){padding:138px 28px 88px;gap:18px}
 .op-mobile-bookend-brand{font-size:8px}.op-mobile-bookend h1{font-size:clamp(34px,10vw,46px)}
 .op-mobile-orbit{width:clamp(112px,21vh,176px);height:clamp(112px,21vh,176px)}
 .op-mobile-bookend-footer{gap:12px}.op-mobile-bookend-footer>.op-primary{min-height:48px}
 .op-player[data-mobile-bookend="opening"] .op-chapters,.op-player[data-mobile-bookend="outro"] .op-chapters,.op-player[data-mobile-bookend="final"] .op-chapters{background:rgba(10,17,28,.72)}
}
@media(max-width:760px) and (max-height:680px){
 .op-context-heading h2{font-size:20px}.op-context-heading>span{font-size:7px}
 .op-player .op-mobile-caption p{font-size:14px;line-height:1.6}.op-mobile-proof{padding-bottom:13px;margin-bottom:13px}.op-mobile-proof strong{font-size:28px}
 .op-mobile-bookend:not([hidden]){padding:120px 25px 83px;gap:10px}.op-mobile-orbit{width:100px;height:100px;margin-bottom:12px}
 .op-mobile-bookend h1{font-size:33px;margin-bottom:10px}.op-mobile-bookend-main>p{font-size:13px}.op-mobile-bookend-footer{gap:10px}
 .op-player .op-decision{padding:13px;gap:11px}.op-player .op-decision h2{font-size:19px}.op-player .op-decision p{font-size:11px}.op-player .op-decision-actions{gap:10px}
}
@media(max-height:480px) and (min-aspect-ratio:1/1){.op-header-note,.op-playback-status,.op-partner{display:none}.op-player .op-decision{padding:12px 16px;gap:18px}.op-decision h2{font-size:18px;margin:6px 0}.op-decision p{display:none}.op-decision-actions{gap:6px}.op-decision .op-primary{padding:10px 15px}}
@media(prefers-reduced-motion:reduce){.op-player .op-mobile-caption,.op-player .op-context-heading,.op-proof-wave i{animation:none!important}.op-player iframe{transition:opacity .15s!important}}


@media(prefers-reduced-motion:reduce){.op-toggle,.op-toggle i{transition:none}}

/* Continuous cinema playback stays alongside the transport on every screen. */
.op-loop-control{width:auto;gap:7px;padding:0 10px;font:500 11px/1 Inter,'IBM Plex Sans Arabic',sans-serif}
.op-loop-control[aria-checked="true"]{background:#203c49;border-color:#63b9c6;color:#c3f5f5;box-shadow:inset 0 1px 0 #b8edf519}
.op-loop-control svg{flex:none}
@media(max-width:760px){.op-loop-control{width:36px;padding:0}.op-loop-label{display:none}.op-player .op-time{display:none!important}}
@media(max-width:400px){.op-transport{padding-inline:12px!important}.op-controls{gap:6px}.op-mode-switch button{font-size:10px;padding:8px}}

/* Paused scenes remain explorable; the reader keeps native content legible on phones. */
.op-review-trigger{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:5px 0;color:#91d2dc;border:0;background:none;font:500 12px/1.4 Inter,sans-serif;cursor:pointer;text-align:start}
.op-review-trigger[hidden]{display:none!important}
.op-review-trigger:hover{color:#d7f4f7}.op-review-trigger:focus-visible{outline:2px solid #91d2dc;outline-offset:5px;border-radius:4px}
.op-review-paused{position:absolute;z-index:7;bottom:82px;inset-inline-end:28px;background:#142637ed;border:1px solid #527080;border-radius:9px;padding:10px 14px;box-shadow:0 8px 25px #0005}
.op-review-backdrop{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:#050b16e8;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.op-review-reader{display:flex;flex-direction:column;width:min(1040px,100%);max-height:100%;min-height:0;overflow:hidden;border:1px solid #51657970;border-radius:20px;background:#121c2a;box-shadow:0 35px 120px #0009}
.op-review-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border-bottom:1px solid #819aaf25;flex:none}
.op-review-heading h2{font-size:23px;letter-spacing:-.03em;margin:8px 0 0;color:#edf3f8}.op-review-heading .op-eyebrow{color:#74becb}
.op-review-content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#62899b transparent;padding:24px;line-height:1.6;color:#edf3f8}
.op-review-content:focus-visible{outline:2px solid #91d2dc;outline-offset:-3px}
.op-review-content>*{width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box}
.op-review-content [data-review-fx$="-card"]{box-sizing:border-box;max-width:100%!important}
.op-review-content button:disabled{opacity:.6;cursor:default}
.op-review-content [data-operator-action]{display:none!important}
.op-review-footer{padding:16px 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #819aaf25;flex:none;background:#0c1522}
@media(max-width:760px){
 .op-review-backdrop{padding:0}.op-review-reader{height:100%;max-height:100%;border:0;border-radius:0;width:100%}
 .op-review-heading{padding:20px 18px;padding-top:max(20px,env(safe-area-inset-top))}.op-review-heading h2{font-size:21px}
 .op-review-content{padding:18px 12px}.op-review-content [data-review-fx$="-card"]{padding:16px 12px!important;font-size:13px!important}
 .op-review-content [data-review-fx$="-route"]{flex-wrap:wrap!important}
 .op-review-content [data-review-fx$="-foot"]{flex-wrap:wrap!important;gap:12px!important}
 .op-review-content [data-review-fx$="-foot"]>span:last-child{flex-wrap:wrap!important}
 .op-review-content .op-eval-route-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .op-review-content .drill-build-panel{padding:18px 14px!important}
 .op-review-footer{padding:16px 18px;padding-bottom:max(16px,env(safe-area-inset-bottom));gap:14px;flex-wrap:wrap}.op-review-footer .op-primary{flex:1}
 .op-review-trigger{margin-top:8px}.op-review-paused{inset-inline-end:16px;bottom:78px}
}

@media(max-width:760px){.op-review-content [data-review-scene="drill"]{grid-template-columns:minmax(0,1fr)!important}.op-review-content [data-review-fx$="-route"]>div:last-child{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

@media(max-width:760px){.op-review-content .drill-build-panel{padding:0 14px 18px!important;overflow:hidden}.op-review-content .drill-build-heading,.op-review-content .drill-build-panel>.drill-modebar{margin-inline:-14px!important}.op-review-content .drill-goal-title{font-size:25px!important}}

/* Business payoffs use the phone's full content area, at native text size. */
.op-mobile-bookend-footer>button[hidden]{display:none!important}
.op-mobile-outcome{display:none}
.op-player[data-mobile-outcome="true"] .op-mobile-outcome:not([hidden]){display:block;position:absolute;inset:104px 0 64px;block-size:auto;z-index:4;overflow:auto;overscroll-behavior:contain;background:#080e19}
.op-player[data-mobile-outcome="true"] :is(.op-mobile-context,.op-mobile-caption,[data-fx="stage"]){visibility:hidden}

/* One speech-aligned subtitle track, overlaid inside the full-frame picture. */
.op-captions{position:absolute;z-index:5;inset:auto 24px var(--op-caption-bottom,76px);display:flex;align-items:flex-end;justify-content:center;pointer-events:none;text-align:center;box-sizing:border-box;padding:0}
.op-captions p{font:400 clamp(14px,1.15vw,20px)/1.5 Inter,sans-serif;color:#f3f7fa;max-width:940px;margin:0;padding:9px 16px;text-wrap:pretty;background:rgba(3,9,17,.82);border-radius:8px;box-shadow:0 2px 18px #0002;text-shadow:0 1px 2px #0008}
.op-captions[hidden]{display:none!important}
.op-player[data-gated="true"] .op-captions,.op-player[data-final="true"] .op-captions{display:none}
.op-narration-button{width:auto;min-width:154px;padding:0 12px;gap:8px;border-radius:9px;font:500 11px/1.25 Inter,sans-serif;white-space:nowrap}
.op-narration-button[aria-pressed="true"]{color:#eac596;border-color:#b98d5377;background:#c6954714}
.op-audio-note{position:absolute;bottom:70px;inset-inline:24px;z-index:9;text-align:center;font:12px/1.5 Inter,sans-serif;color:#edc79a;pointer-events:none}
.op-audio-note:empty{display:none}
@media(max-width:1050px){.op-partner,.op-playback-status{display:none}}
@media(max-width:760px) and (orientation:portrait){
 .op-player .op-transport{height:104px;padding-inline:16px!important}
 .op-player .op-controls{height:104px;flex-wrap:wrap;align-content:center;gap:5px 8px;padding:6px 0;box-sizing:border-box}
 .op-controls>.op-icon-button:last-child{margin-inline-start:auto}
 .op-player .op-time{display:none!important}
 .op-narration-button{order:10;flex-basis:100%;height:34px;min-height:34px;font-size:12px}
 .op-player [data-fx="stage"]{bottom:104px!important}
 .op-player .op-captions{top:auto;bottom:var(--op-caption-bottom,118px);inset-inline:14px;min-height:0;padding:0;align-items:flex-end;justify-content:center;text-align:center;overflow:visible;pointer-events:none}
 .op-captions p{font-size:15px;line-height:1.5;max-width:560px;text-align:center;padding:9px 12px}
 .op-player .op-decision{top:var(--op-decision-top);max-height:calc(100% - var(--op-decision-top) - 120px)}
 .op-mobile-bookend:not([hidden]){padding-bottom:128px}
 .op-player[data-mobile-bookend="final"] .op-captions{display:none}
 .op-player[data-mobile-outcome="true"] .op-mobile-outcome:not([hidden]){bottom:104px;padding-bottom:112px;box-sizing:border-box}
 .op-player[data-mobile-outcome="true"] .op-captions{top:auto;bottom:118px;height:auto;align-items:flex-end}
 .op-audio-note{bottom:110px}
}
@media(max-width:760px) and (max-height:680px) and (orientation:portrait){.op-captions p{font-size:14px;line-height:1.6}.op-mobile-bookend:not([hidden]){padding-bottom:123px}}

@media(max-width:760px) and (orientation:portrait){.op-mobile-bookend-main>p{min-height:4.95em}}

/* A short phone cannot fit the closing card in the space above the transport
   bar, and whatever overflowed sat underneath it: on anything shorter than
   about 750px the call to action could not be tapped at all. The card now ends
   where the controls begin and the words, not the button, take the squeeze —
   the action row is always the last thing in view. Taller screens keep the
   roomier composition. */
@media(max-width:760px) and (orientation:portrait) and (max-height:760px){
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend:not([hidden]){bottom:calc(104px + env(safe-area-inset-bottom,0px));padding:118px 22px 14px;gap:8px;overflow:hidden}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-main{margin:0;min-height:0;flex:0 1 auto;overflow:auto}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend h1{font-size:clamp(22px,6.6vw,30px);margin-bottom:8px}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-main>p{font-size:12px;line-height:1.5;min-height:0}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-footer{flex:none;gap:8px;margin-top:0}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-footer>.op-primary{padding:12px;min-height:44px}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-footer>.op-text-button{font-size:10px}
}
/* Below roughly 600px of viewport the closing card drops the supporting
   paragraph and the orbit so its headline and every action still fit. Replay
   and the credits link stay: they have no other home on a phone. */
@media(max-width:760px) and (orientation:portrait) and (max-height:600px){
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend:not([hidden]){padding:114px 20px 12px}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend h1{font-size:clamp(20px,6.2vw,26px);margin-bottom:0}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-main>p,
 .op-player[data-mobile-bookend="final"] .op-mobile-orbit{display:none}
 .op-player[data-mobile-bookend="final"] .op-mobile-bookend-footer{gap:6px}
}
/* Bookends give the recommendation their lower CTA area, keeping the story clear. */
@media(max-width:760px) and (orientation:portrait){
 .op-player[data-welcome="true"] .op-mobile-bookend-footer{display:none}
 .op-player[data-welcome="true"] .op-mobile-bookend:not([hidden]){padding-bottom:410px}
 .op-player[data-welcome="true"] .op-mobile-orbit{width:116px;height:116px;margin-bottom:16px}
}
@media(max-width:760px) and (max-height:680px) and (orientation:portrait){
 .op-welcome-card{padding:12px;gap:6px 10px}
 .op-welcome-card>p:not(.op-welcome-note){display:none}
 .op-player[data-welcome="true"] .op-mobile-bookend:not([hidden]){padding-bottom:370px}
 .op-player[data-welcome="true"] .op-mobile-orbit{width:84px;height:84px;margin-bottom:10px}
}

/* The image now reaches both edges and the transport. Context controls float
   in the scene's top safe area instead of shrinking the picture. */
.op-player [data-fx="stage"]{clip-path:inset(var(--op-picture-top,112px) 0 0)}
@media(max-width:760px) and (orientation:portrait){
 .op-player .op-mobile-context{top:116px;left:12px;right:12px;min-height:0;gap:0}
 .op-player .op-context-heading{display:none}
 .op-player .op-product-tabs{background:rgba(8,14,24,.92);padding:0 10px;box-sizing:border-box;border-radius:7px;gap:18px}
 .op-player:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) [data-fx="bookend-body"]{display:none}
 .op-player:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) .op-mobile-bookend{padding-bottom:232px}
 .op-player .op-welcome-backdrop{bottom:calc(var(--op-caption-bottom,118px) + 112px)}
 .op-player .op-welcome-card{max-height:calc(100dvh - 356px)}
 .op-player .op-review-paused{bottom:calc(var(--op-caption-bottom,118px) + 100px)}
}

/* The film is the opening of a longer page. Its authored content keeps the
   same coordinate system; only the surrounding container changes size. */
x-dc{display:block}
/* The export runtime otherwise reserves a full viewport around its component. */
#dc-root,#dc-root>.sc-host{height:auto!important}
.op-player{position:relative;inset:auto;width:calc(100% - 64px);max-width:1600px;height:calc(100svh - 144px);min-height:0;margin:16px auto 0;box-sizing:border-box;border:1px solid rgba(146,182,203,.16);border-radius:14px;box-shadow:0 22px 80px #0003}
.op-player:focus-visible{outline:2px solid #79ceda;outline-offset:4px}
.op-player>.op-chapters{padding-inline:18px}
.op-explore-link{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:14px;min-height:48px;width:max-content;max-width:calc(100% - 32px);margin-inline:auto;color:#a7bbc9;font:500 12px/1.4 Inter,'IBM Plex Sans Arabic',sans-serif;text-align:center;letter-spacing:.01em}
.op-explore-link>span:last-child{color:#87d6df;font-size:19px}
.op-explore-link:hover{color:#e7f7fa}.op-explore-link:focus-visible{outline:2px solid #79ceda;outline-offset:3px;border-radius:5px}
.op-scroll-resume{position:absolute;top:calc(var(--op-picture-top,112px) + 18px);inset-inline-end:20px;z-index:9;display:flex;align-items:center;gap:10px;min-height:44px;padding:11px 16px;border:1px solid #8db8c875;border-radius:9px;background:#102435f2;color:#e5f6fb;box-shadow:0 8px 25px #0004;font:500 13px/1.4 Inter,'IBM Plex Sans Arabic',sans-serif;cursor:pointer}
.op-scroll-resume[hidden],.op-player[data-offscreen="true"] .op-scroll-resume{display:none}
/* On a short phone the floating resume control lands on top of the narration
   recommendation. Both stay available; the recommendation takes the taps where
   they cross, because that is the card the visitor is being asked to answer. */
.op-player[data-welcome="true"] .op-welcome-backdrop{z-index:10}
.op-scroll-resume>span{color:#8fd8df;font-size:11px}
.op-player [role="dialog"]{position:fixed!important;z-index:1000!important;inset:0!important;max-height:100dvh;box-sizing:border-box}
.op-player:fullscreen{width:100%;max-width:none;height:100dvh;min-height:0;margin:0;border:0;border-radius:0;box-shadow:none}
.op-player:fullscreen::backdrop{background:#080d16}
@media(max-width:760px){
 .op-player{width:calc(100% - 24px);height:calc(100svh - 140px);margin-top:12px;border-radius:11px}
 .op-player>.op-chapters{padding-inline:10px}
 .op-scroll-resume{inset-inline-end:12px;max-width:calc(100% - 24px);font-size:12px}
 .op-explore-link{font-size:11px;gap:10px}
}
@media(max-width:760px) and (orientation:portrait){
 .op-player .op-welcome-card{max-height:max(128px,calc(var(--op-player-height,100svh) - 346px));padding:12px}
 .op-player .op-welcome-card h2{font-size:16px}
 .op-player .op-welcome-card>p:not(.op-welcome-note){display:none}
 .op-player .op-mobile-orbit{width:84px;height:84px;margin-bottom:12px}
 .op-player:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) .op-mobile-bookend{padding:118px 20px 232px;gap:8px}
 .op-player .op-mobile-bookend h1{font-size:clamp(27px,8vw,38px)}
 .op-player:fullscreen .op-mobile-orbit{width:clamp(112px,21vh,176px);height:clamp(112px,21vh,176px)}
}
/* Short landscape screens keep the film's scroll cue visible. The optional
   narration recommendation becomes a compact bottom banner below the picture. */
@media(max-height:480px) and (min-aspect-ratio:1/1){
 .op-player .op-welcome-backdrop{position:fixed;inset:auto 12px 12px auto;width:min(620px,calc(100% - 24px));z-index:12}
 .op-player .op-welcome-card{grid-template-columns:minmax(100px,1fr) auto auto;align-items:center;gap:8px;padding:9px 12px;max-height:80px}
 .op-player .op-welcome-card h2{grid-column:auto;font-size:14px;line-height:1.3}
 .op-player .op-welcome-card>p{display:none}
 .op-player .op-welcome-card>.op-welcome-primary,.op-player .op-welcome-card>.op-welcome-silent{min-height:40px;font-size:11px!important}
 .op-player[data-offscreen="true"] .op-welcome-backdrop{display:none}
 .op-player:fullscreen .op-welcome-backdrop{bottom:140px}
}
/* On compact portrait openings, the title, optional recommendation and
   subtitles have separate rows. Decoration yields its space to readable copy. */
@media(max-width:760px) and (orientation:portrait){
 .op-player[data-welcome="true"]:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) .op-mobile-bookend{justify-content:flex-start;gap:12px}
 .op-player[data-welcome="true"]:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) .op-mobile-bookend-main{margin:0}
 .op-player[data-welcome="true"]:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) :is(.op-mobile-orbit,.op-mobile-bookend-brand){display:none}
 .op-player[data-welcome="true"]:is([data-mobile-bookend="opening"],[data-mobile-bookend="outro"]) .op-mobile-bookend h1{font-size:clamp(24px,7.4vw,32px);line-height:1.08;margin:0}
}

/* Touch targets. The drawn controls are small on purpose; on a phone each one
   also needs a finger-sized area. The hit area is an invisible box centred on
   the control and grown vertically only, so a neighbour in the same row can
   never take the tap, and nothing in the layout moves. */
@media(max-width:760px){
 .op-header .op-language-picker>button,
 .op-header .op-header-login,
 .op-header [data-fx="cta"],
.op-player [role="dialog"] button[aria-label],
 a[href*="calendly.com"],
 a[href$="aircraft-credits.html"]{position:relative}
 .op-header .op-language-picker>button::after,
 .op-header .op-header-login::after,
 .op-header [data-fx="cta"]::after,
.op-player [role="dialog"] button[aria-label]::after,
 a[href*="calendly.com"]::after,
 a[href$="aircraft-credits.html"]::after{content:"";position:absolute;inset-inline:0;top:50%;height:44px;transform:translateY(-50%)}
}