/* The keyboard (cx-keys.js), every device's: Matter / Field's (devices/matter-field/ui/style.css, .kb-*) made a part of
   its own, its colours the device's own through these variables (Matter / Field's as they stand, unless set) */
.cxk-board{--cxk-height:138px;--cxk-line:#3b4c56;--cxk-ground:#0f171b;--cxk-white:#2a3a43;--cxk-white-low:#1f2c33;--cxk-white-hover:#304551;--cxk-white-line:#33454e;--cxk-black:#0d1418;--cxk-black-low:#152027;--cxk-black-hover:#17242b;--cxk-black-line:#2c3b42;--cxk-held:#5b3d2b;--cxk-held-low:#3a2a21;--cxk-held-black:#6d4631;--cxk-held-black-low:#4a3122;--cxk-held-line:#d88d68;--cxk-glow-colour:#9fd0e2;--cxk-dot:#efa57e;--cxk-home:#ef9a73;--cxk-name:#8ea3ab;--cxk-letter:#c7d3d7;--cxk-letter-black:#9fb3bb;--cxk-focus:#ef9a7380;--cxk-font:var(--mono,ui-monospace,monospace);
 display:flex;align-items:stretch;gap:8px}
.cxk-oct{flex:none;width:34px;-webkit-tap-highlight-color:transparent;min-height:0;padding:0;display:grid;place-items:center;border:1px solid var(--cxk-line);border-radius:4px;background:transparent;color:inherit;cursor:pointer}
.cxk-oct svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cxk-oct:disabled{opacity:.35;cursor:default}
.cxk-keys{position:relative;flex:1;min-width:0;display:flex;height:var(--cxk-height);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline:none;border-radius:4px;border:1px solid var(--cxk-line);overflow:hidden;background:var(--cxk-ground)}
.cxk-keys:focus-visible{box-shadow:0 0 0 2px var(--cxk-focus)}
.cxk-key{position:relative;display:block;min-height:0;min-width:0;padding:0;margin:0;border-radius:0;appearance:none;box-shadow:none;font:inherit;letter-spacing:0;text-transform:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .06s,border-color .06s}
.cxk-key:disabled{opacity:.35;cursor:default}
.cxk-white{flex:1;border:0;border-right:1px solid var(--cxk-white-line);background:linear-gradient(var(--cxk-white),var(--cxk-white-low))}
.cxk-white:last-child{border-right:0}
.cxk-black{position:absolute;top:0;height:58%;z-index:2;border:1px solid var(--cxk-black-line);border-top:0;border-radius:0 0 3px 3px;background:linear-gradient(var(--cxk-black),var(--cxk-black-low))}
@media(hover:hover){.cxk-white:not(:disabled):hover{background:linear-gradient(var(--cxk-white-hover),var(--cxk-white-low))}.cxk-black:not(:disabled):hover{background:linear-gradient(var(--cxk-black-hover),var(--cxk-black-low))}}
.cxk-key.is-held{background:linear-gradient(var(--cxk-held),var(--cxk-held-low));border-color:var(--cxk-held-line)}
.cxk-black.is-held{background:linear-gradient(var(--cxk-held-black),var(--cxk-held-black-low))}
.cxk-glow{position:absolute;left:4px;right:4px;top:4px;height:3px;border-radius:2px;background:var(--cxk-glow-colour);opacity:var(--cxk-glow,0);transition:opacity .12s;box-shadow:0 0 8px var(--cxk-glow-colour)}
.cxk-key.is-sounding{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cxk-glow-colour) 35%,transparent)}
.cxk-dot{position:absolute;left:50%;bottom:9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--cxk-dot);opacity:0}
.cxk-black .cxk-dot{bottom:7px}
.cxk-key.in-key .cxk-dot{opacity:.9}
/* a voice's own note: a bar under its dot */
.cxk-key.is-home::after{content:"";position:absolute;left:22%;right:22%;bottom:3px;height:2px;border-radius:1px;background:var(--cxk-home)}
.cxk-name{position:absolute;left:0;right:0;bottom:21px;text-align:center;font:9px var(--cxk-font);color:var(--cxk-name);pointer-events:none}
.cxk-letter{position:absolute;left:0;right:0;top:12px;text-align:center;font:9px var(--cxk-font);color:var(--cxk-letter);opacity:0;pointer-events:none;transition:opacity .15s}
.cxk-black .cxk-letter{color:var(--cxk-letter-black)}
.cxk-keys:focus-within .cxk-letter{opacity:.75}
@media(hover:none){.cxk-letter{display:none}}
@media(max-width:720px){.cxk-board{--cxk-height:124px;gap:6px}.cxk-oct{width:28px}}
@media(prefers-reduced-motion:reduce){.cxk-key,.cxk-glow,.cxk-letter{transition:none}}