/* ---------- "Steer it yourself": keyboard steering demo (js/steer.js). Everything is scoped to #steer.
 * Colors are CSS custom properties only. ---------- */
#steer .desc { margin: 0 auto 18px; max-width: var(--measure); color: var(--muted); font-size: 15px; line-height: 1.55; }
#steer .steer-lab, #steer .steer-read, #steer .steer-hint, #steer .steer-legend, #steer .steer-txt {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}

.steer-demo { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); outline: none; touch-action: manipulation; }
.steer-demo:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.steer-hint { min-height: 1.4em; margin: 0 0 16px; color: var(--muted); text-align: center; }
.steer-demo:focus-within .steer-hint { color: var(--ink); }

.steer-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.steer-col { min-width: 0; width: 100%; max-width: 400px; margin-inline: auto; }
.steer-lab { margin: 0 0 8px; color: var(--ink); line-height: 1.35; }
.steer-col canvas { display: block; width: 100%; aspect-ratio: 1; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); }
.steer-read { margin: 8px 0 0; color: var(--muted); white-space: nowrap; }
.steer-read b { font-weight: 400; color: var(--ink); text-transform: none; letter-spacing: 0.04em; }
.steer-strip { display: grid; grid-template-columns: repeat(16, 1fr); gap: 1px; margin-top: 8px; height: 14px; }
.steer-strip i { display: block; min-width: 0; border: 1px solid var(--line); background: transparent; }
.steer-strip i.on { border-color: transparent; }
.steer-strip i.b { border-left: 2px solid var(--ink); }

.steer-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
.steer-legend span { display: inline-flex; align-items: center; gap: 6px; }
.steer-legend i { display: inline-block; width: 10px; height: 10px; }
.steer-legend .u { background: var(--purple); }
.steer-legend .d { background: var(--ochre); }
.steer-legend .l { background: var(--blue); }
.steer-legend .r { background: var(--magenta); }
.steer-legend .n { background: var(--ghost); }
.steer-legend .bar { width: 2px; height: 12px; background: var(--ink); }
.steer-legend .ring { width: 12px; height: 12px; border: 1.25px dashed var(--muted); border-radius: 50%; }
.steer-legend .gap { width: 14px; height: 0; border-top: 1.5px solid var(--accent); }

.steer-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.steer-start {
  min-width: 104px; height: 38px; padding: 0 20px; background: var(--ink); color: var(--ground); border: 1px solid var(--ink); border-radius: var(--radius);
  font: 500 12px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.steer-start[aria-pressed="true"] { background: transparent; color: var(--ink); }
.steer-opts { display: flex; gap: 24px; align-items: center; }
.steer-txt {
  padding: 8px 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--link-line); text-underline-offset: 4px;
}
.steer-txt[aria-pressed="true"] { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.steer-start:focus-visible, .steer-txt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (max-width: 640px) {
  .steer-demo { padding: 14px; }
  .steer-pair { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .steer-col { max-width: 360px; }
  .steer-controls { justify-content: center; }
  .steer-legend { justify-content: flex-start; }
}
@media (max-width: 420px) {
  #steer .steer-lab, #steer .steer-read { font-size: 11px; letter-spacing: 0.05em; }
}