/* The keyboard mock. The block between the KBD-CSS markers is the
   production one, unchanged, so the theme gallery can keep splicing it; the
   rules after it add what the live demo needs. */
:root {
  --kb-board-a: #161618;
  --kb-board-b: #161618;
  --kb-key: #3c3c3c;
  --kb-special: #3c3c3c;
  --kb-enter: #3c3c3c;
  --kb-enter-text: #ffffff;
  --kb-text: #ffffff;
  --kb-hint: rgba(255,255,255,0.55);
  --kb-active: #4facfe;
  --kb-trail: rgba(94,200,255,0.85);
  --ink-on-grad: #04070f;
  --tint-blue-40: rgba(79,172,254,0.40);
}

/* KBD-CSS-BEGIN - spliced into themes.html by scripts/build_theme_gallery.py.
   Everything between the markers must depend only on --kb-* variables, so the
   gallery can render a board by setting them and nothing else. */
/* the CSS keyboard - shared by hero and theme lab. Faithful to the app:
   42pt keycaps, 12.15pt row gap, 6pt key gap, 42pt suggestion band, 4pt
   corner radius, 22pt letters, 10pt long-press hints - all x 0.81 for the
   316px stand-in screen. */
.kbd {
  position: relative;
  background: var(--kb-board-img, linear-gradient(180deg, var(--kb-board-a), var(--kb-board-b)));
  /* For the gallery's photo themes, whose --kb-board-img is a url() rather
     than a gradient: without these it would tile at its intrinsic size. Inert
     for a gradient, which fills its box either way. */
  background-size: cover;
  background-position: center;
  padding: 3px 2.4px 8px;
  user-select: none;
  transition: background 0.4s ease;
  font-family: var(--kb-font, inherit);
}
.kbd .sugg {
  display: flex;
  align-items: stretch;
  margin: 0 2.4px 5px;
  height: 34px;
  /* The continuous bar: one fill behind the whole row. Unset on the homepage's
     own keyboards, so they are untouched. */
  background-color: var(--kb-sugg-strip, transparent);
  border-radius: var(--kb-key-radius);
  /* 2pt in the app, x 0.81 for this stand-in screen. 0 when the bar is
     continuous, which is what makes it continuous. */
  gap: var(--kb-sugg-gap, 0);
}
.kbd .sugg .arrow {
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kb-text);
  /* Theme.resolvedToolbarPagerArrowColor: textColor at 0.35. Was 0.45. */
  opacity: 0.35;
  font-size: 14px;
}
.kbd .sugg span[data-s] {
  border-radius: var(--kb-key-radius);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  /* The two outer words are Theme.resolvedSuggestionTextColor: textColor at
     0.5. This used to be `opacity: 0.7`, which was the wrong number AND the
     wrong mechanism - in the gallery the per-word pill fill sits on this same
     element, so the two side pills rendered at 70% and the middle one at 100%.
     The card sets the alpha into the COLOUR and turns opacity off; the
     homepage keyboards have no fill here and keep opacity, at the right
     number. */
  color: var(--kb-sugg-side, var(--kb-text));
  opacity: var(--kb-sugg-side-opacity, 0.5);
  white-space: nowrap;
  overflow: hidden;
  transition: color 0.3s ease;
}
/* short centred separator ticks, not full-height dividers */
/* Longhands, NOT the `background` shorthand. The shorthand resets
   background-color, so with a per-cell fill every cell after the first
   silently lost it - which cost a round to find. */
.kbd .sugg span[data-s] + span[data-s] {
  background-image: linear-gradient(var(--kb-sugg-tick, rgba(255,255,255,0.22)),
                                    var(--kb-sugg-tick, rgba(255,255,255,0.22)));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1px 16px;
}
.kbd .sugg span.mid { opacity: 1; font-weight: 600; color: var(--kb-sugg-text, var(--kb-text)); }
.kbd {
  --g: 4.9px;
  border-radius: 10px 10px 0 0;
  /* 4pt x the 0.81 this mock is drawn at. The suggestion bar and the pills
     match it, the same way Theme.resolvedSuggestionCornerRadius falls back to
     the keycaps' own radius. */
  --kb-key-radius: 3.5px;
}
/* A 20-track grid makes every row's edges identical BY CONSTRUCTION
   (20 half-columns + 19 gaps, whatever the spans): letters span 2 tracks,
   special keys 3 (= the app's 1.5 units), the space bar 10 (5 columns).
   The 9-letter A-row starts one track in - the real half-key inset. */
.kbd .row {
  display: grid;
  /* minmax(0, 1fr), NOT 1fr: a bare 1fr is minmax(AUTO, 1fr), so a track can
     never shrink below its own content. On a narrow board the wide keys take
     their content width and the dot key collapses to the width of a full
     stop - 11px against the 41px its span earns. With a 0 minimum the twenty
     tracks stay equal at every width, which is the whole point of the grid. */
  grid-template-columns: repeat(20, minmax(0, 1fr));
  gap: var(--g);
  margin-bottom: var(--kb-row-mb, 9.8px);
  padding: 0 2.4px;
  transition: margin-bottom 0.35s ease, gap 0.35s ease;
}
.kbd .row:last-child { margin-bottom: 0; }
.kbd .row.inset > .key:first-child { grid-column: 2 / span 2; }
.kbd .key {
  position: relative;
  grid-column: span 2;
  height: var(--kb-key-h, 34px);
  background: var(--kb-key);
  color: var(--kb-text);
  border-radius: var(--kb-key-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
  transition: background 0.3s ease, color 0.3s ease, transform 0.08s ease, box-shadow 0.08s ease, height 0.35s ease;
}
/* the app's baseline rule: a hint pushes the letter down by half the hint
   size; every letter-grid key moves together (dot key included) */
.kbd .key .cap { transform: translateY(4px); }
.kbd .key .hint {
  position: absolute;
  top: 2.5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 400;
  color: var(--kb-hint);
  pointer-events: none;
}
.kbd .key.sp { background: var(--kb-special); font-size: 13.5px; grid-column: span 3; }
/* The three icon keys carry glyphs, not words, and the app draws them at
   17pt. Sized with the letters rather than with the "123" caption. */
.kbd .key[data-k="shift"], .kbd .key[data-k="del"] { font-size: 17px; }
.kbd .key.enter { background: var(--kb-enter); color: var(--kb-enter-text); font-size: 15px; }
.kbd .key.dot { background: var(--kb-key); font-size: 15px; }
.kbd .key.emoji { grid-column: span 2; } /* 1 unit, unlike the other specials */
/* The smiley is an inline SVG in currentColor, NOT a font glyph. It used to be
   U+263A, which is "text by default" and draws as a monochrome outline on a
   Mac - and which iOS Safari colours in as the emoji regardless, ignoring even
   the text-presentation selector. A vector in currentColor renders the same
   everywhere and follows --kb-emoji-fg, --kb-hint and the pressed ink for
   free, which is also how the app draws it: an SF Symbol, not a character. */
.kbd .key.emoji svg.smiley { width: 17px; height: 17px; display: block; }
.kbd .key .hint svg.smiley { width: 9px; height: 9px; display: inline-block; vertical-align: -1px; }
/* No opacity on the key: it faded the FILL, and the real space bar is opaque.
   The glyph is web-only decoration; it takes the hint colour to stay quiet. */
.kbd .key.space { grid-column: span 10; font-size: 13px; color: var(--kb-hint, var(--kb-text)); background: var(--kb-space, var(--kb-key)); }
/* per-key colour hooks: unset they resolve to the key's normal colour, so
   only the "design your own" showcase (and future themes) pays for them */
.kbd .key[data-k="shift"] { background: var(--kb-shift, var(--kb-special)); }
.kbd .key[data-k="del"] { background: var(--kb-del, var(--kb-special)); }
.kbd .key[data-k="123"] { background: var(--kb-123k, var(--kb-special)); }
.kbd .key.emoji { background: var(--kb-emoji, var(--kb-special)); }
.kbd .key.dot { background: var(--kb-dot, var(--kb-key)); }
.kbd .key.comma { background: var(--kb-key); font-size: 15px; }
/* number-row digits centre vertically (no hints on them), and while the
   row is up the qwerty row drops its numeric hints and re-centres */
.kbd .num-row .cap { transform: none; }
.kbd.has-numrow .num-row + .row .hint { display: none; }
.kbd.has-numrow .num-row + .row .cap { transform: none; }
/* the enter glyph centres normally, and steps down under a hint; the
   enter hint is bigger than letter hints or it reads as a speck */
.kbd .key.enter .cap { transform: none; transition: transform 0.3s ease; }
.kbd .key.enter.hinted .cap { transform: translateY(6px); }
.kbd .key.enter .hint { font-size: 12px; top: 2px; }
/* fully custom letter layout: no hints, centred caps, centred 9-key row */
.kbd.custom-layout .hint { display: none; }
.kbd.custom-layout .cap { transform: none; }
.kbd .row.inset-c > .key:first-child { grid-column: 2 / span 2; }
.kbd .key.pressed {
  background: var(--kb-active);
  color: var(--ink-on-grad);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px var(--tint-blue-40);
}
/* the dot key's long-press popup (the "!" pick) */
.kbd .lp-pop {
  position: absolute;
  display: flex;
  gap: 3px;
  padding: 5px;
  background: var(--kb-special);
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 1px 0 rgba(0,0,0,0.3);
  z-index: 6;
}
.kbd .lp-pop span {
  width: 26px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--kb-text);
  font-size: 15px;
}
.kbd .lp-pop span.sel { background: #0a84ff; color: #ffffff; }
.kbd .lp-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--neck-l, 50%);
  width: var(--neck-w, 20px);
  height: 9px;
  background: var(--kb-special);
  border-radius: 0 0 5px 5px;
}
.kbd svg.trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.kbd svg.trail path {
  fill: none;
  stroke: var(--kb-trail);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px var(--kb-trail));
  opacity: 0;
}
/* KBD-CSS-END */

/* ------------------------------------------------------------ live demo */
.kbd.live { touch-action: none; cursor: default; -webkit-tap-highlight-color: transparent; }
.kbd.live .key { cursor: pointer; }
/* A tap darkens or lightens the key the way the system keyboard does. */
.kbd .key.down { filter: brightness(1.55); }
:root[data-theme="light"] .kbd .key.down { filter: brightness(0.86); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .kbd .key.down { filter: brightness(0.86); } }
.kbd .sugg span[data-s] { cursor: pointer; }
.kbd .sugg span[data-s]:empty { cursor: default; }
/* the character bubble over a tapped letter */
.kbd .key-pop {
  position: absolute; z-index: 8; pointer-events: none;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 6px; font-size: 26px; color: var(--kb-text);
  background: var(--kb-key); border-radius: 9px 9px 7px 7px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
/* the language codes on the space bar */
/* The glyph: centred, 6.5 pt below the key's middle, 12.7 x 4.8 pt (x 0.81),
   in the letters' colour, as measured on a device. */
.kbd .key.space svg.glyph { position: absolute; left: 50%; top: 65.6%; width: 30.5%; aspect-ratio: 12.7 / 4.8; height: auto; transform: translate(-50%, -50%); color: var(--kb-space-fg, var(--kb-text)); }
/* the static mocks scale whole, so the glyph follows the key's height; the
   live keyboard keeps the app's fixed size when the key height slider moves */
.kbd:not(.lk) .key.space { container-type: size; }
.kbd:not(.lk) .key.space svg.glyph { width: 30.5cqh; }
.kbd.lk .key.space svg.glyph { top: 50%; width: 10.3px; height: 3.9px; transform: translate(-50%, calc(-50% + 5.3px)); }
.kbd .key.space .glide { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 650; color: var(--kb-text); background: var(--kb-key); border-radius: inherit; opacity: 0; transition: opacity .2s; }
.kbd .key.space.gliding .glide { opacity: 1; }
/* space-bar trackpad: the letters go quiet */
.kbd.trackpad .key:not(.space) .cap, .kbd.trackpad .key:not(.space) .hint, .kbd.trackpad .key:not(.space) svg { opacity: 0; }
.kbd.trackpad .key { transition: none; }
.kbd .row.letters-11, .kbd .row.letters-12 { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
/* rows built for other layouts: every key one unit, the bottom row unchanged */
.kbd .row.flex { display: flex; gap: var(--g); }
.kbd .row.flex > .key { flex: 1 1 0; min-width: 0; grid-column: auto; }
.kbd .row.flex > .key.sp { flex: 1.45 1 0; }
.kbd .row.flex.pad-half { padding-left: calc(2.4px + 4.5%); padding-right: calc(2.4px + 4.5%); }
.kbd.no-emoji .key.emoji { display: none; }
.kbd.no-emoji .key.space { grid-column: span 12; }

/* the fingertip of a scripted demo */
.kbd .touch { position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.32); box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7), 0 4px 14px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; z-index: 12; transition: opacity .12s, transform .06s linear; }
.kbd .touch.on { opacity: 1; }

/* =========================================================== live keyboard
   The app's measurements x 0.81: 42 pt keys -> 34 px, 12.15 pt row gap ->
   9.84 px, 6 pt key gap -> 4.86 px, 4 pt radius -> 3.24 px, 22 pt caps ->
   17.8 px, 10 pt hints -> 8.1 px, 18 pt suggestions -> 14.6 px. */
.kbd.lk { --g: 4.86px; --n: 10; position: relative; padding: 3.04px 0 0; background: transparent; user-select: none; -webkit-user-select: none; touch-action: none; font-family: var(--kb-font, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif); }
.kbd.lk .row { display: flex; grid-template-columns: none; justify-content: center; gap: var(--g); padding: 0 2.43px; margin-bottom: var(--kb-row-mb, 9.84px); }
.kbd.lk .row.bottom { margin-bottom: 0; }
.kbd.lk .key { grid-column: auto; flex: 0 0 calc((100% + var(--g)) / var(--n) - var(--g)); min-width: 0; height: var(--kb-key-h, 34px); border-radius: 3.24px; font-size: 17.8px; background: var(--kb-key); color: var(--kb-text); box-shadow: 0 0.81px 0 var(--kb-shadow, rgba(0,0,0,0.25)); transition: none; filter: none; transform: none; }
.kbd.lk .key.w15 { flex-basis: calc(1.5 * (100% + var(--g)) / var(--n) - var(--g)); }
.kbd.lk .key.sp { background: var(--kb-special); }
.kbd.lk .key.enter { background: var(--kb-enter); color: var(--kb-enter-text); }
.kbd.lk .key.space { flex: 1 1 0; background: var(--kb-space, var(--kb-key)); color: var(--kb-text); position: relative; }
.kbd.lk .key.txt { font-size: 13.4px; }
.kbd.lk .key.down { filter: none; }
.kbd.lk .key svg.ic { display: block; }
.kbd.lk .key .hint { position: absolute; top: 0.81px; left: 1.62px; right: 1.62px; font-size: 8.1px; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--kb-hint); }
.kbd.lk .key .hint.smile svg { display: inline-block; vertical-align: -1px; }
.kbd.lk .key .cap { transform: none; line-height: 1; }
/* a hint pushes every letter of the grid down together (the app's baseline rule) */
.kbd.lk[data-page="letters"] .row.r0 .cap, .kbd.lk[data-page="letters"] .row.r1 .cap, .kbd.lk[data-page="letters"] .row.r2 .cap,
.kbd.lk[data-page="letters"] .key.dot .cap, .kbd.lk[data-page="letters"] .key.comma .cap { transform: translateY(4px); }
.kbd.lk .key.space .glyph { color: var(--kb-text); opacity: 1; }
.kbd.lk .key.space .codes { position: absolute; top: 1.6px; right: 3.24px; font-size: 7.3px; line-height: normal; font-weight: 400; color: color-mix(in srgb, var(--kb-hint) 55%, transparent); max-width: 60%; white-space: nowrap; overflow: hidden; display: block; }
.kbd.lk .key.space .codes b { font-weight: 400; color: color-mix(in srgb, var(--kb-hint) 40%, var(--kb-text)); }
.kbd.lk .key.space .codes i { font-style: normal; }
.kbd.lk .key.space .glide { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9.7px; color: var(--kb-hint); background: inherit; border-radius: inherit; opacity: 0; }
.kbd.lk .key.space.gliding .glide { opacity: 1; }
.kbd.lk .key.space.gliding .glyph { opacity: 0; }

/* the band: suggestions (or the toolbar page) between two pager arrows */
/* KeyboardMetrics.topInset: 3.75 pt of board above the bar (the padding),
   the bar, then the row gap to the first row: 57.9 pt in all, x 0.81. The bar
   is inset 3 pt at the sides, in line with the keys (ToolsPagerView). */
.kbd.lk .sugg { height: 34px; margin: 0 2.43px var(--kb-row-mb, 9.84px); display: flex; gap: 0; background-color: var(--kb-sugg-strip, transparent); border-radius: 3.24px; overflow: hidden; }
.kbd.lk .sugg .arrow { flex: 0 0 calc(100% / var(--n)); opacity: 1; color: color-mix(in srgb, var(--kb-text) 35%, transparent); display: grid; place-items: center; cursor: pointer; }
.kbd.lk .sugg .arrow.ghost { cursor: default; }
.kbd.lk .sugg span[data-s] { font-size: 14.6px; opacity: 1; color: color-mix(in srgb, var(--kb-text) 50%, transparent); font-weight: 400; padding: 0 4.86px; overflow: hidden; text-overflow: ellipsis; }
.kbd.lk .sugg span.mid { color: var(--kb-text); font-weight: 400; }
.kbd.lk .sugg span.mid svg { color: color-mix(in srgb, var(--kb-text) 50%, transparent); }
.kbd.lk .sugg span[data-s] + span[data-s] { background-size: 1px 60%; }
.kbd.lk .sugg.single span[data-s="0"], .kbd.lk .sugg.single span[data-s="2"] { display: none; }
.kbd.lk .sugg.single .arrow { visibility: hidden; }
.kbd.lk .sugg.slide-l > * { transform: translateX(-30%); opacity: 0; transition: transform .15s ease-out, opacity .15s; }
.kbd.lk .sugg.slide-r > * { transform: translateX(30%); opacity: 0; transition: transform .15s ease-out, opacity .15s; }
.kbd.lk .sugg.tools .toolrow { flex: 1; display: flex; gap: 0; }
.kbd.lk .tool { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4px; color: color-mix(in srgb, var(--kb-text) 50%, transparent); font: 500 6.5px var(--kb-font, -apple-system, sans-serif); border: 0; background: none; padding: 0; cursor: pointer; white-space: nowrap; }
.kbd.lk .tool svg { width: 12px; height: 12px; }
.kbd.lk .tool:active { opacity: .4; }

/* popups: tap preview and long-press accents (PopUpView) */
.kbd.lk .kpop { position: absolute; z-index: 9; display: flex; padding: 4.05px; background: var(--kb-popup, var(--kb-key)); border-radius: 3.24px; box-shadow: 0 0 3.24px rgba(0,0,0,0.5); pointer-events: none; }
.kbd.lk .kpop .slot { flex: 1; display: grid; place-items: center; font-size: 20.25px; color: var(--kb-text); border-radius: 3.24px; height: calc(100% - 1.6px); }
.kbd.lk .kpop .slot.sel { background: #007aff; color: #fff; }
.kbd.lk .kpop-neck { position: absolute; z-index: 8; background: var(--kb-popup, var(--kb-key)); border-radius: 0 0 3.24px 3.24px; pointer-events: none; }

/* overlays dim the board: caps at half strength, glyphs gone */
.kbd.lk.overlay-dim .key { opacity: .5; }
.kbd.lk.overlay-dim .key > * { visibility: hidden; }

/* the trackpad (CursorTrackView) */
.kbd.lk .ktrack { position: absolute; left: 0; right: 0; z-index: 10; pointer-events: none; }
.kbd.lk .ktrack .bar { position: absolute; top: 0; bottom: 0; background: var(--kb-space, var(--kb-key)); border-radius: 3.24px; transition: left .2s cubic-bezier(.3,1.25,.5,1), width .2s cubic-bezier(.3,1.25,.5,1); box-shadow: 0 0.81px 0 var(--kb-shadow, rgba(0,0,0,0.25)); }
.kbd.lk .ktrack .zone { position: absolute; top: 0; bottom: 0; border-radius: 3.24px; background: var(--kb-board-a, #161618); opacity: 0; transition: opacity .25s; overflow: hidden; }
.kbd.lk .ktrack.open .zone { opacity: 1; }
.kbd.lk .ktrack .zone::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--kb-hint) 14%, transparent); }
.kbd.lk .ktrack .zone.hot::before { background: rgba(0,122,255,var(--depth, .3)); }
.kbd.lk .ktrack .chev { position: absolute; inset: 0; }
.kbd.lk .ktrack .ch { fill: none; stroke: var(--kb-hint); stroke-width: 1.8px; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.kbd.lk .ktrack .zone.hot .ch { stroke: #fff; animation: chev var(--speed, .9s) ease-in-out infinite alternate; }
.kbd.lk .ktrack .zone.hot .ch.c1 { animation-delay: calc(var(--speed, .9s) * -0.33); }
.kbd.lk .ktrack .zone.hot .ch.c2 { animation-delay: calc(var(--speed, .9s) * -0.66); }
@keyframes chev { from { opacity: .25; } to { opacity: 1; } }

/* the smart wheel (SmartWheelView) */
.kbd.lk .kwheel { position: absolute; inset: 0; z-index: 11; pointer-events: none; }
.kbd.lk .kwheel .scrim { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--kb-board-a, #161618) 85%, transparent), color-mix(in srgb, var(--kb-board-a, #161618) 51%, transparent) 60%, transparent); opacity: 0; transition: opacity .18s; }
.kbd.lk .kwheel .wheel-svg { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; transform: scale(.85); transition: opacity .18s, transform .18s cubic-bezier(.3,1.3,.5,1); }
.kbd.lk .kwheel.open .scrim, .kbd.lk .kwheel.open .wheel-svg { opacity: 1; transform: none; }
.kbd.lk .kwheel .ws path { fill: var(--kb-popup, var(--kb-key)); }
.kbd.lk .kwheel .ws.outer path { fill-opacity: .78; }
.kbd.lk .kwheel .ws text { fill: var(--kb-text); font: 400 10.1px -apple-system, BlinkMacSystemFont, sans-serif; }
.kbd.lk .kwheel .ws.marked text { fill: #007aff; }
.kbd.lk .kwheel .ws.sel path { fill: #007aff; fill-opacity: 1; }
.kbd.lk .kwheel .ws.sel text { fill: #fff; }
.kbd.lk .kwheel .wt { width: 48px; height: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6px; color: var(--kb-text); font: 400 7.3px -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap; }
.kbd.lk .kwheel .ws.sel .wt { color: #fff; }
.kbd.lk .kwheel .ws.off .wt { opacity: .5; }
.kbd.lk .kwheel .wfade { fill: url(#wfade); pointer-events: none; }
.kbd.lk .kwheel .wdismiss { position: absolute; width: 21px; height: 21px; border-radius: 50%; background: var(--kb-popup, var(--kb-key)); color: var(--kb-text); display: grid; place-items: center; box-shadow: 0 0 4.86px color-mix(in srgb, var(--kb-key) 90%, transparent); opacity: 0; transition: opacity .18s; }
.kbd.lk .kwheel.open .wdismiss { opacity: 1; }
.kbd.lk .kwheel .wdismiss.sel { background: #007aff; color: #fff; }

/* swipe to delete (SwipeDeleteOverlayView) */
.kbd.lk .kdel { position: absolute; z-index: 10; pointer-events: none; display: flex; justify-content: flex-end; border-radius: 3.24px; background: var(--kb-del, var(--kb-special)); color: var(--kb-text); }
.kbd.lk .kdel.stretched { clip-path: polygon(0 50%, 20px 0, 100% 0, 100% 100%, 20px 100%); background: linear-gradient(rgba(255,59,48,.14), rgba(255,59,48,.14)), var(--kb-del, var(--kb-special)); box-shadow: inset 0 0 0 1.6px rgba(255,59,48,.9); }
.kbd.lk .kdel .ic-del { display: grid; place-items: center; flex: 0 0 auto; }
.kbd.lk .kdel .ic-trash { position: absolute; left: 40%; top: 50%; transform: translate(-50%, -50%); color: #fff; display: none; }
.kbd.lk .kdel.all { clip-path: none; background: rgba(255,59,48,.92); color: #fff; box-shadow: none; }
.kbd.lk .kdel.all .ic-trash { display: block; }

/* the emoji page (EmojiView) */
.kbd.lk .emoji-search { margin: 0 2.43px 4px; height: 34px; border-radius: 17px; background: color-mix(in srgb, var(--kb-key) 50%, transparent); color: color-mix(in srgb, var(--kb-text) 45%, transparent); display: flex; align-items: center; gap: 4px; padding-left: 6.5px; font-size: 13px; }
.kbd.lk .emoji-grid { display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 27.2px); grid-auto-columns: calc(100% / 9); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin-bottom: 4px; }
.kbd.lk .emoji-grid::-webkit-scrollbar { display: none; }
.kbd.lk .emoji-grid .em { display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.kbd.lk .emoji-bottom { gap: 2.43px; }
.kbd.lk .emoji-cats { flex: 1; display: flex; height: 34px; background: var(--kb-key); border-radius: 3.24px; box-shadow: 0 0.81px 0 rgba(0,0,0,0.25); }
.kbd.lk .emoji-cats .ec { flex: 1; display: grid; place-items: center; color: var(--kb-text); position: relative; cursor: pointer; }
.kbd.lk .emoji-cats .ec.on::after { content: ""; position: absolute; bottom: 4px; left: 50%; width: 13px; margin-left: -6.5px; height: 1.6px; background: var(--kb-text); border-radius: 1px; }

/* the clipboard page inside the keyboard */
.kbd.lk .clip-in { height: 214px; }
.kbd.lk .clip-in .clip-area { height: 166px; }
.kbd.lk .sugg.single span[data-s] { background-image: none; }
/* restoring: the outline turns green and the tip folds into a notch */
.kbd.lk .kdel.stretched.restore { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 20px 50%); background: linear-gradient(rgba(52,199,89,.14), rgba(52,199,89,.14)), var(--kb-del, var(--kb-special)); box-shadow: inset 0 0 0 1.6px rgba(52,199,89,.9); }
/* the trash shows only once the stretched part is 30 pt wide */
.kbd.lk .kdel.all .ic-trash { display: none; }
.kbd.lk .kdel.all.trash .ic-trash { display: block; }
.kbd.lk .key.w10 { flex-basis: calc((100% + var(--g)) / var(--n) - var(--g)); }
.kbd.lk .key.w20 { flex-basis: calc(2 * (100% + var(--g)) / var(--n) - var(--g)); }
.kbd.lk .kdel.all { background: rgb(242, 58, 48); }
/* the pager: fixed arrows, a clipped viewport, pages that slide inside it */
.kbd.lk .sugg .kvp { flex: 1 1 auto; min-width: 0; display: flex; position: relative; overflow: hidden; }
.kbd.lk .sugg .kpanel { flex: 0 0 100%; min-width: 0; display: flex; }
.kbd.lk .sugg .kpanel.ghost { position: absolute; inset: 0; pointer-events: none; }
.kbd.lk .sugg .kpanel span[data-s] { flex: 1 1 0; min-width: 0; display: grid; place-items: center; }
.kbd.lk .sugg .toolrow { flex: 1; display: flex; gap: 0; }
/* the delete overlay is drawn by its SVG path (fill, wash and stroke), so the
   outline follows the tip; the box itself paints nothing */
.kbd.lk .kdel, .kbd.lk .kdel.stretched, .kbd.lk .kdel.stretched.restore, .kbd.lk .kdel.all { background: none; clip-path: none; box-shadow: none; }
.kbd.lk .kdel svg.shape { position: absolute; left: 0; top: 0; overflow: visible; }
.kbd.lk .kdel svg.shape .body { fill: var(--kb-del, var(--kb-special)); }
.kbd.lk .kdel svg.shape .wash { fill: rgba(255, 59, 48, 0.14); stroke: rgba(255, 59, 48, 0.9); }
.kbd.lk .kdel.restore svg.shape .wash { fill: rgba(52, 199, 89, 0.14); stroke: rgba(52, 199, 89, 0.9); }
.kbd.lk .kdel.all svg.shape .body, .kbd.lk .kdel.all svg.shape .wash { fill: rgba(255, 59, 48, 0.92); stroke: none; }
.kbd.lk .kdel .ic-del, .kbd.lk .kdel .ic-trash { position: relative; z-index: 1; }
.kbd.lk .kdel .ic-trash { position: absolute; }