/* The Kiiwi keyboard, copied from index.html (the homepage keeps its own copy). */
/* ── Keyboard ──────────────────────────────────────────────────────────────
   Layout, geometry and Mint colourway follow Keyb by Himan (keyb.himan.me),
   a Keychron K2 inspired component. That one is React and Tailwind; this is
   the same construction in plain DOM so it drops into a static page.

   The depth is not a shadow. Each key is a 50px base in the variant colour at
   80% alpha, with a 37px top face inset 6.5px on each side, plus two hairlines
   rotated 70deg forming the side bevels. Keys butt together with no gap, so
   what reads as a metal plate is really the bases showing around the faces.
   Rows overlap by 4px, which is what tucks them into each other. */
.kb-wrap{display:flex;justify-content:center;margin:24px auto 4px}
.kb-scale{transform-origin:top center}
/* The board is built by script; reserve its scaled box (828x308) so nothing below jumps. */
.kb-wrap{aspect-ratio:828/308;max-height:308px}
/* Colourway: every colour on the board is a variable on .kb-case, set per
   switch by kbTheme(), so picking a sound repaints the board in one place. */
.kb-case{--case:#1d1f22;--plate:#0b0c0d;--kl:#EEEEEE;--kl-fg:#447B82;--kd:#447B82;--kd-fg:rgba(255,255,255,.72);
  --ka:#86C8AC;--ka-fg:rgba(255,255,255,.92);
  background:linear-gradient(180deg,color-mix(in srgb,var(--case) 88%,#fff),var(--case) 30%,color-mix(in srgb,var(--case) 82%,#000));
  border:1px solid color-mix(in srgb,var(--case) 70%,#000);padding:12px;border-radius:18px;width:fit-content;
  box-shadow:0 1px 0 color-mix(in srgb,var(--case) 60%,#fff) inset,0 10px 0 -2px color-mix(in srgb,var(--case) 70%,#000),
    0 30px 50px -24px #0006;transition:background .35s,border-color .35s,box-shadow .35s}
.kb-plate{background:var(--plate);border:1px solid #0008;border-radius:8px 8px 5px 5px;overflow:hidden;transition:background .35s}
.kb-key.v-l{--k:var(--kl);--kf:var(--kl-fg)}
.kb-key.v-d{--k:var(--kd);--kf:var(--kd-fg)}
.kb-key.v-a{--k:var(--ka);--kf:var(--ka-fg)}
.kb-key .kb-base{background:color-mix(in srgb,var(--k) 78%,#000);transition:height .1s,background .35s}
/* Top-lit, slightly dished face: the highlight is what makes it read as a
   sculpted cap rather than a flat tile. */
.kb-key .kb-face{background:linear-gradient(180deg,color-mix(in srgb,var(--k) 86%,#fff),var(--k) 55%,color-mix(in srgb,var(--k) 92%,#000));
  color:var(--kf);box-shadow:0 1px 0 color-mix(in srgb,var(--k) 70%,#fff) inset;transition:height .1s,background .35s,color .35s}
.kb-rows{border-radius:5px;overflow:hidden}
.kb-row{display:flex;margin-top:-4px}
/* The overlap tucks each row under the one above it; the first row has
   nothing above it, so the lift only clipped the function keys. */
.kb-row:first-child{margin-top:0}
.kb-key{height:50px;padding:0;border:0;background:none;display:flex;align-items:flex-end;
  cursor:pointer;touch-action:none;-webkit-appearance:none}
.kb-key:focus{outline:none}
.kb-base{position:relative;overflow:hidden;height:50px;border-radius:12px 12px 4px 4px;
  border:1px solid rgba(0,0,0,.4);display:flex;align-items:flex-start;justify-content:center;
  transition:height .1s}
.kb-key.on .kb-base{height:45px}
.kb-face{position:relative;z-index:1;height:37px;border-radius:6px;
  border:1px solid rgba(0,0,0,.4);border-top:0;font:500 9px/1.1 var(--sans);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:4px;gap:2px;user-select:none;transition:height .1s}
.kb-bevel{position:absolute;z-index:0;bottom:0;height:1px;width:32px;background:rgba(0,0,0,.3);
  transition:transform .1s}
.kb-bevel.r{right:0;transform:translateX(14px) rotate(70deg)}
.kb-bevel.l{left:0;transform:translateX(-14px) rotate(-70deg)}
.kb-key.on .kb-bevel.r{transform:translateX(14px) rotate(60deg)}
.kb-key.on .kb-bevel.l{transform:translateX(-14px) rotate(-60deg)}
.kb-face .g{font-size:12px}
.kb-face svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}