.factory-board{--factory-ink:#294657;--factory-muted:#637a8a;--factory-line:#dce8ec;--factory-teal:#267969;color:var(--factory-ink);max-width:780px;margin:0 auto;text-align:left}
.factory-board *{box-sizing:border-box}
.factory-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 11px}
.factory-section-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:850;color:var(--factory-teal)}
.factory-attempts,.factory-demo-badge{flex:none;border-radius:20px;padding:5px 10px;background:#e7f4ef;color:#266c5d;font-size:12px;font-weight:800}
.factory-demo-badge{background:#fff0d6;color:#925719}
.factory-examples{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.factory-example{border:1px solid var(--factory-line);border-radius:16px;padding:10px 8px 12px;background:#f8fbfd;min-width:0}
.factory-example-number{display:block;text-align:center;margin-bottom:6px;color:var(--factory-muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.factory-pair{display:grid;grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr);align-items:center;gap:3px}
.factory-port{min-width:0;text-align:center}
.factory-port-label{display:block;margin-bottom:4px;color:var(--factory-muted);font-size:11px;font-weight:750}
.factory-item{min-width:0;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:5px}
.factory-item-svg{display:block;width:auto;max-width:100%;height:44px;overflow:visible}
.factory-item-label{font-size:11px;font-weight:700;color:#4f6576;line-height:1.2;text-align:center;overflow-wrap:normal}
.factory-flow{font-size:26px;font-weight:800;color:#64a592;text-align:center;line-height:1}
.factory-question{display:flex;align-items:center;justify-content:center;gap:24px;margin:13px 0 10px;padding:12px 15px;background:linear-gradient(105deg,#edf8f3,#f4f9fb);border:1px solid #d4e9e1;border-radius:17px}
.factory-question-input{width:150px;min-width:0;text-align:center}
.factory-machine{display:flex;align-items:center;gap:8px}
.factory-machine-icon{display:block;width:66px;height:56px}
.factory-machine-arrow{font-size:28px;font-weight:800;color:var(--factory-teal)}
.factory-mystery{width:120px;display:flex;align-items:center;flex-direction:column;color:var(--factory-teal);font-size:46px;font-weight:900;line-height:1}
.factory-mystery span{margin-top:6px;font-size:12px;font-weight:800}
.factory-choice-heading{text-align:center;font-size:13px;font-weight:800;margin:8px 0}
.factory-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.factory-option{position:relative;appearance:none;min-width:0;min-height:103px;margin:0;padding:15px 8px 12px;border:2px solid #d8e4e9;border-bottom-width:4px;border-radius:16px;background:#fff;box-shadow:0 2px 0 #e7eef0;color:var(--factory-ink);font:inherit;cursor:pointer;touch-action:manipulation;transition:border-color .15s,background .15s,transform .15s}
.factory-option:hover:enabled{border-color:#74b6a2;background:#f5fcf8;transform:translateY(-2px)}
.factory-option:active:enabled{transform:translateY(1px);border-bottom-width:2px}
.factory-option:focus-visible{outline:3px solid #327fb6;outline-offset:3px}
.factory-option-number{position:absolute;left:8px;top:6px;font-size:10px;color:#8a9ba6;font-weight:800}
.factory-option .factory-item-label{font-size:11px}
.factory-option-result{position:absolute;right:6px;top:4px;font-size:17px;font-weight:900;line-height:1}
.factory-option:disabled{cursor:default;opacity:1}
.factory-option.factory-wrong{background:#fff3f1;border-color:#eab0a6;box-shadow:none}
.factory-option.factory-wrong .factory-item{opacity:.43}
.factory-option.factory-wrong .factory-option-result{color:#bd5545}
.factory-option.factory-correct{background:#e8f8ee;border-color:#55a878;box-shadow:none}
.factory-option.factory-correct .factory-option-result{color:#26804e}
.factory-status{min-height:18px;margin:10px 0;font-size:12px;line-height:1.4;text-align:center;color:var(--factory-muted)}
.factory-explanation{padding:11px 13px;margin:8px 0 12px;border-radius:12px;background:#ecf6ef;border:1px solid #c9e2d0;font-size:13px;line-height:1.5}
.factory-legend{margin-top:12px;padding:11px 14px;background:#f8fafc;border:1px solid #e0e8ef;border-radius:15px}
.factory-legend-heading{font-size:11px;font-weight:850;margin-bottom:7px;color:#4b6879}
.factory-legend-heading>span{font-size:10px;color:#7c8f9e;font-weight:500;margin-left:7px}
.factory-cycle{display:flex;align-items:center;gap:10px;margin-top:5px}
.factory-cycle-label{width:37px;flex:none;color:#6b8190;font-size:10px;font-weight:750}
.factory-cycle-parts{display:flex;align-items:center;gap:9px;min-width:0}
.factory-cycle-part{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:11px;font-weight:650;color:#4a6274}
.factory-cycle-arrow,.factory-cycle-loop{font-size:15px;font-weight:750;color:#8ca5b3}
.factory-cycle-loop{margin-left:2px;color:#4a8d78}
.factory-swatch{display:inline-block;width:13px;height:13px;flex:none;border-radius:50%;background:var(--factory-fill);border:1px solid var(--factory-stroke)}
.factory-mini-shape{display:block;width:18px;height:19px;flex:none}
.factory-count-chip{justify-content:center;width:21px;height:20px;border:1px solid #cbdbe4;border-radius:6px;background:white;font-size:12px}
.factory-demo-answer{padding:10px 14px 12px;margin:12px 0;background:#edf8f2;border:1px solid #d0e8d9;border-radius:15px}
.factory-demo-answer>p{font-size:12px;font-weight:700;text-align:center;line-height:1.45;margin:0 0 10px;color:#356f5c}
.factory-demo-answer>.factory-pair{max-width:370px;margin:0 auto}
@media(max-width:600px){
 .factory-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .factory-examples{gap:7px}
 .factory-example{padding:8px 5px 9px;border-radius:12px}
 .factory-example-number{font-size:9px;margin-bottom:5px}
 .factory-pair{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);gap:1px}
 .factory-flow{font-size:19px}
 .factory-port-label{font-size:9px;margin-bottom:3px}
 .factory-example .factory-item-svg{height:32px}
 .factory-example .factory-item-label{font-size:9px;line-height:1.15;min-height:21px}
 .factory-item-svg{height:38px}
 .factory-question{gap:12px;margin:10px 0 8px;padding:9px 10px}
 .factory-question-input{width:118px}
 .factory-machine{gap:2px}
 .factory-machine-icon{width:49px;height:44px}
 .factory-machine-arrow{font-size:22px}
 .factory-mystery{width:80px;font-size:37px}
 .factory-mystery span{font-size:11px;margin-top:5px}
 .factory-option{min-height:83px;padding:12px 9px 9px;border-radius:13px}
 .factory-option .factory-item-svg{height:35px}
 .factory-item{gap:4px}
 .factory-status{font-size:11px;margin:8px 0}
 .factory-legend{padding:9px 10px;margin-top:9px;border-radius:12px}
 .factory-legend-heading{font-size:10px;margin-bottom:5px}
 .factory-legend-heading>span{font-size:9px;margin-left:3px}
 .factory-cycle{gap:5px;margin-top:4px}
 .factory-cycle-label{width:31px;font-size:9px}
 .factory-cycle-parts{gap:5px}
 .factory-cycle-part{font-size:10px;gap:3px}
 .factory-swatch{width:10px;height:10px}
 .factory-mini-shape{width:15px;height:16px}
 .factory-cycle-arrow,.factory-cycle-loop{font-size:13px}
 .factory-section-kicker{font-size:10px;letter-spacing:.04em}
 .factory-attempts,.factory-demo-badge{padding:4px 8px;font-size:11px}
 .factory-demo-answer{padding:9px 10px}
 .factory-demo-answer>p{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.factory-option{transition:none}.factory-option:hover:enabled{transform:none}}


/* Put evidence and choices together; keep the next step in the same viewport. */
.factory-play-area { scroll-margin-top: 8px; overflow-anchor: none; }
.factory-play-area:not([data-session-phase="demo"]) .game-board { padding: 14px; }
.factory-workbench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.factory-clues,.factory-answer { min-width: 0; }
.factory-workbench .factory-examples { grid-template-columns: 1fr; gap: 10px; }
.factory-workbench .factory-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.factory-workbench .factory-question { margin: 0 0 10px; padding: 10px; gap: 8px; }
.factory-workbench .factory-question-input { width: 130px; }
.factory-workbench .factory-machine-icon { width: 44px; height: 40px; }
.factory-workbench .factory-machine { gap: 2px; }
.factory-workbench .factory-mystery { width: 80px; font-size: 34px; }
.factory-workbench .factory-option { min-height: 84px; padding: 12px 6px 8px; }
.factory-workbench .factory-option .factory-item-svg { height: 36px; }
.factory-reference,.factory-solution { margin-top: 10px; border: 1px solid #dce8ec; border-radius: 12px; background: #f8fbfd; }
.factory-reference > summary,.factory-solution > summary { padding: 10px; font-size: .78rem; font-weight: 750; color: #426958; cursor: pointer; }
.factory-reference > summary:focus-visible,.factory-solution > summary:focus-visible { outline: 3px solid #327fb6; border-radius: 10px; }
.factory-reference .factory-legend { border: 0; margin: 0; padding: 0 10px 10px; background: transparent; }
.factory-reference-intro { margin: 0 0 10px; color: #4f6576; font-size: .85rem; line-height: 1.5; }
.factory-help { margin-top: 16px; }
.factory-help > summary { font-size: .85rem; }
.factory-reference .factory-legend-heading { display: none; }
.factory-reference .factory-cycle-parts { flex-wrap: wrap; gap: 4px; }
.factory-reference .factory-cycle { align-items: baseline; gap: 4px; }
.factory-reference .factory-cycle-part { font-size: 10px; }
.factory-solution .factory-explanation { margin: 0; padding: 0 10px 10px; border: 0; background: transparent; }
.factory-play-area .round-feedback { grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 12px; text-align: left; }
.factory-play-area #feedback-symbol { font-size: 30px; }
.factory-play-area .round-feedback h3 { justify-self: start; font-size: .95rem; }
.factory-play-area #round-stars { font-size: 1.15rem; letter-spacing: 2px; white-space: nowrap; }
/* The rule explanation is available on demand next to the chosen answer. */
.factory-play-area #feedback-explanation { display: none; }
.factory-play-area:not([data-session-phase="demo"]) .actions { position: sticky; bottom: 8px; z-index: 3; margin-top: 8px; padding: 8px; border-radius: 16px; background: #fffffff2; box-shadow: 0 3px 18px #233b4d12; }
.factory-play-area #next { min-height: 48px; padding: 10px 18px; }
@media (max-width: 600px) {
  .factory-play-area:not([data-session-phase="demo"]) .game-board { padding: 10px; }
  .factory-workbench { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .factory-workbench .factory-examples { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .factory-workbench .factory-example { padding: 6px 4px; }
  .factory-workbench .factory-example .factory-item-svg { height: 28px; }
  .factory-workbench .factory-example .factory-item-label { font-size: 10px; }
  .factory-workbench .factory-question { padding: 6px 10px; margin-bottom: 6px; }
  .factory-workbench .factory-question .factory-item-svg { height: 30px; }
  .factory-workbench .factory-option { min-height: 68px; padding: 12px 6px 6px; }
  .factory-workbench .factory-option .factory-item-svg { height: 30px; }
  .factory-workbench .factory-choice-heading { margin: 5px 0; }
  .factory-workbench .factory-status { min-height: 2.8em; margin: 6px 0 0; }
  .factory-reference,.factory-solution { margin-top: 6px; }
  .factory-reference > summary,.factory-solution > summary { padding: 7px 9px; }
  .factory-play-area .actions { gap: 6px; }
  .factory-play-area #next { padding-inline: 14px; font-size: .95rem; }
  .factory-play-area #cancel { padding-inline: 10px; font-size: .8rem; }
}