/* Function Foundry: a factory floor of number machines.
   Layout. Phones: the machine, then the keypad right under it (so both sit above the sticky dock),
   then the tools, the log and the gear builder. Wide boards: the tools, machine and log on the left,
   the keypad beside them (and the builder in a third column), so the whole round fits a 657 px laptop.
   The machine line sizes itself from its own column (container units): three gears and both crates
   fit on a 320 px phone. */
.fx-room { container: room / inline-size; width: 100%; min-width: 0; }
.fx-floor { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "line" "pad" "tools" "log" "build" "fin"; align-items: start; }
.fx-linebox { grid-area: line; container-type: inline-size; min-width: 0; }
.fx-pad { grid-area: pad; } .fx-tools { grid-area: tools; } .fx-log { grid-area: log; } .fx-build { grid-area: build; } .fx-floor > .fx-finale { grid-area: fin; }
@container room (min-width: 700px) {
  .fx-floor { column-gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); grid-template-areas: "tools pad" "line pad" "log pad" "fin fin"; grid-template-rows: auto auto 1fr auto; }
  .fx-floor.has-build { grid-template-columns: minmax(0, 1fr) minmax(220px, 250px) minmax(280px, 330px); grid-template-areas: "tools pad build" "line pad build" "log pad build" "fin fin fin"; }
  .fx-floor:not(.has-log) { grid-template-areas: "tools pad" "line pad" "fin fin"; grid-template-rows: auto 1fr auto; }
}

/* tools row: test tokens, the flip lever and the blueprint book */
.fx-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 44px; }
.fx-tools-gap { flex: 1; }
.fx-tool { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 2px solid #1C1F26; background: #fff; color: #1C1F26; font: 800 .92rem var(--f-ui); box-shadow: 0 3px 0 #1C1F26; }
.fx-tool svg { width: 20px; height: 20px; flex: none; }
.fx-tool b { min-width: 1.6em; padding: 0 6px; border-radius: 999px; background: #FFC54D; border: 1.5px solid #1C1F26; font-size: .82rem; }
.fx-tool:active { transform: translateY(2px); box-shadow: 0 1px 0 #1C1F26; }
#flip[aria-pressed="true"] { background: #EFE9FC; color: #3A2378; border-color: #4B2FA0; box-shadow: 0 3px 0 #4B2FA0; }
#flip[aria-pressed="true"] svg { transform: scaleX(-1); }
.fx-budget { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 999px; background: #F4F1EA; border: 1.5px solid #E2DACA; font: 800 .82rem var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: #464B57; }
.fx-tokens { display: inline-flex; gap: 5px; }
.fx-tokens i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #1C1F26; background: transparent; }
.fx-tokens i.on { background: #FFC54D; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
.fx-status { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #FFF1E7; border: 1.5px dashed #B4501C; color: #8E3A12; font: 800 .82rem var(--f-ui); }

/* the line: in crate, belt, machine, belt, out crate */
.fx-line {
  --C: clamp(42px, 15cqi, 80px);
  --B: clamp(6px, 3cqi, 64px);
  --P: clamp(4px, 1.4cqi, 16px);
  --S: clamp(38px, calc((100cqi - 2 * var(--C) - 2 * var(--B) - 4 * var(--P) - 6px - (var(--n) - 1) * 4px) / var(--n)), min(84px, 22cqi));
  position: relative; display: flex; align-items: center; justify-content: center; padding: 28px var(--P) 16px; border-radius: 22px;
  background: linear-gradient(180deg, #3A3F4B, #2A2F3A); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .2); transform-origin: 50% 50%;
}
.fx-crate { position: relative; display: grid; place-items: center; width: var(--C); aspect-ratio: 1; flex: none; border-radius: 12px; background: #C9A46A; border: 3px solid #6B4F2A; box-shadow: inset 0 0 0 4px rgba(107, 79, 42, .25), 0 4px 0 #1C1F26; color: #1C1F26; }
.fx-crate small { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font: 800 13px var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #E6E8EE; white-space: nowrap; }
.fx-v { padding: 0 4px; background: #FFF8E8; border-radius: 7px; border: 2px solid #6B4F2A; min-width: 1.4em; text-align: center; font: 800 calc(var(--C) * .34) var(--f-display); line-height: 1.25; }
.fx-v[data-len="3"] { font-size: calc(var(--C) * .28); }
.fx-v[data-len="4"], .fx-v[data-len="5"] { font-size: calc(var(--C) * .22); }
.fx-mk { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; font: 900 .8rem var(--f-ui); font-style: normal; border: 2px solid #1C1F26; }
.fx-crate[data-mark] .fx-mk { display: grid; }
.fx-crate[data-mark="ok"] .fx-mk { background: #1E8A57; color: #fff; }
.fx-crate[data-mark="ok"] .fx-mk::after { content: '✓'; }
.fx-crate[data-mark="no"] .fx-mk { background: #C2402F; color: #fff; }
.fx-crate[data-mark="no"] .fx-mk::after { content: '✗'; }
.fx-crate[data-mark="jam"] .fx-mk { background: #FFC54D; color: #1C1F26; }
.fx-crate[data-mark="jam"] .fx-mk::after { content: '!'; }
.fx-crate[data-mark="jam"] .fx-v { font-size: calc(var(--C) * .22); }
.fx-made { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; background: #FBE9E6; border: 1.5px solid #C2402F; color: #6B2414; font: 800 13px var(--f-ui); white-space: nowrap; }
@container (max-width: 420px) { .fx-crate[data-c="out"] .fx-made { left: auto; right: -2px; transform: none; z-index: 4; } .fx-mw { display: none; } }
.fx-made[data-ok="true"] { background: #E1F4EA; border-color: #1E8A57; color: #12432B; }
.fx-made i { font-style: normal; }
/* the belt: chevrons show which way it carries. Flipped, they point back toward the in crate and run the other way.
   The chevron strip is a pseudo-element moved with transform, so a running belt never repaints. */
.fx-belt { position: relative; overflow: hidden; flex: 1 1 var(--B); width: var(--B); max-width: 150px; min-width: 6px; height: 14px; border-radius: 7px; background: #1C1F26; }
.fx-belt::before { content: ''; position: absolute; top: 0; bottom: 0; left: -16px; right: -16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M6 3.5l4 3.5-4 3.5' fill='none' stroke='%23FFC54D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / 16px 14px repeat-x; }
.fx-line.backward .fx-belt::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14'%3E%3Cpath d='M10 3.5l-4 3.5 4 3.5' fill='none' stroke='%23C9B8F5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.fx-line.off .fx-belt::before { opacity: .3; }
.fx-line.running .fx-belt::before { animation: belt .45s linear infinite; }
.fx-line.backward.running .fx-belt::before { animation-direction: reverse; }
@keyframes belt { from { transform: translateX(0); } to { transform: translateX(16px); } }

/* the number token riding the belt */
.fx-token { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; opacity: 0; min-width: 1.5em; padding: 0 5px; border-radius: 9px; background: #FFF8E8; border: 2.5px solid #1C1F26; box-shadow: 0 3px 0 #1C1F26; color: #1C1F26; font: 800 max(13px, calc(var(--C) * .3)) / 1.3 var(--f-display); text-align: center; white-space: nowrap; }
.fx-token.back { background: #F4EFFF; border-color: #3A2378; color: #3A2378; box-shadow: 0 3px 0 #3A2378; }
.fx-token.mini { font-size: 15px; padding: 0 5px; border-width: 2px; box-shadow: 0 2px 0 #3A2378; }
.fx-token.jam { background: #FFC54D; font-size: max(11px, calc(var(--C) * .22)); letter-spacing: .06em; text-transform: uppercase; }
.fx-machine { position: relative; display: flex; align-items: center; gap: 4px; padding: 18px var(--P) 26px; border-radius: 20px; background: #E0672C; border: 3px solid #1C1F26; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .18), 0 6px 0 #1C1F26; }
.fx-machine.mystery, .fx-machine.off { background: #4E5563; }
.fx-machine.backward { background: #7457C9; }
.fx-pipe { position: absolute; top: -16px; left: 16px; width: 16px; height: 17px; background: #9AA0AA; border: 3px solid #1C1F26; border-bottom: 0; border-radius: 6px 6px 0 0; }
.fx-lamp { position: absolute; top: 6px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #5B6170; border: 2px solid #1C1F26; }
.fx-machine.running .fx-lamp { background: #7CFC8A; box-shadow: 0 0 10px #7CFC8A; }
.fx-tag { position: absolute; top: -14px; right: 18px; display: inline-flex; align-items: center; gap: 3px; padding: 0 8px 0 6px; border-radius: 999px; background: #EFE9FC; border: 2px solid #1C1F26; color: #3A2378; font: 800 13px/1.35 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.fx-tag svg { width: 11px; height: 11px; flex: none; }
.fx-tag.off { background: #FFF1E7; color: #8E3A12; }
.fx-tag.yours { background: #E2F4F1; color: #155A52; }
/* your own machine (Gus's order) is teal; a gear without a sign yet is dashed */
.fx-machine.yours { background: #2F8F83; }
.fx-machine.yours .fx-gear .hole { fill: #2F8F83; }
.fx-slot.empty .fx-label { border-style: dashed; background: #F4F1EA; color: #5E6472; }
.fx-slot { position: relative; display: grid; place-items: center; width: var(--S); aspect-ratio: 1; flex: none; }
.fx-gear { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-gear g { fill: #FFC54D; stroke: #1C1F26; stroke-width: 3; }
.fx-gear .hole { fill: #E0672C; }
.fx-machine.mystery .fx-gear g, .fx-machine.off .fx-gear g { fill: #9AA0AA; }
.fx-machine.mystery .fx-gear .hole, .fx-machine.off .fx-gear .hole { fill: #4E5563; }
.fx-machine.backward .fx-gear .hole { fill: #7457C9; }
/* neighbouring gears turn opposite ways; flipped, every gear turns the other way. The whole svg turns (composited) */
.fx-machine.running .fx-gear { animation: gearSpin .7s linear infinite; }
.fx-machine.running .fx-gear.rev { animation-direction: reverse; }
.fx-machine.backward.running .fx-gear { animation-direction: reverse; }
.fx-machine.backward.running .fx-gear.rev { animation-direction: normal; }
@keyframes gearSpin { to { transform: rotate(360deg); } }
/* a row of bulbs along the top of the line: they chase toward OUT when it runs, and back toward IN when it runs backwards */
.fx-lights { position: absolute; top: 6px; left: 18px; right: 18px; display: flex; justify-content: space-between; pointer-events: none; }
.fx-lights i { width: 7px; height: 7px; border-radius: 50%; background: #4A505E; }
.fx-line.running .fx-lights i { animation: bulb .84s linear infinite; animation-delay: calc(var(--k) * 60ms); }
.fx-line.backward .fx-lights i { background: #5B4A8A; }
.fx-line.backward.running .fx-lights i { animation-name: bulbBack; animation-delay: calc((13 - var(--k)) * 60ms); }
@keyframes bulb { 0%, 70%, 100% { background: #4A505E; box-shadow: none; } 15%, 40% { background: #FFE08A; box-shadow: 0 0 8px #FFC54D; } }
@keyframes bulbBack { 0%, 70%, 100% { background: #5B4A8A; box-shadow: none; } 15%, 40% { background: #E4D8FF; box-shadow: 0 0 10px #B9A5F0; } }
.fx-line.backward.running { box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .2), inset 0 0 0 3px rgba(185, 165, 240, .5); }
.fx-machine.backward.running { box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .18), 0 6px 0 #1C1F26, 0 0 0 4px rgba(185, 165, 240, .55), 0 0 26px 4px rgba(185, 165, 240, .55); }
.fx-machine.backward.running .fx-tag { animation: tagPulse .7s ease-in-out infinite alternate; }
@keyframes tagPulse { to { box-shadow: 0 0 0 3px rgba(185, 165, 240, .7), 0 0 12px rgba(185, 165, 240, .9); } }

/* the gear the token is inside right now glows */
.fx-slot.busy::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255, 224, 138, .6), 0 0 22px 6px rgba(255, 224, 138, .75); pointer-events: none; }
.fx-machine.backward .fx-slot.busy::after { box-shadow: 0 0 0 4px rgba(201, 184, 245, .7), 0 0 22px 6px rgba(201, 184, 245, .8); }
.fx-label { position: relative; z-index: 1; backface-visibility: hidden; padding: 1px 5px; border-radius: 9px; background: #fff; border: 2.5px solid #1C1F26; font: 800 max(13px, calc(var(--S) * .26)) var(--f-math); color: #1C1F26; white-space: nowrap; }
.fx-slot.revealed .fx-label { animation: pop .5s var(--spring) both; background: #E3F5EB; }
.fx-slot.undo .fx-label { background: #EFE9FC; color: #3A2378; border-color: #3A2378; }
.fx-slot.missing .fx-label { border-style: dashed; background: #FFF4D6; }
.fx-slot.sign .fx-label { background: #FFF4D6; }
.fx-read { position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 0 6px; border-radius: 7px; background: #1C1F26; color: #FFE08A; font: 800 max(13px, calc(var(--S) * .22)) var(--f-math); line-height: 1.45; white-space: nowrap; }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); } to { transform: none; } }

/* the number pad: two rows (1 to 6, then 7 8 9 0 and delete) so it sits right under the machine */
.fx-pad { position: relative; min-width: 0; }
.fx-pad .np { width: 100%; gap: 8px; }
.fx-pad .np-display { min-height: 48px; height: 48px; font-size: 1.6rem; border-radius: 14px; }
.fx-pad .np-display.is-empty::before { font-size: .92rem; }
.fx-pad .np-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fx-pad .np-keys > span { display: none; }
.fx-pad .np-k { min-height: 46px; min-width: 0; font-size: 1.25rem; border-radius: 12px; }
.fx-pad .np-k[data-k="back"] { grid-column: span 2; }
/* the Test button sits beside the number it tests */
.fx-pad.has-test .np-display { margin-right: calc(42% + 8px); }
.fx-test { position: absolute; top: 0; right: 0; width: 42%; height: 48px; min-height: 48px; padding: 0 8px; display: grid; place-content: center; line-height: 1.1; text-align: center; }
.fx-test small { display: block; font-size: 13px; font-weight: 700; opacity: .85; }
@container room (min-width: 700px) {
  .fx-pad .np-display { min-height: 54px; height: 54px; }
  .fx-pad .np-k { min-height: 52px; }
  .fx-pad .np-keys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-pad .np-k[data-k="back"] { grid-column: auto; }
  .fx-test { height: 54px; }
}
/* the narrowest phones (320 px): five number keys a row so each stays at least 44 px wide, and delete moves up beside the number */
@container room (max-width: 299px) {
  .fx-pad .np-keys { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fx-pad .np-k[data-k="back"] { position: absolute; top: 0; right: 0; width: 48px; height: 48px; min-height: 48px; grid-column: auto; }
  .fx-pad .np-display { margin-right: 54px; }
  .fx-pad .np-display.is-empty::before { font-size: 13px; }
  .fx-pad.has-test .np-display { margin-right: calc(38% + 60px); }
  .fx-pad.has-test .fx-test { width: 38%; right: 54px; }
}
/* short wide screens (laptops): the two-row keypad again, so Run it and the keys share the screen. Five keys a row
   (1–5, 6–0) with delete beside the number, so each key stays at least 44 px wide even in the narrow pad column
   a mystery machine's builder leaves (six a row made them about 37 px) */
@media (min-width: 700px) and (max-height: 800px) {
  .fx-pad .np-keys { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .fx-pad .np-k[data-k="back"] { position: absolute; top: 0; right: 0; width: 48px; height: 100%; max-height: 54px; min-height: 48px; grid-column: auto; }
  .fx-pad .np-display { margin-right: 54px; }
  .fx-pad.has-test .np-display { margin-right: calc(38% + 60px); }
  .fx-pad.has-test .fx-test { width: 38%; right: 54px; }
  .fx-pad .np-k { min-height: 48px; }
}

/* the log: in → out cards that wrap */
.fx-log { min-width: 0; padding: 10px 12px; border-radius: 16px; background: #F4F1EA; border: 1.5px solid #E2DACA; }
.fx-log h2, .fx-build h2 { font-size: 1rem; margin-bottom: 6px; }
.fx-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-row { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; padding: 3px 9px; border-radius: 10px; background: #fff; border: 1.5px solid #DCD3C1; font: 700 1rem var(--f-math); color: #1C1F26; }
.fx-arr { font-family: var(--f-ui); color: #8E4A20; font-weight: 800; }
.fx-badge { font: 800 13px var(--f-ui); letter-spacing: .02em; color: #5E6472; padding: 0 2px; }
.fx-badge.yes { color: #1E8A57; font-size: 15px; }
.fx-row.test, .fx-row.check { font-weight: 800; border-color: #B9AE98; }
.fx-row.free, .fx-row.check { border-style: dashed; }
.fx-row.new { background: #FFF4D6; border-color: #E0B44C; animation: arIn .3s ease both; }
.fx-row.pair { background: #EFE9FC; border-color: #B9A5F0; }
.fx-row.ok { background: #E1F4EA; border-color: #1E8A57; }
.fx-row.gap { border: 2px dashed #B4501C; font-weight: 800; }
.fx-row.gap.solved { background: #E1F4EA; border: 2px solid #1E8A57; }
.fx-row.order { background: #E2F4F1; border-color: #2F8F83; }
.fx-row.order.ok { background: #E1F4EA; border-color: #1E8A57; }
.fx-row.order.no { background: #FBE9E6; border-color: #C2402F; }
.fx-row.try { border-style: dashed; border-color: #2F8F83; }
.fx-st { font-style: normal; font-weight: 900; }
.fx-row.order.ok .fx-st { color: #1E8A57; } .fx-row.order.no .fx-st { color: #C2402F; }
.fx-row.empty { font: 600 .92rem var(--f-ui); color: #5E6472; background: none; border: 0; padding: 4px 0; }
.fx-jam { display: inline-block; padding: 0 5px; border-radius: 6px; background: #FFC54D; border: 1.5px solid #1C1F26; font: 800 13px var(--f-ui); text-transform: uppercase; letter-spacing: .04em; }
.fx-held { display: block; margin-top: 4px; font-weight: 600; opacity: .92; }

/* the gear builder: kind of gear (radio buttons) and its number (a spin button) */
.fx-build { min-width: 0; display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: #FFF1E7; border: 1.5px solid #F2C6A8; }
.fx-gb { display: grid; gap: 8px; }
.fx-gb-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-gb-h { font: 800 .8rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #8E3A12; }
.fx-chip { padding: 0 8px; border-radius: 9px; background: #fff; border: 2.5px solid #1C1F26; font: 800 1.05rem var(--f-math); }
.fx-gb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fx-ops { flex: 1 1 180px; display: grid; grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 5px; }
.fx-ops button { min-height: 46px; min-width: 0; border-radius: 12px; border: 2px solid #1C1F26; background: #fff; color: #1C1F26; font: 800 1.45rem var(--f-math); box-shadow: 0 3px 0 rgba(28, 31, 38, .35); }
.fx-ops button[aria-checked="true"] { background: #E0672C; color: #fff; box-shadow: 0 3px 0 #1C1F26, inset 0 0 0 3px #FFC54D; }
.fx-size { flex: 1 1 150px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 2px 6px; border-radius: 14px; background: #fff; border: 1.5px dashed #D9A47F; }
.fx-size-l { font: 700 13px var(--f-ui); color: #5E6472; margin-right: auto; }
.fx-step { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: #2A2F3A; color: #FFC54D; }
.fx-step svg { width: 22px; height: 22px; }
.fx-step:active { transform: scale(.92); }
.fx-spin { min-width: 2.2em; min-height: 44px; display: grid; place-items: center; text-align: center; font: 800 1.7rem var(--f-display); padding: 0 4px; border-radius: 10px; margin-right: auto; }
.fx-size .fx-step:first-of-type { margin-left: 0; }
.fx-then { text-align: center; font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #8E4A20; }
.fx-gb button[disabled] { opacity: .55; cursor: default; }
.fx-qc { list-style: none; margin: 4px 0 0; padding: 8px 10px; display: grid; gap: 4px; border-radius: 12px; background: #fff; border: 1.5px solid #E2DACA; font: 600 .9rem var(--f-ui); }
.fx-qc li { display: flex; align-items: center; gap: 6px; animation: arIn .25s ease both; }
.fx-qc li > span:first-child { flex: 1; min-width: 0; }
.fx-qc li i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 900; color: #fff; background: #1E8A57; }
.fx-qc li.no i { background: #C2402F; }

/* phones */
@container room (max-width: 520px) {
  .fx-tool { padding: 0 11px; font-size: .86rem; }
  .fx-log { padding: 8px 10px; }
  .fx-build { padding: 10px; }
}
@container room (max-width: 300px) {
  .fx-tool span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* the dock's two buttons share 320 px on the smallest phones */
@media (max-width: 360px) { .ar-board .ar-actions .ar-btn { font-size: .95rem; gap: 6px; } }

/* "Why it works": the machine run as numbers on a belt */
.fx-trk { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 3px; margin: 5px 0 3px; }
.fx-trk b { min-width: 2.1em; padding: 1px 7px; border-radius: 8px; background: #fff; border: 2px solid #6B4F2A; box-shadow: 0 2px 0 #6B4F2A; color: #1C1F26; font: 800 1rem/1.35 var(--f-display); text-align: center; }
.fx-trk i { display: inline-flex; align-items: center; gap: 2px; font: 800 .86rem var(--f-math); font-style: normal; color: #8E3A12; }
.fx-trk i::after { content: '→'; font-family: var(--f-ui); font-weight: 700; }
.fx-trk.back b { border-color: #4B2FA0; box-shadow: 0 2px 0 #4B2FA0; background: #F4EFFF; color: #2B1A5E; }
.fx-trk.back i { color: #4B2FA0; }

/* the blueprint book (a dialog, so it follows the page theme) */
.fx-book { display: grid; gap: 10px; }
.fx-book h3 { font-size: 1.05rem; margin-top: 6px; }
.fx-book p { margin: 0; color: var(--ink-2); }
.fx-bp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.fx-bp { display: grid; justify-items: center; gap: 1px; padding: 6px 2px; border-radius: 12px; border: 1.5px dashed var(--line); color: var(--ink-3); }
.fx-bp b { font: 800 1.05rem var(--f-math); }
.fx-bp small { font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.2; }
.fx-bp.on { padding: 0; border: 0; }
.fx-bp.on button { width: 100%; min-height: 54px; display: grid; justify-items: center; align-content: center; gap: 1px; padding: 6px 2px; border-radius: 12px; border: 2px solid #1C1F26; background: #FFC54D; color: #1C1F26; box-shadow: 0 3px 0 #1C1F26; font: inherit; cursor: pointer; }
.fx-bp.on button[aria-pressed="true"], .fx-bp-list button[aria-pressed="true"] { background: #1C1F26; color: #FFC54D; border-color: #1C1F26; box-shadow: 0 3px 0 #E0672C; }
.fx-bp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-bp-list button { width: 100%; min-height: 44px; display: grid; gap: 1px; justify-items: start; padding: 8px 12px; border-radius: 12px; background: var(--panel-2); border: 1.5px solid var(--line); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.fx-bp-list b { font: 800 1rem var(--f-math); }
.fx-bp-list small { color: inherit; opacity: .85; }
.fx-bp-card { display: grid; gap: 6px; padding: 10px 14px; border-radius: 14px; background: var(--panel-2); border: 1.5px solid var(--line); }
.fx-bp-card h3 { margin: 0; font-size: 1.05rem; }
.fx-bp-card p { margin: 0; color: var(--ink); font-size: .95rem; }
.fx-bp-tab { border-collapse: collapse; font: 700 .95rem var(--f-math); }
.fx-bp-tab th { padding: 2px 10px 2px 0; text-align: left; font: 800 .7rem var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.fx-bp-tab td { min-width: 2.4em; padding: 2px 6px; text-align: center; border-left: 1px solid var(--line); }
.fx-bp-none { font-size: .95rem; }

.spin-slow { animation: gearSpin 30s linear infinite; transform-box: fill-box; transform-origin: center; }

/* "Why it works" can carry a hint the child tapped mid-run, and a Review tag in the shift */
.fx-review { display: inline-block; margin-right: 4px; padding: 0 8px; border-radius: 999px; background: #EFE9FC; border: 1.5px solid #4B2FA0; color: #3A2378; font: 800 13px/1.5 var(--f-ui); letter-spacing: .04em; vertical-align: 2px; }

/* ---------- the finale: the whole factory runs backwards ---------- */
.fx-finale { container: fin / inline-size; min-width: 0; display: grid; gap: 8px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, #3A3F4B, #2A2F3A); color: #EEF0F6; scroll-margin-top: 80px; scroll-margin-bottom: 170px; }
.fx-finale h2 { font-size: 1.1rem; color: #fff; }
.fx-fin-sub, .fx-fin-end { margin: 0; color: #D8DBE4; font-weight: 600; }
.fx-fin-end { color: #E4D8FF; font-weight: 800; }
.fx-fin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-fin { position: relative; min-width: 0; display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 4px 6px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .1); overflow: hidden; }
.fx-fin-c { flex: none; display: grid; justify-items: center; min-width: 42px; padding: 2px 5px; border-radius: 9px; background: #C9A46A; border: 2px solid #6B4F2A; color: #1C1F26; }
.fx-fin-c small { font: 800 13px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: #3A2A10; }
.fx-fin-c b { font: 800 1.05rem/1.2 var(--f-display); }
.fx-fin-g { flex: none; padding: 1px 4px; border-radius: 8px; background: #FFC54D; border: 2px solid #1C1F26; color: #1C1F26; font: 800 clamp(13px, 4.4cqi, 16px) var(--f-math); white-space: nowrap; }
.fx-fin-belt { flex: 1 1 6px; min-width: 2px; height: 6px; border-radius: 3px; background: repeating-linear-gradient(90deg, #FFC54D 0 4px, transparent 4px 9px); opacity: .5; }
.fx-fin.back { background: rgba(116, 87, 201, .3); border-color: #8F75DD; }
.fx-fin.back .fx-fin-g { background: #EFE9FC; color: #3A2378; border-color: #3A2378; }
.fx-fin.back .fx-fin-belt { background: repeating-linear-gradient(90deg, #C9B8F5 0 4px, transparent 4px 9px); }
.fx-fin.live { box-shadow: 0 0 0 3px #B9A5F0, 0 0 18px rgba(185, 165, 240, .6); }
.fx-fin.done [data-c="in"] { background: #9ED3B6; border-color: #1E8A57; }
.fx-fin-g.hit { box-shadow: 0 0 0 3px rgba(228, 216, 255, .8); }
.fx-fin-replay { justify-self: start; min-height: 44px; }
.fx-fin-replay svg { width: 20px; height: 20px; }

/* ---------- the factory shift ---------- */
.fx-shift-card { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin-top: 14px; padding: 16px 18px; border-radius: 20px; background: linear-gradient(135deg, #2A2F3A, #3A3F4B); color: #EEF0F6; border: 1.5px solid #1C1F26; box-shadow: var(--shadow); }
.fx-shift-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: #FFC54D; color: #1C1F26; border: 2.5px solid #1C1F26; }
.fx-shift-ic svg { width: 30px; height: 30px; }
.fx-shift-body { flex: 1 1 220px; min-width: 0; }
.fx-shift-body h3 { color: #fff; font-size: 1.2rem; }
.fx-shift-body p { margin: 4px 0 0; color: #D8DBE4; font-size: .95rem; }
.fx-shift-meter { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.fx-meter-txt { font-weight: 800; color: var(--ink-2); }
.fx-heat { display: inline-flex; align-items: center; gap: 4px; }
.fx-heat i { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--ink-3) 30%, transparent); }
.fx-heat i.on { background: #E0672C; box-shadow: 0 0 0 1.5px #1C1F26 inset; }
.fx-heat small { margin-left: 4px; font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.fx-clock { min-height: 44px; padding: 0 14px; }
.fx-clock svg { width: 18px; height: 18px; }
.fx-shift-results { display: grid; gap: 12px; }
.fx-shift-results .fx-finale, .fx-shift-results .fx-shift-kinds { width: min(100%, 620px); text-align: left; }
.fx-shift-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.fx-shift-kinds li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1.5px solid var(--line); }
.fx-shift-kinds span { color: var(--ink-2); font-size: .92rem; }
.fx-shift-note { margin: 0; color: var(--ink-2); }