@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); }
/* Layout: the blended spectrogram fills the screen inside a thin frame; readout chips top-left, one row of titled square tiles bottom-left (modes open as a row above), info bottom-right. Same 14px inset for every edge. */
:root {
  --bg: #000;
  --fg: #fff;
  --dim: #9a9a9a;
  --line: #7c7c7c;
  --well: #3a3a3a;
  --tbg: #161616;
  --tbg-hover: #262626;
  --bw: .5px;
  --a: #ffd23f;
  --b: #4a8cff;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --tile: 44px;
  --gap: 4px;
  --edge: 14px;
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; background: var(--bg); color: var(--fg); }
body { margin: 0; overflow: hidden; font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1.2; -webkit-user-select: none; user-select: none; text-transform: uppercase; }
#stage { position: fixed; inset: 0; touch-action: none; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#ov { position: absolute; pointer-events: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }

/* chips: black boxes sized to their text */
.chip { display: inline-block; box-sizing: border-box; background: var(--tbg); padding: 6px 10px; border: var(--bw) solid var(--line); }
#readout { position: absolute; left: var(--edge); top: var(--edge); right: calc(var(--edge) + var(--tile) + 8px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); }
#r1 { font-size: 16px; letter-spacing: .02em; height: var(--tile); display: inline-flex; align-items: center; padding-block: 0; }
#r2 { font-size: 12px; color: #d6d6d6; text-transform: none; }
#r2:empty { display: none; }

/* tile rows: every gap is one --gap */
.tiles { position: absolute; left: var(--edge); bottom: var(--edge); right: var(--edge); display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap); pointer-events: none; }
.row, .mrow { display: flex; flex-wrap: wrap; gap: var(--gap); pointer-events: auto; }
#modeRow { display: flex; flex-direction: column; gap: var(--gap); pointer-events: auto; }
.cell { position: relative; }
.pop { position: absolute; left: 0; bottom: calc(100% + var(--gap)); display: flex; flex-direction: column; gap: var(--gap); }
#tInfo { position: absolute; right: var(--edge); top: var(--edge); pointer-events: auto; z-index: 60; }

.t { position: relative; box-sizing: border-box; width: var(--tile); height: var(--tile); background: var(--tbg); color: var(--fg); border: var(--bw) solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 13px; overflow: hidden; touch-action: none; }
.t.q { font-size: 16px; }
.t:hover, .t.drop { background: var(--tbg-hover); border-color: var(--fg); }
.t:focus-visible { outline: var(--bw) solid var(--fg); outline-offset: 1px; }
.t.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
/* A and B keep their thumbnail when open; only the border lights up */
#tA.on, #tB.on { background: var(--tbg); color: var(--fg); }
.t.off { color: #5c5c5c; }
.t[disabled] { cursor: default; color: #5c5c5c; }
.t .fill { position: absolute; left: 0; right: 0; bottom: 0; background: var(--well); pointer-events: none; }
.t .fill.rec { background: #4a1612; }
.t .v, .t .lt { position: relative; white-space: nowrap; }
/* centre capitals on their cap height, not on a line box that reserves room for descenders */
.t .v, .t .lt, #r1 .lt { display: inline-block; line-height: 1; text-box: trim-both cap alphabetic; }
.t canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; opacity: .5; pointer-events: none; }
/* icons scale with the tile (--k), their strokes stay the same width */
.t svg { display: block; position: relative; overflow: visible; width: calc(var(--iw) * var(--k, 1)); height: calc(var(--ih) * var(--k, 1)); }
.t svg .s { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.t svg .f { fill: currentColor; }
.t svg .e { fill: var(--bg); }
.t svg .red { fill: #ff3b30; }
.t.on svg .e { fill: var(--fg); }
.t svg .e { fill: var(--tbg); }
.t:hover svg .e { fill: var(--tbg-hover); }
.t svg .ln { fill: none; stroke: currentColor; stroke-width: .6; vector-effect: non-scaling-stroke; }
body.col #tA .lt { color: var(--a); }
body.col #tB .lt { color: var(--b); }

/* info */
.panel { background: var(--bg); border: var(--bw) solid var(--line); box-sizing: border-box; }
#info { position: fixed; z-index: 50; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; padding: var(--edge) calc(var(--edge) * 2 + var(--tile)); box-sizing: border-box; }
/* the panel hugs its text: same padding on every side, plus a column on the right for the close tile */
#infoBox { width: fit-content; max-width: 100%; max-height: 100%; display: flex; position: relative; text-transform: none; font-size: 14px; line-height: 1.7; border: var(--bw) solid var(--line); background: var(--bg); box-sizing: border-box; }
#infoBody { min-height: 0; overflow-x: hidden; overflow-y: auto; padding: var(--edge); display: grid; grid-template-columns: max-content max-content; align-content: start; gap: 0 48px; }
/* each sentence keeps its own line; equal 1fr columns in a shrink-to-fit box both take the wider column's width */
#infoBody > div { min-width: 0; white-space: nowrap; }
#info.wrap #infoBody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#info.wrap #infoBody > div { white-space: normal; }
#infoBox .sec { margin: 0 0 16px; }
.xs { display: none; float: right; width: calc(var(--tile) + var(--edge)); height: var(--tile); }
#info.overlap .xs { display: block; }
#infoBody > div > .sec:last-child { margin-bottom: 0; }
#infoBox .h { color: var(--a); display: block; }
#infoBox .ln { display: block; }
#infoBox .ln.gap { margin-top: 1.5em; }
#infoBody > div:first-child { white-space: normal; width: 40ch; }
#infoBox .kbd { display: grid; grid-template-columns: 9ch 1fr; column-gap: 12px; }
#infoBox .credit { color: var(--b); }
#infoBox a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--bw); text-underline-offset: 3px; }
#infoBox a:hover { text-decoration-thickness: 1px; }
.sh { display: inline-block; width: 1ch; height: .72em; vertical-align: baseline; }
.sh svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sh path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }

@media (max-width: 640px) {
  :root { --tile: 33px; --edge: 8px; }
  #r1 { font-size: calc(16px * var(--k, .75)); padding-inline: calc(10px * var(--k, .75)); }
  #r2 { font-size: 11px; }
  .t { font-size: calc(13px * var(--k, .75)); }
  .t.q { font-size: calc(16px * var(--k, .75)); }
  #info { padding: 0; align-items: stretch; background: rgb(0 0 0 / 75%); }
  #infoBox {
  width: 100%;
  height: 100%;
  border: 0;
  font-size: 16px;
  line-height: 1.6;
  background: transparent;
}
  #infoBody > div:first-child { width: auto; }
  #infoBody > div { white-space: normal; }
  #infoBody { --pad: 40px; flex: 1; grid-template-columns: minmax(0, 1fr); align-content: start; row-gap: 28px; padding: var(--pad); }
  /* a float the size of the close tile's corner: the heading wraps around it, every line below runs the full width */
  #info .xs { display: block; width: calc(var(--edge) + var(--tile) - var(--pad) + 10px); height: calc(var(--edge) + var(--tile) - var(--pad) + 4px); }
  #r2 { display: none; }
}