/* A camera on a physical wall. The scene and lamp are separate composited layers. */
.ag-board {
  --ag-paper: #dfd3ba;
  --ag-brass: #c7a877;
  --ag-line: #655e50;
  --ag-ink: #241f1a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #48483f;
  border-radius: 9px;
  background: #171a18;
  color: #f1e6d5;
  font:
    500 0.9375rem/1.45 Manrope,
    'Segoe UI',
    sans-serif;
}
.ag-board *,
.ag-board *::before,
.ag-board *::after {
  box-sizing: border-box;
}
.ag-board [hidden] {
  display: none !important;
}
.ag-board button,
.ag-board select,
.ag-board input {
  font: inherit;
}
.ag-board button {
  cursor: pointer;
}
.ag-board button:disabled {
  cursor: default;
}
.ag-board :focus-visible {
  outline: 3px solid #ffd98c;
  outline-offset: 3px;
}
.ag-board .ag-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.85rem;
  border: 1px solid #665d4e;
  border-radius: 5px;
  color: #f0e5ce;
  background: #302f29;
  font-size: 0.85rem;
  line-height: 1.2;
}
.ag-board .ag-action[aria-pressed='true'] {
  background: #ede0c3;
  color: #302a20;
  border-color: #ede0c3;
}
.ag-board .ag-action:hover {
  border-color: #dec18f;
}
.ag-viewport {
  width: 100%;
  height: clamp(350px, 65dvh, 840px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  background: #332c24;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.ag-viewport:focus-visible {
  outline-offset: -4px;
}
.ag-viewport.ag-dragging,
.ag-viewport.ag-dragging * {
  cursor: grabbing;
}
.ag-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background-color: #4a4438;
  background-size: 1350px auto;
  will-change: transform;
}
.ag-world::before {
  content: '';
  inset: 0;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(130deg, #26202108, #1d1b2329 74%, #1c171122);
}
.ag-exhibits,
.ag-cords,
.ag-pins,
.ag-actors {
  position: absolute;
  inset: 0;
}
.ag-exhibits {
  z-index: 1;
  pointer-events: none;
}
.ag-cord-targets {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.ag-cord-targets path {
  fill: none;
  stroke: transparent;
  stroke-width: 24px;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
  cursor: pointer;
}
.ag-cords {
  z-index: 2;
  overflow: visible;
  pointer-events: none;
}
.ag-pins {
  z-index: 3;
  pointer-events: none;
}
.ag-actors {
  z-index: 6;
  pointer-events: none;
  transform-origin: 0 0;
}
.ag-lamp {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.ag-lamp.ag-steady {
  background: linear-gradient(125deg, #17150f15, #17160f2c 70%, #12120f46);
}
.ag-evidence {
  appearance: none;
  pointer-events: auto;
  position: absolute;
  display: block;
  padding: 0 !important;
  overflow: visible;
  text-align: left;
  border: 0 !important;
  border-radius: 1px !important;
  background: #dccbb1 !important;
  color: #302b24 !important;
  box-shadow:
    1px 2px 0 #604737,
    3px 6px 4px #140f0bb3,
    7px 13px 20px #17100980;
  font-family: Georgia, 'Times New Roman', serif !important;
}
.ag-evidence::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid #544d382f;
  background: linear-gradient(115deg, #fff5dc26, transparent 53%, #7a5b3320);
}
.ag-evidence:focus-visible {
  outline-width: 4px;
  outline-offset: 7px;
}
.ag-evidence:not(.ag-has-image) .ag-sleeve {
  position: absolute;
  inset: 9px 9px 58px;
  background-color: #b2a58e;
}
.ag-evidence .ag-index,
.ag-evidence .ag-caption,
.ag-evidence .ag-card-status {
  position: absolute;
  z-index: 1;
  display: block;
}
.ag-index {
  top: 15px;
  left: 15px;
  padding: 2px 6px;
  color: #312b22;
  background: #ece3cd;
  font:
    700 13px/1.2 'Courier New',
    monospace;
  letter-spacing: 0.06em;
}
.ag-caption {
  bottom: 0;
  left: 8px;
  right: 8px;
  background: #ddceb5;
  padding: 4px 8px 10px;
}
.ag-type {
  display: block;
  margin-bottom: 4px;
  font:
    700 11px/1.15 'Courier New',
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ag-card-title {
  display: block;
  color: #2d2820;
  font-size: 21px;
  line-height: 1.03;
  overflow-wrap: anywhere;
}
.ag-card-status {
  left: 8px;
  bottom: -15px;
  max-width: 95%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #233329;
  color: #fff6da;
  font:
    600 14px/1.3 Manrope,
    sans-serif;
  box-shadow: 1px 2px 2px #0006;
}
.ag-card-status:not(:empty) {
  padding: 3px 7px;
  border: 1px solid #6d775f;
}
.ag-held .ag-card-status {
  background: #50362a;
  color: #ffe8c0;
  border-color: #ae8e69;
}
.ag-held .ag-card-status::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-inline-end: 4px;
  vertical-align: middle;
  background: var(--owner-prop) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px #100d09b2);
}
.ag-evidence-document:not(.ag-has-image) .ag-sleeve {
  background:
    linear-gradient(110deg, #a685542a, transparent 24%, #ffefce4d 58%, transparent 82%),
    linear-gradient(180deg, transparent 47%, #9d80552b 48%, #faefd943 49%, transparent 50%), #d9c8a9;
  border: 1px solid #aa927661;
}
.ag-evidence-document:not(.ag-has-image) .ag-sleeve::before {
  content: '';
  position: absolute;
  left: 19px;
  right: 18%;
  top: 29%;
  height: 44%;
  background: repeating-linear-gradient(0deg, transparent 0 8px, #735f4a66 8px 9px, transparent 9px 12px);
  clip-path: polygon(
    0 0,
    66% 0,
    66% 22%,
    94% 22%,
    94% 42%,
    81% 42%,
    81% 62%,
    100% 62%,
    100% 83%,
    46% 83%,
    46% 100%,
    0 100%
  );
}
.ag-evidence-document:not(.ag-has-image) .ag-sleeve::after {
  content: '';
  position: absolute;
  right: 10%;
  bottom: 11%;
  width: 35px;
  height: 10px;
  border: 1px solid #a34f3377;
  transform: rotate(-5deg);
}
.ag-evidence-trace:not(.ag-has-image) .ag-sleeve {
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, #8f9c872e 13px 14px),
    repeating-linear-gradient(90deg, transparent 0 13px, #8f9c872e 13px 14px), #52605b;
  border: 5px solid #c6b99b;
}
.ag-evidence-slip:not(.ag-has-image) .ag-sleeve {
  background: repeating-linear-gradient(0deg, transparent 0 11px, #65594651 11px 12px), #ded1af;
  padding: 32px 12px 8px;
  background-clip: content-box;
  border-bottom: 2px dotted #ad997b;
}
.ag-evidence-photo:not(.ag-has-image) .ag-sleeve {
  background:
    radial-gradient(ellipse at 59% 36%, #7c7c6c, transparent 28%),
    linear-gradient(132deg, #424941 18%, #26332e 46%, #121b1b 68%, #4c4b40);
  border: 3px solid #c5b8a1;
}
.ag-evidence-photo:not(.ag-has-image) .ag-sleeve::after {
  content: '';
  position: absolute;
  inset: 9px;
  border: 1px solid #dbd2b64f;
}
.ag-evidence-tape:not(.ag-has-image) .ag-sleeve {
  border: 7px solid #373a32;
  border-radius: 7px;
  background:
    radial-gradient(
      circle at 28% 56%,
      #292b25 0 9px,
      #c7bf9f 10px 14px,
      #746e59 15px 20px,
      transparent 21px
    ),
    radial-gradient(
      circle at 72% 56%,
      #292b25 0 9px,
      #c7bf9f 10px 14px,
      #746e59 15px 20px,
      transparent 21px
    ),
    linear-gradient(180deg, #5a594c 8%, #bba988 9%, #cbbaa0 39%, #353a34 40% 76%, #777665 77%);
}
.ag-evidence.ag-has-image .ag-sleeve {
  position: absolute;
  inset: 8px 8px 61px;
  background: #33332c center/cover no-repeat;
}
.ag-presence {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transition: transform 0.2s linear;
}
.ag-presence::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: var(--ag-lead);
  border-left: 1px dashed #d6d2afbd;
}
.ag-presence::after {
  content: '';
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #efe4b9;
  box-shadow: 0 0 0 2px #2e3c32aa;
}
.ag-presence details {
  position: absolute;
  bottom: var(--ag-lead);
  left: 0;
  transform: translateX(-50%);
  pointer-events: auto;
}
.ag-presence details[open] {
  z-index: 2;
}
.ag-presence summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  width: max-content;
  padding: 5px 7px;
  color: #f8f0d8;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-shadow: 0 1px 3px #10100d, 0 0 8px #14120f, 0 0 14px #18150e;
  cursor: pointer;
  list-style: none;
}
.ag-presence summary::-webkit-details-marker {
  display: none;
}
.ag-presence summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-inline: 2px;
  border-inline-end: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.ag-presence summary:dir(rtl)::after {
  transform: rotate(-45deg) translateY(-2px);
}
.ag-presence ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 100%;
  width: max-content;
  max-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: none;
  background: #181611ed;
  box-shadow: 0 0 12px 4px #181611b5;
  color: #f1ead7;
}
.ag-presence li,
.ag-actor {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.ag-presence li {
  padding: 3px 5px;
}
.ag-actor img,
.ag-presence li img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 1px #0d0b08) drop-shadow(0 3px 5px #130e0a9c);
  flex: none;
}
.ag-actor:not(:only-child) img,
.ag-presence li img {
  width: 32px;
  height: 32px;
}
@media (prefers-reduced-motion: no-preference) {
  [data-effects='on'] .ag-actor img {
    transition: transform 140ms ease-out, filter 140ms ease-out;
  }
  [data-effects='on'] .ag-presence details[open] .ag-actor img,
  [data-effects='on'] .ag-presence summary:focus-visible .ag-actor img {
    transform: translateY(-2px);
    filter: drop-shadow(1px 4px 2px #0d0b08) drop-shadow(1px 5px 6px #130e0aa8);
  }
}
.ag-presence bdi {
  display: block;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font:
    700 14px/1.3 Manrope,
    ArchiveArabic,
    sans-serif;
}
@media (any-pointer: coarse) {
  .ag-presence summary {
    min-height: 56px;
  }
}
.ag-queue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  background: #353026;
  color: #f4e4c7;
  border-top: 1px solid #6c5b41;
}
.ag-queue span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ag-queue button {
  flex: none;
}
.ag-reader {
  color-scheme: dark;
  width: min(910px, calc(100% - 32px));
  max-height: min(90dvh, 960px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: auto;
  padding: 0;
  color: #f1e7d5;
  background: #292824;
  border: 1px solid #7b6d57;
  border-radius: 8px;
  box-shadow: 0 24px 80px #000a;
  font:
    500 1rem/1.5 Manrope,
    'Segoe UI',
    sans-serif;
}
.ag-reader::backdrop {
  background: #0b0d11b8;
}
.ag-reader:open {
  animation: ag-reader-in 160ms ease-out;
}
@keyframes ag-reader-in {
  from {
    opacity: 0.1;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.ag-reader-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.45rem clamp(0.75rem, 3vw, 1.5rem);
  background: #282a25;
  border-bottom: 1px solid #655c4e;
}
.ag-reader-id,
.ag-reader-clock {
  font:
    700 0.85rem/1.3 'Courier New',
    monospace;
  letter-spacing: 0.06em;
  color: #e6ce9e;
}
.ag-reader-clock {
  margin-inline-start: auto;
}
.ag-reader-paper {
  padding: clamp(1rem, 4vw, 2.5rem);
  background: #e6dac1;
  color: var(--ag-ink);
  color-scheme: light;
}
.ag-reader-paper h2 {
  margin: 0 0 0.35em;
  color: #302920;
  font:
    600 clamp(1.6rem, 4vw, 3.35rem)/1.05 Georgia,
    serif;
}
.ag-reader-paper h3 {
  margin: 1.35rem 0 0.4rem;
  font:
    700 0.9rem/1.4 Manrope,
    sans-serif;
  color: #493b2a;
}
.ag-reader-paper h4 {
  margin: 0 0 0.75rem;
  font:
    600 1.05rem/1.35 Georgia,
    serif;
}
.ag-reader-paper p {
  margin: 0.55em 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: inherit;
  max-width: 78ch;
}
.ag-reader-paper .ag-source {
  margin-bottom: 1.1rem;
  color: #5b4d3a;
  font-size: 0.9rem;
}
.ag-reader-paper .ag-media-status {
  padding: 0.65rem 0.8rem;
  border-inline-start: 3px solid #866748;
  color: #503f2b;
  background: #d7c9ac;
}
.ag-reader-paper .ag-action {
  color: #2e281f;
  background: #f4e9d0;
  border-color: #9a8769;
}
.ag-reader-paper :focus-visible {
  outline-color: #98492e;
}
.ag-reader-paper video,
.ag-reader-paper audio {
  max-width: 100%;
  width: 100%;
  display: block;
  margin: 1rem 0;
}
.ag-plate {
  display: grid;
  gap: 0.4rem;
  margin: 1rem 0;
  min-width: 0;
}
.ag-plate .ag-action {
  justify-self: start;
}
.ag-image-mat {
  width: 100%;
  overflow: auto;
  max-height: 45dvh;
  min-height: 96px;
  background: #3c3932;
  border: 1px solid #524739;
  overscroll-behavior: contain;
  text-align: center;
}
.ag-image-mat img {
  display: block;
  width: 100%;
  max-height: 44dvh;
  object-fit: contain;
  user-select: none;
}
.ag-image-mat.ag-enlarged img {
  width: 175%;
  max-width: none;
  max-height: none;
  object-fit: initial;
}
.ag-compare {
  margin-top: 1.5rem;
  border-top: 1px solid #9b8969;
}
.ag-compare summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 700;
  color: #443722;
}
.ag-field,
.ag-range {
  display: grid;
  gap: 0.25rem;
  color: #564532;
  font-size: 0.82rem;
  font-weight: 700;
}
.ag-field select {
  width: 100%;
  min-height: 44px;
  max-width: 100%;
  padding: 0.45rem;
  background: #f5ead1;
  border: 1px solid #8d7a5b;
  border-radius: 4px;
  color: #352f26;
}
.ag-comparison-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin: 0.9rem 0;
}
.ag-comparison-page {
  min-width: 0;
  padding: 0.8rem;
  background: #d7c9af;
  border: 1px solid #b6a587;
}
.ag-comparison-page .ag-image-mat {
  min-height: 65px;
}
.ag-comparison-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.ag-image-stack {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #393830;
  border: 1px solid #5c5142;
}
.ag-image-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ag-image-stack img + img {
  transform: translate(var(--ag-dx, 0), var(--ag-dy, 0));
}
.ag-range {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(8rem, 35%) 1fr;
  min-height: 44px;
}
.ag-range input {
  width: 100%;
  accent-color: #82593f;
}
.ag-cue {
  display: flex;
  align-items: start;
  gap: 0.7rem;
  padding: 0.45rem 0;
  border-top: 1px solid #cab99d;
}
.ag-cue .ag-action {
  flex: none;
}
.ag-cue p {
  margin: 0.25rem 0;
}
@media (max-width: 600px) {
  .ag-viewport {
    height: clamp(370px, 62dvh, 625px);
  }
  .ag-reader {
    width: calc(100% - 12px);
    max-height: 94dvh;
  }
  .ag-reader-paper {
    padding: 1rem;
  }
  .ag-reader-bar .ag-action {
    font-size: 0.79rem;
  }
  .ag-queue {
    font-size: 0.83rem;
  }
  .ag-comparison-pair {
    grid-template-columns: 1fr;
  }
}
@media (max-height: 540px) and (orientation: landscape) {
  .ag-viewport {
    height: 64dvh;
    min-height: 230px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ag-reader:open {
    animation: none;
  }
  .ag-presence {
    transition: none;
  }
}
html[data-effects='off'] .ag-reader:open {
  animation: none;
}
html[data-effects='off'] .ag-presence {
  transition: none;
}