@layer reset, tokens, base, shell, monitor, scenes, routes, dialog, responsive, access;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { min-width: 320px; }
  body, h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
  ul, ol { padding: 0; list-style: none; }
  button, dialog { font: inherit; }
  button { color: inherit; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #020713; --bg-deep: #01040c; --panel: #050b19; --panel-high: #081426;
    --panel-soft: #0b2035; --line: #175069; --line-soft: #102e43;
    --cyan: #24e4ee; --cyan-high: #a4fbff; --green: #3de968; --amber: #e9b75c;
    --red: #ef6574; --violet: #9e45e8; --text: #e8f9fb; --muted: #86a8b3;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --sans: system-ui, "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
    --hard-shadow: 4px 4px 0 #000b;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #dce8eb; --bg-deep: #cadadd; --panel: #f7fbfc; --panel-high: #e5f0f2;
    --panel-soft: #d4e5e9; --line: #397d8b; --line-soft: #a9c9d0; --cyan: #006f7d;
    --cyan-high: #005763; --green: #08784b; --amber: #8c5d00; --red: #ac2938;
    --violet: #6045b6; --text: #071920; --muted: #405f68;
  }
}

@layer base {
  html { overflow-x: clip; background: #01040c; }
  body { min-height: 100dvh; overflow-x: clip; background: #01040c; color: var(--text); font-family: var(--sans); font-size: 14px; line-height: 1.35; }
  body::after { content: ""; position: fixed; z-index: 80; inset: 0; pointer-events: none; opacity: .08; background: repeating-linear-gradient(0deg, transparent 0 3px, #000 4px); }
  button { border: 0; cursor: pointer; }
  button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--amber); outline-offset: -3px; }
  .skip-link { position: fixed; z-index: 200; top: 6px; left: 6px; padding: 10px 14px; background: var(--amber); color: #111; transform: translateY(-160%); }
  .skip-link:focus { transform: none; }
  .eyebrow, .kicker, .panel-index, time, dt, .badge, .count, .station-kind, .kpi-label { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .shell { width: 100%; min-height: 100dvh; background: var(--bg); }
}

@layer shell {
  .topbar { position: relative; z-index: 20; height: 116px; border-bottom: 2px solid #0f4158; background: linear-gradient(180deg,#020713,#030a18); overflow: hidden; }
  .brand-lockup { position: absolute; z-index: 2; top: 20px; left: 15px; display: flex; align-items: center; gap: 12px; }
  .brand-mark { display: grid; place-items: center; width: 54px; height: 58px; border: 3px solid var(--cyan); background: #071525; color: var(--cyan-high); font: 900 15px var(--mono); clip-path: polygon(0 0,80% 0,100% 20%,100% 100%,20% 100%,0 80%); box-shadow: var(--hard-shadow), 0 0 9px #24e4ee55; }
  .brand-lockup h1 { color: #defcff; font: 900 52px/.86 var(--mono); letter-spacing: -.085em; white-space: nowrap; text-shadow: 3px 3px 0 #143d53; }
  .brand-lockup h1 span { color: var(--cyan-high); }
  .brand-lockup h1 em { margin-left: 8px; color: var(--violet); font: 800 17px/1 var(--mono); letter-spacing: 0; font-style: normal; }
  .brand-lockup .eyebrow { margin-top: 9px; color: #668894; font-size: 8px; }
  .source-meta { position: absolute; z-index: 4; top: 27px; left: 831px; display: grid; grid-template-columns: 1fr auto; width: 369px; height: 72px; padding: 9px 12px; border: 3px solid var(--cyan); background: #030b18ed; box-shadow: inset 0 0 0 2px #123b50, 0 0 10px #24e4ee33; }
  .source-meta::before, .source-meta::after { content: ""; position: absolute; width: 9px; height: 9px; background: var(--bg); }
  .source-meta::before { top: -3px; left: -3px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
  .source-meta::after { right: -3px; bottom: -3px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
  .source-meta .clock-label { align-self: end; color: var(--muted); font: 8px var(--mono); letter-spacing: .11em; }
  .source-meta time { align-self: start; overflow: hidden; color: var(--cyan-high); font: 900 18px/1.2 var(--mono); letter-spacing: -.04em; text-overflow: ellipsis; white-space: nowrap; }
  .source-meta .badge { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 6px 8px; border: 1px solid var(--green); color: var(--green); font-size: 8px; }
  .source-meta .badge[data-connection="stale"] { border-color: var(--amber); color: var(--amber); }
  .source-meta .badge[data-connection="disconnected"] { border-color: var(--red); color: var(--red); }
  .circuit-field { position: absolute; inset: 0 369px 0 49%; opacity: .42; background: repeating-linear-gradient(90deg,transparent 0 39px,#13506b 40px 42px); }
  .circuit-field i { position: absolute; left: 0; height: 2px; background: #17617b; box-shadow: 0 0 5px #24e4ee55; }
  .circuit-field i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 8px; height: 8px; border: 2px solid var(--cyan); background: #020713; }
  .circuit-field i:nth-child(1) { top: 17px; width: 85%; } .circuit-field i:nth-child(2) { top: 42px; left: 12%; width: 60%; }
  .circuit-field i:nth-child(3) { top: 67px; left: 27%; width: 66%; } .circuit-field i:nth-child(4) { top: 92px; width: 48%; }
  .bottom-nav { position: absolute; z-index: 6; left: 602px; bottom: 7px; display: grid; grid-template-columns: repeat(4, 54px); height: 28px; border: 1px solid var(--line); background: #020713e8; }
  .bottom-nav button { display: grid; place-items: center; min-width: 44px; background: transparent; color: var(--muted); }
  .bottom-nav button + button { border-left: 1px solid var(--line-soft); }
  .bottom-nav button > span:first-child { color: var(--cyan); font-size: 14px; }
  .bottom-nav button > span:last-child { display: none; }
  .bottom-nav button[aria-current="page"] { color: var(--cyan-high); background: var(--panel-high); box-shadow: inset 0 -3px var(--cyan); }
  main { min-width: 0; }
  .screen { min-height: calc(100dvh - 116px); padding: 26px; }
  .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; max-width: 1500px; margin: 0 auto 20px; }
  .section-heading .kicker { color: var(--cyan); font-size: 9px; }
  .section-heading h2 { font-size: clamp(26px,4vw,44px); line-height: 1.1; }
  .screen-note { max-width: 42rem; color: var(--muted); text-align: right; }
}

@layer monitor {
  .hq-panel, .observations-panel { position: relative; min-width: 0; overflow: hidden; border: 2px solid #17617b; background: var(--panel); box-shadow: inset 0 0 0 1px #081f33, 0 0 8px #24e4ee22; }
  .hq-panel::before { content: ""; position: absolute; z-index: 20; top: -2px; left: -2px; width: 16px; height: 16px; border-top: 3px solid var(--cyan); border-left: 3px solid var(--cyan); pointer-events: none; }
  .hq-panel-heading { position: relative; z-index: 12; display: flex; align-items: center; height: 32px; padding: 4px 9px; gap: 7px; border-bottom: 2px solid #174c63; background: #071526; }
  .hq-panel-heading h3 { color: var(--cyan-high); font: 900 15px var(--mono); letter-spacing: .04em; }
  .panel-index { color: var(--violet); font-size: 7px; }
  .panel-signal { width: 8px; height: 8px; margin-left: auto; border: 1px solid #b3ffc3; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }
  #screen-monitor { padding: 0; }
  #screen-monitor > .section-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  #monitor-content { position: relative; width: 1200px; height: 830px; margin: 0 auto; }
  .operations-artboard { position: relative; width: 1200px; height: 830px; overflow: hidden; background: radial-gradient(circle at 50% 35%,#0b2134 0,transparent 35%),#020713; }
  .team-rail { position: absolute; left: 0; top: 13px; width: 225px; height: 722px; }
  .team-rail .hq-panel-heading { height: 47px; }
  .team-slot-list { display: grid; grid-template-rows: repeat(8,minmax(0,1fr)); height: 671px; }
  .team-slot { min-height: 0; border-bottom: 1px solid #123a4e; }
  .team-slot:last-child { border-bottom: 0; }
  .team-member-button, .unassigned-slot { display: grid; grid-template-columns: 49px minmax(0,1fr) 9px; align-items: center; width: 100%; height: 100%; min-height: 0; padding: 3px 7px; gap: 5px; background: linear-gradient(90deg,#06101d,#071525); text-align: left; }
  .team-member-button:hover { background: #0b2035; box-shadow: inset 3px 0 var(--cyan); }
  .team-copy { display: grid; min-width: 0; line-height: 1.15; }
  .team-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .team-pseudonym { color: var(--text); font-size: 12px; }
  .team-worker-type { color: var(--muted); font-size: 8px; }
  .team-state { color: var(--green); font: 700 8px var(--mono); }
  .team-task { grid-column: 1 / -1; overflow: hidden; color: #b7d5da; font-size: 9px; line-height: 1.2; white-space: normal; }
  .team-room, .team-updated { display: none; }
  .status-lamp { width: 9px; height: 9px; border: 1px solid currentColor; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px currentColor; }
  .status-lamp[data-status^="waiting"], .status-lamp[data-status="queued"] { color: var(--amber); background: var(--amber); }
  .status-lamp[data-status="blocked"], .status-lamp[data-status="failed"] { color: var(--red); background: var(--red); }
  .status-lamp[data-status="offline"] { color: var(--muted); background: transparent; }
  .unassigned-slot { grid-template-columns: 50px 1fr; color: var(--muted); font: 8px var(--mono); opacity: .45; }

  .center-stack { position: absolute; left: 233px; top: 13px; display: grid; grid-template-rows: 365px 350px; gap: 7px; width: 508px; height: 722px; }
  .command-center { height: 365px; }
  .command-map { position: relative; height: 329px; overflow: hidden; background: linear-gradient(#071426 0 68%,#0b2234 68% 70%,#030812 70%); }
  .command-map::before { content: ""; position: absolute; inset: 0; opacity: .24; background: linear-gradient(#24e4ee22 1px,transparent 1px),linear-gradient(90deg,#24e4ee22 1px,transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(#000,transparent 72%); }
  .observer-node { position: absolute; z-index: 5; top: 12px; left: 118px; display: grid; grid-template-columns: 32px 1fr; align-content: center; width: 272px; height: 74px; padding: 8px 12px; border: 2px solid var(--cyan); background: #061525e8; box-shadow: inset 0 0 18px #24e4ee22,0 0 10px #24e4ee22; clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
  .observer-node::after { content: ""; position: absolute; left: 13px; top: 22px; width: 27px; height: 27px; border: 4px double var(--violet); transform: rotate(45deg); }
  .observer-node strong { grid-column: 2; color: var(--cyan-high); font: 900 15px var(--mono); }
  .observer-node > span:last-child { grid-column: 2; overflow: hidden; color: var(--muted); font-size: 9px; white-space: nowrap; }
  .system-view-label { display: none; }
  .command-lanes { position: absolute; z-index: 5; top: 94px; left: 70px; display: grid; grid-template-columns: repeat(4,86px); gap: 8px; }
  .command-lane { display: grid; grid-template-columns: 1fr auto; align-items: center; height: 36px; padding: 4px 6px; border: 1px solid #24647b; background: #030c19e8; }
  .command-lane span { color: var(--muted); font: 700 7px var(--mono); }
  .command-lane strong { color: var(--text); font: 900 16px var(--mono); }
  .command-lane[data-status="running"] strong { color: var(--green); }
  .command-lane[data-status="queued"] strong { color: var(--amber); }
  .command-lane[data-status="attention"] strong { color: var(--red); }
  .command-room-art { position: absolute; inset: 0; }
  .command-rack { position: absolute; z-index: 2; top: 13px; width: 64px; height: 138px; border: 5px solid #020712; background: repeating-linear-gradient(0deg,#071321 0 10px,#17617b 11px 13px); box-shadow: inset 8px 0 #0b2539; }
  .command-rack::after { content: ""; position: absolute; inset: 8px; background: radial-gradient(circle,var(--green) 0 2px,transparent 3px) 0 0/14px 15px; }
  .command-rack-left { left: 7px; } .command-rack-right { right: 7px; }
  .command-hologram { position: absolute; z-index: 4; left: 214px; top: 142px; width: 80px; height: 67px; border: 4px double var(--cyan); border-radius: 50%; background: radial-gradient(circle,#8ffcff99 0 4px,#16577a 5px 19px,transparent 20px),repeating-radial-gradient(circle,transparent 0 8px,#24e4ee55 9px 10px); box-shadow: 0 0 18px #24e4ee77; }
  .command-console-bank { position: absolute; z-index: 3; left: 44px; right: 44px; bottom: 44px; height: 79px; border: 5px solid #020712; background: repeating-linear-gradient(90deg,#0c2a40 0 66px,#8a5839 67px 72px); transform: perspective(180px) rotateX(14deg); box-shadow: inset 0 11px #b57545; }
  .command-console-bank::after { content: ""; position: absolute; inset: 17px 12px; background: repeating-linear-gradient(90deg,#24e4ee 0 3px,transparent 3px 10px),repeating-linear-gradient(0deg,#3de968 0 2px,transparent 2px 9px); opacity: .55; }
  .command-floor { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 96px; background: linear-gradient(30deg,transparent 48%,#17455b 49% 51%,transparent 52%) 0 0/44px 30px,linear-gradient(-30deg,transparent 48%,#17455b 49% 51%,transparent 52%) 0 0/44px 30px,#030812; }
  .command-operators { position: absolute; z-index: 8; right: 74px; bottom: 12px; left: 74px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; height: 132px; }
  .command-worker { position: relative; display: block; min-width: 0; overflow: visible; background: transparent; color: var(--muted); text-align: left; }
  .command-worker .scene-sprite, .command-operator-empty .scene-sprite { left:50%; bottom:24px; width:58px; height:104px; transform:translateX(-50%); }
  .command-worker .scene-sprite .sprite-head, .command-operator-empty .sprite-head { width:31px; height:30px; }
  .command-worker .scene-sprite .sprite-torso, .command-operator-empty .sprite-torso { top:35px; width:51px; height:59px; }
  .command-operator-empty { position:relative; opacity:.42; }
  .empty-operator-label { position:absolute; right:4px; bottom:3px; left:4px; padding:3px; border:1px solid var(--line); background:#020713e8; color:var(--muted); font:7px var(--mono); text-align:center; }
  .command-worker-copy { position: absolute; right: -5px; bottom: 0; left: -5px; display: grid; padding: 3px; border: 1px solid #175069; background: #020713e8; text-align: center; line-height: 1.1; }
  .command-worker-copy > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .command-worker-copy strong { color: var(--text); font-size: 8px; }
  .command-worker-copy span { font: 6px var(--mono); }
  .mapping-label, .mapping-task { display: none; }
  .command-worker-copy .mapping-task { white-space: normal; }
  .mapping-lane { color: var(--green); }
  .worker-overflow { position: absolute; top: -16px; right: -61px; padding: 2px 5px; background: var(--amber); color: #181000; font: 800 8px var(--mono); }

  .bot-factory { height: 350px; }
  .pipeline-board { position: absolute; z-index: 5; top: 12px; left: 55px; display: grid; grid-template-columns: repeat(4,88px); gap: 7px; width: 399px; height: 70px; padding: 8px; border: 3px solid #17617b; background: #030b18; box-shadow: inset 0 0 12px #24e4ee22; }
  .pipeline-stage { position: relative; display: grid; grid-template-columns: 22px 1fr; align-items: center; padding: 4px; border: 1px solid #24546a; background: #071525; }
  .pipeline-stage:not(:last-child)::after { content: "›"; position: absolute; z-index: 2; right: -9px; color: var(--green); font: 900 14px var(--mono); }
  .stage-icon { grid-row: 1 / 3; width: 17px; height: 17px; border: 3px solid var(--cyan); transform: rotate(45deg); }
  .pipeline-stage strong { color: var(--cyan-high); font: 800 8px var(--mono); }
  .pipeline-stage > span:last-child { color: var(--green); font: 900 14px var(--mono); }

  .specialist-grid { position: absolute; left: 750px; top: -2px; width: 450px; height: 737px; }
  .specialist-mobile-note { display: none; }
  .specialist-bay-grid { display: grid; grid-template-columns: 223px 219px; grid-template-rows: 188px 186px 183px 160px; gap: 6px 8px; height: 737px; }
  .specialist-bay { height: 100%; }
  .specialist-bay .hq-panel-heading { height: 29px; min-width: 0; overflow: hidden; padding-inline: 7px; }
  .specialist-bay .panel-index { flex: 0 0 auto; white-space: nowrap; }
  .specialist-bay .hq-panel-heading h3 { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .specialist-bay .panel-signal { flex: 0 0 8px; }
  .specialist-button, .specialist-empty { position: relative; display: block; width: 100%; height: calc(100% - 29px); overflow: hidden; background: var(--panel); text-align: left; }
  .specialist-button:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
  .station-kind { position: absolute; z-index: 12; top: 5px; left: 6px; padding: 2px 4px; border: 1px solid var(--line); background: #020713de; color: var(--amber); font-size: 5px; }
  .bay-readout { position: absolute; z-index: 12; right: 4px; bottom: 4px; left: 61px; display: grid; padding: 3px 5px; border-left: 3px solid var(--green); background: #020713e8; }
  .bay-readout strong { overflow: hidden; color: var(--text); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .bay-readout span { overflow: hidden; color: var(--muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
  .bay-readout span:last-child { color: var(--green); }
  .specialist-bay[data-station-state="standby"] .specialist-scene { filter: saturate(.65) brightness(.72); }
  .specialist-bay[data-station-state="idle"] .specialist-scene { filter: grayscale(.55) brightness(.62); }
  .specialist-bay[data-station-state="attention"] { border-color: var(--red); }

  .kpi-strip { position: absolute; left: 0; top: 744px; display: grid; grid-template-columns: repeat(6,200px); width: 1200px; height: 86px; border-top: 2px solid #17617b; background: #030914; }
  .kpi-tile { display: grid; grid-template-columns: 54px 1fr; align-items: center; min-width: 0; padding: 9px 12px; border-right: 1px solid #17485e; background: linear-gradient(180deg,#071525,#030914); }
  .kpi-tile:last-child { border-right: 0; background: linear-gradient(180deg,#17102d,#090718); }
  .kpi-icon { color: var(--cyan); font: 900 32px var(--mono); text-shadow: 0 0 8px currentColor; }
  .kpi-tile:nth-child(3) .kpi-icon { color: var(--amber); } .kpi-tile:nth-child(4) .kpi-icon { color: var(--red); }
  .kpi-tile:nth-child(5) .kpi-icon { color: var(--green); } .kpi-tile:nth-child(6) .kpi-icon { color: var(--violet); }
  .kpi-copy { display: grid; min-width: 0; }
  .kpi-label { overflow: hidden; color: var(--cyan); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
  .kpi-value { overflow: hidden; color: var(--green); font: 900 24px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
  .kpi-tile[data-kpi="source-revision"] .kpi-value { color: #c984ff; font-size: 10px; white-space: normal; }
  .observations-panel--monitor { display: none; }
}

@layer scenes {
  .scene-sprite { --skin:#d69b74; position:absolute; z-index:8; bottom:28px; left:14px; width:44px; height:76px; filter:drop-shadow(3px 3px #01050c); }
  .scene-sprite-art { position:absolute; inset:0; background:url('/assets/characters/employee-01/south.png') center bottom/contain no-repeat; image-rendering:pixelated; }
  .scene-sprite--has-art { filter:drop-shadow(2px 2px #01050c); }
  .scene-sprite--has-art .sprite-chair { z-index:-1; }
  .sprite-head { position:absolute; top:2px; left:11px; width:24px; height:25px; border:4px solid #171423; background:var(--skin); box-shadow:inset 4px 0 #f2c09c,-4px -3px #30234e; }
  .sprite-head::after { content:""; position:absolute; top:7px; left:3px; width:3px; height:3px; background:#081020; box-shadow:8px 0 #081020; }
  .sprite-torso { position:absolute; top:29px; left:3px; width:39px; height:41px; border:4px solid #07101e; background:#176788; clip-path:polygon(12% 0,88% 0,100% 24%,88% 100%,58% 100%,50% 78%,42% 100%,12% 100%,0 24%); }
  .sprite-chair { position:absolute; z-index:-1; right:-2px; bottom:0; width:34px; height:38px; border:4px solid #020813; background:#10233a; }
  .sprite-1 { --skin:#a97055; } .sprite-2 { --skin:#d7a57e; } .sprite-3 { --skin:#8d5c45; }
  .scene-sprite[data-status="blocked"] .sprite-torso,.scene-sprite[data-status="failed"] .sprite-torso { background:var(--red); }
  .scene-sprite[data-status^="waiting"] .sprite-torso { background:var(--amber); }
  .scene-sprite[data-status="qa_review"] .sprite-torso { background:var(--violet); }
  .scene-sprite[data-status="standby"] { opacity:.28; filter:grayscale(1); }
  .scene-sprite--compact { position:relative; inset:auto; width:45px; height:58px; transform:scale(.67); transform-origin:center; }
  .team-status-model { position:relative; width:49px; height:76px; justify-self:center; overflow:hidden; background-image:url('/assets/characters/employee-01/south.png'); background-position:center top; background-repeat:no-repeat; background-size:58px 132px; image-rendering:pixelated; }
  .team-status-model::after { content:attr(data-station-number); position:absolute; top:45px; left:17px; display:grid; place-items:center; width:16px; height:16px; border:1px solid #fff; border-radius:50%; background:#071525; color:#fff; font:900 10px/16px var(--mono); text-align:center; box-shadow:0 0 0 1px #071525,0 0 4px #24e4ee; pointer-events:none; }
  .specialist-scene { position:absolute; inset:0; display:block; overflow:hidden; background:linear-gradient(#071a31 0 57%,#153448 57% 65%,#040c17 65%); image-rendering:pixelated; }
  .specialist-scene::after { content:""; position:absolute; z-index:11; inset:0; background:repeating-linear-gradient(0deg,transparent 0 7px,#72f8ff08 7px 8px); }
  .bay-wall { position:absolute; inset:6px 6px 35% 6px; border:1px solid #204a61; background:repeating-linear-gradient(90deg,#071a31 0 25px,#173a4d 26px 28px); }
  .bay-desk { position:absolute; z-index:5; right:6px; bottom:25px; left:6px; height:30px; border:4px solid #050b13; background:#75503b; box-shadow:inset 0 7px #bd7c49,4px 4px #02060c; }
  .bay-monitor { position:absolute; z-index:4; top:18px; right:12px; width:105px; height:59px; border:4px solid #08101e; background:#071328; box-shadow:0 0 0 2px #176c8a; }
  .bay-monitor::before { content:""; position:absolute; inset:7px; background:repeating-linear-gradient(0deg,var(--line) 0 2px,transparent 2px 8px); }
  .bay-chair { position:absolute; z-index:6; bottom:15px; left:9px; width:45px; height:61px; border:5px solid #030812; background:#17283a; }
  .bay-keyboard { position:absolute; z-index:8; right:20px; bottom:40px; width:56px; height:10px; border:3px solid #251a13; background:repeating-linear-gradient(90deg,#e2bd83 0 4px,#64452f 4px 7px); }
  .bay-cable { position:absolute; z-index:4; right:15px; bottom:6px; width:78px; height:30px; border-right:4px solid #8a5030; border-bottom:4px solid #8a5030; }
  .role-prop { position:absolute; z-index:7; display:block; }
  .role-prop:nth-of-type(2) { top:15px; left:66px; width:24px; height:25px; border:3px solid var(--violet); }
  .role-prop:nth-of-type(3) { top:48px; left:78px; width:17px; height:17px; background:var(--green); transform:rotate(45deg); }
  .role-prop:nth-of-type(4) { top:15px; right:12px; width:6px; height:35px; background:var(--amber); box-shadow:9px 8px var(--cyan),18px -2px var(--violet); }
  .role-scene-0 .prop-scope { border-radius:50% 50% 0 0; border-color:var(--cyan); }
  .role-scene-0 .prop-notes { background:#e9dcb8; transform:none; }
  .role-scene-1 .bay-monitor::before { background:radial-gradient(circle,var(--violet) 0 3px,transparent 4px) 0 0/18px 16px; }
  .role-scene-1 .prop-core { border:6px double var(--amber); background:#743f55; }
  .role-scene-2 .bay-monitor::before { background:linear-gradient(135deg,transparent 40%,var(--cyan) 41% 44%,transparent 45%),repeating-linear-gradient(0deg,var(--line) 0 2px,transparent 2px 10px); }
  .role-scene-2 .prop-palette { background:linear-gradient(var(--red) 0 25%,var(--amber) 25% 50%,var(--green) 50% 75%,var(--violet) 75%); }
  .role-scene-3 .prop-rack { height:62px; background:repeating-linear-gradient(0deg,#07101d 0 8px,var(--green) 8px 10px); transform:none; }
  .role-scene-3 .bay-monitor::before { background:linear-gradient(90deg,var(--green) 0 17%,transparent 17% 23%,var(--green) 23% 40%,transparent 40% 47%,var(--green) 47% 66%,transparent 66%); }
  .role-scene-4 .prop-disks { height:58px; border-radius:50% 50% 8% 8%; background:repeating-linear-gradient(0deg,#0c283c 0 10px,var(--cyan) 10px 13px); transform:none; }
  .role-scene-4 .bay-monitor::before { background:repeating-radial-gradient(ellipse,var(--line) 0 3px,transparent 4px 8px); }
  .role-scene-5 .prop-target { border:5px solid var(--red); border-radius:50%; background:#16364a; }
  .role-scene-5 .bay-monitor::before { background:radial-gradient(circle,transparent 32%,var(--red) 34% 40%,transparent 42%),linear-gradient(var(--cyan),var(--cyan)) center/2px 100%; }
  .role-scene-6 .prop-shield { width:31px; height:39px; border:5px solid var(--amber); background:#28365b; clip-path:polygon(50% 0,100% 18%,88% 76%,50% 100%,12% 76%,0 18%); transform:none; }
  .role-scene-6 .bay-monitor::before { background:linear-gradient(45deg,transparent 43%,var(--red) 44% 48%,transparent 49%),radial-gradient(circle,var(--amber) 0 3px,transparent 4px) 0 0/22px 17px; }
  .role-scene-7 .prop-crane { height:58px; border:6px solid #d98b43; border-right:0; transform:none; }
  .role-scene-7 .bay-monitor::before { background:linear-gradient(180deg,transparent 0 50%,var(--violet) 51%),repeating-linear-gradient(90deg,var(--cyan) 0 5px,transparent 5px 11px); }
}

@layer shell {
  .brand-lockup h1 { font-size:56px; line-height:.84; letter-spacing:-.075em; text-shadow:3px 3px 0 #143d53, 0 0 8px #24e4ee2e; }
  .brand-lockup h1 em { position:relative; top:-22px; left:-5px; margin-left:0; padding:2px 4px; border:2px solid #9e45e888; background:#05071a; font-size:18px; box-shadow:3px 3px 0 #32164c; }
  .source-meta { grid-template-columns:1fr; grid-template-rows:15px 1fr; padding:7px 10px 6px; }
  .source-meta .clock-label { align-self:start; padding-right:112px; font-size:9px; }
  .source-meta time { grid-column:1; grid-row:2; align-self:center; padding-right:4px; overflow:hidden; font-size:32px; line-height:1; letter-spacing:-.1em; }
  .source-meta .badge { position:absolute; top:8px; right:8px; margin-left:0; }
}

@layer monitor {
  .mobile-current-summary, .mobile-task-summary { display:none; }
  .command-map { background:linear-gradient(180deg,#051426 0 39%,#0d2c40 40% 67%,#06101b 68%),#020713; }
  .command-map::after { content:""; position:absolute; z-index:0; right:0; bottom:0; left:0; height:105px; background:linear-gradient(27deg,transparent 47%,#1b5067 48% 50%,transparent 51%) 0 0/48px 31px,linear-gradient(-27deg,transparent 47%,#12394f 48% 50%,transparent 51%) 0 0/48px 31px,#020711; box-shadow:inset 0 8px #0b2738; }
  .monitor-wall { position:absolute; z-index:2; top:5px; left:78px; display:grid; grid-template-columns:repeat(3,112px); grid-template-rows:repeat(2,54px); gap:5px; width:346px; height:113px; padding:5px; border:5px solid #020712; background:#10283a; box-shadow:0 3px #25627a, inset 0 0 0 2px #214e63; }
  .monitor-screen { position:relative; overflow:hidden; border:3px solid #030916; background:#061a2b; box-shadow:inset 0 0 0 1px #22708c,0 0 5px #24e4ee2a; }
  .monitor-screen::before { content:""; position:absolute; inset:6px; background:repeating-linear-gradient(0deg,#24e4ee 0 2px,transparent 2px 8px); opacity:.66; }
  .monitor-screen-2::before { background:radial-gradient(circle,var(--violet) 0 3px,transparent 4px) 0 0/19px 15px,linear-gradient(35deg,transparent 47%,#24e4ee 48% 51%,transparent 52%); }
  .monitor-screen-3::before { background:linear-gradient(110deg,transparent 0 14%,var(--green) 15% 18%,transparent 19% 31%,var(--cyan) 32% 36%,transparent 37% 51%,var(--violet) 52% 57%,transparent 58%); }
  .monitor-screen-4::before { background:repeating-linear-gradient(90deg,var(--amber) 0 5px,transparent 5px 13px); }
  .monitor-screen-5::before { background:radial-gradient(circle,transparent 0 10px,#24e4ee 11px 13px,transparent 14px),linear-gradient(90deg,transparent 49%,var(--cyan) 50% 52%,transparent 53%); }
  .monitor-screen-6::before { background:linear-gradient(180deg,transparent 0 58%,var(--green) 59% 64%,transparent 65%),repeating-linear-gradient(90deg,#21526a 0 3px,transparent 3px 10px); }
  .observer-node { top:18px; left:178px; width:153px; height:42px; padding:4px 8px 4px 39px; border-width:2px; }
  .observer-node::after { top:11px; left:14px; width:18px; height:18px; border-width:3px; }
  .observer-node strong { font-size:9px; }
  .observer-node > span:last-child { font-size:5px; }
  .command-lanes { top:83px; left:72px; grid-template-columns:repeat(4,86px); }
  .command-lane { height:30px; }
  .command-rack { top:7px; height:148px; }
  .command-console-bank { left:34px; right:34px; bottom:56px; height:70px; border-color:#020712; background:repeating-linear-gradient(90deg,#0c2a40 0 57px,#9b6742 58px 64px); box-shadow:inset 0 10px #cf8955,0 7px #05101b; }
  .command-hologram { z-index:9; left:216px; top:137px; width:76px; height:61px; }
  .command-floor { height:105px; opacity:.82; }
  .ceiling-cable { position:absolute; z-index:3; top:0; width:58px; height:156px; border-bottom:4px solid #a76137; }
  .ceiling-cable-left { left:42px; border-left:4px solid #a76137; transform:skewX(12deg); }
  .ceiling-cable-right { right:43px; border-right:4px solid #70412f; transform:skewX(-12deg); }
  .command-operators { right:63px; bottom:8px; left:63px; gap:18px; height:139px; }
  .command-worker .scene-sprite, .command-operator-empty .scene-sprite { z-index:9; bottom:28px; width:66px; height:112px; transform:translateX(-50%); }
  .command-worker .scene-sprite .sprite-head, .command-operator-empty .sprite-head { left:17px; width:34px; height:33px; }
  .command-worker .scene-sprite .sprite-torso, .command-operator-empty .sprite-torso { top:39px; left:5px; width:58px; height:64px; }
  .command-worker .scene-sprite .sprite-chair, .command-operator-empty .sprite-chair { right:-2px; width:51px; height:62px; background:#152d46; box-shadow:inset 7px 0 #224764; }
  .operator-desk { position:absolute; z-index:10; right:-7px; bottom:24px; left:-7px; height:37px; border:4px solid #030914; background:#7d5137; box-shadow:inset 0 7px #cf8955,0 5px #020713; transform:perspective(80px) rotateX(11deg); }
  .operator-keyboard { position:absolute; z-index:11; bottom:43px; left:50%; width:52px; height:14px; border:3px solid #09101a; background:repeating-linear-gradient(90deg,#8ff9f6 0 3px,#1e596c 3px 7px); transform:translateX(-50%) skewX(-9deg); }
  .operator-cable { position:absolute; z-index:7; right:4px; bottom:5px; width:35px; height:40px; border-right:3px solid #b9663e; border-bottom:3px solid #b9663e; }
  .command-worker-copy { z-index:13; }

  .kpi-tile { grid-template-columns:62px minmax(0,1fr); padding:8px 13px; }
  .kpi-icon { font-size:38px; }
  .kpi-label { font-size:9px; }
  .kpi-value { font-size:27px; line-height:1; }
}

@layer scenes {
  .command-worker .scene-sprite--compact, .command-operator-empty .scene-sprite { position:absolute; inset:auto auto 28px 50%; z-index:9; width:66px; height:112px; transform:translateX(-50%); }
  .command-worker .scene-sprite .sprite-head, .command-operator-empty .sprite-head { left:17px; width:34px; height:33px; }
  .command-worker .scene-sprite .sprite-torso, .command-operator-empty .sprite-torso { top:39px; left:5px; width:58px; height:64px; }
  .command-worker .scene-sprite .sprite-chair, .command-operator-empty .sprite-chair { right:-2px; width:51px; height:62px; background:#152d46; box-shadow:inset 7px 0 #224764; }
  .sprite-head::before { content:""; position:absolute; top:-6px; left:-4px; width:calc(100% + 8px); height:9px; background:#332747; clip-path:polygon(0 45%,18% 0,88% 12%,100% 72%,82% 100%,10% 85%); }
  .sprite-torso::after { content:""; position:absolute; top:8px; left:8px; width:5px; height:19px; background:#7fd8e7; box-shadow:15px 0 #0b4059; }
  .team-member-button .scene-sprite--compact, .unassigned-slot .scene-sprite--compact { width:45px; height:58px; transform:scale(.9); transform-origin:center; }
  .command-worker .scene-sprite--has-art { width:36px; height:82px; bottom:30px; }
  .specialist-scene .scene-sprite--has-art { width:24px; height:55px; }
  .team-member-button .sprite-head { left:10px; width:26px; height:26px; }
  .team-member-button .sprite-torso { top:30px; width:42px; height:43px; }
  .specialist-scene { background:linear-gradient(180deg,#071a31 0 54%,#24445a 55% 63%,#040c17 64%); }
  .specialist-scene .scene-sprite { bottom:24px; width:50px; height:85px; }
  .specialist-scene .sprite-head { width:27px; height:28px; }
  .specialist-scene .sprite-torso { top:32px; width:44px; height:47px; }
  .bay-desk { height:34px; background:#6d4935; box-shadow:inset 0 8px #c18351,4px 4px #02060c; }
  .bay-monitor { top:14px; height:64px; }
  .role-prop { box-shadow:2px 2px #020713; }
  .role-scene-0 .bay-monitor { right:8px; width:112px; border-color:#08101e; }
  .role-scene-0 .prop-scope { left:62px; width:32px; height:31px; border-width:5px; }
  .role-scene-0 .prop-samples { top:48px; right:18px; width:28px; height:22px; background:repeating-linear-gradient(90deg,var(--amber) 0 4px,transparent 4px 8px); }
  .role-scene-1 .bay-monitor { right:7px; width:118px; clip-path:polygon(0 0,47% 0,47% 100%,52% 100%,52% 0,100% 0,100% 100%,0 100%); }
  .role-scene-1 .prop-nodes { left:62px; width:36px; height:36px; border:5px dotted var(--cyan); border-radius:50%; }
  .role-scene-1 .prop-core { top:49px; width:28px; height:28px; }
  .role-scene-2 .bay-monitor { top:9px; right:10px; width:96px; height:71px; transform:skewY(-2deg); }
  .role-scene-2 .prop-window { left:61px; width:41px; height:28px; border-color:var(--cyan); }
  .role-scene-2 .prop-palette { top:48px; left:70px; width:25px; height:28px; }
  .role-scene-3 .bay-monitor { right:56px; width:65px; }
  .role-scene-3 .prop-rack { top:8px; right:7px; left:auto; width:43px; height:82px; border:5px solid #020813; }
  .role-scene-3 .prop-cloud { top:20px; left:65px; width:29px; height:19px; border-radius:50%; background:#d8f8ff; }
  .role-scene-4 .bay-monitor { right:59px; width:66px; }
  .role-scene-4 .prop-disks { top:7px; right:7px; left:auto; width:48px; height:78px; border:5px solid #020813; }
  .role-scene-4 .prop-query { top:21px; left:70px; width:24px; height:42px; border-left:5px solid var(--green); }
  .role-scene-5 .bay-monitor { top:9px; right:8px; width:112px; height:71px; }
  .role-scene-5 .prop-target { top:18px; left:68px; width:40px; height:40px; }
  .role-scene-5 .prop-checks { top:57px; left:76px; width:31px; height:9px; background:var(--green); box-shadow:0 10px var(--cyan); }
  .role-scene-6 .bay-monitor { right:7px; width:116px; background:#1d1021; }
  .role-scene-6 .prop-shield { top:15px; left:67px; width:38px; height:48px; }
  .role-scene-6 .prop-lock { top:51px; right:20px; width:22px; height:25px; border:5px solid var(--red); }
  .role-scene-7 .bay-monitor { right:56px; width:67px; }
  .role-scene-7 .prop-crane { top:6px; right:7px; left:auto; width:45px; height:83px; }
  .role-scene-7 .prop-package { top:56px; right:20px; left:auto; width:29px; height:25px; border:4px solid var(--amber); background:#673c26; }
  .role-scene-0 .scene-sprite { left:8px; }
  .role-scene-1 .scene-sprite { left:18px; transform:scaleX(-1); }
  .role-scene-2 .scene-sprite { left:4px; transform:rotate(-2deg); }
  .role-scene-3 .scene-sprite { left:20px; transform:scaleX(-1); }
  .role-scene-4 .scene-sprite { left:8px; }
  .role-scene-5 .scene-sprite { left:18px; transform:scaleX(-1) rotate(2deg); }
  .role-scene-6 .scene-sprite { left:5px; }
  .role-scene-7 .scene-sprite { left:22px; transform:scaleX(-1); }
}

@layer routes {
  .agent-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:1500px; margin:auto; }
  .agent-card { display:grid; grid-template-columns:52px minmax(0,1fr) 22px; align-items:center; min-height:170px; padding:15px; gap:12px; border:1px solid var(--line); background:var(--panel); text-align:left; box-shadow:var(--hard-shadow); }
  .agent-card:hover { border-color:var(--cyan); background:var(--panel-high); }
  .pixel-agent { position:relative; display:block; width:38px; height:50px; filter:drop-shadow(3px 3px #02050a); }
  .pixel-head { position:absolute; top:2px; left:9px; width:20px; height:18px; border:4px solid #17150f; background:var(--amber); }
  .pixel-body { position:absolute; bottom:2px; left:5px; width:28px; height:28px; border:4px solid #101713; background:var(--line); clip-path:polygon(15% 0,85% 0,100% 35%,86% 100%,58% 100%,50% 74%,42% 100%,14% 100%,0 35%); }
  .pixel-agent[data-status="running"] .pixel-body,.pixel-agent[data-status="qa_review"] .pixel-body { background:var(--green); }
  .pixel-agent[data-status="blocked"] .pixel-body,.pixel-agent[data-status="failed"] .pixel-body { background:var(--red); }
  .agent-copy { display:grid; min-width:0; gap:5px; }
  .agent-copy > * { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .agent-role,.agent-context,.agent-task,.agent-updated { color:var(--muted); font-size:12px; }
  .card-arrow { color:var(--cyan); }
  .status-chip { display:inline-flex; align-items:center; width:fit-content; min-height:28px; padding:3px 8px; gap:5px; border:1px solid var(--line); background:var(--bg-deep); color:var(--muted); font:700 9px var(--mono); white-space:nowrap; }
  .status-chip[data-status="running"],.status-chip[data-status="available"],.status-chip[data-status="qa_review"],.status-chip[data-status="completed"] { border-color:var(--green); color:var(--green); }
  .status-chip[data-status="blocked"],.status-chip[data-status="failed"] { border-color:var(--red); color:var(--red); }
  .status-chip[data-status^="waiting"],.status-chip[data-status="queued"] { border-color:var(--amber); color:var(--amber); }
  .task-board { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; gap:10px; max-width:1500px; margin:auto; }
  .task-lane { min-width:0; border:1px solid var(--line); background:var(--panel); }
  .task-lane > header { display:flex; align-items:center; justify-content:space-between; min-height:52px; padding:9px 11px; border-bottom:1px solid var(--line); background:var(--panel-high); }
  .task-lane h3 { font-size:15px; } .count { display:grid; place-items:center; min-width:30px; height:30px; border:1px solid var(--line); color:var(--cyan); }
  .task-list { display:grid; gap:7px; padding:8px; }
  .task-card { display:grid; grid-template-columns:1fr auto; gap:8px; min-height:118px; padding:11px; border:1px solid var(--line-soft); background:var(--bg-deep); }
  .task-card > strong { grid-column:1 / -1; } .task-card > span:not(.status-chip),.task-card time { color:var(--muted); font-size:11px; }
  .empty-state { padding:16px; border:1px dashed var(--line); color:var(--muted); }
  #activity-content { max-width:1100px; margin:auto; }
  .observations-panel { padding:22px; }
  .observations-panel .subheading { display:grid; grid-template-columns:1fr auto; align-items:end; margin-bottom:18px; padding-bottom:10px; border-bottom:1px solid var(--line); }
  .observations-panel .subheading .kicker { grid-column:1 / -1; color:var(--cyan); font-size:8px; }
  .observations-panel .subheading h3 { font:900 15px var(--mono); }
  .observations-panel .subheading > span { color:var(--violet); font:8px var(--mono); }
  .activity-feed { position:relative; display:grid; gap:2px; }
  .activity-feed::before { content:""; position:absolute; top:12px; bottom:12px; left:60px; width:1px; background:var(--line); }
  .activity-feed li { display:grid; grid-template-columns:48px 13px minmax(0,1fr); min-height:72px; gap:8px; }
  .activity-feed time { color:var(--muted); font-size:9px; }
  .activity-node { position:relative; z-index:1; width:11px; height:11px; margin-top:5px; border:2px solid var(--bg); background:var(--green); box-shadow:0 0 0 1px var(--line); }
  .activity-feed p { color:var(--muted); overflow-wrap:anywhere; }
}

@layer dialog {
  .agent-dialog { position:fixed; inset:0 0 0 auto; width:420px; max-width:calc(100vw - 24px); height:100dvh; max-height:none; margin:0 0 0 auto; padding:0; overflow:hidden; border:0; border-left:1px solid var(--cyan); background:var(--panel); color:var(--text); box-shadow:-18px 0 50px #000a; }
  .agent-dialog::backdrop { background:#01050ccb; backdrop-filter:blur(3px); }
  .dialog-frame { display:grid; grid-template-rows:auto minmax(0,1fr); height:100%; }
  .dialog-frame > header { display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:9px 14px; border-bottom:1px solid var(--line); background:var(--panel-high); }
  .dialog-frame > header .kicker { color:var(--cyan); font-size:8px; }
  .icon-button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); background:var(--bg-deep); color:var(--cyan); font:24px var(--mono); }
  #agent-dialog-content { min-height:0; overflow:hidden; }
  .detail-scroll { height:100%; padding:20px; overflow:auto; outline-offset:-4px; }
  .dialog-agent { display:grid; grid-template-columns:58px 1fr; align-items:center; gap:14px; }
  .dialog-agent p { color:var(--muted); }
  .detail-list { display:grid; gap:1px; margin-top:20px; background:var(--line-soft); }
  .detail-list div { display:grid; grid-template-columns:125px minmax(0,1fr); gap:10px; padding:12px; background:var(--bg-deep); }
  .detail-list dt { color:var(--cyan); font-size:8px; } .detail-list dd { overflow-wrap:anywhere; }
  .unavailable-fields { margin-top:20px; padding:14px; border:1px solid var(--line-soft); background:#03091488; }
  .unavailable-fields h3 { font-size:14px; } .unavailable-fields ul { display:grid; gap:7px; margin-top:10px; color:var(--muted); }
  .unavailable-fields li::before { content:"— "; color:var(--amber); }
  .demo-disclaimer { margin-top:18px; padding:11px; border-left:3px solid var(--violet); background:var(--panel-high); color:var(--muted); }
  body:has(#demo-badge[data-connection="stale"]) .dialog-frame::before { content:"STALE · แสดงข้อมูลล่าสุดที่ตรวจสอบแล้ว"; padding:8px 12px; background:#e9b75c20; color:var(--amber); font:9px var(--mono); }
  body:has(#demo-badge[data-connection="disconnected"]) .dialog-frame::before { content:"DISCONNECTED · LAST KNOWN GOOD"; padding:8px 12px; background:#ef657420; color:var(--red); font:9px var(--mono); }
}

@layer responsive {
  @media (min-width: 1200px) {
    .shell { width:1200px; height:946px; min-height:946px; margin:auto; overflow:hidden; }
    #screen-monitor { width:1200px; height:830px; min-height:830px; overflow:hidden; }
    .source-meta { grid-template-columns:minmax(0,1fr) 150px; grid-template-rows:15px minmax(0,1fr); column-gap:8px; }
    .source-meta .clock-label { grid-column:1; grid-row:1; padding-right:0; font-size:8px; white-space:nowrap; }
    .source-meta time { grid-column:1; grid-row:2; min-width:0; padding-right:0; font-size:14px; }
    .source-meta .badge { position:static; grid-column:2; grid-row:1 / 3; justify-self:end; white-space:nowrap; }
  }
  @media (min-width: 768px) and (max-width: 1199px) {
    .topbar { height:104px; }
    .brand-lockup { transform:scale(.72); transform-origin:left center; }
    .source-meta { top:16px; right:12px; left:auto; width:340px; }
    .bottom-nav { left:auto; right:364px; }
    #screen-monitor { height:calc((100vw - 16px) * .6916667); min-height:0; padding-left:8px; overflow:hidden; }
    #monitor-content,.operations-artboard { transform-origin:top left; }
    #monitor-content { scale:calc((100vw - 16px) / 1200px); }
    .screen:not(#screen-monitor) { padding:22px 14px; }
    .agent-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .task-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .agent-dialog { width:56vw; min-width:430px; }
  }
  @media (max-width: 767px) {
    body { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
    .shell { min-height:100dvh; }
    .topbar { height:82px; padding:max(9px,env(safe-area-inset-top)) 10px 9px; overflow:visible; }
    .brand-lockup { top:10px; left:9px; gap:7px; }
    .brand-mark { width:38px; height:38px; border-width:2px; font-size:10px; }
    .brand-lockup h1 { max-width:53vw; overflow:hidden; font-size:clamp(17px,5vw,22px); text-overflow:ellipsis; }
    .brand-lockup h1 em { font-size:9px; }
    .brand-lockup .eyebrow { max-width:49vw; overflow:hidden; margin-top:5px; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
    .source-meta { top:8px; right:8px; left:auto; grid-template-columns:1fr; width:112px; height:64px; padding:5px; border-width:2px; }
    .source-meta .clock-label { display:none; } .source-meta time { max-width:100%; font-size:7px; text-overflow:ellipsis; white-space:nowrap; }
    .source-meta .badge { grid-column:1; grid-row:2; justify-self:end; max-width:100%; overflow:hidden; padding:3px; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
    .circuit-field { display:none; }
    .bottom-nav { position:fixed; z-index:90; right:0; bottom:0; left:0; top:auto; grid-template-columns:repeat(4,minmax(0,1fr)); height:auto; padding:4px max(4px,env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left)); border:0; border-top:1px solid var(--line); background:#020713f5; }
    .bottom-nav button { display:flex; min-height:68px; flex-direction:column; gap:2px; overflow:visible; line-height:1.35; }
    .bottom-nav button + button { border-left:1px solid var(--line-soft); }
    .bottom-nav button > span:first-child { font-size:15px; } .bottom-nav button > span:last-child { display:flex; flex-direction:column; align-items:center; font-size:10px; line-height:1.45; white-space:nowrap; }
    .bottom-nav b { font:800 7px/1.35 var(--mono); }
    main { padding-bottom:8px; }
    .screen { min-height:calc(100dvh - 82px); padding:16px 9px 28px; }
    #screen-monitor { height:auto; padding:16px 9px 28px; }
    #screen-monitor > .section-heading { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
    .section-heading { align-items:start; flex-direction:column; margin-bottom:14px; }
    .screen-note { text-align:left; }
    #monitor-content { display:flex; width:auto; height:auto; flex-direction:column; gap:9px; }
    .operations-artboard { display:flex; width:auto; height:auto; flex-direction:column; overflow:visible; background:transparent; }
    .kpi-strip { order:1; position:static; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:auto; height:auto; border:1px solid var(--line); }
    .kpi-tile { min-height:76px; padding:8px; grid-template-columns:42px 1fr; }
    .kpi-value { font-size:20px; } .kpi-tile[data-kpi="source-revision"] .kpi-value { font-size:9px; }
    .center-stack { position:static; order:2; display:block; width:auto; height:auto; }
    .command-center { height:auto; min-height:0; }
    .command-map { height:auto; min-height:348px; }
    .observer-node { left:50%; width:min(272px,75vw); transform:translateX(-50%); }
    .command-lanes { left:50%; grid-template-columns:repeat(2,minmax(100px,1fr)); width:min(310px,86vw); transform:translateX(-50%); }
    .command-room-art { opacity:.7; } .command-operators { right:30px; left:30px; }
    .bot-factory { display:none; }
    .team-rail { order:3; position:static; width:auto; height:auto; margin-top:9px; }
    .team-slot-list { height:auto; grid-template-rows:none; }
    .team-member-button,.unassigned-slot { min-height:96px; }
    .team-pseudonym { font-size:14px; } .team-worker-type,.team-task,.team-room,.team-updated { display:block; font-size:10px; }
    .specialist-grid { order:5; position:static; width:auto; height:auto; margin-top:9px; }
    .specialist-mobile-note { display:block; padding:12px; border:1px dashed var(--line); background:var(--panel); color:var(--muted); text-align:center; }
    .specialist-bay-grid { display:none; }
    .observations-panel--monitor { order:4; display:block; padding:16px; }
    .agent-grid,.task-board { grid-template-columns:1fr; }
    .agent-card { min-height:180px; }
    .observations-panel .subheading h3 { font-size:12px; }

    /* Mobile is a dedicated status stack, never a scaled office artboard. */
    .brand-lockup h1 { max-width:55vw; overflow:visible; font-size:clamp(17px,5vw,22px); letter-spacing:-.055em; text-overflow:clip; }
    .brand-lockup h1 em { position:static; margin-left:3px; padding:1px 2px; border-width:1px; font-size:9px; box-shadow:none; }
    .source-meta time { max-width:100%; overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
    #monitor-content { width:100%; max-width:100%; transform:none; scale:none; overflow:visible; }
    .operations-artboard { display:flex; width:100%; height:auto; transform:none; flex-direction:column; gap:10px; overflow:visible; background:transparent; }
    .center-stack, .bot-factory, .specialist-grid, .kpi-strip { display:none; }
    .command-center { display:none; }
    .mobile-current-summary { order:1; display:block; border:2px solid var(--cyan); background:linear-gradient(135deg,#07192a,#081126 65%,#231139); box-shadow:inset 0 0 0 2px #0c3549; }
    .mobile-current-summary > header { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:9px 11px; border-bottom:1px solid var(--line); }
    .mobile-current-summary > header .kicker { color:var(--cyan); font-size:9px; }
    .mobile-current-summary > header strong { max-width:58%; overflow:hidden; color:var(--violet); font:800 10px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
    .mobile-summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
    .mobile-summary-item { display:grid; min-height:74px; padding:10px 12px; border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
    .mobile-summary-item:nth-child(even) { border-right:0; }
    .mobile-summary-item small { align-self:end; color:var(--muted); font:8px var(--mono); letter-spacing:.08em; }
    .mobile-summary-item strong { color:var(--green); font:900 26px/1 var(--mono); }
    .team-rail { order:2; position:static; width:100%; height:auto; margin:0; }
    .team-rail .hq-panel-heading { height:44px; }
    .team-slot-list { height:auto; grid-template-rows:none; }
    .team-member-button,.unassigned-slot { grid-template-columns:54px minmax(0,1fr) 12px; min-height:82px; padding:6px 9px; gap:8px; }
    .team-member-button .scene-sprite--compact,.unassigned-slot .scene-sprite--compact { transform:scale(1); }
    .team-pseudonym { font-size:14px; }
    .team-worker-type,.team-room,.team-updated { display:none; }
    .team-state { font-size:9px; }
    .team-task { display:-webkit-box; overflow:hidden; font-size:11px; line-height:1.25; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
    .mobile-task-summary { order:3; display:block; width:100%; }
    .mobile-task-list { display:grid; }
    .mobile-task-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; min-height:68px; padding:9px 10px; gap:9px; border-bottom:1px solid var(--line-soft); background:linear-gradient(90deg,#06101d,#071525); }
    .mobile-task-row:last-child { border-bottom:0; }
    .mobile-task-copy { display:grid; min-width:0; gap:3px; }
    .mobile-task-copy strong,.mobile-task-copy small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .mobile-task-copy strong { font-size:13px; }
    .mobile-task-copy small { color:var(--muted); font-size:10px; }
    .mobile-task-row .status-chip { max-width:116px; overflow:hidden; font-size:8px; text-overflow:ellipsis; }
    .observations-panel--monitor { order:4; display:block; width:100%; padding:14px 11px; }
    .activity-feed::before { left:54px; }
    .activity-feed li { grid-template-columns:42px 13px minmax(0,1fr); min-height:76px; }
    .activity-feed p { font-size:12px; line-height:1.4; }
    .agent-dialog { inset:auto 0 0; width:100%; max-width:none; height:min(85dvh,760px); margin:auto 0 0; border-top:1px solid var(--cyan); border-left:0; border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom); }
    .detail-list div { grid-template-columns:1fr; gap:4px; }
  }
}

@layer access {
  @keyframes live-pulse { 50% { box-shadow:0 0 16px currentColor; opacity:.72; } }
  @keyframes attention-pulse { 50% { border-color:var(--amber); box-shadow:0 0 0 3px #e9b75c33; } }
  body:has(#demo-badge[data-connection="live"]) .command-worker[data-status="running"] { animation:live-pulse 1.8s ease-in-out 3; }
  body:has(#demo-badge[data-connection="live"]) .specialist-bay[data-station-state="active"] .panel-signal { animation:live-pulse 1.8s ease-in-out 3; }
  .specialist-bay[data-station-state="attention"] { animation:attention-pulse .7s ease 2; }
  body:has(#demo-badge[data-connection="stale"]) #monitor-content *,body:has(#demo-badge[data-connection="disconnected"]) #monitor-content * { animation-play-state:paused !important; }
  body:has(#demo-badge[data-connection="stale"]) #monitor-content { outline:2px solid var(--amber); outline-offset:-2px; }
  body:has(#demo-badge[data-connection="disconnected"]) #monitor-content { outline:2px solid var(--red); outline-offset:-2px; }
  body:has(#demo-badge[data-connection="disconnected"]) #monitor-content::before { content:"DISCONNECTED · LAST KNOWN GOOD"; position:absolute; z-index:40; top:116px; left:233px; padding:7px 10px; border:1px solid var(--red); background:#24080ee8; color:var(--red); font:800 8px var(--mono); }
  @media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } [data-status="running"],[data-station-state="active"] { outline:1px solid var(--green); outline-offset:-2px; } }
  @media (forced-colors: active) { .hq-panel,.observations-panel,.agent-card,.task-lane,.bottom-nav,.source-meta,.agent-dialog,.kpi-strip { border:1px solid CanvasText; box-shadow:none; forced-color-adjust:auto; } .panel-signal,.status-lamp,.activity-node { border:1px solid CanvasText; } .specialist-scene,.scene-sprite,.pixel-agent { forced-color-adjust:none; } }
}

@layer scenes {
  .command-center-scene { position:absolute; z-index:0; top:0; left:0; width:508px; height:364px; overflow:hidden; pointer-events:none; }
  .command-scene-layer,.command-scene-image { position:absolute; inset:0; display:block; width:508px; height:364px; }
  .command-scene-image { background-position:0 0; background-repeat:no-repeat; image-rendering:pixelated; }
  .command-scene-background { z-index:1; background-image:url('/assets/scenes/command-center/background.png'); background-size:508px 364px; }
  .command-scene-screen-glow { z-index:2; background-image:url('/assets/scenes/command-center/screen-glow-8f.png'); background-size:4064px 364px; }
  .command-scene-warning-lights { z-index:3; background-image:url('/assets/scenes/command-center/warning-lights-4f.png'); background-size:2032px 364px; }
  .command-scene-characters { z-index:4; }
  .command-actor { position:absolute; top:261px; width:36px; height:82px; animation-duration:24s; animation-timing-function:linear; animation-iteration-count:infinite; }
  .command-actor-left { left:153px; animation-name:command-actor-left-route; }
  .command-actor-center { left:236px; animation-name:command-actor-center-route; }
  .command-actor-right { left:320px; animation-name:command-actor-right-route; }
  .command-actor-action { position:absolute; z-index:0; left:4px; bottom:0; width:28px; height:7px; border-radius:50%; background:#020713aa; animation-name:command-actor-shadow; animation-duration:24s; animation-timing-function:step-end; animation-iteration-count:infinite; }
  .command-actor-body { position:absolute; z-index:1; inset:0; top:0; width:36px; height:82px; background-image:url('/assets/characters/employee-01/command-work-at-scene-computer-16f.png'); background-position:0 0; background-repeat:no-repeat; background-size:576px 82px; image-rendering:pixelated; opacity:1; scale:1; transform:none; transform-origin:center bottom; animation:command-actor-frames .8s steps(15) infinite; }
  .command-actor-left .command-actor-body { animation-name:command-actor-frames,command-actor-left-action; animation-duration:.8s,24s; animation-timing-function:steps(15),steps(1,start); }
  .command-actor-center .command-actor-body { animation-name:command-actor-frames,command-actor-center-action; animation-duration:.8s,24s; animation-timing-function:steps(15),steps(1,start); }
  .command-actor-right .command-actor-body { animation-name:command-actor-frames,command-actor-right-action; animation-duration:.8s,24s; animation-timing-function:steps(15),steps(1,start); }
  .command-actor-bubble { position:absolute; z-index:2; top:-14px; left:18px; display:block; width:18px; height:14px; border:2px solid #071525; background:#e8f9fb; opacity:0; image-rendering:pixelated; animation-duration:24s; animation-timing-function:step-end; animation-iteration-count:infinite; }
  .command-actor-bubble::before { content:""; position:absolute; right:2px; bottom:-5px; width:4px; height:5px; border-right:2px solid #071525; background:#e8f9fb; }
  .command-actor-bubble::after { content:""; position:absolute; top:4px; left:2px; width:2px; height:2px; background:#175069; box-shadow:5px 0 #175069,10px 0 #175069; }
  .command-actor-left .command-actor-bubble { animation-name:command-bubble-left; }
  .command-actor-center .command-actor-bubble { animation-name:command-bubble-center; }
  .command-actor-right .command-actor-bubble { left:-2px; animation-name:command-bubble-right; }
  .command-scene-foreground { z-index:5; background-image:url('/assets/scenes/command-center/foreground.png'); background-size:508px 364px; }
  @keyframes command-actor-frames { to { background-position:-540px 0; } }
  @keyframes command-actor-shadow { 0%,9.99%,46.666%,59.99%,93.333%,100% { opacity:.55; transform:scaleX(.78); } 15%,40%,65%,86.666% { opacity:.8; transform:scaleX(1); } }
  @keyframes command-actor-left-route { 0%,13.333%,40%,100% { transform:translate(0,0); } 23.333%,33.333% { transform:translate(59px,-13px); } }
  @keyframes command-actor-center-route { 0%,13.333%,40%,63.333%,86.666%,100% { transform:translate(0,0); } 23.333%,33.333% { transform:translate(12px,-13px); } 70%,80% { transform:translate(28px,-13px); } }
  @keyframes command-actor-right-route { 0%,63.333%,86.666%,100% { transform:translate(0,0); } 70%,80% { transform:translate(-20px,-13px); } }
  @keyframes command-actor-left-action {
    0%,9.99%,43.333%,100% { background-image:url('/assets/characters/employee-01/command-work-at-scene-computer-16f.png'); transform:none; opacity:1; scale:1; }
    10%,13.32% { background-image:url('/assets/characters/employee-01/command-stand-from-computer-east-16f.png'); transform:none; opacity:1; scale:1; }
    13.333%,23.32% { background-image:url('/assets/characters/employee-01/command-walk-east-16f.png'); transform:scaleX(1.1); opacity:1; scale:1; }
    23.333%,33.32% { background-image:url('/assets/characters/employee-01/command-talk-se-16f.png'); transform:none; opacity:1; scale:1; }
    33.333%,39.99% { background-image:url('/assets/characters/employee-01/command-walk-east-16f.png'); transform:scaleX(-1.1); opacity:1; scale:1; }
    40%,43.32% { background-image:url('/assets/characters/employee-01/command-sit-at-computer-west-16f.png'); transform:none; opacity:1; scale:1; }
  }
  @keyframes command-actor-center-action {
    0%,9.99%,43.333%,59.99%,90%,100% { background-image:url('/assets/characters/employee-01/command-work-at-scene-computer-16f.png'); transform:none; opacity:1; scale:1; }
    10%,13.32%,60%,63.32% { background-image:url('/assets/characters/employee-01/command-stand-from-computer-east-16f.png'); transform:none; opacity:1; scale:1; }
    13.333%,23.32%,63.333%,69.99% { background-image:url('/assets/characters/employee-01/command-walk-east-16f.png'); transform:scaleX(1.1); opacity:1; scale:1; }
    23.333%,33.32% { background-image:url('/assets/characters/employee-01/command-talk-se-16f.png'); transform:scaleX(-1); opacity:1; scale:1; }
    33.333%,39.99%,80%,86.65% { background-image:url('/assets/characters/employee-01/command-walk-east-16f.png'); transform:scaleX(-1.1); opacity:1; scale:1; }
    40%,43.32%,86.666%,89.99% { background-image:url('/assets/characters/employee-01/command-sit-at-computer-west-16f.png'); transform:none; opacity:1; scale:1; }
    70%,79.99% { background-image:url('/assets/characters/employee-01/command-talk-se-16f.png'); transform:none; opacity:1; scale:1; }
  }
  @keyframes command-actor-right-action {
    0%,59.99%,90%,100% { background-image:url('/assets/characters/employee-01/command-work-at-scene-computer-16f.png'); transform:none; opacity:1; scale:1; }
    60%,63.32% { background-image:url('/assets/characters/employee-01/command-stand-from-computer-east-16f.png'); transform:none; opacity:1; scale:1; }
    63.333%,69.99% { background-image:url('/assets/characters/employee-01/command-walk-east-16f.png'); transform:scaleX(-1.1); opacity:1; scale:1; }
    70%,79.99% { background-image:url('/assets/characters/employee-01/command-talk-se-16f.png'); transform:scaleX(-1); opacity:1; scale:1; }
    80%,86.65% { background-image:url('/assets/characters/employee-01/command-walk-east-16f.png'); transform:scaleX(1.1); opacity:1; scale:1; }
    86.666%,89.99% { background-image:url('/assets/characters/employee-01/command-sit-at-computer-west-16f.png'); transform:none; opacity:1; scale:1; }
  }
  @keyframes command-bubble-left { 0%,23.32%,28.333%,100% { opacity:0; } 23.333%,28.32% { opacity:1; } }
  @keyframes command-bubble-center { 0%,28.32%,33.333%,69.99%,75%,100% { opacity:0; } 28.333%,33.32%,70%,74.99% { opacity:1; } }
  @keyframes command-bubble-right { 0%,74.99%,80%,100% { opacity:0; } 75%,79.99% { opacity:1; } }
}

@layer monitor {
  .command-center > .hq-panel-heading,.command-map { position:relative; }
  .command-map { z-index:1; background:transparent; }
  .command-map::before,.command-map::after,.command-room-art,.operator-desk,.operator-keyboard,.operator-cable { display:none; }
}

@layer access {
  @media (prefers-reduced-motion: reduce) {
    .command-scene-animated { animation:none !important; }
    .command-actor,.command-actor-action,.command-actor-body,.command-actor-bubble { animation:none !important; }
    .command-actor { transform:none !important; }
    .command-actor-body { top:0; scale:1; background-image:url('/assets/characters/employee-01/command-work-at-scene-computer-16f.png'); background-position:0 0; opacity:1; transform:none; }
    .command-actor-bubble { display:none; }
  }
}

/* Composition pass: retain fixed geometry while increasing scene fidelity. */
@layer shell {
  .brand-lockup { left:18px; gap:0; }
  .brand-mark { display:none; }
  .brand-title-line { display:flex; align-items:flex-start; gap:12px; }
  .brand-lockup h1 { font:900 54px/.86 var(--mono); letter-spacing:-.08em; }
  .version-badge { margin-top:2px; padding:5px 7px 4px; border:2px solid #9e45e8aa; background:#120b22; color:#d39aff; font:900 17px/1 var(--mono); box-shadow:3px 3px 0 #32164c; }
  .brand-lockup .eyebrow { margin-top:10px; font-size:9px; letter-spacing:.13em; }
  .source-meta { background:linear-gradient(135deg,#030914 0 62%,#10102a 100%); }
  .source-meta time { font-size:30px; letter-spacing:-.085em; text-shadow:0 0 8px #24e4ee55; }
  .circuit-field { inset:0 369px 0 54%; opacity:.27; background:none; }
  .circuit-field i:nth-child(1) { top:18px; width:70%; }
  .circuit-field i:nth-child(2) { top:47px; left:18%; width:55%; }
  .circuit-field i:nth-child(3) { top:76px; left:34%; width:52%; }
  .circuit-field i:nth-child(4) { top:101px; width:37%; }
}

@layer monitor {
  .team-member-button,.unassigned-slot { grid-template-columns:49px minmax(0,1fr) 9px; padding:3px 7px; gap:6px; }
  .team-copy { gap:2px; }
  .team-station-label { overflow:hidden; color:var(--cyan-high); font:900 9px/1.1 var(--mono); letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
  .team-pseudonym { color:#c5d9de; font-size:10px; font-weight:650; }
  .team-state { font-size:8px; }

  .observer-node { top:65px; left:205px; width:98px; height:18px; padding:2px 5px; border:1px solid #326178; background:#020713cc; clip-path:none; }
  .observer-node::after,.observer-node > span:last-child { display:none; }
  .observer-node strong { grid-column:1 / -1; overflow:hidden; font-size:6px; text-align:center; white-space:nowrap; }
  .command-lanes { top:91px; left:76px; grid-template-columns:repeat(4,82px); gap:7px; }
  .command-lane { height:26px; }
  .monitor-wall { top:5px; left:69px; display:grid; grid-template-columns:112px 126px 112px; grid-template-rows:116px; gap:5px; width:370px; height:126px; padding:5px; }
  .monitor-cluster { position:relative; display:grid; min-width:0; gap:4px; }
  .monitor-cluster-left { grid-template-rows:69px 30px; }
  .monitor-cluster-center { grid-template-rows:73px 26px; }
  .monitor-cluster-right { grid-template-rows:62px 37px; }
  .monitor-screen { min-width:0; min-height:0; }
  .observer-screen-label { position:absolute; top:55px; right:8px; left:8px; padding:2px; border:1px solid #77509d; background:#070c1d; color:#c894ff; font:700 5px/1 var(--mono); text-align:center; }
  .command-rack { width:57px; height:155px; }
  .command-server-tower { position:absolute; z-index:3; top:124px; width:38px; height:82px; border:5px solid #020712; background:repeating-linear-gradient(0deg,#14283a 0 9px,#3de968 10px 12px,#06101c 13px 17px); box-shadow:inset 5px 0 #244257,3px 3px #000; }
  .tower-left { left:10px; } .tower-right { right:10px; }
  .command-console-bank { left:28px; right:28px; height:79px; border-radius:38% 38% 4px 4px/20px 20px 4px 4px; background:repeating-linear-gradient(90deg,#0c2a40 0 55px,#6c412d 56px 61px); box-shadow:inset 0 11px #c68150,0 7px #020713; }
  .command-plant { position:absolute; z-index:9; bottom:49px; left:11px; width:28px; height:31px; border-bottom:16px solid #9a5f38; border-left:5px solid transparent; border-right:5px solid transparent; }
  .command-plant::before { content:""; position:absolute; bottom:10px; left:7px; width:9px; height:24px; background:#3d9d68; box-shadow:-8px 6px #50b873,8px 2px #287e55; clip-path:polygon(50% 0,100% 40%,70% 100%,35% 70%,0 35%); }
  .command-led-strip { position:absolute; z-index:6; top:137px; left:65px; width:378px; height:4px; background:repeating-linear-gradient(90deg,var(--green) 0 3px,transparent 3px 15px,var(--amber) 15px 18px,transparent 18px 29px); }
  .operator-1 .scene-sprite { transform:translateX(-50%) skewY(2deg) rotate(4deg); transform-origin:bottom; }
  .operator-2 .scene-sprite { transform:translateX(-50%); }
  .operator-3 .scene-sprite { transform:translateX(-50%) scaleX(-1) rotate(4deg); transform-origin:bottom; }

  .station-kind { top:4px; left:5px; padding:1px 3px; border:0; background:#07101ccf; color:#c99e55; font-size:4px; }
  .bay-readout { right:5px; bottom:4px; left:auto; width:86px; padding:3px 4px; border-left:2px solid var(--green); background:#020713c9; }
  .bay-readout strong { font-size:7px; }
  .bay-readout span { display:none; }
}

@layer scenes {
  .sprite-0 { --skin:#e2aa7f; } .sprite-1 { --skin:#98634c; } .sprite-2 { --skin:#d9a27e; } .sprite-3 { --skin:#82543e; }
  .sprite-4 { --skin:#d3a07e; } .sprite-5 { --skin:#a76c52; } .sprite-6 { --skin:#c98b66; } .sprite-7 { --skin:#e0ad88; }
  .sprite-0 .sprite-head::before { background:#6b3b26; clip-path:polygon(0 10%,80% 0,100% 70%,75% 100%,12% 73%); }
  .sprite-1 .sprite-head::before { height:15px; background:#171822; clip-path:polygon(0 0,100% 0,100% 60%,73% 42%,63% 100%,20% 74%,0 100%); }
  .sprite-2 .sprite-head::before { height:14px; background:#9b45be; clip-path:polygon(0 35%,18% 0,48% 27%,72% 0,100% 35%,86% 100%,8% 82%); }
  .sprite-3 .sprite-head::before { top:-9px; height:12px; background:#203447; clip-path:polygon(0 35%,40% 0,100% 15%,100% 100%,0 100%); }
  .sprite-4 .sprite-head::before { height:17px; background:#7d402d; clip-path:polygon(0 0,100% 20%,90% 100%,68% 55%,35% 100%,0 70%); }
  .sprite-5 .sprite-head::before { background:#c18351; clip-path:polygon(0 20%,55% 0,100% 30%,90% 82%,30% 60%,0 100%); }
  .sprite-6 .sprite-head::before { height:11px; background:#151722; box-shadow:0 8px 0 -3px #080c13; }
  .sprite-7 .sprite-head::before { background:#513329; clip-path:polygon(0 0,100% 0,82% 55%,100% 100%,50% 70%,8% 100%); }
  .sprite-1 .sprite-torso { background:#526c7c; } .sprite-2 .sprite-torso { background:#70459d; } .sprite-3 .sprite-torso { background:#28475c; }
  .sprite-4 .sprite-torso { background:#8b456d; } .sprite-5 .sprite-torso { background:#5e7351; } .sprite-6 .sprite-torso { background:#303746; } .sprite-7 .sprite-torso { background:#80543d; }
  .team-member-button .scene-sprite--compact,.unassigned-slot .scene-sprite--compact { width:45px; height:48px; transform:none; }
  .team-member-button .sprite-head,.unassigned-slot .sprite-head { top:0; left:11px; width:24px; height:22px; border-width:3px; }
  .team-member-button .sprite-torso,.unassigned-slot .sprite-torso { top:23px; left:4px; width:38px; height:25px; border-width:3px; }
  .team-member-button .sprite-chair,.unassigned-slot .sprite-chair { display:none; }
  .command-operator.operator-1 .scene-sprite { transform:translateX(-50%) skewY(2deg) rotate(4deg); transform-origin:bottom; }
  .command-operator.operator-2 .scene-sprite { transform:translateX(-50%); }
  .command-operator.operator-3 .scene-sprite { transform:translateX(-50%) scaleX(-1) rotate(4deg); transform-origin:bottom; }

  .specialist-scene .scene-sprite { bottom:18px; width:58px; height:94px; }
  .specialist-scene .sprite-head { left:15px; width:30px; height:31px; }
  .specialist-scene .sprite-torso { top:36px; width:51px; height:53px; }
  .bay-desk { right:4px; bottom:18px; left:4px; height:38px; }
  .specialist-scene .scene-sprite--has-art { width:24px; height:55px; bottom:34px; z-index:8; }
  .specialist-scene .bay-desk { z-index:9; }
  .specialist-scene .bay-keyboard { z-index:10; }
  .bay-chair { bottom:10px; height:66px; }
  .bay-lamp { position:absolute; z-index:7; right:8px; bottom:50px; width:22px; height:30px; border-right:4px solid #a66a43; border-top:4px solid #a66a43; }
  .bay-lamp::after { content:""; position:absolute; top:-9px; left:-7px; width:14px; height:10px; background:var(--amber); clip-path:polygon(20% 0,80% 0,100% 100%,0 100%); }
  .bay-vent { position:absolute; z-index:3; top:7px; left:7px; width:43px; height:21px; border:3px solid #020813; background:repeating-linear-gradient(0deg,#547081 0 2px,#142b3c 2px 5px); }
  .bay-shelf { position:absolute; z-index:3; top:34px; left:7px; width:42px; height:7px; background:#87563a; box-shadow:0 22px #593825; }
  .role-prop:nth-of-type(5) { top:72px; left:74px; width:19px; height:15px; border:3px solid var(--cyan); background:#0b2538; }
  .role-prop:nth-of-type(6) { top:12px; right:44px; width:15px; height:35px; background:repeating-linear-gradient(0deg,var(--green) 0 3px,transparent 3px 8px); }
  .role-prop:nth-of-type(7) { top:60px; right:12px; width:26px; height:12px; border:3px solid #17111b; background:var(--amber); }
  .role-scene-0 .prop-scanner { border-color:var(--amber); transform:skewX(-12deg); }
  .role-scene-1 .prop-compute { background:var(--violet); }
  .role-scene-2 .prop-device { border-color:var(--green); }
  .role-scene-3 .prop-container { background:#34536a; }
  .role-scene-4 .prop-cylinder { border-radius:50%; }
  .role-scene-5 .prop-diagnostic { background:var(--red); }
  .role-scene-6 .prop-radar { border-radius:50%; background:radial-gradient(circle,var(--red) 0 2px,transparent 3px); }
  .role-scene-7 .prop-parcel { background:#8a5231; }
}

@layer responsive {
  @media (max-width:767px) {
    body { padding-bottom:0; }
    .topbar { height:64px; padding:8px 10px; overflow:hidden; }
    .brand-lockup { top:13px; left:10px; right:10px; }
    .brand-title-line { gap:5px; }
    .brand-lockup h1 { max-width:none; overflow:visible; font-size:clamp(18px,5.25vw,22px); line-height:1; letter-spacing:-.065em; white-space:nowrap; }
    .version-badge,.brand-lockup .eyebrow { display:none; }
    .source-meta { top:42px; right:8px; left:auto; display:block; width:auto; height:auto; padding:0; border:0; background:transparent; box-shadow:none; }
    .source-meta::before,.source-meta::after,.source-meta time,.source-meta .clock-label { display:none; }
    .source-meta .badge { position:static; display:block; max-width:180px; overflow:hidden; padding:3px 6px; background:#020713f2; font-size:6px; text-overflow:ellipsis; white-space:nowrap; }
    .bottom-nav { min-height:76px; }
    .bottom-nav button { min-height:68px; line-height:1.35; }
    .screen { min-height:calc(100dvh - 64px); padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
    #screen-monitor { height:auto; padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
    .team-pseudonym { font-size:12px; }
    .team-station-label { font-size:10px; }
    .team-member-button,.unassigned-slot { min-height:76px; }
  }
}

@layer scenes {
  .factory-scene { position:relative; width:508px; height:350px; overflow:hidden; contain:paint; background:transparent; }
  .factory-scene::before,.factory-scene::after { content:none; }
  .factory-scene-layer,.factory-scene-image { position:absolute; inset:0; display:block; width:508px; height:350px; }
  .factory-scene-image { pointer-events:none; background-position:0 0; background-repeat:no-repeat; image-rendering:crisp-edges; image-rendering:pixelated; }
  .factory-scene-background { z-index:1; background-image:url('/assets/scenes/bot-factory/background.png'); background-size:508px 350px; }
  .factory-scene-glow { z-index:2; background-image:url('/assets/scenes/bot-factory/factory-glow-8f.png'); background-size:4064px 350px; animation:factory-glow-loop 1.333333s steps(8) infinite; }
  .factory-dynamic-objects { z-index:3; }
  .factory-sprite { position:absolute; display:block; background-position:center bottom; background-repeat:no-repeat; background-size:contain; image-rendering:crisp-edges; image-rendering:pixelated; filter:drop-shadow(1px 1px #01050c); }
  .factory-bot { animation:factory-bot-idle 2s steps(1,end) infinite; }
  .factory-bot-1 { z-index:247; left:96px; top:171px; width:31px; height:31px; background-image:url('/assets/scenes/bot-factory/sprites/bot-01-repair-v2.png'); }
  .factory-bot-2 { z-index:248; left:211px; top:171px; width:31px; height:31px; background-image:url('/assets/scenes/bot-factory/sprites/bot-02-tracked-welder.png'); animation-delay:-200ms; }
  .factory-bot-3 { z-index:257; left:317px; top:172px; width:31px; height:31px; background-image:url('/assets/scenes/bot-factory/sprites/bot-03-dome-scanner.png'); animation-delay:-400ms; }
  .factory-bot-4 { z-index:248; left:72px; top:191px; width:35px; height:35px; background-image:url('/assets/scenes/bot-factory/sprites/bot-04-inventory-fork.png'); animation-delay:-600ms; }
  .factory-bot-5 { z-index:245; left:204px; top:193px; width:35px; height:35px; background-image:url('/assets/scenes/bot-factory/sprites/bot-05-crawler-diagnostic.png'); animation-delay:-800ms; }
  .factory-bot-6 { z-index:265; left:330px; top:192px; width:35px; height:35px; background-image:url('/assets/scenes/bot-factory/sprites/bot-06-ballwheel-v2.png'); animation-delay:-1000ms; }
  .factory-bot-7 { z-index:291; left:407px; top:191px; width:35px; height:35px; background-image:url('/assets/scenes/bot-factory/sprites/bot-07-quadruped-maintenance.png'); animation-delay:-1200ms; }
  .factory-bot-8 { z-index:289; left:28px; top:221px; width:39px; height:39px; background-image:url('/assets/scenes/bot-factory/sprites/bot-08-coolant-tracked.png'); animation-delay:-1400ms; }
  .factory-bot-9 { z-index:281; left:196px; top:221px; width:39px; height:39px; background-image:url('/assets/scenes/bot-factory/sprites/bot-09-assembly-v2.png'); animation-delay:-1600ms; }
  .factory-bot-10 { z-index:248; left:341px; top:221px; width:39px; height:39px; background-image:url('/assets/scenes/bot-factory/sprites/bot-10-heavy-lift.png'); animation-delay:-1800ms; }
  .factory-bot-11 { z-index:299; left:442px; top:222px; width:39px; height:39px; background-image:url('/assets/scenes/bot-factory/sprites/bot-11-cable-repair.png'); animation-delay:-100ms; }
  .factory-robot-arm { z-index:225; left:132px; top:187px; width:53px; height:53px; background-image:url('/assets/scenes/bot-factory/sprites/arm-12-robotic.png'); }
  .factory-scene-foreground { z-index:4; background-image:url('/assets/scenes/bot-factory/foreground.png'); background-size:508px 350px; }
  @keyframes factory-glow-loop { to { background-position:-4064px 0; } }
  @keyframes factory-bot-idle { 50% { transform:translateY(-1px); } }
}

@layer monitor {
  .bot-factory { width:508px; height:350px; overflow:hidden; border:0; }
  .factory-dynamic-objects > .hq-panel-heading { position:absolute; z-index:20; top:0; left:0; width:110px; height:36px; padding:3px 6px; border:0; background:#030b18e8; }
  .factory-dynamic-objects > .hq-panel-heading h3 { font-size:9px; white-space:nowrap; }
  .factory-dynamic-objects > .hq-panel-heading .panel-index { display:none; }
  .pipeline-board { top:0; left:110px; grid-template-columns:repeat(4,95px); gap:2px; width:398px; height:36px; padding:2px; border:0; background:#030b18e8; box-shadow:none; }
  .pipeline-stage { grid-template-columns:1fr auto; padding:2px 4px; }
  .pipeline-stage .stage-icon { display:none; }
  .pipeline-stage strong { font-size:7px; }
  .pipeline-stage > span:last-child { font-size:11px; }
  .pipeline-stage:not(:last-child)::after { right:-4px; font-size:9px; }
}

@layer access {
  @media (prefers-reduced-motion: reduce) {
    .factory-scene-glow,.factory-bot { animation:none !important; }
  }
}

@layer scenes {
  .specialist-room-scene { position:absolute; inset:0 auto auto 0; width:100%; height:auto; aspect-ratio:2 / 1; overflow:hidden; contain:paint; background:none; image-rendering:crisp-edges; image-rendering:pixelated; }
  .specialist-room-scene::after { content:none; }
  .specialist-room-layer { position:absolute; inset:0; display:block; width:100%; height:100%; background-position:0 0; background-repeat:no-repeat; image-rendering:crisp-edges; image-rendering:pixelated; }
  .specialist-room-background { z-index:1; background-image:var(--specialist-room-background); background-size:100% 100%; }
  .specialist-room-glow { z-index:2; inset:0 auto auto 0; width:400%; background-image:var(--specialist-room-glow); background-size:100% 100%; animation:specialist-room-glow-loop 1.8s steps(4) infinite; }
  .specialist-room-live-character { z-index:3; inset:auto; left:50%; bottom:16px; width:24px; height:55px; transform:translateX(-50%); background:none; }
  .specialist-room-live-character .scene-sprite { position:absolute; inset:0; width:100%; height:100%; transform:none; filter:drop-shadow(1px 1px #01050c); }
  .specialist-room-live-character .scene-sprite-art { background-size:contain; }
  .specialist-room-live-character .sprite-chair { display:none; }
  .specialist-room-foreground { z-index:4; background-image:var(--specialist-room-foreground); background-size:100% 100%; }

  .specialist-room-research { --specialist-room-background:url('/assets/scenes/specialist-rooms/research/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/research/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/research/foreground.png'); }
  .specialist-room-model-forge { --specialist-room-background:url('/assets/scenes/specialist-rooms/model-forge/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/model-forge/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/model-forge/foreground.png'); }
  .specialist-room-app { --specialist-room-background:url('/assets/scenes/specialist-rooms/app/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/app/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/app/foreground.png'); }
  .specialist-room-runtime { --specialist-room-background:url('/assets/scenes/specialist-rooms/runtime/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/runtime/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/runtime/foreground.png'); }
  .specialist-room-data-vault { --specialist-room-background:url('/assets/scenes/specialist-rooms/data-vault/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/data-vault/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/data-vault/foreground.png'); }
  .specialist-room-qa { --specialist-room-background:url('/assets/scenes/specialist-rooms/qa/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/qa/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/qa/foreground.png'); }
  .specialist-room-security { --specialist-room-background:url('/assets/scenes/specialist-rooms/security/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/security/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/security/foreground.png'); }
  .specialist-room-release { --specialist-room-background:url('/assets/scenes/specialist-rooms/release/background.png'); --specialist-room-glow:url('/assets/scenes/specialist-rooms/release/glow-4f.png'); --specialist-room-foreground:url('/assets/scenes/specialist-rooms/release/foreground.png'); }

  @keyframes specialist-room-glow-loop { to { transform:translateX(-100%); } }
}

@layer access {
  @media (prefers-reduced-motion: reduce) {
    .specialist-room-glow { animation:none !important; }
  }
}