* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: var(--step-0); line-height: 1.5; }
h1, h2, h3 { line-height: 1.05; letter-spacing: -0.02em; font-weight: 650; margin: 0; }
a { color: var(--accent); }
.scrub-poster, .scrub-canvas { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
.scrub-poster { z-index: 0; }
.scrub-canvas { z-index: 1; opacity: 0; transition: opacity .2s ease; }
.scrub-ready .scrub-canvas { opacity: 1; }

/* signature device: a glassy panel that sets text off from the cinematic background */
.panel {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  backdrop-filter: blur(14px) saturate(125%);
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* structural label — mono, encodes the "instrumentation" vernacular */
.eyebrow {
  margin: 0;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.82rem;
  color: var(--accent);
}