@layer components {
   body > main,
   .discograph-nav {
      inline-size: min(100% - 2 * var(--edge), 90rem);
      margin-inline: auto;
   }

   .discograph-nav {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--gap);
      padding-block: var(--step-0);
      border-block-end: 1px solid var(--rule);
   }

   .discograph-nav nav,
   .discograph-controls,
   .discograph-search {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: var(--step--1);
   }

   .discograph-panel {
      display: grid;
      gap: var(--step-0);
      padding-block: var(--step-2);
   }

   .discograph-facts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
      gap: var(--step-0);
      max-inline-size: 42rem;
   }

   .discograph-facts div {
      padding-block: var(--step--1);
      border-block-start: 1px solid var(--rule);
   }

   .discograph-facts dt,
   .discograph-meta {
      color: var(--ink-mute);
      font-family: var(--font-mono);
      font-size: var(--step--1);
   }

   .discograph-facts dd {
      font-size: var(--step-2);
      font-variant-numeric: tabular-nums;
   }

   .discograph-search input {
      min-inline-size: min(22rem, 70vi);
   }

   .discograph-flash {
      padding-inline-start: var(--step-0);
      border-inline-start: 0.2rem solid var(--red);
   }

   .discograph-controls {
      padding-block-end: var(--step-0);
      border-block-end: 1px solid var(--rule);
   }

   .discograph-fegefeuer {
      font-size: var(--step--1);
   }

   .discograph-fegefeuer meter {
      inline-size: 5rem;
   }

   .discograph-signals {
      display: grid;
      gap: var(--step--2);
      min-inline-size: 24rem;
   }

   .discograph-signals div {
      border-block-start: 1px solid var(--rule);
      padding-block-start: var(--step--2);
   }

   .discograph-signals dd {
      overflow-wrap: anywhere;
   }
}

@layer components {
   figure.simulation[data-live] > pre.mermaid {
      display: none;
   }

   div.simulation {
      display: grid;
      gap: var(--step-0);
   }

   .simulation-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: start;
      gap: var(--step-0);
      font-size: var(--step--1);
   }

   .simulation-controls fieldset {
      display: grid;
      gap: var(--step--2);
      border: 1px solid var(--rule);
      padding: var(--step--1);
   }

   .simulation-controls legend,
   .simulation-stats label {
      color: var(--ink-mute);
      font-family: var(--font-mono);
      font-size: var(--step--1);
   }

   .simulation-controls textarea {
      font-family: var(--font-mono);
      min-inline-size: min(28rem, 80vi);
   }

   .simulation-schemes input {
      font-size: var(--step-1);
      text-align: center;
   }

   .simulation-stats {
      display: flex;
      flex-wrap: wrap;
      gap: var(--step-1);
   }

   .simulation-stats output {
      display: block;
      font-size: var(--step-2);
      font-variant-numeric: tabular-nums;
   }

   .simulation-stage {
      inline-size: 100%;
      block-size: auto;
      border: 1px solid var(--rule);
      background: var(--paper-2);
   }

   .simulation-edge {
      stroke: var(--rule);
      stroke-dasharray: 4 6;
   }

   .simulation-mark {
      font-size: 2rem;
      text-anchor: middle;
   }

   .simulation-mothership .simulation-mark {
      font-size: 2.6rem;
   }

   .simulation-name {
      fill: var(--ink-mute);
      font-family: var(--font-mono);
      font-size: 0.8rem;
      text-anchor: middle;
   }

   .simulation-statement {
      fill: var(--ink);
      font-size: 1.1rem;
      text-anchor: middle;
   }

   .simulation-invader {
      fill: var(--red);
   }

   .simulation-hit .simulation-mark {
      fill: var(--gold);
   }
}