/* KRAFT Markets: terminal layout, elian.ink palette */
:root {
  --black: #000000;
  --green: #39FF14;
  --green-a: rgba(57, 255, 20, .10);
  --steel-100: #dfe2e5;
  --steel-300: #a7acb2;
  --steel-500: #80858b;
  --steel-700: #3b3e42;
  --steel-800: #222427;
  --steel-900: #111214;

  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --top-h: 84px;
  --drawer-w: 440px;
  --pad: clamp(12px, 1.4vw, 20px);
  --gutter: clamp(12px, 2vw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--black); color: var(--steel-300);
  font: 400 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--black); }
:focus-visible { outline: 1px solid var(--green); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); }
.dim { color: var(--steel-500); }
.fine { font-size: 10.5px; color: var(--steel-500); margin-top: 10px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--green); color: var(--black); padding: 8px 12px; z-index: 100; font-family: var(--mono); }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font-family: var(--mono); font-size: 9.5px; color: var(--steel-500); border: 1px solid var(--steel-700); padding: 0 4px; line-height: 15px; display: inline-block; }

/* ═════════ Top bar ═════════ */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 40; background: var(--black); border-bottom: 1px solid var(--steel-800); }
.bar { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 var(--gutter); }
.wordmark { font-weight: 600; font-size: 15px; letter-spacing: .32em; color: var(--steel-100); text-decoration: none; }
.wordmark span { color: var(--green); }
.crumb { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-300); padding-left: 12px; border-left: 1px solid var(--steel-700); }
.tbtn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--steel-800); padding: 6px 10px; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-100); }
.tbtn:hover, .tbtn[aria-expanded="true"] { border-color: var(--green); color: var(--green); }
.tbtn .ico { font-size: 13px; line-height: 1; }
.badge { background: var(--green); color: var(--black); font-weight: 600; font-size: 10px; padding: 0 5px; line-height: 16px; letter-spacing: 0; }
.jump { display: flex; gap: 2px; margin-left: 10px; }
.jump a { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); text-decoration: none; padding: 6px 8px; }
.jump a b { font-weight: 500; color: var(--steel-700); margin-right: 6px; }
.jump a:hover, .jump a[aria-current="true"] { color: var(--steel-100); }
.jump a[aria-current="true"] b { color: var(--green); }
.status { margin-left: auto; display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); white-space: nowrap; }
.clock { color: var(--steel-100); font-weight: 500; letter-spacing: .04em; }
.st { display: inline-flex; align-items: center; gap: 7px; }
.dot { width: 6px; height: 6px; background: var(--steel-700); display: inline-block; flex: none; }
.dot.on { background: var(--green); animation: pulse 2.4s ease-in-out infinite; }
.dot.warn { background: transparent; outline: 1px solid var(--steel-300); outline-offset: -1px; }
@keyframes pulse { 50% { opacity: .35; } }

/* ticker tape */
.tape { height: 32px; overflow: hidden; border-top: 1px solid var(--steel-800); position: relative; }
.tape::before, .tape::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; z-index: 2; pointer-events: none; }
.tape::before { left: 0; background: linear-gradient(90deg, #000, transparent); }
.tape::after { right: 0; background: linear-gradient(270deg, #000, transparent); }
.tape-track { display: flex; width: max-content; height: 100%; align-items: center; animation: tape 70s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
@keyframes tape { to { transform: translateX(-50%); } }
.tk { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 22px; font-family: var(--mono); font-size: 11.5px; white-space: nowrap; border-right: 1px solid var(--steel-800); }
.tk .s { color: var(--steel-500); letter-spacing: .08em; }
.tk .v { color: var(--steel-100); }
.tk .c { font-size: 10.5px; }
.tk.flash-up .v { color: var(--green); }

/* ═════════ Drawers ═════════ */
.drawer {
  position: fixed; top: var(--top-h); bottom: 0; width: min(var(--drawer-w), 100vw); z-index: 35;
  background: var(--black); display: flex; flex-direction: column;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), visibility .28s;
  visibility: hidden;
}
.drawer.left { left: 0; border-right: 1px solid var(--steel-700); transform: translateX(-100%); }
.drawer.right { right: 0; border-left: 1px solid var(--steel-700); transform: translateX(100%); }
.drawer.open { transform: none; visibility: visible; }
.dr-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--steel-800); }
.dr-h .mono { color: var(--steel-100); font-size: 11.5px; }
.dr-actions { display: flex; gap: 6px; }
.dr-actions button { background: transparent; border: 1px solid var(--steel-800); color: var(--steel-300); cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; }
.dr-actions button:hover { border-color: var(--steel-500); color: var(--steel-100); }
.dr-actions .pin[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.dr-body { flex: 1; overflow-y: auto; padding: 16px 18px 40px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--steel-700) transparent; }
.dr-tools { padding: 12px 18px; border-bottom: 1px solid var(--steel-800); display: grid; gap: 10px; }
.scrim { position: fixed; inset: var(--top-h) 0 0 0; background: rgba(0, 0, 0, .55); z-index: 30; }
@media (min-width: 1280px) {
  .pin { display: inline-block; }
  body.pin-wire main { margin-right: var(--drawer-w); }
  body.pin-guide main { margin-left: var(--drawer-w); }
}
@media (max-width: 1279px) { .pin { display: none; } }

/* Guide content */
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-bottom: 14px; border-bottom: 1px solid var(--steel-800); margin-bottom: 18px; }
.toc a { color: var(--steel-300); text-decoration: none; }
.toc a:hover { color: var(--green); }
#guide section { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--steel-800); }
#guide h3 { font-weight: 500; font-size: 17px; color: var(--steel-100); margin-bottom: 10px; }
#guide h4 { font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); margin: 18px 0 8px; }
#guide p { font-size: 13.5px; margin-bottom: 10px; }
#guide p b { color: var(--steel-100); font-weight: 500; }
.gl dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-100); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--steel-900); scroll-margin-top: 16px; }
.gl dt:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.gl dd { font-size: 13.5px; margin-top: 4px; }
.gl dt.hl { color: var(--green); }
.flow { white-space: pre; overflow-x: auto; font-size: 10.5px; color: var(--steel-300); background: var(--steel-900); padding: 12px; margin: 8px 0 4px; text-transform: none; letter-spacing: 0; line-height: 1.7; }
.demo-range { display: inline-block; width: 60px; height: 4px; background: var(--steel-800); position: relative; vertical-align: middle; margin: 0 4px; }
.demo-range i { position: absolute; left: 70%; top: -3px; width: 2px; height: 10px; background: var(--green); }
.q { width: 18px; height: 18px; border: 1px solid var(--steel-700); background: transparent; color: var(--steel-500); font-family: var(--mono); font-size: 10px; line-height: 16px; padding: 0; cursor: pointer; display: inline-block; text-align: center; }
.q:hover { border-color: var(--green); color: var(--green); }
.links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.links a { color: var(--green); text-decoration: none; }
.linkish { background: none; border: 0; padding: 0; color: var(--steel-300); text-decoration: underline; cursor: pointer; font: inherit; text-transform: inherit; letter-spacing: inherit; }

/* ═════════ Main / terminal grid ═════════ */
main { padding: calc(var(--top-h) + 14px) var(--gutter) 0; transition: margin .28s cubic-bezier(.2, .7, .2, 1); }
section { margin-bottom: 26px; }
.sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sec-h b { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--green); }
.sec-h h2 { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--steel-100); white-space: nowrap; }
.sec-h i { flex: 1; height: 1px; background: var(--steel-800); }
.term { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--steel-800); border: 1px solid var(--steel-800); }
.pn { background: var(--black); padding: var(--pad); min-width: 0; position: relative; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 1180px) {
  .c3, .c4, .c5 { grid-column: span 6; }
  .c8 { grid-column: span 12; }
  .signals .c2 { grid-column: span 4; }
}
@media (max-width: 720px) {
  .c3, .c4, .c5, .c6, .c8 { grid-column: span 12; }
  .signals .c2 { grid-column: span 6; }
}
.pn-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.pn-h .code { font-family: var(--mono); font-size: 10px; color: var(--steel-700); letter-spacing: .06em; }
.pn-h h3 { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-h .meta { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); margin-left: auto; white-space: nowrap; }
.pn-h .meta + .q { margin-left: 0; }
.pn-h .q { margin-left: auto; flex: none; }
.pn-h .meta ~ .q { margin-left: 0; }

/* ═════════ Signals ═════════ */
.sig { background: var(--black); padding: 14px var(--pad) 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0; transition: background .2s; }
.sig:hover { background: var(--steel-900); }
.sig .lab { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-500); }
.sig .state { font-family: var(--mono); font-weight: 600; font-size: clamp(15px, 1.25vw, 19px); letter-spacing: .04em; color: var(--steel-100); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig.hot .state { color: var(--green); }
.sig .val { font-size: 12.5px; color: var(--steel-300); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig .val b { color: var(--steel-100); font-weight: 500; }
.scale { position: relative; height: 18px; margin-top: 4px; }
.scale .trk { position: absolute; left: 0; right: 0; top: 7px; height: 3px; background: var(--steel-800); }
.scale .zone { position: absolute; top: 4px; width: 1px; height: 9px; background: var(--steel-700); }
.scale .mk { position: absolute; top: 0; width: 3px; height: 17px; margin-left: -1px; background: var(--green); transition: left .8s cubic-bezier(.2, .7, .2, 1); }
.scale .mk::after { content: ""; position: absolute; left: -3px; top: -3px; width: 9px; height: 3px; background: var(--green); }
.scale .ends { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9px; color: var(--steel-700); }

/* ═════════ Spot table ═════════ */
table.spot { width: 100%; border-collapse: collapse; }
table.spot th { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); text-align: right; padding: 0 0 8px 14px; border-bottom: 1px solid var(--steel-700); white-space: nowrap; }
table.spot td { text-align: right; padding: 12px 0 12px 14px; border-bottom: 1px solid var(--steel-800); white-space: nowrap; vertical-align: middle; }
table.spot th:first-child, table.spot td:first-child { text-align: left; padding-left: 0; }
table.spot tr:last-child td { border-bottom: 0; }
.sym { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--steel-100); letter-spacing: .06em; }
.sym small { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: 0; color: var(--steel-500); }
.px { font-family: var(--mono); font-size: clamp(16px, 1.45vw, 21px); font-weight: 500; color: var(--steel-100); padding: 2px 6px; margin-right: -6px; transition: background-color .5s ease-out, color .5s ease-out; }
.px.t-up { background: rgba(57, 255, 20, .18); color: var(--green); transition: none; }
.px.t-down { background: rgba(223, 226, 229, .14); transition: none; }
.chg { font-family: var(--mono); font-size: 12px; }
.up { color: var(--green); }
.down { color: var(--steel-100); }
.flat { color: var(--steel-300); }
.na { color: var(--steel-700); }
.rng { display: inline-grid; grid-template-columns: auto 90px auto; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--steel-500); }
.rng .bar { position: relative; height: 3px; background: var(--steel-800); }
.rng .bar i { position: absolute; top: -4px; width: 2px; height: 11px; margin-left: -1px; background: var(--green); transition: left .4s; }
.spark { display: inline-block; vertical-align: middle; }
@media (max-width: 900px) { .spot .h-md { display: none; } }
@media (max-width: 560px) { .spot .h-sm { display: none; } }

/* ═════════ Structure ═════════ */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--steel-800); }
.kv:last-child { border-bottom: 0; }
.kv .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); }
.kv .v { font-family: var(--mono); font-size: 15px; color: var(--steel-100); text-align: right; }
.kv .s { grid-column: 1 / -1; font-size: 11.5px; color: var(--steel-500); }
.hero { font-family: var(--mono); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); color: var(--steel-100); line-height: 1.1; letter-spacing: -.01em; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--mono); font-size: 11px; color: var(--steel-500); margin-top: 6px; }
.chips b { font-weight: 500; }
.stack { display: flex; height: 22px; gap: 2px; margin: 10px 0 6px; }
.stack i { display: block; height: 100%; min-width: 2px; position: relative; }
.stack i span { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-family: var(--mono); font-style: normal; font-size: 10px; color: var(--black); font-weight: 600; white-space: nowrap; }
.stack .s1 { background: var(--green); }
.stack .s2 { background: var(--steel-100); }
.stack .s3 { background: var(--steel-500); }
.stack .s4 { background: var(--steel-700); }
.stack .s4 span, .stack .s3 span { color: var(--black); }
.lg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); }
.lg span { display: inline-flex; align-items: center; gap: 6px; }
.lg i { width: 9px; height: 9px; display: inline-block; }

/* ═════════ Heatmap ═════════ */
.hm { display: grid; grid-template-columns: 52px repeat(4, minmax(0, 1fr)); gap: 2px; }
.hm .hd { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); text-align: center; padding-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm .rl { font-family: var(--mono); font-weight: 600; font-size: 12px; color: var(--steel-100); display: flex; align-items: center; }
.hm .cell { height: 46px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--steel-100); background: var(--steel-900); cursor: default; transition: outline-color .15s; outline: 1px solid transparent; }
.hm .cell:hover { outline-color: var(--steel-300); }
.hm .cell.avg { font-weight: 600; }
.hm-scale { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--mono); font-size: 9.5px; color: var(--steel-500); }
.hm-scale i { flex: 1; height: 6px; background: linear-gradient(90deg, rgba(223,226,229,.55), #111214 33%, rgba(57,255,20,.85)); }

/* ═════════ Vol / options / OI ═════════ */
.vrow { padding: 6px 0 12px; border-bottom: 1px solid var(--steel-800); margin-bottom: 10px; }
.vrow:last-of-type { border-bottom: 0; }
.vrow .top-l { display: flex; justify-content: space-between; align-items: baseline; }
.vrow .nm { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--steel-500); }
.vrow .big { font-family: var(--mono); font-size: 24px; font-weight: 500; color: var(--steel-100); }
.pctbar { position: relative; height: 3px; background: var(--steel-800); margin: 10px 0 4px; }
.pctbar i { position: absolute; top: -4px; width: 2px; height: 11px; margin-left: -1px; background: var(--green); }
.pctlbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: var(--steel-500); }
.oibar { margin-bottom: 14px; }
.oibar .t { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; margin-bottom: 5px; }
.oibar .t b { font-weight: 600; color: var(--steel-100); }
.oibar .t span { color: var(--steel-100); }
.oibar .stack { height: 16px; margin: 0; }
.gauge2 { position: relative; height: 26px; margin: 8px 0 2px; }
.gauge2 .trk { position: absolute; left: 0; right: 0; top: 11px; height: 3px; background: var(--steel-800); }
.gauge2 .mid { position: absolute; left: 50%; top: 5px; width: 1px; height: 15px; background: var(--steel-500); }
.gauge2 .fill { position: absolute; top: 11px; height: 3px; background: var(--green); }
.gauge2 .mk { position: absolute; top: 3px; width: 3px; height: 19px; margin-left: -1px; background: var(--green); }

/* ═════════ Charts ═════════ */
.chart { position: relative; height: 170px; width: 100%; }
.chart.tall { height: 230px; }
.chart.short { height: 90px; }
.chart svg { display: block; overflow: visible; }
.chart .grid-l { stroke: var(--steel-800); stroke-width: 1; }
.chart .zero-l { stroke: var(--steel-700); stroke-width: 1; }
.chart .axis-t { fill: var(--steel-500); font-family: var(--mono); font-size: 9.5px; }
.chart .cross { stroke: var(--steel-500); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .empty { fill: var(--steel-500); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 10.5px; }
.legend button { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--steel-800); padding: 3px 8px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--steel-300); }
.legend button[aria-pressed="false"] { opacity: .4; }
.legend i { width: 14px; height: 2px; display: inline-block; }

/* ═════════ Macro grid ═════════ */
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--steel-800); margin: 0 calc(var(--pad) * -1) calc(var(--pad) * -1); border-top: 1px solid var(--steel-800); }
.mt { background: var(--black); padding: 12px var(--pad); min-width: 0; }
.mt .top-l { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); }
.mt .v { font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--steel-100); margin-top: 4px; }
.mt .chart { height: 46px; margin-top: 6px; }
@media (max-width: 720px) { .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.corr-row { display: grid; grid-template-columns: 84px 1fr; gap: 6px 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--steel-800); }
.corr-row:last-of-type { border-bottom: 0; }
.corr-row .k { font-family: var(--mono); font-size: 11px; color: var(--steel-100); letter-spacing: .06em; }
.dbar { display: grid; grid-template-columns: 30px 1fr 44px; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--steel-500); }
.dbar .t { position: relative; height: 8px; }
.dbar .t::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--steel-700); }
.dbar .t::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--steel-800); }
.dbar .t i { position: absolute; top: 0; bottom: 0; z-index: 1; }
.dbar .t i.pos { left: 50%; background: var(--green); }
.dbar .t i.neg { right: 50%; background: var(--steel-300); }
.dbar.d90 .t i.pos { background: rgba(57, 255, 20, .45); }
.dbar.d90 .t i.neg { background: var(--steel-500); }
.dbar .n { text-align: right; color: var(--steel-100); font-size: 11px; }

/* ═════════ Network ═════════ */
.fng-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.fng-svg text { font-family: var(--mono); }
.ladder .kv .v { font-size: 13px; }
.prog { position: relative; height: 6px; background: var(--steel-800); margin: 8px 0; }
.prog i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--steel-300); }

/* ═════════ Wire ═════════ */
.chipset { display: flex; flex-wrap: wrap; gap: 5px; }
.chipset button { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-300); background: transparent; border: 1px solid var(--steel-800); padding: 5px 8px; cursor: pointer; }
.chipset button:hover { border-color: var(--steel-500); color: var(--steel-100); }
.chipset button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.wire-row2 { display: flex; align-items: center; gap: 12px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 10.5px; color: var(--steel-300); white-space: nowrap; }
.toggle input { accent-color: var(--green); width: 13px; height: 13px; margin: 0; }
.search { flex: 1; min-width: 0; background: var(--black); color: var(--steel-100); border: 1px solid var(--steel-800); padding: 6px 8px; font-size: 11px; text-transform: none; letter-spacing: .02em; }
.search:focus { border-color: var(--steel-500); outline: none; }
.feat { border: 1px solid var(--steel-800); padding: 12px 14px; margin-bottom: 8px; position: relative; }
.feat::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 2px; background: var(--green); }
.feat .m { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 6px; }
.feat a { color: var(--steel-100); text-decoration: none; font-size: 15px; line-height: 1.35; }
.feat a:hover { color: var(--green); }
.wire-list { margin-top: 10px; }
.wire-list li { padding: 11px 0; border-bottom: 1px solid var(--steel-800); }
.wire-list .w1 { display: flex; gap: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); margin-bottom: 4px; }
.wire-list .w1 .src { color: var(--steel-300); }
.wire-list .w1 .new { color: var(--black); background: var(--green); padding: 0 4px; font-weight: 600; }
.wire-list a { color: var(--steel-100); text-decoration: none; font-size: 14px; line-height: 1.38; display: block; }
.wire-list a:hover { color: var(--green); }
.wire-list .w2 { display: flex; flex-wrap: wrap; gap: 2px 10px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-500); margin-top: 5px; }
.wire-list .inst { color: var(--green); }
.wire-list .reg { color: var(--steel-100); }
.wire-list .empty { display: block; color: var(--steel-500); font-family: var(--mono); font-size: 11px; padding: 24px 0; }
.btn { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: transparent; border: 1px solid var(--green); padding: 8px 14px; cursor: pointer; margin-top: 14px; }
.btn:hover { background: var(--green); color: var(--black); }

/* ═════════ Tables (guide) ═════════ */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 12px; }
table.data th { font-family: var(--mono); font-weight: 400; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); text-align: left; padding: 0 10px 6px 0; border-bottom: 1px solid var(--steel-700); white-space: nowrap; }
table.data td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--steel-800); color: var(--steel-100); vertical-align: top; }
table.data td.err { color: var(--steel-500); font-family: var(--mono); font-size: 10px; }

.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--black); color: var(--steel-100); border: 1px solid var(--steel-700); padding: 7px 10px; font-size: 11px; line-height: 1.5; text-transform: none; letter-spacing: .02em; max-width: 280px; }
.tip b { font-weight: 500; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 18px 0 32px; border-top: 1px solid var(--steel-800); font-size: 10px; }
.foot a { color: var(--steel-300); }

/* ═════════ Small screens ═════════ */
@media (max-width: 1100px) { .jump { display: none; } }
@media (max-width: 860px) { .hide-sm { display: none !important; } }
@media (max-width: 600px) {
  .bar { gap: 8px; }
  .crumb, .tbtn kbd, #open-guide .lbl { display: none; }
  .status { gap: 10px; }
  #st-live span { display: none; }
  .drawer { width: 100vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tape-track { animation: none; }
  .tape { overflow-x: auto; }
  .dot.on { animation: none; }
  .drawer, main, .scale .mk { transition: none; }
}