/* Gridsong, in the Commonplace house style (design/maeda): one typeface, flat surfaces, hairlines,
   uppercase tracked chrome, a true light/dark inversion. The instrument's own geometry (round caps, the
   rounded chassis, the LED glow) is the work; everything around it is chrome. Blue is the one highlight. */
@font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'iA Writer Quattro'; src: url('../fonts/iAWriterQuattroS-BoldItalic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --bg: #ffffff; --fg: #000000; --line: #d6d6d6; --muted: #6f6f6f;
  --led-off: #ffffff; --led-ring: #000000; --led-hot: #dce8ff;
  --hi: #1f5eff;
  --font: 'iA Writer Quattro', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --transition: color .15s linear, opacity .15s linear, background-color .15s linear, border-color .15s linear;
  --device-w: 760px;
  color-scheme: light;
}
html.theme-dark {
  --bg: #0d0d0d; --fg: #f0f0f0; --line: #2a2a2a; --muted: #8b8b8b;
  --led-off: #0d0d0d; --led-ring: #f0f0f0; --led-hot: #e8f0ff;
  --hi: #4d8bff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-weight: 400; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; overflow-x: hidden; }
#app { display: flex; flex-direction: column; align-items: center; padding: 16px 10px 20px; min-height: 100%; }
html.embed #app { padding: 6px 6px 4px; }
button { font: inherit; color: inherit; }

/* ---- stage: device plus the pulled-out labels around it ------------------------------------------ */
#stage { position: relative; width: 100%; display: flex; justify-content: center; padding: 0; }
html.labels #stage { padding: 72px var(--label-pad, 290px) 86px; }
#leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
#labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
html:not(.labels) #leaders, html:not(.labels) #labels { display: none; }
.callout { position: absolute; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); white-space: nowrap; line-height: 1.2;
  padding: 0 0 5px; border-bottom: 1px solid var(--hi); }
.callout.c-left { text-align: right; }
.callout .k { color: var(--hi); margin-right: .5em; }
.callout .sub { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-top: 3px; white-space: normal; max-width: 200px; line-height: 1.3; }
.callout.c-left .sub { margin-left: auto; }
html.embed .callout .sub { display: none; }  /* in a small frame the fan stays tight; the standalone page carries the detail */
.callout.c-web { border-bottom-style: dashed; }
.device-wrap { transform-origin: top center; position: relative; z-index: 1; }

/* ---- the chassis ----------------------------------------------------------------------------- */
.device { width: var(--device-w); position: relative; padding: 16px 20px 18px; border-radius: 28px;
  background: var(--bg); border: 1.5px solid var(--fg);
  display: grid; grid-template-rows: auto 1fr auto; gap: 10px; }

/* printed captions on the body */
.tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); line-height: 1.2; text-align: center; display: block; }
.tag small { display: none; }

/* round button caps: flat discs, outlined */
.cap { display: block; width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 4px; background: var(--bg); border: 1.5px solid var(--fg); transition: var(--transition); }
button.fn, button.hw { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; touch-action: none; display: block; }
button.fn:active .cap, button.hw:active .cap, .hw.down .cap { background: var(--fg); }
.fn.on .cap, .hw.on .cap, .mode.on .cap { background: var(--hi); border-color: var(--hi); }
.fn.on .tag, .hw.on .tag, .mode.on .tag { color: var(--hi); }

/* top row: model tag, CLEAR, wordmark */
.top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 0 12px; min-height: 56px; }
.top .model, .top .brand { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.top .brand { justify-self: end; }
.hw.round.clear .cap { width: 34px; height: 34px; }

/* main: side controls and the LED panel */
.main { display: grid; grid-template-columns: 66px 1fr 66px; gap: 12px; align-items: stretch; }
.side { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 4px; }
.side .fn { width: 100%; }
.modes { display: flex; flex-direction: column; justify-content: space-between; flex: 1; margin-top: 12px; padding-bottom: 4px; width: 100%; }
.mode { cursor: pointer; touch-action: none; text-align: center; }
.mode .cap { width: 18px; height: 18px; margin-bottom: 3px; border-width: 1px; }
.mode .tag { font-size: 11px; }
.mode .n { display: none; }
.power { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 10px; appearance: none; background: none; border: 0; cursor: pointer; touch-action: none; }
.power .tag { transition: var(--transition); }
html.off .power .tag, html.off .tag { color: var(--muted); }
.power .light { width: 8px; height: 8px; border-radius: 50%; background: var(--hi); transition: var(--transition); }
.power .light.off { background: var(--line); }

.matrix-wrap { padding: 12px; background: var(--bg); border: 1.5px solid var(--fg); }
canvas#matrix { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: none; cursor: pointer; }

/* bottom row: scroller, LCD, OK / CANCEL */
.bottom { display: grid; grid-template-columns: 66px 1fr 66px; gap: 12px; align-items: center; margin-top: 2px; }
.console { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 2px; }
.jog-col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.jog-col .arrow { font-size: 8px; color: var(--muted); }
.jog { width: 48px; height: 84px; position: relative; cursor: ns-resize; touch-action: none; background: var(--bg); border: 1.5px solid var(--fg); }
.jog::before { content: ""; position: absolute; inset: 3px; background: var(--fg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='6'><rect y='0' width='4' height='1.5'/></svg>") 0 var(--roll, 0px) / 4px 6px repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='6'><rect y='0' width='4' height='1.5'/></svg>") 0 var(--roll, 0px) / 4px 6px repeat; }
.lcd { background: var(--bg); color: var(--fg); border: 1.5px solid var(--fg); padding: 6px 12px;
  font-family: var(--font); font-size: 13px; line-height: 1.3; white-space: pre; letter-spacing: 0; min-width: 26ch; }
.lcd .sel { background: var(--fg); color: var(--bg); }
.lcd .dim { opacity: .55; }
.ok-col { display: flex; align-items: flex-start; gap: 16px; }
.hw.round .cap { width: 26px; height: 26px; }

/* ---- footer under the chassis: hint prose, text switches --------------------------------------- */
.footer { width: 100%; max-width: var(--device-w); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 12px; }
.hint { font-size: 13px; color: var(--muted); min-height: 16px; line-height: 1.55; }
.hint b { color: var(--fg); font-weight: 700; }
.tools { display: flex; gap: 16px; flex-shrink: 0; font-size: 11.2px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); line-height: 20px; }
.switch { display: inline-flex; gap: .45em; }
.opt { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--muted); text-decoration: none; transition: var(--transition); letter-spacing: inherit; text-transform: inherit; font-weight: inherit; }
.opt:hover { opacity: .5; }
.opt.on, .opt[aria-pressed="true"] { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
html.narrow .switch.labels { display: none; }
html.hosted-theme .switch.theme { display: none; }
.kbd { display: inline-block; border: 1px solid var(--line); padding: 0 4px; font-size: 11px; font-family: var(--font); color: var(--fg); margin: 0 1px; line-height: 1.4; }

/* ---- help overlay ------------------------------------------------------------------------------ */
.overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
.overlay[hidden] { display: none; }
.card { background: var(--bg); color: var(--fg); border: 1px solid var(--fg); max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; padding: 28px 32px; font-size: 15px; line-height: 1.55; -webkit-user-select: text; user-select: text; }
.card h1 { margin: 0 0 8px; font-size: 13.6px; letter-spacing: .06em; text-transform: uppercase; }
.card h2 { font-size: 12.8px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 26px 0 8px; }
.card table { border-collapse: collapse; width: 100%; }
.card td { padding: 4px 8px 4px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.card td:first-child { font-weight: 700; white-space: nowrap; width: 140px; }
.card .close { float: right; appearance: none; border: 0; background: none; color: var(--fg); font-size: 11.2px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: var(--transition); }
.card .close:hover { opacity: .5; }
.hidden-input { display: none; }