/* Layout: one board-coordinate world (1040 units wide) scaled to the viewport width; text board, machine parts and gears
   sit in it; the cat is drawn on a fixed overlay canvas. */
:root {
  --sand: #DCD2B6; --pos: #2E7342; --neg: #B5361C; --shade: rgba(70, 56, 36, .22);
  --mono: "Plex Ground", "DejaVu Sans Mono", Menlo, Consolas, monospace; color-scheme: light;
}
#world { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 10240); overflow: hidden; background: var(--sand); }
#board { position: absolute; left: 0; top: 0; margin: 0; white-space: pre; font-family: var(--mono); font-weight: 700;
  font-size: calc(var(--u) * 6.66667); line-height: calc(var(--u) * 8); letter-spacing: 0; color: var(--neg);
  user-select: none; pointer-events: none; }
#board b { font-weight: 700; } #board .p { color: var(--pos); } #board .n { color: var(--neg); }
.bg { position: absolute; left: 0; width: 100%; pointer-events: none; user-select: none; z-index: 1; }
.part { position: absolute; height: auto; pointer-events: none; user-select: none;
  filter: drop-shadow(calc(var(--u) * 7) calc(var(--u) * 11) calc(var(--u) * 6) var(--shade)); }
.part.dev { filter: drop-shadow(calc(var(--u) * 13) calc(var(--u) * 20) calc(var(--u) * 10) rgba(70, 56, 36, .3)); }
.g { position: absolute; transform: translate(-50%, -50%); pointer-events: none; --a: 0rad; }
.g img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scaleY(.94) rotate(var(--a)); will-change: transform; user-select: none; }
.g .sh { left: calc(var(--u) * 6); top: calc(var(--u) * 9); filter: brightness(0) blur(calc(var(--u) * 3)); opacity: .22; }
.g .sd { top: calc(var(--u) * var(--t)); filter: brightness(.7); }
.dv { position: absolute; pointer-events: none; z-index: 90; }
#cat { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; pointer-events: none; z-index: 100; }