.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; 
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
}

:root { --bg: #f7fafc; --paper: #fff; --ink: #0f172a; --muted: #6b7280; --border: #e5e7eb; --brand: #22c55e; --brand2: #3b82f6; --shadow-1: 0 4px 20px #0002; --shadow-2: 0 10px 30px #0003; --radius-card: 20px; --radius-btn: 14px; --decor: none; --btn-tilt: -.2deg; --btn-glow: none; --glass-bg: rgba(255, 255, 255, 0.03); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); --backdrop-blur: blur(4px); --backdrop-saturate: saturate(180%); --good-bg: #dcfce7; --good-ink: #065f46; --good-bd: #bbf7d0; --warn-bg: #fef3c7; --warn-ink: #92400e; --warn-bd: #fde68a; --bad-bg: #fee2e2; --bad-ink: #7f1d1d; --bad-bd: #fecaca; --dur-fast: .18s; --dur-med: .32s; --dur-slow: .6s; --ease-entr: cubic-bezier(.2, .8, .2, 1); --fs-xs: clamp(11px,1.2vw, 12px); --fs-sm: clamp(12.5px, 1.4vw, 14.5px); --fs-base: clamp(14px, 1.7vw, 16px); --fs-lg: clamp(18px, 2.2vw, 22px); --fs-xl: clamp(22px, 2.8vw, 26px); --space-1: 6px; --space-2: 10px; --space-3: 14px; --space-4: 18px; --space-5: 22px; --card-w: min(640px, 94vw); --grad-warn: linear-gradient(90deg, #f59e0b66, #fbbf24, #f59e0b66); --grad-bad: linear-gradient(90deg, #ef444466, #fca5a5, #ef444466); } 
body.theme-paper { --bg: #f7fafc; --paper: #ffffff; --ink: #0f172a; --muted: #6b7280; --border: #e5e7eb; --brand: #22c55e; --brand2: #3b82f6; --radius-card: 22px; --radius-btn: 14px; --decor: radial-gradient(32rem 24rem at -10% -10%, #bbf7d04a, transparent 60%),radial-gradient(28rem 20rem at 110% 110%, #bfdbfe4a, transparent 60%); --glass-bg: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); --backdrop-blur: blur(4px); } 
body.theme-dark { color-scheme: dark; --bg: #0b0f1a; --paper: #0f1524; --ink: #e5e7eb; --muted: #9ca3af; --border: #1f2937; --brand: #38bdf8; --brand2: #6366f1; --shadow-1: 0 12px 30px #0008; --shadow-2: 0 20px 44px #000a; --btn-tilt: -.4deg; --decor: radial-gradient(40rem 32rem at 10% -10%, #111936, transparent 60%), radial-gradient(36rem 28rem at 110% 110%, #0d1328, transparent 60%); --good-bg: #064e3b; --good-ink: #a7f3d0; --good-bd: #065f46; --warn-bg: #3f2d00; --warn-ink: #fde68a; --warn-bd: #f59e0b; --bad-bg: #3a0d0d; --bad-ink: #fecaca; --bad-bd: #ef4444; --glass-bg: rgba(15, 21, 36, 0.05); --glass-border: rgba(255, 255, 255, 0.02); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --backdrop-blur: blur(4px); } 
body.theme-pastel { --bg: #fff7fb; --paper: #ffffff; --ink: #3f3d56; --muted: #7a7c8e; --border: #f8d7e9; --brand: #f472b6; --brand2: #93c5fd; --radius-card: 26px; --radius-btn: 18px; --decor: radial-gradient(30rem 24rem at 15% -10%, #ffe4f1, transparent 60%), radial-gradient(30rem 24rem at 110% 110%, #e0eaff, transparent 60%); --good-bg: #f3e8ff; --good-ink: #6b21a8; --good-bd: #e9d5ff; --warn-bg: #fff7ed; --warn-ink: #9a3412; --warn-bd: #fed7aa; --bad-bg: #ffe4e6; --bad-ink: #9f1239; --bad-bd: #fecdd3; --glass-bg: rgba(255, 255, 255, 0.08); --glass-border: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05); --backdrop-blur: blur(4px); } 
body.theme-neon { --bg: #06070d; --paper: #0a0f1f; --ink: #e5f2ff; --muted: #98a2b3; --border: #101828; --brand: #22d3ee; --brand2: #a78bfa; --shadow-1: 0 0 0 1px #1e293b, 0 20px 60px #0ea5e955; --shadow-2: 0 0 0 1px #1e293b, 0 30px 80px #8b5cf655; --btn-tilt: -.6deg; --btn-glow: drop-shadow(0 0 12px #22d3ee88) drop-shadow(0 0 18px #a78bfa66); --decor: radial-gradient(60rem 40rem at -10% -20%, #0ea5e933, transparent 60%), radial-gradient(60rem 40rem at 120% 120%, #8b5cf633, transparent 60%); --good-bg: #042f2e; --good-ink: #67e8f9; --good-bd: #22d3ee; --warn-bg: #2a2000; --warn-ink: #fde68a; --warn-bd: #f59e0b; --bad-bg: #2a0a0a; --bad-ink: #fecaca; --bad-bd: #f43f5e; --glass-bg: rgba(10, 15, 31, 0.1); --glass-border: rgba(34, 211, 238, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(34, 211, 238, 0.05); --backdrop-blur: blur(4px); } 
body.theme-cute { --bg: #fffdf7; --paper: #ffffff; --ink: #3a2d2d; --muted: #8c6e6e; --border: #ffe4e6; --brand: #f9a8d4; --brand2: #fbbf24; --radius-card: 24px; --radius-btn: 22px; --btn-tilt: -.25deg; --decor: radial-gradient(26rem 20rem at 10% -10%, #ffe4f1, transparent 60%), radial-gradient(26rem 20rem at 110% 110%, #fff1c6, transparent 60%); --good-bg: #fdeff6; --good-ink: #9d174d; --good-bd: #f9a8d4; --warn-bg: #fff7d6; --warn-ink: #92400e; --warn-bd: #fde68a; --bad-bg: #ffe5e5; --bad-ink: #7f1d1d; --bad-bd: #fecaca; --glass-bg: rgba(255, 255, 255, 0.10); --glass-border: rgba(255, 255, 255, 0.15); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); --backdrop-blur: blur(4px); } 
body.theme-tech { --bg: linear-gradient(120deg, #0b1220, #0c172a 40%, #0b1220); --paper: #0f172a; --ink: #e2e8f0; --muted: #94a3b8; --border: #1e293b; --brand: #38bdf8; --brand2: #22c55e; --shadow-1: 0 10px 30px #0008, inset 0 0 0 1px #1e293b; --shadow-2: 0 18px 50px #000b, inset 0 0 0 1px #1e293b; --btn-tilt: -.5deg; --decor: radial-gradient(70rem 50rem at -10% -20%, #0ea5e933, transparent 60%), radial-gradient(70rem 50rem at 120% 120%, #22c55e33, transparent 60%); --good-bg: #022c22; --good-ink: #34d399; --good-bd: #10b981; --warn-bg: #2b2300; --warn-ink: #fde68a; --warn-bd: #f59e0b; --bad-bg: #2b0a0a; --bad-ink: #fca5a5; --bad-bd: #ef4444; --glass-bg: rgba(15, 23, 42, 0.12); --glass-border: rgba(56, 189, 248, 0.08); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(56, 189, 248, 0.04); --backdrop-blur: blur(4px); } 
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,"PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei",Helvetica, Arial, sans-serif; transition: background var(--dur-med), color var(--dur-med); } .background-image { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: opacity 0.5s ease;pointer-events: none; will-change: opacity; } .theme-dark .background-image, .theme-neon .background-image, .theme-tech .background-image { filter: brightness(0.7) contrast(1.1); } .decor { position: fixed; inset: 0; pointer-events: none; background: var(--decor); transition: background var(--dur-slow);will-change: filter; } #Snow { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; opacity: 0.6; } .wrap { min-height: 100dvh; display: grid; place-items: center; padding:8vmin 3vmin; } .card { width: var(--card-w); background: var(--glass-bg); backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate); -webkit-backdrop-filter: var(--backdrop-blur) var(--backdrop-saturate); border-radius: var(--radius-card); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow), var(--shadow-1); padding: 26px 22px 22px; position: relative; overflow: hidden; animation: cardIn var(--dur-slow) var(--ease-entr) both; contain: layout paint style; backface-visibility: hidden; } @keyframes cardIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .card.tilt { transition: transform .12s ease; will-change: transform; } h1 { font-size: var(--fs-xl); font-weight: 800; text-align: center; margin: 0 0 4px 0; background: linear-gradient(135deg, var(--brand), var(--brand2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sub { font-size: var(--fs-sm); color: var(--muted); text-align: center; margin: 0 0 20px 0; font-weight: 500; } .logo { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 8px; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: #fff; font-weight: 800; letter-spacing: .5px; box-shadow: 0 8px 20px #00000020, var(--glass-shadow); filter: var(--btn-glow); animation: floatY 4s ease-in-out infinite, sway 7.2s ease-in-out infinite, logoPop .8s var(--ease-entr) both; position: relative; overflow: hidden; } .logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; } @keyframes floatY { 0%, 100% { transform: translateY(0px); } 50%{ transform: translateY(-6px); } } @keyframes sway { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 75% { transform: rotate(-1deg); } } @keyframes logoPop { 0%{ opacity: 0; transform: scale(0.8) rotate(-10deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } .paragraphs p { margin: 10px 0; padding: 15px; background: color-mix(in srgb, var(--glass-bg) 85%, transparent); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); border: 1px solid var(--glass-border); border-radius: var(--radius-btn); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); box-shadow: var(--glass-shadow); } .particles { position: absolute; inset: -10%; pointer-events: none; filter: blur(0.2px); opacity: .22; } .particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: float 8s linear infinite; } @keyframes float { from { transform: translateY(0); } to { transform: translateY(-40vh); } } .stack { display: flex; flex-direction: column; gap: 10px; } .btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: color-mix(in srgb, var(--glass-bg) 90%, transparent); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); color: inherit; border: 1px solid var(--glass-border); border-radius: var(--radius-btn); padding: 14px 16px; text-decoration: none; box-shadow: var(--glass-shadow), var(--shadow-1); transition: all var(--dur-fast) ease; position: relative; isolation: isolate; filter: var(--btn-glow); opacity: 0; transform: translateY(8px); will-change: transform;overflow: hidden; } .stack.ready .btn { animation: fadeUp var(--dur-slow) var(--ease-entr) forwards; } .stack.ready .btn:nth-child(1) { animation-delay: .05s; } .stack.ready .btn:nth-child(2) { animation-delay: .15s; } .stack.ready .btn:nth-child(3) { animation-delay: .25s; } .stack.ready .btn:nth-child(4) { animation-delay: .35s; } .stack.ready .btn:nth-child(5) { animation-delay: .45s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } .left{ display: flex; align-items: center; gap: 10px; font-weight: 800; } .right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .tag { font-size: var(--fs-xs); font-weight: 800; padding: .28rem .58rem; border-radius: 999px; background: color-mix(in srgb, var(--brand2) 18%, #fff); color: #0b1320; border: 1px solid color-mix(in srgb, var(--brand2) 40%, #fff); } .arrow { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px; transition: transform .28s var(--ease-entr); } .btn > * { position: relative; z-index: 2; } @media (hover: hover) { .btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 28%, transparent), var(--glass-shadow), var(--shadow-1); } .btn:hover .arrow { transform: translateX(2px) rotate(-12deg); } .btn::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; background: color-mix(in srgb, var(--brand) 14%, transparent 86%); opacity: 0; transform: translateY(4px); transition: opacity .35s var(--ease-entr), transform .35s var(--ease-entr); } .btn::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: 1; pointer-events: none; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--brand) 75%, #fff) 50%, transparent 65%); background-size: 200% 100%; background-position: 0% 50%; opacity: 0; transition: opacity .35s var(--ease-entr), background-position .6s ease; } .btn:hover::after{ opacity: .9; transform: translateY(0); } .btn:hover::before { opacity: 1; background-position: 100% 50%; } } .btn:active { transform: translateY(0) scale(.985); filter: brightness(.95); } .btn:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 70%, #fff); outline-offset: 3px; } .sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; } .sheen::before { content: ""; position: absolute; inset: -40%; transform: skewX(-22deg) translateX(-120%); background: linear-gradient(90deg, transparent, #ffffff8040%, transparent 60%); transition: transform .9s var(--ease-entr); } @media (hover: hover) { .btn:hover .sheen::before { transform: skewX(-22deg) translateX(120%); } } .ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); opacity: .35; background: currentColor; mix-blend-mode: multiply; animation: ripple .6s ease-out forwards; } @keyframes ripple { from { width: 0;height: 0; opacity: .35; } to { width: 360px; height: 360px; opacity: 0; } } .chip { font-size: calc(var(--fs-xs) + 1px); font-weight: 800; padding: .42rem .7rem; border-radius: 999px; min-width: 72px; text-align: center; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--glass-bg) 85%, transparent); backdrop-filter: var(--backdrop-blur); -webkit-backdrop-filter: var(--backdrop-blur); color: var(--ink); position: relative; box-shadow: var(--glass-shadow); will-change: transform; } .chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; } .good { background: var(--good-bg); color: var(--good-ink); border-color: var(--good-bd); } .warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-bd); } .bad { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-bd); } .warn::after { opacity: 1; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; background: var(--grad-warn); } .bad::after { opacity: 1; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px; background: var(--grad-bad); } .chip.pulse{ animation: pulse 1.6s ease-in-out infinite; } .chip.bump { animation: bump .28s ease-out; } .chip.twinkle { animation: tw .3s ease-out; } .chip.loading { color: transparent; position: relative; overflow: hidden; } .chip.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffff66, transparent); transform: translateX(-120%); animation: shimmer 1.1s linear infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.06); } } @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes tw { 0% { filter: brightness(1.18); } 100% { filter: brightness(1); } } @keyframes shimmer { 100% { transform: translateX(120%); } } body.theme-neon .decor, body.theme-tech .decor { animation: drift 22s ease-in-out infinite; } @keyframes drift { 0%, 100% { filter: saturate(1) hue-rotate(0deg); } 50% { filter: saturate(1.05) hue-rotate(8deg); } } .foot { margin-top: 14px; font-size: var(--fs-xs); color: var(--muted); text-align: center; } .theme-fade { transition: background-color .35s ease, color .35s ease, filter .35s ease; } @media (prefers-contrast: more) { .btn { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); } .btn:focus-visible { outline-width: 3px; }.chip { border-width: 2px; } } @media (prefers-reduced-motion: reduce) { .card, .btn, .sheen::before { transition: none; }.btn, .stack.ready .btn { animation: none; opacity: 1; transform: none; } .btn:hover { transform: none; } .sheen::before { transform: none; }.logo { animation: none; } .chip.bump, .chip.pulse, .chip.twinkle { animation: none; } .ripple { animation: none; } .decor { animation: none; } .card, .btn, .paragraphs p, .chip { backdrop-filter: none; -webkit-backdrop-filter: none; } }

/* ============================================================
   瀑布流及卡片质感 (原 waterfall.css)
   ============================================================ */
.waterfall-bg {
  --mouse-x: 0px;
  --mouse-y: 0px;
  position: fixed;
  inset: 0;
  display: flex;
  gap: 1rem;
  pointer-events: none;
  z-index: -2;
  transform: rotate(-15deg) scale(1.5) translate(var(--mouse-x), var(--mouse-y));
  transition: transform .1s ease-out;
}

.waterfall-column {
  flex: 1;
  overflow: hidden;
}

.scroll-track {
  display: flex;
  flex-direction: column;
  animation: wf-scrollDown 300s linear infinite;
}

.waterfall-column:nth-child(2) .scroll-track {
  animation-name: wf-scrollUp;
  animation-duration: 320s;
}

.waterfall-column:nth-child(3) .scroll-track {
  animation-name: wf-scrollDown;
  animation-duration: 340s;
}

.waterfall-column:nth-child(4) .scroll-track {
  animation-name: wf-scrollUp;
  animation-duration: 360s;
}

.image-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-group img {
  width: 100%;
  height: auto;
  border-radius: .5rem;
  opacity: .65;
  display: block;
}

.theme-dark .waterfall-bg .image-group img,
.theme-neon .waterfall-bg .image-group img,
.theme-tech .waterfall-bg .image-group img {
  opacity: .55;
  filter: brightness(1);
}

/* ===== 卡片极致透明 & 强化玻璃边缘轮廓 ===== */
.card {
  background: rgba(11, 15, 26, 0.02) !important;
  backdrop-filter: blur(2px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.6),
    inset 0 0 20px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 文本框的玻璃质感边缘 */
.paragraphs p {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.03) !important;
}

/* 按钮的玻璃质感边缘 */
.btn {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(1px) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3), 
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

@media (hover: hover) {
  .btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.4), 
      inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  }
}

.chip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== 动画和响应式 ===== */
@keyframes wf-scrollDown {
  0%{ transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

@keyframes wf-scrollUp {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

@media (max-width: 768px) {
  .waterfall-bg {
    gap: .5rem;
    transform: rotate(-15deg) scale(1.5);
    transition: none;
  }

  .image-group {
    gap: .5rem;
  }

  .waterfall-column:nth-child(3),
  .waterfall-column:nth-child(4) {
    display: none;
  }

  .image-group img:nth-child(n+13) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-track {
    animation: none !important;
  }

  .waterfall-bg {
    transition: none !important;
  }
}