@font-face {
  font-family: 'Anton';
  src: url('./assets/fonts/anton-latin-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; background: #05090c; }
@font-face {
  font-family: 'Space Grotesk';
  src: url('./assets/fonts/space-grotesk-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  background:
    radial-gradient(ellipse at 51% 46%, rgba(24, 43, 47, .62), transparent 62%),
    radial-gradient(ellipse at 70% 85%, rgba(7, 19, 27, .42), transparent 70%),
    #05090c;
}
#viewer { position: relative; width: 100%; height: 100%; touch-action: manipulation; }
#viewer::after { content: ''; position: absolute; inset: 0; z-index: 2; background: url('./assets/noise.png') repeat; opacity: .008; pointer-events: none; }
canvas { display: block; width: 100%; height: 100%; cursor: default; outline: none; touch-action: manipulation; opacity: 0; pointer-events: none; transition: opacity .45s ease; }
.ready canvas { opacity: 1; pointer-events: auto; }
.wordmark, .tagline {
  /* Accessible text; visible typography is part of the GPU composite. */
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  pointer-events: none;
}
.inspection .wordmark, .capture .wordmark,
.inspection .tagline, .capture .tagline { display: none; }
.fallback { display: none; position: absolute; inset: 0; margin: auto; width: min(98vw, 98svh); height: min(98vw, 98svh); object-fit: contain; pointer-events: none; }
.failed .fallback { display: block; opacity: .16; }
.ready#viewer::after { display: none; }
.loader { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; color: #c6d4d7; font: 12px/1.5 system-ui, sans-serif; opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.loader-track { position: relative; display: block; width: 42px; height: 42px; border: 1px solid rgba(174, 203, 208, .12); border-radius: 50%; }
.loader-track::before { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(transparent 100deg, rgba(116, 164, 179, .18) 205deg, #91bbc8 275deg, #edf5f4 340deg, transparent 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); animation: loading-turn 1.4s linear infinite; }
.loader-message { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.loader-retry { border: 1px solid #536166; border-radius: 4px; padding: 8px 18px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.loader-retry:hover, .loader-retry:focus-visible { border-color: #d6e4e5; outline: none; }
.ready .loader { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s linear .35s; }
.ready .loader-track::before { animation-play-state: paused; }
.failed .loader-track { display: none; }
.failed .loader-message { position: static; width: auto; height: auto; overflow: visible; clip-path: none; text-align: center; padding: 0 24px; }
@keyframes loading-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loader-track::before { animation: none; transform: none; opacity: .65; }
  canvas, .loader, .ready .loader { transition: none; }
}
html.capture, .capture body { background: transparent; }
.capture #viewer::after { display: none; }
.capture canvas, .capture .loader, .capture .ready .loader { transition: none; }