.ctl{display:grid;grid-template-columns:32px minmax(0,1fr);grid-column-gap:8px;column-gap:8px;--top:15px;--up:18px;--band:7px;--dn:18px;--ax:calc(var(--top) + var(--up) + var(--band) / 2);--gap:6px;--gap-so:6px;--so-w:14px}.ctl .sd{display:grid;grid-template-rows:var(--top) var(--up) var(--band) var(--dn);font-family:var(--f-mono);font-size:var(--s2);font-weight:600;color:var(--ink-2);line-height:1}.ctl .sd .u{grid-row:2;align-self:center}.ctl .sd .d{grid-row:4;align-self:center}.ctl .ctr{position:relative;display:grid;grid-template-columns:var(--cols);height:calc(var(--top) + var(--up) + var(--band) + var(--dn))}.ctl .cs{position:relative;min-width:0}.ctl .cs .pl,.ctl .cso .pl{position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:var(--s2);color:var(--ink-3);line-height:13px}.ctl .cso .pl{right:0;text-align:center}.ctl .cs .bd{position:absolute;left:0;right:0;top:calc(var(--top) + var(--up));height:var(--band);background:var(--ice-2);border:1px solid var(--line)}.ctl .cs .fl{position:absolute;left:-1px;top:-1px;bottom:-1px;width:calc(var(--at,100%) + 1px);background:var(--tl-fill)}.ctl .cs.ot .bd{background:transparent;border:1px dashed var(--ink-3)}.ctl .cs.ot .fl{display:none}.ctl .cso{position:relative}.ctl .cso .ring{position:absolute;left:50%;top:calc(var(--ax) - 6px);width:12px;height:12px;margin-left:-6px;border:1.5px dashed var(--ink-3);border-radius:50%}.ctl .cso.done .ring{border-style:solid;border-color:var(--tl-fill);background:var(--tl-fill)}.ctl .ci{position:relative}.ctl .cg{position:absolute;left:var(--x);width:0;border-left:1px solid var(--ink-2);z-index:2}.ctl .cg.s1{--st:3px}.ctl .cg.s2{--st:10px}.ctl .cg.up{top:calc(var(--top) + var(--up) - var(--st));height:var(--st)}.ctl .cg.dn{top:calc(var(--top) + var(--up) + var(--band));height:var(--st)}.ctl .cg:after{content:"";position:absolute;left:-4.5px;width:8px;height:8px;border-radius:50%;background:var(--c);border:1.5px solid var(--ink);box-sizing:border-box}.ctl .cg.up:after{top:-8px}.ctl .cg.dn:after{bottom:-8px}.ctl .cph{position:absolute;left:var(--at);top:0;bottom:0;width:0;margin-left:-1px;border-left:2px solid var(--red);z-index:3}.ctl .ci .cph{left:50%}.ctl .cph .spot{position:absolute;top:calc(var(--ax) - 6.5px);left:-7.5px;width:13px;height:13px;background:var(--rb,var(--ice))}.ctl .cpw{position:absolute;left:var(--at);width:var(--w);top:calc(var(--top) + var(--up) - 3px);height:calc(var(--band) + 6px);background:repeating-linear-gradient(135deg,var(--hatch) 0 2px,transparent 2px 5px);border:1px solid var(--hatch);z-index:1}