/* Pure CSS reconstruction. All artwork scales with the component width.
   Copy the .anpr markup from index.html and load this stylesheet. */
.anpr {
  --background: #063f34;
  --car: #7eae88;
  --mint: #adf5b4;
  --yellow: #fff0a0;
  --cyan: #a9e4e8;
  --ink: #073d34;
  width: 100%;
  aspect-ratio: 1942 / 809;
  container-type: inline-size;
  overflow: hidden;
  isolation: isolate;
}
.anpr *, .anpr *::before, .anpr *::after { box-sizing: border-box; }
.anpr__canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--cyan);
  font-family: "Courier New", monospace;
  font-weight: 700;
  background-color: var(--background);
  background-image:
    linear-gradient(#81b79b0b .06cqw, transparent .06cqw),
    linear-gradient(90deg, #81b79b0b .06cqw, transparent .06cqw),
    radial-gradient(ellipse at 50% 50%, #154e3e44, transparent 75%);
  background-size: 2.05cqw 2.05cqw, 2.05cqw 2.05cqw, 100% 100%;
}
.anpr__canvas > * { position: absolute; }
.anpr__heading, .anpr__tag, .anpr__footer { font-size: 1.44cqw; line-height: 1; white-space: nowrap; }
.anpr__heading { left: 2.4%; top: 5.6%; }
.anpr__tag { right: 2.2%; top: 5.6%; }
.anpr__footer { left: 2.2%; bottom: 5.4%; }
.anpr__road { left: 30.85%; width: 38.25%; height: 100%; border-inline: .23cqw solid #719d7e; }
.anpr__center-line { left: 49.84%; top: 2.3%; width: .31%; height: 100%; background: repeating-linear-gradient(to bottom, #8bb18d 0 2cqw, transparent 2cqw 3.1cqw); }
.anpr__roof { left: 37.2%; top: 25.9%; width: 25.6%; height: 21%; background: var(--car); clip-path: polygon(0 100%, 10% 30%, 14% 13%, 20% 3%, 25% 0, 75% 0, 80% 3%, 86% 13%, 90% 30%, 100% 100%); }
.anpr__windshield { left: 39%; top: 29.1%; width: 22%; height: 12.7%; background: var(--ink); clip-path: polygon(0 100%, 11% 25%, 16% 7%, 23% 0, 77% 0, 84% 7%, 89% 25%, 100% 100%); }
.anpr__body { left: 34.95%; top: 41.6%; width: 30.1%; height: 26%; border-radius: 5.1cqw 5.1cqw 2.6cqw 2.6cqw; background: linear-gradient(110deg, #82b38e, #7aaa84); }
.anpr__tire { top: 65%; width: 3.65%; height: 8.7%; border-radius: 0 0 .9cqw .9cqw; background: #709e79; }
.anpr__tire--left { left: 36.75%; }
.anpr__tire--right { right: 36.75%; }
.anpr__mirror { top: 36%; width: 3.4%; height: 5.1%; border-radius: .8cqw; background: var(--car); }
.anpr__mirror--left { left: 34.05%; }
.anpr__mirror--right { right: 34.05%; }
.anpr__mirror-arm { top: 40%; width: 2.5%; height: 1.5%; background: var(--car); }
.anpr__mirror-arm--left { left: 36%; transform: rotate(35deg); }
.anpr__mirror-arm--right { right: 36%; transform: rotate(-35deg); }
.anpr__headlight { top: 49.2%; width: 4.65%; height: 4.9%; border-radius: .65cqw; background: #d0edc9; }
.anpr__headlight--left { left: 37%; }
.anpr__headlight--right { right: 37%; }
.anpr__bumper { left: 37%; top: 61.5%; width: 26%; height: 2%; border-radius: 1cqw; background: #094b3c; }
.anpr__grille { left: 42.9%; top: 64.6%; width: 14.2%; height: 1.3%; border-radius: 1cqw; background: #094b3c; }
.anpr__plate { left: 42.9%; top: 53.1%; width: 14.3%; height: 9%; border: .42cqw solid #175544; border-radius: .9cqw .9cqw .4cqw .4cqw; background: #c6dbb5; display: flex; align-items: center; gap: .52cqw; padding: .2cqw .5cqw; color: var(--ink); }
.anpr__plate span { display: grid; place-items: center; height: 100%; border: .2cqw solid var(--yellow); font-size: 2.1cqw; line-height: 1; }
.anpr__code { width: 34%; }
.anpr__number { flex: 1; }
.anpr__detection { left: 32.75%; top: 22.2%; width: 34.5%; height: 53.1%; border: .22cqw solid var(--mint); }
.anpr__detection span { position: absolute; left: -.22cqw; bottom: 100%; padding: .65cqw .85cqw; background: var(--mint); color: #123d2e; font-size: 1.45cqw; line-height: 1; white-space: nowrap; }
.anpr__connector { top: 61.9%; height: 21.5%; border-bottom: .2cqw solid var(--yellow); }
.anpr__connector::before { content: ""; position: absolute; top: -.45cqw; width: .6cqw; height: .6cqw; background: var(--yellow); }
.anpr__connector--code { left: 37%; width: 9%; border-right: .2cqw solid var(--yellow); }
.anpr__connector--code::before { right: -.4cqw; }
.anpr__connector--number { left: 54%; width: 8.6%; border-left: .2cqw solid var(--yellow); }
.anpr__connector--number::before { left: -.4cqw; }
.anpr__node { top: 80.2%; height: 6.4%; display: grid; place-items: center; border: .19cqw solid var(--yellow); color: var(--yellow); background: var(--background); font-size: 1.45cqw; line-height: 1; white-space: nowrap; }
.anpr__node::after { content: ""; position: absolute; top: 43%; width: .55cqw; height: .55cqw; background: var(--yellow); }
.anpr__node--code { left: 27.1%; width: 10%; }
.anpr__node--code::after { right: -.4cqw; }
.anpr__node--number { left: 62.55%; width: 13.5%; }
.anpr__node--number::after { left: -.4cqw; }

/* Match the portfolio card corners while preserving the illustration proportions. */
.anpr { border-radius: 7px; }