@font-face {
  font-family: "Gilroy";
  src: url("../assets/brand/fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("../assets/brand/fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --bg: #030208;
  --panel: rgba(12, 11, 16, .86);
  --fg: #e9eef2;
  --muted: #98a19f;
  --line: rgba(233, 238, 242, .18);
  --wine: #9c2e3a;
  font-family: "Gilroy", system-ui, sans-serif;
  color: var(--fg);
  background: var(--bg);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--bg); }
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }

.try-on {
  position: relative; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #29272c 0%, #0b0a0e 72%);
}
.camera-canvas {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scaleX(-1); background: transparent; pointer-events: none;
}
#camera-video {
  position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scaleX(-1); pointer-events: none;
}
.try-on.camera-active #camera-video { opacity: 1; }
.try-on.selfie-active #camera-video { opacity: 0; }
.try-on.selfie-active .camera-canvas { transform: none; }

.try-on::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,2,8,.48) 0%, transparent 20%, transparent 67%, rgba(3,2,8,.78) 100%);
}

.try-on-header {
  position: absolute; z-index: 4; top: 0; left: 0; right: 0;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center;
  padding: calc(13px + env(safe-area-inset-top)) 16px 10px;
}
.try-on-logo { justify-self: center; width: 104px; filter: invert(1); }
.round-control {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: rgba(3,2,8,.52);
  text-decoration: none; color: var(--fg);
}
.round-control:disabled { opacity: .38; cursor: default; }
.capture-icon { width: 17px; height: 17px; border: 2px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(3,2,8,.55); }

.permission-card, .try-on-error {
  position: absolute; z-index: 6; left: 50%; top: 48%; transform: translate(-50%, -50%);
  width: min(88vw, 390px); padding: 26px 24px 23px; text-align: center;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(18px);
}
.eyebrow { margin: 0 0 12px; color: #b5a1a5; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.permission-card h1, .try-on-error h2 { margin: 0 0 12px; font-weight: 400; font-size: 29px; line-height: 1.05; }
.permission-copy, .try-on-error p { margin: 0 auto 21px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.android-camera-note {
  margin: -7px auto 14px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75); font-size: 11px; line-height: 1.45;
}
.start-camera-btn, .try-on-error button {
  width: 100%; padding: 14px 18px; border: 0; background: var(--wine); color: white;
  font-weight: 500; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
}
.secondary-camera-btn,
.try-on-error .secondary-camera-btn {
  width: 100%; margin-top: 9px; padding: 12px 18px; border: 1px solid var(--line);
  background: transparent; color: var(--fg); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase;
}
.permission-note { margin: 13px 0 0; color: rgba(233,238,242,.48); font-size: 11px; }
.try-on-error a { display: block; margin-top: 15px; font-size: 12px; color: var(--muted); text-underline-offset: 3px; }

.tracking-hint {
  position: absolute; z-index: 4; top: calc(74px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 36px);
  padding: 9px 13px; border: 1px solid var(--line); background: rgba(3,2,8,.62);
  color: var(--fg); font-size: 11px; text-align: center; backdrop-filter: blur(8px);
}

.mask-dock {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  padding: 22px 14px calc(13px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, rgba(3,2,8,.84) 26%, rgba(3,2,8,.96) 100%);
}
.mask-name-row { display: flex; align-items: baseline; justify-content: center; gap: 9px; margin-bottom: 10px; }
.mask-name-row p { margin: 0; font-size: 15px; }
.mask-name-row span { color: #b5a1a5; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.mask-picker { display: flex; gap: 9px; padding: 3px 2px 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-snap-type: x proximity; }
.mask-picker::-webkit-scrollbar { display: none; }
.mask-option {
  flex: 0 0 78px; width: 78px; height: 96px; padding: 0; overflow: hidden; scroll-snap-align: center;
  border: 1px solid rgba(233,238,242,.2); background: #111016; position: relative;
}
.mask-option img { width: 100%; height: 71px; object-fit: cover; display: block; opacity: .72; }
.mask-option-name {
  display: flex; align-items: center; justify-content: center; height: 24px; padding: 1px 4px 0;
  color: rgba(233,238,242,.72); font-size: 7px; line-height: 1.05; letter-spacing: .04em;
  text-align: center; text-transform: uppercase;
}
.mask-option.active { border-color: var(--fg); box-shadow: 0 0 0 2px rgba(233,238,242,.18); }
.mask-option.active img { opacity: 1; }
.mask-option.active .mask-option-name { color: var(--fg); }
.fit-toggle {
  display: block; margin: 8px auto 0; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: rgba(233,238,242,.72); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase;
}
.fit-panel {
  width: min(100%, 430px); margin: 9px auto 2px; padding: 10px 11px 9px;
  border: 1px solid var(--line); background: rgba(8,7,11,.86);
}
.fit-control {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
  margin-bottom: 7px; color: rgba(233,238,242,.76); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase;
}
.fit-control output { color: var(--fg); font-variant-numeric: tabular-nums; }
.fit-control input { grid-column: 1 / -1; width: 100%; height: 18px; margin: 0; accent-color: var(--wine); }
.fit-values { margin: 4px 0 8px; color: #b5a1a5; font-size: 9px; text-align: center; font-variant-numeric: tabular-nums; }
.fit-actions { display: grid; grid-template-columns: 1.2fr .7fr 1.2fr; gap: 6px; }
.fit-actions button {
  min-height: 30px; padding: 5px 7px; border: 1px solid var(--line); background: transparent;
  color: var(--fg); font-size: 8px; letter-spacing: .05em; text-transform: uppercase;
}
.fit-actions button:first-child { border-color: var(--wine); background: rgba(156,46,58,.28); }
.fit-status { min-height: 11px; margin: 6px 0 0; color: rgba(233,238,242,.58); font-size: 8px; text-align: center; }
.prototype-note { margin: 7px 0 0; color: rgba(233,238,242,.52); font-size: 10px; text-align: center; }

@media (min-width: 700px) {
  .try-on { width: min(100%, 560px); margin: 0 auto; }
  body { background: #111016; }
}