/* Oriel — Line/OP-1 wireframes */
:root {
  --paper: oklch(0.97 0.01 85);
  --paper-2: oklch(0.94 0.01 85);
  --ink: oklch(0.22 0.01 260);
  --ink-2: oklch(0.45 0.01 260);
  --ink-3: oklch(0.65 0.01 260);
  --hair: oklch(0.22 0.01 260 / 0.9);
  --hair-soft: oklch(0.22 0.01 260 / 0.18);
  --hair-faint: oklch(0.22 0.01 260 / 0.08);

  /* OP-1 encoders — used functionally */
  --enc-orange: #F26B1F;
  --enc-blue:   #1E6FD9;
  --enc-green:  #5FA85F;
  --enc-white:  var(--ink);

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

html, body { margin: 0; padding: 0; background: var(--paper-2); color: var(--ink); font-family: var(--sans); }
* { box-sizing: border-box; }

/* Device frame: 800x480 hardware face */
.device {
  width: 800px;
  height: 480px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.3;
}
.device.bezel {
  border: 1px solid var(--hair);
}

/* Mono utilities */
.mono { font-family: var(--mono); letter-spacing: 0.02em; }
.up   { text-transform: uppercase; letter-spacing: 0.12em; }
.tiny { font-size: 10px; }
.sm   { font-size: 11px; }
.md   { font-size: 13px; }

/* Hairlines */
.hr { height: 1px; background: var(--hair); width: 100%; }
.hr-soft { height: 1px; background: var(--hair-soft); width: 100%; }

/* Encoder dot */
.dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink); vertical-align: middle;
}
.dot.o { background: var(--enc-orange); }
.dot.b { background: var(--enc-blue); }
.dot.g { background: var(--enc-green); }
.dot.w { background: var(--paper); border: 1px solid var(--ink); }

/* Card label tag */
.tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Hit target soft button */
.btn {
  min-height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.filled { background: var(--ink); color: var(--paper); }

/* Track lines */
.track-line {
  height: 1px; background: var(--ink); position: relative;
}
.track-tick {
  position: absolute; top: -3px; width: 1px; height: 7px; background: var(--ink);
}