/* Keyboard of Knob — keycaps rebuilt from the Figma layers.
   Every size is in Figma design px times --k, so the whole board scales from one number.
   Figma layer blur ≈ 2× CSS blur(), hence the halved blur values. */

:root {
  --k: 0.24px;
  --pitch: 298;           /* key unit incl. gap, design px */
  --gap: 17;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #3d3d3d;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0%, #d2d2d2 0%, #b9b9b9 55%, #9d9d9d 100%);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 16px;
}

.readout {
  margin: 0;
  min-height: 1.4em;
  max-width: min(90vw, 900px);
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: .01em;
  color: #4a4a4a;
  white-space: pre;
  overflow: hidden;
  text-overflow: clip;
  direction: rtl;           /* keep the newest characters visible */
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.readout > * { direction: ltr; unicode-bidi: bidi-override; }
.readout .hint { color: #8a8a8a; }
.readout .caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 2px;
  background: #e74a22; vertical-align: -.12em;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.caption { margin: 0; font-size: 13px; color: #6b6b6b; }
footer { text-align: center; font-size: 11px; color: #7a7a7a; padding: 0 0 14px; }

/* ── case ─────────────────────────────────────────────── */

.board { position: relative; padding-top: calc(16 * var(--k)); }

.case {
  position: relative;
  padding: calc(68 * var(--k));
  border-radius: calc(107 * var(--k));
  background: #797778;
  box-shadow:
    inset calc(8 * var(--k)) calc(8 * var(--k)) calc(5.3 * var(--k)) rgba(255,255,255,.9),
    inset calc(1 * var(--k)) calc(1 * var(--k)) calc(4 * var(--k)) rgba(0,0,0,.4),
    inset calc(-1 * var(--k)) calc(-.5 * var(--k)) calc(2.6 * var(--k)) rgba(84,84,84,.45),
    calc(2 * var(--k)) calc(2 * var(--k)) calc(4.6 * var(--k)) #666566,
    0 calc(60 * var(--k)) calc(120 * var(--k)) rgba(0,0,0,.22);
}

.well {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * var(--k));
  padding: calc(19 * var(--k));
  border-radius: calc(39 * var(--k));
  background: #100e0c;
  box-shadow: calc(-2 * var(--k)) calc(-2 * var(--k)) calc(3.9 * var(--k)) #100e0c;
}

/* orange light the esc key throws onto the bezel (Figma: Rectangle 6 + tinted mask group) */
.spill {
  position: absolute;
  pointer-events: none;
  border-radius: calc(46 * var(--k));
  background: radial-gradient(closest-side, rgba(231,74,34,.95), rgba(231,74,34,0));
  filter: blur(calc(10 * var(--k)));
  mix-blend-mode: screen;
}

.row { display: flex; gap: calc(var(--gap) * var(--k)); }

/* ── the knob ─────────────────────────────────────────── */

.knob {
  position: absolute;
  top: 0;
  left: calc(306 * var(--k));
  width: calc(72 * var(--k));
  height: calc(16 * var(--k));
  padding: 0;
  border: 0;
  border-radius: calc(9 * var(--k)) calc(9 * var(--k)) 0 0;
  background: linear-gradient(180deg, #eea474 0%, #f57c45 44%, #b03017 100%);
  box-shadow: inset 0 calc(.4 * var(--k)) calc(3 * var(--k)) rgba(0,0,0,.15);
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
}
.knob span {
  position: absolute;
  left: calc(5 * var(--k)); top: calc(2 * var(--k));
  width: calc(31 * var(--k)); height: calc(5 * var(--k));
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  filter: blur(calc(1.2 * var(--k)));
  mix-blend-mode: overlay;
}
.knob::after { content: ""; position: absolute; inset: -12px -10px -4px; }  /* bigger hit area */
.knob[aria-pressed="false"] { transform: translateY(calc(10 * var(--k))); filter: saturate(.35) brightness(.9); }

/* ── keycaps ──────────────────────────────────────────── */

.key {
  --kw: calc((var(--w) * var(--pitch) - var(--gap)) * var(--k));
  position: relative;
  flex: none;
  width: var(--kw);
  height: calc(281 * var(--k));
  padding: 0;
  border: 0;
  border-radius: calc(26 * var(--k));
  background: none;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 calc(4 * var(--k)) calc(4 * var(--k)) rgba(0,0,0,.25);
  transition: transform 70ms ease-out, box-shadow 70ms ease-out, filter 70ms ease-out;
  outline: none;

  /* light grey colourway (Figma "Group 3" stack) */
  --base: conic-gradient(from var(--a), #b4b4b3 0deg, #818181 30deg, #818181 150deg, #b4b4b3 180deg, #e7e7e5 210deg, #e7e7e5 330deg, #b4b4b3 360deg);
  --base-in: inset calc(-4 * var(--k)) calc(-4 * var(--k)) calc(4.2 * var(--k)) rgba(255,255,255,.3);
  --hl: rgba(255,255,255,.45);
  --body: #bfbfbf;
  --shade: #8c8c8c;
  --skirt: conic-gradient(from var(--a), #b4b4b4 0deg, #808080 50deg, #808080 130deg, #b4b4b4 180deg, #e8e8e8 230deg, #e8e8e8 310deg, #b4b4b4 360deg);
  --dish: conic-gradient(from var(--a), #b5b5b5 0deg, #828282 55deg, #828282 125deg, #b5b5b5 180deg, #e8e8e8 235deg, #e8e8e8 305deg, #b5b5b5 360deg);
  --rim: rgba(255,255,255,.45);
  --top: #c1c1c1;
  --top-in: none;
  --legend: #565656;
}

.key.orange {
  --base: linear-gradient(150deg, #ee8959 40%, #dc5a2d 47%, #842511 58%, #941400 74%, #801302 98%);
  --base-in: inset calc(-4 * var(--k)) calc(-4 * var(--k)) calc(6 * var(--k)) rgba(255,227,184,.2);
  --hl: rgba(255,255,255,.55);
  --body: linear-gradient(to bottom right, #c63310 0%, #ba3605 14%, #be3b02 45%, #b32f05 74%, #a51b06 100%);
  --shade: rgba(40,4,0,.75);
  --skirt: linear-gradient(162deg, #f77333 21%, #ca401f 47%, #7d1004 71%, #6a1304 95%);
  --dish: linear-gradient(162deg, #fb7c3e 21%, #ca401f 52%, #8d1103 65%, #7d0e02 99%);
  --rim: rgba(255,255,255,.12);
  --top: linear-gradient(to bottom right, #c73210, #b4300f);
  --top-in: inset calc(4 * var(--k)) calc(4 * var(--k)) calc(6 * var(--k)) rgba(245,124,69,.8);
  --legend: #c3bec0;
}

.cap {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.cap i { position: absolute; display: block; }

.cap .base  { inset: 0; border-radius: calc(26 * var(--k)); background: var(--base); box-shadow: var(--base-in); }
.cap .hl    { left: calc(5 * var(--k)); top: calc(6 * var(--k)); right: calc(24 * var(--k)); bottom: calc(27 * var(--k));
              border-radius: calc(16 * var(--k)) 0 0 0; background: var(--hl); filter: blur(calc(1.5 * var(--k))); }
.cap .body  { left: calc(7 * var(--k)); top: calc(8 * var(--k)); right: calc(7 * var(--k)); bottom: calc(6 * var(--k));
              border-radius: calc(22 * var(--k)); background: var(--body); filter: blur(calc(3.35 * var(--k))); }
.cap .shade { left: calc(37 * var(--k)); top: calc(38 * var(--k)); right: 0; bottom: calc(-1 * var(--k));
              border-radius: calc(79 * var(--k)); background: var(--shade); filter: blur(calc(8 * var(--k))); }
.cap .skirt { left: calc(19 * var(--k)); top: calc(18 * var(--k)); right: calc(18 * var(--k)); bottom: calc(19 * var(--k));
              border-radius: calc(79 * var(--k)); background: var(--skirt); filter: blur(calc(8 * var(--k))); }
.cap .dish  { left: calc(31 * var(--k)); top: calc(30 * var(--k)); right: calc(30 * var(--k)); bottom: calc(31 * var(--k));
              border-radius: calc(69 * var(--k)); background: var(--dish); filter: blur(calc(4.7 * var(--k))); }
.cap .rim   { left: calc(31 * var(--k)); top: calc(28 * var(--k)); right: calc(28 * var(--k)); bottom: calc(31 * var(--k));
              border-radius: calc(70 * var(--k)); box-shadow: inset calc(-2 * var(--k)) calc(-2 * var(--k)) 0 var(--rim);
              filter: blur(calc(3.7 * var(--k))); }
.cap .glow  { left: calc(37 * var(--k)); top: calc(36 * var(--k)); right: calc(54 * var(--k)); bottom: calc(75 * var(--k));
              border-radius: calc(57 * var(--k)) 0 0 calc(17 * var(--k));
              background: radial-gradient(89% 105% at 7% 8%, #fff 79%, rgba(255,255,255,0) 100%);
              filter: blur(calc(2.5 * var(--k))); }
.cap .top   { left: calc(40 * var(--k)); top: calc(38 * var(--k)); right: calc(39 * var(--k)); bottom: calc(41 * var(--k));
              border-radius: calc(60 * var(--k)); background: var(--top); box-shadow: var(--top-in);
              filter: blur(calc(2.1 * var(--k))); }

/* warm reflection on keys next to an orange one (Figma: "Rectangle 1", #774128 @45%) */
.cap .warm  { background: #774128; opacity: .45; border-radius: calc(14 * var(--k)); filter: blur(calc(5.2 * var(--k))); }

/* legends sit on the top face */
.legend {
  position: absolute;
  left: calc(40 * var(--k)); right: calc(39 * var(--k));
  top: calc(38 * var(--k)); bottom: calc(41 * var(--k));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(16 * var(--k));
  color: var(--legend);
  font-size: calc(52 * var(--k));
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.legend.pair { justify-content: space-between; padding: calc(34 * var(--k)) 0 calc(28 * var(--k)); }
.legend.small { font-size: calc(36 * var(--k)); }
.legend.lower { justify-content: flex-end; align-items: flex-start; padding: 0 0 calc(30 * var(--k)) calc(26 * var(--k)); }

.icon-sun {
  position: relative;
  width: calc(38 * var(--k)); height: calc(38 * var(--k));
  border-radius: 50%;
  border: calc(4 * var(--k)) dotted currentColor;
}
.icon-sun::after {
  content: ""; position: absolute; inset: calc(6 * var(--k));
  border-radius: 50%; border: calc(4 * var(--k)) solid currentColor;
}

/* pressed */
.key.down {
  transform: translateY(calc(5 * var(--k))) scale(.985);
  box-shadow: 0 calc(1 * var(--k)) calc(1.5 * var(--k)) rgba(0,0,0,.35);
  filter: brightness(.95);
}
.key:focus-visible { box-shadow: 0 0 0 2px #f57c45; }

@media (prefers-reduced-motion: reduce) {
  .key, .knob { transition: none; }
  .readout .caret { animation: none; }
}