@layer work {
/* ═══════════════════════════════════════════════════════════════════
   Where the site meets the work.

   Everything inside .frame belongs to Signal Studio and keeps the type,
   colour and spacing it was built with. These rules only place it: they
   set the ground the work sits on and undo the couple of page-level
   assumptions the original shells made. Nothing here restyles a
   component.
   ═══════════════════════════════════════════════════════════════════ */

.framed { margin-block: var(--s6); }

/* the dark shell the films and instruments were composed against */
.frame[data-shell="dark"] { background: #0e0e0e; border-color: rgba(255 255 255 / 0.14); }
.frame[data-shell="light"] { background: #ffffff; border-color: rgba(20 20 20 / 0.12); }

/* the original shells put the film inside a page grid; here it is
   simply the width of the frame */
.frame .pv-host { display: block; padding: var(--s5); }
.frame .pv-film { max-width: none; }
.frame .pv-stage { margin-inline: auto; }

/* the instrument was a column in a two-column gallery */
.frame .in-host { max-width: none; margin-inline: auto; padding: var(--s5); }
.frame.sys-dark .in-host { max-width: 560px; }

/* the film player's own controls sit outside the staged interface */
.frame .pv-playbar { flex-wrap: wrap; }

@media (max-width: 640px) {
  .frame .pv-host, .frame .in-host { padding: var(--s3); }
}

/* Diagrams ─────────────────────────────────────────────────────────── */
.diagram-frame { padding: var(--s6); background: var(--paper); overflow-x: auto; }
.diagram { margin: 0; max-width: 640px; margin-inline: auto; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram-source { margin-top: var(--s3); }
.diagram-source summary { cursor: pointer; font-size: var(--t-small); color: var(--ink-2); padding-block: var(--s2); }
.diagram-source summary::marker { color: var(--graphite); }
.diagram-source pre {
  margin-top: var(--s3); padding: var(--s5); overflow-x: auto;
  background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: var(--r-md);
  font-size: var(--t-machine); line-height: 1.7; color: var(--ink-2);
}

/* An empty frame, for the components room */
.frame-demo { display: grid; place-items: center; min-height: 160px; }
.frame-demo-note { font-size: var(--t-small); color: var(--graphite); }
}