/* Match the ASM slides. Traces only change when their controls are pressed. */
.has-trace { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
.has-trace .code { font-size: 18px; }
.has-trace .analysis { padding-left: 22px; }
.has-trace .analysis > p { font-size: 18px; line-height: 1.45; margin-bottom: 14px; }
.instruction-trace { border-top: 1px solid #334155; padding-top: 16px; margin-top: 18px; }
.instruction-trace .trace-title { font-size: 16px; color: #f1f5f9; margin: 0 0 13px; line-height: 1.45; }
.trace-rows { display: grid; gap: 8px; }
.trace-row { display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 10px; align-items: baseline; }
.trace-label { font-size: 13px; color: #94a3b8; }
.trace-value { font: 16px/1.5 'Fira Code', monospace; color: #cbd5e1; white-space: pre-wrap; overflow-wrap: anywhere; }
.trace-bit.changed { color: #fbbf24; text-decoration: underline; text-underline-offset: 4px; }
.trace-legend { display: block; color: #94a3b8; font-size: 11px; line-height: 1.4; margin-top: 9px; }
.instruction-trace .trace-detail { font-size: 15px; line-height: 1.5; margin: 13px 0 0; color: #94a3b8; }
.trace-controls { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 15px; }
.trace-controls button { border: 1px solid #475569; background: transparent; color: #cbd5e1; min-width: 42px; min-height: 36px; cursor: pointer; border-radius: 3px; }
.trace-controls button:disabled { opacity: .3; cursor: default; }
.trace-position { font: 12px 'Fira Code', monospace; color: #94a3b8; min-width: 78px; text-align: center; }
.code .line.trace-active { border-left-color: #22d3ee; background: #22d3ee0b; }
.walk-table { width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 16px; line-height: 1.5; }
.walk-table th { text-align: left; color: #94a3b8; font-weight: 400; border-bottom: 1px solid #475569; }
.walk-table td, .walk-table th { padding: 8px 8px 8px 0; }
.walk-table td { font-family: 'Fira Code', monospace; font-size: 15px; }
/* The contents selector scales to longer guided sequences; avoid forty dots. */
body:has(.instruction-trace) #slide-indicator { display: none; }
@media (max-height: 760px) and (min-width: 900px) {
  .has-trace .code { font-size: 17px; }
  .has-trace .analysis > p { font-size: 17px; margin-bottom: 12px; }
  .instruction-trace { padding-top: 12px; margin-top: 12px; }
  .instruction-trace .trace-title { font-size: 15px; margin-bottom: 10px; }
  .instruction-trace .trace-detail { font-size: 14px; margin-top: 10px; }
  .trace-controls { margin-top: 12px; }
  .walk-table td, .walk-table th { padding-top: 6px; padding-bottom: 6px; }
}
@media (max-width: 900px) {
  .has-trace { grid-template-columns: 1fr; }
  .has-trace .analysis { padding-left: 0; }
  .has-trace .code { font-size: 14px; }
  .walk-table { font-size: 14px; }
  .walk-table td { font-size: 13px; }
  .has-trace .analysis > p { font-size: 16px; }
}
@media (max-width: 540px) {
  .has-trace .code { font-size: 11px; }
  .trace-value { font-size: 14px; }
  .trace-label { font-size: 12px; }
  .trace-row { grid-template-columns: 96px minmax(0,1fr); }
}