/* The rules of the device pf-keyboard (src/devices/pf-keyboard.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-keyboard { --color: color-mix(in srgb, var(--aluminum), black 14%); --finish: 1 .35;
  --hairline: 1; --edge-shape: round; --edge-width: .12; --edge-depth: .12; }   /* bead-blasted aluminum, as the photo: a mid gray, a narrow round edge and a dark line round it */
pf-keyboard[material] { --texture: cloud .2 2, grain; --texture-amount: .12; }   /* a fine soft grain, as the photo at the size of the screen; [material] beats the rule of the material */
/* The keybed: a cut first in the markup, in a stacking context of its own at z-index 0, so the keycaps, after it in the
   markup, lie over it; a keycap is a stacking context (container-type), so a well at z-index 1 lies over the keycaps. It
   takes no pointer, so a click on it moves the keyboard, as on the case. Its outline is the icon keybed (icons.js): its band
   is as wide as the band between two keys, .224 = .112 + .112, and its chamfer lip (.14 wide, LIP of pf-keyboard.js) lies out
   of that band; its corners are the corner of a cap plus the band and the lip, .515 = .151 + .224 + .14. Its floor is .4 deep, and its rim shades the floor at .8 (.5 of a cut, by --shadow 1.6), with no occlusion;
   its wall is .1 wide, in the light .55 .5, as the old paint of the keybed. */
pf-keyboard > .well { z-index: 0; pointer-events: none; --seat-depth: .4; --shadow: 1.6; --occlusion: 0; --seat-wall: .55 .5; --edge-shape: chamfer; --edge-width: .14; --edge-depth: .3; }
pf-keyboard { --accent: #ff5f00; }   /* the orange of the photo, with no blue in it */
pf-keyboard pf-key[label=power] { --color: #ff4500; --radius: .12; }   /* the power button: a redder orange than the keys, with small round corners, as the photo */
pf-keyboard pf-keycap { --ink: #4d4f51; }   /* the legends of the photo: a darker gray than the keycap of the library */
pf-keyboard pf-knob { --color: #19191a; --mark: #19191a; }   /* black spun knobs with no mark: the teeth show the turn */
pf-keyboard pf-knob[variant=knurl][spun] .cap { --spun: .25 plain .5; }   /* black anodized: deep rings and a narrow bow tie, as the photo */