/*
  The PaperKeys keyboard, drawn the way the app draws it.

  Sizes are the app's points at its default 600pt width, scaled to whatever
  width the keyboard gets: `--u` is one app point. Colors come from
  app/PaperKeys/UI/Theme/BuiltInThemes.swift.
*/

@property --pk-hue {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

/* Chameleon's two app colors, registered so a change of app fades between them */
@property --cham-a {
  syntax: "<color>";
  inherits: true;
  initial-value: #1e7bf5;
}

@property --cham-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #7a3cf0;
}

.pk {
  container-type: inline-size;
  position: relative;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.pk-frame {
  --u: calc(100cqw / 600);
  --gap: 6;
  --radius: 4;
  position: relative;
}

/* ---------- Theme tokens ---------- */

/*
  Each key kind (base letters, mod modifiers, act Return/Esc) reads these. They're set
  on .pk-frame, not .pk, because they're sized in --u, which resolves inside the container.
*/
.pk {
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.pk[data-theme="light"] > .pk-frame {
  --board: #e8e8eb;
  --board-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 40) rgb(0 0 0 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.12);
  --base-top: #fff; --base-bot: #f5f5f5; --base-hover: #f7f7f7; --base-press: #d9d9d9;
  --base-text: #1a1a1a; --base-border: rgb(0 0 0 / 0.08);
  --base-font: 400 calc(var(--u) * 15) var(--sans);
  --mod-top: #e6e6e6; --mod-bot: #d9d9d9; --mod-hover: #e6e6e6; --mod-press: #bfbfbf;
  --mod-text: #333; --mod-border: rgb(0 0 0 / 0.08);
  --mod-font: 500 calc(var(--u) * 12) var(--sans);
  --act-top: var(--mod-top); --act-bot: var(--mod-bot); --act-hover: var(--mod-hover); --act-press: var(--mod-press);
  --act-text: var(--mod-text); --act-border: var(--mod-border); --act-font: var(--mod-font);
  --key-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgb(0 0 0 / 0.12);
  --radius: 6; --gap: 4;
  --chip-text: rgb(51 51 51 / 0.9);
  --chip-font: 600 calc(var(--u) * 13) var(--sans);
  --accent: #0a84ff;
  --pill-text: #1a1a1a; --pill-dim: rgb(0 0 0 / 0.5);
}

.pk[data-theme="dark"] > .pk-frame {
  --board: #1c1c1c;
  --board-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 40) rgb(0 0 0 / 0.4), 0 0 0 0.5px rgb(255 255 255 / 0.08);
  --base-top: #3d3d3d; --base-bot: #333; --base-hover: #424242; --base-press: #595959;
  --base-text: #f2f2f2; --base-border: rgb(255 255 255 / 0.08);
  --base-font: 400 calc(var(--u) * 15) var(--sans);
  --mod-top: #2e2e2e; --mod-bot: #242424; --mod-hover: #333; --mod-press: #474747;
  --mod-text: #d9d9d9; --mod-border: rgb(255 255 255 / 0.06);
  --mod-font: 500 calc(var(--u) * 12) var(--sans);
  --act-top: var(--mod-top); --act-bot: var(--mod-bot); --act-hover: var(--mod-hover); --act-press: var(--mod-press);
  --act-text: var(--mod-text); --act-border: var(--mod-border); --act-font: var(--mod-font);
  --key-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgb(0 0 0 / 0.35);
  --radius: 6; --gap: 4;
  --chip-text: rgb(230 230 230 / 0.9);
  --chip-font: 600 calc(var(--u) * 13) var(--sans);
  --accent: #0a84ff;
  --pill-text: #f2f2f2; --pill-dim: rgb(255 255 255 / 0.5);
}

.pk[data-theme="paper"] > .pk-frame {
  --board: #ddd9cf;
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(50 40 15 / 0.22), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgb(50 40 15 / 0.12), 0 0 0 0.5px rgb(50 40 15 / 0.18);
  --base-top: #fcfbf7; --base-bot: #f5f3ec; --base-hover: #fcfbf7; --base-press: #eae6dc;
  --base-text: #1e2333; --base-border: rgb(50 40 15 / 0.12);
  --base-font: 400 calc(var(--u) * 16) var(--serif);
  --mod-top: #f0eee7; --mod-bot: #e7e4da; --mod-hover: #f0eee7; --mod-press: #dcd8cb;
  --mod-text: #41465a; --mod-border: rgb(50 40 15 / 0.12);
  --mod-font: 500 calc(var(--u) * 13) var(--serif);
  --act-top: #2c3e79; --act-bot: #1c2a58; --act-hover: #30437f; --act-press: #18244c;
  --act-text: #f7f5ef; --act-border: rgb(16 24 48 / 0.4);
  --act-font: 500 calc(var(--u) * 13) var(--serif);
  --act-rim: rgb(255 255 255 / 0.18);
  --key-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 0.5) rgb(140 131 111 / 0.55);
  --key-rim: rgb(255 255 255 / 0.75);
  --press-depth: 1.5;
  --radius: 4; --gap: 6;
  --chip-text: rgb(30 35 51 / 0.9);
  --chip-font: 600 calc(var(--u) * 14) var(--serif);
  --accent: #26376e;
  --pill-text: #1e2333; --pill-dim: rgb(30 35 51 / 0.55);
}

.pk[data-theme="keycap"] > .pk-frame {
  --radius: 5; --gap: 5;
  --press-depth: 2;
  --key-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 1.5) rgb(0 0 0 / 0.22);
  --base-font: 500 calc(var(--u) * 15) "Helvetica Neue", Helvetica, var(--sans);
  --mod-font: 500 calc(var(--u) * 10) "Helvetica Neue", Helvetica, var(--sans);
  --act-font: var(--mod-font);
  --chip-font: 700 calc(var(--u) * 13) "Helvetica Neue", Helvetica, var(--sans);
  --base-border: rgb(0 0 0 / 0.18); --mod-border: rgb(0 0 0 / 0.18); --act-border: rgb(0 0 0 / 0.18);
}

.pk[data-theme="keycap"][data-variant="beige"] > .pk-frame {
  --board: #c9c0aa;
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(60 50 30 / 0.28), 0 0 0 0.5px rgb(0 0 0 / 0.2);
  --base-top: #dcd3bf; --base-bot: #cfc5ae; --base-face: #f2ecde; --base-face-bot: #e9e2d0; --base-text: #3a352c;
  --mod-top: #928d82; --mod-bot: #858074; --mod-face: #b0ab9f; --mod-face-bot: #a6a195; --mod-text: #f3eee3;
  --act-top: #972d22; --act-bot: #872b1f; --act-face: #c2483a; --act-face-bot: #b54030; --act-text: #f7ede0;
  --key-rim: rgb(255 255 255 / 0.35);
  --chip-text: rgb(58 53 44 / 0.9);
  --accent: #c2483a;
  --pill-text: #3a352c; --pill-dim: rgb(58 53 44 / 0.6);
}

.pk[data-theme="keycap"][data-variant="studio"] > .pk-frame {
  --board: #b4b4b0;
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(0 0 0 / 0.25), 0 0 0 0.5px rgb(0 0 0 / 0.2);
  --base-top: #d4d4d0; --base-bot: #c9c9c5; --base-face: #f0f0ee; --base-face-bot: #e7e7e5; --base-text: #222326;
  --mod-top: #2f3034; --mod-bot: #26272b; --mod-face: #44454a; --mod-face-bot: #3c3d42; --mod-text: #e9e9e7;
  --act-top: #dc4e15; --act-bot: #ca420d; --act-face: #ff7038; --act-face-bot: #f76228; --act-text: #fff;
  --key-rim: rgb(255 255 255 / 0.35);
  --chip-text: rgb(34 35 38 / 0.9);
  --accent: #ff7038;
  --pill-text: #222326; --pill-dim: rgb(34 35 38 / 0.6);
}

.pk[data-theme="keycap"][data-variant="nightshade"] > .pk-frame {
  --board: #15121f;
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(0 0 0 / 0.45), 0 0 0 0.5px rgb(255 255 255 / 0.06);
  --base-top: #27213c; --base-bot: #201b31; --base-face: #3a3257; --base-face-bot: #332c4e; --base-text: #e4d7ff;
  --mod-top: #1d182c; --mod-bot: #171424; --mod-face: #2d2643; --mod-face-bot: #27213c; --mod-text: #b6a6df;
  --act-top: #b72f6c; --act-bot: #a6265f; --act-face: #ff74b0; --act-face-bot: #f5629f; --act-text: #2a0c1c;
  --key-rim: rgb(255 255 255 / 0.12);
  --chip-text: #e4d7ff;
  --accent: #ff74b0;
  --pill-text: #e4d7ff; --pill-dim: rgb(228 215 255 / 0.6);
}

.pk[data-theme="backlit"] > .pk-frame {
  --board: #0b0b0e;
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(0 0 0 / 0.5), 0 0 0 0.5px rgb(255 255 255 / 0.06);
  --base-top: #1c1c23; --base-bot: #131318; --base-hover: #1c1c23; --base-press: #24242d;
  --base-border: rgb(255 255 255 / 0.06);
  --base-font: 500 calc(var(--u) * 15) var(--sans);
  --mod-top: #19191f; --mod-bot: #111115; --mod-hover: #19191f; --mod-press: #24242d;
  --mod-border: rgb(255 255 255 / 0.06);
  --mod-font: 600 calc(var(--u) * 12) var(--sans);
  --act-top: var(--mod-top); --act-bot: var(--mod-bot); --act-hover: var(--mod-hover); --act-press: var(--mod-press);
  --act-border: var(--mod-border); --act-font: var(--mod-font);
  --key-rim: rgb(255 255 255 / 0.06);
  --text-press: #fff;
  --radius: 6; --gap: 4;
  --chip-text: #e9e9f0;
  --chip-font: 600 calc(var(--u) * 13) var(--sans);
  --accent: #6fd3ff;
  --pill-text: #e9e9f0; --pill-dim: rgb(233 233 240 / 0.5);
  animation: pk-hue 16s linear infinite;
}

/* The hue wave: each key's light depends on where it sits across the keyboard (--x) */
.pk[data-theme="backlit"] :is(.pk-key, .pk-chip, .pk-hist) {
  --lit: hsl(calc(var(--pk-hue) + var(--x, 0.5) * 259deg) 100% 62%);
  --base-text: var(--lit);
  --mod-text: var(--lit);
  --act-text: var(--lit);
  --accent: var(--lit);
  --key-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) color-mix(in srgb, var(--lit) 45%, transparent);
  --legend-glow: 0 0 calc(var(--u) * 4) var(--lit);
}

.pk[data-theme="backlit"] .pk-chip .pk-cap { --legend-glow: none; }

@keyframes pk-hue {
  to { --pk-hue: 360deg; }
}

.pk[data-theme="phosphor"] > .pk-frame {
  --glow: #3bff7c;
  --tube: #020904;
  --board: var(--tube);
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(0 0 0 / 0.5), 0 0 0 0.5px rgb(255 255 255 / 0.06);
  --base-top: color-mix(in srgb, var(--glow) 4%, transparent); --base-bot: var(--base-top);
  --base-hover: color-mix(in srgb, var(--glow) 12%, transparent); --base-press: var(--glow);
  --base-text: var(--glow); --base-border: color-mix(in srgb, var(--glow) 42%, transparent);
  --base-font: 400 calc(var(--u) * 15) var(--mono);
  --mod-top: var(--base-top); --mod-bot: var(--base-top); --mod-hover: var(--base-hover); --mod-press: var(--glow);
  --mod-text: color-mix(in srgb, var(--glow) 72%, transparent); --mod-border: color-mix(in srgb, var(--glow) 28%, transparent);
  --mod-font: 500 calc(var(--u) * 12) var(--mono);
  --act-top: var(--base-top); --act-bot: var(--base-top); --act-hover: var(--base-hover); --act-press: var(--glow);
  --act-text: var(--glow); --act-border: color-mix(in srgb, var(--glow) 85%, transparent);
  --act-font: 600 calc(var(--u) * 12) var(--mono);
  --border-width: 1; --act-border-width: 2;
  --key-shadow: 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--glow) 12%, transparent);
  --legend-glow: 0 0 calc(var(--u) * 4) color-mix(in srgb, var(--glow) 85%, transparent);
  --text-press: var(--tube);
  --radius: 3; --gap: 7;
  --chip-text: var(--glow);
  --chip-font: 500 calc(var(--u) * 13) var(--mono);
  --accent: var(--glow);
  --pill-text: var(--glow); --pill-dim: color-mix(in srgb, var(--glow) 55%, transparent);
}

.pk[data-theme="phosphor"][data-variant="amber"] > .pk-frame {
  --glow: #ffb224;
  --tube: #0c0700;
}

.pk[data-theme="chameleon"] > .pk-frame {
  --primary: var(--cham-a);
  --secondary: var(--cham-b);
  --on-primary: #fff;
  --board: #111115;
  --board-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 40) rgb(0 0 0 / 0.45), 0 0 0 0.5px rgb(255 255 255 / 0.08);
  --base-top: rgb(255 255 255 / 0.11); --base-bot: rgb(255 255 255 / 0.06); --base-hover: rgb(255 255 255 / 0.16);
  --base-press: color-mix(in srgb, var(--primary) 60%, transparent);
  --base-text: #f4f4f6; --base-border: rgb(255 255 255 / 0.09);
  --base-font: 400 calc(var(--u) * 15) var(--sans);
  --mod-top: rgb(255 255 255 / 0.06); --mod-bot: rgb(255 255 255 / 0.03); --mod-hover: rgb(255 255 255 / 0.11);
  --mod-press: var(--base-press);
  --mod-text: rgb(244 244 246 / 0.8); --mod-border: rgb(255 255 255 / 0.09);
  --mod-font: 500 calc(var(--u) * 12) var(--sans);
  --act-top: color-mix(in srgb, var(--primary) 92%, white); --act-bot: color-mix(in srgb, var(--primary) 80%, black);
  --act-hover: color-mix(in srgb, var(--primary) 88%, white); --act-press: color-mix(in srgb, var(--primary) 70%, black);
  --act-text: var(--on-primary); --act-border: rgb(255 255 255 / 0.15);
  --act-font: 600 calc(var(--u) * 12) var(--sans);
  --key-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2) rgb(0 0 0 / 0.3);
  --key-rim: rgb(255 255 255 / 0.08);
  --text-press: #fff;
  --radius: 6; --gap: 4;
  --chip-text: #ededf0;
  --chip-font: 600 calc(var(--u) * 13) var(--sans);
  --accent: var(--primary);
  --pill-text: #ededf0; --pill-dim: rgb(237 237 240 / 0.55);
  transition: --cham-a 0.9s ease, --cham-b 0.9s ease;
}

/* ---------- Suggestion bar ---------- */

/* The bar is its own transparent window above the keyboard: only the chips show */
.pk-bar {
  display: flex;
  height: calc(var(--u) * 42);
  margin-bottom: calc(var(--u) * 2);
  padding: 0 calc(var(--u) * (var(--gap) - 2));
}

.pk-chips {
  display: flex;
  flex: 1;
  min-width: 0;
}

.pk-chip,
.pk-hist {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  animation: pk-chip-in 0.18s ease-out both;
}

.pk-chip.is-phrase { flex-grow: 2; }

.pk-hist {
  flex: 0 0 calc(var(--u) * 42);
  animation: none;
}

@keyframes pk-chip-in {
  from { opacity: 0; transform: translateY(calc(var(--u) * 3)); }
}

/* ---------- Keyboard window ---------- */

.pk-board {
  position: relative;
  aspect-ratio: 600 / 251.5;
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * var(--gap)) calc(var(--u) * (var(--gap) - 2));
  border-radius: calc(var(--u) * 12);
  background: var(--board);
  box-shadow: var(--board-shadow);
  isolation: isolate;
  overflow: hidden;
  /* Swipes need the pointer to themselves */
  touch-action: none;
}

.pk-row {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 0 calc(var(--u) * 2);
}

/* A key's slot is the whole cell, gaps included, so a click between keys still lands */
.pk-key {
  --kind: base;
  flex: 0 0 calc(var(--u) * 40.5);
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  outline: none;
}

.pk-key.is-fill { flex: 1 1 0; }

/* ---------- Caps: the drawn key ---------- */

.pk-cap {
  --top: var(--base-top);
  --bot: var(--base-bot);
  --hover: var(--base-hover, var(--base-top));
  --press: var(--base-press);
  --text: var(--base-text);
  --border: var(--base-border);
  --face: var(--base-face);
  --face-bot: var(--base-face-bot);
  --bw: var(--border-width, 0.5);
  position: absolute;
  inset: calc(var(--u) * 2);
  display: grid;
  place-items: center;
  border-radius: calc(var(--u) * var(--radius));
  background: linear-gradient(var(--top), var(--bot));
  box-shadow:
    inset 0 0 0 calc(var(--u) * var(--bw)) var(--border),
    inset 0 calc(var(--u) * 0.75) 0 var(--key-rim, transparent),
    var(--key-shadow);
  color: var(--text);
  font: var(--base-font);
  line-height: 1;
  text-shadow: var(--legend-glow, none);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background 0.12s;
  pointer-events: none;
}

.pk-key[data-kind="mod"] .pk-cap,
.pk-hist .pk-cap {
  --top: var(--mod-top);
  --bot: var(--mod-bot);
  --hover: var(--mod-hover, var(--mod-top));
  --press: var(--mod-press);
  --text: var(--mod-text);
  --border: var(--mod-border);
  --face: var(--mod-face);
  --face-bot: var(--mod-face-bot);
  font: var(--mod-font);
}

.pk-key[data-kind="act"] .pk-cap {
  --top: var(--act-top);
  --bot: var(--act-bot);
  --hover: var(--act-hover, var(--act-top));
  --press: var(--act-press);
  --text: var(--act-text);
  --border: var(--act-border);
  --face: var(--act-face);
  --face-bot: var(--act-face-bot);
  --key-rim: var(--act-rim, var(--key-rim));
  --bw: var(--act-border-width, var(--border-width, 0.5));
  font: var(--act-font);
}

.pk-legend {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.3em;
  white-space: nowrap;
}

.pk-legend svg {
  width: 1.15em;
  height: 1.15em;
  overflow: visible;
}

.pk-key[data-icon] .pk-legend svg { width: 1.25em; height: 1.25em; }

@media (hover: hover) {
  .pk-key:hover .pk-cap,
  .pk-chip:hover .pk-cap,
  .pk-hist:hover .pk-cap {
    background: linear-gradient(var(--hover), var(--hover));
  }
}

.pk-key.is-down .pk-cap,
.pk-chip.is-down .pk-cap,
.pk-hist.is-down .pk-cap,
.pk-key.is-latched .pk-cap {
  background: var(--press);
  color: var(--text-press, var(--text));
  transform: translateY(calc(var(--u) * var(--press-depth, 0)));
  box-shadow: inset 0 0 0 calc(var(--u) * var(--bw)) var(--border);
}

.pk-key.is-latched .pk-cap {
  box-shadow: inset 0 0 0 calc(var(--u) * 1.5) var(--accent);
}

/* Paper: the press blooms in ink */
.pk[data-theme="paper"] .pk-key.is-down .pk-cap {
  box-shadow: inset 0 0 0 calc(var(--u) * 0.5) var(--border), inset 0 0 calc(var(--u) * 10) rgb(38 55 110 / 0.28);
}

/* Phosphor: pressed keys fill with phosphor, then fade back over 0.7s */
.pk[data-theme="phosphor"] .pk-cap {
  transition: background 0.7s ease-out, color 0.7s ease-out, box-shadow 0.7s ease-out;
}
.pk[data-theme="phosphor"] .pk-key.is-down .pk-cap,
.pk[data-theme="phosphor"] .pk-chip.is-down .pk-cap {
  transition: none;
  text-shadow: none;
  box-shadow: 0 0 calc(var(--u) * 12) var(--glow);
}

/* Backlit: a ring of light spreads from the pressed key */
.pk[data-theme="backlit"] .pk-key.is-down .pk-cap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 calc(var(--u) * 1.5) var(--lit);
  animation: pk-ripple 0.45s ease-out forwards;
}

@keyframes pk-ripple {
  to { box-shadow: 0 0 0 calc(var(--u) * 10) transparent; }
}

/*
  Keycap: a dished face inset on the skirt, legends top-left on modifiers. As in the app,
  the insets are fractions of the key's shorter side (about 36pt here): 3.5% top, 6% sides,
  10% bottom; the face takes 70% of the key's corner radius and is lit from the top center.
*/
.pk[data-theme="keycap"] .pk-cap::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 1.3) calc(var(--u) * 2.2) calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * var(--radius) * 0.7);
  background: radial-gradient(140% 170% at 50% 0%, color-mix(in srgb, var(--face) 93%, white), var(--face) 55%, var(--face-bot));
  box-shadow: inset 0 calc(var(--u) * 0.75) 0 var(--key-rim), 0 calc(var(--u) * 0.6) calc(var(--u) * 0.8) rgb(0 0 0 / 0.14);
}

.pk[data-theme="keycap"] .pk-key:hover .pk-cap::before {
  filter: brightness(1.04);
}

.pk[data-theme="keycap"] .pk-key[data-kind="mod"] .pk-cap,
.pk[data-theme="keycap"] .pk-key[data-kind="act"] .pk-cap {
  place-items: start start;
  padding: calc(var(--u) * 6) calc(var(--u) * 6.5);
}

.pk[data-theme="keycap"] .pk-key:not([data-kind="base"]) .pk-legend svg { width: 1.3em; height: 1.3em; }

.pk[data-theme="keycap"] .pk-chip .pk-cap,
.pk[data-theme="keycap"] .pk-hist .pk-cap { padding-bottom: calc(var(--u) * 2.3); }

.pk[data-theme="keycap"] .pk-chip.is-phrase .pk-cap {
  --face: color-mix(in srgb, var(--base-face) 86%, var(--accent));
  --face-bot: color-mix(in srgb, var(--base-face-bot) 86%, var(--accent));
}

/* Paper: fine grain on the board */
.pk[data-theme="paper"] .pk-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2 0 0 0 0 0.16 0 0 0 0 0.06 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Phosphor: a lit tube with scanlines over everything */
.pk[data-theme="phosphor"] .pk-board::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 140% at 50% 50%, color-mix(in srgb, var(--glow) 9%, transparent), transparent 70%);
}

.pk[data-theme="phosphor"] .pk-board::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.28;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.9) 0 1px, transparent 1px 3px);
}

/* Chameleon: frosted keys over a glow in the frontmost app's colors */
.pk[data-theme="chameleon"] .pk-board::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 22% 30%, color-mix(in srgb, var(--primary) 75%, transparent), transparent 70%),
    radial-gradient(50% 65% at 80% 75%, color-mix(in srgb, var(--secondary) 70%, transparent), transparent 70%);
  filter: blur(calc(var(--u) * 18));
}

.pk[data-theme="chameleon"] .pk-cap {
  -webkit-backdrop-filter: blur(calc(var(--u) * 8));
  backdrop-filter: blur(calc(var(--u) * 8));
}

/* ---------- Chips: drawn as calm keys ---------- */

.pk-chip .pk-cap,
.pk-hist .pk-cap {
  font: var(--chip-font);
  --text: var(--chip-text);
  padding: 0 calc(var(--u) * 6);
}

.pk-chip .pk-legend {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pk[data-theme="phosphor"] .pk-chip .pk-cap {
  box-shadow: none;
  border: calc(var(--u) * 1) dashed color-mix(in srgb, var(--glow) 42%, transparent);
}

.pk-chip.is-phrase .pk-cap {
  --top: color-mix(in srgb, var(--base-top) 90%, var(--accent));
  --bot: color-mix(in srgb, var(--base-bot) 90%, var(--accent));
}

/* The word a swipe just committed, or the one an autoplay click is aiming at */
.pk-chip.is-pending .pk-cap {
  --top: color-mix(in srgb, var(--base-top) 78%, var(--accent));
  --bot: color-mix(in srgb, var(--base-bot) 78%, var(--accent));
}

.pk[data-theme="paper"] .pk-chip.is-pending .pk-cap {
  --top: var(--base-top);
  --bot: var(--base-bot);
}
.pk[data-theme="paper"] .pk-chip.is-pending .pk-legend {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: calc(var(--u) * 1.5);
  text-underline-offset: calc(var(--u) * 3);
}

.pk[data-theme="keycap"] .pk-chip.is-pending .pk-cap,
.pk[data-theme="chameleon"] .pk-chip.is-pending .pk-cap {
  --top: var(--act-top);
  --bot: var(--act-bot);
  --face: var(--act-face);
  --face-bot: var(--act-face-bot);
  --text: var(--act-text);
}

.pk[data-theme="backlit"] .pk-chip.is-pending .pk-cap {
  --text: var(--lit);
  text-shadow: var(--legend-glow);
}

/* ---------- Swipe trail ---------- */

.pk-trail {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pk-trail path {
  fill: none;
  stroke: var(--accent);
  stroke-width: calc(var(--u) * 5);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}

.pk-trail.is-fading path {
  transition: opacity 0.35s ease-out;
  opacity: 0;
}

/* ---------- Voice pill: a strip of the board above the keyboard ---------- */

.pk-voice {
  position: absolute;
  left: 50%;
  bottom: calc(100% - var(--u) * 44);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  width: calc(var(--u) * 320);
  height: calc(var(--u) * 44);
  padding: 0 calc(var(--u) * 4);
  transform: translateX(-50%);
  border-radius: calc(var(--u) * 12);
  background: var(--board);
  box-shadow: var(--board-shadow);
  color: var(--pill-text);
  font: 500 calc(var(--u) * 12) var(--sans);
  font-variant-numeric: tabular-nums;
  animation: pk-chip-in 0.2s ease-out both;
}

.pk-voice[hidden] { display: none; }

.pk-frame.is-recording .pk-bar { visibility: hidden; }

.pk-voice .pk-key {
  flex: 0 0 calc(var(--u) * 52);
  height: calc(var(--u) * 36);
}

.pk-voice .pk-key[data-icon] { flex-basis: calc(var(--u) * 36); }

.pk-voice-dot {
  flex: none;
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: #ff3b30;
  animation: pk-blink 1.2s ease-in-out infinite;
}

@keyframes pk-blink {
  50% { opacity: 0.35; }
}

.pk-voice-wave {
  display: flex;
  align-items: center;
  flex: 1;
  height: 60%;
  gap: calc(var(--u) * 2);
}

.pk-voice-wave i {
  flex: 1;
  height: 12%;
  border-radius: calc(var(--u) * 2);
  background: var(--accent);
  opacity: 0.85;
  transition: height 0.1s;
}

.pk-voice-status {
  flex: none;
  min-width: calc(var(--u) * 34);
  color: var(--pill-dim);
}

.pk-voice.is-busy .pk-voice-wave,
.pk-voice.is-busy .pk-voice-dot { display: none; }

.pk-voice.is-busy .pk-voice-status {
  flex: 1;
  text-align: center;
}

/* ---------- Shortcut hint popover ---------- */

.pk-hint {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 8);
  transform: translate(-50%, calc(-100% - var(--u) * 8));
  border-radius: calc(var(--u) * 8);
  background: rgb(250 250 250 / 0.96);
  box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 18) rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.15);
  color: #1a1a1a;
  font: 600 calc(var(--u) * 12) var(--sans);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.pk-hint small {
  color: rgb(0 0 0 / 0.5);
  font: 500 calc(var(--u) * 11) var(--sans);
}

.pk-hint[hidden] { display: none; }

/* ---------- Pointer that plays the demo ---------- */

.pk-pointer {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: calc(var(--u) * 17);
  height: auto;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35));
  transition: transform 0.26s cubic-bezier(0.3, 0.7, 0.2, 1), opacity 0.3s;
}

.pk-pointer.is-on { opacity: 1; }
.pk-pointer.is-clicking { scale: 0.88; }

@media (prefers-reduced-motion: reduce) {
  .pk[data-theme="backlit"] > .pk-frame { animation: none; }
  .pk-cap,
  .pk-chip,
  .pk-voice { transition: none; animation: none; }
  .pk-pointer { transition: none; }
}