/* The rules of the device pf-grid (src/devices/pf-grid.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-grid { --color: #36373d; --radius-device: .12; --ink: #9aa3b1; --grain: .35; }   /* a smooth matte case */
/* The print: thin words in the middle, a second line smaller and grayer, and the icons a little smaller than a third of the top. */
pf-grid pf-key { --color: #25262c; --radius: .06; --mark: #d2e1f5; --label-size: .3389; --legend-weight: 250; --legend-y: .4983; --legend-line: .8189; --legend-next-size: .2691; --legend-next-color: #b8c6da; --icon-size: .2963; }
pf-grid pf-key[legend*="|"] { --legend-y: .4824; }   /* two lines */
pf-grid pf-key.fn { --label-size: .319; --legend-y: .3451; --legend-line: .437; --legend-next-size: .2592; }   /* the low keys of the bottom row: the word near the top */
pf-grid .small { --label-size: .2592; --legend-y: .5081; }   /* shift and setup */
pf-grid [icon=chevron] { --label-size: .2691; --legend-y: .8084; --icon-size: .328; }   /* the keys of the right column: an arrow over the word */
pf-grid [label="capture midi"] { --mark: #ec5b62; --label-size: .2691; --legend-y: .8401; --icon-size: .3386; }   /* a red ring over the word */
pf-grid [label=play] { --mark: #3ddc84; }
pf-grid [label=mark] { --mark: #e6eef8; --icon-size: .8889; }
pf-grid [icon=dash] { --icon-size: .9333; }   /* the track keys */
pf-grid :is([icon=dot], [icon=dots]) { --icon-size: .09375; --icon-y: .6719; --icon-color: #b8c6da; } pf-grid [icon=dots] { --icon-size: .4167; }   /* the dots under volume and pan */
pf-grid pf-key.pad { --color: #c8c8ca; --radius: .1; }   /* smooth silicone */
pf-grid .pad[label="pad 28"] { --corner-shape: round round bevel round; --radius: .1 .1 .479 .1; } pf-grid .pad[label="pad 29"] { --corner-shape: round round round bevel; --radius: .1 .1 .1 .479; }   /* the four pads in the middle cut the corner that faces the middle */
pf-grid .pad[label="pad 36"] { --corner-shape: round bevel round round; --radius: .1 .479 .1 .1; } pf-grid .pad[label="pad 37"] { --corner-shape: bevel round round round; --radius: .479 .1 .1 .1; }
pf-grid pf-key > pf-led { --color: #7f8db0; --glow-core: .25; --glow: .5; }   /* the LED of a key that lights: the mode, the show and play */
pf-grid .pad > pf-led { --glow-core: .42; --glow: 0; }   /* with power, each pad lights in the --color of its LED, with no glow round it */
/* The light of each pad in the session mode, as the pads of the reference. */
pf-grid :is([label="pad 1"], [label="pad 2"], [label="pad 10"], [label="pad 12"], [label="pad 28"], [label="pad 33"], [label="pad 34"], [label="pad 44"], [label="pad 49"], [label="pad 50"], [label="pad 60"]) > pf-led { --color: #fea2a4; }
pf-grid :is([label="pad 4"], [label="pad 20"], [label="pad 36"], [label="pad 52"]) > pf-led { --color: #ffa6ff; }
pf-grid :is([label="pad 9"], [label="pad 17"], [label="pad 25"], [label="pad 41"], [label="pad 57"]) > pf-led { --color: #eea4ff; }
pf-grid :is([label="pad 18"], [label="pad 26"], [label="pad 42"], [label="pad 58"]) > pf-led { --color: #a8abfe; }
pf-grid :is([label="pad 19"], [label="pad 27"], [label="pad 35"], [label="pad 43"], [label="pad 51"]) > pf-led { --color: #f1c69a; }
pf-grid :is([label="pad 5"], [label="pad 13"], [label="pad 21"], [label="pad 37"], [label="pad 45"], [label="pad 61"]) > pf-led { --color: #e0fd84; }
pf-grid :is([label="pad 14"], [label="pad 22"], [label="pad 30"], [label="pad 46"], [label="pad 54"], [label="pad 62"]) > pf-led { --color: #cae291; }
pf-grid :is([label="pad 7"], [label="pad 8"]) > pf-led { --color: #84fa8e; }
pf-grid :is([label="pad 15"], [label="pad 23"], [label="pad 31"], [label="pad 39"], [label="pad 47"], [label="pad 55"], [label="pad 63"]) > pf-led { --color: #81f9c5; }
pf-grid :is([label="pad 16"], [label="pad 24"], [label="pad 40"], [label="pad 56"], [label="pad 64"]) > pf-led { --color: #9b9bff; }
pf-grid :is([label="pad 3"], [label="pad 6"], [label="pad 11"], [label="pad 29"], [label="pad 32"], [label="pad 38"], [label="pad 48"], [label="pad 53"], [label="pad 59"]) > pf-led { --color: #d8d8da; }