/* The rules of the device pf-keypad (src/devices/pf-keypad.js). index.html loads this file after src/tokens.css, so at the same
   specificity a rule of this file wins over a rule of tokens.css. */
pf-keypad { --color: #dedbd7; --radius-device: .9; --keybed: #6f6b67; --height: 1.8; }   /* light gray plastic, a deep case, and the dark well of the cells */
pf-keypad pf-key { --color: #d6d3d0; --mark: #fdfcfa; --radius: .2; --gap: .12; --label-size: .78; --legend-weight: 300; --legend-y: .508; --icon-size: .25; }   /* thin digits in the middle, and icons a quarter of the top */
pf-keypad .base { --color: #d6d3d0; --radius-device: .2; --height: .35; --reflect: 0; }   /* the square base of the knob, as high as a key; it bounces no light into the gap at the right of the OLED */
pf-keypad pf-knob { --color: #d9d6d3; --mark: #ffffff; --reflect: 1; }
/* The well of the cells: first in the markup and in a stacking context of its own (z-index 1), so the shadows of the parts
   fall on it, as on the case. It takes no pointer: its stacking context lies over the keys, which take a click with no
   z-index. Its corners are the corners of the holes in it plus its band: .46 = .34 + .12 at the OLED and the base, .44 =
   .32 + .12 at the keys. It is as flat as their seats (.01), so its floor lies with theirs on the GPU, and it takes no
   occlusion, so its band has the tone of the gap of a key; its wall has the light of the old paint. */
pf-keypad > .well { z-index: 1; pointer-events: none; --radius: .46 .46 .44 .44; --seat-depth: .01; --seat-wall: .3 .5; --occlusion: 0; }
pf-keypad .screen-hole { --edge-width: var(--seat-edge); --radius: .34; }   /* the cut of the OLED: a lit wall as wide as the wall of the hole of a key, and the corner of the glass plus the gap, .34 = .2 + .14 */
/* The OLED: black glass, and pixels too fine to see, so its text stays smooth at each zoom, as on pf-lcd. Its text has the
   light of the ink of pf-lcd (#f2f2f2 at .86 over the glass), its black is the glass, and the rim of the cut shades it. */
pf-keypad .screen[variant] { --color: #0a0a0b; --ink: #dcdcdc; --radius: .2; --resolution: 436 211; --subpixels: smooth; --black-level: .047; --sink: .35; }