:root {
  --bg: #232323;
  --cy: #35e8f2;
  --cy2: #1e6e74;
  --cy3: #143e42;
  --ye: #e9e23a;
  --ye2: #a39d2a;
  --rd: #ff5a6e;
  --ink: #eafcfd;
  --text: #c9e4e6;
  --mute: #93b3b6;
  --dim: #6f8f92;
  --head: 'Oxanium', 'Chakra Petch', system-ui, sans-serif;
  --body: 'Chakra Petch', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gap: 28px;
  --wrap: 1560px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-synthesis: none; -webkit-text-size-adjust: 100%; scroll-padding-top: 20px; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 17px/1.6 var(--body);
  background: var(--bg) url(art/ui/grid.png) repeat; background-size: 48px 48px;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
img { image-rendering: pixelated; }
img.mark { image-rendering: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ye); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--head); color: var(--ink); letter-spacing: .01em; }
p { margin: 0 0 12px; }
code, .num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
.ye { color: var(--ye); } .cy { color: var(--cy); } .rd { color: var(--rd); } .mu { color: var(--mute); }

/* ---------------- band: yellow hazard rules of the pack ---------------- */
.band { border-style: solid; border-width: 18px 0; border-image: url(art/ui/band_c.png) 18 0 18 0 fill / 18px 0 stretch; }
.band-in { max-width: var(--wrap); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.brand { display: block; line-height: 0; }
.wordmark { height: 64px; width: auto; image-rendering: auto; }
.transponder { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
/* one row, one height: the contract window and the keys share the 56 px line */
.transponder > * { height: 56px; }
.tp-ca { display: grid; align-content: center; gap: 1px; padding: 0 14px; min-width: 300px; max-width: 560px;
  border-style: solid; border-width: 6px; border-image: url(art/ui/well.png) 6 fill / 6px stretch; }
.tp-label { font: 600 11px/1 var(--body); color: var(--cy); text-transform: uppercase; letter-spacing: .14em; opacity: .8; }
.ca { font-size: 14px; line-height: 1.3; color: var(--mute); overflow-wrap: anywhere; user-select: all; }
.ca.set { color: var(--ink); }

/* ---------------- keys: the pack's PLAY plate ---------------- */
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 18px; border-style: solid; border-width: 9px;
  border-image: url(art/ui/btn.png) 9 fill / 9px stretch; background: none; color: var(--cy);
  font: 600 17px/1 var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; letter-spacing: .02em;
  transition: filter .12s; user-select: none;
}
.key > * { flex: none; }
.key .mark { width: 22px; height: 22px; display: block; object-fit: contain; }
.key:hover { filter: brightness(1.25); }
.key:active { filter: brightness(.9); }
.key-y { border-image-source: url(art/ui/btn_y.png); color: var(--ye); }
.key-r { border-image-source: url(art/ui/btn_r.png); color: #ff9aa8; }
.key-on { border-image-source: url(art/ui/btn_on.png); color: #fff; }
.key-x { padding: 0; width: 56px; }
.key-s { min-height: 44px; font-size: 15px; padding: 0 12px; }
.key-big { min-height: 60px; font-size: 19px; padding: 0 26px; }
.key[disabled], .key[aria-disabled="true"] { border-image-source: url(art/ui/btn_off.png); color: #8d9496; cursor: not-allowed; filter: none; }
.key[aria-disabled="true"] .mark { opacity: .5; }
.key.wide { width: 100%; }
.linkish { background: none; border: 0; padding: 4px 0; color: var(--mute); text-decoration: underline dotted; text-underline-offset: 4px; cursor: pointer; font-size: 15px; }
.linkish:hover { color: var(--ink); }

/* ---------------- nav ---------------- */
.tabs-in { max-width: var(--wrap); margin: 0 auto; padding: 18px 24px 0; display: flex; gap: 10px; flex-wrap: wrap; }
.tab {
  background: url(art/ui/tab.png) no-repeat left bottom / 100% 36px; border: 0; padding: 8px 22px 18px 14px; min-height: 56px;
  color: var(--mute); font: 700 21px var(--head); cursor: pointer;
}
.tab kbd { font: 500 13px var(--mono); color: var(--dim); margin-right: 8px; vertical-align: 2px; }
.tab[aria-current="page"] { color: var(--ye); background-image: url(art/ui/tab_on.png); }
.tab[aria-current="page"] kbd { color: var(--ye2); }
.tab:hover { color: var(--ink); }

/* ---------------- practice strip ---------------- */
.pilot { padding: 0 24px; }
.pilot-in {
  max-width: calc(var(--wrap) - 48px); margin: 16px auto 0; padding: 12px 20px; display: flex; gap: 14px 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border-style: solid; border-width: 9px; border-image: url(art/ui/btn_y.png) 9 fill / 9px stretch;
}
.pilot-text { margin: 0; color: #f3efb5; font-size: 16px; flex: 1 1 420px; max-width: 72ch; }
.pilot-text b { color: var(--ye); }
.pilot-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.clk { color: var(--mute); font-size: 15px; margin-right: 4px; }
.clk b { font: 600 17px var(--mono); color: var(--ink); margin-left: 6px; }
.wallet { font-size: 15px; color: var(--mute); margin-left: 8px; }
.wallet b { color: var(--ink); font-family: var(--mono); font-weight: 500; }

/* ---------------- layout ---------------- */
.view { max-width: var(--wrap); margin: 0 auto; padding: 28px 24px 64px; display: grid; gap: var(--gap); grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }
.stack { display: grid; gap: var(--gap); min-width: 0; }
.fill { align-self: stretch; }

/* ---------------- panels ---------------- */
.panel { border-style: solid; border-width: 24px; border-image: url(art/ui/frame.png) 24 fill / 24px stretch; padding: 8px 12px 12px; min-width: 0; }
.panel.dim { border-image-source: url(art/ui/frame_dim.png); }
.panel.y { border-image-source: url(art/ui/frame_y.png); }
.panel.r { border-image-source: url(art/ui/frame_r.png); }
.panel > h2, .ph { margin: -6px 0 18px; font-size: 26px; line-height: 1.2; color: var(--cy); }
.panel.y > h2 { color: var(--ye); } .panel.r > h2 { color: var(--rd); }
.sub { display: block; font: 400 16px/1.45 var(--body); color: var(--mute); margin-top: 6px; letter-spacing: 0; }
.crt { border-style: solid; border-width: 6px; border-image: url(art/ui/crt.png) 6 fill / 6px stretch; padding: 14px 16px; position: relative; }
.crt.y { border-image-source: url(art/ui/crt_y.png); }
.label { font: 600 13px var(--body); color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
.big { font: 600 30px/1.2 var(--mono); color: var(--ink); }
.row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.note { color: var(--mute); font-size: 15px; margin: 8px 0 0; }
.err { color: var(--rd); font-size: 16px; margin: 10px 0 0; }
.err:empty { display: none; }

/* ---------------- home ---------------- */
.hero h1 { margin: 0 0 14px; font-size: clamp(38px, 4vw, 58px); line-height: 1.05; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--ye); }
.hero .lead { font-size: 20px; line-height: 1.55; color: var(--text); max-width: 52ch; margin-bottom: 26px; }
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.door { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 18px; }
.door img { height: 64px; width: auto; justify-self: start; }
.door h3 { margin: 0; font-size: 22px; }
.door p { margin: 0; font-size: 16px; color: var(--mute); }
.door .key { width: 100%; }
.flow { display: grid; gap: 14px; }
.flow .stepline { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; }
.flow .n { font: 800 28px var(--head); color: var(--ye); text-align: center; }
.flow .t { font-size: 17px; }
.flow .t b { color: var(--ink); font-weight: 600; }
.flow .v { font: 600 17px var(--mono); color: var(--ink); text-align: right; white-space: nowrap; }
.buckets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 6px; }
.bucket { text-align: center; padding: 12px 6px; }
.bucket .pc { font: 800 26px var(--head); }
.bucket .lb { font-size: 14px; color: var(--mute); line-height: 1.3; margin-top: 4px; }
.bucket .am { font: 500 14px var(--mono); color: var(--ink); margin-top: 6px; }

/* segments */
.segs { display: flex; gap: 4px; }
.segs i { width: 14px; height: 22px; background: url(art/ui/seg_dim.png) center / 100% 100%; }
.segs i.on { background-image: url(art/ui/seg_on.png); }
.segs i.r { background-image: url(art/ui/seg_r.png); }
.split { display: flex; height: 22px; gap: 4px; margin: 14px 0 10px; }
.split i { background: url(art/ui/seg_on.png) center / 100% 100%; min-width: 8px; }
.split i.b { background-image: url(art/ui/seg_r.png); }
.split i.a { background-image: url(art/ui/seg_y.png); }
.split i.s { background-image: url(art/ui/seg_dim.png); }
.split i.p { background-image: url(art/ui/seg_y.png); filter: hue-rotate(-24deg) saturate(1.4); }
.legend { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px 12px; font-size: 15px; align-items: center; }
.legend .sq { width: 14px; height: 18px; background: url(art/ui/seg_on.png) center / 100% 100%; }
.legend .sq.b { background-image: url(art/ui/seg_r.png); } .legend .sq.a { background-image: url(art/ui/seg_y.png); }
.legend .sq.s { background-image: url(art/ui/seg_dim.png); } .legend .sq.p { background-image: url(art/ui/seg_y.png); filter: hue-rotate(-24deg) saturate(1.4); }
.legend .num { text-align: right; color: var(--ink); }

/* modules */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.mod { display: grid; gap: 12px; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; width: 100%; align-content: start; }
.mod .screen { height: 128px; display: grid; place-items: center; }
.mod .screen img { max-height: 84px; max-width: 96px; }
.mod h3 { margin: 0; font-size: 21px; }
.mod .tk { color: var(--ye); font: 600 16px var(--mono); margin-left: 8px; }
.mod .meta { font-size: 15px; color: var(--mute); line-height: 1.5; min-height: calc(1.5em * 2); }
.mod .meta b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.facts { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 6px; }
.facts td { padding: 6px 0; border-bottom: 1px dotted rgba(53, 232, 242, .2); vertical-align: top; }
.facts td:last-child { text-align: right; color: var(--ink); }

/* recipes */
.recipes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.recipe { display: flex; flex-direction: column; gap: 6px; }
.recipes .recipe { height: 100%; }
.recipe .acts-r { margin-top: auto; padding-top: 10px; flex-wrap: nowrap; }
.recipe.sel { border-image-source: url(art/ui/crt_y.png); }
.chain { display: flex; align-items: center; }
.chain .node { width: 58px; height: 58px; display: grid; place-items: center; padding: 6px; }
.chain .node img { max-width: 40px; max-height: 40px; }
.chain .wire { width: 28px; height: 15px; background: url(art/ui/cable.png) repeat-x left center / 24px 15px; }
.recipe h3 { margin: 8px 0 0; font-size: 22px; }
.recipe p { margin: 0; font-size: 16px; color: var(--mute); }
.recipes .recipe p { min-height: calc(1.6em * 3); }
.price { font: 600 24px var(--mono); color: var(--ye); }
.price small { font: 400 14px var(--body); color: var(--mute); margin-left: 6px; }

/* log */
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: 420px; overflow: auto; font-size: 15px; }
.log li { display: grid; grid-template-columns: 80px 1fr; gap: 12px; }
.log time { color: var(--dim); font-family: var(--mono); font-size: 14px; }
.log .ev-burn { color: #ffb0ba; } .log .ev-pay { color: var(--ye); } .log .ev-ref { color: var(--cy); }
.totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.logpanel { display: flex; flex-direction: column; }
.logpanel .log { flex: 1 1 0; min-height: 110px; max-height: none; }
@media (max-width: 860px) { .logpanel .log { flex: none; max-height: 360px; } }

/* forms */
.form { display: grid; gap: 18px; }
.field { display: grid; gap: 6px; }
.field > span { font: 600 14px var(--body); color: var(--mute); }
.field > small { font-size: 14px; color: var(--dim); }
.field input, .field select, .field textarea {
  background: #0d1112; border: 0; border-bottom: 2px dashed var(--cy2); border-top: 2px solid var(--cy3);
  padding: 10px 14px; min-height: 52px; color: var(--ink); width: 100%; font-size: 17px;
}
.field input:focus, .field select:focus { border-bottom-color: var(--cy); outline: none; }
.field select option { background: #101516; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* order wizard */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stepper li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 6px; color: var(--dim); }
.stepper li .sn { width: 36px; height: 36px; display: grid; place-items: center; font: 800 18px var(--head); background: url(art/ui/seg_dim.png) center / 100% 100%; color: var(--dim); }
.stepper li b { display: block; font: 600 18px var(--head); }
.stepper li small { font-size: 14px; }
.stepper li.done { color: var(--mute); } .stepper li.done .sn { background-image: url(art/ui/seg_on.png); color: #0b1a1b; }
.stepper li.now { color: var(--ink); } .stepper li.now .sn { background-image: url(art/ui/seg_y.png); color: #222; } .stepper li.now b { color: var(--ye); }
.stage-h { margin: 0 0 6px; font-size: 30px; }
.stage-p { font-size: 18px; color: var(--mute); margin-bottom: 22px; max-width: 60ch; }
.pick-r { display: grid; gap: 14px; }
.pick-r button { text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; width: 100%; }
.plan { width: 100%; border-collapse: collapse; font-size: 16px; }
.plan td { padding: 8px 0; border-bottom: 1px dotted rgba(53, 232, 242, .2); }
.plan td.num { text-align: right; white-space: nowrap; color: var(--ink); }
.plan tr.tot td { border: 0; padding-top: 12px; color: var(--ye); font-weight: 600; font-size: 19px; }
.dial { width: 132px; height: 132px; image-rendering: pixelated; display: block; }
.dialbox { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; }
.pipe { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr; align-items: start; margin: 8px 0 20px; }
.pipe.two { grid-template-columns: 1fr 48px 1fr; }
.st { text-align: center; }
.st .crt { height: 128px; display: grid; place-items: center; }
.st .crt img { max-height: 76px; max-width: 86px; transition: opacity .3s, filter .3s; }
.st.idle .crt img { opacity: .35; filter: grayscale(1); }
.st.busy .crt img { animation: blink .5s steps(2) infinite; }
.st .nm { font: 600 16px var(--head); color: var(--ink); margin-top: 10px; }
.st .rcpt { font-size: 14px; color: var(--dim); margin-top: 2px; }
.st.done .rcpt { color: var(--cy); } .st.fail .rcpt { color: var(--rd); }
.pipe .wire { margin-top: 57px; height: 15px; background: url(art/ui/cable.png) repeat-x left center / 24px 15px; }
.pipe .wire.live { background-image: url(art/ui/cable_y.png); animation: flow .6s linear infinite; }
@keyframes flow { to { background-position: 24px center; } }
@keyframes blink { 50% { filter: brightness(1.8); } }
.states { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 22px; }
.states span { font: 600 14px var(--body); color: var(--dim); text-align: center; padding: 8px 2px; border-bottom: 4px solid var(--cy3); }
.states span.done { color: var(--cy2); border-color: var(--cy2); }
.states span.now { color: var(--ye); border-color: var(--ye); }
.states span.bad { color: var(--rd); border-color: var(--rd); }
.result ul { margin: 8px 0 0; padding-left: 20px; font-family: var(--mono); font-size: 15px; }
.inv { font-size: 15px; color: var(--mute); margin-top: 16px; }
.inv b { color: var(--cy); font-family: var(--mono); font-weight: 500; }
.acts { display: grid; gap: 14px; }
.act .why { display: block; font-size: 14px; color: var(--dim); margin-top: 4px; }
.orders { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
details.faults summary { cursor: pointer; font: 700 20px var(--head); color: var(--rd); list-style: none; }
details.faults summary::-webkit-details-marker { display: none; }
details.faults summary::after { content: ' +'; color: var(--dim); }
details.faults[open] summary::after { content: ' \2212'; }
.sw { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; color: var(--mute); background: none; border: 0; padding: 6px 0; text-align: left; min-height: 44px; width: 100%; }
.sw img { width: 27px; flex: none; }
.sw[aria-checked="true"] { color: #ffb0ba; }

/* build */
.slots { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; margin-bottom: 22px; }
.slot { min-width: 0; }
.slot { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.slot .crt { height: 168px; display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; }
.slot img { max-height: 70px; max-width: 80px; }
.slot .nm { font: 600 17px var(--head); color: var(--ink); }
.slot.empty { cursor: default; } .slot.empty .nm { color: var(--dim); font-weight: 500; }
.slot .x { font-size: 13px; color: var(--dim); }
.joint { text-align: center; } .joint img { width: 24px; }
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.key.pick { display: grid; grid-template-columns: 52px 1fr; gap: 12px; justify-content: stretch; text-align: left; white-space: normal; min-height: 84px; padding: 6px 12px; line-height: 1.3; }
.key.pick img { max-width: 46px; max-height: 46px; justify-self: center; }
.key.pick small { display: block; font: 400 14px var(--body); color: var(--mute); margin-top: 4px; }
.howto { list-style: none; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.howto li { font-size: 15px; color: var(--mute); }
.howto li b { display: block; color: var(--ink); font: 600 17px var(--head); margin-bottom: 4px; }

/* launch */
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px; }
.rung { text-align: center; font: 600 14px var(--body); color: var(--dim); }
.rung img { display: block; margin: 0 auto 8px; width: 36px; }
.rung.done { color: var(--cy); } .rung.now { color: var(--ye); }
.lstep { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px dotted rgba(53, 232, 242, .2); }
.lstep b { font: 600 18px var(--head); }
.lstep .key { width: 120px; }
.lstep p { margin: 2px 0 0; font-size: 15px; color: var(--mute); }
.checks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; font-size: 16px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; align-items: center; }
.checks img { width: 21px; }
.checks li .rd { grid-column: 2; font-size: 15px; }

/* docs */
.docs { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--gap); align-items: start; grid-column: span 12; }
.toc { position: sticky; top: 16px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 8px 10px; color: var(--mute); text-decoration: none; font: 600 16px var(--head); }
.toc a:hover, .toc a.on { color: var(--ye); }
.doc { max-width: 1120px; }
.doc section { margin-bottom: 44px; scroll-margin-top: 16px; }
.doc h2 { font-size: 30px; color: var(--cy); margin: 0 0 14px; }
.doc h3 { font-size: 21px; margin: 22px 0 8px; color: var(--ink); }
.doc p, .doc li { font-size: 17px; line-height: 1.7; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 14px; }
.doc li { margin-bottom: 6px; }
.doc code { font-size: 15px; color: var(--ink); background: #0d1112; padding: 1px 6px; }
.tblwrap { overflow-x: auto; margin: 8px 0 16px; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 420px; }
.tbl td, .tbl th { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px dotted rgba(53, 232, 242, .22); vertical-align: top; }
.tbl th { font: 600 13px var(--body); color: var(--dim); letter-spacing: .1em; text-transform: uppercase; }
.tbl td.num { white-space: nowrap; color: var(--ye); font-family: var(--mono); }
.risk { font-size: 14px; color: var(--dim); margin-top: 30px; }

.toast {
  position: fixed; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); bottom: 20px; z-index: 9;
  border-style: solid; border-width: 9px; border-image: url(art/ui/btn_on.png) 9 fill / 9px stretch;
  padding: 6px 16px; font: 600 17px var(--body); color: #fff; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.toast.show { opacity: 1; visibility: visible; }
.toast.bad { border-image-source: url(art/ui/btn_r.png); }
.noscript { padding: 24px; }

/* ---------------- widths ---------------- */
@media (max-width: 1200px) {
  .c3, .c4, .c5 { grid-column: span 6; } .c7, .c8, .c9 { grid-column: span 12; }
  .recipes, .mods { grid-template-columns: 1fr 1fr; }
  .totals { grid-template-columns: 1fr 1fr; }
  .howto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  :root { --gap: 20px; }
  body { font-size: 16px; }
  .view > * { grid-column: span 12 !important; }
  .view > #wizp { order: -1; }
  .doors, .recipes, .mods { grid-template-columns: 1fr; }
  .buckets { grid-template-columns: repeat(3, 1fr); }
  .docs { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .band-in { padding: 8px 16px; }
  .wordmark { height: 46px; }
  .transponder { width: 100%; }
  .transponder > * { height: 52px; }
  .tp-ca { width: 100%; min-width: 0; max-width: none; height: auto; min-height: 56px; padding: 6px 12px; }
  .transponder #buy { flex: 1; }
  .tabs-in { padding: 12px 10px 0; gap: 0; }
  .tab { font-size: 17px; padding: 8px 12px 16px 8px; }
  .tab kbd { display: none; }
  .pilot { padding: 0 12px; }
  .pilot-ctl { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .pilot-ctl .clk, .pilot-ctl .wallet { grid-column: 1 / -1; margin: 0; }
  .pilot-ctl > :only-child { grid-column: 1 / -1; }
  .buckets .bucket:last-child { grid-column: 1 / -1; }
  .view { padding: 20px 12px 48px; }
  .panel { border-width: 18px; border-image-width: 18px; padding: 6px 4px 8px; }
  .panel > h2, .ph { font-size: 22px; }
  .hero .lead { font-size: 18px; }
  .two { grid-template-columns: 1fr; }
  .pipe { grid-template-columns: 1fr 18px 1fr 18px 1fr; }
  .pipe.two { grid-template-columns: 1fr 18px 1fr; }
  .st .crt { height: 92px; } .st .crt img { max-height: 52px; max-width: 58px; }
  .pipe .wire { margin-top: 39px; }
  .st .nm { font-size: 14px; }
  .slots { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr); }
  .slot .crt { padding: 8px 4px; }
  .slot.empty .nm { font-size: 12px; }
  .slot .crt { height: 120px; } .slot img { max-height: 46px; max-width: 52px; } .slot .nm { font-size: 14px; }
  .states span { font-size: 12px; }
  .dialbox { grid-template-columns: 96px 1fr; } .dial { width: 96px; height: 96px; }
  .totals { grid-template-columns: 1fr 1fr; gap: 10px; }
  .big { font-size: 24px; }
  .howto { grid-template-columns: 1fr; }
  .ladder .rung { font-size: 12px; }
  .lstep { grid-template-columns: 1fr; }
  .buckets { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .pipe .wire.live, .st.busy .crt img { animation: none; }
  .toast { transition: none; }
}