:root {
  color: #fff;
  background: #0b0a09;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

[hidden] { display: none !important; }

[data-contract-stage] {
  position: relative;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
  background: #000;
  container-type: size;
}

[data-contract-id] {
  position: absolute;
  margin: 0;
}

[data-contract-id="scene-master"],
[data-contract-id="scene-deleted"] {
  object-fit: fill;
  user-select: none;
  pointer-events: none;
}

/* Native legends printed on the blank side keycaps' top faces. */
[data-contract-id="ctrl-label"],
[data-contract-id="del-label"] {
  display: grid;
  place-items: center;
  color: #3a342e;
  font-weight: 500;
  font-size: 7.4cqh;
  line-height: 1;
  transform: scaleY(0.86);
  mix-blend-mode: multiply;
  opacity: 0.92;
  pointer-events: none;
}

/* Primary control: an invisible hit area over the three keys. */
[data-contract-id="chord-button"] {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 2cqh;
  background: transparent;
  cursor: pointer;
}
/* No frame around the keys (user correction). Keyboard focus reached with Tab
   shows only a faint wash over the row. */
[data-contract-id="chord-button"]:focus { outline: none; }
[data-contract-id="chord-button"]:focus-visible { background: rgb(255 250 235 / 0.1); }
[data-contract-id="chord-button"]:disabled { cursor: default; }

/* Press: the whole row punches in and shakes together. The scene scales from its
   top edge so no stage edge is exposed; the labels follow the same image points. */
[data-contract-id="scene-master"],
[data-contract-id="scene-deleted"] {
  --press-dx: 0cqw;
  --press-dy: 0cqh;
  --press-s: 1.02;
  transform-origin: 50% 0%;
}
[data-contract-id="ctrl-label"] { --press-dx: -0.51cqw; --press-dy: 0.92cqh; --press-s: 1.02; }
[data-contract-id="del-label"] { --press-dx: 0.52cqw; --press-dy: 0.92cqh; --press-s: 1.02; }
[data-contract-state="pressed"] [data-contract-id="scene-master"],
[data-contract-state="pressed"] [data-contract-id="ctrl-label"],
[data-contract-state="pressed"] [data-contract-id="del-label"] {
  animation: chord-press 140ms ease-out forwards;
}
[data-contract-state="pressed"] [data-contract-id="scene-master"] { filter: brightness(0.9); }
@keyframes chord-press {
  0% { translate: 0 0; scale: 1; }
  35% { translate: calc(var(--press-dx) - 0.3cqw) var(--press-dy); scale: var(--press-s); }
  65% { translate: calc(var(--press-dx) + 0.3cqw) var(--press-dy); scale: var(--press-s); }
  100% { translate: var(--press-dx) var(--press-dy); scale: var(--press-s); }
}

/* Deleted: hard cut to the empty slot with a small shock, settling back. */
[data-contract-state="deleted"] [data-contract-id="scene-deleted"],
[data-contract-state="deleted"] [data-contract-id="ctrl-label"],
[data-contract-state="deleted"] [data-contract-id="del-label"] {
  animation: delete-shock 220ms ease-out;
}
@keyframes delete-shock {
  0% { translate: var(--press-dx) var(--press-dy); scale: var(--press-s); filter: brightness(1.6); }
  40% { translate: calc(var(--press-dx) + 0.3cqw) var(--press-dy); scale: var(--press-s); }
  70% { translate: calc(var(--press-dx) - 0.2cqw) var(--press-dy); scale: var(--press-s); }
  100% { translate: 0 0; scale: 1; filter: none; }
}

/* Reboot: black screen with a spinner. */
[data-contract-id="reboot-screen"] {
  display: grid;
  place-items: center;
  background: #000;
}
.spinner {
  width: 9cqh;
  height: 9cqh;
  border-radius: 50%;
  border: 0.9cqh solid rgb(255 255 255 / 0.18);
  border-top-color: #fff;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { rotate: 1turn; } }

/* Restored: he boots straight back. */
[data-contract-state="restored"] [data-contract-id="scene-master"],
[data-contract-state="restored"] [data-contract-id="ctrl-label"],
[data-contract-state="restored"] [data-contract-id="del-label"] {
  animation: boot-in 260ms ease-out;
}
@keyframes boot-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fixed system tray with the launch actions. */
[data-contract-id="tray"] {
  background: #121110;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}
a[data-contract-id],
[data-contract-id="copy-ca"],
[data-contract-id="mute-button"] {
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 0.8cqh;
  background: rgb(255 255 255 / 0.08);
  color: #f3efe8;
  font: 600 2.6cqh/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
a[data-contract-id]:hover:not([aria-disabled="true"]),
[data-contract-id="copy-ca"]:hover:not(:disabled) { background: rgb(255 255 255 / 0.18); }
a[data-contract-id]:focus-visible,
[data-contract-id="copy-ca"]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
a[data-contract-id][aria-disabled="true"],
[data-contract-id="copy-ca"]:disabled { cursor: default; opacity: 0.45; }
[data-contract-id="copy-status"] {
  display: grid;
  place-items: center start;
  padding-left: 1cqh;
  color: #f3efe8;
  font: 600 2.4cqh/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}