:root {
  --bg: #0d0d0e;
  --text: #ffffff;
  --muted: #aaaab0;
  --border: #2a2a2d;
}

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

html,
body {
  margin: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

body {
  background: var(--bg);
  color: var(--text);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.site-header {
  position: fixed;

  top: 0;
  left: 0;
  right: 0;

  z-index: 20;

  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 24px;

  border-bottom: 1px solid var(--border);

  background: rgba(13, 13, 14, 0.9);

  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;

  gap: 12px;

  color: inherit;
  text-decoration: none;
}

.brand img {
  height: 36px;
  width: auto;
}

.brand span {
  color: var(--muted);

  font-size: 0.68rem;
  font-weight: 700;

  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.demo-badge {
  padding: 8px 12px;

  border: 1px solid var(--border);
  border-radius: 999px;

  color: var(--muted);

  font-size: 0.72rem;
}

.a-enter-vr,
.a-enter-ar,
.a-orientation-modal {
  display: none !important;
}

#intro-screen {
  position: fixed;
  inset: 0;

  z-index: 15;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 110px 7vw 60px;

  background: var(--bg);
}

.eyebrow {
  margin: 0 0 18px;

  color: var(--muted);

  font-size: 0.72rem;
  font-weight: 700;

  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#intro-screen h1 {
  max-width: 900px;

  margin: 0;

  font-size: clamp(4rem, 10vw, 7rem);
  line-height: 0.9;

  letter-spacing: -0.06em;
}

#intro-screen h1 span {
  color: #a9a9ad;
}

.intro-copy {
  max-width: 620px;

  margin: 28px 0 0;

  color: var(--muted);

  font-size: 1.06rem;
  line-height: 1.7;
}

#start-ar {
  width: fit-content;

  margin-top: 34px;

  padding: 15px 24px;

  border: 0;
  border-radius: 999px;

  background: #ffffff;
  color: #111111;

  font: inherit;
  font-weight: 750;

  cursor: pointer;
}

#start-ar:disabled {
  opacity: 0.6;
  cursor: wait;
}

.ar-status {
  position: fixed;

  left: 50%;
  bottom: 28px;

  z-index: 12;

  transform: translateX(-50%);

  padding: 10px 16px;

  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;

  background: rgba(10,10,12,0.74);

  color: #ffffff;

  font-size: 0.74rem;

  backdrop-filter: blur(8px);
}

#ar-scene {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;

  margin: 0 !important;

  z-index: 1;
}

#ar-scene canvas,
#ar-scene .a-canvas {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
}

@media screen and (max-width: 700px) {

  .site-header {
    min-height: 64px;
    padding: 0 14px;
  }

  .brand img {
    height: 31px;
  }

  .demo-badge {
    display: none;
  }

  #intro-screen {
    padding: 100px 22px 50px;
  }

  #intro-screen h1 {
    font-size: clamp(3.8rem, 18vw, 5.8rem);
  }

  #start-ar {
    width: 100%;
  }

  .ar-status {
    width: calc(100% - 30px);
    text-align: center;
  }
}