@layer world {
  /* Structural and quiet. The rule is the device; motion is almost absent,
     which is the point — this is the page that has to look dependable. */
  :root {
    --surface:   #14161A;
    --surface-2: #1F232A;
    --ink:       var(--sf-chalk);
    --ink-quiet: var(--sf-grey-300);
    --rule:      color-mix(in oklab, var(--sf-chalk) 20%, transparent);

    --display-wdth: 100;
    --display-wght: 700;
    --display-tracking: -.02em;

    --ease-world:   cubic-bezier(.4, 0, .2, 1);
    --dur-assemble: .5s;
    --dur-reveal:   .5s;
  }

  .hero__frame { clip-path: inset(0 calc(100% - var(--frame-reveal)) 0 0); }

  .piece--rule { bottom: 14%; left: 6%; width: min(50%, 24rem); }
  .piece--rule rect { fill: var(--accent); }
}