/* DotGothic16 (SIL OFL 1.1, fonts/OFL.txt), cut to printable ASCII, for the knob labels */
@font-face { font-family: "DotGothic16"; src: url("fonts/DotGothic16-subset.woff") format("woff"); font-display: swap; }
:root { --bg: #8e8e93; --fg: #111; --dim: #2c2c2e; --rule: #5a5a5e;
        --body: #1d1d1f; --tray: #141415; --part: #2a2a2d; --edge: #3a3a3e; --label: #d6d6d8;
        --lit: #fff4d6; --green: #5fe08a; color-scheme: light; }
html, body { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 13px/1.6 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 32px; }
@media (orientation: portrait) and (max-width: 700px) { main { padding: 8px 8px 24px; } }
a { color: inherit; }
.device { position: relative; width: 100%; aspect-ratio: 1000 / 624; user-select: none; -webkit-user-select: none;
          -webkit-touch-callout: none; touch-action: manipulation; }
.device svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.device canvas { position: absolute; image-rendering: crisp-edges; image-rendering: pixelated; background: #000; }
.hit { position: absolute; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 10px; }
.hit.knob { cursor: ns-resize; border-radius: 50%; }
.hit:focus-visible { outline: 2px solid var(--lit); outline-offset: 2px; }
.face { transition: fill .05s; }
.dim .face.btn { fill: #3a3934; }
.lit .face.btn { fill: var(--lit); }
.lit text { fill: #1d1d1f; }
.green .face.btn { fill: var(--green); }
.green text { fill: #0d2414; }
.face.key { fill: #0c0c0d; stroke: var(--edge); stroke-width: 1.5; }
.slit { fill: #3a3a3c; transition: fill .05s; }
.dim .slit { fill: #77777b; }
.lit .slit { fill: #ececee; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .6)); }
/* #119: what can be pressed breathes, dark .. ~60 % of lit and back (hal/fm1_input.h fm1_led_breath, ~1.1 s; MENU >
 * LEDS DIM LO ~30 %): the peaks between dark and lit at ~0.8 / ~0.58 on screen (the LED's share, gamma-encoded) */
@keyframes breath-btn { 0%, 100% { fill: #3a3934; } 50% { fill: #d8cfb6; } }
@keyframes breath-slit { 0%, 100% { fill: #3a3a3c; } 50% { fill: #c8c8ca; } }
@keyframes breath-btn-lo { 0%, 100% { fill: #3a3934; } 50% { fill: #aca592; } }
@keyframes breath-slit-lo { 0%, 100% { fill: #3a3a3c; } 50% { fill: #a1a1a3; } }
.breath .face.btn { animation: breath-btn 1.13s ease-in-out infinite; }
.breath .slit { animation: breath-slit 1.13s ease-in-out infinite; }
.dimlo .breath .face.btn { animation-name: breath-btn-lo; }
.dimlo .breath .slit { animation-name: breath-slit-lo; }
@media (prefers-reduced-motion: reduce) {
  .breath .face.btn, .breath .slit { animation: none; }
  .breath .face.btn { fill: #aca592; }
  .breath .slit { fill: #a1a1a3; }
}
/* the DRUM grid's beats (hal/fm1_input.h fm1_led_mid): a steady level between the glow and lit, ~15 % (DIM LO ~10 %) */
.mid .slit { fill: #9a9a9e; }
.dimlo .mid .slit { fill: #8a8a8e; }
.held .face { stroke: var(--lit); stroke-width: 3; }
.latched .face { stroke: #79b8ff; stroke-width: 3; }
.start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
         background: rgba(0, 0, 0, .5); border-radius: 4% / 6%; }
.start[hidden] { display: none; }
.start button { font: inherit; font-size: 18px; padding: 12px 28px; background: #fff; color: #000; border: 0; cursor: pointer; }
.start button:disabled { opacity: .4; cursor: progress; }
.start p { margin: 0; max-width: 32em; text-align: center; color: #fff; }
.keys, footer { margin: 16px 0 0; color: var(--dim); text-align: center; }
.legend { max-width: 46em; margin: 18px auto 0; color: var(--fg); font-size: 14px; line-height: 1.45; }
.legend p { margin: 0 0 6px; }
.keys span { white-space: nowrap; margin: 0 8px; }
kbd { font: 600 11px ui-monospace, Menlo, monospace; border: 1px solid var(--rule); padding: 0 4px; color: var(--fg); }
footer { margin-top: 12px; font-size: 12px; }
footer nav a { margin: 0 6px; }
footer small { font-size: 11px; opacity: .8; }