/* =========================
   DESIGN ENHANCEMENTS (v1)
   ========================= */

/* 0. CSS Reset-ish */
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:root {
  /* 1. Theming variables */
  --bg: #0b0d12;
  --bg-elev: #121621;
  --text: #e6e9ef;
  --muted: #aab2bf;
  --primary: #7c5cff;
  --primary-600: #6a4bf2;
  --primary-700: #583ee0;
  --ring: rgba(124, 92, 255, 0.5);
  --card: #121621;
  --border: #222838;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* 2. Typography scale */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --h1: clamp(2rem, 3vw, 3rem);
  --h2: clamp(1.6rem, 2.4vw, 2.2rem);
  --h3: clamp(1.3rem, 2vw, 1.6rem);
  --body: clamp(1rem, 1.2vw, 1.05rem);
  --small: .925rem;

  /* 3. Layout */
  --content-w: min(1100px, 92vw);
  --content-narrow: min(760px, 92vw);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --bg-elev: #f3f5f9;
    --text: #0f1222;
    --muted: #5a6272;
    --card: #ffffff;
    --border: #e7eaf1;
    --shadow: 0 10px 30px rgba(19, 17, 34, .08);
  }
}

:root.theme-dark {
  --bg: #0b0d12;
  --bg-elev: #121621;
  --text: #e6e9ef;
  --muted: #aab2bf;
  --card: #121621;
  --border: #222838;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
:root.theme-light {
  --bg: #ffffff;
  --bg-elev: #f3f5f9;
  --text: #0f1222;
  --muted: #5a6272;
  --card: #ffffff;
  --border: #e7eaf1;
  --shadow: 0 10px 30px rgba(19, 17, 34, .08);
}

/* 4. Base styles */
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: radial-gradient(1000px 600px at 20% -10%, rgba(124,92,255,.12), transparent 60%),
              radial-gradient(1000px 600px at 100% 10%, rgba(88,62,224,.12), transparent 55%),
              var(--bg);
  font-size: var(--body);
  line-height: 1.6;
  letter-spacing: .2px;
}
img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
::selection { background: rgba(124, 92, 255, 0.25); color: inherit; }

/* 5. Container helpers */
.container { width: var(--content-w); margin-inline: auto; }
.container.narrow { width: var(--content-narrow); }

/* 6. Header (sticky, glass) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--bg), transparent 15%);
  border-bottom: 1px solid var(--border);
}
.site-header .bar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 0;
}
.brand {
  font-weight: 800; letter-spacing: .2px;
  font-size: 1.15rem;
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary), transparent 90%);
}

/* 7. Search + filters (cosmetic/UX only) */
.controls {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
}
.input {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--card); color: var(--text);
  min-width: 240px; box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.input input {
  border: none; outline: none; background: transparent; color: inherit; width: 100%;
}
.select { pointer-events:auto; 
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card);
}
.btn {
  --_bg: var(--primary);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--_bg), black 12%);
  color: white; background: linear-gradient(180deg, color-mix(in srgb, var(--_bg), white 3%), var(--_bg));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--_bg), transparent 70%);
  cursor: pointer;
}
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost {
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); box-shadow: none;
}

/* 8. Progress bar for reading */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-700));
  z-index: 60;
}

/* 9. Back-to-top button */
.back-to-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 50;
  padding: 12px 14px; border-radius: 999px; background: var(--card);
  border: 1px solid var(--border); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); transition: .2s ease;
}
.back-to-top.show { opacity: 1; transform: translateY(0); }

/* 10. Card/grid for lists */
.grid {
  display: grid; gap: 20px; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); }
.card-title { font-size: var(--h3); line-height: 1.3; margin: 10px 0 8px; }
.card-meta { color: var(--muted); font-size: var(--small); }
.card img { aspect-ratio: 16/9; object-fit: cover; }

/* 11. Article styles */
.article {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 32px);
  box-shadow: var(--shadow);
}
.article h1 { font-size: var(--h1); margin: 0 0 10px; }
.article h2 { font-size: var(--h2); margin-top: 1.6em; }
.article h3 { font-size: var(--h3); margin-top: 1.2em; }
.article p { margin: .7em 0; }
.article blockquote {
  margin: 1em 0; padding: 12px 16px; border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary), transparent 92%); border-radius: 6px;
}
.article pre, .article code {
  background: #0e1220; color: #e9eefc; border-radius: 8px;
}
.article pre { padding: 14px; overflow-x: auto; }

/* 12. Nav + pagination */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 24px 0; }
.pagination a, .pagination span {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card);
}
.pagination .current { background: color-mix(in srgb, var(--primary), transparent 80%); border-color: var(--primary); }

/* 13. Tag badges */
.tag {
  display: inline-block; padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--primary), transparent 88%);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--primary), transparent 70%);
  font-size: .85rem;
}

/* 14. Footer */
.site-footer {
  margin-top: 40px; padding: 30px 0; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg), transparent 10%);
}

/* 15. Media and motion prefs */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto; }
}

/* 16. Focus visiblity */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--ring), transparent 60%);
  border-radius: 10px;
}

/* 17. Skeleton loader (cosmetic) */
.skeleton {
  position: relative; overflow: hidden; background: #1a2030; border-radius: var(--radius);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: translateX(-100%); animation: shimmer 1.6s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* 18. Tables */
.table {
  width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card);
}
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.table thead th { background: color-mix(in srgb, var(--primary), transparent 90%); text-align: left; }

/* 19. Alerts (cosmetic) */
.alert {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
}
.alert.success { background: color-mix(in srgb, var(--success), transparent 90%); }
.alert.warn { background: color-mix(in srgb, var(--warning), transparent 90%); }
.alert.error { background: color-mix(in srgb, var(--danger), transparent 90%); }

/* 20. Chip filters (cosmetic) */
.chips { display:flex; gap:8px; flex-wrap: wrap; }
.chip {
  padding: 6px 10px; border:1px solid var(--border); border-radius:999px; background: var(--card);
}
.chip.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary), transparent 85%); }

/* =========================
   v2: Themes + Graphic Effects (50+)
   ========================= */

/* Default: Sick Neon (amped visuals) */
:root {
  --bg: #070910;
  --bg-elev: #0c1020;
  --text: #eaf0ff;
  --muted: #9aa3b2;
  --primary: #9a53ff;
  --primary-600: #7c3cff;
  --primary-700: #5f2bd8;
  --ring: rgba(154, 83, 255, 0.5);
  --card: #0e1324;
  --border: #20263a;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 16px;
  --radius-sm: 12px;
  --radius-lg: 26px;
}
/* Animated aurora background for default theme */
@keyframes auroraMove {
  0% { transform: translate(-10%, -20%) scale(1); opacity: .4; }
  50% { transform: translate(20%, 10%) scale(1.2); opacity: .6; }
  100% { transform: translate(-10%, -20%) scale(1); opacity: .4; }
}
body::before,
body::after {
  content: ""; position: fixed; inset: -20% -20% auto -20%;
  height: 80vh;
  z-index: -1; filter: blur(60px);
  background: radial-gradient(600px 400px at 20% 30%, rgba(154,83,255,.28), transparent 60%),
              radial-gradient(500px 380px at 80% 10%, rgba(42,212,255,.18), transparent 60%),
              radial-gradient(600px 500px at 30% 90%, rgba(255,77,151,.18), transparent 60%);
  animation: auroraMove 14s ease-in-out infinite;
  pointer-events: none;
}
body::after {
  filter: blur(80px) saturate(120%);
  opacity: .5;
  mix-blend-mode: screen;
  animation-duration: 22s;
}

/* Theme: Forest */
:root.theme-forest {
  --bg: #0a0f0c;
  --bg-elev: #0f1713;
  --text: #e8fff2;
  --muted: #a7b8aa;
  --card: #101a14;
  --border: #1d2a22;
  --primary: #22e38a;
  --primary-600: #1fd07f;
  --primary-700: #1ab36c;
  --ring: rgba(34, 227, 138, .45);
}
:root.theme-forest body { background:
  radial-gradient(800px 500px at 20% -10%, rgba(34,227,138,.10), transparent 60%),
  radial-gradient(900px 500px at 110% 10%, rgba(88,224,160,.10), transparent 55%),
  var(--bg); }

/* Theme: Ocean */
:root.theme-ocean {
  --bg: #05090f;
  --bg-elev: #0b1220;
  --text: #e6f3ff;
  --muted: #9db3c6;
  --card: #0b1323;
  --border: #13233b;
  --primary: #3aa7ff;
  --primary-600: #2596f0;
  --primary-700: #1e7ccc;
  --ring: rgba(58,167,255,.45);
}

/* Theme: Sunset */
:root.theme-sunset {
  --bg: #0e0a10;
  --bg-elev: #170f1c;
  --text: #fff1f1;
  --muted: #d7bac6;
  --card: #1a1222;
  --border: #2a1c34;
  --primary: #ff6b9e;
  --primary-600: #ff4d8e;
  --primary-700: #e63e80;
  --ring: rgba(255,107,158,.5);
}

/* Theme accent utilities */
.accent-gradient-text {
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary), white 40%));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gradient-underline {
  background-image: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary), black 30%));
  background-size: 100% 2px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px;
}

/* Card shine effect */
.card {
  position: relative; overflow: hidden;
}
.card::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(240px 120px at var(--mx, 120px) var(--my, 60px), rgba(255,255,255,.08), transparent 60%);
  transition: opacity .25s ease; opacity: 0; pointer-events: none;
}
.card:hover::after { opacity: 1; }

/* Magnetic buttons */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%;
  left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.25), transparent 70%);
  opacity: 0; transition: opacity .2s ease;
}
.btn:hover::after { opacity: 1; }

/* Gradient borders */
.border-gradient {
  border: 1px solid transparent; background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary), white 30%)) border-box;
  border-radius: var(--radius);
}

/* Parallax layer utility */
.parallax {
  transform: translate3d(var(--tx,0), var(--ty,0), 0);
  transition: transform .1s linear;
}

/* Image zoom/pan on hover */
.zoom-pan {
  overflow: hidden; border-radius: var(--radius);
}
.zoom-pan img { transform: scale(1); transition: transform .6s ease; }
.zoom-pan:hover img { transform: scale(1.08); }

/* Ripple for buttons */
.btn[data-ripple] { position: relative; overflow: hidden; }
.btn[data-ripple] .ripple {
  position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0);
  animation: ripple .6s ease-out forwards; background: rgba(255,255,255,.35);
}
@keyframes ripple {
  to { transform: scale(12); opacity: 0; }
}

/* Glow pulse utility */
.glow-pulse { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary), transparent 60%); animation: glow 2.2s infinite; }
@keyframes glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary), transparent 60%); }
  70% { box-shadow: 0 0 0 16px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Dotted and grid backdrops */
.backdrop-dots {
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text), transparent 90%) 1px, transparent 0);
  background-size: 20px 20px;
}
.backdrop-grid {
  background-image: linear-gradient(to right, color-mix(in srgb, var(--text), transparent 94%) 1px, transparent 1px),
                    linear-gradient(to bottom, color-mix(in srgb, var(--text), transparent 94%) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Fancy separators */
hr.fancy {
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary), white 20%), transparent);
  margin: 22px 0;
}

/* Ribbon badge */
.ribbon {
  position: absolute; top: 10px; left: -6px; padding: 6px 14px; color: white;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary), black 20%));
  transform: rotate(-6deg);
  border-radius: 6px;
}

/* Note/sticker */
.note {
  background: color-mix(in srgb, var(--primary), transparent 92%);
  border: 1px dashed color-mix(in srgb, var(--primary), transparent 60%);
  padding: 12px 14px; border-radius: 10px;
}

/* Callouts */
.callout { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); }
.callout.info { background: color-mix(in srgb, var(--primary), transparent 88%); }
.callout.tip { background: color-mix(in srgb, var(--success), transparent 88%); }
.callout.warn { background: color-mix(in srgb, var(--warning), transparent 88%); }
.callout.danger { background: color-mix(in srgb, var(--danger), transparent 88%); }

/* Headings with anchor hover underline */
.article h1[id]::after, .article h2[id]::after, .article h3[id]::after {
  content: " #"; color: color-mix(in srgb, var(--text), transparent 60%); opacity: 0; transition: .2s ease;
}
.article h1:hover::after, .article h2:hover::after, .article h3:hover::after { opacity: 1; }

/* Lightbox overlay */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.8);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.lightbox-overlay.show { display: flex; }
.lightbox-overlay img { max-width: 92vw; max-height: 90vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Gradient headings in default */
.article h1, .article h2 { background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--primary), white 35%)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* TOC floating block */
.toc-float {
  position: sticky; top: 90px;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  max-height: 70vh; overflow: auto;
}

/* Code block with copy button */
pre { position: relative; }
.copy-btn {
  position: absolute; right: 8px; top: 8px; z-index: 2;
  font-size: .85rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text); cursor: pointer;
}
.copy-btn.ok { background: var(--success); color: #062b11; border-color: color-mix(in srgb, var(--success), black 10%); }

/* Blur-up utility (use on low-res preview) */
.blur-up { filter: blur(10px); transition: filter .5s; }
.blur-up.loaded { filter: blur(0); }

.theme-label{font-size:.85rem;color:var(--muted);padding-left:6px;}

.theme-chips { gap:6px; margin-left:6px; }
.theme-chips .chip { cursor:pointer; }
.theme-chips .chip.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary), transparent 85%); }
.site-header { position: sticky; top: 0; z-index: 999; }
.site-header * { pointer-events: auto; }


.theme-switcher{ position:relative; }
.theme-menu{
  position:absolute; top:110%; right:0; min-width:200px; padding:8px;
  background: var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow: var(--shadow); display:none; z-index: 2000;
}
.theme-menu.show{ display:block; }
.theme-item{
  display:block; width:100%; text-align:left; padding:10px 12px;
  background:transparent; border:0; color:var(--text); border-radius:10px; cursor:pointer;
}
.theme-item:hover{ background: color-mix(in srgb, var(--primary), transparent 88%); }
.theme-item.active{ border:1px solid var(--primary); background: color-mix(in srgb, var(--primary), transparent 85%); }
.controls{ display:flex; align-items:center; gap:10px; position:relative; z-index:1500; }
.input{ position:relative; z-index:1500; }
.site-header{ position:sticky; top:0; z-index: 3000; }


/* v2.6 Strong theme palettes */
:root {
  --primary: #9a53ff;
  --primary-600: #7c3cff;
  --primary-700: #5f2bd8;
  --accent-2: #2ad4ff;
  --bg: #070910;
  --bg-elev: #0c1020;
  --card: #0e1324;
  --border: #20263a;
  --text: #eaf0ff;
  --muted: #9aa3b2;
}
:root.theme-forest {
  --primary: #22e38a; --primary-600:#20d681; --primary-700:#19ba6f; --accent-2:#8bffb7;
  --bg:#070f0a; --bg-elev:#0b1610; --card:#0e1d15; --border:#1a2a22; --text:#eafff5; --muted:#a7b8aa;
}
:root.theme-ocean {
  --primary:#3aa7ff; --primary-600:#2596f0; --primary-700:#1e7ccc; --accent-2:#8bd1ff;
  --bg:#05090f; --bg-elev:#0a1220; --card:#0d1a2a; --border:#152a44; --text:#e6f3ff; --muted:#9db3c6;
}
:root.theme-sunset {
  --primary:#ff6b9e; --primary-600:#ff4d8e; --primary-700:#e63e80; --accent-2:#ffd1e1;
  --bg:#120a10; --bg-elev:#1a1120; --card:#231526; --border:#3a2440; --text:#fff1f6; --muted:#d7bac6;
}

/* Apply variables broadly */
body {
  background:
    radial-gradient(800px 600px at 15% 0%, color-mix(in srgb, var(--primary), transparent 90%), transparent),
    radial-gradient(900px 540px at 95% 10%, color-mix(in srgb, var(--accent-2), transparent 90%), transparent),
    var(--bg);
}
.site-header { background: color-mix(in srgb, var(--bg), transparent 8%); border-bottom: 1px solid var(--border); }
.brand { background: color-mix(in srgb, var(--primary), transparent 90%); color: var(--text); }
.card { background: var(--card); border-color: var(--border); }
.article { background: var(--card); border-color: var(--border); }
.input, .select { background: var(--card); border-color: var(--border); color: var(--text); }
.btn.primary { --_bg: var(--primary); background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary), white 8%)); }
.btn.ghost { background: var(--card); color: var(--text); border-color: var(--border); }
.tag { background: color-mix(in srgb, var(--primary), transparent 88%); border-color: color-mix(in srgb, var(--primary), transparent 70%); }
.pagination .current { background: color-mix(in srgb, var(--primary), transparent 80%); border-color: var(--primary); }
.site-footer { background: color-mix(in srgb, var(--bg), transparent 10%); border-top: 1px solid var(--border); }


/* v2.8 Additional design effects (18 items) */

/* 1) Brand animated gradient ring */
.brand {
  position: relative;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary), white 12%), color-mix(in srgb, var(--primary), transparent 85%));
}
.brand::before {
  content:""; position:absolute; inset:-2px;
  border-radius:999px;
  background: conic-gradient(from 0deg, var(--primary), var(--accent-2), var(--primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:2px; animation: spin 8s linear infinite;
  opacity:.35;
}
@keyframes spin { to { transform: rotate(1turn); } }

/* 2) Frosted glass utility */
.glass { background: color-mix(in srgb, var(--bg-elev), transparent 20%); backdrop-filter: blur(8px) saturate(120%); border:1px solid var(--border); }

/* 3) Card tilt on hover (3D) */
.card.tilt { transform-style: preserve-3d; perspective: 800px; }
.card.tilt:hover { transform: rotate3d(var(--ry,0), var(--rx,0), 0, 6deg) translateY(-2px); }

/* 4) Button pulse glow */
.btn.pulse:hover { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary), transparent 60%); animation: glow 1.8s infinite; }

/* 5) Badge utility */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; font-size:.8rem;
  border:1px solid color-mix(in srgb, var(--primary), transparent 60%); background: color-mix(in srgb, var(--primary), transparent 88%); }
.badge .dot { width:8px; height:8px; border-radius:999px; background: var(--primary); box-shadow: 0 0 8px color-mix(in srgb, var(--primary), transparent 30%); }

/* 6) Animated gradient text utility */
.shine { background: linear-gradient(90deg, var(--text), color-mix(in srgb, var(--primary), white 35%), var(--text));
  background-size: 300% 100%; -webkit-background-clip:text; background-clip:text; color: transparent; animation: shineMove 6s linear infinite; }
@keyframes shineMove { to { background-position: 200% 0; } }

/* 7) Link underline grow */
a.underline-anim { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-repeat:no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
a.underline-anim:hover { background-size: 100% 1px; }

/* 8) Sticky header shadow on scroll */
.site-header.scrolled { box-shadow: 0 10px 30px rgba(0,0,0,.18); }

/* 9) Stagger reveal utility */
.reveal.stagger { transition-delay: var(--delay, 0ms); }

/* 10) Image grayscale to color on hover */
img.desaturate { filter: grayscale(1) contrast(1.05); transition: filter .4s ease; }
img.desaturate:hover { filter: none; }

/* 11) Tag hover scale */
.tag:hover { transform: translateY(-1px) scale(1.03); }

/* 12) Focus within highlight for inputs */
.input:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary), transparent 85%); }

/* 13) News ticker */
.ticker { overflow:hidden; white-space: nowrap; border:1px solid var(--border); border-radius: 10px; background: var(--card); }
.ticker .track { display:inline-block; padding:8px 12px; animation: marquee 18s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 14) Footer wave animation */
@keyframes wave { 0%{ background-position: 0 0, 0 0;} 100%{ background-position: 200% 0, -200% 0;} }
.site-footer.wave { background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary), transparent 90%) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, color-mix(in srgb, var(--accent-2), transparent 92%) 50%);
  background-size: 200% 2px, 200% 2px; background-repeat: repeat-x; animation: wave 12s linear infinite; }

/* 15) Progress bar theme gradient */
.read-progress { background: linear-gradient(90deg, var(--primary), var(--accent-2)); }

/* 16) Noise overlay toggle */
.noise::before { content:""; position:fixed; inset:0; pointer-events:none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\"><filter id=\"n\"><feTurbulence type=\"fractalNoise\" baseFrequency=\"0.8\" numOctaves=\"2\" stitchTiles=\"stitch\"/></filter><rect width=\"100%\" height=\"100%\" filter=\"url(%23n)\" opacity=\"0.02\"/></svg>'); z-index:5; }

/* 17) Glass card variant */
.card.glass { background: color-mix(in srgb, var(--bg), white 5%); backdrop-filter: blur(10px) saturate(140%); }

/* 18) Animated waves divider */
.wave-divider { height: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary), transparent 70%), transparent 70%); opacity:.6; mask: radial-gradient(8px at 8px 50%, #0000 98%, #000) repeat-x; }


/* v2.9 — 35 New Design Utilities & Effects */

/* 1) Themed scrollbar */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--primary), transparent 40%) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), color-mix(in srgb, var(--primary), black 15%)); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* 2) Page corner vignette */
.page-vignette::before {
  content:""; position: fixed; inset: -10% -10% auto -10%; height: 65vh; z-index: 0; pointer-events:none;
  background: radial-gradient(800px 500px at 0% 0%, color-mix(in srgb, var(--primary), transparent 92%), transparent 70%),
              radial-gradient(800px 500px at 100% 0%, color-mix(in srgb, var(--accent-2), transparent 92%), transparent 70%);
  filter: blur(20px);
}

/* 3) Button variants */
.btn.outline { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.link { background: transparent; border: 0; padding: 6px 8px; }
.icon-btn { width: 40px; height: 40px; display:inline-grid; place-items:center; border-radius: 12px; border:1px solid var(--border); background: var(--card); }

/* 4) Floating action button */
.fab { position: fixed; bottom: 18px; right: 18px; width: 56px; height: 56px; border-radius: 50%; display:grid; place-items:center; box-shadow: var(--shadow); z-index: 1200; background: linear-gradient(180deg, color-mix(in srgb, var(--primary), white 6%), var(--primary)); color:#fff; }

/* 5) Shadow presets */
.shadow-sm { box-shadow: 0 4px 10px rgba(0,0,0,.12); }
.shadow-md { box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.shadow-lg { box-shadow: 0 16px 40px rgba(0,0,0,.25); }
.shadow-xl { box-shadow: 0 26px 70px rgba(0,0,0,.30); }

/* 6) Focus surface */
.focus-surface:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }

/* 7) Mask fade utility */
.mask-fade { -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); }

/* 8) Blob utility */
.blob { border-radius: 40% 60% 60% 40% / 40% 40% 60% 60%; transition: border-radius .6s; }
.blob:hover { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }

/* 9) Notched card */
.notch { position: relative; border:1px solid var(--border); border-radius: 16px; background: var(--card); }
.notch::before { content:""; position:absolute; top:-8px; left:24px; width:16px; height:16px; transform: rotate(45deg); background: var(--card); border-left:1px solid var(--border); border-top:1px solid var(--border); }

/* 10) Timeline */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background: color-mix(in srgb, var(--primary), transparent 70%); }
.timeline .tl-item { position:relative; margin:14px 0; }
.timeline .tl-item::before { content:""; position:absolute; left:-18px; top:6px; width:10px; height:10px; border-radius:50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary), transparent 75%); }

/* 11) Stepper */
.stepper { display:flex; gap:10px; }
.stepper .step { padding:8px 12px; border:1px solid var(--border); border-radius: 10px; }
.stepper .step.active { border-color: var(--primary); background: color-mix(in srgb, var(--primary), transparent 88%); }

/* 12) Accordion */
.accordion { border:1px solid var(--border); border-radius: 12px; background: var(--card); }
.accordion .ac-item + .ac-item { border-top:1px solid var(--border); }
.accordion .ac-trigger { width:100%; text-align:left; background:transparent; border:0; padding:14px; color:var(--text); font-weight:600; }
.accordion .ac-panel { display:none; padding:0 14px 14px; }
.accordion .ac-item.open .ac-panel { display:block; }

/* 13) Tabs */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); }
.tabs .tab { padding:8px 12px; border-radius: 10px 10px 0 0; border:1px solid transparent; }
.tabs .tab.active { border-color: var(--border); border-bottom-color: transparent; background: var(--card); }

/* 14) Tooltip */
[data-tooltip] { position:relative; cursor: help; }
[data-tooltip]:hover::after { content: attr(data-tooltip); position:absolute; left:50%; transform: translateX(-50%); bottom: calc(100% + 8px); white-space: nowrap; padding:6px 8px; border-radius: 8px; background: var(--bg-elev); color: var(--text); border:1px solid var(--border); box-shadow: var(--shadow); z-index:1500; }

/* 15) Toasts */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 4000; display:flex; flex-direction: column; gap: 8px; }
.toast { background: var(--card); border:1px solid var(--border); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); }

/* 16) Progress ring */
.progress-ring { --size: 70px; width: var(--size); height: var(--size); }
.progress-ring circle.bg { stroke: color-mix(in srgb, var(--text), transparent 86%); }
.progress-ring circle.fg { stroke: var(--primary); transition: stroke-dashoffset .4s ease; }

/* 17) Spinner */
.spinner { width: 20px; height: 20px; border: 3px solid color-mix(in srgb, var(--text), transparent 85%); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }

/* 18) Skeleton variants */
.skeleton.line { height: 12px; border-radius: 6px; }
.skeleton.block { height: 140px; }

/* 19) Masonry layout */
.masonry { column-count: 3; column-gap: 16px; }
@media (max-width: 900px) { .masonry { column-count: 2; } }
@media (max-width: 640px) { .masonry { column-count: 1; } }
.masonry > * { break-inside: avoid; margin: 0 0 16px; }

/* 20) Carousel (scroll-snap) */
.carousel { display:flex; gap:12px; overflow:auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.carousel > * { scroll-snap-align: start; min-width: 280px; }

/* 21) Media overlay gradient */
.media-overlay { position: relative; overflow:hidden; border-radius: var(--radius); }
.media-overlay::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.35)); pointer-events:none; }

/* 22) Spotlight effect layer */
.spotlight { position: fixed; inset:0; pointer-events: none; z-index: 1; background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.06), transparent 70%); mix-blend-mode: overlay; }

/* 23) Segmented control */
.segmented { display:inline-flex; border:1px solid var(--border); border-radius: 999px; overflow:hidden; }
.segmented button { padding: 8px 12px; border:0; background: var(--card); }
.segmented button.active { background: color-mix(in srgb, var(--primary), transparent 85%); }

/* 24) Switch */
.switch { position: relative; width: 44px; height: 24px; background: color-mix(in srgb, var(--text), transparent 85%); border-radius: 999px; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .2s; }
.switch.on { background: var(--primary); }
.switch.on::after { left: 23px; }

/* 25) Subnav */
.subnav { position: sticky; top: 68px; z-index: 1200; background: var(--card); border-bottom: 1px solid var(--border); }

/* 26) Breadcrumbs */
.breadcrumbs { display:flex; gap:6px; align-items:center; color: var(--muted); }
.breadcrumbs a { color: var(--text); text-decoration: none; }
.breadcrumbs .sep { opacity: .5; }

/* 27) Table row hover */
.table tr:hover { background: color-mix(in srgb, var(--primary), transparent 95%); }

/* 28) Corner ribbon */
.corner-ribbon { position:absolute; right:-8px; top:12px; transform: rotate(30deg); background: var(--primary); color:#fff; padding: 2px 14px; border-radius: 6px; font-size: .8rem; }

/* 29) Button sheen sweep */
.btn.sheen { position:relative; overflow:hidden; }
.btn.sheen::after { content:""; position:absolute; inset:-20% -40%; transform: translateX(-120%) rotate(15deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }
.btn.sheen:hover::after { animation: sweep .7s ease; }
@keyframes sweep { to { transform: translateX(150%) rotate(15deg); } }

/* 30) Avatar gradient ring */
.avatar { width: 40px; height: 40px; border-radius: 50%; background-size: cover; display:inline-block; }
.avatar.ring { padding: 2px; background: conic-gradient(var(--primary), var(--accent-2), var(--primary)); }
.avatar.ring img { border-radius: 50%; display:block; }

/* 31) Dropcap */
.dropcap:first-letter { float:left; font-size: 3.2em; line-height: .9; margin: .05em .2em 0 0; color: var(--primary); }

/* 32) Text glow */
.text-glow { text-shadow: 0 0 12px color-mix(in srgb, var(--primary), transparent 55%); }

/* 33) Section angled */
.section-angled { position: relative; }
.section-angled::before { content:""; position:absolute; left:0; right:0; top:-30px; height:30px; transform: skewY(-3deg); background: var(--bg-elev); }

/* 34) Selection improved */
::selection { background: color-mix(in srgb, var(--primary), transparent 70%); }

/* 35) Cursor hover scale for icon buttons */
.icon-btn:hover { transform: translateY(-1px) scale(1.04); }

/* nx-modal */
.nx-modal{position:fixed;inset:0;display:none;z-index:100000}
.nx-modal.open{display:block}
.nx-modal__backdrop{position:absolute;inset:0;background:rgba(7,10,20,.55);backdrop-filter:blur(8px)}
.nx-modal__card{position:relative;margin:6vh auto 0 auto;width:min(900px,92%);max-height:86vh;overflow:auto;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 120px rgba(0,0,0,.5)}
.nx-modal__close{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;cursor:pointer}
.nx-modal__body{padding:18px}
.nx-meta{font-size:12px;opacity:.8;margin-bottom:10px}
html.modal-open, body.modal-open{overflow:hidden}