:root{color-scheme:dark} *{box-sizing:border-box}
 body{margin:0;background:#000;color:#fff;
  font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
 .sg-intro,.sg-outro{position:relative;z-index:5;background:#070809;padding:13vh 24px 15vh}
 .sg-intro{min-height:100vh;display:grid;place-items:center;text-align:center}
 .sg-intro div,.sg-outro div{max-width:640px;margin:0 auto}
 .sg-kicker{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6f7a82;margin:0 0 14px}
 .sg-intro h1,.sg-filmtitle{font-size:clamp(34px,8vw,64px);margin:0 0 20px;letter-spacing:-.03em;
  line-height:1;font-weight:800;color:#f2f4f5}
 .sg-intro p,.sg-outro p{color:#aeb6bc;margin:0 0 14px}
 .sg-intro b,.sg-outro b{color:#e8eaec}
 .sg-hint{margin-top:34px;font-size:13px;color:#5d6870;letter-spacing:.1em;text-transform:uppercase}
 .sg-hint span{display:block;margin-top:10px;font-size:22px;animation:bob 1.8s ease-in-out infinite}
 @keyframes bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}

 .sg-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000;z-index:1}
 .sg-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  opacity:0;transition:opacity .12s linear}
 .sg-stage video.sg-on{opacity:1}
 .sg-stage .sg-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
 .sg-vig{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(120% 80% at 50% 50%,transparent 38%,rgba(0,0,0,.6) 100%)}
 .sg-track{position:relative;margin-top:-100vh;z-index:2}

 .sg-cue{position:fixed;z-index:3;pointer-events:none;opacity:0;padding:0 7vw;max-width:min(700px,88vw);
  text-shadow:0 2px 40px rgba(0,0,0,.9),0 1px 4px rgba(0,0,0,.7);
  transition:opacity .3s ease;top:50%;transform:translateY(-50%)}
 .sg-cue .sg-big{margin:0 0 12px;font-size:clamp(26px,5.2vw,52px);font-weight:800;letter-spacing:-.025em;line-height:1.08}
 .sg-cue .sg-sub{margin:0;font-size:clamp(14px,2.1vw,18px);line-height:1.5;color:#cfd6da;font-weight:500;max-width:30em}
 .sg-cue.sg-left{left:0} .sg-cue.sg-right{right:0;text-align:right} .sg-cue.sg-right .sg-sub{margin-left:auto}
 .sg-cue.sg-center{left:50%;transform:translate(-50%,-50%);text-align:center} .sg-cue.sg-center .sg-sub{margin:0 auto}
 .sg-cue.sg-on{opacity:1}

 .sg-live{position:fixed;inset:0;z-index:4;opacity:0;pointer-events:none;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,rgba(4,5,6,.86),rgba(4,5,6,.94));
  transition:opacity .35s ease;display:grid;place-items:center;padding:8vh 20px}
 .sg-live.sg-on{opacity:1;pointer-events:auto}
 .sg-live-in{max-width:720px;width:100%}
 .sg-live-k{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#7fd4a0;margin:0 0 10px}
 .sg-live-h{font-size:clamp(26px,5.4vw,44px);margin:0 0 12px;letter-spacing:-.025em;line-height:1.05;font-weight:700}
 .sg-live-p{color:#aeb6bc;margin:0 0 26px;font-size:16px}
 .sg-q{margin:0 0 18px}
 .sg-ql{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6f7a82;margin:0 0 9px}
 .sg-chips{display:flex;flex-wrap:wrap;gap:8px}
 .sg-chip{font:inherit;font-size:14px;color:#c8cfd4;background:#11151a;border:1px solid #232a31;
  border-radius:999px;padding:9px 15px;cursor:pointer;min-height:44px;transition:.15s}
 .sg-chip:hover{border-color:#3a444d;color:#e8eaec}
 .sg-chip.sg-on{background:#132a1d;border-color:#2f6b3f;color:#9fe0b8}
 .sg-chip:focus-visible,.sg-door:focus-visible,.sg-snd:focus-visible{outline:2px solid #7fd4a0;outline-offset:3px}
 .sg-out{margin-top:30px;border-top:1px solid #1c2024;padding-top:24px}
 .sg-outk{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6f7a82;margin:0 0 14px}
 .sg-cards,.sg-back{display:grid;gap:9px;grid-template-columns:1fr 1fr}
 @media(max-width:620px){.sg-cards,.sg-back,.sg-doors{grid-template-columns:1fr!important}}
 .sg-card,.sg-bk{border:1px solid #1e242a;background:#0b0e11;border-radius:11px;padding:15px 16px}
 .sg-card{animation:rise .45s ease both}
 @keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
 .sg-cn,.sg-bn{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#4d5862}
 .sg-bn{color:#7fd4a0}
 .sg-cr,.sg-bt{margin:5px 0 5px;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
 .sg-cm{margin:0;font-size:13px;color:#8d99a2}
 .sg-bd{margin:0;font-size:13.5px;color:#8d99a2;line-height:1.5}
 .sg-outn{margin:18px 0 0;font-size:14px;color:#aeb6bc}
 .sg-outn.sg-small{font-size:12px;color:#6f7a82;margin-top:9px}
 .sg-doors{display:grid;gap:12px;grid-template-columns:1fr 1fr;margin-top:6px}
 .sg-door{display:block;text-decoration:none;color:inherit;border:1px solid #232a31;background:#0b0e11;
  border-radius:13px;padding:20px 19px;transition:.16s}
 .sg-door:hover{border-color:#2f6b3f;background:#0c1410;transform:translateY(-2px)}
 .sg-dn{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6f7a82}
 .sg-dt{margin:8px 0 8px;font-size:19px;font-weight:800;letter-spacing:-.015em;line-height:1.2}
 .sg-dd{margin:0 0 14px;font-size:13.5px;color:#8d99a2;line-height:1.5}
 .sg-dgo{font-size:13px;font-weight:700;color:#7fd4a0}
 .sg-snd{position:fixed;right:14px;top:14px;z-index:7;font:inherit;font-size:11px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#8d99a2;background:rgba(0,0,0,.6);
  border:1px solid #232a31;border-radius:999px;padding:10px 14px;cursor:pointer;min-height:44px}
 .sg-snd[aria-pressed="true"]{color:#9fe0b8;border-color:#2f6b3f;background:#0c1410}
 .sg-hud{position:fixed;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.1);z-index:6}
 .sg-hud>b{position:absolute;left:0;top:0;bottom:0;background:#7fd4a0;width:0}
 .sg-hud>i{position:absolute;top:-3px;width:1px;height:9px;background:rgba(255,255,255,.3)}
 .sg-outro h2{font-size:clamp(24px,5vw,38px);margin:0 0 16px;letter-spacing:-.02em}
 .sg-outro a{color:#7fd4a0}
 .sg-disclose{margin-top:26px!important;padding-top:20px;border-top:1px solid #1c2024;
  font-size:12.5px;line-height:1.55;color:#6f7a82}

 /* Over a phone-sized frame the words sit on whatever the shot happens to be doing, and a text
    shadow is not always enough. A scrim tied to the side the text is on costs nothing. */
 @media(max-width:700px){
  .sg-cue{padding:0 6vw}
  .sg-cue::before{content:"";position:absolute;inset:-14vh -6vw;z-index:-1;
   background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.28) 72%,transparent)}
  .sg-cue.sg-right::before{background:linear-gradient(270deg,rgba(0,0,0,.72),rgba(0,0,0,.28) 72%,transparent)}
  .sg-cue.sg-center::before{background:radial-gradient(70% 50% at 50% 50%,rgba(0,0,0,.72),transparent)}
 }

 /* Flat version. Shown when the viewer has asked for reduced motion, or if scripting is off. */
 .sg-only-flat{display:none}
 body.sg-flat-on .sg-only-flat{display:block}
 body.sg-flat-on .sg-only-scroll{display:none}
 .sg-flat{display:none;max-width:760px;margin:0 auto;padding:0 20px 14vh}
 .sg-fs{margin:0 0 44px}
 .sg-fs img{width:100%;border-radius:12px;display:block;border:1px solid #1c2024}
 .sg-fs figcaption{padding:18px 2px 0}
 .sg-fl{margin:0 0 44px}
 .sg-flat .sg-live{position:static;opacity:1;pointer-events:auto;display:block;padding:0;background:none;overflow:visible}
 .sg-flat .sg-live-in{max-width:none}
 body.sg-flat-on .sg-stage,body.sg-flat-on .sg-track,body.sg-flat-on .sg-cue,body.sg-flat-on .sg-hud,
 body.sg-flat-on .sg-snd,body.sg-flat-on #sg-livewrap{display:none!important}
 body.sg-flat-on .sg-flat{display:block}
 @media (prefers-reduced-motion:reduce){.sg-hint span{animation:none}.sg-card{animation:none}}

 /* The first screen should be the film, not a paragraph about it. The opening frame sits behind
    the title under a scrim heavy enough to keep the words legible, so the page opens on the desk at
    night rather than on black. */
 #sgfilm .sg-intro{background-image:url(/static/signal/poster.jpg);background-size:cover;background-position:center;
  position:relative;isolation:isolate}
 #sgfilm .sg-intro::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,8,9,.62),rgba(7,8,9,.80) 55%,rgba(7,8,9,.96))}
 #sgfilm .sg-intro>div{position:relative;z-index:1}
 #sgfilm .sg-skip{color:#c8cfd4;background:rgba(0,0,0,.62);border-color:#39434c}

 /* Embedded in a page that continues below. Everything fixed to the viewport has to disappear the
    moment the film is no longer the thing being looked at, or it floats over the rest of the site. */
 #sgfilm .sg-cue,#sgfilm .sg-live,#sgfilm .sg-hud,#sgfilm .sg-snd{visibility:hidden}
 #sgfilm.sg-seen .sg-cue,#sgfilm.sg-seen .sg-live,#sgfilm.sg-seen .sg-hud,#sgfilm.sg-seen .sg-snd{visibility:visible}

 /* Someone who has skipped the film once should not have to scroll past it again. They get a
    still, the title, and a way back in. */
 .sg-skip{display:inline-block;margin-top:18px;z-index:8;
  font:inherit;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#8d99a2;background:rgba(0,0,0,.5);border:1px solid #232a31;border-radius:999px;
  padding:11px 18px;cursor:pointer;min-height:44px;text-decoration:none;display:inline-block}
 .sg-skip:hover{color:#e8eaec;border-color:#3a444d}
 #sgfilm.sg-folded .sg-stage{height:62vh;position:relative}
 #sgfilm.sg-folded .sg-track,#sgfilm.sg-folded .sg-cue,#sgfilm.sg-folded .sg-hud,#sgfilm.sg-folded .sg-snd,
 #sgfilm.sg-folded .sg-live,#sgfilm.sg-folded .sg-intro .sg-hint,#sgfilm.sg-folded .sg-outro,
 /* nothing to skip, and nothing scrolls, so neither the skip link nor the sentence about the
    playhead makes sense while the film is put away */
 #sgfilm.sg-folded .sg-skip,#sgfilm.sg-folded .sg-only-scroll{display:none}
 #sgfilm.sg-folded .sg-intro{min-height:0;padding:9vh 24px 6vh}
 .sg-unfold{display:none;font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;
  color:#0b0e11;background:#7fd4a0;border:0;border-radius:999px;padding:14px 24px;cursor:pointer;
  min-height:48px;margin-top:22px}
 #sgfilm.sg-folded .sg-unfold{display:inline-block}