:root {
  color-scheme: light;
  --paper: #f3efe5;
  --ink: #39342d;
  --muted: #777065;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23948b76' filter='url(%23n)' opacity='.45' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
main {
  position: relative;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 18px;
  background: radial-gradient(ellipse at 50% 50%, #faf7ee 0%, transparent 65%);
}
.specimen {
  position: relative;
  margin: 0;
  width: min(100%, 600px, calc(100svh - 160px));
  text-align: center;
  /* The engraving is drawn 7.5 units above the 470-unit study center. */
  transform: translateY(1.595745%);
}
.plate-number {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  font-size: 18px;
  letter-spacing: .06em;
  font-variant: small-caps;
}
.plate-number span { width: 23px; height: 1px; background: #afa796; opacity: .5; }
.study { position: relative; width: 100%; aspect-ratio: 600 / 470; margin: 0; }
canvas {
  --canvas-pad-x: 0%;
  --canvas-pad-y: 0%;
  position: absolute;
  left: calc(0% - var(--canvas-pad-x));
  top: calc(0% - var(--canvas-pad-y));
  width: calc(100% + var(--canvas-pad-x) + var(--canvas-pad-x));
  height: calc(100% + var(--canvas-pad-y) + var(--canvas-pad-y));
  display: block;
  touch-action: pan-y;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.specimen:has(canvas:focus-visible) .plate-number { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; }
canvas.is-inspecting { cursor: none; }
.loading { position: absolute; top: 45%; width: 100%; margin: 0; color: var(--muted); font-size: 13px; font-style: italic; pointer-events: none; }
.loading[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.no-script { text-align: center; font-size: 14px; }
.contact-links {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.contact-link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #655b4d;
  text-decoration: none;
  outline-offset: 2px;
}
.contact-icon { display: block; width: 28px; height: 28px; }
.contact-link:focus-visible { outline: 1px solid #8f826b; }
@media (hover: none) and (pointer: coarse) {
  canvas { touch-action: none; }
}
@media (max-width: 480px) {
  main { padding: 0 14px; }
  .plate-number { font-size: 16px; bottom: calc(100% + 16px); }
}