:root {
  color-scheme: dark;
  --bg: #10191d;
  --surface: #142126;
  --panel: #17262b;
  --raised: #1c2c32;
  --edge: #304349;
  --muted: #a6b9bb;
  --bright: #e9f2ef;
  --green: #c4eb9a;
  --teal: #99e1c8;
  --amber: #f4c985;
  --red: #f1a69c;
  --mono: "IBM Plex Mono", Consolas, monospace;
  font-family: Inter, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 280px; }
body { margin: 0; background: var(--bg); color: var(--bright); }
body, button, input, select { font-size: 14px; }
button, select { font: inherit; }
button { touch-action: manipulation; }
button:enabled { cursor: pointer; }
button:disabled { opacity: .44; }
button:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
button:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; }
h1, h2, h3, p { margin: 0; }
.icon { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.symbols { position: absolute; width: 0; height: 0; pointer-events: none; }
.button { border: 1px solid var(--edge); border-radius: 7px; background: #203137; color: var(--bright); min-height: 36px; padding: 7px 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1.25; white-space: nowrap; }
.button:enabled:hover { background: #2b4148; border-color: #506a6d; }
.button.primary { color: #182718; background: var(--green); border-color: var(--green); font-weight: 750; }
.button.primary:enabled:hover { background: #d6f3b5; border-color: #d6f3b5; }
.button.compact { min-height: 32px; padding: 6px 9px; font-size: 12px; }
.button.icon-button { width: 34px; padding: 5px; min-height: 34px; }
.button.icon-button .icon { width: 17px; height: 17px; }
.button.danger { color: var(--red); }
.button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
.masthead { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(20px, calc((100vw - 1570px) / 2)); border-bottom: 1px solid #304043; background: #142228; }
.brand, .mast-actions { display: flex; align-items: center; gap: 11px; }
.brand, .mast-actions .button { flex: none; }
.mast-actions { min-width: 0; }
.brand strong { font-size: 17px; letter-spacing: -.05em; white-space: nowrap; }
.brand strong span, .brand .icon { color: var(--green); }
.brand .icon { width: 24px; height: 24px; }
.brand small { color: var(--muted); border-left: 1px solid #53686a; padding-left: 10px; font: 11px var(--mono); letter-spacing: .09em; }
#save-status { color: var(--muted); font-size: 11px; text-align: right; overflow-wrap: anywhere; }
#save-status[data-warning] { color: var(--amber); }
.shell { width: min(1570px, calc(100% - 44px)); margin: 0 auto; padding: 24px 0; }
.topline { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 19px; }
.heading { min-width: 0; }
.heading h1 { font-size: clamp(25px, 2.65vw, 40px); line-height: 1.25; letter-spacing: -.035em; font-weight: 780; }
.heading > span { font: 11px var(--mono); color: var(--teal); display: block; margin-top: 5px; }
.telemetry { flex: 0 1 550px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--edge); border-radius: 10px; background: var(--surface); }
.telemetry div { padding: 10px 14px; display: grid; min-width: 0; gap: 2px; }
.telemetry div + div { border-left: 1px solid var(--edge); }
.telemetry small, .telemetry span { color: var(--muted); font-size: 11px; line-height: 1.25; }
.telemetry strong { color: var(--teal); font: 700 clamp(17px, 2.2vw, 25px)/1.2 var(--mono); white-space: nowrap; }
.telemetry strong[data-warning] { color: var(--amber); }
.work { display: grid; grid-template-columns: minmax(0, 1fr) clamp(278px, 23vw, 342px); grid-template-rows: max-content 1fr; grid-template-areas: "canvas side" "albus side"; gap: 12px; align-items: start; }
.canvas-panel, .panel, .albus { border: 1px solid var(--edge); border-radius: 11px; background: var(--surface); }
.canvas-panel { grid-area: canvas; min-width: 0; overflow: hidden; }
.toolbar { padding: 9px 12px; min-height: 55px; display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.toolbar-label, .toolbar-actions, .history-tools, .zoom-tools, .actions { display: flex; align-items: center; gap: 6px; }
.toolbar-label h2 { white-space: nowrap; font-size: 15px; }
#flow-state { color: var(--muted); font-size: 11px; white-space: nowrap; }
#flow-state i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); margin: 0 5px; }
#flow-state.live i { background: var(--green); box-shadow: 0 0 7px #c4eb9a55; }
.history-tools { gap: 2px; }
.history-tools > span { font-size: 10px; color: var(--muted); margin-right: 4px; }
.history-tools .button { background: transparent; border-color: transparent; }
.history-tools .button:hover:enabled { border-color: var(--edge); }
#speed-toggle { font-family: var(--mono); min-width: 38px; }
.board { height: clamp(390px, calc(100dvh - 370px), 700px); position: relative; overflow: clip; border-block: 1px solid var(--edge); isolation: isolate; touch-action: none; user-select: none; background-color: #0e191e; background-image: radial-gradient(circle, #31444b 1px, transparent 1.25px); background-size: var(--grid-step, 24px) var(--grid-step, 24px); background-position: var(--grid-x, 0) var(--grid-y, 0); }
.board[data-gesture="pan"], .board[data-gesture="move"] { cursor: grabbing; }
.board[data-gesture="wire"], .board[data-gesture="build"] { cursor: crosshair; }
.board:focus-visible { outline-offset: -3px; }
.scene, .wires, .devices { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; }
.scene { transform-origin: 0 0; }
.wires, .devices { pointer-events: none; }
.canvas-controls { position: absolute; z-index: 3; bottom: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.zoom-tools, .layout-tools { background: #15252af5; border: 1px solid #364c50; border-radius: 8px; padding: 3px; pointer-events: auto; }
.zoom-tools { gap: 0; }
.zoom-tools .button { background: transparent; border: 0; }
#zoom-value { min-width: 44px; font: 11px var(--mono); color: var(--muted); text-align: center; }
.layout-tools { padding-left: 8px; }
.canvas-message { position: absolute; z-index: 4; left: 12px; right: 12px; top: 12px; width: max-content; max-width: calc(100% - 24px); border-radius: 7px; border: 1px solid #497b6d; background: #1c3735; color: #d8f5e8; padding: 7px 10px; font-size: 12px; pointer-events: none; }
.canvas-message[data-kind="error"] { border-color: #a8705f; color: #ffe0d4; background: #4c302a; }
.canvas-message[data-kind="notice"] { border-color: #7c7350; color: #fae6b4; background: #3b3423; }
.canvas-footer { display: flex; justify-content: space-between; gap: 7px 12px; flex-wrap: wrap; padding: 9px 12px; min-height: 37px; color: var(--muted); font-size: 11px; }
#board-hint { color: #c6e6dd; }
.side { grid-area: side; min-width: 0; display: grid; gap: 10px; }
.panel { padding: 12px; min-width: 0; }
.panel > header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.panel > header h2 { font-size: 13px; letter-spacing: .01em; }
.panel > header > span, .meta { color: var(--muted); font-size: 11px; }
.stage-count { font-family: var(--mono); }
.stage-steps { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; margin-bottom: 10px; }
.stage-steps span { height: 4px; border-radius: 3px; background: #33454b; }
.stage-steps .past { background: #619b87; }
.stage-steps .current { background: var(--green); }
.objective h3 { font-size: 16px; margin: 4px 0; }
.objective p, .small-note { color: var(--muted); font-size: 11px; line-height: 1.55; }
.goal { display: grid; gap: 5px; margin-top: 9px; }
.goal-line { display: flex; gap: 5px; justify-content: space-between; align-items: baseline; font-size: 11px; }
.goal-line strong { flex: none; font: 700 11px var(--mono); }
.goal[data-met] .goal-line strong { color: var(--teal); }
progress { appearance: none; border: 0; display: block; width: 100%; height: 4px; border-radius: 5px; background: #304249; overflow: hidden; }
progress::-webkit-progress-bar { background: #304249; }
progress::-webkit-progress-value { background: #a9d384; }
progress::-moz-progress-bar { background: #a9d384; }
#rolling-window { margin-top: 6px; }
.unlock { margin: 11px 0 6px; }
#advance-stage { width: 100%; margin-top: 7px; }
#achievement { background: #213b2b; color: #d5f5c2; border: 1px solid #4c7458; border-radius: 6px; margin-top: 10px; padding: 7px 8px; font-size: 12px; }
.delivery-summary { font-size: 11px; width: 100%; border-collapse: collapse; margin-top: 10px; }
.delivery-summary td, .delivery-summary th { border-bottom: 1px solid var(--edge); padding: 5px 1px; text-align: left; }
.delivery-summary th { color: var(--muted); font-weight: 500; }
.delivery-summary td:nth-child(n+2), .delivery-summary th:nth-child(n+2) { text-align: right; }
.delivery-summary td:nth-child(n+2) { font-family: var(--mono); white-space: nowrap; }
.optional-targets { margin-top: 7px; }
.palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }
.palette-tile { display: grid; grid-template-columns: 19px minmax(0,1fr); gap: 2px 6px; align-items: center; text-align: left; border-radius: 6px; padding: 6px 7px; min-height: 43px; background: #1a2a30; border: 1px solid #30454a; color: var(--bright); }
.palette-tile .icon { grid-row: span 2; color: var(--teal); width: 16px; height: 16px; }
.palette-tile strong { font-size: 11px; }
.palette-tile small { color: var(--muted); font: 10px var(--mono); }
.palette-tile:enabled:hover, .palette-tile[aria-pressed="true"] { border-color: var(--teal); background: #25403c; }
.build-settings { margin-top: 8px; }
.picker { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; margin-top: 5px; color: var(--muted); }
select { min-width: 0; max-width: 67%; border: 1px solid #42575b; border-radius: 5px; background: #1b2b31; color: var(--bright); padding: 5px 6px; font-size: 11px; }
.inspect-title { font-size: 14px; margin-bottom: 4px; }
.inspect-status { color: var(--amber); font-size: 12px; margin-top: 6px; }
.inspect-status[data-good] { color: var(--teal); }
.inspector .actions { flex-wrap: wrap; margin-top: 9px; }
.port-list, .target-list { display: grid; gap: 4px; list-style: none; margin: 7px 0 0; padding: 0; }
.port-list .button, .target-list .button { width: 100%; justify-content: space-between; padding: 5px 6px; font-size: 11px; min-height: 30px; text-align: left; white-space: normal; }
.port-list strong { color: var(--teal); flex: none; font: 11px var(--mono); }
.target-list { max-height: 148px; overflow-y: auto; }
.target-list small { color: var(--amber); }
.supply-readout { display: grid; gap: 3px; margin-top: 8px; padding: 7px; background: #142125; border-radius: 6px; }
.albus { grid-area: albus; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; padding: 9px 12px; }
.albus-icon { display: grid; place-items: center; color: var(--green); border: 1px solid #4a6454; background: #213332; border-radius: 50%; width: 36px; height: 36px; }
.albus h2 { font: 700 11px var(--mono); letter-spacing: .13em; color: var(--teal); }
.albus p { margin-top: 3px; font-size: 12px; line-height: 1.45; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 6px 15px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 10px; border: 1px solid #52786b; border-radius: 8px; background: #203731; color: #d7f4e7; }
.banner.error { color: var(--red); border-color: #80564e; background: #402b29; }
.banner .actions { flex-wrap: wrap; }
dialog { width: min(510px, calc(100% - 24px)); padding: 16px; border: 1px solid #526b6b; border-radius: 11px; background: var(--panel); color: var(--bright); }
dialog::backdrop { background: #081014b8; }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.dialog-head h2 { font-size: 17px; }
dialog p { font-size: 13px; color: var(--muted); line-height: 1.6; }
.dialog-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.motion-choice { display: flex; align-items: center; gap: 5px; margin: 13px 0; }
dialog details p { margin-top: 6px; }
dialog summary { cursor: pointer; }
.device { --accent: #94cfbf; position: absolute; left: 0; top: 0; width: 182px; height: var(--height); display: flex; flex-direction: column; background: #19292e; border: 1px solid #4b6466; border-radius: 9px; pointer-events: auto; box-shadow: 0 7px 12px #0713178f; cursor: grab; }
.device[data-type="supply"] { --accent: #a9c9dd; }
.device[data-type="delivery"] { --accent: #d7ed9b; }
.device[data-type="splitter"], .device[data-type="merger"] { --accent: #f1c987; }
.device[data-type="assembly"] { --accent: #b0e3ad; }
.device[data-type="buffer"] { --accent: #ccb5ec; }
.device[data-type="inspection"] { --accent: #f0d47c; }
.device.selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 72%), 0 8px 14px #07131790; z-index: 2; }
.device.moving { z-index: 4; cursor: grabbing; }
.device[data-jam] { border-color: #b98b52; }
.device[data-disabled] { opacity: .65; }
.device.flash { box-shadow: 0 0 0 3px #c4eb9a70, 0 6px 12px #071317a0; }
.device-head { width: 100%; display: flex; align-items: center; gap: 7px; color: var(--bright); border: 0; border-bottom: 1px solid #374c4f; border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--accent) 10%, #1b2a30); text-align: left; min-height: 41px; padding: 7px 8px; cursor: grab !important; }
.device-head .icon { color: var(--accent); }
.device-head strong { font-size: 15px; font-weight: 730; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device-tier { margin-left: auto; color: var(--accent); font: 700 10px var(--mono); flex: none; }
.device-rule { color: #bed1cd; font-size: 11px; padding: 5px 8px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-port { position: absolute; padding: 0; width: 32px; height: 32px; transform: translate(-50%,-50%); display: grid; place-items: center; border: 0; background: transparent; color: var(--resource, #c3d4d6); z-index: 3; border-radius: 50%; }
.node-port::before { content: ""; width: 11px; height: 11px; border: 2px solid currentColor; box-shadow: 0 0 0 2px #0c181c; background: #142329; border-radius: 3px; transition: scale 100ms; }
.node-port[data-direction="out"]::before { border-radius: 50%; }
.node-port[data-connected]::before { background: currentColor; }
.node-port[data-locked] { opacity: .5; }
.node-port[data-source]::before, .node-port[data-target]::before { scale: 1.35; }
.node-port[data-target="legal"]::before { color: var(--teal); box-shadow: 0 0 0 3px #3a7a64; }
.node-port[data-target="invalid"]::before { color: var(--red); box-shadow: 0 0 0 3px #743c34; }
.node-port:enabled:hover::before { scale: 1.18; }
.port-label { position: absolute; pointer-events: none; font-size: 10px; color: #bbd0d0; transform: translateY(-50%); white-space: nowrap; max-width: 74px; overflow: hidden; text-overflow: ellipsis; }
.port-label[data-direction="in"] { left: 12px; }
.port-label[data-direction="out"] { right: 12px; }
.device-bottom { position: absolute; bottom: 5px; left: 7px; right: 7px; display: grid; gap: 4px; }
.device-status { font-size: 10px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.device-status i { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.device[data-good] .device-status i { background: var(--green); }
.device-meter { height: 3px; border-radius: 5px; background: #31484b; overflow: hidden; }
.device-meter i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; }
.edge-line, .edge-hit, .ghost-wire { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.edge-line { stroke: var(--resource, #94b5b9); stroke-width: 2.5; opacity: .8; pointer-events: none; }
.edge-hit { stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.edge-group[data-selected] .edge-line, .edge-group:focus-within .edge-line { opacity: 1; stroke-width: 4; filter: drop-shadow(0 0 4px var(--resource)); }
.edge-group[data-rewiring] .edge-line { opacity: .38; stroke-dasharray: 5 5; }
.edge-group.connected-flash .edge-line { stroke: var(--green); stroke-width: 4; opacity: 1; }
.edge-end { display: none; fill: #14252a; stroke: var(--resource, #94b5b9); stroke-width: 2; pointer-events: all; cursor: grab; }
.edge-group[data-selected] .edge-end { display: block; }
.ghost-wire { stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 7 5; }
.ghost-tip { fill: var(--teal); }
.ghost-wire[data-invalid] { stroke: var(--red); }
.ghost-tip[data-invalid] { fill: var(--red); }
.placement-ghost { width: 182px; min-height: 116px; padding: 8px; border: 1px dashed var(--teal); border-radius: 9px; background: #25403ca0; position: absolute; left: 0; top: 0; color: #cceee1; font-size: 12px; pointer-events: none; }
@media (max-width: 970px) {
  .shell { width: calc(100% - 26px); padding-top: 17px; }
  .work { grid-template-columns: minmax(0, 1fr) 250px; gap: 9px; }
  .toolbar { padding-inline: 8px; }
  .camera-hint { display: none; }
  .telemetry div { padding-inline: 8px; }
}
@media (max-width: 760px) {
  .masthead { padding-inline: 12px; min-height: 48px; }
  .brand, .mast-actions { gap: 7px; }
  .brand strong { font-size: 14px; }
  .brand .icon { width: 19px; height: 19px; }
  .brand small { padding-left: 6px; font-size: 9px; }
  .masthead .button .icon { width: 14px; height: 14px; }
  #save-status { font-size: 10px; }
  #save-status:not([data-warning]) { display: none; }
  .shell { width: calc(100% - 20px); padding-top: 13px; }
  .topline { display: grid; gap: 9px; margin-bottom: 10px; }
  .heading h1 { font-size: 26px; }
  .heading > span { margin-top: 2px; }
  .telemetry div { padding: 7px 8px; }
  .telemetry span, .telemetry small { font-size: 10px; }
  .work { grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto auto; grid-template-areas: "canvas" "albus" "side"; }
  .board { height: clamp(300px, 49dvh, 505px); }
  .toolbar { min-height: 48px; }
  .toolbar-actions { gap: 4px; }
  .toolbar-label { gap: 2px; }
  .toolbar-label h2 { font-size: 12px; }
  #flow-state { font-size: 10px; }
  #flow-state i { margin-inline: 3px; }
  .toolbar .history-tools > span { display: none; }
  .toolbar .history-tools .button { width: 25px; min-height: 28px; }
  .toolbar .history-tools .icon { width: 14px; height: 14px; }
  .toolbar .button.primary { min-height: 32px; font-size: 12px; padding: 5px 6px; gap: 3px; }
  .toolbar .button.primary .icon { width: 15px; height: 15px; }
  #speed-toggle { min-width: 31px; padding-inline: 4px; }
  .canvas-controls { left: 7px; right: 7px; bottom: 7px; }
  .canvas-footer { padding: 7px 9px; min-height: 30px; }
  .albus { padding-inline: 8px; gap: 7px; }
  .albus-icon { width: 31px; height: 31px; }
  .albus p { font-size: 11px; }
  .side { gap: 9px; }
}
@media (max-width: 355px) {
  .brand small { display: none; }
  .toolbar-label h2 { display: none; }
  .layout-tools > span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
html[data-low-motion] *, html[data-low-motion] *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; }

/* v03 modules, transport forms and measured production. */
.stage-steps { grid-template-columns: repeat(6, 1fr); }
#multi-toggle .icon { width: 16px; height: 16px; }
.group-frames { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.group-frame { position: absolute; left: 0; top: 0; border: 2px solid #51716c; border-radius: 12px; background: #25403738; pointer-events: none; }
.group-frame[data-selected] { border-color: #aed9b3; background: #3e675445; }
.group-frame[data-folded] { background: #203a36; border-color: #79aa94; }
.group-head { height: 38px; display: flex; align-items: center; gap: 7px; width: 100%; border: 0; border-bottom: 1px solid #50766b; border-radius: 9px 9px 0 0; padding: 5px 8px; text-align: left; background: #28453d; color: #e3f6e9; cursor: grab !important; pointer-events: auto; }
.group-head .icon { color: #b7e3bd; }
.group-top { display: flex; }
.group-head { min-width: 0; }
.fold-button { display: grid; place-items: center; width: 37px; height: 38px; flex: none; border: 0; border-bottom: 1px solid #50766b; border-radius: 0 8px 0 0; background: #28453d; color: #cce9d6; pointer-events: auto; }
.fold-button:hover { background: #365b4e; }
.fold-button .icon { width: 16px; height: 16px; }
.group-frame.flash { border-color: #c4eb9a; }
.group-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-head small { margin-left: auto; color: #c5d9d5; white-space: nowrap; font: 10px var(--mono); }
.group-state { position: absolute; left: 9px; top: 45px; font-size: 11px; color: #d2e5db; }
.group-frame .port-label { max-width: 118px; }
.group-frame[data-folded] .node-port { pointer-events: auto; }
.group-frame[data-folded] .group-flow { position: absolute; left: 8px; bottom: 8px; color: var(--teal); font: 10px var(--mono); }
.group-frame:not([data-folded]) .group-flow { display: none; }
.group-frame .port-label[data-direction="out"] { text-align: right; }
.device[data-multi] { outline: 2px solid #bdeab6; outline-offset: 4px; }
.device[data-copy-blocked], .group-frame[data-copy-blocked] { outline: 2px solid var(--red); outline-offset: 4px; }
.device[data-type="packer"], .device[data-type="unpacker"] { --accent: #cab3e9; }
.device[data-type="batch_inspection"] { --accent: #f5ce88; }
.device-flow { position: absolute; top: 44px; right: 8px; color: var(--accent); font: 9px var(--mono); }
.device-rule { max-width: calc(100% - 55px); }
.node-port[data-packet]::before { border-radius: 1px; transform: rotate(45deg); }
.node-port[data-packet]::after { content: ""; position: absolute; width: 4px; height: 4px; background: currentColor; border-radius: 1px; }
.edge-group[data-packet] .edge-line { stroke-width: 3.5; stroke-dasharray: 7 3; }
.edge-flow { font: 10px var(--mono); fill: #d7ece7; stroke: #102127; stroke-width: 3px; paint-order: stroke; pointer-events: none; }
.edge-group:not([data-selected]) .edge-flow { opacity: 0; }
.edge-group[data-packet]:not([data-selected]) .edge-flow[data-flowing] { opacity: .84; }
.group-ghost, .marquee { position: absolute; left: 0; top: 0; pointer-events: none; }
.marquee { border: 1px dashed #a5e2c6; border-radius: 2px; background: #83d6b32b; }
.group-ghost { border: 2px dashed #9ce0b8; border-radius: 10px; background: #2952427c; }
.group-ghost > span { position: absolute; display: grid; place-items: center; width: 182px; height: 100px; background: #2e524b; border: 1px solid #8bcab3; border-radius: 7px; color: #e3f8e8; font-size: 12px; }
.group-ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.group-ghost path { fill: none; stroke: #9de0c1; stroke-width: 2; stroke-dasharray: 5 4; }
.module-palette { display: grid; gap: 6px; margin-top: 8px; }
.module-palette label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.module-palette input, .picker input { min-width: 0; width: 100%; border: 1px solid #42575b; border-radius: 5px; background: #1b2b31; color: var(--bright); padding: 6px; font: inherit; }
.picker input { max-width: 67%; }
.copy-totals { display: grid; grid-template-columns: 1fr auto; margin: 8px 0; gap: 5px 8px; font-size: 11px; }
.copy-totals dd { margin: 0; font-family: var(--mono); color: var(--teal); }
.copy-members { max-height: 105px; overflow-y: auto; padding-inline-start: 17px; }
.batch-settings { margin-top: 8px; border-top: 1px solid var(--edge); padding-top: 4px; }
.batch-settings .actions { margin-top: 6px; }
.batch-status { padding: 5px 7px; margin-top: 6px; background: #22373b; border-radius: 5px; }
.process-chip { position: absolute; z-index: 4; pointer-events: none; left: 50%; top: 40px; display: grid; place-items: center; width: 40px; height: 24px; transform: translate(-50%, -50%); color: #251c37; background: #ddc7f3; border-radius: 4px; font: 11px var(--mono); }
.process-chip i { --dx: 16px; --dy: 16px; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ead4ff; animation: pack-grain 150ms ease-out both; }
.process-chip i:nth-of-type(2) { --dx: -18px; --dy: 12px; }
.process-chip i:nth-of-type(3) { --dx: 18px; --dy: -12px; }
.process-chip i:nth-of-type(4) { --dx: -13px; --dy: -15px; }
.process-chip[data-action="unpacked"] i { animation-direction: reverse; }
@keyframes pack-grain { from { transform: translate(var(--dx), var(--dy)); } to { transform: translate(0, 0); opacity: 0; } }
@media (max-width: 760px) {
  #multi-toggle { padding-inline: 5px; min-width: 32px; }
  #multi-toggle .icon { width: 15px; height: 15px; }
  #multi-toggle span { display: none; }
}
/* v04 / maintenance deck */
:root{--ink:#101b29;--panel:#172333;--edge:#3d5065;--bright:#f0f5f8;--muted:#a5b7c8;--teal:#89d9e6;--green:#a4e8b5;--amber:#f0c587;--red:#f7a2a9;--pink:#f499bd;--floor:#142331;color-scheme:dark}
body{background:#101925;color:var(--bright)}
body[data-screen="title"] .game-only,body[data-screen="game"] #title-screen{display:none}
[hidden]{display:none!important}
.masthead{background:#0e1926;border-bottom-color:#435267}
.brand>svg{color:var(--pink)}
.brand strong span{color:var(--pink)}
.shell{width:min(1800px,calc(100% - 36px));padding:15px 0 26px}
.topline{margin-bottom:12px}
.topline .heading h1{font-size:clamp(18px,2.2vw,30px);letter-spacing:.03em}
.work{grid-template-columns:minmax(0,1fr) clamp(290px,25vw,365px)}
.canvas-panel,.panel,.albus,.telemetry>div{background:#192737;border-color:#41556a;border-radius:5px}
.button,.palette-tile{border-radius:5px}
.button.primary{background:#d5f4f0;color:#102730;border-color:#d5f4f0;font-weight:800}
.button.primary:hover:not(:disabled){background:#aef0eb;color:#102730}
.button:focus-visible,.node-port:focus-visible{outline-color:#f7abd0}
.board{height:clamp(430px,calc(100dvh - 260px),830px);background-color:var(--floor);background-image:linear-gradient(90deg,#70869620 1px,transparent 1px),linear-gradient(#70869620 1px,transparent 1px);border-color:#506176}
.hangar-landscape{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:linear-gradient(180deg,#121c29ba,transparent 25%,transparent 82%,#0b141ec4),repeating-linear-gradient(90deg,transparent 0 19.7%,#b4d8f719 20% 20.2%)}
.hangar-window{height:94px;position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,#2f5270,#3d6381 60%,#6a8998 62%,#435565 65%,#243746 66%);border-bottom:6px solid #4e6172;box-shadow:inset 0 0 26px #0e1a32;opacity:.66}
.hangar-window::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 15.7%,#0f2031d1 15.8% 16.8%,#93a5b842 16.9% 17.25%);border-block:5px solid #172638}
.hangar-beam{position:absolute;bottom:0;left:0;right:0;height:34px;border-block:3px solid #526474;background:repeating-linear-gradient(130deg,#151f2a 0 25px,#293e4e 25px 43px)}
.hangar-letter{position:absolute;right:24px;top:100px;font:bold 61px/.95 var(--mono);color:#b8d5e21a;letter-spacing:-.08em}
.hangar-letter small{display:block;font:bold 10px var(--mono);letter-spacing:.3em}
.hangar-lights{position:absolute;top:78px;left:22px;right:22px;display:flex;justify-content:space-around}
.hangar-lights i{width:36px;height:3px;background:#5b7d90;box-shadow:0 0 8px #76b8c9}
body:not([data-visual="peaceful"]) .hangar-lights i:nth-child(2n+1),body[data-visual="rebuilding"] .hangar-lights i,body[data-visual="recovered-workshop"] .hangar-lights i,body[data-visual="first-cooperation"] .hangar-lights i{background:#e8ddae;box-shadow:0 0 13px #ffdc85}
body[data-visual="emergency"]{--floor:#2e222e}
body[data-visual="emergency"] .hangar-window{background:linear-gradient(165deg,#412836,#96514e 60%,#493345 63%,#241c2b 66%)}
body[data-visual="emergency"] .hangar-lights i{background:#f88176;box-shadow:0 0 16px #f47472}
body[data-visual="emergency"] .world-chip{border-color:#c66969;color:#ffc1b5}
body[data-visual="contact"],body[data-visual="first-cooperation"]{--floor:#172a38}
body[data-visual="contact"] .hangar-window,body[data-visual="first-cooperation"] .hangar-window{background:linear-gradient(175deg,#304066,#5e7591 54%,#d2a78f 57%,#514d66 63%,#233445 70%)}
.world-chip{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:8px;padding:6px 11px;background:#0d1824d8;border:1px solid #67869e;color:#dcebf3;border-radius:3px;font-size:12px;pointer-events:none}
.world-chip i,.title-system i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.device{background:linear-gradient(#223447,#182739 49%,#142333 50%,#172838);border:1px solid #698294;border-radius:5px;box-shadow:0 5px 0 #0d1824,0 12px 22px #050f18aa}
.device-head{border-radius:4px 4px 0 0;background:#22384c;min-height:42px;border-color:#4d6479}
.device-head strong{font-size:14px}
.device[data-type="delivery"]{--accent:#cbe996}
.device[data-type="machine"]{--accent:#7edee7}
.device-rule{font-size:12px;max-width:100%;margin-top:1px}
.device-flow{top:auto;bottom:23px;font-size:10px}
.equipment-art{position:absolute;width:148px;height:92px;top:61px;left:16px;color:var(--accent);pointer-events:none}
.device[data-type="buffer"] .equipment-art .stock{opacity:var(--fill,.32)}
.device[data-status="working"] .work-lamp,.device[data-status="routing"] .work-lamp,.device.flash .work-lamp{filter:drop-shadow(0 0 3px currentColor)}
.device[data-status="working"] .part.press,.device.flash .part.press{animation:press .8s ease-in-out infinite}
.device[data-status="working"] .part.scan,.device.flash .part.scan{animation:scan 1s ease-in-out infinite}
.device.flash .part.slide{animation:slide .38s ease-out}
.device.flash .part.rise{animation:press .4s ease-in-out}
@keyframes press{50%{transform:translateY(8px)}}
@keyframes scan{50%{transform:translateY(16px);opacity:.35}}
@keyframes slide{from{transform:translateX(-10px);opacity:.4}to{transform:none;opacity:1}}
.board[data-paused="true"] .device .part{animation-play-state:paused}
[data-low-motion] .device .part{animation:none!important}
.device .port-label{max-width:62px;background:#142231e8;border-radius:3px;padding:2px 3px;font-size:10px}
.resource-art{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.25em;flex:none}
.port-label .resource-art{width:1.2em;height:1.2em;margin-right:2px}
.device-status{font-size:11px}
.goal-line span{display:flex;align-items:center;gap:4px}
.panel h2{font-size:14px}
.stage-eyebrow,.result-kicker{color:#a7d6e0;font:700 11px var(--mono);letter-spacing:.13em}
.goal-summary{display:grid;gap:4px}
.order-strip{border:1px solid #4c6278;background:#142233;margin:.5rem 0;padding:.5rem;border-radius:5px;font-size:12px;line-height:1.6}
.order-strip strong{color:#c0ebeb}
.albus{border-left:3px solid #df9ebf}
.albus-icon{border-radius:5px;color:#f4aed1;border-color:#ab7192;background:#33283c}
.albus h2{color:#f4aed1}
.albus-actions{display:flex;gap:5px;flex-wrap:wrap}
.controls-help{display:grid;gap:5px}
.controls-help dt{font-weight:750;color:#a8dee5}.controls-help dd{margin:0 0 11px;color:#dce6ef}
dialog{max-height:min(85dvh,850px);overflow:auto}
.story-entry{margin:12px 0;padding:11px 13px;background:#162837;border-left:3px solid #b48aa9}
.story-entry p{margin:5px 0}.story-entry strong{color:#f2b3d0}
#result-dialog{border-color:#80b5ac;padding:26px}
#result-heading{font-size:clamp(20px,4vw,34px);margin:10px 0}
#result-content{margin-bottom:16px}
#delegation-dialog{width:min(760px,calc(100% - 24px))}
.delegation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(205px,100%),1fr));gap:8px;margin:.7rem 0}
.delegation-grid>*{min-width:0;padding:9px;border:1px solid #49657c;background:#152636;border-radius:4px}
.delegation-grid p{margin:5px 0}
.delegation-fields{display:grid;gap:8px;margin:8px 0}
.delegation-fields fieldset{border:1px solid #4d6579}
.delegation-fields select{width:100%;margin-block:3px}
.delegation-fields label{display:block;padding:4px 0}
.title-screen{min-height:100dvh;position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:center;padding:clamp(26px,7vw,110px);background:radial-gradient(ellipse at 70% 20%,#536685,#27394e 42%,#101c2a 78%);}
.title-screen::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#09131ff5,#101c2cda 33%,transparent 80%),repeating-linear-gradient(0deg,transparent 0 3px,#96c2ea0f 3px 4px)}
.title-content{position:relative;max-width:600px}
.title-kicker,.title-system{font:700 clamp(9px,1.1vw,13px)/1.4 var(--mono);letter-spacing:.15em;color:#afc9d9;display:flex;align-items:center;gap:9px}
.title-kicker span{width:28px;height:2px;background:#f5a4c2}
.title-mark{width:50px;height:50px;fill:none;stroke:#f3a6c8;stroke-width:1.5;margin:32px 0 3px}
.title-content h1{font-size:clamp(48px,9.7vw,142px);font-weight:900;letter-spacing:-.095em;line-height:.88;margin:6px 0;color:#f2f5f6;white-space:nowrap;text-shadow:0 8px 34px #080e1b}
.title-content h1 span{color:#ec95b9;font-weight:750;margin:0 .03em}
.title-albus{font:750 clamp(19px,3.1vw,42px) var(--mono);color:#a9d8e6;margin:16px 0 17px}
.title-rule{max-width:470px;height:2px;background:linear-gradient(90deg,#f29abb,#83bbce,transparent);margin:19px 0}
.title-content h2{font-size:clamp(20px,2.9vw,38px);margin:0 0 6px}
.title-intro{color:#cbdae4;margin:0 0 28px;font-size:clamp(13px,1.55vw,18px)}
.title-buttons{display:grid;gap:9px;width:min(355px,100%)}
.title-buttons>button{justify-content:space-between;min-height:50px;padding:10px 13px}
.title-buttons>a{justify-content:center;text-decoration:none}
.title-buttons>div{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.title-buttons>div .button{min-height:42px;justify-content:center}
.title-buttons small{font-size:11px;max-width:55%;text-align:right}
.title-save-status{margin:10px 0;color:#ffd0bc;min-height:1em}
.title-system{margin-top:23px;color:#b3c7d6;font-size:9px}
.title-coordinate{position:absolute;right:5%;bottom:6%;display:grid;color:#bcd0df6e;text-align:right}
.title-coordinate strong{font:900 clamp(44px,10vw,150px)/.9 var(--mono);letter-spacing:-.12em}
.title-coordinate small{margin-top:11px;font:700 11px var(--mono);letter-spacing:.2em}
.title-deck{position:absolute;inset:0;z-index:-2;overflow:hidden}
.title-deck::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(112deg,transparent 0 12%,#142033 12.3% 13.7%,#8b9bb063 13.8% 14%,transparent 14.1% 20%),linear-gradient(165deg,#273a58 0 22%,#8ea1bb 23% 32%,#626f85 34% 36%,#293c4d 37% 48%,#0d1b2b 50%)}
.title-deck::after{content:"";position:absolute;inset:60% -15% -22%;background:linear-gradient(180deg,#7c8da0,#25384b 10%,#172b3b),repeating-linear-gradient(90deg,transparent 0 11%,#9bb6c7 11% 11.3%);transform:perspective(300px) rotateX(37deg);border-block:4px solid #7f91a2;opacity:.65}
.title-deck i{position:absolute;right:-1%;width:57%;height:3px;background:linear-gradient(90deg,#eaa0b9,#b7e7ee 50%,transparent 83%);box-shadow:0 0 16px #eea3bc;transform:rotate(-11deg)}
.title-deck i:nth-child(1){top:18%}.title-deck i:nth-child(2){top:24%}.title-deck i:nth-child(3){top:60%}.title-deck i:nth-child(4){top:70%}
.title-deck span{position:absolute;right:9%;top:12%;color:#d4e2edb3;font:750 15px/1.4 var(--mono);letter-spacing:.2em;text-align:right}
.deck-fuselage{position:absolute;right:4%;top:33%;width:min(56vw,960px);height:28%;background:linear-gradient(150deg,#89a2b6 5%,#334e67 20%,#718da1 22%,#384f65 54%,#182c44 60%,#23394e);clip-path:polygon(0 69%,12% 19%,40% 0,80% 4%,100% 48%,90% 85%,21% 100%);transform:rotate(-10deg);box-shadow:inset 0 20px 35px #c6e6f260}
.deck-fuselage b{position:absolute;top:36%;width:15%;height:12%;border-radius:100%;background:#b6f1e4;box-shadow:0 0 12px 3px #8dd5ef}
.deck-fuselage b:nth-child(1){left:21%}.deck-fuselage b:nth-child(2){left:42%}.deck-fuselage b:nth-child(3){left:63%}
@media(max-width:760px){.shell{width:calc(100% - 16px)}.work{grid-template-columns:minmax(0,1fr)}.board{height:clamp(420px,57dvh,630px)}.title-deck span,.title-coordinate{display:none}.albus-actions{grid-column:2}.albus{align-items:start}.world-chip{font-size:11px}}

@media(min-width:761px){.board{height:clamp(355px,calc(100dvh - 363px),790px)}}
.stage-steps{grid-template-columns:repeat(12,1fr)}
.scope-choices{max-height:165px;overflow:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px 9px}
.scene[data-zoom="overview"] .device-rule,.scene[data-zoom="overview"] .device-flow,.scene[data-zoom="overview"] .port-label{visibility:hidden}
body[data-stage="first_delivery"] .node-port[data-node="make_parts"][data-port="out"]:not([data-connected]),
body[data-stage="first_delivery"] .node-port[data-node="sky_delivery"][data-port="parts"]:not([data-connected]){box-shadow:0 0 0 3px #70dce34d,0 0 15px #70dce37a}
body[data-visual="emergency"] .hangar-landscape::after{content:"";position:absolute;top:105px;left:0;right:0;border-top:1px dashed #e3a29f80}

.mobile-mission{display:none}
@media(max-width:760px){.mobile-mission{display:block;margin:0 0 7px;padding:7px 9px;border-left:3px solid #8fd3e3;background:#1b2c3c;font-size:12px;line-height:1.3}}
@media(prefers-reduced-motion:no-preference){
body:not([data-low-motion]) .title-deck i{animation:deck-light 6s ease-in-out infinite alternate}
body:not([data-low-motion]) .title-deck i:nth-child(2n){animation-delay:-3s}
body:not([data-low-motion])[data-visual="emergency"] .hangar-window::after{animation:vent-warning 2.8s ease-in-out infinite alternate}
}
@keyframes deck-light{from{opacity:.55}to{opacity:1}}
@keyframes vent-warning{from{opacity:.6}to{opacity:1}}

.factory-search { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
#factory-search, .factory-settings input:not([type="checkbox"]), .factory-population-form input {
  width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid #475f72; border-radius: 5px;
  background: #102130; color: var(--bright); font-size: 12px;
}
#factory-search:focus, .factory-settings input:focus { outline: 2px solid var(--teal); outline-offset: 2px; }
#factory-palette-list { max-height: clamp(180px, 35dvh, 360px); overflow: auto; margin-top: 8px; padding-right: 4px; }
.palette-category + .palette-category { margin-top: 10px; }
.palette-category h3 { margin-bottom: 4px; color: var(--teal); font-size: 11px; font-weight: 650; }
.palette-tile strong { line-height: 1.35; overflow-wrap: anywhere; }
.palette-tile small { line-height: 1.3; }
#factory-recipes { padding-top: 9px; border-top: 1px solid var(--edge); margin-top: 9px; }
#factory-recipes-data { max-height: 280px; overflow: auto; }
#factory-recipes-data h4 { margin: 7px 0 2px; font-size: 12px; }
.factory-operations { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--edge); }
.factory-operations details { min-width: 0; padding: 9px 12px; }
.factory-operations details + details { border-left: 1px solid var(--edge); }
.next-action,.operations-panel{margin:0 0 10px;padding:9px 13px;border:1px solid var(--edge);border-radius:6px;background:#142631}
.next-action:not([hidden]){display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.next-action p{margin:0;font-size:.88rem;flex:1 1 36ch}
.operations-panel summary{cursor:pointer;color:#bde5ee;font-weight:700}
.operations-panel dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:9px;margin:10px 0}
.operations-panel dt{font-size:.76rem;color:#a8bccc}
.operations-panel dd{margin:3px 0 0;font-size:.86rem}
.factory-operations summary, #factory-recipes summary, .factory-all-kinds summary {
  cursor: pointer; color: var(--teal); font-size: 12px; line-height: 1.5;
}
.factory-connection-list { margin-top: 5px; }
.factory-connection-list ul { list-style: none; margin: 5px 0 0; padding: 0; display: grid; gap: 3px; max-height: 260px; overflow: auto; }
.factory-connection-list button { width: 100%; text-align: left; white-space: normal; justify-content: space-between; }
.factory-connection-list strong { color: var(--teal); font: 11px var(--mono); flex: none; }
#factory-account-data dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 11px; margin: 7px 0; font-size: 11px; }
#factory-account-data dt { color: var(--muted); }
#factory-account-data dd { margin: 0; overflow-wrap: anywhere; }
.factory-account-actions, .factory-population-form { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 7px; font-size: 11px; }
.factory-population-form input { width: 60px; }
.canvas-footer { align-items: center; }
.canvas-footer:has(#inspector-jump:not([hidden])) .camera-hint { display: none; }
.factory-settings { margin-top: 8px; }
.factory-settings input:not([type="checkbox"]) { max-width: 48%; }
.factory-lots { padding-left: 18px; margin: 4px 0 7px; }
.factory-port-warning { color: var(--amber); margin: 2px 4px; }
.factory-all-kinds { margin-top: 7px; max-height: 260px; overflow: auto; }
.factory-contract { border-top: 1px solid var(--edge); padding-top: 7px; margin-top: 9px; }
.device[data-factory-category="食料・生活"] { --accent: #b8d99e; }
.device[data-factory-category="衛生・循環"] { --accent: #a1d8f1; }
.device[data-factory-category="判定・分岐"] { --accent: #efcc90; }
.device[data-factory-category="検査・再処理"] { --accent: #dac1ed; }
.device[data-factory-category="AI委任"] { --accent: #a5dfd1; }
.edge-group[data-delayed] .edge-line { stroke-dasharray: 8 5; }
@media (max-width: 760px) {
  .factory-operations { grid-template-columns: minmax(0, 1fr); }
  .factory-operations details + details { border-left: 0; border-top: 1px solid var(--edge); }
  #factory-palette-list { max-height: 250px; }
}