@import "./source/guided-capture-live-demo.module.css";

:root {
  --halo-dark-rule: rgba(255,255,255,.13);
  --halo-dark-ink: #f7f5f0;
  --halo-dark-muted: rgba(247,245,240,.58);
  --halo-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-8: 32px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; overflow: hidden; background: #090d14; }
button { font: inherit; }
.demo { display: grid; grid-template-rows: 42px minmax(0,1fr) 44px; width: 100%; min-height: 100vh; border: 0; background: radial-gradient(circle at 50% 45%, #22324a 0, #101824 42%, #080d15 82%); }
.stageHeader { min-height: 42px; padding: 0 14px; font-size: 10px; }
.stageBody { min-height: 0; height: 100%; padding: 10px; }
.captureViewport { width: auto; max-width: min(100%,393px); height: min(852px, calc(100vh - 106px)); max-height: 852px; }
.captureArtboard { transform-origin: left top; }
.viewfinderCameraPlate img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.lastPhotoImage { width: 100%; height: 100%; object-fit: cover; }
.captureBrandMark { width: 83px; }
.standaloneControls { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--halo-dark-rule); padding: 7px 14px; color: var(--halo-dark-muted); font: 600 9px var(--halo-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.standaloneControls > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standaloneControls div { display: flex; gap: 6px; }
.standaloneControls button { border: 1px solid var(--halo-dark-rule); background: rgba(255,255,255,.05); color: var(--halo-dark-ink); padding: 5px 8px; cursor: pointer; }
.standaloneControls button:focus-visible { outline: 2px solid #f13aad; outline-offset: 2px; }
.demo.is-paused *, .demo.is-paused *::before, .demo.is-paused *::after { animation-play-state: paused !important; }

@media (max-width: 520px) {
  .demo { grid-template-rows: 38px minmax(0,1fr) 40px; }
  .stageHeader { min-height: 38px; }
  .stageStatus, .standaloneControls > span { display: none; }
  .standaloneControls { justify-content: flex-end; }
  .captureViewport { height: min(852px, calc(100vh - 98px)); max-width: 100%; }
}