:root {
  --bg: #101215;
  --panel: #171b20;
  --panel2: #20262d;
  --ink: #e8edf2;
  --muted: #9aa7b4;
  --line: #2d3742;
  --accent: #4fd18b;
  --warn: #ffcc66;
  --bad: #ff6b6b;
  --text: #66b7ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(circle at 20% 0%, #1c2b29 0, #101215 35%, #08090b 100%);
  color: var(--ink);
  font: 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.app {
  display: grid;
  grid-template-columns: var(--side-width, 360px) 1fr;
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}
.app.sidebar-collapsed { --side-width: 86px; }
.play-workbench-exit { display: none; }
.app.play-immersive {
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #05070b;
}
.app.play-immersive .side,
.app.play-immersive .play-bar,
.app.play-immersive #debugTray { display: none !important; }
.app.play-immersive .main {
  width: 100vw;
  height: 100vh;
  padding: 0;
}
.app.play-immersive .workspace-shell,
.app.play-immersive .workspace-content,
.app.play-immersive #section-play,
.app.play-immersive .play-wrap,
.app.play-immersive .play-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
}
.app.play-immersive .workspace-shell { display: block; }
.app.play-immersive .workspace-content { overflow: hidden; }
.app.play-immersive #section-play.active { display: block; }
.app.play-immersive #section-webgpu-game.active { display: block; height: 100%; }
.app.play-immersive #section-webgpu-game > .panel {
  height: 100%;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
.app.play-immersive #section-webgpu-game h2,
.app.play-immersive #section-webgpu-game .game-bar,
.app.play-immersive #section-webgpu-game .menu-debugger { display: none; }
.app.play-immersive #gameViewport {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}
.app.play-immersive .play-workbench-exit {
  display: block;
  position: fixed;
  z-index: 1000;
  top: 12px;
  right: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 7px;
  background: rgba(8,12,16,.5);
  color: rgba(238,244,251,.62);
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .35;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.app.play-immersive .play-workbench-exit:hover,
.app.play-immersive .play-workbench-exit:focus-visible {
  opacity: 1;
  background: rgba(8,12,16,.9);
}
.side {
  border-right: 1px solid var(--line);
  background: rgba(16,18,21,.92);
  padding: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
h1 { font-size: 18px; margin: 0 0 12px; letter-spacing: .02em; }
.side-header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.side-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.sidebar-toggle:hover {
  border-color: var(--accent);
  background: #172821;
}
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex: 0 0 auto;
}
.search {
  width: 100%;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
}
.menu-list, .model-list { margin-top: 12px; display: grid; gap: 8px; }
.coverage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.coverage-chip {
  color: var(--muted);
  background: #0f1317;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.coverage-chip.good { color: var(--accent); border-color: #2a6b4e; }
.coverage-chip.warn { color: var(--warn); border-color: #66532a; }
.coverage-chip.bad { color: var(--bad); border-color: #6b2a2a; }
.coverage-chip.active {
  color: var(--ink);
  background: #183225;
  border-color: var(--accent);
}
.module-nav {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  padding: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.module-nav-title {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 2px;
}
.module-button {
  width: 100%;
  text-align: left;
  color: var(--ink);
  background: rgba(16,20,24,.82);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 9px;
  cursor: pointer;
  font: inherit;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 42px;
}
.module-button:hover, .module-button.active {
  border-color: var(--accent);
  background: #172821;
}
.module-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app.sidebar-collapsed .side {
  padding: 14px 10px;
  overflow-x: hidden;
}
.app.sidebar-collapsed .side-title,
.app.sidebar-collapsed .module-nav-title,
.app.sidebar-collapsed .module-label {
  display: none;
}
.app.sidebar-collapsed .side-header {
  justify-content: center;
}
.app.sidebar-collapsed .module-nav {
  padding: 8px;
}
.app.sidebar-collapsed .module-button {
  justify-content: center;
  padding: 10px;
}
.menu-row {
  width: 100%;
  text-align: left;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}
.menu-row.active { border-color: var(--accent); background: #172821; }
.menu-row .name { display: block; overflow: hidden; text-overflow: ellipsis; }
.model-row {
  width: 100%;
  text-align: left;
  color: var(--ink);
  background: #0f1317;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  cursor: pointer;
}
.model-row.previewable { border-color: #2a6b4e; }
.model-row.active { border-color: #fff; background: #172821; }
.model-layout {
  display: grid;
  grid-template-columns: minmax(420px, 1fr);
  gap: 14px;
  padding: 12px;
}
.menu-browser-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(280px, 360px);
  gap: 14px;
  padding: 12px;
  align-items: start;
}
.menu-preview-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.asset-explorer {
  min-width: 0;
  min-height: 0;
  background: rgba(16,20,24,.95);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.explorer-header b { display: block; font-size: 13px; }
.explorer-header span { color: var(--muted); font-size: 11px; }
.browser-pane {
  display: none;
  min-height: 0;
  padding: 10px;
  overflow: auto;
}
.browser-pane.active {
  display: grid;
  align-content: start;
  gap: 10px;
}
.browser-placeholder {
  color: var(--muted);
  background: #0f1317;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 12px;
  font-size: 12px;
}
.workspace-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}
.workspace-shell.full-bleed {
  grid-template-columns: minmax(0, 1fr);
}
.workspace-shell.full-bleed .asset-explorer {
  display: none;
}
.workspace-content {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}
.breadcrumb {
  color: var(--muted);
  font-size: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.badge { color: var(--muted); background: #101418; border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; font-size: 11px; }
.badge.good { color: var(--accent); border-color: #2a6b4e; }
.badge.warn { color: var(--warn); border-color: #66532a; }
.badge.bad { color: var(--bad); border-color: #6b2a2a; }
.main {
  height: 100vh;
  padding: 18px 18px 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.topbar { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin: 12px; }
.path { color: var(--muted); font-size: 12px; word-break: break-all; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.stage {
  display: grid;
  grid-template-columns: minmax(420px, 1.3fr) minmax(320px, .7fr);
  gap: 14px;
  align-items: start;
}
.shot-wrap {
  background: #050608;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  overflow: auto;
}
.shot {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.shot img { display: block; max-width: 100%; height: auto; }
.replay-wrap {
  background: #050608;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  overflow: auto;
}
.replay-stack {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.replay-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.replay-toolbar button, .replay-toolbar select {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
}
.replay-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #050608;
}
.replay-gpu-canvas {
  position: absolute;
  inset: 0;
  display: none;
  max-width: 100%;
  height: auto;
  background: #050608;
}
.replay-overlay-canvas {
  position: relative;
  background: transparent;
}
.replay-meta { color: var(--muted); font-size: 12px; margin-left: auto; }
.model-wrap {
  background: linear-gradient(135deg, #06080c, #111820 55%, #050608);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  overflow: auto;
}
.reference-panel {
  display: grid;
  gap: 8px;
  background: linear-gradient(135deg, #0b1015, #17140d 65%, #070809);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin: 12px;
}
.reference-panel.missing {
  border-style: dashed;
  color: var(--muted);
}
.reference-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.reference-head b {
  color: var(--ink);
  font-size: 13px;
}
.reference-video {
  width: 100%;
  max-height: 360px;
  background: #050608;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.reference-meta {
  color: var(--muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.model-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #0f1317;
}
.segmented button {
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.segmented button.active {
  color: var(--ink);
  background: #183225;
  box-shadow: inset 0 0 0 1px #2a6b4e;
}
.model-toolbar button, .model-toolbar select {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
}
.viewmodel-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 12px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.viewmodel-controls label {
  display: grid;
  gap: 4px;
}
.viewmodel-controls .viewmodel-check {
  align-self: end;
}
.viewmodel-controls .inline-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.viewmodel-controls input[type="checkbox"] {
  accent-color: var(--accent);
}
.viewmodel-controls .matrix-mode-value {
  color: var(--muted);
  font: 11px ui-monospace, Menlo, monospace;
}
.viewmodel-controls input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.viewmodel-controls button {
  align-self: end;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.model-canvas {
  display: block;
  width: min(100%, 720px);
  height: auto;
  background: #050608;
}
.model-meta { color: var(--muted); font-size: 12px; margin-left: auto; }
.map-fx-sampler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(8, 13, 17, .86);
  color: var(--muted);
  font-size: 12px;
}
.map-fx-sampler label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.map-fx-sampler select,
.map-fx-sampler button {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  font: inherit;
}
.map-fx-sampler select {
  max-width: min(330px, 42vw);
}
.map-fx-sampler button {
  cursor: pointer;
}
.map-fx-sampler button:disabled,
.map-fx-sampler select:disabled {
  cursor: wait;
  opacity: .55;
}
.map-fx-sampler input[type="checkbox"] {
  accent-color: var(--accent);
}
.map-fx-diagnostics {
  margin-top: 6px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 8, 11, .72);
  color: var(--muted);
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.map-fx-diagnostics.valid {
  border-color: rgba(79, 209, 139, .55);
  color: #9ee9bf;
}
.map-fx-diagnostics.warn {
  border-color: rgba(255, 204, 102, .55);
  color: #ffe0a0;
}
.map-fx-diagnostics.invalid {
  border-color: rgba(255, 107, 107, .62);
  color: #ffaaaa;
}
.overlay {
  position: absolute;
  border: 2px solid var(--accent);
  background: rgba(79,209,139,.12);
  pointer-events: none;
}
.overlay.text { border-color: var(--text); background: rgba(102,183,255,.10); }
.overlay.rect { border-color: var(--warn); background: rgba(255,204,102,.12); }
.overlay.bad { border-color: var(--bad); background: rgba(255,107,107,.16); }
.overlay.active { outline: 3px solid #fff; z-index: 5; }
.controls { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; color: var(--muted); }
.linkbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.linkbar a, .linkbar button {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.linkbar span { color: var(--muted); font-size: 12px; }
.panel {
  background: rgba(23,27,32,.92);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.panel h2 {
  font-size: 13px;
  margin: 0;
  padding: 10px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.materials { padding: 10px; max-height: 420px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mat-card { border: 1px solid var(--line); background: #0f1317; border-radius: 10px; overflow: hidden; }
.mat-card.active { border-color: #fff; }
.mat-thumb { height: 86px; background: #050608; border-bottom: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; position: relative; }
.mat-thumb img { position: absolute; max-width: none; transform-origin: top left; image-rendering: auto; }
.mat-thumb.empty { color: var(--muted); font-size: 11px; padding: 10px; text-align: center; }
.mat-body { padding: 8px; }
.mat-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-meta { color: var(--muted); font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-status { display: inline-block; margin-top: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; font-size: 11px; color: var(--muted); }
.mat-status.good { color: var(--accent); border-color: #2a6b4e; }
.mat-status.warn { color: var(--warn); border-color: #66532a; }
.mat-status.bad { color: var(--bad); border-color: #6b2a2a; }
.tables { display: grid; gap: 14px; }
.workbench-section { display: none; scroll-margin-top: 14px; }
.workbench-section.active { display: grid; }
/* Game Driver (lobby_VM) */
.gd-wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,420px); gap: 14px; padding: 12px; }
.gd-controls { display: flex; flex-direction: column; gap: 10px; }
.gd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gd-row.gd-sd.hidden { display: none; }
.gd-input { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 12px; }
#section-gamedriver button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
#section-gamedriver button:hover { border-color: var(--accent); }
#section-gamedriver button.gd-go { border-color: #2a6b4e; color: var(--accent); }
#section-gamedriver button.gd-warn { border-color: #66532a; color: var(--warn); }
.gd-sep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.gd-dim { color: var(--muted); font-size: 11px; }
.gd-state { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gd-status { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.gd-status.phase-postgame { border-color: #2a6b4e; color: var(--accent); }
.gd-status.gd-err { border-color: #6b2a2a; color: var(--bad); }
.gd-rules { font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--muted); border: 1px dashed var(--line); border-radius: 6px; padding: 5px 8px; }
.gd-rules b { color: var(--accent); font-weight: 600; }
.gd-rules.fallback { border-color: #66532a; color: var(--warn); }
.gd-scoreboard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gd-team { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.gd-team.allies { border-left: 3px solid #4a86e8; }
.gd-team.axis { border-left: 3px solid #e8734a; }
.gd-team .gd-score { font-size: 22px; font-weight: 700; }
.gd-team .gd-role { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.gd-players-head, .gd-log-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.gd-players { display: flex; flex-direction: column; gap: 3px; }
.gd-prow { display: flex; align-items: center; gap: 8px; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.gd-prow.dead { opacity: .45; }
.gd-dot { width: 8px; height: 8px; border-radius: 50%; background: #555; }
.gd-prow.allies .gd-dot { background: #4a86e8; }
.gd-prow.axis .gd-dot { background: #e8734a; }
.gd-prow .gd-kd { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.gd-log { font-family: ui-monospace, monospace; font-size: 11px; max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; display: flex; flex-direction: column-reverse; gap: 2px; }
.gd-log .gd-le { color: var(--ink); }
.gd-log .gd-le .gd-le-t { color: var(--muted); }
.gd-dvars-head { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.gd-dvars { font-family: ui-monospace, monospace; font-size: 11px; max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.gd-dvar { display: grid; grid-template-columns: 1fr 96px auto; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 4px; }
.gd-dvar:hover { background: #11151a; }
.gd-dvar .gd-dv-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-dvar.modified .gd-dv-name { color: var(--accent); }
.gd-dvar .gd-dv-name small { color: var(--muted); }
.gd-dvar input, .gd-dvar select { width: 100%; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; font: inherit; font-size: 11px; }
.gd-dvar input:disabled { opacity: .5; }
.gd-dv-flags { display: flex; gap: 3px; }
.gd-dv-flag { font-size: 8.5px; padding: 1px 4px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); text-transform: none; letter-spacing: 0; }
.gd-dv-flag.sv { border-color: #3a5a8a; color: #6f9be8; }
.gd-dv-flag.cheat { border-color: #6b2a2a; color: var(--bad); }
.gd-dv-flag.ro { border-color: #555; }
/* Network (net_VM) */
#section-network button { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; }
#section-network button:hover { border-color: var(--accent); }
#section-network button.gd-go { border-color: #2a6b4e; color: var(--accent); }
#section-network button.gd-warn { border-color: #66532a; color: var(--warn); }
#section-network button:disabled { opacity: .55; cursor: wait; }
.net-quick { display: grid; gap: 12px; padding: 18px 12px 14px; }
.net-quick-copy { display: flex; flex-direction: column; gap: 4px; }
.net-quick-copy span { color: var(--muted); font-size: 12px; }
.net-browser-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.net-browser-actions button span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; margin-right: 5px; color: inherit; }
.net-advanced { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.net-advanced > summary { cursor: pointer; color: var(--muted); font-size: 12px; padding: 6px 12px; }
.net-advanced[open] > summary { color: var(--ink); margin-bottom: 6px; }
.net-connection-proof { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-left: 2px solid var(--line); color: var(--muted); font: 11px/1.45 ui-monospace, monospace; }
.net-connection-proof.pass { border-left-color: var(--accent); color: var(--ink); }
.net-connection-proof.pass b { color: var(--accent); }
.net-clients { display: flex; flex-direction: column; gap: 5px; }
.net-client { border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12px; }
.net-timeline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 4px; }
.net-cs { font-family: ui-monospace, monospace; font-size: 10px; padding: 1px 5px; border-radius: 3px; border: 1px solid var(--line); color: var(--muted); }
.net-cs.cur { border-color: #2a6b4e; color: var(--accent); font-weight: 700; }
.net-arrow { color: var(--muted); font-size: 10px; }
.net-packets { font-family: ui-monospace, monospace; font-size: 10.5px; max-height: 200px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.net-pkt { display: flex; align-items: baseline; gap: 6px; }
.net-pkt .net-dir { display: inline-block; width: 30px; font-weight: 700; }
.net-pkt.oob .net-dir { color: var(--warn); }
.net-pkt.inband .net-dir { color: #6f9be8; }
.net-gsc { color: var(--accent); font-size: 10px; }
.net-master { display: flex; flex-direction: column; gap: 3px; }
.net-srv { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; }
.net-inline-label { color: var(--muted); font-size: 11px; display: inline-flex; align-items: center; gap: 5px; }
.net-inline-label input { width: 88px; }
.net-server-clock { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; font: 11px ui-monospace, monospace; color: var(--muted); }
.net-server-clock b { color: var(--accent); }
.net-channels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.net-channel { border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; font: 10.5px/1.55 ui-monospace, monospace; color: var(--muted); }
.net-channel b, .net-channel strong { color: var(--ink); }
.net-retail-facts { display: flex; flex-wrap: wrap; gap: 5px 14px; padding: 7px 9px; border-left: 2px solid var(--accent); font: 10.5px/1.45 ui-monospace, monospace; color: var(--muted); }
.net-retail-facts b { color: var(--ink); }.net-retail-facts small { flex-basis: 100%; color: var(--warn); }
.net-frag { color: #6f9be8; }.net-drop { color: var(--bad); font-weight: 700; }
.net-console { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.net-console-output { min-height: 116px; max-height: 240px; overflow: auto; padding: 8px 10px; font: 11px/1.55 ui-monospace, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.net-console-line.input { color: var(--ink); }
.net-console-line.output { color: var(--muted); }
.net-console-line.error { color: var(--bad); }
.net-console-empty { color: var(--muted); }
.net-console-form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding: 7px 8px; color: var(--accent); font: 12px ui-monospace, monospace; }
.net-console-form input { min-width: 0; width: 100%; background: transparent; color: var(--ink); border: 0; padding: 5px 3px; font: inherit; outline-offset: 3px; }
@media (max-width: 760px) { .net-channels { grid-template-columns: 1fr; } }
.debug-tray {
  position: relative;
  flex: 0 0 auto;
  z-index: 10;
  margin-top: 14px;
  background: rgba(10,12,15,.96);
  border: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  box-shadow: 0 -10px 30px rgba(0,0,0,.28);
}
.debug-tray.collapsed .debug-body { display: none; }
.debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel2);
  border-bottom: 1px solid var(--line);
}
.debug-header b { font-size: 13px; }
.debug-header span { color: var(--muted); font-size: 12px; }
.reload-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent);
  border: 1px solid #2a6b4e;
  border-radius: 999px;
  padding: 2px 7px;
  margin-left: 8px;
  font-size: 11px;
}
.reload-status.pending { color: var(--warn); border-color: #66532a; }
.reload-status.off { color: var(--muted); border-color: var(--line); }
.debug-header button {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.debug-body {
  display: grid;
  gap: 12px;
  max-height: 32vh;
  overflow: auto;
  padding: 12px;
}
.prototype-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  padding: 12px;
}
.prototype-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0f1317;
  padding: 12px;
}
.prototype-card b { display: block; margin-bottom: 6px; }
.prototype-card p { margin: 0; color: var(--muted); font-size: 12px; }
.game-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.game-bar label { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.game-bar select { background: #0f1317; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; }
.game-state { font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; }
.game-viewport { position: relative; margin: 12px; aspect-ratio: 16 / 9; max-width: 1100px; background: #05060a; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.game-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity .32s ease; }
.game-layer:focus { outline: none; }
.game-hidden { opacity: 0; pointer-events: none; }
.game-hud { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 12px; justify-content: center; padding: 18px; pointer-events: none; }
.game-btn { pointer-events: auto; background: rgba(20,26,32,.86); color: var(--ink); border: 1px solid var(--accent); border-radius: 8px; padding: 10px 22px; font: inherit; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.game-btn:hover { background: var(--accent); color: #08110b; }
.game-btn.active { background: var(--accent); color: #08110b; }
/* ---- FPV Player (section-play) ---- */
.play-wrap { display: flex; flex-direction: column; height: calc(100vh - 60px); }
.play-bar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.play-bar label { color: var(--muted); font-size: 12px; display: flex; gap: 6px; align-items: center; }
.play-bar select { background: #0f1317; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font: inherit; }
.play-title { font-weight: 800; letter-spacing: .14em; color: var(--accent); font-size: 13px; }
.play-viewport { position: relative; flex: 1; min-height: 420px; background: #05070b; overflow: hidden; }
.play-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
/* retail HUD canvas: fullscreen, transparent, redrawn per frame by playDrawRetailHud
   (the HUDRE element renderers). Sits under the scoreboard, over the vignette. */
.play-hudcv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none; }
/* Native gameplay HUD packets. Transparent WebGPU composition sits over the
   temporary Canvas2D layers until each imported hud_720 ownerdraw migrates. */
.play-hud-gpu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }
/* The shipping match HUD has one presentation surface. Standalone labs may use
   the legacy Canvas2D/DOM diagnostics, but active GameFlow never composites them. */
.play-hud.hud-authoritative-webgpu > :not(.play-hud-gpu) { display: none !important; }
/* retail module active -> hide the legacy DOM widget it replaces */
.play-hud.hud-mod-compass .play-minimap, .play-hud.hud-mod-compass .play-mm-jam,
.play-hud.hud-mod-scorebar .play-score, .play-hud.hud-mod-scorebar #playTimer,
.play-hud.hud-mod-ammo .play-ammo,
.play-hud.hud-mod-killfeed .play-killfeed,
.play-hud.hud-mod-damage #playDamage,
.play-hud.hud-mod-grenade #playGrenade,
.play-hud.hud-mod-splash #playPopups, .play-hud.hud-mod-splash #playStreak { display: none !important; }
/* map-load progress: covers the viewport while playLoadMap streams the zone; stage list checks off
   as each fetch lands so a 30-60s cold walk reads as progress, not a hang. */
.play-loading { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  background: rgba(8, 10, 13, 0.82); backdrop-filter: blur(2px); }
.play-loading.show { display: flex; }
.play-loading .pl-card { min-width: 300px; padding: 18px 24px; border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; background: rgba(14, 17, 22, 0.92); font-family: "Bahnschrift SemiCondensed", "Bahnschrift", "Oswald", system-ui, sans-serif; }
.play-loading .pl-map { font-size: 18px; letter-spacing: 1.5px; color: #eef4fb; text-transform: uppercase; margin-bottom: 10px; }
.play-loading .pl-stage { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #93a0b4; padding: 3px 0; }
.play-loading .pl-stage.done { color: #cfd8e6; }
.play-loading .pl-stage.active { color: #eef4fb; }
.play-loading .pl-stage.err { color: #ff7a6a; }
.play-loading .pl-dot { width: 13px; text-align: center; color: #56d98b; }
.play-loading .pl-stage.active .pl-dot { color: #79b8ff; }
.play-loading .pl-stage.pending .pl-dot { color: #4a5361; }
.play-loading .pl-note { margin-top: 10px; font-size: 10.5px; color: #6b7384; }
.play-hud { position: absolute; inset: 0; pointer-events: none; --hudscale: 1; font-family: "Bahnschrift SemiCondensed", "Bahnschrift", "Bebas Neue", "Oswald", "Arial Narrow", system-ui, sans-serif; color: #eef4fb; text-shadow: 0 0 1px rgba(0,0,0,.9), 1px 1px 0 rgba(0,0,0,.75), -1px 0 0 rgba(0,0,0,.4); user-select: none; }
/* minimap: square radar, top-left — flat neutral hairline border, no outer glow (retail) */
.play-minimap { position: absolute; left: 18px; top: 16px; width: 168px; height: 168px; border: 1px solid rgba(235,238,235,.45); background: rgba(8,14,20,.45); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); overflow: hidden; }
.play-mm-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* (player arrow now drawn in-canvas from the real compassping_player IWI) */
.play-mm-n { display: none; } /* retail MW2 square minimap has no compass letters */
.play-mm-jam { position: absolute; left: 150px; top: 140px; width: 24px; height: 24px; display: none; }
/* killfeed: bottom-left, hugging the score strip; uniform grey names (retail has NO team hue in the feed) */
.play-killfeed { position: absolute; left: 14px; bottom: 116px; font-size: clamp(13px, 2.6vh, 24px); line-height: 1.3; letter-spacing: .02em; max-width: 520px; }
.play-killfeed .kf { display: flex; align-items: center; gap: 7px; }
.play-killfeed .kf .nm { font-weight: 400; }
.play-killfeed .kf .you { color: rgba(235,235,235,.75); }
.play-killfeed .kf .foe { color: rgba(235,235,235,.75); }
.play-killfeed .kf .wp { color: rgba(235,235,235,.7); font-size: 13px; }
/* score strip: 2-col grid — left col = timer over big bare emblem; right col = status + rows */
.play-score { position: absolute; left: 16px; bottom: 10px; display: grid; grid-template-columns: 78px auto; column-gap: 8px; align-items: end; }
.play-score-left { display: flex; flex-direction: column; align-items: flex-start; }
.play-score-emblem { width: 74px; height: 74px; flex: 0 0 auto; margin-bottom: -8px; }
.play-score-main { min-width: 230px; padding-bottom: 8px; }
.play-timer { font-size: 19px; font-weight: 700; letter-spacing: .03em; line-height: 1.05; margin-left: 8px; }
.play-status { font-size: 18px; font-weight: 800; letter-spacing: .07em; line-height: 1.1; }
.play-status.win { color: #74e64e; }
.play-status.lose { color: #ef7066; }
.play-status.tie { color: #e9eef4; }
.play-team { display: flex; align-items: center; gap: 3px; line-height: 1.08; position: relative; }
.play-team-n { font-size: 18px; font-weight: 700; min-width: 30px; }
/* proportional wedges shaped by the game's ACTUAL hud_scorebar texture (mask), tinted per team */
.play-team-bar { display: block; width: 260px; height: 10px; position: relative; }
.play-team-bar > b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #1d6b2e, #58d63e);
  -webkit-mask-image: url('/api/iwi/hud_scorebar.png'); mask-image: url('/api/iwi/hud_scorebar.png');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.play-team-bar.foe > b { background: linear-gradient(90deg, #6b1d1d, #e04438); }
.play-team-you .play-team-bar::before { content: ""; position: absolute; left: 0; right: 6px; top: 50%; height: 1px; background: rgba(255,255,255,.32); }
.play-team-you .play-team-bar::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; transform: translateY(-50%) rotate(45deg); border-top: 1px solid rgba(255,255,255,.7); border-right: 1px solid rgba(255,255,255,.7); }
/* small white wedge marker before YOUR score only */
.play-team-mk { display: inline-block; width: 7px; height: 14px; margin-right: 3px; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: skewX(-10deg); }
.play-team-foe { padding-left: 10px; }
/* score numbers pure WHITE (retail: only the bars carry team color) */
.play-team-you .play-team-n, .play-team-foe .play-team-n { color: #fff; }
/* ammo: bottom-right but LEFT of the killstreak d-pad circle */
.play-ammo { position: absolute; right: 130px; bottom: 18px; text-align: right; }
.play-ammo-row { display: flex; align-items: flex-end; justify-content: flex-end; gap: 9px; }
.play-ammo-ticks { display: inline-flex; align-items: flex-end; gap: 2px; height: 21px; padding-bottom: 4px; }
.play-ammo-ticks i { width: 2px; height: 17px; background: rgba(235,242,250,.92); box-shadow: 0 0 2px rgba(0,0,0,.8); }
.play-ammo-ticks i.spent { opacity: .4; }
.play-ammo b { font-size: 42px; font-weight: 800; line-height: .78; font-stretch: condensed; text-shadow: -1px 0 1px rgba(0,0,0,.8), 1px 0 1px rgba(0,0,0,.8), 0 -1px 1px rgba(0,0,0,.8), 0 2px 2px rgba(0,0,0,.85); }
.play-timer, .play-team-n, .play-status { font-stretch: condensed; }
/* equipment: icon silhouettes ONLY (no x1 text), sized near digit cap height */
.play-ammo-equip { display: flex; justify-content: flex-end; gap: 20px; margin-top: 6px; padding-right: 36px; }
.play-ammo-equip .eq { display: inline-flex; align-items: flex-end; }
.play-ammo-equip .eqi { width: 26px; height: 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
/* thin white boundary line sweeping around the corner circle (retail) */
.play-cornerline { position: absolute; right: 0; bottom: 0; width: 320px; height: 160px; pointer-events: none; }
.play-cornerline path { stroke: rgba(255,255,255,.38); stroke-width: 1; fill: none; }
/* gold segmented bottom ribbon: the game's ACTUAL hud_scorebar_bottombar texture, tiled */
.play-ribbon { position: absolute; left: 0; right: 0; bottom: 0; height: 13px; opacity: .95;
  background: url('/api/iwi/hud_scorebar_bottombar.png') repeat-x left bottom; background-size: auto 13px; }
/* damage vignette (MW2 has no health bar) */
.play-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 150px rgba(170,0,0,0); transition: box-shadow .14s ease-out; }
/* dev debug chip + lock hint */
.play-debug { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); font-family: ui-monospace, monospace; font-size: 11px; background: rgba(0,0,0,.4); padding: 3px 9px; border-radius: 5px; color: #9fe6ff; white-space: nowrap; opacity: .55; }
.play-debug.hidden { display: none; }
.play-lockhint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 46px)); background: rgba(0,0,0,.55); padding: 7px 15px; border-radius: 8px; font-family: ui-monospace, monospace; font-size: 12px; border: 1px solid rgba(255,255,255,.15); }
/* score popups: ALWAYS gold (retail), fixed spawn above center, small drift */
.play-popups { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 0; height: 0; }
.play-pop { position: absolute; left: 0; top: 0; font-size: calc(14px * var(--hudscale)); font-weight: 700; font-stretch: condensed; color: #f0d87a; text-shadow: 0 0 1px rgba(0,0,0,.9), 1px 1px 0 rgba(0,0,0,.8); white-space: nowrap; animation: playPop 1s ease-out forwards; }
.play-pop.crit { color: #f0d87a; }
@keyframes playPop { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.9); } 14% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, calc(-50% - .5em)); } }
/* damage direction: thin crisp red crescent ARC on a circle ~34%vh radius (retail), not a glow blob */
.play-damage { position: absolute; inset: 0; overflow: hidden; }
.play-dmg { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; }
.play-dmg::before { content: ""; position: absolute; left: calc(-34vh); top: calc(-34vh); width: 68vh; height: 68vh; border-radius: 50%;
  border: calc(5px * var(--hudscale)) solid transparent; border-top-color: rgba(220,30,25,.85);
  -webkit-mask-image: linear-gradient(180deg, #000 0 22%, transparent 30%); mask-image: linear-gradient(180deg, #000 0 22%, transparent 30%); }
.play-dmg.show { animation: playDmg 1.1s ease-out forwards; }
@keyframes playDmg { 0% { opacity: 0; } 12% { opacity: .95; } 100% { opacity: 0; } }
.play-streak { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); text-align: center; font-size: 21px; font-weight: 800; letter-spacing: .06em; color: #eaf2ff; opacity: 0; }
.play-streak small { display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: #8fe0ff; margin-top: 2px; }
.play-streak.show { animation: playStreak 3.2s ease-out forwards; }
@keyframes playStreak { 0% { opacity: 0; transform: translateX(-50%) translateY(-8px); } 10% { opacity: 1; transform: translateX(-50%) translateY(0); } 86% { opacity: 1; } 100% { opacity: 0; } }
.play-streakcount { position: absolute; left: 198px; top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: #cfe0f0; }
.play-streakcount b { color: #ffd23f; font-size: 16px; }
.play-streakcount.hidden { display: none; }
.play-killfeed .kf .wpi { height: 17px; width: auto; flex: 0 0 auto; opacity: .8; filter: drop-shadow(0 1px 1px rgba(0,0,0,.7)); }
/* (no headshot gold tint — MW2's killfeed has no headshot marker) */
/* low-ammo: retail keeps ticks grey & number white even near-empty; red only when truly empty */
.play-ammo.low b { color: #ff5a5a; }
/* weapon-name banner on switch (just above the ammo row) */
.play-weaponname { position: absolute; right: 130px; bottom: 96px; font-size: 20px; font-weight: 700; font-stretch: condensed; letter-spacing: .1em; text-transform: uppercase; color: #eef4fb; opacity: 0; }
.play-weaponname.show { animation: playWpn 2.4s ease-out forwards; }
@keyframes playWpn { 0% { opacity: 0; transform: translateY(6px); } 8% { opacity: 1; transform: translateY(0); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* muzzle flash (screen-space; position set in JS, tracks ADS) */
.play-muzzle { position: absolute; left: 62%; top: 64%; width: 90px; height: 90px; margin: -45px 0 0 -45px; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, rgba(255,245,200,.95) 0%, rgba(255,180,60,.7) 28%, rgba(255,120,30,.25) 55%, rgba(255,120,30,0) 75%); mix-blend-mode: screen; }
.play-muzzle.show { animation: playMzl .07s ease-out; }
@keyframes playMzl { 0% { opacity: 1; transform: scale(.7) rotate(8deg); } 100% { opacity: 0; transform: scale(1.15) rotate(-6deg); } }
/* grenade-incoming indicator (directional, blinking; rotation set in JS) */
.play-grenade { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.play-grenade.show { opacity: 1; }
.play-grenade .gn-arm { position: absolute; left: 0; top: 0; }
.play-grenade .gn { position: absolute; left: -16px; top: -252px; width: 32px; height: 32px; filter: drop-shadow(0 0 3px rgba(0,0,0,.85)); animation: playNadeBlink .42s steps(1) infinite; }
.play-grenade .gnp { position: absolute; left: -12px; top: -276px; width: 24px; height: 12px; transform: rotate(180deg); filter: drop-shadow(0 0 3px rgba(0,0,0,.85)); animation: playNadeBlink .42s steps(1) infinite; }
@keyframes playNadeBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .3; } }
.iwi-count { font-size: 11px; color: var(--muted); padding: 6px 2px 8px; }
.iwi-list { height: calc(100vh - 210px); overflow-y: auto; position: relative; border: 1px solid var(--line); border-radius: 8px; }
.iwi-row { height: 30px; box-sizing: border-box; padding: 6px 9px; cursor: pointer; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.iwi-row:hover { background: #172821; }
.iwi-row.active { background: #1d3b2c; color: var(--accent); }
.iwi-preview { display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.iwi-stage { min-height: 62vh; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#1a1f24 0% 25%, #12161a 0% 50%) 50% / 24px 24px; border: 1px solid var(--line); border-radius: 8px; overflow: auto; }
.iwi-stage img { max-width: 100%; max-height: 60vh; image-rendering: pixelated; }
.iwi-name { font-size: 12px; color: var(--muted); }
/* ---- GSC interpreter / IDE ---- */
.gsc-ide { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 12px; height: calc(100vh - 170px); }
.gsc-editor-col { display: flex; flex-direction: column; min-width: 0; }
.gsc-toolbar { display: flex; align-items: center; gap: 8px; padding: 6px 2px 8px; flex-wrap: wrap; }
.gsc-openname { font: 12px/1.2 ui-monospace, Menlo, monospace; color: var(--accent); }
.gsc-spacer { flex: 1; }
.gsc-runlabel { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.gsc-input { background: #0d1411; border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 4px 6px; font: 12px ui-monospace, Menlo, monospace; width: 90px; }
.gsc-input.gsc-args { width: 120px; }
.gsc-toolbar button { background: var(--panel2); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 5px 10px; cursor: pointer; font-size: 12px; }
.gsc-toolbar button:hover { background: #1d3b2c; }
.gsc-toolbar button.gsc-run { background: var(--accent); color: #08110b; border-color: var(--accent); font-weight: 600; }
.gsc-editwrap { flex: 1; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #0a0f0c; min-height: 0; }
.gsc-gutter { margin: 0; padding: 10px 6px 10px 10px; text-align: right; color: #3f5a4c; background: #0c1310; font: 12px/1.5 ui-monospace, Menlo, monospace; user-select: none; overflow: hidden; white-space: pre; }
.gsc-editor { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: #d6f0e2; font: 12px/1.5 ui-monospace, Menlo, monospace; padding: 10px; white-space: pre; overflow: auto; tab-size: 4; }
.gsc-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.gsc-status { font-size: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); color: var(--muted); }
.gsc-status.ok { color: var(--accent); border-color: #1d3b2c; }
.gsc-status.err { color: var(--bad); border-color: #5a2424; }
.gsc-panel { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gsc-panel-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 10px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.gsc-dim { color: #3f5a4c; text-transform: none; letter-spacing: 0; }
.gsc-result { margin: 0; padding: 10px; font: 12px ui-monospace, Menlo, monospace; color: #d6f0e2; white-space: pre-wrap; max-height: 120px; overflow: auto; }
.gsc-diag { max-height: 160px; overflow: auto; }
.gsc-diag .gsc-empty { color: var(--muted); padding: 10px; font-size: 12px; }
.gsc-diag-row { padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer; display: flex; gap: 8px; }
.gsc-diag-row:hover { background: rgba(255,255,255,.04); }
.gsc-diag-row .ln { color: var(--muted); min-width: 34px; font: 11px ui-monospace, monospace; }
.gsc-diag-row.error .sev { color: var(--bad); }
.gsc-diag-row.warning .sev { color: #ffcc66; }
.gsc-fns, .gsc-calls { max-height: 150px; overflow: auto; }
.gsc-fns .row, .gsc-calls .row { padding: 5px 10px; border-bottom: 1px solid var(--line); font: 12px ui-monospace, monospace; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.gsc-fns .row:hover, .gsc-calls .row:hover { background: rgba(255,255,255,.04); }
.gsc-fns .ln { color: var(--muted); min-width: 30px; font-size: 11px; }
.gsc-badge { font-size: 10px; padding: 1px 6px; border-radius: 10px; border: 1px solid var(--line); color: var(--muted); }
.gsc-badge.local { color: var(--accent); border-color: #1d3b2c; }
.gsc-badge.builtin { color: #8ab4ff; border-color: #24385a; }
.gsc-badge.external { color: #ffcc66; border-color: #5a4d24; }
.gsc-badge.include { color: #5ad1c0; border-color: #1f4a44; }
.gsc-badge.explicit { color: #c08aff; border-color: #3d2a5a; }
.gsc-badge.dynamic { color: #ff9d5c; border-color: #5a3a24; }
.gsc-badge.missing { color: #ff6b6b; border-color: #5a2424; }
.gsc-callname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* file tree + call graph */
.gsc-view-toggle { display: flex; align-items: center; gap: 6px; padding: 4px 2px 8px; }
.gsc-view-toggle button { background: var(--panel2); border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: 3px 10px; cursor: pointer; font-size: 11px; }
.gsc-view-toggle button.active { background: #1d3b2c; color: var(--accent); border-color: #1d3b2c; }
.gsc-view-toggle .iwi-count { padding: 0; margin-left: auto; }
.gsc-filetree { height: calc(100vh - 240px); overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
#fxList { margin-top: 0; height: calc(100vh - 220px); overflow-y: auto; padding-right: 4px; }
.gsc-trow { display: flex; align-items: center; gap: 4px; padding: 4px 8px; cursor: pointer; white-space: nowrap; font: 12px ui-monospace, Menlo, monospace; border-bottom: 1px solid rgba(255,255,255,.02); }
.gsc-trow:hover { background: #172821; }
.gsc-trow.active { background: #1d3b2c; color: var(--accent); }
.gsc-trow .tw { width: 12px; color: var(--muted); display: inline-block; text-align: center; flex: none; }
.gsc-trow.dir > .nm { color: #cfe6da; }
.gsc-trow.file > .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.gsc-trow.file.active > .nm { color: var(--accent); }
.gsc-tdir-kids { overflow: hidden; }
.gsc-graph { max-height: 320px; overflow: auto; }
.gsc-lobby-lab { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.gsc-lobby-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--panel2); border-bottom: 1px solid var(--line); font-size: 12px; color: #d6f0e2; }
.gsc-lobby-head .gsc-spacer { flex: 1; }
.gsc-lobby-head button { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 12px; }
.gsc-lobby-head button.gsc-run { background: var(--accent); color: #08110b; border-color: var(--accent); font-weight: 600; }
.gsc-lobby-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 220px; }
.gsc-lobby-scenario { resize: none; border: 0; outline: 0; background: #0a0f0c; color: #d6f0e2; font: 12px/1.5 ui-monospace, Menlo, monospace; padding: 10px; white-space: pre; overflow: auto; tab-size: 4; border-right: 1px solid var(--line); }
.gsc-lobby-result { margin: 0; padding: 10px; font: 12px ui-monospace, Menlo, monospace; color: #d6f0e2; white-space: pre-wrap; overflow: auto; background: #0a0f0c; }
.gsc-gnode { display: flex; align-items: center; gap: 5px; padding: 3px 8px; font: 12px ui-monospace, Menlo, monospace; white-space: nowrap; cursor: default; }
.gsc-gnode:hover { background: rgba(255,255,255,.035); }
.gsc-gnode .gtw { width: 12px; flex: none; color: var(--muted); text-align: center; cursor: pointer; }
.gsc-gnode .gtw.leaf { color: #2a3d33; cursor: default; }
.gsc-gname { color: #d6f0e2; }
.gsc-gname.nav { cursor: pointer; text-decoration: underline dotted rgba(120,220,170,.4); }
.gsc-gname.nav:hover { color: var(--accent); }
.gsc-gnode .gloc { color: #3f5a4c; font-size: 10px; }
.gsc-gnode.root { background: rgba(120,220,170,.05); }
.gsc-gcycle { color: #8a6d3b; font-size: 10px; }
/* ---- menu debugger (item->link + live state editor) ---- */
.menu-debugger { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.mdbg-col { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel); }
.mdbg-head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 7px 10px; background: var(--panel2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.mdbg-filter { margin-left: auto; background: #0d1411; border: 1px solid var(--line); color: var(--ink); border-radius: 6px; padding: 3px 7px; font: 11px ui-monospace, monospace; width: 150px; }
.mdbg-list { max-height: 300px; overflow: auto; }
.mdbg-row { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-bottom: 1px solid rgba(255,255,255,.03); font: 12px ui-monospace, Menlo, monospace; }
.mdbg-row:hover { background: rgba(255,255,255,.035); }
.mdbg-label { color: #d6f0e2; min-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdbg-arrow { color: #3f5a4c; }
.mdbg-link { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.mdbg-link.nav { color: var(--accent); cursor: pointer; text-decoration: underline dotted rgba(120,220,170,.4); }
.mdbg-link.nav:hover { color: #c6ffe0; }
.mdbg-badge { font-size: 9px; padding: 1px 5px; border-radius: 9px; border: 1px solid var(--line); color: var(--muted); flex: none; }
.mdbg-key { color: #8ab4ff; min-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdbg-val { background: #0d1411; border: 1px solid var(--line); color: #ffcc66; border-radius: 5px; padding: 2px 6px; font: 12px ui-monospace, monospace; width: 110px; }
.mdbg-val:focus { border-color: var(--accent); outline: none; }
.mdbg-src { font-size: 9px; color: #3f5a4c; flex: none; width: 34px; text-align: right; }
.mdbg-empty { color: var(--muted); padding: 12px; font-size: 12px; }
.doctor-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.doctor-summary b { color: var(--ink); }
.anim-vm-debugger { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0c1014; }
.anim-vm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--panel2); border-bottom: 1px solid var(--line); }
.anim-vm-head b { color: var(--ink); }
.anim-vm-summary { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 11px; }
.anim-vm-body { padding: 12px; display: grid; gap: 12px; }
.anim-vm-timeline { position: relative; display: grid; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #080b0e; }
.anim-lane { display: grid; grid-template-columns: 120px minmax(0, 1fr) 165px; align-items: center; gap: 10px; }
.anim-lane-name { color: var(--ink); font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anim-lane-track { position: relative; height: 24px; border: 1px solid #26323d; border-radius: 999px; background: linear-gradient(90deg, rgba(60,80,96,.32), rgba(18,24,30,.85)); overflow: hidden; }
.anim-lane-segment { position: absolute; top: 0; bottom: 0; min-width: 1px; opacity: .9; }
.anim-lane-segment.weapon { background: rgba(102, 194, 255, .45); }
.anim-lane-segment.hand { background: rgba(76, 224, 144, .50); }
.anim-lane-segment.hidden { background: rgba(255, 107, 107, .18); }
.anim-lane-segment.insert { background: rgba(255, 204, 102, .45); }
.anim-lane-playhead { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.85); z-index: 5; }
.anim-note-marker { position: absolute; top: 2px; width: 2px; height: 20px; background: var(--warn); box-shadow: 0 0 8px rgba(255,204,102,.45); z-index: 4; }
.anim-note-marker.clip { background: var(--bad); }
.anim-note-marker.viewmodel { background: #8ab4ff; }
.anim-lane-value { font: 11px ui-monospace, Menlo, monospace; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-vm-dopesheet { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #080b0e; }
.anim-track-row { display: grid; grid-template-columns: 150px 128px minmax(0, 1fr) 210px; align-items: center; min-height: 30px; border-bottom: 1px solid rgba(255,255,255,.045); }
.anim-track-row:last-child { border-bottom: 0; }
.anim-track-entity { padding: 6px 8px; color: var(--ink); font-weight: 700; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-track-prop { padding: 6px 8px; color: var(--muted); font: 11px ui-monospace, Menlo, monospace; border-left: 1px solid rgba(255,255,255,.045); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-track-graph { position: relative; height: 22px; margin: 0 8px; border-left: 1px solid #24313b; border-right: 1px solid #24313b; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.015)); }
.anim-key { position: absolute; top: 7px; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); background: var(--accent); border: 1px solid #bdf8d6; box-shadow: 0 0 6px rgba(76,224,144,.35); }
.anim-key.rot { background: #8ab4ff; border-color: #c3d8ff; }
.anim-key.event { background: var(--warn); border-color: #ffe0a3; }
.anim-track-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.75); z-index: 4; }
.anim-track-value { padding: 6px 8px; color: var(--muted); font: 11px ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid rgba(255,255,255,.045); }
.anim-vm-notes { display: flex; flex-wrap: wrap; gap: 6px; }
.anim-vm-note { border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; color: var(--muted); font-size: 11px; cursor: pointer; background: #0f1419; }
.anim-vm-note:hover { color: var(--ink); border-color: var(--accent); }
.anim-vm-note.clip { color: var(--bad); border-color: #6b2a2a; }
.anim-vm-note.viewmodel { color: #8ab4ff; border-color: #24385a; }
.doctor-row-bad { background: rgba(255,107,107,.08); }
.doctor-row-warn { background: rgba(255,204,102,.06); }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); text-align: left; z-index: 1; }
tr { cursor: default; }
tr:hover { background: rgba(255,255,255,.035); }
.scroll { max-height: 430px; overflow: auto; }
.mono { white-space: nowrap; }
.value { max-width: 560px; overflow: hidden; text-overflow: ellipsis; }
.flag { color: var(--bad); }
.empty { color: var(--muted); padding: 16px; }
@media (max-width: 1050px) {
  .app { grid-template-columns: 1fr; }
  .app.sidebar-collapsed { --side-width: 1fr; }
  .side { position: static; height: auto; }
  .app.sidebar-collapsed .side-title,
  .app.sidebar-collapsed .module-nav-title,
  .app.sidebar-collapsed .module-label {
    display: inline;
  }
  .app.sidebar-collapsed .module-button {
    justify-content: flex-start;
  }
  .stage { grid-template-columns: 1fr; }
  .model-layout { grid-template-columns: 1fr; }
  .menu-browser-layout { grid-template-columns: 1fr; }
  .workspace-shell { grid-template-columns: 1fr; overflow: auto; }
  .asset-explorer { max-height: 42vh; }
  .workspace-content { overflow: visible; }
}
.character-lab{min-height:calc(100vh - 32px)}
.character-lab-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.character-lab-toolbar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.character-lab-toolbar select,.character-lab-toolbar button{min-height:34px}
.character-lab-transition{margin:-2px 0 12px;padding:10px 12px;border:1px solid #334253;border-radius:9px;background:linear-gradient(180deg,#111821,#0b1118)}
.character-lab-transition-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#d7e3f3;font:12px ui-monospace,SFMono-Regular,Menlo,monospace}
.character-lab-transition-head span{color:#58d49b}
.character-lab-transition input[type="range"]{width:100%;accent-color:#58d49b}
.character-lab-transition-stages{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin-top:7px}
.character-lab-transition-stages button{min-width:0;padding:5px 4px;border:1px solid #2b3745;border-radius:5px;background:#0a0f15;color:#8294a9;font:10px ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
.character-lab-transition-stages button.active{border-color:#58d49b;background:#173429;color:#c9ffe8;box-shadow:0 0 0 1px #58d49b33 inset}
.character-lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:14px}
.character-lab-stage{position:relative;min-height:620px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#070a0f}
.character-lab-stage canvas{display:block;width:100%;height:620px}
.character-lab-stage #characterLabMeshCanvas{position:absolute;inset:0;z-index:0}
.character-lab-stage #characterLabCanvas{position:absolute;inset:0;z-index:1;pointer-events:none}
.character-lab-stage .character-lab-legend{z-index:2}
.character-lab-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.character-lab-telemetry{min-height:320px;max-height:55vh;overflow:auto;margin:0;padding:12px;border:1px solid var(--border);border-radius:8px;background:#090d13;color:#9eb0c6;font:11px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.character-lab-legend{position:absolute;left:12px;bottom:10px;display:flex;gap:12px;padding:6px 9px;border-radius:6px;background:#090d13d9;color:#8ca0b8;font:11px ui-monospace,monospace}
.character-lab-legend span:before{content:"";display:inline-block;width:14px;height:3px;margin-right:5px;vertical-align:middle;border-radius:2px;background:#58d49b}
.character-lab-legend .phys:before{background:#f3ad55}.character-lab-legend .joint:before{background:#ffe1b5}
@media(max-width:980px){.character-lab-grid{grid-template-columns:1fr}.character-lab-stage,.character-lab-stage canvas{min-height:480px;height:480px}}
.subsystem-lab{min-height:calc(100vh - 32px)}
.subsystem-lab-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:12px 0}
.subsystem-lab-toolbar label{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.subsystem-lab-toolbar label:not(.lab-check){padding:5px 7px;border:1px solid var(--border);border-radius:7px;background:var(--panel2)}
.subsystem-lab-toolbar input[type="range"]{width:108px}.subsystem-lab-toolbar output{min-width:34px;color:var(--text);font-family:ui-monospace,monospace}
.subsystem-lab-toolbar select,.subsystem-lab-toolbar button{min-height:34px}
.subsystem-lab-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:14px}
.subsystem-lab-stage{position:relative;min-height:640px;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#070a0f}
.subsystem-lab-stage canvas{display:block;width:100%;height:640px}
.lighting-lab-compare-legend{position:absolute;left:12px;right:12px;bottom:10px;display:flex;justify-content:space-between;pointer-events:none;color:#d7e7fb;font:11px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 1px 3px #000;background:linear-gradient(90deg,rgba(6,10,16,.72),transparent 38%,transparent 62%,rgba(6,10,16,.72));padding:5px 7px;border-radius:5px}
.lighting-lab-compare-legend[hidden]{display:none}
.subsystem-lab-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.bot-lab-score{display:flex;align-items:center;justify-content:center;gap:26px;min-height:42px;margin:0 0 10px;border:1px solid var(--border);border-radius:8px;background:#090e12;color:#d9e2e5;font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}
.bot-lab-score .bot-lab-team{display:inline-flex;align-items:center;gap:8px}.bot-lab-score .bot-lab-team b{font-size:20px}.bot-lab-score .allies{color:#54d89b}.bot-lab-score .axis{color:#ef6a62}.bot-lab-score .bot-lab-clock{min-width:64px;text-align:center;color:#d2a84a}
.bot-lab-events{max-height:230px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:#090d13;font:11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.bot-lab-events>div{display:grid;grid-template-columns:76px minmax(0,1fr) 44px;gap:8px;padding:6px 8px;border-bottom:1px solid #1a242b;color:#8ea1a9}.bot-lab-events>div:last-child{border-bottom:0}.bot-lab-events b{color:#d2a84a}.bot-lab-events time{text-align:right;color:#61737b}.bot-lab-events span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-debug-toggle{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap}.lab-debug-toggle input{margin:0;accent-color:#54d89b}
@media(max-width:980px){.subsystem-lab-grid{grid-template-columns:1fr}.subsystem-lab-stage,.subsystem-lab-stage canvas{min-height:480px;height:480px}}