/* ============================================================
   base-n — an instrument panel drawn like a datasheet page.
   Hairline rules, numbered gutters, lit bits.
   ============================================================ */

:root {
  --ground: #0a0e14;
  --panel: #10151d;
  --panel-2: #151c26;
  --rule: #1f2833;
  --rule-strong: #2e3a49;
  --ink: #dde5ee;
  --ink-dim: #93a1b2;
  --ink-faint: #61707f;
  --signal: #ffb020;
  --signal-soft: rgba(255, 176, 32, .13);
  --signal-glow: rgba(255, 176, 32, .30);
  --sign: #ff5f7e;
  --exponent: #a78bfa;
  --mantissa: #2dd4bf;
  --danger: #ff6b6b;
  --ok: #4ade80;

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 3px;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f6f5f1;
    --panel: #ffffff;
    --panel-2: #faf9f5;
    --rule: #e2ded5;
    --rule-strong: #c6c1b5;
    --ink: #12161d;
    --ink-dim: #565e6b;
    --ink-faint: #868d99;
    --signal: #b8720b;
    --signal-soft: rgba(184, 114, 11, .12);
    --signal-glow: rgba(184, 114, 11, .18);
    --sign: #cf2f57;
    --exponent: #6741d9;
    --mantissa: #0d8579;
    --danger: #c92a2a;
    --ok: #128a4c;
  }
}

:root[data-theme="light"] {
  --ground: #f6f5f1;
  --panel: #ffffff;
  --panel-2: #faf9f5;
  --rule: #e2ded5;
  --rule-strong: #c6c1b5;
  --ink: #12161d;
  --ink-dim: #565e6b;
  --ink-faint: #868d99;
  --signal: #b8720b;
  --signal-soft: rgba(184, 114, 11, .12);
  --signal-glow: rgba(184, 114, 11, .18);
  --sign: #cf2f57;
  --exponent: #6741d9;
  --mantissa: #0d8579;
  --danger: #c92a2a;
  --ok: #128a4c;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
}

h1, h2, h3 { margin: 0; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- header ---------------------------------------------------------- */

.rail { border-bottom: 1px solid var(--rule); background: var(--panel); }

.rail-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: baseline;
  gap: 18px;
}

.mark {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.02em;
}
.mark-sub { color: var(--signal); }

.tagline {
  margin: 0;
  color: var(--ink-faint);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ghost {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
  border-radius: var(--radius);
  padding: 6px 12px;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ghost:hover { border-color: var(--signal); color: var(--signal); }

/* ---- control console -------------------------------------------------- */

.console {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule);
}

.console-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 24px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.4fr) auto;
  gap: 28px;
  align-items: start;
}

.ctl-label {
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}

.width-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.width-input {
  width: 74px;
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 7px 8px;
  font-family: var(--mono);
  font-size: .95rem;
  text-align: right;
}
.width-unit { color: var(--ink-faint); font-size: .8rem; letter-spacing: .08em; }

.presets { display: flex; gap: 4px; flex-wrap: wrap; }
.presets button {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  border-radius: var(--radius);
  padding: 6px 9px;
  font-family: var(--mono);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.presets button:hover { border-color: var(--rule-strong); color: var(--ink); }
.presets button[aria-pressed="true"] {
  border-color: var(--signal);
  color: var(--signal);
  background: var(--signal-soft);
}

.segmented { display: flex; flex-wrap: wrap; gap: 4px; }
.segmented button {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  border-radius: var(--radius);
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
  line-height: 1.25;
  transition: border-color .15s, color .15s, background .15s;
}
.segmented button:hover { border-color: var(--rule-strong); color: var(--ink); }
.segmented button[aria-checked="true"] {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--signal);
}
.segmented .sub {
  display: block;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.segmented button[aria-checked="true"] .sub { color: inherit; opacity: .75; }

.toggles { display: flex; flex-direction: column; gap: 6px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink-dim); cursor: pointer; }
.chk input { accent-color: var(--signal); width: 15px; height: 15px; }
.chk:hover { color: var(--ink); }

/* ---- panels ----------------------------------------------------------- */

main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 64px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px 26px;
  margin-bottom: 22px;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.panel-head h2 {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}
.panel-sub { margin: 0; color: var(--ink-faint); font-size: .84rem; }

.hint { margin: 10px 0 0; color: var(--ink-faint); font-size: .8rem; }

/* overflow: the entered value cannot be held at this width and representation */
.flag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid var(--danger);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.status {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 18px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--danger);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  font-size: .84rem;
}
.status .chip { flex: none; }

/* ---- conversion rows -------------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;   /* fields grow with the value; labels stay on the first line */
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.row-head, .row .copy { margin-top: 9px; }
.row:last-child { border-bottom: none; }

.row-name { font-size: .9rem; font-weight: 600; letter-spacing: .01em; }
.row-base {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.row-field { position: relative; display: flex; }
.row-field input, .row-field textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 1rem;
  letter-spacing: .04em;
  resize: none;
  overflow: hidden;
}
.row-field textarea { line-height: 1.6; }
#in-2 { font-size: .92rem; }   /* binary runs longest — give it a denser setting */
.row-field input:focus, .row-field textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 2px var(--signal-soft);
}
.row-field.invalid input, .row-field.invalid textarea,
.row-field.warn input, .row-field.warn textarea { border-color: var(--danger); }

.row-note {
  grid-column: 2 / -1;
  margin: -4px 0 0;
  font-size: .78rem;
  color: var(--ink-faint);
}
.row-note.error { color: var(--danger); }
.row-note:empty { display: none; }

.copy {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-faint);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.copy:hover { border-color: var(--signal); color: var(--signal); }

/* ---- readout facts ---------------------------------------------------- */

.readout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 20px 0 4px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.fact { background: var(--panel-2); padding: 11px 14px; min-width: 0; }
.fact dt {
  font-size: .66rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.fact dd {
  margin: 0;
  font-family: var(--mono);
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.fact dd.accent { color: var(--signal); }
.fact.wide { grid-column: 1 / -1; }

/* ---- the bit field strip (the signature) ------------------------------ */

.strip-head {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.strip-head h3 {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.tools { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.tools button {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-dim);
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: .74rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.tools button:hover { border-color: var(--signal); color: var(--signal); }

.strip { margin-top: 14px; }

.bitrow {
  display: grid;
  grid-template-columns: 3.4ch minmax(0, 1fr) 3.4ch;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.gutter {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-faint);
  text-align: right;
}
.gutter-r { text-align: left; }

.cells {
  display: grid;
  grid-template-columns: repeat(var(--cols, 16), minmax(0, 1fr));
  gap: 3px;
}
.cells > .spacer { visibility: hidden; }

.bit {
  appearance: none;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  background: var(--panel-2);
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: .8rem;
  padding: 7px 0;
  border-radius: 2px;
  cursor: pointer;
  transition: background .09s linear, color .09s linear, border-color .09s linear;
}
.bit:hover { border-color: var(--rule-strong); color: var(--ink); }
.bit.on {
  background: var(--signal-soft);
  border-color: var(--signal);
  color: var(--signal);
  box-shadow: inset 0 0 10px var(--signal-glow);
}
.cells > .byte-end { margin-right: 7px; }
.cells > *:last-child { margin-right: 0; }

/* IEEE field colouring: the bottom rule marks the field extent even at zero */
.bit.f-sign { border-bottom-color: var(--sign); }
.bit.f-exponent { border-bottom-color: var(--exponent); }
.bit.f-mantissa { border-bottom-color: var(--mantissa); }
.bit.f-sign.on { background: color-mix(in srgb, var(--sign) 14%, transparent); border-color: var(--sign); color: var(--sign); box-shadow: none; }
.bit.f-exponent.on { background: color-mix(in srgb, var(--exponent) 14%, transparent); border-color: var(--exponent); color: var(--exponent); box-shadow: none; }
.bit.f-mantissa.on { background: color-mix(in srgb, var(--mantissa) 14%, transparent); border-color: var(--mantissa); color: var(--mantissa); box-shadow: none; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
.legend span { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--ink-dim); }
.legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---- IEEE-754 panel --------------------------------------------------- */

.fields { display: grid; gap: 10px; margin-top: 18px; }
.field-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-left-width: 3px;
  border-radius: var(--radius);
}
.field-row.sign { border-left-color: var(--sign); }
.field-row.exponent { border-left-color: var(--exponent); }
.field-row.mantissa { border-left-color: var(--mantissa); }
.field-name { font-size: .82rem; font-weight: 600; }
.field-range {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.field-bits {
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .1em;
  overflow-wrap: anywhere;
}
.field-meaning { font-size: .82rem; color: var(--ink-dim); margin-top: 4px; }
.field-meaning b { color: var(--ink); font-family: var(--mono); font-weight: 500; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  margin: 16px 0 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

/* ---- memory layout ---------------------------------------------------- */

.mem-scroll { overflow-x: auto; margin-top: 16px; }
.mem { border-collapse: collapse; font-family: var(--mono); font-size: .82rem; }
.mem th, .mem td {
  border: 1px solid var(--rule);
  padding: 7px 10px;
  text-align: center;
  white-space: nowrap;
}
.mem th {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: .7rem;
  letter-spacing: .08em;
}
.mem th.side, .mem td.side {
  text-align: left;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: var(--panel);
  position: sticky;
  left: 0;
}
.mem td.byte { color: var(--ink); background: var(--panel-2); }
.mem td.byte.lsb { color: var(--signal); }

/* ---- arithmetic ------------------------------------------------------- */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
  margin-top: 18px;
}
.operand-row { display: flex; gap: 6px; }
.operand-row input {
  width: 100%;
  min-width: 0;
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-family: var(--mono);
  letter-spacing: .04em;
}
.operand-row input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 2px var(--signal-soft); }
.operand-row input.invalid, .operand-row input.warn { border-color: var(--danger); }

select {
  background: var(--panel-2);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 10px 8px;
  font-family: var(--mono);
  font-size: .85rem;
  cursor: pointer;
}
#calcOp { min-width: 128px; }

.primary {
  background: var(--signal);
  border: 1px solid var(--signal);
  color: #0a0e14;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  transition: filter .15s;
}
.primary:hover { filter: brightness(1.08); }

.calc-aux { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.calc-aux .ghost { margin-left: 0; }

.result { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 18px; }
.result.error-state .result-rows { display: none; }
.result-rows { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.result-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 14px;
  background: var(--panel-2);
  padding: 10px 14px;
}
.result-row dt {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: center;
}
.result-row dd { margin: 0; font-family: var(--mono); font-size: .92rem; overflow-wrap: anywhere; }
.result-row.headline dd { color: var(--signal); font-size: 1.05rem; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-dim);
}
.chip.warn { border-color: var(--signal); color: var(--signal); background: var(--signal-soft); }
.chip.bad { border-color: var(--danger); color: var(--danger); }

.result-note { margin: 12px 0 0; font-size: .82rem; color: var(--ink-dim); }
.result-note.error { color: var(--danger); }

.colophon {
  text-align: center;
  color: var(--ink-faint);
  font-size: .78rem;
  letter-spacing: .06em;
  margin: 34px 0 0;
}

/* ---- responsive ------------------------------------------------------- */

@media (max-width: 900px) {
  /* stacked, the console is too tall to hold the top of the viewport */
  .console { position: static; }
  .console-in { grid-template-columns: 1fr; gap: 18px; }
  .calc { grid-template-columns: 1fr; align-items: stretch; }
  .calc-go .primary { width: 100%; }
}

@media (max-width: 640px) {
  .rail-in { padding: 14px 16px; flex-wrap: wrap; gap: 10px; }
  .tagline { flex-basis: 100%; order: 3; }
  .console-in { padding: 14px 16px; }
  main { padding: 20px 16px 48px; }
  .panel { padding: 18px 16px 22px; }
  .row { grid-template-columns: 1fr auto; gap: 10px; }
  .row-head { grid-column: 1; }
  .row-field { grid-column: 1 / -1; }
  .copy { grid-row: 1; grid-column: 2; }
  .row-note { grid-column: 1 / -1; }
  .result-row { grid-template-columns: 1fr; gap: 3px; }
  .field-row { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---- user guide -------------------------------------------------------- */

.rail-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.rail-actions .ghost { margin-left: 0; }
a.ghost { text-decoration: none; display: inline-flex; align-items: center; }

.guide { max-width: 940px; }
.guide .panel { padding: 24px 26px 28px; }

.prose { max-width: 68ch; }
.prose p { margin: 12px 0 0; color: var(--ink-dim); }
.prose p:first-child { margin-top: 0; }
/* prose that follows a table or diagram still needs its air */
.dtable-scroll + .prose p:first-child,
.anatomy + .prose p:first-child { margin-top: 18px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul { margin: 12px 0 0; padding-left: 20px; color: var(--ink-dim); }
.prose li { margin: 5px 0; }

.doc-h3 {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 26px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
.doc-h3:first-of-type { margin-top: 18px; }

code, kbd {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--ink);
  white-space: nowrap;
}
kbd { border-bottom-width: 2px; }

.dtable-scroll { overflow-x: auto; margin-top: 14px; }
.dtable { border-collapse: collapse; width: 100%; font-size: .86rem; }
.dtable th, .dtable td {
  border: 1px solid var(--rule);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.dtable th {
  color: var(--ink-faint);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dtable td { color: var(--ink-dim); }
.dtable td:first-child { color: var(--ink); white-space: nowrap; }
.dtable td code { white-space: nowrap; }

.toc { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin-top: 18px; }
.toc a {
  background: var(--panel-2);
  padding: 11px 14px;
  text-decoration: none;
  color: var(--ink-dim);
  font-size: .85rem;
  transition: color .15s, background .15s;
}
.toc a:hover { color: var(--signal); background: var(--signal-soft); }
.toc a span { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }

/* the field anatomy diagram — the same colours the app paints the bits with */
.anatomy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.seg { border: 1px solid var(--rule); border-bottom-width: 3px; border-radius: 2px; padding: 9px 12px; background: var(--panel-2); }
.seg b { display: block; font-family: var(--mono); font-size: .92rem; letter-spacing: .1em; color: var(--ink); font-weight: 500; }
.seg i { font-style: normal; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.seg.s-sign { border-bottom-color: var(--sign); }
.seg.s-sign b { color: var(--sign); }
.seg.s-exp { border-bottom-color: var(--exponent); }
.seg.s-exp b { color: var(--exponent); }
.seg.s-man { border-bottom-color: var(--mantissa); }
.seg.s-man b { color: var(--mantissa); }

.recipe { counter-reset: step; margin: 16px 0 0; padding: 0; list-style: none; }
.recipe > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 34px;
  margin: 9px 0;
  color: var(--ink-dim);
  font-size: .9rem;
}
.recipe > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--signal);
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 1px 0;
}
.recipe b { color: var(--ink); font-weight: 600; }

.outcome {
  margin: 14px 0 0;
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  border-radius: var(--radius);
  background: var(--panel-2);
  font-size: .86rem;
  color: var(--ink-dim);
}
.outcome b { color: var(--ink); font-family: var(--mono); font-weight: 500; }

@media (max-width: 640px) {
  .rail-actions { width: 100%; }
  .guide .panel { padding: 18px 16px 22px; }
}