/* Memoir's placeholder site: two screens, the name and the dev build's download. Its look is the app's own
   (Memoir's colours, Inter, and the MEMOIR wordmark in Unbounded), Light or Dark as the system has it. */
@font-face { font-family: "Memoir Unbounded"; src: url("fonts/Unbounded-subset.woff2") format("woff2"); font-weight: 200 900; font-display: block; }
@font-face { font-family: "Memoir Inter"; src: url("fonts/InterVariable-memoir.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --fill-1: rgba(120, 120, 128, 0.08);
  --fill-2: rgba(120, 120, 128, 0.14);
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #86868b;
  --sep: rgba(60, 60, 67, 0.12);
  --accent: #1d1d1f;
  --on-accent: #ffffff;
  --danger: #ff3b30;
  --ok: #34c759;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 18px 50px rgba(0, 0, 0, 0.07);
  --ring: 0 0 0 3px rgba(29, 29, 31, 0.18);
  --wm-fill: linear-gradient(76deg, #5e5e64, #2c2c30 30%, #0e0e10 55%, #232327 78%, #0e0e10);
  --wm-glow: 0 0.02em 0.06em rgba(0, 0, 0, 0.14);
  --font: -apple-system, BlinkMacSystemFont, "Memoir Inter", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pop: cubic-bezier(0.32, 1.24, 0.5, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #000000;
    --surface: #1c1c1e;
    --fill-1: rgba(120, 120, 128, 0.18);
    --fill-2: rgba(120, 120, 128, 0.26);
    --label: #f5f5f7;
    --label-2: #a1a1a6;
    --label-3: #8e8e93;
    --sep: rgba(255, 255, 255, 0.09);
    --accent: #f5f5f7;
    --on-accent: #000000;
    --danger: #ff453a;
    --ok: #30d158;
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
    --ring: 0 0 0 3px rgba(245, 245, 247, 0.28);
    --wm-fill: linear-gradient(76deg, #a4a4ac, #dedee3 30%, #fff 55%, #e9e9ee 78%, #fff);
    --wm-glow: 0 0 0.045em rgba(255, 255, 255, 0.32), 0 0 0.16em rgba(255, 255, 255, 0.12);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--label); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a, img { -webkit-user-drag: none; }
[hidden] { display: none !important; }
::selection { background: var(--fill-2); }

/* the MEMOIR wordmark, as the app's: Unbounded at its heaviest, platinum on Dark, graphite on Light, a fine
   grain and a tight glow, painted once */
.wordmark {
  position: relative;
  display: inline-block;
  font-family: "Memoir Unbounded", var(--font);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  text-shadow: var(--wm-glow);
}
.wordmark::after {
  content: "MEMOIR" / "";
  position: absolute;
  inset: 0;
  text-shadow: none;
  background:
    url("grain.png") 0 0 / 96px 96px,
    linear-gradient(rgba(255, 255, 255, 0.1), transparent 45%, rgba(0, 0, 0, 0.1) 80%, rgba(255, 255, 255, 0.04)),
    var(--wm-fill);
  background-blend-mode: soft-light, normal, normal;
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- 1: the name ---------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 56px;
  text-align: center;
}
.hero-mark { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 26px); }
.hero-mark .logo { width: clamp(64px, 9vw, 104px); }
.hero h1 { margin: 0; font-size: clamp(44px, 9.5vw, 120px); line-height: 1; letter-spacing: 0; }
.hero h1 .wordmark { animation: wm-in 1.1s var(--ease-out) 0.25s backwards; }
@keyframes wm-in { from { opacity: 0; transform: translateY(14px); filter: blur(10px); } }
.hero-line { margin: clamp(26px, 4vw, 40px) 0 0; font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.hero-note { margin: 10px 0 0; color: var(--label-2); font-size: 15px; }
.hero-go { margin-top: 30px; }
.hero-chip { margin-top: 18px; padding: 3px 10px; border-radius: 999px; background: var(--fill-1); color: var(--label-2); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.rise { animation: rise 0.9s var(--ease-out) var(--d, 0ms) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), transform 0.25s var(--ease-out), box-shadow 0.2s var(--ease);
}
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--bg)); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---------- 2: the download ---------- */
.dl {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 48px 20px 32px;
}
.dl-card {
  width: min(460px, 100%);
  padding: 30px 28px 28px;
  border-radius: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
}
.kicker { margin: 0; color: var(--label-3); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dl h2 { margin: 6px 0 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.dl-sub { margin: 6px 0 22px; color: var(--label-2); }

/* the code: six boxes, each typed digit shown only as an asterisk (the field itself is clear) */
.code { margin: 0; }
.code-boxes { position: relative; display: flex; justify-content: center; gap: 8px; cursor: text; }
.code-box {
  display: grid;
  place-items: center;
  width: 46px;
  height: 56px;
  border-radius: 14px;
  background: var(--fill-1);
  box-shadow: inset 0 0 0 1.5px transparent;
  font-size: 28px;
  font-weight: 700;
  transition: box-shadow 0.2s var(--ease), background-color 0.25s var(--ease);
}
.code-box.now { box-shadow: inset 0 0 0 1.5px var(--label-3); }
.code-box i { font-style: normal; line-height: 1; transform: translateY(5px); animation: star-in 0.42s var(--pop) backwards; }
@keyframes star-in { from { opacity: 0; transform: translateY(5px) scale(0.3); filter: blur(4px); } }
.code-box.now::after { content: ""; width: 2px; height: 24px; border-radius: 1px; background: var(--label); animation: blink 1.1s ease-in-out infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: 0.15; } }
.code-boxes input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  cursor: text;
}
.code.checking .code-box { background: var(--fill-2); }
.code.wrong .code-box { background: color-mix(in srgb, var(--danger) 12%, var(--fill-1)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--danger) 55%, transparent); }
.code.right .code-box { background: color-mix(in srgb, var(--ok) 14%, var(--fill-1)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ok) 60%, transparent); }
.code-say { min-height: 21px; margin: 12px 0 0; color: var(--label-2); font-size: 13.5px; }
.code.wrong .code-say { color: var(--danger); }

/* unlocked: the two files */
.dl-files { display: grid; gap: 10px; text-align: left; }
.dl-files.in > * { animation: rise 0.7s var(--ease-out) backwards; }
.dl-files.in > :nth-child(2) { animation-delay: 90ms; }
.dl-files.in > :nth-child(3) { animation-delay: 180ms; }
.dl-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--fill-1);
  color: var(--label);
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.25s var(--ease-out);
}
.dl-file:hover { background: var(--fill-2); }
.dl-file:active { transform: scale(0.98); }
.dl-file:focus-visible { outline: none; box-shadow: var(--ring); }
.df-icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); }
.df-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.df-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.df-text b { font-size: 15.5px; font-weight: 600; }
.df-text small { color: var(--label-2); font-size: 12.5px; line-height: 1.35; }
.df-go { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.df-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.dl-how { margin: 6px 4px 0; color: var(--label-2); font-size: 12.5px; line-height: 1.5; }
.dl-how b { color: var(--label); font-weight: 600; }
.dl-how code { padding: 1px 5px; border-radius: 6px; background: var(--fill-1); font-size: 12px; }
.foot { margin: 0; color: var(--label-3); font-size: 12.5px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}