:root {
      color-scheme: dark;
      --bg: #050505;
      --text: #ffffff;
      --muted: #aaaaaa;
      --line: rgba(255, 255, 255, .12);
      --ease: cubic-bezier(.2, .8, .2, 1);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { min-width: 320px; min-height: 100%; background: var(--bg); }
    body {
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    button, a { font: inherit; }

    #bg {
      position: fixed;
      inset: 0;
      z-index: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      mix-blend-mode: screen;
    }

    .glass {
      background: rgba(255, 255, 255, .07);
      border: 1px solid var(--line);
      -webkit-backdrop-filter: blur(30px);
      backdrop-filter: blur(30px);
      border-radius: 32px;
    }

    .topbar {
      position: fixed;
      top: max(22px, env(safe-area-inset-top));
      left: 50%;
      z-index: 10;
      width: min(1200px, 90%);
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 0;
      transform: translateX(-50%);
    }

    .topbar > .glass-surface__content {
      justify-content: space-between;
      gap: 18px;
      padding: 14px 18px 14px 30px;
    }

    .brand {
      min-width: 0;
      overflow: hidden;
      color: #fff;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .language-toggle {
      flex: 0 0 auto;
      min-width: 66px;
      min-height: 38px;
      padding: 0 14px;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      color: #fff;
      cursor: pointer;
      font-size: 13px;
      font-weight: 650;
      transition: transform .25s var(--ease), background .25s ease;
    }
    .language-toggle:hover { background: rgba(255, 255, 255, .15); transform: translateY(-2px); }
    .language-toggle:active { transform: scale(.95); }

    .hero {
      position: relative;
      z-index: 1;
      min-height: 100svh;
      display: flex;
      align-items: center;
      padding: 118px max(52px, 4.6vw) 42px;
    }

    .hero-content {
      width: min(100%, 1080px);
      min-width: 0;
      overflow: visible;
    }

    h1 {
      display: inline-block;
      width: max-content;
      max-width: 100%;
      font-size: clamp(82px, min(12.9vw, calc((100vw - 112px) / 6.9)), 145px);
      line-height: .96;
      letter-spacing: -3.5px;
      font-weight: 720;
      white-space: nowrap;
      transform: scaleX(1.025);
      transform-origin: left center;
      overflow: visible;
      /* Extra paint room prevents the final “g” descender and right edge
         from being clipped by background-clip:text on some mobile browsers. */
      padding: 0 .09em .14em 0;
      margin: 0 -.09em -.14em 0;
      background: linear-gradient(90deg, #ffffff 0%, #eeeaff 18%, #8b7cff 60%, #00e5ff 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    h2 {
      margin-top: 48px;
      font-size: clamp(30px, 3.8vw, 42px);
      line-height: 1.16;
      letter-spacing: -.035em;
      font-weight: 700;
      width: max-content;
      max-width: 100%;
      transform: scaleX(1.10);
      transform-origin: left center;
    }

    .lead {
      margin-top: 23px;
      color: var(--muted);
      font-size: clamp(18px, 1.75vw, 21px);
      line-height: 1.72;
      letter-spacing: -.015em;
    }

    .enter-button {
      position: relative;
      min-width: 123px;
      min-height: 64px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-top: 42px;
      overflow: hidden;
      padding: 13px 30px;
      border: 0;
      border-radius: 40px;
      background: #f5f5f5;
      color: #111;
      cursor: pointer;
      text-decoration: none;
      transition: transform .25s ease, background .35s ease, box-shadow .35s ease;
    }
    .enter-button .primary-label { font-size: 15px; line-height: 1.15; }
    .enter-button .secondary-label { margin-top: 3px; font-size: 10px; line-height: 1; opacity: .72; }
    .enter-button::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .5), transparent);
      transform: translateX(-120%);
      transition: transform .6s ease;
    }
    .enter-button:hover {
      transform: translateY(-5px) scale(1.03);
      box-shadow: 0 15px 40px rgba(0, 220, 255, .25);
    }
    .enter-button:hover::after { transform: translateX(120%); }
    .enter-button:active { transform: scale(.94); }

    .backup-sites {
      margin-top: 18px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px 11px;
      max-width: min(100%, 640px);
    }
    .backup-sites-label {
      color: rgba(255, 255, 255, .58);
      font-size: 12px;
      line-height: 1.2;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .backup-sites-links {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      min-width: 0;
    }
    .backup-site-link {
      min-height: 34px;
      max-width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 12px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 999px;
      background: rgba(255, 255, 255, .055);
      color: rgba(255, 255, 255, .78);
      font-size: 12px;
      line-height: 1.2;
      text-decoration: none;
      overflow-wrap: anywhere;
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      transition: transform .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
    }
    .backup-site-link:hover {
      transform: translateY(-2px);
      border-color: rgba(139, 124, 255, .42);
      background: rgba(139, 124, 255, .12);
      color: #fff;
    }
    .backup-site-link:active { transform: scale(.97); }

    .page-transition {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #050505;
      opacity: 0;
      pointer-events: none;
      transition: opacity .7s ease;
    }
    .page-transition.active { opacity: 1; pointer-events: auto; }

    @media (max-width: 768px) {
      .topbar {
        top: max(12px, env(safe-area-inset-top));
        width: calc(100% - 24px);
        min-height: 54px;
        padding: 0;
        border-radius: 22px;
      }
      .topbar > .glass-surface__content { padding: 8px 9px 8px 16px; }
      .brand { font-size: 13px; }
      .language-toggle { min-width: 58px; min-height: 36px; padding-inline: 11px; font-size: 12px; }
      .hero { padding: 118px 24px 46px; }
      .hero-content { width: 100%; }
      h1 {
        display: inline-block;
        width: auto;
        max-width: 100%;
        font-size: clamp(42px, 12.8vw, 72px);
        line-height: 1.05;
        letter-spacing: -2px;
        white-space: normal;
        transform: none;
        overflow-wrap: normal;
        word-break: keep-all;
        padding-right: .08em;
        margin-right: -.08em;
      }
      h2 { width: auto; margin-top: 32px; font-size: clamp(25px, 7.2vw, 34px); transform: none; }
      .lead { margin-top: 22px; font-size: 17px; line-height: 1.58; }
      .lead br { display: none; }
      .enter-button { margin-top: 30px; }
      .backup-sites { margin-top: 16px; align-items: flex-start; }
      .backup-sites-links { width: 100%; }
    }

    @media (max-width: 380px) {
      .hero { padding-inline: 18px; }
      h1 { font-size: 40px; letter-spacing: -1.5px; }
      h2 { font-size: 23px; }
      .lead { font-size: 16px; }
      .backup-site-link { width: 100%; justify-content: space-between; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }
    }

/* v4 stability and accessibility layer */
body {
  min-height: 100svh;
  background: #050505 url("../assets/fallback-bg.webp") center / cover fixed no-repeat;
}
.background-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url("../assets/fallback-bg.webp") center / cover no-repeat;
  opacity: 1;
  transition: opacity .8s ease;
}
#bg { opacity: 0; transition: opacity .8s ease; }
body[data-background-state="ready"] #bg { opacity: 1; }
body[data-background-state="ready"] .background-fallback { opacity: .24; }
body[data-background-state="fallback"] #bg { display: none; }
.background-status {
  position: fixed;
  z-index: 8;
  right: max(20px, calc(14px + env(safe-area-inset-right)));
  bottom: max(18px, calc(12px + env(safe-area-inset-bottom)));
  max-width: calc(100% - 40px);
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(6,5,10,.52);
  color: rgba(255,255,255,.62);
  font-size: 11px;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: opacity .35s ease;
}
body[data-background-state="ready"] .background-status { opacity: 0; pointer-events: none; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.text-shield {
  position: absolute;
  z-index: -1;
  left: -9vw;
  top: 50%;
  width: min(900px, 78vw);
  height: min(780px, 105vh);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 50%, rgba(4,3,9,.74) 0%, rgba(4,3,9,.42) 42%, transparent 72%);
  pointer-events: none;
}
.enter-button[data-busy="true"] { pointer-events: none; transform: scale(.98); }
.hero { padding-right: max(52px, calc(4.6vw + env(safe-area-inset-right))); padding-left: max(52px, calc(4.6vw + env(safe-area-inset-left))); padding-bottom: max(42px, calc(22px + env(safe-area-inset-bottom))); }
@media (max-width: 768px) {
  .topbar { left: calc(50% + (env(safe-area-inset-left) - env(safe-area-inset-right))/2); width: calc(100% - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
  .hero { padding-left: max(24px, calc(16px + env(safe-area-inset-left))); padding-right: max(24px, calc(16px + env(safe-area-inset-right))); padding-bottom: max(46px, calc(24px + env(safe-area-inset-bottom))); }
  .text-shield { left: -35vw; width: 125vw; opacity: .86; }
  .background-status { font-size: 10px; }
}
@media (max-height: 590px) and (min-width: 769px) {
  .topbar { top: max(10px, env(safe-area-inset-top)); min-height: 52px; padding-block: 8px; }
  .hero { align-items: flex-start; padding-top: 88px; padding-bottom: 22px; }
  h1 { font-size: clamp(62px, 10.2vw, 104px); }
  h2 { margin-top: 24px; font-size: clamp(25px, 3vw, 34px); }
  .lead { margin-top: 14px; line-height: 1.48; }
  .enter-button { margin-top: 20px; min-height: 54px; }
}
@media (max-height: 470px) and (orientation: landscape) {
  .hero { padding-top: 78px; }
  h1 { font-size: clamp(48px, 9vw, 78px); }
  h2 { margin-top: 15px; font-size: 23px; }
  .lead { margin-top: 9px; font-size: 15px; line-height: 1.35; }
  .enter-button { margin-top: 12px; min-height: 48px; padding: 8px 24px; }
  .backup-sites { margin-top: 9px; gap: 6px 8px; }
  .backup-site-link { min-height: 30px; padding: 6px 10px; font-size: 11px; }
  .background-status { display: none; }
}


/* v4.6: retain the desktop-style one-piece glass pill on mobile. */
@media (max-width: 768px) {
  .topbar {
    min-height: 60px;
    border-radius: 26px;
  }
  .topbar > .glass-surface__content { padding: 9px 10px 9px 17px; }
}