* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg: #0a0e1a;
  --card: #151d31;
  --line: rgba(255, 255, 255, 0.08);
  --ink: #edf2fb;
  --muted: #8496b8;
  --accent: #5cc9ff;
  --accent-2: #7c6bff;
}

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
body {
  background:
    radial-gradient(1200px 620px at 12% -8%, rgba(124, 107, 255, 0.20), transparent 62%),
    radial-gradient(900px 520px at 96% 4%, rgba(92, 201, 255, 0.14), transparent 60%),
    var(--bg);
}

.shell {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}

.top { display: flex; align-items: center; gap: 10px; padding: 6px 2px 18px; }
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.brand-mark { height: 38px; width: auto; flex: 0 0 auto; display: block; }
/* The name is drawn, not set: five Latin letters were being rendered by
   PingFang's western glyphs. See tools/build-wordmark.js. */
/* Nudged down against the mark: the fox is centred on its full outline,
   but its visual weight is the face, and the ears above it are mostly
   empty. Centring the two boxes therefore leaves the name sitting high.
   A transform keeps this out of the layout, so the width and height the
   pages reserve still describe the box. */
.brand-word { height: 22px; width: auto; display: block; flex: 0 0 auto; transform: translateY(2px); }

.chip-btn {
  min-width: 40px; height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: rgba(255, 255, 255, 0.05); color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer;
}
.chip-btn:active { transform: scale(0.96); }

.doc { padding: 4px 2px 26px; }
.doc h1 { font-size: clamp(24px, 6vw, 32px); font-weight: 800; letter-spacing: 0.4px; margin-bottom: 12px; }
.doc h3 {
  font-size: 16px; font-weight: 700; margin: 26px 0 10px;
  padding-left: 11px; border-left: 3px solid var(--accent);
}
/* Only the privacy page uses these, to separate what is true today from what
   would be true if accounts ever arrived. */
.doc h2.part {
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 38px 0 6px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.doc h2.part:first-of-type { margin-top: 28px; }
.doc p { font-size: 15px; line-height: 1.85; color: #cfdaee; margin-bottom: 11px; }
.doc .lead { font-size: 16px; color: var(--ink); }
.doc .note { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.doc a { color: var(--accent); }

.foot { padding-top: 18px; border-top: 1px solid var(--line); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.foot-nav a { color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); }
.foot-copy { margin-top: 10px; font-size: 12px; color: var(--muted); }
.foot-nav a.is-here { color: var(--ink); font-weight: 600; }
.foot-line { margin-top: 12px; font-size: 12px; color: var(--muted); }