.native-scene { --scene-accent: #fff; --scene-ink: #ededed; --scene-ground: #080808; display: block; width: 100%; height: auto; font-family: Mono, monospace; font-weight: 400; letter-spacing: 0; color: var(--scene-ink); }
.native-scene text { fill: currentColor; stroke: none; }
.native-scene .native-muted { fill: #929292; }
.native-scene .native-note { fill: var(--scene-accent); stroke: none; }
.native-scene .native-empty { fill: none; stroke: #484848; stroke-width: .75; }
.native-scene .native-mod { fill: none; stroke: var(--scene-accent); stroke-width: .75; }
.native-scene .native-cutout { fill: var(--scene-ground); stroke: none; }
.native-scene .native-line, .native-scene .graph-wire { fill: none; stroke: var(--scene-accent); stroke-width: 1.25; }
.native-scene .graph-control-wire { fill: none; stroke: #aaa; stroke-width: 1.25; }
.native-scene .native-rule { fill: none; stroke: #393939; stroke-width: 1; }
.native-scene .graph-card, .native-scene .graph-socket { fill: #0b0b0b; stroke: var(--scene-accent); stroke-width: 1; }
.native-scene .graph-socket { stroke-width: 1.25; }
.native-scene .native-token { fill: #171717; stroke: #444; stroke-width: .5; }
.native-scene .native-selected { fill: var(--scene-accent); stroke: none; }
.native-scene .native-inverse { fill: #080808; }
.native-scene .graph-grid { fill: url(#native-graph-dots); stroke: none; }
.sequence-crop { aspect-ratio: auto; padding: 22px 18px 6px; background: #080808; }
.sequence-media { border-inline: 0; border-color: var(--line); }
.sequence-media figcaption { padding-inline: 0; }
.scene-narrow { display: none; }
.arrangement .graph-scene { overflow: visible; }
@media(max-width:600px) {
  .sequence-crop { padding: 12px 0 0; }
  .scene-wide { display: none; }
  .scene-narrow { display: block; }
  .sequence-media figcaption { gap: 12px; }
}