*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  background: url(/assets/img/background.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@font-face {
  font-family: 'hacked';
  src: url(/assets/fonts/hacked.ttf);
  font-display: swap;
}

.font-hacked {
  font-family: var(--font-display);
}

:root {
  --color-brand: #e30614;
  --color-brand-hover: #c50512;
  --color-action: #77c143;
  --color-action-hover: #8bd45a;
  --color-success: #77c143;
  --color-success-hover: #8bd45a;
  --color-selection-pending: #f5c542;
  --color-error: #ed1b23;
  --color-error-surface: rgba(24, 5, 8, 0.94);
  --color-warning: #a85b08;
  --color-text-primary: #111827;
  --color-text-on-color: #ffffff;
  --color-text-on-action: #111827;
  --color-text-muted: rgba(255, 255, 255, 0.78);
  --color-surface: #ffffff;
  --color-surface-hover: #f3f4f6;
  --color-panel: rgba(10, 10, 10, 0.78);
  --color-panel-border: rgba(255, 255, 255, 0.16);
  --color-loading-surface: rgba(255, 255, 255, 0.6);
  --color-camera-flash: rgba(255, 255, 255, 0.85);
  --color-border-on-dark: rgba(255, 255, 255, 0.7);
  --color-scrim: rgba(0, 0, 0, 0.6);
  --color-focus: #ffffff;
  --shadow-panel: 0 1rem 2.5rem rgba(0, 0, 0, 0.32);
  --shadow-control: 0 0.4rem 1rem rgba(0, 0, 0, 0.28);
  --shadow-button: 0 0.45rem 1.1rem rgba(0, 0, 0, 0.22);
  --radius-small: 0.5rem;
  --radius-medium: 0.75rem;
  --radius-large: 1rem;
  --radius-round: 999px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --control-size: clamp(3rem, 12vw, 3.5rem);
  --transition-fast: 140ms ease;
  --font-body: 'Roboto', Arial, Helvetica, sans-serif;
  --font-display: 'hacked', 'Roboto', Arial, Helvetica, sans-serif;
  --type-caption: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem);
  --type-body: clamp(1rem, 0.3vw + 0.925rem, 1.125rem);
  --type-emphasis: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
  --type-action: clamp(1.125rem, 0.8vw + 0.95rem, 1.5rem);
  --type-number: clamp(2rem, 10vw, 3rem);
  --type-title: clamp(1.75rem, min(9.5vw, 7vh), 4rem);
  --type-status: clamp(1.75rem, 5vw, 3rem);
  --type-countdown: clamp(7rem, 40vw, 18rem);
  --page-inline-space: clamp(var(--space-4), 5vw, var(--space-7));
  --screen-gap: clamp(var(--space-2), 1.5vh, var(--space-3));
  --content-gap: clamp(var(--space-2), 2vh, var(--space-4));
}

@supports (height: 100dvh) {
  :root {
    --type-title: clamp(1.75rem, min(9.5vw, 7dvh), 4rem);
    --screen-gap: clamp(var(--space-2), 1.5dvh, var(--space-3));
    --content-gap: clamp(var(--space-2), 2dvh, var(--space-4));
  }
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100dvh;
}

.app-loading {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  font-size: var(--type-status);
  font-weight: 700;
  line-height: 1.2;
  background: var(--color-loading-surface);
  color: var(--color-text-primary);
  backdrop-filter: blur(6px);
}

.app-logo-wrap {
  min-height: 0;
  padding: max(0.5rem, env(safe-area-inset-top)) var(--page-inline-space) var(--screen-gap);
}

.app-logo {
  display: block;
  width: auto;
  max-width: min(100%, 595px);
  height: auto;
  max-height: min(7.5rem, 10vh);
  max-height: min(7.5rem, 10dvh);
}

.app-content {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-inline: var(--page-inline-space);
}

.system-error-page {
  justify-content: center;
}

.blocking-error-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  width: min(100%, 36rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 2px solid var(--color-error);
  border-radius: var(--radius-large);
  background: var(--color-error-surface);
  color: var(--color-text-on-color);
  text-align: center;
  box-shadow: var(--shadow-panel);
}

.blocking-error-panel p {
  max-width: 30rem;
  margin: 0;
  font-size: var(--type-emphasis);
  font-weight: 700;
}

.blocking-error-icon {
  width: clamp(4.5rem, 18vw, 6.5rem);
  height: clamp(4.5rem, 18vw, 6.5rem);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--color-error);
  border-radius: var(--radius-round);
  color: var(--color-error);
  font-size: clamp(2rem, 8vw, 3.25rem);
}

.screen-heading {
  flex: 0 0 auto;
  width: calc(100% - 1rem);
  max-width: 680px;
  margin: 0.35rem auto calc(var(--screen-gap) + 0.35rem);
  padding: clamp(0.35rem, 1.5vh, 0.75rem);
  padding: clamp(0.35rem, 1.5dvh, 0.75rem);
  background: var(--color-brand);
  color: var(--color-text-on-color);
  border-radius: var(--radius-small);
  box-shadow: var(--shadow-button);
  transform: rotate(-1.5deg);
  transform-origin: center;
}

.screen-heading h1 {
  font-size: var(--type-title);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 0.95;
}

.group-size-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 3vw, 0.9rem);
  width: min(100%, 18rem, calc((100vh - 11rem) / 2));
  width: min(100%, 18rem, calc((100dvh - 11rem) / 2));
  margin: auto;
  color: var(--color-text-on-color);
}

.group-size-button {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  font-family: var(--font-body);
  font-size: var(--type-number);
  line-height: 1;
  background: var(--color-brand);
  color: var(--color-text-on-color);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-button);
}

.screen-panel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--screen-gap);
  padding: clamp(var(--space-3), 2vw, var(--space-5));
}

.start-panel,
.camera-panel,
.qr-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.start-panel {
  align-items: center;
  gap: var(--content-gap);
}

.service-status-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--content-gap);
  width: min(100%, 28rem);
  margin: auto;
  padding: clamp(1rem, 4vw, 2rem);
  border: 2px solid var(--color-warning);
  border-radius: var(--radius-medium);
  background: var(--color-panel);
  color: var(--color-text-on-color);
  font-size: var(--type-emphasis);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow-panel);
}

.service-status-panel > i {
  color: #ffb04a;
  font-size: var(--type-status);
}

.service-status-panel.has-error {
  border-color: var(--color-error);
}

.service-status-panel.has-error > i {
  color: var(--color-error);
}

.service-retry-button {
  min-height: 3rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-medium);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 700;
  box-shadow: var(--shadow-button);
  cursor: pointer;
}

@media (max-width: 767px) and (orientation: portrait) {
  .start-panel {
    justify-content: flex-start;
    padding-top: clamp(1.25rem, 3vh, 1.75rem);
    padding-top: clamp(1.25rem, 3dvh, 1.75rem);
  }

  .start-panel .group-size-grid {
    width: min(100%, 18rem, calc((100vh - 13rem) / 2));
    width: min(100%, 18rem, calc((100dvh - 13rem) / 2));
    margin: 0 auto;
  }

  .camera-panel.has-captured-photo .camera-visual,
  .camera-panel.has-captured-photo .camera-message-slot {
    width: min(100%, max(6rem, calc(100vh - 25rem)));
    width: min(100%, max(6rem, calc(100dvh - 25rem)));
  }
}

.camera-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

.qr-panel {
  gap: var(--content-gap);
}

.camera-visual,
.camera-message-slot {
  flex: 0 0 auto;
  width: min(100%, max(6rem, calc(100vh - 23rem)));
  width: min(100%, max(6rem, calc(100dvh - 23rem)));
  margin-inline: auto;
}

.camera-visual {
  min-width: 0;
  min-height: 0;
}

#cam-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-medium);
  background: var(--color-scrim);
  box-shadow: var(--shadow-control);
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

#shutter {
  background: var(--color-camera-flash);
}

.capture-countdown {
  font-size: var(--type-countdown);
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand);
}

.camera-preloader {
  padding: 1rem;
  font-size: var(--type-status);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brand);
}

.face-count-message,
.app-error {
  font-size: var(--type-emphasis);
}

.face-count-message {
  width: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--content-gap);
  background: var(--color-brand);
  color: var(--color-text-on-color);
  border-radius: var(--radius-medium);
}

.camera-message-slot {
  display: flow-root;
  height: auto;
}

.screen-instruction {
  width: min(100%, 30rem);
  margin-inline: auto;
  color: var(--color-text-on-color);
  font-size: var(--type-emphasis);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.capture-button {
  width: clamp(4.75rem, 24vw, 6.25rem);
  height: clamp(4.75rem, 24vw, 6.25rem);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  border-radius: var(--radius-round);
  background: var(--color-brand);
  color: var(--color-text-on-color);
  box-shadow: var(--shadow-button);
}

.capture-button i {
  font-size: clamp(1.75rem, 8vw, 2.5rem);
}

.capture-button-ring {
  display: inline-flex;
  margin-inline: auto;
  padding: var(--space-1);
  border: 2px solid var(--color-border-on-dark);
  border-radius: var(--radius-round);
}

.capture-actions {
  flex: 0 0 auto;
  margin-top: var(--content-gap) !important;
}

.confirmation-actions {
  flex: 0 0 auto;
  margin-top: var(--content-gap) !important;
  margin-bottom: 0 !important;
}

.message-dismiss-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:
    max(1rem, env(safe-area-inset-top))
    max(var(--page-inline-space), env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom))
    max(var(--page-inline-space), env(safe-area-inset-left));
  background: var(--color-scrim);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.message-dismiss-layer:focus {
  outline: none;
}

.app-error {
  flex: 0 0 auto;
  width: min(100%, 32rem);
  margin: 0;
  padding: clamp(0.65rem, 2vh, 0.9rem) 1rem;
  padding: clamp(0.65rem, 2dvh, 0.9rem) 1rem;
  border: 2px solid var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border-radius: var(--radius-medium);
  background: var(--color-error-surface);
  color: var(--color-text-on-color);
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  box-shadow: var(--shadow-control);
}

.app-error i {
  flex: 0 0 auto;
  font-size: 1.25em;
  color: var(--color-error);
}

.error-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.error-copy strong {
  color: var(--color-text-on-color);
  font-size: 0.78em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.action-group {
  display: flex;
  justify-content: center;
  width: 100%;
}

.primary-action {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 28rem;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-medium);
  font-family: var(--font-body);
  font-size: var(--type-action);
  font-weight: 700;
  line-height: 1.2;
  background: var(--color-brand);
  color: var(--color-text-on-color);
  box-shadow: var(--shadow-button);
}

.primary-action i {
  flex: 0 0 auto;
}

.success-action {
  background: var(--color-action);
}

.success-actions {
  margin-top: var(--content-gap);
}

.success-icon {
  width: clamp(4.5rem, 20vw, 6.25rem);
  height: clamp(4.5rem, 20vw, 6.25rem);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--content-gap);
  border: 2px solid var(--color-border-on-dark);
  border-radius: var(--radius-round);
  background: var(--color-success);
  color: var(--color-text-on-action);
  box-shadow: var(--shadow-button);
}

.success-icon i,
.status-spinner {
  font-size: clamp(2rem, 8vw, 3rem);
}

.status-message {
  font-size: var(--type-status);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-on-color);
}

.status-detail {
  display: block;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--type-emphasis);
  font-weight: 700;
  line-height: 1.35;
  text-transform: none;
}

#qr-scanner {
  width: min(100%, 300px, max(6rem, calc(100vh - 18rem)));
  width: min(100%, 300px, max(6rem, calc(100dvh - 18rem)));
  height: auto;
  aspect-ratio: 1;
  margin-inline: auto;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--color-border-on-dark);
  border-radius: var(--radius-medium);
  background: var(--color-scrim);
  box-shadow: var(--shadow-control);
}

#qr-scanner .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--color-scrim);
}

#scanner-container {
  width: 100%;
  height: 100%;
  position: relative;
}

#scanner-container video {
  object-fit: cover;
}

#face-overlay.face-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.app-controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  width: min(100%, 1100px);
  gap: clamp(0.5rem, 2vw, 1rem);
  margin-inline: auto;
  padding: clamp(0.5rem, 1.5vh, 1rem) max(1rem, env(safe-area-inset-right))
    max(clamp(0.5rem, 1.5vh, 1rem), env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
  padding: clamp(0.5rem, 1.5dvh, 1rem) max(1rem, env(safe-area-inset-right))
    max(clamp(0.5rem, 1.5dvh, 1rem), env(safe-area-inset-bottom))
    max(1rem, env(safe-area-inset-left));
}

.back-control {
  grid-column: 1;
  justify-self: start;
}

.camera-status {
  grid-column: 2;
  justify-self: center;
  min-height: var(--control-size);
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-on-color);
  font-size: var(--type-caption);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.camera-status.is-ready {
  color: var(--color-action);
}

.camera-status.is-warning {
  color: var(--color-warning);
}

.swap-control {
  grid-column: 3;
  justify-self: end;
}

.control-button {
  width: var(--control-size);
  height: var(--control-size);
  min-width: var(--control-size);
  min-height: var(--control-size);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-round);
  padding: 0;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-control);
  cursor: pointer;
}

.control-body {
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  border-radius: inherit;
}

.control-button i {
  color: currentColor;
  font-size: 1.35rem;
}

.back-control {
  border-color: var(--color-panel-border);
  background: var(--color-surface);
  color: var(--color-brand);
}

button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

button:not(:disabled) {
  transition:
    transform var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

button:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}

button:disabled {
  cursor: not-allowed;
}

button:focus-visible,
[ng-click]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

@media (hover: hover) {
  .group-size-button:hover:not(:disabled),
  .capture-button:hover:not(:disabled) {
    background: var(--color-brand-hover);
    box-shadow: 0 0.65rem 1.35rem rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
  }

  .primary-action:hover:not(:disabled) {
    background: var(--color-brand-hover);
    transform: translateY(-1px);
  }

  .success-action:hover:not(:disabled) {
    background: var(--color-success-hover);
  }

  .control-button:hover:not(:disabled) {
    background: var(--color-surface-hover);
    transform: translateY(-1px);
  }

  .group-size-button:active:not(:disabled),
  .capture-button:active:not(:disabled),
  .primary-action:active:not(:disabled),
  .control-button:active:not(:disabled) {
    transform: translateY(1px) scale(0.98);
  }
}

@media (min-width: 768px) {
  :root {
    --type-title: clamp(3rem, 6vw, 4rem);
  }

  .app-logo-wrap {
    padding-inline: 3rem;
  }

  .app-content {
    padding-inline: 3rem;
  }

  .group-size-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(100%, 32rem);
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .camera-visual,
  .camera-message-slot {
    width: min(100%, max(8rem, calc(100vh - 31rem)));
    width: min(100%, max(8rem, calc(100dvh - 31rem)));
  }

  .camera-panel.has-captured-photo .camera-visual,
  .camera-panel.has-captured-photo .camera-message-slot {
    width: min(100%, max(8rem, calc(100vh - 32rem)));
    width: min(100%, max(8rem, calc(100dvh - 32rem)));
  }
}

@media (min-width: 1024px) and (min-height: 601px) {
  :root {
    --type-title: clamp(3rem, 4vw, 4rem);
    --page-inline-space: clamp(2rem, 5vw, 5rem);
    --screen-gap: clamp(0.75rem, 1.5vh, 1rem);
    --content-gap: clamp(0.75rem, 2vh, 1.25rem);
  }

  @supports (height: 100dvh) {
    :root {
      --screen-gap: clamp(0.75rem, 1.5dvh, 1rem);
      --content-gap: clamp(0.75rem, 2dvh, 1.25rem);
    }
  }

  .app-logo-wrap {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: 0.5rem;
  }

  .app-logo {
    max-width: min(40vw, 500px);
    max-height: clamp(4rem, 9vh, 6rem);
    max-height: clamp(4rem, 9dvh, 6rem);
  }

  .screen-heading {
    width: min(calc(100% - 2rem), 760px);
    max-width: 760px;
    margin-top: 0.5rem;
    margin-bottom: calc(var(--screen-gap) + 0.5rem);
    padding: 0.6rem 1.5rem;
    transform: rotate(-1deg);
  }

  .screen-panel {
    max-width: 1100px;
  }

  .start-panel,
  .status-screen {
    max-width: 760px;
  }

  .camera-panel {
    display: grid;
    grid-template-columns: minmax(20rem, 32rem) minmax(16rem, 24rem);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-content: center;
    align-items: center;
    justify-content: center;
  }

  .camera-visual {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    height: min(100%, 32rem);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    justify-self: center;
  }

  .camera-message-slot {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 32rem, max(18rem, calc(100vh - 19rem)));
    width: min(100%, 32rem, max(18rem, calc(100dvh - 19rem)));
  }

  .capture-actions,
  .confirmation-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-block: 0 !important;
  }

  .qr-panel {
    display: grid;
    grid-template-columns: minmax(20rem, 26rem) minmax(18rem, 26rem);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 5vw, 5rem);
    align-content: center;
    align-items: center;
    justify-content: center;
  }

  #qr-scanner {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: min(100%, 26rem, max(18rem, calc(100vh - 17rem)));
    width: min(100%, 26rem, max(18rem, calc(100dvh - 17rem)));
  }

  .screen-instruction {
    grid-column: 2;
    grid-row: 1;
  }

  .app-controls {
    padding-inline: var(--page-inline-space);
  }
}

@media (orientation: landscape) and (max-height: 600px) {
  :root {
    --type-caption: clamp(0.75rem, 3vh, 0.875rem);
    --type-emphasis: clamp(0.875rem, 3.5vh, 1rem);
    --type-action: clamp(1rem, 4vh, 1.35rem);
    --type-number: clamp(1.75rem, 9vh, 2.75rem);
    --type-title: clamp(1.5rem, 6.5vh, 2rem);
    --type-status: clamp(1.5rem, 7vh, 2.25rem);
    --screen-gap: 0.35rem;
    --content-gap: 0.5rem;
  }

  @supports (height: 100dvh) {
    :root {
      --type-caption: clamp(0.75rem, 3dvh, 0.875rem);
      --type-emphasis: clamp(0.875rem, 3.5dvh, 1rem);
      --type-action: clamp(1rem, 4dvh, 1.35rem);
      --type-number: clamp(1.75rem, 9dvh, 2.75rem);
      --type-title: clamp(1.5rem, 6.5dvh, 2rem);
      --type-status: clamp(1.5rem, 7dvh, 2.25rem);
    }
  }

  .app-logo-wrap {
    padding-top: max(0.35rem, env(safe-area-inset-top));
  }

  .app-logo {
    width: auto;
    max-width: min(42vw, 280px);
    max-height: clamp(2rem, 10vh, 3.25rem);
    max-height: clamp(2rem, 10dvh, 3.25rem);
  }

  .screen-heading {
    max-width: 520px;
    padding: 0.25rem;
    transform: rotate(-1deg);
  }

  .screen-panel {
    margin-bottom: 0.35rem;
    padding: var(--space-2);
    border-radius: var(--radius-medium);
  }

  .group-size-grid {
    flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.5rem, 2vh, 0.75rem);
    gap: clamp(0.5rem, 2dvh, 0.75rem);
    width: min(100%, 34rem, calc(200vh - 15rem));
    width: min(100%, 34rem, calc(200dvh - 15rem));
    margin: auto;
  }

  .group-size-button {
    min-width: 0;
  }

  .camera-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.7fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: var(--content-gap);
    align-items: center;
  }

  .camera-visual {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, max(8rem, calc(100vh - 13.5rem)));
    width: min(100%, max(8rem, calc(100dvh - 13.5rem)));
    height: auto;
  }

  .camera-message-slot {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, max(8rem, calc(100vh - 13.5rem)));
    width: min(100%, max(8rem, calc(100dvh - 13.5rem)));
    height: auto;
  }

  .face-count-message {
    padding: 0.5rem 0.75rem !important;
    line-height: 1.2;
  }

  .capture-actions,
  .confirmation-actions {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-block: 0 !important;
  }

  .qr-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 0.8fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
  }

  .screen-instruction {
    grid-column: 2;
    grid-row: 1;
  }

  #qr-scanner {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: min(100%, max(8rem, calc(100vh - 9rem)));
    width: min(100%, max(8rem, calc(100dvh - 9rem)));
  }

  .capture-button {
    width: 3.5rem;
    height: 3.5rem;
  }

  .capture-actions {
    margin-top: 0 !important;
  }

  .primary-action {
    min-height: 3rem;
    padding-block: 0.6rem;
  }

  .success-icon {
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--content-gap);
  }

  .app-controls {
    padding-top: 0.25rem;
  }
}

@media (min-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
  .camera-visual {
    width: auto;
    height: min(100%, 32rem);
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1;
    justify-self: center;
  }
}

@media (max-height: 480px) {
  :root {
    --type-title: clamp(1.25rem, 6vh, 1.75rem);
    --type-status: clamp(1.25rem, 6vh, 2rem);
    --screen-gap: 0.25rem;
    --content-gap: 0.4rem;
  }

  @supports (height: 100dvh) {
    :root {
      --type-title: clamp(1.25rem, 6dvh, 1.75rem);
      --type-status: clamp(1.25rem, 6dvh, 2rem);
    }
  }

  .app-logo-wrap {
    height: 0;
    padding: 0;
    overflow: hidden;
  }

  .app-content {
    padding-inline: clamp(0.5rem, 3vw, 1rem);
  }

  .screen-heading {
    margin-top: var(--space-1);
    margin-bottom: var(--space-2);
    padding-block: var(--space-1);
  }

  .screen-panel {
    margin-bottom: var(--space-1);
    padding: var(--space-1);
  }

  .blocking-error-panel,
  .service-status-panel {
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .blocking-error-icon,
  .success-icon {
    width: 3rem;
    height: 3rem;
  }

  .app-controls {
    padding-block: var(--space-1);
  }
}

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled) {
    transition: none;
  }

  button:hover:not(:disabled),
  button:active:not(:disabled) {
    transform: none;
  }
}