/* Controls and overlays */
.ch{display:flex;flex-wrap:wrap;gap:6px}
.ch button{height:32px;padding:0 12px;font-size:13px}
.ch button.on,#xt.on{background:#6cc3a62b;border-color:var(--acc);color:#d9f3ea}

#modes button[data-k=true],#modes button[data-k=false]{position:relative;flex:1 1 calc(50% - 3px);height:56px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:0 14px 0 18px;overflow:hidden;font-size:14px}
#modes button small{font-size:11.5px;font-weight:400;color:var(--mute)}
#modes button.on small{color:#a9d8c9}
#modes button[data-k=true]::before,#modes button[data-k=false]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
#modes button[data-k=true]::before{background:linear-gradient(#5fae6e,#3d78c2)}
#modes button[data-k=false]::before{background:linear-gradient(#ff5a6a,#8a2bb5)}

.sl{display:grid;grid-template-columns:84px 1fr 34px;gap:8px;align-items:center;margin:4px 0}
.sl span{font-size:12.5px;color:var(--mute)}
.sl output{text-align:right;font-size:12.5px}

#grid{position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(90deg,transparent calc(33.33% - .5px),#fff3 calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),#fff3 calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
 linear-gradient(transparent calc(33.33% - .5px),#fff3 calc(33.33% - .5px) calc(33.33% + .5px),transparent calc(33.33% + .5px) calc(66.66% - .5px),#fff3 calc(66.66% - .5px) calc(66.66% + .5px),transparent calc(66.66% + .5px))}

#xh{position:absolute;left:50%;top:50%;display:none;width:var(--xs,44px);height:var(--xs,44px);transform:translate(-50%,-50%);pointer-events:none;mix-blend-mode:difference;color:#fff}
#xh.plus,#xh.dot,#xh.ring{display:block}
#xh::before,#xh::after{content:"";position:absolute;background:currentColor}
#xh::before{left:50%;top:0;bottom:0;width:1px}
#xh::after{top:50%;left:0;right:0;height:1px}
#xh i{position:absolute;inset:0;border-radius:50%}
#xh.ring i{border:1px solid currentColor}
#xh.dot::before,#xh.dot::after{display:none}
#xh.dot i{inset:calc(50% - 3px);background:currentColor}

#ov{position:absolute;inset:0;display:grid;place-items:center;padding:24px;background:#000b;color:#cfdcd6;font-size:15px;text-align:center}
#ov:empty{display:none}
#ld{position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:99px;background:#000a;color:#cfdcd6;font-size:12px}
.nd{max-width:360px}
.nd b{display:block;margin-bottom:6px;font:700 21px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
.nd p{margin:0 0 16px;font-size:14px;color:#a9bbb3}

ul{list-style:none;margin:10px 0;padding:0}
li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:12.5px}
li em{color:var(--mute);font-style:normal}
li.done em{color:var(--acc)}li.err em{color:var(--bad)}li.run em{color:var(--cu)}
li button{height:24px;padding:0 6px;border:0;background:none;color:var(--mute)}
li.none{display:block;color:var(--mute)}

dialog{width:min(460px,92vw);padding:24px;border:1px solid var(--line2);border-radius:14px;background:var(--panel);color:var(--ink)}
dialog::backdrop{background:#000c}
dialog h2{margin:0 0 6px;font:700 22px "Bricolage Grotesque",sans-serif;letter-spacing:-.02em}
dialog h3{margin:18px 0 8px;font:600 15px "Bricolage Grotesque",sans-serif}
dialog p{margin:0 0 8px;color:var(--mute)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px;color:var(--mute)}
.keys dt{display:flex;gap:4px}
kbd{min-width:24px;padding:1px 6px;font:inherit;font-size:12px;text-align:center;color:var(--ink);background:var(--raise);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px}