@layer world {
  /* Floodlight night. Ink ground, the footage is the only light source.
     A skin overrides token VALUES only — never adds selectors — so it cannot
     collide with component rules no matter how they are written. */
  :root {
    --surface:   var(--sf-ink-900);
    --surface-2: var(--sf-ink-600);
    --ink:       var(--sf-chalk);
    --ink-quiet: var(--sf-grey-300);
    --rule:      color-mix(in oklab, var(--sf-chalk) 14%, transparent);

    --display-wdth: 88;        /* condensed: aggressive, stadium-board */
    --display-wght: 900;
    --display-tracking: -.035em;

    --ease-world:   cubic-bezier(.2, .9, .1, 1);   /* snaps */
    --dur-assemble: .34s;
    --dur-reveal:   .40s;
    --radius: 0px;
  }

  /* A hard diagonal wipe — the frame opens like a swipe transition. */
  /* The lead on the bottom edge scales out with the wipe, so at 100% both
     corners land on 100% and the frame is a full rectangle — no permanently
     clipped footage. Mid-wipe the two edges differ, which is the diagonal. */
  .hero__frame {
    clip-path: polygon(
      0 0,
      var(--frame-reveal) 0,
      calc(var(--frame-reveal) * 1.12 - 12%) 100%,
      0 100%
    );
  }

  .piece--scoreline { top: 6%;  left: 4%;  width: clamp(140px, 18vw, 260px); }
  .piece--clock     { top: 6%;  right: 4%; width: clamp(80px, 10vw, 140px); }
  .piece--chevron   { bottom: 10%; right: 6%; width: clamp(40px, 6vw, 80px); }
  .piece--statbug   { bottom: 8%; left: 4%; width: clamp(100px, 13vw, 180px); }
  .piece rect { fill: var(--accent); }
  .piece--chevron path { fill: var(--sf-chalk); mix-blend-mode: screen; }
}