/* ogram: a field instrument, drawn flat. Amber phosphor on near-black, condensed stencil labels,
   hairlines instead of bevels. The keys sit at the bottom, the big one under the right thumb. */
:root {
  --bg: #0b0b0a; --rule: #24211b; --rule-hi: #3a352b;
  --ink: #b9b2a0; --ink-dim: #5f5a4f;
  --ph: #ffb347; --ph-hi: #ffe2b0; --ph-dim: #7a6646; --ph-line: #241d13; --ph-bg: #080706;
  --cyan: #8fd6cc; --hot: #ff5a2e;
  --mono: 'Share Tech Mono', ui-monospace, Menlo, monospace;
  --hw: 'Saira Condensed', 'Arial Narrow', sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 14px/1.45 var(--mono); overflow: hidden; overscroll-behavior: none; display: grid; place-items: center; }
a { color: inherit; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }

.device {
  width: 100%; max-width: 480px; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  user-select: none; -webkit-user-select: none;
}
@media (min-width: 560px) { .device { height: min(100dvh, 920px); padding: 24px 16px; } }

/* ── header ── */
.plate.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.mark { display: flex; align-items: baseline; gap: 10px; line-height: 1; }
.brand { font: 700 18px/1 var(--hw); letter-spacing: 5px; color: var(--ph-hi); }
.model { font: 500 9px/1 var(--hw); letter-spacing: 2px; color: var(--ink-dim); }
.lamps { display: flex; align-items: center; gap: 10px; font: 500 9px/1 var(--hw); letter-spacing: 1.5px; color: var(--ink-dim); }
.lamp { display: inline-flex; align-items: center; gap: 5px; }
.lamp i, .beats i, .key .led { width: 5px; height: 5px; background: var(--rule-hi); display: inline-block; transition: background .06s; }
.lamp.on { color: var(--ink); }
.lamp.on i { background: var(--hot); box-shadow: 0 0 6px var(--hot); }
#led-lock.on i { background: var(--ph); box-shadow: 0 0 6px var(--ph); }
.beats { display: inline-flex; gap: 3px; }
.beats i.on { background: var(--ph); box-shadow: 0 0 5px var(--ph); }
.beats i.down.on { background: var(--hot); box-shadow: 0 0 5px var(--hot); }
.key-mini { all: unset; cursor: pointer; width: 20px; height: 20px; text-align: center; font: 700 11px/18px var(--hw); color: var(--ink-dim); border: 1px solid var(--rule-hi); }
.key-mini:active, .key-mini.on { color: var(--ph); border-color: var(--ph); }
.plate.bottom { display: flex; justify-content: space-between; font: 500 8px/1 var(--hw); letter-spacing: 2px; color: #3f3b33; }

/* ── the screen ── */
.bezel { flex: 1; min-height: 0; }
.crt {
  position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: var(--ph-bg); border: 1px solid var(--rule);
  color: var(--ph); text-shadow: 0 0 5px #ffb34733;
}
.crt::after { /* faint scanlines: the only nod to a tube */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(180deg, #0000 0 2px, #0000001f 2px 3px);
}
.ro { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 10px 12px 8px; border-bottom: 1px solid var(--ph-line); }
.cell { display: flex; flex-direction: column; min-width: 0; }
.cell.wide { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 10px; }
.k { font: 500 9px/1.3 var(--hw); letter-spacing: 2px; text-transform: uppercase; color: var(--ph-dim); text-shadow: none; }
.v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 1.25; }
.v b { font-weight: normal; color: var(--ph-hi); font-size: 19px; }
.v .sub { color: var(--ph-dim); font-size: 12px; }
.teach { all: unset; cursor: pointer; color: var(--hot); margin-left: 6px; font-size: 12px; }
.teach::before { content: '[ '; } .teach::after { content: ' ]'; }

#view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vtitle { display: flex; justify-content: space-between; padding: 6px 12px 0; font: 500 9px/1 var(--hw); letter-spacing: 2px; text-transform: uppercase; color: var(--ph-dim); text-shadow: none; }
#status.on { color: var(--hot); }
#cv { display: block; width: 100%; flex: 1; min-height: 0; }
#panel { display: none; overflow-y: auto; padding: 8px 12px 12px; font-size: 13px; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
#view.text #cv { display: none; }
#view.text #panel { display: block; flex: 1; }
#view.both #cv { flex: 1.3; }
#view.both #panel { display: block; flex: 1; border-top: 1px solid var(--ph-line); }
#about { display: none; position: absolute; inset: 0; z-index: 3; overflow-y: auto; padding: 14px 14px; background: var(--ph-bg); font-size: 13px; }
#about.on { display: block; }
#about p { margin: 0 0 12px; max-width: 46ch; }
#about .big { font-size: 19px; line-height: 1.3; color: var(--ph-hi); }
#about .dim, .dim { color: var(--ph-dim); }
#about b { font-weight: normal; color: var(--ph-hi); }

#panel h3 { font: 500 9px/1 var(--hw); letter-spacing: 2px; text-transform: uppercase; color: var(--ph-dim); margin: 2px 0 8px; text-shadow: none; }
#panel h3:not(:first-child) { margin-top: 16px; }
.hl { color: var(--ph-hi); font-weight: normal; }
.bar { display: grid; grid-template-columns: 15ch 1fr 4ch; gap: 8px; align-items: center; font-size: 12px; line-height: 1.7; }
.bar .meter { height: 6px; background: repeating-linear-gradient(90deg, var(--ph-line) 0 4px, transparent 4px 6px); }
.bar .meter span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--ph) 0 4px, transparent 4px 6px); }
.bar .num { text-align: right; color: var(--ph-dim); }
.bar.lead .k2 { color: var(--ph-hi); }
.tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.tile { border: 1px solid var(--ph-line); padding: 3px 7px; min-width: 6ch; line-height: 1.25; }
.tile small { display: block; color: var(--ph-dim); font-size: 10px; }
.tile.loop { border-color: var(--ph-dim); }
.tile.now { border-color: var(--ph); }
pre.code { margin: 0; padding: 8px 0; overflow-x: auto; font: 11px/1.5 var(--mono); white-space: pre; color: var(--ph-hi); }
pre.code .c { color: var(--ph-dim); }
pre.code .s { color: var(--cyan); }
.actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.actions button, .actions a { all: unset; cursor: pointer; padding: 8px 11px; border: 1px solid var(--ph-dim); color: var(--ph); font: 500 11px/1 var(--hw); letter-spacing: 1.5px; text-transform: uppercase; }
.actions button:active, .actions a:active { border-color: var(--ph); }
.actions .primary { background: var(--ph); color: #1a0f00; border-color: var(--ph); text-shadow: none; }
input.name { font: inherit; background: transparent; color: var(--ph-hi); border: 0; border-bottom: 1px solid var(--ph-dim); padding: 6px 0; width: min(100%, 240px); font-size: 16px; }
input.name:focus { outline: none; border-color: var(--ph); }
ul.lib { list-style: none; padding: 0; margin: 0; }
ul.lib li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--ph-line); }
ul.lib button { all: unset; cursor: pointer; color: var(--ph-dim); }
.note { color: var(--ph-dim); font-size: 11px; margin: 8px 0 0; }

/* discovery ticker */
#log { padding: 5px 12px 7px; border-top: 1px solid var(--ph-line); font-size: 11px; height: calc(3 * 1.45em + 12px); overflow: hidden; color: var(--ph-dim); }
#log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; }
#log div:last-child { color: var(--ph-hi); }
#log .tm { margin-right: 8px; }
#log .kd { font: 500 9px var(--hw); letter-spacing: 1.5px; text-transform: uppercase; margin-right: 6px; }
#log .k-ident .kd, #log .k-sys .kd { color: var(--hot); }
#log .k-key .kd, #log .k-harmony .kd { color: var(--cyan); }

/* ── keys ── */
.keypad { display: grid; grid-template-columns: 1fr 32%; gap: 6px; }
#modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.key {
  all: unset; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 48px; border: 1px solid var(--rule); background: #0f0e0c;
  font: 500 12px/1 var(--hw); letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
  transition: background .08s, border-color .08s;
}
.key:active, .key.pressed { background: #1a1712; }
.key:focus-visible { outline: 1px solid var(--ph); outline-offset: 1px; }
.key .n { position: absolute; top: 5px; left: 6px; font: 500 8px/1 var(--hw); color: var(--ink-dim); letter-spacing: 0; }
.key .led { position: absolute; top: 6px; right: 6px; }
.key.on { border-color: var(--ph-dim); color: var(--ph-hi); }
.key.on .led { background: var(--ph); box-shadow: 0 0 5px var(--ph); }
.side { display: flex; flex-direction: column; gap: 6px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.key.small { min-height: 48px; font-size: 11px; color: var(--ink-dim); }
.key.listen { flex: 1; min-height: 102px; background: var(--hot); border-color: var(--hot); color: #160700; font-size: 17px; font-weight: 700; letter-spacing: 4px; }
.key.listen:active { background: #e04a20; }
.key.listen .led { top: 9px; right: 9px; width: 6px; height: 6px; background: #8a2a10; }
.key.listen.on { background: transparent; color: var(--hot); }
.key.listen.on .led { background: var(--hot); box-shadow: 0 0 8px var(--hot); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3 } }

@media (max-height: 680px) {
  .model, .plate.bottom { display: none; }
  .key, .key.small { min-height: 40px; }
  .key.listen { min-height: 86px; }
  .v b { font-size: 16px; }
  #log { height: calc(2 * 1.45em + 12px); }
}
@media (max-width: 420px) { .model { display: none; } }

/* ── two screens: capture and the samples home ── */
.plate.top { flex-wrap: nowrap; }
.tabs { display: flex; gap: 0; margin-left: auto; margin-right: 4px; }
.tabs button { all: unset; cursor: pointer; padding: 4px 8px; font: 500 10px/1 var(--hw); letter-spacing: 2px; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid transparent; }
.tabs button.on { color: var(--ph-hi); border-bottom-color: var(--ph); }
#nsamples { color: var(--ph-dim); }
@media (max-width: 420px) { .lamps .lamp:not(#info) { display: none; } }
#home { display: none; position: absolute; inset: 0; z-index: 4; flex-direction: column; background: var(--ph-bg); }
body.home #home { display: flex; }
.hhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid var(--ph-line); }
.hhead .actions { margin: 0; }
.hbody { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; user-select: text; -webkit-user-select: text; }
ol.samples { list-style: none; margin: 0; padding: 0; counter-reset: s; }
ol.samples li { display: grid; grid-template-columns: 2.4ch 1fr auto; gap: 2px 10px; padding: 9px 12px; border-bottom: 1px solid var(--ph-line); cursor: pointer; }
ol.samples li:active { background: #15100a; }
ol.samples .no { color: var(--ph-dim); font-size: 11px; grid-row: span 2; padding-top: 3px; }
ol.samples .nm { color: var(--ph-hi); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ol.samples .when { color: var(--ph-dim); font-size: 11px; text-align: right; }
ol.samples .sum { grid-column: 2 / -1; color: var(--ph); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ol.samples .sum span { color: var(--ph-dim); }
.empty { padding: 18px 12px; color: var(--ph-dim); max-width: 44ch; }
.empty b { color: var(--ph-hi); font-weight: normal; }
.detail { padding: 10px 12px 14px; }
.detail .back { all: unset; cursor: pointer; font: 500 10px/1 var(--hw); letter-spacing: 2px; text-transform: uppercase; color: var(--ph-dim); }
.detail input.name { font-size: 20px; width: 100%; margin: 8px 0 10px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin-bottom: 12px; }
.stats .v { font-size: 14px; }
.stats .v b { font-size: 17px; }
.grid16 { font-size: 12px; letter-spacing: 3px; line-height: 1.5; }
.grid16 span { display: inline-block; width: 5ch; letter-spacing: 0; color: var(--ph-dim); }
.key.small .led { top: 6px; right: 6px; }
.key.flash .led { background: var(--hot); box-shadow: 0 0 6px var(--hot); }
.model { display: none; }
.tabs button { white-space: nowrap; }