@font-face {
  font-family: FilmpakRing;
  src: url('assets/CarbonOT-Thin.otf') format('opentype');
  font-display: swap;
}
.focal-ring { container-type: inline-size; width: 100%; background: #000; color: #a6a6a6; }
.focal-ring-window { position: relative; height: 14.545455cqw; overflow: hidden; }
.focal-ring-rail { position: absolute; left: 50%; top: 0; width: 29.545455%; height: 100%; }
.focal-ring-rail span {
  position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  font: 4.545455cqw / 1 FilmpakRing, monospace; letter-spacing: .340909cqw;
}
.focal-ring-rail span:nth-child(2) { left: 100%; }
.focal-ring-rail span:nth-child(3) { left: 200%; }
.focal-ring-rail .selected { color: #f0bf40; }
.focal-ring-marker {
  position: absolute; left: 50%; top: 9.772727cqw; transform: translateX(-50%);
  width: .227273cqw; height: .909091cqw; border-radius: .113636cqw; background: #f0bf40;
}
.focal-ring-toggle {
  display: block; margin: 8px auto 0; padding: 12px 20px; border: 0; background: transparent;
  color: #aaa; font: inherit; font-size: 12px; cursor: pointer;
}
.focal-ring-toggle:hover { color: #ecc542; }
.focal-ring-toggle:focus-visible { outline: 2px solid #ecc542; outline-offset: -2px; }

/* Screenshot composition shared by the standalone and interactive demos. */
.demo-device { position: relative; width: min(100%, 490px); aspect-ratio: 1470 / 3000; margin: 0 auto 64px; }
/* Supplied frame: the 1320 × 2868px display begins at (75, 66).
   Underlap the bezel so its continuous inner edge defines the visible corners. */
.demo-camera { position: absolute; container-type: inline-size; left: 5.102041%; top: 2.2%; width: 89.795918%; aspect-ratio: 440 / 956; background: #000; border-radius: 10% / 4.60251%; }
.demo-chrome { border-radius: inherit; }
.demo-bezel { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.demo-chrome { display: block; width: 100%; height: 100%; }
/* Native full-width 3:4 viewfinder, vertically centred in a 440 × 956pt screen. */
.demo-viewfinder { position: absolute; inset: 19.316597% 0 auto; height: 61.366806%; overflow: hidden; border-radius: 3.181818cqw; background: #000; }
.demo-photo { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.demo-camera .focal-ring { position: absolute; top: 79.428173%; background: transparent; }
.demo-camera .focal-ring-window { background: linear-gradient(transparent 0 2.727273cqw, #000 2.727273cqw); }
.demo-camera .focal-ring-toggle { position: absolute; top: calc(44.69697cqw + 12px); left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0; }

.focal-image .demo-device { margin-bottom: 0; }