:root {
  color-scheme: dark;
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.16);
  --glass-bg-hover: rgba(255, 255, 255, 0.14);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-border-hover: rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 34px 90px rgba(2, 6, 16, 0.42), 0 10px 24px rgba(4, 8, 18, 0.22);
  --glass-shadow-hover: 0 22px 48px rgba(4, 8, 18, 0.34);
  --glass-blur: 26px;
  --glass-saturate: 150%;
  --glass-radius: 24px;
  --glass-radius-lg: 34px;
  --glass-padding: 18px 20px;
  --glass-focus-ring: rgba(191, 233, 255, 0.4);
  --glass-ink: #f7fbff;
  --glass-muted: rgba(231, 241, 255, 0.74);
  --glass-accent: #8fd0ff;
  --glass-accent-2: #91f4dd;
  --glass-accent-3: #ffd1f5;
  --glass-page-bg:
    radial-gradient(circle at 16% 18%, rgba(140, 190, 255, 0.42), transparent 30%),
    radial-gradient(circle at 80% 14%, rgba(142, 244, 221, 0.28), transparent 26%),
    radial-gradient(circle at 50% 78%, rgba(255, 206, 235, 0.2), transparent 26%),
    linear-gradient(155deg, #08111f 0%, #0b1630 36%, #101728 68%, #090f1b 100%);
  --linktree-card-bg: rgba(255, 255, 255, 0.08);
  --linktree-card-bg-hover: rgba(255, 255, 255, 0.13);
  --linktree-card-border: rgba(255, 255, 255, 0.16);
  --linktree-card-border-hover: rgba(255, 255, 255, 0.24);
  --linktree-card-shadow: 0 14px 30px rgba(4, 8, 18, 0.22);
  --linktree-card-shadow-hover: 0 22px 40px rgba(4, 8, 18, 0.3);
  --linktree-card-blur: 14px;
}

* {
  box-sizing: border-box;
}

.liquid-page {
  margin: 0;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var(--glass-page-bg);
  color: var(--glass-ink);
}

.liquid-page::before,
.liquid-page::after {
  content: "";
  position: fixed;
  inset: -18%;
  pointer-events: none;
  z-index: -2;
  filter: blur(28px);
  opacity: 0.95;
}

.liquid-page::before {
  background:
    radial-gradient(circle at 24% 28%, rgba(255, 255, 255, 0.18), transparent 18%),
    radial-gradient(circle at 70% 20%, rgba(144, 205, 255, 0.34), transparent 22%),
    radial-gradient(circle at 52% 82%, rgba(145, 244, 221, 0.18), transparent 20%);
  animation: liquid-float-one 24s ease-in-out infinite;
}

.liquid-page::after {
  background:
    radial-gradient(circle at 78% 26%, rgba(255, 255, 255, 0.12), transparent 16%),
    radial-gradient(circle at 18% 68%, rgba(255, 209, 245, 0.16), transparent 18%),
    radial-gradient(circle at 82% 80%, rgba(138, 182, 255, 0.18), transparent 22%);
  animation: liquid-float-two 32s ease-in-out infinite;
}

.liquid-page--centered {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 36px 18px;
}

.liquid-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 3px 3px, 4px 4px;
  mix-blend-mode: soft-light;
}

.glass-surface,
.glass-box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--glass-surface-bg, var(--glass-bg));
  border-radius: var(--glass-surface-radius, var(--glass-radius));
  box-shadow: var(--glass-surface-shadow, var(--glass-shadow));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
}
.glass-surface::before,
.glass-box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(255, 255, 255, 0.28), transparent 55%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 35%, rgba(255, 255, 255, 0.08)),
    radial-gradient(100% 80% at 80% 110%, rgba(255, 255, 255, 0.14), transparent 60%);
  opacity: 0.9;
  z-index: 0;
}
.glass-surface::after,
.glass-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.24));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
  z-index: 0;
}
.glass-surface > *,
.glass-box > * {
  position: relative;
  z-index: 1;
}

.glass-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--glass-muted);
  box-shadow: 0 10px 24px rgba(5, 10, 20, 0.16);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.glass-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 16px;
  color: var(--glass-ink);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--linktree-card-shadow);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: transform 0.24s ease, background 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow: var(--linktree-card-shadow-hover);
}

.glass-button--primary {
  background: linear-gradient(135deg, rgba(165, 213, 255, 0.42), rgba(143, 208, 255, 0.2), rgba(145, 244, 221, 0.22));
  border-color: rgba(255, 255, 255, 0.24);
}

.glass-button--primary:hover {
  background: linear-gradient(135deg, rgba(185, 223, 255, 0.48), rgba(143, 208, 255, 0.28), rgba(145, 244, 221, 0.28));
}

.section-rule {
  border: none;
  height: 1px;
  margin: 30px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.linktree-card,
.hero,
.tile-card,
.content-block,
.quick-card,
.status-callout,
.panel,
.artifact-sheet,
.sheet-viewport-wrap,
.sheet-topbar,
.modal {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--linktree-card-bg);
  border-radius: var(--glass-surface-radius, var(--glass-radius));
  box-shadow: var(--linktree-card-shadow);
  backdrop-filter: blur(var(--linktree-card-blur));
  -webkit-backdrop-filter: blur(var(--linktree-card-blur));
  border: 1px solid var(--linktree-card-border);
  --glass-bg-hover: var(--linktree-card-bg-hover);
  --glass-shadow-hover: var(--linktree-card-shadow-hover);
  --glass-border-hover: var(--linktree-card-border-hover);
}
.hero > *,
.tile-card > *,
.content-block > *,
.status-callout > *,
.panel > *,
.artifact-sheet > *,
.sheet-topbar > *,
.modal > * {
  position: relative;
  z-index: 1;
}
.sheet-viewport {
  position: relative;
  z-index: 1;
}

.linkcard__content {
  position: relative;
  z-index: 1;
}
.linkcard__fx {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 64px 64px;
  opacity: 0.035;
  mix-blend-mode: normal;
}

@keyframes liquid-float-one {
  0% { transform: translate(-4%, -3%) scale(1); }
  50% { transform: translate(5%, 7%) scale(1.08); }
  100% { transform: translate(-4%, -3%) scale(1); }
}

@keyframes liquid-float-two {
  0% { transform: translate(4%, -2%) scale(1); }
  50% { transform: translate(-7%, 5%) scale(1.05); }
  100% { transform: translate(4%, -2%) scale(1); }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .liquid-page {
    background: #0d1526;
  }
  .glass-surface,
  .glass-box {
    background: var(--glass-bg-strong);
  }
  .glass-surface::before,
  .glass-box::before {
    opacity: 0.7;
  }
  .linktree-card,
  .hero,
  .tile-card,
  .content-block,
  .quick-card,
  .status-callout,
  .panel,
  .artifact-sheet,
  .sheet-viewport-wrap,
  .sheet-topbar,
  .modal {
    background: var(--linktree-card-bg);
  }
}