:root {
  color-scheme: dark;
  --background: #071111;
  --foreground: #f7fbf8;
  --line: rgba(255,255,255,.12);
  --muted: rgba(255,255,255,.58);
  --soft: rgba(255,255,255,.08);
  --panel: rgba(7,12,13,.84);
  --mint: #48f3c2;
  --aqua: #37b8ff;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--background); }
body {
  min-height: 100%; margin: 0; color: var(--foreground);
  background:
    radial-gradient(circle at 20% 8%, rgba(55,184,255,.22), transparent 30rem),
    radial-gradient(circle at 84% 16%, rgba(72,243,194,.16), transparent 28rem),
    linear-gradient(135deg, #061010 0%, #091617 48%, #10100e 100%);
  font-family: ui-sans-serif, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--mint); }
.site { width: min(880px, calc(100% - 32px)); margin: 0 auto; padding: 18px 0 48px; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0 28px; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 900; }
.app-icon { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 18px 44px rgba(0,0,0,.36); }
.nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); font-size: 14px; font-weight: 800; }
.nav a { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.04); }
.card { border: 1px solid var(--line); border-radius: 28px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.28); backdrop-filter: blur(22px); }
.home { display: grid; place-items: center; min-height: calc(100vh - 140px); text-align: center; padding: 48px 24px; }
.home .app-icon { width: 96px; height: 96px; border-radius: 24px; }
h1 { margin: 22px 0 8px; font-size: clamp(42px, 9vw, 72px); line-height: 1; letter-spacing: 0; }
.subtitle { margin: 0; color: var(--muted); font-size: 17px; }
.links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.links a { border: 1px solid var(--line); border-radius: 999px; background: var(--soft); padding: 10px 16px; font-weight: 900; }
.record { margin-top: 28px; color: var(--muted); font-size: 14px; }
.record a { color: rgba(255,255,255,.72); }
.doc { padding: clamp(24px, 5vw, 42px); }
.doc h1 { margin: 0 0 8px; font-size: clamp(32px, 6vw, 52px); }
.doc h2 { margin: 30px 0 10px; font-size: 22px; }
.doc p, .doc li { color: var(--muted); }
.doc ul { padding-left: 22px; }
.footer { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; color: rgba(255,255,255,.48); font-size: 13px; }
.footer a { color: rgba(255,255,255,.62); }
@media (max-width: 680px) {
  .header { align-items: flex-start; flex-direction: column; }
  .nav { justify-content: flex-start; }
  .home { min-height: auto; margin-top: 16px; }
}