.gg-pick{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin-bottom:1rem}
.gg-pick label{display:flex;gap:.4rem;align-items:center;color:var(--muted)}
.gg-pick input[type=color]{width:2.25rem;height:1.75rem;padding:2px;cursor:pointer}
.gg-pick select{height:1.75rem;padding:0 .3rem}
.gg-rows{display:grid;gap:.6rem}
.gg-row{display:grid;grid-template-columns:5.75rem minmax(0,1fr) max-content;gap:.75rem;align-items:center}
.gg-name{color:var(--fg)}
.gg-strip{display:block;width:100%;height:41px}
.gg-mid{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.gg-plane-wrap{display:flex;justify-content:center}
.gg-plane{display:block;border:1px solid var(--rule);background:color-mix(in srgb,var(--fg) 4%,transparent)}
.gg-key{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1rem;margin:.75rem 0 0;padding:0;list-style:none;color:var(--muted)}
.gg-key li{display:flex;align-items:center;gap:.4rem;margin:0}
.gg-key svg{width:28px;height:6px;overflow:visible}
.gg-key line{stroke:var(--fg);stroke-width:2;stroke-linecap:round}
.gg-key line.is-red{stroke:var(--redline)}
.gg-gamma{max-width:520px;display:block;margin:auto}
.gg-gamma text{font-size:12px;fill:var(--muted)}
@media (max-width:520px){
  .gg-row{grid-template-columns:minmax(0,1fr) auto;gap:.25rem .5rem}
  .gg-strip{grid-column:1/-1;grid-row:2}
}