:root {
  --paper: #f5f3ee;
  --ink: #231f20;
  --ui: #23272e;
  --ui-text: #f4f6f8;
  --accent: #2a6ebb;
  --warn: #b42318;
  --sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* The page fills the screen: a scanned sheet of paper with light grain. */
body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(60, 50, 30, 0.10) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.32  0 0 0 0 0.27  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
  font-family: var(--sans);
  min-height: 100vh;
}

.desk { padding: 112px 40px 60px; }
.sheet { max-width: 1280px; margin: 0 auto; }

.runhead {
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8478;
  border-bottom: 1px solid #d8d3c8;
  padding-bottom: 8px;
  margin-bottom: 18px;
}

/* Knight: serif text, sans figure labels, blue figure numbers */
.style-knight .text { font: 21px/1.55 "Times New Roman", Times, serif; margin: 0 0 12px; }
.style-knight .caption { font: 18px/1.4 Arial, Helvetica, sans-serif; margin: 22px 0 4px; max-width: 760px; }
.style-knight .figlabel, .style-knight .figref {
  font: 700 0.86em Arial, Helvetica, sans-serif;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.style-knight .figlabel { margin-right: 8px; }
/* Verma: Century Schoolbook, justified */
.style-verma .text {
  font: 22px/1.6 "Century Schoolbook", "New Century Schoolbook", Century, Georgia, serif;
  text-align: justify;
  margin: 0 0 12px;
}
.style-photo .note, .sheet .note { font: 15px/1.5 var(--sans); color: #6b665c; border-left: 3px solid #d8d3c8; padding-left: 10px; }

.fig { margin: 14px 0 10px; }
.figbox { position: relative; width: 100%; }
.figbox > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.figbox > canvas.base { mix-blend-mode: darken; }
.figbox > canvas.overlay { touch-action: none; user-select: none; }
figcaption { font: 16px var(--sans); color: #57524a; margin-top: 6px; }

/* numbers in the text: highlighted while playing, as the paper does */
span.num { border-radius: 4px; transition: background 0.15s; }
body[data-mode="play"] span.num { background: rgba(42, 110, 187, 0.07); box-shadow: inset 0 -1px 0 rgba(42, 110, 187, 0.35); cursor: pointer; }
span.num.bound,
body[data-mode="play"] span.num.bound {
  background: #e3e6ea;
  box-shadow: none;
  color: #1f3a66;
  padding: 0 5px;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
}
span.num.scrubbing { background: #cdd8e8 !important; }

/* ---- floating toolbar ---- */
.bar {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  background: rgba(35, 39, 46, 0.94);
  color: var(--ui-text);
  border-radius: 10px;
  padding: 7px 10px 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
  font: 13.5px var(--sans);
  max-width: calc(100vw - 24px);
}
.bar-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: 0.02em; margin-right: 4px; }
@media (max-width: 1180px) { .brand { display: none; } }
.bar select {
  font: 13.5px var(--sans);
  background: #353a43;
  color: var(--ui-text);
  border: 1px solid #4a505b;
  border-radius: 5px;
  padding: 4px 6px;
}
.sep { width: 1px; height: 22px; background: #4a505b; margin: 0 4px; }
.tb {
  font: 500 13.5px var(--sans);
  color: var(--ui-text);
  background: transparent;
  border: 1px solid #4a505b;
  border-radius: 5px;
  padding: 4px 10px;
  cursor: pointer;
}
.tb:hover:not(:disabled) { background: #3b414b; }
.tb:disabled { opacity: 0.4; cursor: default; }
.tb.on { background: var(--ui-text); color: var(--ui); border-color: var(--ui-text); }
.tb.run { background: #2f7d4f; border-color: #2f7d4f; }
.tb-check, .tb-field { display: inline-flex; align-items: center; gap: 4px; color: #cfd6df; margin-left: 4px; }
.tb-field input { width: 90px; }
.hint { font-size: 12.5px; color: #b9c2cd; margin-top: 4px; padding-left: 2px; }
.hint.warn { color: #ffb4a8; }

/* ---- floating layers over the figure ---- */
.figbox { container-type: inline-size; }
/* numbers read from a photo, over the printed numbers */
.chips { position: absolute; inset: 0; pointer-events: none; }
.numchip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.15em;
  padding: 0 0.3em; border-radius: 4px;
  background: rgba(255, 255, 255, 0.9); color: #1f3a66;
  box-shadow: 0 0 0 1px rgba(42, 110, 187, 0.55);
  font-family: var(--sans); font-weight: 600; line-height: 1; white-space: nowrap;
  pointer-events: none;
}
.numchip .unit { font-weight: 400; color: #57524a; }
body[data-mode="play"] .numchip { pointer-events: auto; }
.numchip span.num.bound { padding: 0 0.2em; }
.cards { position: absolute; inset: 0; pointer-events: none; }
.cards > * { position: absolute; pointer-events: auto; }

.rolemenu {
  width: 170px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 8px 6px;
  font: 14px var(--sans);
  text-align: center;
}
.rm-title { font-size: 12px; color: #8a8f98; padding: 2px 0 6px; }
.rm-item {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  padding: 8px 6px;
  letter-spacing: 0.1em;
  font: 14px var(--sans);
  color: #333;
  border-radius: 6px;
  cursor: pointer;
}
.rm-item:hover { background: #f0f3f7; }
.rm-item.on { background: #e4ecf8; color: #1f3a66; font-weight: 600; }
.rm-item.muted { color: #8a8f98; }
.rm-item.danger { color: var(--warn); }

.card, .graphcard {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
  font: 13px var(--sans);
  color: #23272e;
}
.card { width: 270px; padding: 10px 12px 12px; }
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.card-head .muted { margin-right: auto; }
.card-head select { font: 13px var(--sans); border: 1px solid #d3d8df; border-radius: 5px; padding: 3px 4px; margin-right: auto; max-width: 85%; }
.x { border: 0; background: none; font-size: 18px; line-height: 1; color: #8a8f98; cursor: pointer; padding: 0 4px; }
.x:hover { color: var(--warn); }
.muted { color: #8a8f98; }
.params { display: grid; gap: 8px; }
.param label { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.param output { font-variant-numeric: tabular-nums; color: #5b6676; white-space: nowrap; }
.param input[type="range"] { width: 100%; accent-color: var(--accent); margin: 2px 0 0; }
.param.row { display: flex; align-items: center; justify-content: space-between; }
.check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.divider { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a8f98; border-top: 1px solid #eceff3; padding-top: 6px; }
.linked { font: 600 10.5px var(--sans); color: #1f3a66; background: #e3e6ea; border-radius: 3px; padding: 1px 5px; }
.probes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 10px; border-top: 1px solid #eceff3; padding-top: 8px; }
.chip { font: 12.5px var(--sans); border: 1px solid #c9d1dc; background: #fff; border-radius: 5px; padding: 3px 8px; cursor: pointer; }
.chip.on, .chip:hover { background: #e4ecf8; border-color: #9fb6d8; }

.graphcard { padding: 8px 10px 6px; background: rgba(255, 255, 255, 0.82); }
canvas.graph { display: block; width: 100%; height: 190px; }

.popover {
  position: absolute;
  z-index: 30;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.2);
  padding: 6px;
  min-width: 230px;
  font: 14px var(--sans);
}
.pop-title { padding: 4px 8px 6px; color: #8a8f98; }
.pop-item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 6px 8px; border-radius: 5px; font: 14px var(--sans); color: #23272e; cursor: pointer; }
.pop-item:hover { background: #f1f5fe; }
.pop-item.danger { color: var(--warn); }
.pop-item.muted { color: #8a8f98; }

/* ---- photo -> scene: the four pipelines side by side ---- */
.compare { position: fixed; inset: 0; z-index: 30; background: rgba(20, 22, 26, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: 70px 16px 16px; overflow: auto; }
.compare[hidden] { display: none; }
.cmp-panel { background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); padding: 12px 14px 10px; width: min(1200px, 100%); font: 14px var(--sans); }
.cmp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cmp-head b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-head .tb { color: var(--ink); border-color: #c9c4b8; }
.cmp-head .tb:hover { background: #f1efe9; }
.cmp-head .x { border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #6b665c; }
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.cmp-card { border: 1px solid #e2ded5; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cmp-card.done { cursor: pointer; }
.cmp-card.done:hover, .cmp-card.done:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(42, 110, 187, 0.25); outline: none; }
.cmp-title { font-weight: 600; }
.cmp-thumb { min-height: 120px; display: flex; align-items: center; justify-content: center; background: #f6f5f2; border-radius: 6px; overflow: hidden; }
.cmp-thumb canvas { width: 100%; height: auto; display: block; }
.cmp-thumb .tb { color: var(--ink); border-color: #c9c4b8; }
.cmp-wait { color: #6b665c; animation: cmp-pulse 1.2s ease-in-out infinite; }
@keyframes cmp-pulse { 50% { opacity: 0.45; } }
.cmp-err { color: var(--warn); padding: 8px; font-size: 13px; }
.cmp-foot { font-size: 12.5px; color: #6b665c; }
.cmp-hint { font-size: 12.5px; color: #8a8478; margin-top: 8px; }