:root{
  /* 默认浅色主题 */
  --bg1:#f6f8fb; --bg2:#ffffff;
  --brand:#00E5A8; --brand-2:#58D7FF;
  --txt:#0f172a; --muted:#475569;
  --card:rgba(0,0,0,.04); --border:rgba(15,23,42,.12);
  --shadow:0 10px 30px rgba(2,6,23,.08), inset 0 0 0 1px var(--border);
  --radius:18px; --radius-sm:12px;
  --grid: rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg1:#0f172a; --bg2:#111827;
    --brand:#00E5A8; --brand-2:#58D7FF;
    --txt:#E5E7EB; --muted:#9CA3AF;
    --card:rgba(255,255,255,.08); --border:rgba(255,255,255,.14);
    --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px var(--border);
    --radius:18px; --radius-sm:12px;
    --grid: rgba(255,255,255,.06);
  }
}

/* 手动覆盖主题（优先级高于系统偏好） */
html[data-theme="light"]{
  --bg1:#f6f8fb; --bg2:#ffffff;
  --brand:#00E5A8; --brand-2:#58D7FF;
  --txt:#0f172a; --muted:#475569;
  --card:rgba(0,0,0,.04); --border:rgba(15,23,42,.12);
  --shadow:0 10px 30px rgba(2,6,23,.08), inset 0 0 0 1px var(--border);
  --radius:18px; --radius-sm:12px;
  --grid: rgba(0,0,0,.06);
}
html[data-theme="dark"]{
  --bg1:#0f172a; --bg2:#111827;
  --brand:#00E5A8; --brand-2:#58D7FF;
  --txt:#E5E7EB; --muted:#9CA3AF;
  --card:rgba(255,255,255,.08); --border:rgba(255,255,255,.14);
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px var(--border);
  --radius:18px; --radius-sm:12px;
  --grid: rgba(255,255,255,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--txt);
  background:
    radial-gradient(1200px 1200px at 20% 10%, rgba(0,229,168,.16), transparent 50%),
    radial-gradient(1000px 1000px at 80% 90%, rgba(88,215,255,.16), transparent 45%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}
.grid-bg{
  position:fixed; inset:0; pointer-events:none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(800px 800px at 50% 40%, black, transparent 80%);
  opacity:.35;
}
header{
  width:100%;
  position:fixed; top:0; left:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(0,0,0,.45), transparent);
  border-bottom:1px solid var(--border);
}
.nav{
  width:min(1100px, 94vw);
  padding:14px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.logo{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--txt);
}
.logo-mark{
  width:34px; height:34px; border-radius:10px;
  background: conic-gradient(from 200deg, var(--brand), var(--brand-2), var(--brand));
  box-shadow: 0 0 20px rgba(0,229,168,.4);
  transform: rotate(-8deg);
  transition: transform .25s ease;
}
.logo:hover .logo-mark{ transform: rotate(8deg) scale(1.05); }
.logo-text{ font-weight:700; letter-spacing:.4px }
.pill{
  padding:9px 14px; border-radius:999px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  color:var(--muted); font-size:14px;
}
.theme-btn{
  padding:8px 12px; border-radius:999px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:var(--txt); font-size:13px; cursor:pointer;
  transition: background .2s ease, transform .12s ease;
}
.theme-btn:hover{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)); transform: translateY(-1px) }
main{ padding-top:96px; }
.hero{
  width:min(1100px, 94vw);
  margin: 40px auto 0;
  display:grid; grid-template-columns:1.1fr .9fr; gap:28px;
  align-items:center;
}
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; margin-top:20px; }
}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero-card{ padding:34px; position:relative; overflow:hidden; isolation:isolate; }
.glow{
  position:absolute; inset:auto -15% -30% -15%;
  height:60%; z-index:-1;
  background:
    radial-gradient(500px 160px at 50% 100%, rgba(0,229,168,.25), transparent 70%),
    radial-gradient(400px 130px at 30% 100%, rgba(88,215,255,.2), transparent 70%);
  filter: blur(18px);
  transform: translateY(20px);
}
h1{
  font-size: clamp(34px, 5vw, 54px);
  line-height:1.08; margin:6px 0 12px;
  letter-spacing:.3px;
}
.domain{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; font-size: clamp(18px, 3vw, 22px);
  color:var(--brand);
  text-shadow: 0 0 20px rgba(0,229,168,.35);
}
.muted{ color:var(--muted) }
.lead{
  font-size: clamp(15px, 2.1vw, 17.5px);
  color:#D1D5DB;
  margin: 10px 0 20px;
}
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }
.btn{
  position:relative; border:none; cursor:pointer;
  padding:12px 18px; border-radius:14px;
  font-weight:700; letter-spacing:.2px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  color:#001527;
  background: linear-gradient(180deg, #6ff2cf, #00e5a8);
  box-shadow: 0 10px 20px rgba(0,229,168,.25), inset 0 -2px 0 rgba(0,0,0,.1);
}
.btn-primary:hover{ transform: translateY(-1px) scale(1.01); }
.btn-ghost{
  color:var(--txt);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--border);
}
.btn-ghost:hover{ background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.feature{ display:grid; gap:14px; padding:22px; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 900px){ .feature{ grid-template-columns:1fr; } }
.chip{
  border:1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.chip h3{ margin:0 0 6px; font-size:16.5px; color:var(--txt) }
.chip p{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.5 }
.right{ padding:0; overflow:hidden; position:relative; min-height:320px; display:grid; place-items:center; }
.stage{
  width:100%; height:100%;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(0,229,168,.15), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.auv{
  font-weight:900; letter-spacing:2px;
  font-size: clamp(28px, 9vw, 80px);
  background: linear-gradient(90deg, #6ff2cf, #58D7FF, #6ff2cf);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 6px 20px rgba(0,229,168,.18));
  animation: shine 4s linear infinite;
  user-select:none;
}
@keyframes shine{ 0%{ background-position: 0% 50% } 100%{ background-position: 200% 50% } }
.tagline{ margin-top:8px; color:#B7C3CA; font-size:14px; letter-spacing:.4px }
footer{
  width:min(1100px, 94vw);
  margin: 26px auto 40px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  color:var(--muted);
}
.tiny{ font-size:12.5px }
.kbd{
  border:1px solid var(--border); border-bottom-width:2px;
  border-radius:8px; padding:2px 6px; font-size:12px; color:#CDEBE3;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
/* 轻量弹层 */
.modal{
  position:fixed; inset:0; display:none; place-items:center; z-index:50;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
.modal.open{ display:grid; }
.modal-card{
  width:min(720px, 92vw); padding:22px;
  background: var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow);
}
.modal h2{ margin:0 0 10px; font-size:22px }
.modal p{ margin:8px 0; color:#D6DEE3; line-height:1.65 }
.modal .close{
  margin-top:14px; padding:10px 14px; border-radius:12px; border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:var(--txt); cursor:pointer;
}
/* 彩蛋粒子 */
.particle{
  position:fixed; left:0; top:0; pointer-events:none; z-index:9999;
  font-weight:900; color:#E9FEF7; text-shadow:0 0 10px rgba(0,229,168,.55);
  will-change: transform, opacity;
  user-select:none;
}