/* The public surfaces — the landing page and the API documentation. They are a
   separate sheet because they and the console are two different products
   sharing one origin: these sell and explain, the console works.

   The greys below are this design's own scale. They were referenced from the
   day this sheet was written but never defined, which silently voided every
   rule that used them: nav links, their hover, and the meta line all collapsed
   to the inherited ink, so an active tab looked exactly like an idle one. */
:root {
  --gray-1: #5f6368;
  --gray-2: #80868b;
  --hairline: #e3e5e8;
  --accent: #1a73e8;
  --accent-dark: #1765cc;
}
#landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #fff;
  font-family: "Inter Tight", "Noto Sans SC", -apple-system, sans-serif;
  color: #0a0a0a;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
#landing.hidden { display: none; }
/* ---------- 入场动效 ---------- */
  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .rise { animation: rise .9s cubic-bezier(.22,.8,.3,1) both; }
  .d1 { animation-delay: .05s; }
  .d2 { animation-delay: .15s; }
  .d3 { animation-delay: .25s; }
  .d4 { animation-delay: .35s; }
  .d5 { animation-delay: .45s; }

  /* ---------- 导航 ---------- */
  /* Scoped: an unqualified nav here also styled the console sidebar. */
  #landing nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 26px 44px;
    flex: none;
  }

  .nav-links {
    display: flex;
    gap: 36px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .nav-links a {
    color: var(--gray-2);
    text-decoration: none;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: .12em;
    transition: color .25s;
  }

  .nav-links a:hover, .nav-links a.active { color: var(--ink); }

  .nav-cta {
    margin-left: auto;
    background: var(--ink);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
  }

  .nav-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.22); }

  /* ---------- Hero ---------- */
  .hero {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px 6vh;
  }

  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .wordmark {
    font-size: clamp(56px, 9.2vw, 148px);
    font-weight: 500;
    color: #202124;
    letter-spacing: -0.048em;
    line-height: 1.02;
    white-space: nowrap;
    /* The wordmark is set at up to 148px, so 24px underneath read as crowding
       rather than as a deliberate pairing. */
    margin-bottom: 44px;
  }

  .meta-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 42px;
  }

  .meta-line .num {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.02em;
  }

  .meta-line .unit {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-1);
  }

  .meta-line .dot {
    color: var(--gray-2);
    font-size: 13px;
    margin: 0 4px;
  }

  .meta-line .tagline {
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: .12em;
    color: var(--gray-2);
    font-family: "Noto Sans SC", sans-serif;
  }

  .cta {
    text-align: center;
  }

  .btn-primary {
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    font-family: "Noto Sans SC", sans-serif;
    padding: 16px 40px;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s, background .2s;
  }

  .btn-primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(26,115,232,.38); }

  /* ---------- 视频画廊(无限滚动) ---------- */
  .gallery {
    flex: none;
    height: 30vh;
    margin-bottom: 24px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }

  .track {
    display: flex;
    gap: 12px;
    width: max-content;
    height: 100%;
    animation: scroll 90s linear infinite;
  }

  .gallery:hover .track { animation-play-state: paused; }
  .track.paused { animation-play-state: paused; }

  @keyframes scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  .group {
    display: flex;
    gap: 12px;
    height: 100%;
  }

  .tile {
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    background: #f2f2f2;
    flex: none;
  }

  .tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ---------- 暂停按钮 ---------- */
  .pause-btn {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--hairline);
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
  }

  .pause-btn:hover { background: #fff; }

  .pause-btn svg { width: 13px; height: 13px; fill: var(--ink); }
  .pause-btn .icon-play { display: none; }
  .pause-btn.paused .icon-play { display: block; }
  .pause-btn.paused .icon-pause { display: none; }

  @media (max-width: 720px) {
    #landing nav { padding: 18px 20px; }
    .nav-links { display: none; }
    .wordmark { white-space: normal; line-height: 1.06; }
    .gallery { height: 24vh; }
  }

/* ---------- 认证对话框 ---------- */
/* The sign-in dialog is the doorway from the landing into the console, and it
   opens over the landing. It is scoped by id rather than restyling .modal,
   which the console's own dialogs share and which must keep its own look. */
#auth-dialog {
  border: 0;
  padding: 0;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(16, 20, 26, 0.18);
  width: min(408px, calc(100vw - 32px));
  background: #fff;
  font-family: "Inter Tight", "Noto Sans SC", -apple-system, sans-serif;
  color: #0a0a0a;
}
#auth-dialog::backdrop {
  background: rgba(15, 18, 22, 0.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#auth-dialog form {
  padding: 40px 38px 34px;
}
#auth-dialog .eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gray-2);
}
#auth-dialog h2 {
  /* The landing sets its voice in Inter Tight; the console's Georgia serif
     here was the loudest part of the mismatch. */
  font: 500 30px/1.15 "Inter Tight", "Noto Sans SC", sans-serif;
  letter-spacing: -0.03em;
  color: #202124;
  margin: 0 0 10px;
}
#auth-dialog #auth-copy {
  margin: 0 0 26px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-1);
}
#auth-dialog label {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--gray-1);
}
#auth-dialog input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  font-size: 15px;
  color: #0a0a0a;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
#auth-dialog input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.16);
}
#auth-dialog #auth-submit {
  width: 100%;
  height: 50px;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
#auth-dialog #auth-submit:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(26, 115, 232, 0.32);
}
#auth-dialog .modal-close {
  position: absolute;
  top: 18px;
  right: 20px;
  border: 0;
  background: none;
  font-size: 22px;
  line-height: 1;
  color: var(--gray-2);
  cursor: pointer;
}
#auth-dialog .modal-close:hover {
  color: #0a0a0a;
}
#auth-dialog .form-divider {
  color: var(--gray-2);
}
#auth-dialog .form-switch {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--gray-1);
}
#auth-dialog .form-switch button {
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
#auth-dialog .form-error {
  min-height: 18px;
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: #d93025;
}