.instrument{margin:1.5rem 0 1rem}.bezel{--bz:light-dark(#262d33,#2b333a);--legend:#c3ccd4;--key:#333c44;--key-hi:#4a555f;--key-ink:#e6edf3;--key-edge:#12171b;background:var(--bz);color:var(--legend);border-radius:10px;padding:.6rem .75rem .75rem;box-shadow:inset 0 1px #ffffff12,0 1px 2px #00000040,0 14px 28px -16px #0000008c}.legend-strip{letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap;justify-content:space-between;gap:.25rem 1rem;margin:0;padding:0 .2rem .45rem;font-size:.75rem;font-weight:700;display:flex}.legend-strip span:last-child{letter-spacing:.04em;font-weight:400}.race-scenario h3,.race-run h4{color:var(--key-ink);font-size:var(--size-3);letter-spacing:.06em;text-transform:uppercase;margin:1rem .2rem .4rem}.race-scenario h3{font-size:.95rem}.race-intro{font-size:var(--size-3);margin:0 .2rem .5rem}.race-steps{font-size:var(--size-3);margin:.4rem .2rem .75rem}.race-steps summary{cursor:pointer;color:var(--key-ink);font-weight:700}.race-steps ol{margin:.5rem 0 0;padding-left:1.5rem}.race-steps li{margin-bottom:.6rem}.race-steps p{margin:0 0 .3rem}.race pre{color:var(--lane-main);font-family:var(--mono);tab-size:8;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font-size:.75rem;line-height:1.5}.out-tag{color:#95a4b1;letter-spacing:.08em;text-transform:uppercase;margin:.5rem 0 .2rem;font-size:.75rem;font-weight:700}.race.running .race-scenario:not(.active),.race.running .race-run:not(.active),.race.running .race-scenario h3,.race.running .race-run h4,.race.running .race-intro,.race.running .race-steps,.race [hidden]{display:none}.glass{background:var(--screen);border-radius:4px;padding:.4rem;box-shadow:inset 0 0 0 1px #000,inset 0 3px 12px #000000d9}.glass svg{width:100%;height:auto;display:block}.glass .narrow{display:none}.trace text{font-family:var(--mono);fill:var(--trace-label);font-size:12px}.glass .narrow text{font-size:11px}.trace .grat{fill:none;stroke:var(--grat);stroke-width:1px}.trace .cursor{fill:var(--lane-main);opacity:0}.trace.stepping .cursor.current{opacity:.07}.trace .line,.trace .ci,.trace .join,.trace .cross{fill:none;stroke-width:2.5px}.trace .ci.queue{stroke-dasharray:6 3}.trace .join{stroke-width:2px;stroke-dasharray:3 3}.trace .cross{stroke-width:3px;stroke-linecap:round}.trace .dot{fill:var(--lane-main)}.trace path.lane-0{stroke:var(--lane-main)}.trace path.lane-1{stroke:var(--lane-a)}.trace path.lane-2{stroke:var(--lane-b)}.trace path.lane-3{stroke:var(--lane-c)}.trace text.lane-0{fill:var(--lane-main)}.trace text.lane-1{fill:var(--lane-a)}.trace text.lane-2{fill:var(--lane-b)}.trace text.lane-3{fill:var(--lane-c)}.trace text.lane-name{fill:var(--trace-label)}.trace path.alert{stroke:var(--refused)}.trace .line.alert{stroke-width:3px;stroke-dasharray:8 5}.trace circle.alert,.trace text.alert{fill:var(--refused)}.trace [data-step]{transition:opacity .18s ease-out}.trace.stepping [data-step].future{opacity:.14}@media (prefers-reduced-motion:reduce){.trace [data-step]{transition:none}}.readout{color:#aebcc8;min-height:9.5rem;font-size:var(--size-3);background:#0a0f13;border-radius:4px;margin-top:.5rem;padding:.6rem .75rem;box-shadow:inset 0 2px 6px #000000b3}.race-say{margin:0 0 .35rem}.keys{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.65rem;display:flex}.key-group{flex-wrap:wrap;gap:.5rem;display:flex}.key{background:var(--key);min-height:2.25rem;color:var(--key-ink);border:1px solid var(--key-edge);box-shadow:inset 0 1px 0 var(--key-hi), 0 2px 0 var(--key-edge);font:inherit;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border-radius:4px;align-items:center;gap:.4rem;padding:0 .8rem;font-size:.75rem;font-weight:700;display:inline-flex}.key:hover{background:#3b454e}.key:active{box-shadow:inset 0 1px 0 var(--key-hi), 0 1px 0 var(--key-edge);transform:translateY(1px)}.key[aria-disabled=true]{opacity:.45;cursor:default;transform:none}.key.pick:before{content:"";background:#4b5560;border-radius:1px;width:.5rem;height:.5rem;box-shadow:inset 0 1px 1px #0009}.key.pick[aria-pressed=true]{background:#1e2429;transform:translateY(1px);box-shadow:inset 0 2px 5px #000000a6}.key.pick[aria-pressed=true]:before{background:var(--sticker);box-shadow:0 0 0 1px var(--key-edge)}.counter{color:var(--legend);font-family:var(--mono);font-variant-numeric:tabular-nums;text-transform:uppercase;margin-left:auto;font-size:.8rem}.instrument figcaption{color:var(--ink-2);font-size:var(--size-3);margin-top:.5rem}@media (width<=30rem){.glass .wide{display:none}.glass .narrow{display:block}.bezel{padding:.5rem .5rem .6rem}}