/* TyasAI membership. Visual from Kimi K3. Logo hue family, low chroma, glass. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600&family=Noto+Serif+SC:wght@400;600&family=Inter:wght@300;400;500;600&display=swap");

:root {
  --tyas-bg: #f4f7f5;
  --tyas-ink: #163335;
  --tyas-muted: #5c7370;
  --tyas-primary: #4b9a96;
  --tyas-primary-deep: #2e6f6c;
  --tyas-mint: #7fd1b6;
  --tyas-gold: #c9a961;
  --tyas-gold-soft: rgba(201, 169, 97, 0.16);
  --tyas-danger: #a86a5e;
  --tyas-good: #4b9a96;
  --tyas-hairline: rgba(22, 51, 53, 0.08);
  --tyas-glass: rgba(255, 255, 255, 0.62);
  --tyas-glass-strong: rgba(255, 255, 255, 0.78);
  --tyas-glass-border: rgba(255, 255, 255, 0.75);
  --tyas-blur: 20px;
  --tyas-radius-card: 20px;
  --tyas-radius-btn: 999px;
  --tyas-shadow: 0 12px 40px rgba(22, 51, 53, 0.06);
  --tyas-font: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Noto Sans SC", sans-serif;
  --tyas-display: "Playfair Display", "Noto Serif SC", serif;
  --page: 1120px;
}

body {
  font-family: var(--tyas-font);
  background-color: var(--tyas-bg);
  color: var(--tyas-ink);
  -webkit-font-smoothing: antialiased;
}

.mesh {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(720px 480px at 14% 10%, rgba(75, 154, 150, 0.22), transparent 58%),
    radial-gradient(620px 420px at 92% 6%, rgba(201, 169, 97, 0.20), transparent 52%),
    radial-gradient(520px 380px at 68% 82%, rgba(127, 209, 182, 0.12), transparent 55%),
    linear-gradient(180deg, #f7faf8 0%, #f4f7f5 48%, #e8eeec 100%);
}

.glass {
  background: var(--tyas-glass);
  backdrop-filter: blur(var(--tyas-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--tyas-blur)) saturate(140%);
  border: 1px solid var(--tyas-glass-border);
  box-shadow: var(--tyas-shadow);
}

.tier-skin {
  background: color-mix(in srgb, var(--tier-fill, #f4f7f5) 92%, transparent);
  color: var(--tier-ink, var(--tyas-ink));
  border: 1px solid var(--tier-line, var(--tyas-hairline));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 16px 36px -22px color-mix(in srgb, var(--tier-fill, #163335) 45%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.42);
}
.tier-skin .muted { color: color-mix(in srgb, var(--tier-ink, var(--tyas-ink)) 62%, transparent); }
.tier-skin.on-dark { box-shadow: 0 20px 44px -20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); }
.tier-skin.on-dark .muted { color: color-mix(in srgb, var(--tier-ink) 72%, transparent); }

.sticker {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 999px;
  transform: rotate(-8deg);
  background: color-mix(in srgb, var(--tier-accent, var(--tyas-gold)) 22%, #fff);
  color: var(--tier-ink, var(--tyas-ink));
  border: 1px dashed color-mix(in srgb, var(--tier-accent, var(--tyas-gold)) 55%, transparent);
}
.tier-skin.on-dark .sticker {
  background: color-mix(in srgb, var(--tier-accent) 28%, transparent);
  color: var(--tier-ink);
  border-color: color-mix(in srgb, var(--tier-accent) 50%, transparent);
}

.num {
  font-family: var(--tyas-display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}

.inner { max-width: var(--page); margin: 0 auto; padding: 0 28px; }

@media (max-width: 820px) {
  .inner { padding: 0 16px; }
}