:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  background: #101111;
  color: #f3f2ee;
  --ink: #101111;
  --paper: #f3f2ee;
  --muted: #acada6;
  --signal: #d4e894;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
button:disabled { opacity: .5; }
[hidden] { display: none !important; }
.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.intro { text-align: center; padding: 0 0 96px; }
.brand { width: 64px; height: 64px; border-radius: 16px; }
h1 { margin: 18px 0 9px; font-size: 45px; font-weight: 650; letter-spacing: -.05em; }
p { margin: 0; }
.intro > p:not(.result-number), .hint { color: var(--muted); line-height: 1.55; }
.bottom { z-index: 1; position: absolute; inset: auto 0 max(26px, env(safe-area-inset-bottom)) 0; margin: auto; width: min(calc(100% - 44px), 360px); text-align: center; }
.hint:not(:empty) { margin-bottom: 15px; }
.primary { width: 100%; padding: 14px; min-height: 52px; background: var(--paper); color: var(--ink); border: 0; border-radius: 999px; font-weight: 650; }
.quiet { border: 0; background: none; padding: 10px; min-height: 44px; color: var(--muted); }
#install-open { margin-top: 9px; }
.camera-screen { background: #101111; }
.preview, video, canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
video, canvas { object-fit: contain; }
#scan-video { object-fit: cover; }
canvas { pointer-events: none; }
.preview[data-mirrored] :is(video, canvas) { transform: scaleX(-1); }
header { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 18px; right: 18px; z-index: 1; display: flex; align-items: start; }
.exercise-header { display: grid; grid-template-columns: 44px 1fr 44px; }
.exercise-header #stop { grid-column: 1; grid-row: 1; }
.exercise-header #flip { grid-column: 3; grid-row: 1; }
.icon { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgb(16 17 17 / .82); font-size: 29px; line-height: 1; display: grid; place-items: center; }
.icon svg { width: 24px; height: 24px; }
.count, .result-number { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.06em; }
.count { grid-column: 2; grid-row: 1; justify-self: center; padding: 3px 16px 8px; border-radius: 24px; background: rgb(16 17 17 / .82); line-height: 1; font-size: 55px; }
.count span, .result-number span { font-size: .36em; font-weight: 500; letter-spacing: 0; color: #c6c6bb; }
.result-number { color: var(--signal); font-size: clamp(82px, 24vw, 134px); line-height: 1; }
#result h1 { font-size: 27px; letter-spacing: 0; }
.camera-hint, #status:not(:empty) { background: rgb(16 17 17 / .86); color: var(--paper); border-radius: 999px; padding: 8px 15px; width: fit-content; margin-inline: auto; }
.camera-hint { position: absolute; bottom: max(32px, env(safe-area-inset-bottom)); }
.scan-guide { position: relative; z-index: 1; width: min(67vw, 290px); aspect-ratio: 1; border: 2px solid var(--signal); border-radius: 27px; box-shadow: 0 0 0 150vmax rgb(0 0 0 / .45); }
#scanner header, #scanner .camera-hint { z-index: 1; }
.lens { display: flex; justify-content: center; gap: 5px; }
.lens select { max-width: 190px; background: #252625; border: 0; border-radius: 999px; padding: 0 12px; min-height: 44px; }
dialog { width: min(calc(100% - 40px), 365px); padding: 24px; border: 1px solid #393b36; border-radius: 22px; background: #1c1e1b; color: var(--paper); }
dialog::backdrop { background: rgb(0 0 0 / .72); }
dialog h2 { margin: 0 0 9px; font-size: 22px; }
dialog p { color: #c6c6bb; line-height: 1.55; }
.install-flow { display: flex; align-items: center; justify-content: space-around; margin: 21px 0; color: var(--signal); }
@media (max-height: 430px) { .intro { padding-bottom: 72px; } .brand { width: 48px; height: 48px; } }