/* Tokens measured from meta.com/quest (Dolly and MCDS custom properties) on 2026-10-18. */
:root {
  color-scheme: light dark;
  /* Studio's window canvas (StudioWindow LightPalette / DarkPalette): a top-to-bottom gradient */
  --canvas: linear-gradient(#F7F7F9, #E6E6EA);
  --ink: #141414;
  --text: #1C2B33;
  --text-secondary: #5D6C7B;
  --divider: rgba(28, 43, 51, .1);
  --cta: #0064E0;
  --cta-hover: #0143B5;
  --cta-pressed: #004BB9;
  --secondary-border: rgba(28, 43, 51, .2);
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  /* Damped springs (SwiftUI response 0.6 s / damping 0.82, and 0.9 s / 0.92) sampled into linear(). */
  --spring: linear(0, .007 1.5%, .026 3%, .055 4.5%, .104 6.5%, .194 9.5%, .428 16.5%, .523 19.5%, .624 23%, .7 26%, .765 29%, .829 32.5%, .879 36%, .919 39.5%, .953 43.5%, .979 48%, .995 52.5%, 1.006 58%, 1.011 70%, 1);
  --gentle: linear(0, .004 1.5%, .022 3.5%, .049 5.5%, .095 8%, .183 12%, .378 20%, .471 24%, .556 28%, .633 32%, .691 35.5%, .743 39%, .788 42.5%, .826 46%, .866 50.5%, .902 55.5%, .932 61%, .955 67%, .972 73.5%, .984 80.5%, 1);
}

* { box-sizing: border-box; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font: 17px/1.47 -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  overflow-x: clip;
}

h1, h2, p, ul { margin: 0; padding: 0; }
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }

.lockup { display: block; height: auto; color: var(--ink); fill: currentColor; }
.lockup .dark-only { display: none; }

/* The line under the logo, split by meaning: what it tracks (statement), and for whom (audience). */
.statement, .audience { display: block; text-wrap: balance; }
/* the statement in a dark grey, the same on the tile in both appearances; the audience a step softer */
.statement { color: #1E1E1E; font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.audience { color: #4A5560; }

/* Downloads: one grouped glass card, the same component for every product. */
.downloads {
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 24px;
  background: rgba(255, 255, 255, .64);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  backdrop-filter: saturate(160%) blur(24px);
  box-shadow: 0 1px 2px rgba(28, 43, 51, .06), 0 16px 40px rgba(60, 40, 110, .14);
}

h2 { font-family: var(--display); font-size: 17px; font-weight: 600; line-height: 22px; }

/* Meta's tonal purple (tile-tonal tokens) marks experimental downloads, leading the caption. */
.status { color: #6B1EFD; font-weight: 600; }

.caption { margin-top: 2px; font-size: 13px; line-height: 17px; color: #4E5D6C; }
.caption a { text-underline-offset: 2px; }
.elsewhere { display: none; }

.actions { display: flex; justify-content: center; gap: 8px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--gentle), border-color .25s var(--gentle), scale .45s var(--spring);
  -webkit-tap-highlight-color: transparent;
}

.primary { background: var(--cta); color: #FFFFFF; }
.primary:hover { background: var(--cta-hover); }
.primary:active { background: var(--cta-pressed); }
.secondary { background: rgba(255, 255, 255, .5); border-color: var(--secondary-border); color: var(--text); }
.secondary:hover { background: rgba(255, 255, 255, .8); }
.secondary:active { background: #FFFFFF; }
.button:active { scale: .96; transition-duration: .1s; }

:focus-visible { outline: 2px solid var(--cta); outline-offset: 3px; }

.product {
  display: block;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(20, 20, 30, .12), 0 32px 80px rgba(40, 20, 90, .28);
}

.object { position: absolute; will-change: transform; }
.object video { display: block; width: 100%; height: auto; }

footer { font-size: 12px; line-height: 16px; color: var(--text-secondary); }

/* Phones and tablets cannot run these downloads: the list stays, the actions give way to one note. */
@media (max-width: 900px), (pointer: coarse) {
  .downloads .actions { display: none; }
  .elsewhere { display: block; }
}

/* Dark appearance: the page around the tile goes dark; the tile keeps its gradient, so its text stays dark ink. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas: linear-gradient(#414141, #272727);
    --ink: #F5F5F7;
    --text: #F5F5F7;
    --text-secondary: #A1A1A6;
    --divider: rgba(255, 255, 255, .12);
    --secondary-border: rgba(255, 255, 255, .28);
  }
  .lockup .light-only { display: none; }
  .lockup .dark-only { display: inline; }
  .caption { color: var(--text-secondary); }
  .status { color: #A98BFF; }
  .downloads {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(30, 30, 36, .64);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .45);
  }
  .secondary { background: rgba(255, 255, 255, .08); }
  .secondary:hover { background: rgba(255, 255, 255, .14); }
  .secondary:active { background: rgba(255, 255, 255, .2); }
}

@keyframes rise { from { translate: 0 24px; } }
@keyframes appear { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  h1, .lead, .downloads { animation: appear 1.4s var(--gentle) both, rise 1.6s var(--gentle) both; }
  .lead { animation-delay: .1s; }
  .downloads { animation-delay: .2s; }
  .product { animation: appear 1.6s .15s var(--gentle) both, rise 1.8s .15s var(--gentle) both; }
  .object { animation: appear 2.4s .4s var(--gentle) both; }
}

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

@media (prefers-contrast: more) {
  :root { --text-secondary: var(--text); --secondary-border: var(--text); }
}