/* Preserve the artwork orientation and fit inside the live safe viewport. */
:root { color-scheme: dark; background: #1f1f1f; --viewport-height: 100vh; }
@supports (height: 100svh) { :root { --viewport-height: 100svh; } }
@supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body {
  --available-height: calc(var(--viewport-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  --available-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  position: relative;
  height: var(--viewport-height);
  background: #1f1f1f;
}
.page {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + var(--available-width) / 2);
  top: calc(env(safe-area-inset-top, 0px) + var(--available-height) / 2);
  width: min(var(--available-width), calc(var(--available-height) * 375 / 812));
  margin: 0;
  transform: translate(-50%, -50%);
  transform-origin: center;
}
.landscape .page { width: min(var(--available-width), calc(var(--available-height) * 812 / 375)); }
@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .landscape .page {
    width: min(var(--available-height), calc(var(--available-width) * 812 / 375));
    transform: translate(-50%, -50%) rotate(90deg);
  }
}
@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  body:not(.landscape) .page {
    width: min(var(--available-height), calc(var(--available-width) * 375 / 812));
    transform: translate(-50%, -50%) rotate(-90deg);
  }
}
.design { display: block; width: 100%; height: auto; user-select: none; }
.hotspot { position: absolute; display: block; border-radius: 2px; -webkit-tap-highlight-color: rgba(167,139,107,.2); }
.hotspot:focus-visible { outline: 2px solid #a78b6b; outline-offset: 3px; background: rgba(167,139,107,.12); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media print { html, body { height: auto; overflow: visible; } .page, .landscape .page, body:not(.landscape) .page { position: static; width: 100%; transform: none; } .hotspot { display: none; } }