.camera-actions {
  display:flex;
  justify-content:flex-end;
  margin-top:12px
}
.cinematic-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:7px 0 7px 10px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:10px/1.5 var(--mono);
  cursor:pointer
}
.cinematic-button:hover { color:var(--ink) }
.cinematic-button-symbol { color:var(--orange); font-size:9px }
.cinematic-button-audio { color:#8b9487; font-size:9px }
.cinematic {
  --cinema-paper:#fff0ca;
  --cinema-muted:#b4b5a1;
  --cinema-orange:#ffb95e;
  --cinema-rust:#c65030;
  --cinema-line:#f7d99d40;
  --cinema-display:Impact,"Arial Narrow","Franklin Gothic Medium",Arial,sans-serif;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:0;
  border:0;
  overflow:hidden;
  color:var(--cinema-paper);
  background:#080e0c;
  color-scheme:dark;
  overscroll-behavior:contain
}
.cinematic::backdrop { background:#080e0c }
.cinematic-shell {
  display:flex;
  flex-direction:column;
  gap:16px;
  width:min(1800px,100%);
  height:100%;
  min-height:0;
  margin:auto;
  padding:20px 32px 16px
}
.cinematic-shell:fullscreen {
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#080e0c
}
.cinematic-shell:-webkit-full-screen {
  width:100%;
  max-width:none;
  height:100%;
  margin:0;
  overflow:hidden;
  background:#080e0c
}
.cinematic-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-shrink:0
}
.cinematic-brand {
  margin:0;
  color:var(--cinema-paper);
  font:700 16px/1.3 var(--sans);
  letter-spacing:-.5px
}
.cinematic-brand span,.cinematic-brand small {
  display:block;
  margin-top:4px;
  color:var(--cinema-muted);
  font:8px/1.5 var(--mono);
  letter-spacing:1.5px;
  text-transform:uppercase
}
.cinematic-controls {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px
}
.cinematic-controls button {
  min-width:44px;
  min-height:44px;
  padding:9px 12px;
  border:1px solid transparent;
  border-radius:2px;
  color:var(--cinema-muted);
  background:transparent;
  font:10px/1.5 var(--mono);
  white-space:nowrap;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s
}
.cinematic-controls button:hover {
  border-color:var(--cinema-line);
  background:#f7d99d09;
  color:var(--cinema-paper)
}
.cinematic-controls button:focus-visible {
  outline:2px solid var(--cinema-orange);
  outline-offset:2px
}
.cinematic-controls #cinematic-sound[aria-pressed="true"] { color:var(--cinema-orange) }
.cinematic-controls #cinematic-exit {
  margin-left:6px;
  border-color:var(--cinema-line);
  color:var(--cinema-paper)
}
.cinematic-frame {
  position:relative;
  isolation:isolate;
  flex:1;
  min-height:0;
  width:100%;
  overflow:hidden;
  border:1px solid #eacb8a38;
  background:#040a07;
  box-shadow:0 22px 80px #0007
}
.cinematic-frame::before,.cinematic-frame::after {
  content:"";
  position:absolute;
  z-index:7;
  width:32px;
  height:32px;
  border-color:var(--cinema-orange);
  border-style:solid;
  opacity:.6;
  pointer-events:none
}
.cinematic-frame::before { top:9px; left:9px; border-width:2px 0 0 2px }
.cinematic-frame::after { right:9px; bottom:9px; border-width:0 2px 2px 0 }
.cinematic-live-stage {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1.5s ease,inset 1.2s ease
}
.cinematic-live-stage .viewport {
  width:100%;
  height:100%;
  aspect-ratio:auto;
  background:#040a07
}
.cinematic-live-stage .viewport::before,.cinematic-live-stage .viewport::after { display:none }
.cinematic-live-stage .video,.cinematic-live-stage .timelapse-video {
  object-fit:contain;
  background:#040a07
}
.cinematic-live-stage .placeholder {
  padding:22px;
  background:#0b1711;
  color:var(--cinema-paper)
}
.cinematic-live-stage .placeholder-title { font:400 17px/1.5 Georgia,"Times New Roman",serif }
.cinematic-live-stage .placeholder-detail { font-size:10px }
.cinematic-live-stage .placeholder-icon { width:44px; height:44px }
.cinematic:not([data-phase="watch"]) .placeholder,
.cinematic:not([data-phase="watch"]) .timelapse-overlay { visibility:hidden; pointer-events:none }
.cinematic-treatment {
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,#020a05b3,transparent 26%,transparent 56%,#020a05d9),radial-gradient(ellipse at 50% 45%,transparent 30%,#010702a6);
  transition:opacity 1.4s
}
.cinematic-treatment::after {
  content:"";
  position:absolute;
  inset:0;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  pointer-events:none
}
.cinematic-show-graphics {
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  opacity:1;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,#f7d99d03 0px,#f7d99d03 1px,transparent 1px,transparent 4px);
  transition:opacity 1.5s
}
.cinematic-show-graphics::before,.cinematic-show-graphics::after {
  content:"";
  position:absolute;
  top:-35%;
  width:12%;
  height:170%;
  transform:rotate(29deg);
  background:linear-gradient(90deg,transparent 0 8%,#c650303b 8% 30%,transparent 30% 35%,#e4813b5e 35% 59%,transparent 59% 64%,#ffb95e75 64% 88%,transparent 88%);
  transition:transform 1.5s ease,opacity 1.5s
}
.cinematic-show-graphics::before { left:6%; opacity:.6 }
.cinematic-show-graphics::after { right:6%; opacity:.35; transform:rotate(29deg) scaleX(-1) }
.cinematic-orbit {
  position:absolute;
  width:min(60vw,740px);
  aspect-ratio:1;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid #e8bb7040;
  border-radius:50%;
  box-shadow:0 0 0 30px #f0bd6208,0 0 0 31px #f0bd6220,0 0 0 90px #f0bd6205,0 0 0 91px #f0bd6214;
  transition:opacity 1s
}
.cinematic-orbit::before,.cinematic-orbit::after {
  content:"";
  position:absolute;
  background:#f0bd622f
}
.cinematic-orbit::before { width:1px; height:140%; top:-20%; left:50% }
.cinematic-orbit::after { height:1px; width:140%; left:-20%; top:50% }
.cinematic-radar {
  position:absolute;
  left:50%;
  top:50%;
  width:min(60vw,740px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  background:conic-gradient(from 20deg,transparent 0deg 270deg,#ffb95e08 310deg,#ffb95e30 359deg,transparent 360deg)
}
.cinematic-scanline {
  position:absolute;
  inset:0 0 auto;
  height:1px;
  opacity:0;
  background:#ffcf8a;
  box-shadow:0 0 20px 6px #ffb95e33
}
.cinematic-shutter {
  position:absolute;
  inset:0;
  transform:translateX(-105%) skewX(-15deg);
  background:linear-gradient(90deg,#ad462b99,#ffbc63a6,#fff0ca99)
}
.cinematic-intro {
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  padding:clamp(24px,5vw,80px);
  text-align:center;
  pointer-events:none
}
.cinematic-intro>div,.cinematic-intro>.cinematic-prologue {
  grid-area:1/1;
  min-width:0;
  max-width:100%;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:opacity .45s ease,visibility .45s,transform .7s ease
}
.cinematic-location {
  color:var(--cinema-muted);
  font:10px/2.5 var(--mono);
  letter-spacing:5px;
  text-transform:uppercase
}
.cinematic-loading {
  color:var(--cinema-paper);
  font:italic 400 clamp(24px,3vw,40px)/1.5 Georgia,"Times New Roman",serif
}
.cinematic-loading>p:last-child { margin:0 }
.cinematic[data-phase="loading"] .cinematic-loading {
  opacity:1;
  visibility:visible;
  transform:none
}
.cinematic[data-phase="loading"] .cinematic-live-stage { opacity:.12 }
.cinematic-location span,.cinematic-location p { display:block; margin:0 }
.cinematic-location span:first-child,.cinematic-location p:first-child {
  margin-bottom:20px;
  color:var(--cinema-orange);
  font-size:clamp(12px,1.5vw,18px);
  letter-spacing:8px
}
.cinematic-location span:nth-child(2),.cinematic-location p:nth-child(2) {
  padding:13px 25px;
  border-top:1px solid var(--cinema-line);
  border-bottom:1px solid var(--cinema-line);
  color:var(--cinema-paper);
  letter-spacing:3px
}
.cinematic-location .cinematic-ident-line { margin-top:19px; color:#a9ab96; font-size:7px; letter-spacing:2px }
.cinematic-prologue {
  max-width:950px!important;
  color:var(--cinema-paper);
  font:italic 400 clamp(30px,4.2vw,66px)/1.35 Georgia,"Times New Roman",serif;
  text-wrap:balance;
  text-shadow:0 3px 25px #000
}
.cinematic-kicker {
  margin:0 0 20px;
  color:var(--cinema-orange);
  font:10px/1.6 var(--mono);
  letter-spacing:4px;
  text-transform:uppercase
}
.cinematic-title-card h2,.cinematic-intro h3 {
  margin:0;
  font:900 clamp(54px,8.8vw,150px)/.94 var(--cinema-display);
  letter-spacing:-.025em;
  text-transform:uppercase;
  text-wrap:balance
}
.cinematic-title-card h2 {
  transform:skewX(-7deg);
  text-shadow:2px 2px 0 #d88b42,5px 5px 0 #a3432d,9px 9px 0 #542b21,14px 14px 0 #080e0c;
  filter:drop-shadow(0 6px 25px #0008)
}
.cinematic-title-card h2 span { display:block }
.cinematic-title-card h2 span:last-child { color:var(--cinema-orange) }
.cinematic-tagline {
  margin:30px 0 0;
  color:var(--cinema-paper);
  font:10px/1.6 var(--mono);
  letter-spacing:4px;
  text-transform:uppercase
}
.cinematic-intro h3 {
  font-size:clamp(42px,7vw,114px);
  color:var(--cinema-paper);
  text-shadow:2px 2px 0 #c46d37,5px 5px 0 #6f3225,0 8px 35px #000
}
.cinematic-role { margin:20px 0 0; color:var(--cinema-orange); font:10px/1.7 var(--mono); letter-spacing:2px; text-transform:uppercase }
.cinematic-sentinel-card {
  padding:30px 38px 33px;
  border-top:3px solid var(--cinema-orange);
  border-bottom:1px solid var(--cinema-orange);
  background:linear-gradient(90deg,#080e0c00,#080e0cbb 15% 85%,#080e0c00)
}
.cinematic-sentinel-card>p:last-child,
.cinematic-tactical-card>p:not(.cinematic-role):last-child,
.cinematic-manifesto-card>p:last-child {
  margin:23px 0 0;
  color:#e2dcc8;
  font:italic clamp(16px,2vw,25px)/1.5 Georgia,"Times New Roman",serif
}
.cinematic-dispatch-card {
  width:min(100%,1000px);
  padding:28px 36px;
  border-left:7px solid var(--cinema-orange);
  background:linear-gradient(90deg,#09130ff2,#09130fcc 68%,#09130f80);
  text-align:left
}
.cinematic-dispatch-card h3 { font-size:clamp(42px,6.4vw,98px) }
#cinematic-feature-wind {
  margin:25px 0 12px;
  color:var(--cinema-orange);
  font:700 clamp(23px,4.2vw,58px)/1.2 var(--sans);
  letter-spacing:-.035em;
  text-wrap:balance
}
#cinematic-feature-forecast {
  max-width:800px;
  margin:0;
  color:#d4d5c5;
  font:12px/1.8 var(--mono);
  text-wrap:balance
}
.cinematic-tactical-card {
  justify-self:start;
  width:44%;
  text-align:left
}
.cinematic-tactical-card h3 { font-size:clamp(36px,5.2vw,84px) }
.cinematic-tactical-card .cinematic-role { font-size:9px; line-height:1.9 }
.cinematic-location-card { width:100% }
.cinematic-location-card h3 { font-size:clamp(32px,5.2vw,78px) }
.cinematic-location-card h3 span { display:block }
.cinematic-location-layout {
  display:grid;
  grid-template-columns:minmax(135px,.65fr) minmax(0,2fr);
  align-items:center;
  gap:36px;
  width:min(1050px,100%);
  margin:28px auto 0
}
.cinematic-bearing-feature {
  color:var(--cinema-paper);
  font:10px/1.8 var(--mono)
}
.cinematic-bearing-feature svg {
  display:block;
  width:min(100%,220px);
  height:auto;
  margin:0 auto 10px;
  filter:sepia(.35) saturate(.8)
}
.cinematic-bearing-feature p { margin:6px 0 }
.cinematic-bearing-feature strong { color:var(--cinema-orange) }
.cinematic-map {
  display:block;
  width:100%;
  height:auto;
  max-height:36dvh;
  object-fit:contain;
  border:1px solid #ffb95e70;
  box-shadow:8px 8px 0 #c6503045;
  filter:sepia(.25) saturate(.8)
}
.cinematic-location-card>p:last-child {
  margin:20px 0 0;
  color:var(--cinema-orange);
  font:10px/1.6 var(--mono);
  letter-spacing:2px;
  text-transform:uppercase
}
.cinematic-manifesto-card h3 { font-size:clamp(36px,6.6vw,105px) }
.cinematic-manifesto-card h3 span { display:block }
.cinematic-manifesto-card h3 span+span { margin-top:10px }
.cinematic-manifesto-card h3 span:last-child { color:var(--cinema-orange) }
.cinematic-hud {
  position:absolute;
  inset:28px 32px 24px;
  z-index:5;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(170px,18vw,265px);
  grid-template-rows:auto 1fr auto;
  gap:24px 32px;
  opacity:0;
  visibility:hidden;
  text-shadow:0 1px 12px #000,0 1px 3px #000;
  pointer-events:none;
  transition:opacity 1.6s ease,visibility 1.6s ease
}
.cinematic-signal {
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:var(--cinema-paper);
  font:9px/1.6 var(--mono);
  letter-spacing:1.3px;
  text-transform:uppercase
}
.cinematic-signal-dot {
  display:block;
  width:6px;
  height:6px;
  flex-shrink:0;
  border-radius:50%;
  background:#b0b5a8
}
.cinematic[data-signal="live"] .cinematic-signal-dot {
  background:#bed59e;
  box-shadow:0 0 0 4px #bed59e18
}
.cinematic[data-signal="test"] .cinematic-signal-dot,
.cinematic[data-signal="timelapse"] .cinematic-signal-dot { background:var(--cinema-orange) }
.cinematic-coordinates {
  grid-column:2;
  grid-row:1;
  margin:0;
  color:#d5d2bc;
  text-align:right;
  font:8px/1.8 var(--mono);
  letter-spacing:.5px
}
.cinematic-dispatch {
  grid-column:1;
  grid-row:2;
  align-self:end;
  width:fit-content;
  max-width:min(500px,100%);
  padding:15px 20px 15px 16px;
  border-left:3px solid var(--cinema-orange);
  background:linear-gradient(90deg,#07100de0,#07100d60)
}
.cinematic-dispatch p:first-child {
  margin:0 0 9px;
  color:var(--cinema-orange);
  font:8px/1.6 var(--mono);
  letter-spacing:2px;
  text-transform:uppercase
}
#cinematic-wind {
  margin:0;
  color:var(--cinema-paper);
  font:700 clamp(19px,2.2vw,33px)/1.25 var(--sans);
  letter-spacing:-.5px;
  text-wrap:balance
}
#cinematic-observation {
  max-width:390px;
  margin:10px 0 0;
  color:#d0d2be;
  font:9px/1.8 var(--mono)
}
.cinematic-tactical {
  position:relative;
  grid-column:2;
  grid-row:2;
  align-self:end;
  min-width:0;
  padding:12px;
  border:1px solid #f7d99d65;
  background:#0a160ff0;
  box-shadow:5px 5px 0 #c650302b;
  text-shadow:none
}
.cinematic-tactical>p:first-child {
  margin:0 0 10px;
  color:var(--cinema-orange);
  font:7px/1.6 var(--mono);
  letter-spacing:1.35px;
  text-transform:uppercase
}
.cinematic-tactical .metar-sock { display:block; margin:0; padding:0; border:0 }
.cinematic-tactical .metar-sock-stage {
  aspect-ratio:3/2;
  pointer-events:auto;
  border:1px solid #e9c68140;
  border-radius:0;
  background:#a7b3a1
}
.cinematic-tactical canvas { filter:brightness(.9) saturate(.75) sepia(.15) }
.cinematic-tactical .metar-sock-badge {
  top:6px;
  left:6px;
  color:#35422f;
  font-size:6px;
  letter-spacing:.5px
}
.cinematic-tactical .metar-sock-view-hint {
  left:4px;
  bottom:4px;
  padding:2px 3px;
  font-size:6px
}
.cinematic-tactical .metar-sock-copy .metar-sock-wind {
  margin-top:8px;
  color:#e0e1c9;
  font:8px/1.7 var(--mono)
}
.cinematic-tactical .metar-sock-title,
.cinematic-tactical .metar-sock-time,
.cinematic-tactical .metar-sock-controls,
.cinematic-tactical .metar-sock-note,
.cinematic-tactical .sock-test-controls { display:none }
.cinematic-tactical .cinematic-tactical-note {
  margin:7px 0 0;
  color:var(--cinema-muted);
  font:7px/1.6 var(--mono)
}
.cinematic-bottom {
  grid-column:1/-1;
  grid-row:3;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  padding-top:14px;
  border-top:1px solid #f7d99d40
}
#cinematic-caption {
  margin:0;
  color:#f0e8cd;
  font:italic 400 17px/1.5 Georgia,"Times New Roman",serif;
  text-wrap:balance
}
#cinematic-clock {
  flex-shrink:0;
  color:#c3c5af;
  font:8px/1.7 var(--mono);
  letter-spacing:.3px
}
.cinematic-progress {
  display:flex;
  align-items:center;
  gap:18px;
  flex-shrink:0;
  min-height:20px;
  color:var(--cinema-muted);
  font:8px/1.5 var(--mono);
  letter-spacing:1.4px;
  text-transform:uppercase
}
#cinematic-act { flex-shrink:0; color:var(--cinema-orange) }
.cinematic-progress-track {
  flex:1;
  min-width:20px;
  height:2px;
  overflow:hidden;
  background:#e8c78f26
}
#cinematic-progress-fill {
  display:block;
  width:100%;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:var(--cinema-orange);
  transition:transform .15s linear
}
#cinematic-runtime { flex-shrink:0; font-variant-numeric:tabular-nums; letter-spacing:.5px }
.cinematic-farewell {
  position:absolute;
  inset:0;
  z-index:8;
  display:grid;
  place-items:center;
  margin:0;
  overflow:hidden;
  background:#080e0c;
  color:var(--cinema-paper);
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .65s ease
}
.cinematic-farewell-wording {
  max-width:100%;
  margin:0;
  padding:30px;
  font:italic 400 clamp(23px,3vw,40px)/1.5 Georgia,"Times New Roman",serif;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .65s ease .2s,transform .65s ease .2s
}
.cinematic-credits {
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  transition:opacity .25s ease;
  mask-image:linear-gradient(180deg,transparent,#000 7%,#000 93%,transparent)
}
.cinematic-credit-roll {
  position:absolute;
  top:100%;
  left:50%;
  width:min(640px,100%);
  padding:0 26px;
  translate:-50% 0;
  text-align:center;
  will-change:transform
}
.cinematic-credit-title {
  margin:0 0 34px;
  font:400 clamp(24px,3vw,36px)/1.15 var(--cinema-display);
  letter-spacing:2px;
  text-transform:uppercase
}
.cinematic-credit-list { margin:0 }
.cinematic-credit-list>div { margin:0 0 18px }
.cinematic-credit-list dt {
  margin:0 0 4px;
  color:var(--cinema-orange);
  font:8px/1.6 var(--mono);
  letter-spacing:1.7px;
  text-transform:uppercase
}
.cinematic-credit-list dd {
  margin:0;
  font:400 20px/1.4 Georgia,"Times New Roman",serif;
  overflow-wrap:break-word
}
.cinematic-credit-thanks {
  margin:32px 0 0;
  padding-bottom:22px;
  color:var(--cinema-muted);
  font:italic 400 16px/1.6 Georgia,"Times New Roman",serif
}
/* Each chapter gets its own entrance, then enough stillness to read it. */
.cinematic[data-phase="opening"] .cinematic-location,
.cinematic[data-phase="prologue"] .cinematic-prologue,
.cinematic[data-phase="sentinel"] .cinematic-sentinel-card,
.cinematic[data-phase="title"] .cinematic-title-card,
.cinematic[data-phase="dispatch"] .cinematic-dispatch-card,
.cinematic[data-phase="tactical"] .cinematic-tactical-card,
.cinematic[data-phase="location"] .cinematic-location-card,
.cinematic[data-phase="location-fade"] .cinematic-location-card,
.cinematic[data-phase="manifesto"] .cinematic-manifesto-card {
  opacity:1;
  visibility:visible;
  transform:none
}
.cinematic[data-phase="opening"] .cinematic-location { animation:cinema-broadcast 2.2s both }
.cinematic[data-phase="opening"] .cinematic-orbit { animation:cinema-orbit-reveal 3.6s both }
.cinematic[data-phase="opening"] .cinematic-show-graphics::before { animation:cinema-stripes-in 2s both }
.cinematic[data-phase="opening"] .cinematic-show-graphics::after { animation:cinema-stripes-in 2s .35s both }
.cinematic[data-phase="prologue"] .cinematic-live-stage { opacity:.24 }
.cinematic[data-phase="prologue"] .cinematic-prologue { animation:cinema-warning 2.4s both }
.cinematic[data-phase="prologue"] .cinematic-orbit { opacity:.3 }
.cinematic[data-phase="sentinel"] .cinematic-live-stage { opacity:.48 }
.cinematic[data-phase="sentinel"] .cinematic-sentinel-card { animation:cinema-split-reveal 1.6s both }
.cinematic[data-phase="sentinel"] .cinematic-sentinel-card h3 { animation:cinema-cast-title 2.4s both }
.cinematic[data-phase="sentinel"] .cinematic-shutter { animation:cinema-shutter-sweep 1.4s both }
.cinematic[data-phase="title"] .cinematic-live-stage { opacity:.52 }
.cinematic[data-phase="title"] .cinematic-title-card { animation:cinema-grand-title 6.7s both }
.cinematic[data-phase="title"] .cinematic-title-card .cinematic-kicker { animation:cinema-tagline 1.2s .2s both }
.cinematic[data-phase="title"] .cinematic-tagline { animation:cinema-tagline 1.5s 1.1s both }
.cinematic[data-phase="title"] .cinematic-show-graphics::before { animation:cinema-title-stripe 2s both }
.cinematic[data-phase="title"] .cinematic-show-graphics::after { animation:cinema-title-stripe 2s .15s both }
.cinematic[data-phase="dispatch"] .cinematic-live-stage { opacity:.28 }
.cinematic[data-phase="dispatch"] .cinematic-dispatch-card { animation:cinema-dispatch-slide 1.5s both }
.cinematic[data-phase="dispatch"] #cinematic-feature-wind { animation:cinema-readout 1.3s .35s both }
.cinematic[data-phase="dispatch"] #cinematic-feature-forecast { animation:cinema-readout 1.2s .7s both }
.cinematic[data-phase="dispatch"] .cinematic-scanline { animation:cinema-scan 2.8s .15s both }
.cinematic[data-phase="tactical"] .cinematic-live-stage { opacity:.15 }
.cinematic[data-phase="tactical"] .cinematic-tactical-card { animation:cinema-dispatch-slide 1.4s both }
.cinematic[data-phase="tactical"] .cinematic-radar { animation:cinema-radar-sweep 6.8s linear both }
.cinematic[data-phase="tactical"] .cinematic-hud { opacity:1; visibility:visible }
.cinematic[data-phase="tactical"] .cinematic-hud>* { visibility:hidden }
.cinematic[data-phase="tactical"] .cinematic-tactical {
  position:absolute;
  grid-column:1/-1;
  grid-row:1/-1;
  top:50%;
  right:3%;
  width:43%;
  max-width:520px;
  padding:18px;
  visibility:visible;
  transform:translateY(-50%);
  animation:cinema-reconstruct 1.8s both
}
.cinematic[data-phase="tactical"] .cinematic-tactical>p:first-child { display:none }
.cinematic[data-phase="tactical"] .cinematic-tactical .metar-sock-wind { font-size:11px; text-align:center }
.cinematic[data-phase="tactical"] .cinematic-tactical-note { text-align:center; font-size:9px }
.cinematic[data-phase="tactical"] .cinematic-tactical .metar-sock-badge { font-size:8px; top:9px; left:9px }
.cinematic:is([data-phase="location"],[data-phase="location-fade"]) .cinematic-live-stage { opacity:.16 }
.cinematic[data-phase="location"] .cinematic-location-card { animation:cinema-readout 1.4s both }
.cinematic[data-phase="location-fade"] .cinematic-location-card { animation:cinema-location-fade 4.92s linear both }
.cinematic:is([data-phase="location"],[data-phase="location-fade"]) .cinematic-bearing-feature { animation:cinema-bearing-turn 2.1s both }
.cinematic:is([data-phase="location"],[data-phase="location-fade"]) .cinematic-map { animation:cinema-map-reveal 2.2s .2s both }
.cinematic:is([data-phase="location"],[data-phase="location-fade"]) .cinematic-scanline { animation:cinema-scan 3s both }
.cinematic:is([data-phase="location"],[data-phase="location-fade"]) .cinematic-orbit { opacity:.2 }
.cinematic[data-phase="manifesto"] .cinematic-live-stage { opacity:.25 }
.cinematic[data-phase="manifesto"] .cinematic-manifesto-card { transition:none }
.cinematic[data-phase="manifesto"] .cinematic-manifesto-card h3 span { animation:cinema-manifesto-slam .42s cubic-bezier(.12,.86,.2,1) both }
.cinematic[data-phase="manifesto"] .cinematic-manifesto-card h3 span:nth-child(2) { animation-delay:.745s }
.cinematic[data-phase="manifesto"] .cinematic-manifesto-card h3 span:nth-child(3) { animation-delay:1.58s }
.cinematic[data-phase="manifesto"] .cinematic-manifesto-card>p:last-child { animation:cinema-readout .4s 2.18s both }
.cinematic[data-phase="manifesto"] .cinematic-show-graphics::before { animation:cinema-title-stripe 2.4s both }
.cinematic[data-phase="watch"] .cinematic-live-stage,
.cinematic[data-phase="watch"] .cinematic-hud { opacity:1; visibility:visible }
.cinematic[data-phase="watch"] .cinematic-show-graphics { opacity:0 }
.cinematic[data-phase="watch"] .cinematic-treatment { opacity:.65 }
.cinematic[data-phase="watch"] .cinematic-dispatch { animation:cinema-watch-arrival 1.6s both }
.cinematic[data-phase="watch"] .cinematic-tactical { animation:cinema-watch-arrival 1.6s .15s both }
.cinematic[data-phase="watch"] .cinematic-progress-track { opacity:.2 }
.cinematic[data-phase="watch"] #cinematic-runtime { opacity:.6 }
.cinematic[data-paused="true"],
.cinematic[data-paused="true"]::before,
.cinematic[data-paused="true"]::after,
.cinematic[data-paused="true"]::backdrop,
.cinematic[data-paused="true"] *,
.cinematic[data-paused="true"] *::before,
.cinematic[data-paused="true"] *::after { animation-play-state:paused!important }
.cinematic[data-paused="true"] #cinematic-progress-fill { transition:none }
.cinematic[data-phase="closing"] .cinematic-live-stage { opacity:0; transition-duration:.65s }
.cinematic[data-phase="closing"] .cinematic-hud { opacity:0; transition-duration:.35s }
.cinematic[data-phase="closing"] .cinematic-farewell { opacity:1 }
.cinematic[data-phase="closing"] .cinematic-show-graphics { opacity:0; transition-duration:.35s }
.cinematic[data-phase="closing"] .cinematic-brand,
.cinematic[data-phase="closing"] .cinematic-progress,
.cinematic[data-phase="closing"] .cinematic-frame::before,
.cinematic[data-phase="closing"] .cinematic-frame::after { opacity:0; transition:opacity .5s ease }
.cinematic[data-phase="closing"] .cinematic-controls button:not(#cinematic-exit) { visibility:hidden }
.cinematic[data-phase="closing"] .cinematic-frame { border-color:transparent; box-shadow:none; transition:border-color .5s ease,box-shadow .5s ease }
.cinematic[data-phase="closing"][data-outro="farewell"] .cinematic-farewell-wording { opacity:1; transform:none }
.cinematic[data-phase="closing"][data-outro="credits"] .cinematic-farewell-wording,
.cinematic[data-phase="closing"][data-outro="return"] .cinematic-farewell-wording { opacity:0; transform:none; transition:opacity .25s ease }
.cinematic[data-phase="closing"][data-outro="credits"] .cinematic-credits { opacity:1 }
.cinematic[data-phase="closing"][data-outro="credits"] .cinematic-credit-roll {
  animation:cinema-credits-roll var(--cinematic-credits-duration,1800ms) .1s linear both
}
.cinematic[data-phase="closing"][data-outro="return"] { opacity:0; background:transparent; transition:opacity .7s ease }
.cinematic[data-phase="closing"][data-outro="return"]::backdrop { background:transparent; transition:background .7s ease }
.cinematic[data-phase="closing"][data-outro="return"] .cinematic-shell { opacity:0; transition:opacity .7s ease }
.cinematic[data-phase="closing"][data-outro="return"] .cinematic-credits { opacity:0; transition:opacity .35s ease }
@keyframes cinema-credits-roll {
  from { transform:translateY(0) }
  to { transform:translateY(calc(-100% - var(--cinematic-credits-travel,100dvh))) }
}
@keyframes cinema-broadcast {
  0% { opacity:0; transform:scale(.9); letter-spacing:11px; filter:blur(7px) }
  60% { opacity:1; filter:blur(0) }
  100% { transform:scale(1); letter-spacing:5px }
}
@keyframes cinema-orbit-reveal {
  0% { opacity:0; transform:translate(-50%,-50%) scale(.35) rotate(-45deg) }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0) }
}
@keyframes cinema-stripes-in {
  0% { opacity:0; translate:-200px 0 }
  100% { opacity:.6; translate:0 0 }
}
@keyframes cinema-warning {
  0% { opacity:0; transform:scale(1.12); filter:blur(5px) }
  100% { opacity:1; transform:scale(1); filter:blur(0) }
}
@keyframes cinema-split-reveal {
  0% { clip-path:polygon(0 46%,100% 46%,100% 53%,0 53%); opacity:0 }
  25% { opacity:1 }
  100% { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); opacity:1 }
}
@keyframes cinema-cast-title {
  0% { letter-spacing:.15em; transform:scale(1.12) }
  100% { letter-spacing:-.025em; transform:scale(1) }
}
@keyframes cinema-shutter-sweep {
  0% { transform:translateX(-110%) skewX(-15deg); opacity:.8 }
  100% { transform:translateX(110%) skewX(-15deg); opacity:0 }
}
@keyframes cinema-grand-title {
  0% { opacity:0; transform:scale(1.6) rotate(-3deg); filter:blur(8px) }
  13% { opacity:1; transform:scale(.97) rotate(0); filter:blur(0) }
  28% { transform:scale(1); filter:blur(0) }
  100% { opacity:1; transform:scale(1.065); filter:blur(0) }
}
@keyframes cinema-tagline {
  0% { opacity:0; transform:translateY(16px); letter-spacing:9px }
  100% { opacity:1; transform:translateY(0); letter-spacing:4px }
}
@keyframes cinema-title-stripe {
  0% { opacity:0; translate:-140% 0; scale:2 1 }
  100% { opacity:.75; translate:0 0; scale:1 1 }
}
@keyframes cinema-dispatch-slide {
  0% { opacity:0; transform:translateX(-80px); clip-path:inset(0 100% 0 0) }
  100% { opacity:1; transform:translateX(0); clip-path:inset(0) }
}
@keyframes cinema-readout {
  0% { opacity:0; transform:translateY(16px); filter:blur(4px) }
  100% { opacity:1; transform:none; filter:blur(0) }
}
@keyframes cinema-scan {
  0% { top:0; opacity:0 }
  18% { opacity:.7 }
  85% { opacity:.4 }
  100% { top:100%; opacity:0 }
}
@keyframes cinema-radar-sweep {
  0% { opacity:0; transform:translate(-50%,-50%) rotate(-80deg) }
  15% { opacity:.8 }
  85% { opacity:.8 }
  100% { opacity:0; transform:translate(-50%,-50%) rotate(280deg) }
}
@keyframes cinema-reconstruct {
  0% { opacity:0; transform:translateY(-42%) scale(.72); clip-path:inset(49% 0) }
  40% { opacity:1; clip-path:inset(0) }
  100% { opacity:1; transform:translateY(-50%) scale(1); clip-path:inset(0) }
}
@keyframes cinema-bearing-turn {
  0% { opacity:0; transform:rotate(-30deg) scale(.7) }
  100% { opacity:1; transform:none }
}
@keyframes cinema-map-reveal {
  0% { opacity:0; clip-path:inset(0 100% 0 0); transform:translateX(25px) }
  100% { opacity:1; clip-path:inset(0); transform:none }
}
@keyframes cinema-location-fade {
  from { opacity:1; transform:none }
  to { opacity:0; transform:none }
}
@keyframes cinema-manifesto-slam {
  0% { opacity:0; transform:translateX(-90px) scale(1.18); filter:blur(3px) }
  22% { opacity:1; transform:translateX(5px) scale(1.02); filter:blur(0) }
  65% { opacity:1; transform:translateX(-2px) scale(1); filter:blur(0) }
  100% { opacity:1; transform:none; filter:blur(0) }
}
@keyframes cinema-watch-arrival {
  0% { opacity:0; transform:translateY(16px) }
  100% { opacity:1; transform:none }
}
.cinematic-camera-spacer { width:100%; aspect-ratio:16/9; background:#15251f }
.cinematic-return-note {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:20;
  max-width:calc(100vw - 48px);
  margin:0;
  padding:13px 18px;
  border:1px solid #c3cbbf;
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  box-shadow:0 6px 30px #13291f1a;
  font:italic 14px/1.5 Georgia,"Times New Roman",serif;
  pointer-events:none
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
@media (max-width:1000px) {
  .cinematic-shell { gap:12px; padding:16px 20px 12px }
  .cinematic-hud { inset:22px 24px 20px; grid-template-columns:minmax(0,1fr) 185px; gap:20px 24px }
  .cinematic-title-card h2 { font-size:clamp(55px,10.2vw,110px) }
  .cinematic-location-layout { gap:22px; margin-top:22px }
  .cinematic-intro { padding:34px }
  .cinematic-tactical { padding:10px }
}
@media (max-width:700px) {
  .cinematic-shell { gap:10px; padding:12px }
  .cinematic-topbar { flex-wrap:wrap; align-items:flex-start; gap:8px }
  .cinematic-brand { display:flex; align-items:center; gap:10px; font-size:14px }
  .cinematic-brand span,.cinematic-brand small { margin:0; font-size:7px; letter-spacing:1px }
  .cinematic-controls { width:100%; justify-content:space-between; gap:2px }
  .cinematic-controls button { padding:9px 10px; font-size:9px }
  .cinematic-controls #cinematic-exit { margin-left:0 }
  .cinematic-frame::before,.cinematic-frame::after { width:23px; height:23px }
  .cinematic-intro { padding:24px }
  .cinematic-kicker { margin-bottom:18px; font-size:8px; letter-spacing:2.4px }
  .cinematic-location { font-size:8px; letter-spacing:2px }
  .cinematic-location span:first-child,.cinematic-location p:first-child { font-size:11px; letter-spacing:3px }
  .cinematic-location span:nth-child(2),.cinematic-location p:nth-child(2) { padding:12px 7px; letter-spacing:1px }
  .cinematic-prologue { font-size:clamp(28px,7vw,44px) }
  .cinematic-title-card h2 { font-size:clamp(45px,11vw,76px); text-shadow:2px 2px 0 #d88b42,4px 4px 0 #a3432d,7px 7px 0 #542b21,10px 10px 0 #080e0c }
  .cinematic-tagline { margin-top:25px; font-size:8px; letter-spacing:2px }
  .cinematic-sentinel-card { padding:26px 4px }
  .cinematic-intro h3 { font-size:clamp(38px,10vw,68px) }
  .cinematic-sentinel-card>p:last-child,.cinematic-tactical-card>p:not(.cinematic-role):last-child,.cinematic-manifesto-card>p:last-child { font-size:17px }
  .cinematic-role { margin-top:17px; font-size:8px; letter-spacing:1px }
  .cinematic-dispatch-card { padding:20px; border-left-width:4px }
  .cinematic-dispatch-card h3 { font-size:clamp(30px,8vw,56px) }
  #cinematic-feature-wind { margin-top:24px; font-size:clamp(26px,6.5vw,42px) }
  #cinematic-feature-forecast { font-size:10px; line-height:1.9 }
  .cinematic-tactical-card { align-self:start; justify-self:center; width:100%; padding-top:5%; text-align:center }
  .cinematic-tactical-card h3 { font-size:clamp(32px,8vw,56px) }
  .cinematic-tactical-card .cinematic-role { max-width:280px; margin:16px auto 0; font-size:8px; letter-spacing:1px }
  .cinematic[data-phase="tactical"] .cinematic-hud { inset:0 }
  .cinematic[data-phase="tactical"] .cinematic-tactical { top:auto; right:14%; bottom:8%; width:72%; max-width:380px; padding:12px; transform:none; animation-name:cinema-reconstruct-mobile }
  .cinematic-location-layout { grid-template-columns:minmax(0,1fr); gap:12px; margin-top:18px }
  .cinematic-location-card h3 { font-size:clamp(30px,8vw,50px) }
  .cinematic-bearing-feature { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 12px; font-size:9px }
  .cinematic-bearing-feature svg { flex-shrink:0; width:90px; margin:0 4px 0 0 }
  .cinematic-bearing-feature p { margin:4px 0 }
  .cinematic-map { width:100%; max-height:25dvh; box-shadow:5px 5px 0 #c6503045 }
  .cinematic-location-card>p:last-child { margin-top:16px; font-size:8px; letter-spacing:1px }
  .cinematic-manifesto-card h3 { font-size:clamp(31px,8.3vw,58px) }
  .cinematic-manifesto-card h3 span+span { margin-top:16px }
  .cinematic-manifesto-card .cinematic-kicker { font-size:7px; letter-spacing:1.6px }
  .cinematic-orbit,.cinematic-radar { width:85vw }
  .cinematic-show-graphics::before { left:3%; width:20% }
  .cinematic-show-graphics::after { right:3%; width:20% }
  /* A dedicated lower shelf keeps the actual 3D reconstruction visible on phones. */
  .cinematic[data-phase="watch"] .cinematic-live-stage { bottom:212px }
  .cinematic-hud {
    inset:18px 16px 14px;
    grid-template-columns:minmax(0,1fr) minmax(115px,.94fr);
    grid-template-rows:auto auto 1fr auto auto;
    gap:8px 12px
  }
  .cinematic-signal { grid-column:1/-1; grid-row:1; font-size:8px; letter-spacing:.7px }
  .cinematic-coordinates { grid-column:1/-1; grid-row:2; padding-left:15px; text-align:left; font-size:7px }
  .cinematic-dispatch { grid-column:1; grid-row:4; width:100%; margin:0; padding:3px 0 4px 10px; border-left-width:2px; background:transparent }
  .cinematic-dispatch p:first-child { margin-bottom:8px; font-size:7px; letter-spacing:1.2px }
  #cinematic-wind { font-size:20px; line-height:1.3 }
  #cinematic-observation { margin-top:8px; font-size:7px; line-height:1.7 }
  .cinematic-tactical { display:block; grid-column:2; grid-row:4; padding:8px; box-shadow:3px 3px 0 #c650302b }
  .cinematic-tactical>p:first-child { margin-bottom:7px; font-size:6px; letter-spacing:.6px }
  .cinematic-tactical .metar-sock-stage { aspect-ratio:3/2 }
  .cinematic-tactical .metar-sock-copy .metar-sock-wind { margin-top:6px; font-size:7px; line-height:1.5 }
  .cinematic-tactical .cinematic-tactical-note { margin-top:5px; font-size:6px; line-height:1.5 }
  .cinematic-tactical .metar-sock-badge { top:4px; left:4px; font-size:5px; letter-spacing:0 }
  .cinematic-bottom { grid-row:5; align-items:center; gap:12px; padding-top:10px }
  #cinematic-caption { font-size:13px; line-height:1.4 }
  #cinematic-clock { font-size:7px; letter-spacing:0 }
  .cinematic-progress { gap:10px; min-height:18px; font-size:7px; letter-spacing:.7px }
  #cinematic-act { max-width:65%; }
  #cinematic-runtime { font-size:7px; letter-spacing:0 }
  .cinematic-return-note { right:16px; bottom:16px; max-width:calc(100vw - 32px) }
}
@keyframes cinema-reconstruct-mobile {
  0% { opacity:0; transform:translateY(25px) scale(.8); clip-path:inset(49% 0) }
  40% { opacity:1; clip-path:inset(0) }
  100% { opacity:1; transform:none; clip-path:inset(0) }
}
@media (max-width:380px) {
  .cinematic-shell { padding:10px; gap:8px }
  .cinematic-controls button { padding:8px 7px; font-size:8px }
  .cinematic-intro { padding:20px }
  .cinematic-title-card h2 { font-size:clamp(40px,10.5vw,46px) }
  .cinematic-tagline { font-size:7px; letter-spacing:1.4px }
  .cinematic-hud { inset:16px 12px 12px; grid-template-columns:minmax(0,1fr) minmax(110px,.94fr); gap:7px 10px }
  .cinematic-dispatch { padding-left:8px }
  #cinematic-wind { font-size:17px }
  #cinematic-observation { font-size:6px }
  .cinematic-tactical { padding:7px }
  .cinematic-tactical>p:first-child { font-size:5.5px; letter-spacing:.3px }
  #cinematic-caption { font-size:11px }
  #cinematic-clock { font-size:6px }
  .cinematic-progress { font-size:6px; letter-spacing:.5px; gap:7px }
  #cinematic-runtime { font-size:6px }
  .cinematic[data-phase="watch"] .cinematic-live-stage { bottom:190px }
  .cinematic[data-phase="tactical"] .cinematic-tactical { right:15%; bottom:7%; width:70% }
  .cinematic-tactical-card { padding-top:1% }
  .cinematic-tactical-card h3 { font-size:30px }
  .cinematic-tactical-card .cinematic-role { margin-top:12px; font-size:7px }
  .cinematic-location-layout { margin-top:14px; gap:9px }
  .cinematic-bearing-feature svg { width:67px }
  .cinematic-map { max-height:22dvh }
  .cinematic-location-card .cinematic-kicker { margin-bottom:12px }
  .cinematic-location-card h3 { font-size:27px }
  .cinematic-location-card>p:last-child { margin-top:12px; font-size:7px }
}
@media (max-height:550px) and (min-width:701px) {
  .cinematic-shell { gap:8px; padding:8px 16px }
  .cinematic-brand { font-size:14px }
  .cinematic-brand span,.cinematic-brand small { margin-top:2px; font-size:7px }
  .cinematic-controls button { min-height:44px; padding:8px 11px; font-size:9px }
  .cinematic-frame::before,.cinematic-frame::after { width:20px; height:20px; top:7px; left:7px }
  .cinematic-frame::after { top:auto; left:auto; right:7px; bottom:7px }
  .cinematic-intro { padding:20px 36px }
  .cinematic-title-card h2 { font-size:clamp(44px,7vw,70px) }
  .cinematic-kicker { margin-bottom:12px; font-size:8px; letter-spacing:2px }
  .cinematic-tagline { margin-top:16px; font-size:8px; letter-spacing:2px }
  .cinematic-location span:first-child,.cinematic-location p:first-child { margin-bottom:12px; font-size:12px; letter-spacing:4px }
  .cinematic-location span:nth-child(2),.cinematic-location p:nth-child(2) { padding:8px 20px; font-size:8px }
  .cinematic-prologue { font-size:31px }
  .cinematic-intro h3 { font-size:clamp(36px,6.3vw,62px) }
  .cinematic-sentinel-card { padding:15px 28px }
  .cinematic-sentinel-card>p:last-child,.cinematic-tactical-card>p:not(.cinematic-role):last-child,.cinematic-manifesto-card>p:last-child { margin-top:15px; font-size:16px }
  .cinematic-role { margin-top:12px; font-size:8px; letter-spacing:1px }
  .cinematic-dispatch-card { padding:15px 22px }
  .cinematic-dispatch-card h3 { font-size:42px }
  #cinematic-feature-wind { margin:15px 0 9px; font-size:31px }
  #cinematic-feature-forecast { font-size:9px; line-height:1.7 }
  .cinematic-tactical-card h3 { font-size:36px }
  .cinematic[data-phase="tactical"] .cinematic-hud { inset:12px 20px }
  .cinematic[data-phase="tactical"] .cinematic-tactical { width:35%; right:4%; padding:9px; max-width:295px }
  .cinematic[data-phase="tactical"] .cinematic-tactical .metar-sock-stage { aspect-ratio:1.8 }
  .cinematic[data-phase="tactical"] .cinematic-tactical .metar-sock-wind { font-size:8px; margin-top:6px }
  .cinematic[data-phase="tactical"] .cinematic-tactical-note { font-size:7px; margin-top:4px }
  .cinematic-location-card h3 { font-size:30px }
  .cinematic-location-layout { width:min(680px,95%); margin-top:11px; gap:22px; grid-template-columns:145px minmax(0,1fr) }
  .cinematic-bearing-feature svg { width:100px; margin-bottom:5px }
  .cinematic-bearing-feature { font-size:8px }
  .cinematic-bearing-feature p { margin:2px 0 }
  .cinematic-map { max-height:31dvh; box-shadow:4px 4px 0 #c6503045 }
  .cinematic-location-card>p:last-child { margin-top:10px; font-size:7px; letter-spacing:1px }
  .cinematic-manifesto-card h3 { font-size:35px }
  .cinematic-manifesto-card h3 span+span { margin-top:7px }
  .cinematic-manifesto-card>p:last-child { margin-top:12px; font-size:14px }
  .cinematic-manifesto-card .cinematic-kicker { margin-bottom:10px; font-size:7px }
  .cinematic[data-phase="watch"] .cinematic-live-stage { right:175px }
  .cinematic-hud { inset:14px 17px 12px; grid-template-columns:minmax(0,1fr) 132px; gap:10px 16px }
  .cinematic-signal { font-size:7px; letter-spacing:.7px }
  .cinematic-coordinates { font-size:6px; letter-spacing:0 }
  .cinematic-dispatch { max-width:410px; padding:8px 14px; border-left-width:2px }
  .cinematic-dispatch p:first-child { margin-bottom:5px; font-size:7px }
  #cinematic-wind { font-size:21px }
  #cinematic-observation { margin-top:6px; font-size:7px }
  .cinematic-tactical { display:block; padding:7px; box-shadow:3px 3px 0 #c650302b }
  .cinematic-tactical>p:first-child { margin-bottom:6px; font-size:5.5px; letter-spacing:.5px }
  .cinematic-tactical .metar-sock-copy .metar-sock-wind { margin-top:5px; font-size:6px; line-height:1.5 }
  .cinematic-tactical .cinematic-tactical-note { font-size:6px; margin-top:4px }
  .cinematic-tactical .metar-sock-badge { font-size:5px; left:4px; top:4px; letter-spacing:0 }
  .cinematic-bottom { padding-top:7px }
  #cinematic-caption { font-size:12px }
  #cinematic-clock { font-size:7px }
  .cinematic-progress { min-height:16px; gap:12px; font-size:7px }
}
@media (prefers-reduced-motion:reduce) {
  .cinematic *, .cinematic *::before,.cinematic *::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}