```css
/* ============================================================
   taim88 — Deep Luxury Dark Theme
   Brand: taim88 | Domain: taim88apk.com
   Generated: Production-ready CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

/* ────────────────────────────────────────────────────────────
   1. CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────── */

:root {
  /* brand palette */
  --dv-accent:    #f0ee8a;
  --dv-bg:        #191910;
  --dv-ink:       #f6f6f4;
  --dv-muted:     #b5b48c;
  --dv-surface:   #1d1d16;
  --dv-btn-ink:   #232315;
  --dv-line:      #2e2e22;
  --dv-radius:    8px;

  /* CTA gradients */
  --dv-grad-dl:   linear-gradient(135deg, #6c7eef 0%, #948be4 100%);
  --dv-grad-login:linear-gradient(135deg, #23e7e3 0%, #4aed4d 100%);
  --dv-grad-reg:  linear-gradient(135deg, #ef7195 0%, #dc476f 100%);

  /* color-mix utilities */
  --dv-accent-10: color-mix(in srgb, var(--dv-accent) 10%, transparent);
  --dv-accent-14: color-mix(in srgb, var(--dv-accent) 14%, transparent);
  --dv-accent-20: color-mix(in srgb, var(--dv-accent) 20%, transparent);
  --dv-accent-30: color-mix(in srgb, var(--dv-accent) 30%, transparent);
  --dv-accent-40: color-mix(in srgb, var(--dv-accent) 40%, transparent);
  --dv-accent-50: color-mix(in srgb, var(--dv-accent) 50%, transparent);
  --dv-accent-6:  color-mix(in srgb, var(--dv-accent) 6%, transparent);
  --dv-accent-8:  color-mix(in srgb, var(--dv-accent) 8%, transparent);

  /* typography scale — fluid */
  --dv-fs-hero:   clamp(2.2rem, 5vw + .5rem, 3.8rem);
  --dv-fs-h2:     clamp(1.55rem, 3vw + .3rem, 2.3rem);
  --dv-fs-h3:     clamp(1.15rem, 2vw + .2rem, 1.5rem);
  --dv-fs-body:   clamp(.92rem, 1vw + .4rem, 1.05rem);
  --dv-fs-small:  clamp(.78rem, .8vw + .3rem, .88rem);
  --dv-fs-badge:  .69rem;

  /* spacing */
  --dv-gap:       clamp(1rem, 2vw, 1.6rem);
  --dv-section-py:clamp(3.2rem, 6vw, 5.6rem);
  --dv-max-w:     1200px;

  /* transitions */
  --dv-ease:      cubic-bezier(.22, .61, .36, 1);
  --dv-tr-fast:   .18s var(--dv-ease);
  --dv-tr-med:    .25s var(--dv-ease);
  --dv-tr-slow:   .35s var(--dv-ease);
}

/* ────────────────────────────────────────────────────────────
   2. KEYFRAMES — 7 animation groups
   ──────────────────────────────────────────────────────────── */

/* 2a. rise — entrance slide-up + fade */
@keyframes dvRise {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 2b. pulse — CTA breathing glow */
@keyframes dvPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--dv-accent-30); }
  50%      { box-shadow: 0 0 18px 4px var(--dv-accent-20); }
}

/* 2c. bob — gentle float */
@keyframes dvBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* 2d. shimmer — stripe / skeleton sweep */
@keyframes dvShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* 2e. drip — slow background scroll */
@keyframes dvDrip {
  0%   { background-position: 50% 0; }
  100% { background-position: 50% 200px; }
}

/* 2f. cascade — hero stagger entrance */
@keyframes dvCascade {
  0%   { opacity: 0; transform: translateY(22px) scale(.97); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 2g. glow-ring — particle pulse */
@keyframes dvGlowRing {
  0%, 100% { opacity: .35; transform: scale(1); }
  50%      { opacity: .7;  transform: scale(1.15); }
}

/* ────────────────────────────────────────────────────────────
   3. REDUCED MOTION
   ──────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────
   4. RESET & BASE
   ──────────────────────────────────────────────────────────── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Noto Sans', 'Nunito', system-ui, sans-serif;
  font-size: var(--dv-fs-body);
  line-height: 1.65;
  color: var(--dv-ink);
  background-color: var(--dv-bg);
  /* gradient-1,2,3: multi-layer radial-gradient background */
  background-image:
    radial-gradient(1100px 560px at 82% -12%, color-mix(in srgb, var(--dv-accent) 13%, transparent), transparent 60%),
    radial-gradient(880px 520px at -8% 18%, color-mix(in srgb, var(--dv-accent) 9%, transparent), transparent 55%),
    radial-gradient(600px 600px at 50% 50%, color-mix(in srgb, var(--dv-accent) 4%, transparent), transparent 70%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--dv-accent);
  text-decoration: none;
  transition: color var(--dv-tr-fast), background var(--dv-tr-fast);
}

/* hover-1 */
a:hover {
  color: #fff;
}

ul, ol { list-style: none; }

/* ────────────────────────────────────────────────────────────
   5. ACCESSIBILITY
   ──────────────────────────────────────────────────────────── */

/* skip link */
.dv-skip {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .6rem 1.2rem;
  background: var(--dv-accent);
  color: var(--dv-btn-ink);
  font-weight: 700;
  border-radius: var(--dv-radius);
  transition: top var(--dv-tr-fast);
}

.dv-skip:focus {
  top: 1rem;
}

/* focus-visible */
:focus-visible {
  outline: 2px solid var(--dv-accent);
  outline-offset: 3px;
}

/* ────────────────────────────────────────────────────────────
   6. LAYOUT CONTAINERS
   ──────────────────────────────────────────────────────────── */

.dv-wrap {
  width: 100%;
  max-width: var(--dv-max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* ────────────────────────────────────────────────────────────
   7. STICKY HEADER
   ──────────────────────────────────────────────────────────── */

.dv-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background:
    /* gradient-4: header glass */
    linear-gradient(180deg, var(--dv-surface), color-mix(in srgb, var(--dv-bg) 92%, transparent));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* shadow-1: header base */
  box-shadow: 0 1px 0 var(--dv-line);
  transition: box-shadow var(--dv-tr-med);
  /* gradient-5: bottom accent line */
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 5%, var(--dv-accent-30), transparent 95%) 1;
}

.dv-header--scrolled {
  /* shadow-2: header scrolled */
  box-shadow: 0 2px 12px rgba(0,0,0,.35), 0 1px 0 var(--dv-line);
}

.dv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--dv-max-w);
  margin-inline: auto;
  padding: .75rem clamp(1rem, 3vw, 2rem);
  gap: 1rem;
}

/* ────────────────────────────────────────────────────────────
   7a. LOGO
   ──────────────────────────────────────────────────────────── */

.dv-logo {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--dv-ink);
  text-decoration: none;
  letter-spacing: -.02em;
}

.dv-logo img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  /* shadow-3: logo glow */
  box-shadow: 0 0 12px var(--dv-accent-30);
}

/* hover-2 */
.dv-logo:hover {
  color: var(--dv-accent);
}

/* hover-3 */
.dv-logo:hover img {
  /* shadow-4: logo hover glow */
  box-shadow: 0 0 20px var(--dv-accent-40);
}

/* ────────────────────────────────────────────────────────────
   7b. NAVIGATION
   ──────────────────────────────────────────────────────────── */

.dv-nav {
  display: flex;
  align-items: center;
}

.dv-nav-menu {
  display: flex;
  gap: .25rem;
}

.dv-nav-link {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  font-size: var(--dv-fs-small);
  font-weight: 600;
  color: var(--dv-muted);
  border-radius: var(--dv-radius);
  transition: color var(--dv-tr-fast), background var(--dv-tr-fast), box-shadow var(--dv-tr-fast);
}

/* hover-4 */
.dv-nav-link:hover {
  color: var(--dv-ink);
  background: var(--dv-accent-14);
}

.dv-nav-link--active {
  color: var(--dv-accent);
  /* shadow-5: active nav underline */
  box-shadow: inset 0 -2px 0 var(--dv-accent);
}

/* hamburger toggle */
.dv-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: .5rem;
  background: none;
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  cursor: pointer;
}

.dv-nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--dv-ink);
  border-radius: 2px;
  transition: transform var(--dv-tr-fast), opacity var(--dv-tr-fast);
}

/* hover-5 */
.dv-nav-toggle:hover {
  border-color: var(--dv-accent-40);
  background: var(--dv-accent-6);
}

/* ────────────────────────────────────────────────────────────
   8. HERO — cascade animation
   ───────────────���──────────────────────────────────────────── */

.dv-hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* gradient-6: hero multi-layer bg */
  background:
    radial-gradient(700px 400px at 70% 30%, color-mix(in srgb, var(--dv-accent) 16%, transparent), transparent 55%),
    radial-gradient(500px 500px at 20% 80%, color-mix(in srgb, #6c7eef 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--dv-bg), color-mix(in srgb, var(--dv-surface) 70%, var(--dv-bg)));
  padding: var(--dv-section-py) 0;
}

.dv-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--dv-max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

/* gradient-7: gradient text title */
.dv-hero__title {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-hero);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, #ffffff 0%, var(--dv-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dvCascade .7s var(--dv-ease) both;
}

.dv-hero__sub {
  font-size: clamp(1rem, 1.5vw + .4rem, 1.25rem);
  color: var(--dv-muted);
  max-width: 620px;
  margin: 1rem auto 0;
  animation: dvCascade .7s var(--dv-ease) .12s both;
}

.dv-hero__perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.4rem;
  animation: dvCascade .7s var(--dv-ease) .22s both;
}

.dv-hero__perks span {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  font-size: var(--dv-fs-badge);
  font-weight: 600;
  color: var(--dv-accent);
  border: 1px solid var(--dv-accent-20);
  border-radius: 999px;
  background: var(--dv-accent-6);
}

.dv-hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-top: 2rem;
  animation: dvCascade .7s var(--dv-ease) .32s both;
}

/* ────────────────────────────────────────────────────────────
   8a. PARTICLES (pseudo-element glow orbs)
   ──────────────────────────────────────────────────────────── */

.dv-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.dv-particles::before,
.dv-particles::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  animation: dvGlowRing 4s ease-in-out infinite;
}

.dv-particles::before {
  width: 260px;
  height: 260px;
  top: 12%;
  left: 8%;
  /* gradient-8: particle orb 1 */
  background: radial-gradient(circle, color-mix(in srgb, var(--dv-accent) 18%, transparent), transparent 70%);
}

.dv-particles::after {
  width: 180px;
  height: 180px;
  bottom: 18%;
  right: 12%;
  /* gradient-9: particle orb 2 */
  background: radial-gradient(circle, color-mix(in srgb, #6c7eef 14%, transparent), transparent 70%);
  animation-delay: 2s;
}

/* ────────────────────────────────────────────────────────────
   8b. HERO CAROUSEL
   ──────────────────────────────────────────────────────────── */

.dv-carousel {
  position: relative;
  margin-top: 2.5rem;
  border-radius: calc(var(--dv-radius) * 2);
  overflow: hidden;
  /* shadow-6: carousel deep shadow */
  box-shadow: 0 18px 45px rgba(0,0,0,.42), 0 0 0 1px var(--dv-line);
}

.dv-carousel__slide {
  display: none;
  position: relative;
}

.dv-carousel__slide.is-active {
  display: block;
  animation: dvRise .45s var(--dv-ease) both;
}

.dv-carousel__slide img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* gradient-10: carousel image overlay */
.dv-carousel__slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--dv-bg) 0%, transparent 50%);
  pointer-events: none;
}

.dv-carousel__dots {
  display: flex;
  justify-content: center;
  gap: .45rem;
  padding: .8rem 0;
  position: absolute;
  bottom: .5rem;
  left: 0;
  right: 0;
  z-index: 3;
}

.dv-carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--dv-accent-40);
  background: transparent;
  cursor: pointer;
  transition: background var(--dv-tr-fast), transform var(--dv-tr-fast);
}

/* hover-6 */
.dv-carousel__dot:hover {
  background: var(--dv-accent-40);
  transform: scale(1.2);
}

.dv-carousel__dot.is-active {
  background: var(--dv-accent);
  border-color: var(--dv-accent);
  /* shadow-7: active dot glow */
  box-shadow: 0 0 8px var(--dv-accent-40);
}

/* ────────────────────────────────────────────────────────────
   9. BUTTONS — 3 CTA variants + generic
   ──────────────────────────────────────────────────────────── */

.dv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .7rem 1.6rem;
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-body);
  font-weight: 700;
  color: var(--dv-btn-ink);
  border: none;
  border-radius: var(--dv-radius);
  cursor: pointer;
  text-decoration: none;
  /* shadow-8: button base */
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
  transition: transform var(--dv-tr-fast), box-shadow var(--dv-tr-med), filter var(--dv-tr-fast);
  position: relative;
  overflow: hidden;
}

/* hover-7 */
.dv-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  /* shadow-9: button hover */
  box-shadow: 0 9px 20px color-mix(in srgb, var(--dv-accent) 22%, rgba(0,0,0,.32));
}

.dv-btn:active {
  transform: translateY(0);
}

/* gradient-11: download */
.dv-btn--dl {
  background: var(--dv-grad-dl);
  color: #fff;
  animation: dvPulse 3s ease-in-out infinite;
}

/* hover-8 */
.dv-btn--dl:hover {
  /* shadow-10: download hover */
  box-shadow: 0 10px 24px color-mix(in srgb, #6c7eef 30%, rgba(0,0,0,.35));
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* gradient-12: login */
.dv-btn--login {
  background: var(--dv-grad-login);
}

/* hover-9 */
.dv-btn--login:hover {
  /* shadow-11: login hover */
  box-shadow: 0 10px 24px color-mix(in srgb, #23e7e3 25%, rgba(0,0,0,.35));
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* gradient-13: register */
.dv-btn--reg {
  background: var(--dv-grad-reg);
  color: #fff;
}

/* hover-10 */
.dv-btn--reg:hover {
  /* shadow-12: register hover */
  box-shadow: 0 10px 24px color-mix(in srgb, #ef7195 25%, rgba(0,0,0,.35));
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* ghost variant */
.dv-btn--ghost {
  background: transparent;
  color: var(--dv-accent);
  border: 1.5px solid var(--dv-accent-30);
  box-shadow: none;
}

/* hover-11 */
.dv-btn--ghost:hover {
  background: var(--dv-accent-10);
  border-color: var(--dv-accent);
  color: var(--dv-ink);
  box-shadow: 0 4px 12px var(--dv-accent-10);
  transform: translateY(-2px);
}

/* shimmer stripe on buttons */
.dv-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  /* gradient-14: button shimmer stripe */
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  animation: dvShimmer 3s ease-in-out infinite;
}

/* ────────────────────────────────────────────────────────────
   10. SECTIONS
   ──────────────────────────────────────────────────────────── */

.dv-section {
  padding: var(--dv-section-py) 0;
  position: relative;
}

/* gradient-15: alternating section tint */
.dv-section:nth-of-type(even) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--dv-surface) 55%, transparent), transparent);
}

/* gradient-16: section decorative divider */
.dv-section + .dv-section::before {
  content: '';
  display: block;
  height: 1px;
  max-width: var(--dv-max-w);
  margin: 0 auto 0;
  background: linear-gradient(90deg, transparent, var(--dv-accent-30), transparent);
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
}

/* gradient-17: section title gradient text */
.dv-section__title {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h2);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 2rem;
  text-align: center;
  background: linear-gradient(180deg, #ffffff 20%, var(--dv-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: dvRise .5s var(--dv-ease) both;
}

/* subtitle line accent */
.dv-section__title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  margin: .7rem auto 0;
  border-radius: 2px;
  /* gradient-18: title underline */
  background: linear-gradient(90deg, var(--dv-accent), color-mix(in srgb, var(--dv-accent) 40%, transparent));
}

/* ────────────────────────────────────────────────────────────
   11. CARDS (generic)
   ──────────────────────────────────────────────────────────── */

.dv-card {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: calc(var(--dv-radius) * 1.5);
  overflow: hidden;
  /* shadow-13: card default */
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
  transition: transform var(--dv-tr-med), box-shadow var(--dv-tr-med), border-color var(--dv-tr-med);
  animation: dvRise .45s var(--dv-ease) both;
}

/* hover-12 */
.dv-card:hover {
  transform: translateY(-4px);
  border-color: var(--dv-accent-30);
  /* shadow-14: card hover */
  box-shadow: 0 14px 30px color-mix(in srgb, var(--dv-accent) 15%, transparent);
}

.dv-card__img {
  position: relative;
  overflow: hidden;
}

.dv-card__img img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform var(--dv-tr-slow), filter var(--dv-tr-slow);
}

/* hover-13 */
.dv-card:hover .dv-card__img img {
  transform: scale(1.03);
  filter: brightness(1.08);
}

/* gradient-19: card image overlay */
.dv-card__img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45%;
  background: linear-gradient(to top, var(--dv-surface) 0%, transparent 100%);
  pointer-events: none;
}

.dv-card__body {
  padding: 1.1rem 1.2rem 1.3rem;
}

.dv-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h3);
  font-weight: 700;
  color: var(--dv-ink);
  margin-bottom: .35rem;
  transition: color var(--dv-tr-fast);
}

/* hover-14 */
.dv-card:hover .dv-card__title {
  color: var(--dv-accent);
}

.dv-card__desc {
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────
   12. GAME CARD (compact variant)
   ───────────────���──────────────────────────────────────────── */

.dv-game-card {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  overflow: hidden;
  /* shadow-15: game card */
  box-shadow: 0 4px 12px rgba(0,0,0,.28);
  transition: transform var(--dv-tr-med), box-shadow var(--dv-tr-med), border-color var(--dv-tr-med);
  display: flex;
  flex-direction: column;
}

/* hover-15 */
.dv-game-card:hover {
  transform: translateY(-3px);
  border-color: var(--dv-accent-30);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--dv-accent) 12%, rgba(0,0,0,.35));
}

.dv-game-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform var(--dv-tr-slow);
}

/* hover-16 */
.dv-game-card:hover img {
  transform: scale(1.04);
}

.dv-game-card__info {
  padding: .8rem .9rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.dv-game-card__name {
  font-weight: 700;
  font-size: var(--dv-fs-small);
  color: var(--dv-ink);
}

.dv-game-card__meta {
  font-size: var(--dv-fs-badge);
  color: var(--dv-muted);
}

/* ────────────────────────────────────────────────────────────
   13. HOMEPAGE MODULE — quickStart
   ──────────────────────────────────────────────────────────── */

.dv-quickStart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--dv-gap);
}

.dv-quickStart .dv-card {
  text-align: center;
}

.dv-quickStart .dv-card__body {
  padding: 1.5rem 1.2rem;
}

.dv-quickStart__icon {
  font-size: 2.2rem;
  margin-bottom: .6rem;
  animation: dvBob 3s ease-in-out infinite;
}

/* ────────────────────────────────────────────────────────────
   14. HOMEPAGE MODULE — codeTabs
   ──────────────────────────────────────────────────────────── */

.dv-code-tabs {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: calc(var(--dv-radius) * 1.5);
  overflow: hidden;
  /* shadow-16: code tabs container */
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
}

.dv-code-tabs__nav {
  display: flex;
  border-bottom: 1px solid var(--dv-line);
  overflow-x: auto;
}

.dv-code-tab {
  padding: .65rem 1.2rem;
  font-size: var(--dv-fs-small);
  font-weight: 600;
  color: var(--dv-muted);
  background: none;
  border: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dv-tr-fast), border-color var(--dv-tr-fast), background var(--dv-tr-fast);
  white-space: nowrap;
}

/* hover-17 */
.dv-code-tab:hover {
  color: var(--dv-ink);
  background: var(--dv-accent-6);
}

.dv-code-tab.is-active {
  color: var(--dv-accent);
  border-bottom-color: var(--dv-accent);
}

.dv-code-panel {
  display: none;
  padding: 1.2rem;
}

.dv-code-panel.is-active {
  display: block;
  animation: dvRise .3s var(--dv-ease) both;
}

.dv-code-panel pre {
  font-family: 'Courier New', monospace;
  font-size: var(--dv-fs-small);
  color: var(--dv-ink);
  background: color-mix(in srgb, var(--dv-bg) 80%, var(--dv-surface));
  padding: 1rem 1.2rem;
  border-radius: var(--dv-radius);
  overflow-x: auto;
  border: 1px solid var(--dv-line);
  line-height: 1.7;
}

.dv-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .3rem .7rem;
  font-size: var(--dv-fs-badge);
  font-weight: 600;
  color: var(--dv-accent);
  background: var(--dv-accent-8);
  border: 1px solid var(--dv-accent-20);
  border-radius: var(--dv-radius);
  cursor: pointer;
  transition: background var(--dv-tr-fast), transform var(--dv-tr-fast);
  float: right;
  margin-bottom: .5rem;
}

/* hover-18 */
.dv-copy-btn:hover {
  background: var(--dv-accent-20);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────
   15. HOMEPAGE MODULE — editorPicks
   ──────────────────────────────────────────────────────────── */

.dv-editorPicks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--dv-gap);
}

/* ────────────────────────────────────────────────────────────
   16. HOMEPAGE MODULE — screenshots / gallery
   ──────────────────────────────────────────────────────────── */

.dv-screenshots {
  overflow: hidden;
}

.dv-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--dv-gap);
}

.dv-gallery__item {
  position: relative;
  border-radius: var(--dv-radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--dv-line);
  /* shadow-17: gallery item */
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  transition: transform var(--dv-tr-med), box-shadow var(--dv-tr-med);
}

/* hover-19 */
.dv-gallery__item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--dv-accent) 12%, rgba(0,0,0,.3));
}

.dv-gallery__item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--dv-tr-slow), filter var(--dv-tr-med);
}

/* hover-20 */
.dv-gallery__item:hover img {
  transform: scale(1.06);
  filter: brightness(1.1);
}

/* gradient-20: gallery item overlay */
.dv-gallery__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 50%);
  opacity: 0;
  transition: opacity var(--dv-tr-med);
  pointer-events: none;
}

/* hover-21 */
.dv-gallery__item:hover::after {
  opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   17. HOMEPAGE MODULE — roadmap / steps
   ──────────────────────────────────────────────────────────── */

.dv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dv-gap);
  counter-reset: step;
}

.dv-steps__item {
  position: relative;
  padding: 1.5rem 1.2rem 1.2rem;
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: calc(var(--dv-radius) * 1.5);
  counter-increment: step;
  transition: transform var(--dv-tr-med), border-color var(--dv-tr-med), box-shadow var(--dv-tr-med);
  /* shadow-18: step card */
  box-shadow: 0 4px 10px rgba(0,0,0,.22);
}

.dv-steps__item::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: 'Nunito', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  /* gradient-21: step number gradient */
  background: linear-gradient(135deg, var(--dv-accent), color-mix(in srgb, var(--dv-accent) 50%, #6c7eef));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .5rem;
}

/* hover-22 */
.dv-steps__item:hover {
  transform: translateY(-3px);
  border-color: var(--dv-accent-30);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--dv-accent) 10%, rgba(0,0,0,.3));
}

.dv-steps__item h3 {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h3);
  font-weight: 700;
  margin-bottom: .3rem;
}

.dv-steps__item p {
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
}

/* ────────────────────────────────────────────────────────────
   18. HOMEPAGE MODULE — articles
   ──────────────────────────────────────────────────────────── */

.dv-articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--dv-gap);
}

.dv-article-card {
  display: flex;
  flex-direction: column;
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: calc(var(--dv-radius) * 1.5);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.26);
  transition: transform var(--dv-tr-med), box-shadow var(--dv-tr-med), border-color var(--dv-tr-med);
}

/* hover-23 */
.dv-article-card:hover {
  transform: translateY(-3px);
  border-color: var(--dv-accent-20);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--dv-accent) 10%, rgba(0,0,0,.32));
}

.dv-article-card__img {
  position: relative;
  overflow: hidden;
}

.dv-article-card__img img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform var(--dv-tr-slow);
}

/* hover-24 */
.dv-article-card:hover .dv-article-card__img img {
  transform: scale(1.04);
}

/* gradient-22: article card overlay */
.dv-article-card__img::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, var(--dv-surface), transparent);
  pointer-events: none;
}

.dv-article-card__body {
  padding: 1rem 1.2rem 1.3rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dv-article-card__tag {
  display: inline-block;
  font-size: var(--dv-fs-badge);
  font-weight: 700;
  color: var(--dv-accent);
  background: var(--dv-accent-8);
  border: 1px solid var(--dv-accent-20);
  border-radius: 999px;
  padding: .15rem .6rem;
  margin-bottom: .5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}

.dv-article-card__title {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h3);
  font-weight: 700;
  color: var(--dv-ink);
  margin-bottom: .3rem;
  transition: color var(--dv-tr-fast);
}

/* hover-25 */
.dv-article-card:hover .dv-article-card__title {
  color: var(--dv-accent);
}

.dv-article-card__excerpt {
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
  flex: 1;
}

.dv-article-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .8rem;
  padding-top: .6rem;
  border-top: 1px solid var(--dv-line);
  font-size: var(--dv-fs-badge);
  color: var(--dv-muted);
}

/* ────────────────────────────────────────────────────────────
   19. PERKS / BENEFITS
   ──────────────────────────────────────────────────────────── */

.dv-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--dv-gap);
}

.dv-perks__card {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: calc(var(--dv-radius) * 1.5);
  padding: 1.4rem 1.3rem;
  text-align: center;
  transition: transform var(--dv-tr-med), border-color var(--dv-tr-med), box-shadow var(--dv-tr-med);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

/* hover-26 */
.dv-perks__card:hover {
  transform: translateY(-3px);
  border-color: var(--dv-accent-20);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--dv-accent) 8%, rgba(0,0,0,.25));
}

.dv-perks__card__icon {
  font-size: 2rem;
  margin-bottom: .6rem;
  animation: dvBob 3.5s ease-in-out infinite;
}

.dv-perks__card h3 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  margin-bottom: .25rem;
}

.dv-perks__card p {
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
}

/* ────────────────────────────────────────────────────────────
   20. COMPARE TABLE
   ──────────────────────────────────────────────────────────── */

.dv-compare {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-line);
}

.dv-compare__table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: var(--dv-fs-small);
}

.dv-compare__table thead {
  /* gradient-23: table header bg */
  background: linear-gradient(180deg, var(--dv-surface), color-mix(in srgb, var(--dv-bg) 80%, var(--dv-surface)));
}

.dv-compare__table th {
  padding: .75rem 1rem;
  text-align: left;
  font-weight: 700;
  color: var(--dv-accent);
  border-bottom: 1px solid var(--dv-line);
}

.dv-compare__table td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--dv-line);
  color: var(--dv-ink);
}

/* alternating rows */
.dv-compare__table tbody tr:nth-of-type(even) {
  background: var(--dv-accent-6);
}

/* hover-27 */
.dv-compare__table tbody tr:hover {
  background: var(--dv-accent-10);
}

/* ────────────────────────────────────────────────────────────
   21. FORUM
   ──────────────────────────────────────────────────────────── */

.dv-forum {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.dv-forum__post {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  transition: border-color var(--dv-tr-fast), background var(--dv-tr-fast);
}

/* hover-28 */
.dv-forum__post:hover {
  border-color: var(--dv-accent-20);
  background: color-mix(in srgb, var(--dv-surface) 90%, var(--dv-accent));
}

.dv-forum__post__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  /* shadow-19: avatar shadow */
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

.dv-forum__post__body {
  flex: 1;
  min-width: 0;
}

.dv-forum__post__author {
  font-weight: 700;
  font-size: var(--dv-fs-small);
  color: var(--dv-accent);
}

.dv-forum__post__text {
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
  margin-top: .2rem;
}

/* ────────────────────────────────────────────────────────────
   22. FOOTER
   ──────────────────────────────────────────────────────────── */

.dv-footer {
  position: relative;
  padding: 2.5rem 0 1.5rem;
  /* gradient-24: footer top line */
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent 5%, var(--dv-accent-30), transparent 95%) 1;
  background:
    /* gradient-25: footer subtle bg */
    radial-gradient(800px 300px at 50% 0%, color-mix(in srgb, var(--dv-accent) 5%, transparent), transparent 60%),
    var(--dv-surface);
}

.dv-footer__inner {
  max-width: var(--dv-max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.dv-footer__col h4 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: var(--dv-fs-body);
  color: var(--dv-ink);
  margin-bottom: .8rem;
}

.dv-footer__col a {
  display: block;
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
  padding: .2rem 0;
  transition: color var(--dv-tr-fast), padding-left var(--dv-tr-fast);
}

/* hover-29 */
.dv-footer__col a:hover {
  color: var(--dv-accent);
  padding-left: .3rem;
}

.dv-footer__bottom {
  max-width: var(--dv-max-w);
  margin: 2rem auto 0;
  padding: 1rem clamp(1rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--dv-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  font-size: var(--dv-fs-badge);
  color: var(--dv-muted);
}

.dv-footer__bottom a {
  color: var(--dv-muted);
}

/* hover-30 */
.dv-footer__bottom a:hover {
  color: var(--dv-accent);
}

/* ────────────────────────────────────────────────────────────
   23. MOBILE FLOATING BANNER
   ──────────────────────────────────────────────────────────── */

.dv-mobile-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  /* gradient-26: mobile banner bg */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--dv-surface) 96%, transparent), var(--dv-surface));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: .65rem clamp(.8rem, 2vw, 1.2rem);
  border-top: 1px solid var(--dv-line);
  /* shadow-20: mobile banner */
  box-shadow: 0 -4px 16px rgba(0,0,0,.35);
}

.dv-mobile-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  max-width: var(--dv-max-w);
  margin-inline: auto;
}

.dv-mobile-banner__text {
  font-size: var(--dv-fs-small);
  font-weight: 600;
  color: var(--dv-ink);
  flex: 1;
  min-width: 0;
}

.dv-mobile-banner .dv-btn {
  font-size: var(--dv-fs-small);
  padding: .55rem 1rem;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────
   24. BREADCRUMB
   ──────────────────────────────────────────────────────────── */

.dv-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  padding: .8rem 0;
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
}

.dv-breadcrumb a {
  color: var(--dv-muted);
  transition: color var(--dv-tr-fast);
}

/* hover-31 */
.dv-breadcrumb a:hover {
  color: var(--dv-accent);
}

.dv-breadcrumb__sep {
  color: var(--dv-line);
  font-size: .7rem;
}

.dv-breadcrumb__current {
  color: var(--dv-ink);
  font-weight: 600;
}

/* ────────────────────────────────────────────────────────────
   25. CHANNEL HERO
   ──────────────────────────────────────────────────────────── */

.dv-ch-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  padding: 2.5rem 0 2rem;
  overflow: hidden;
  /* gradient-27: channel hero bg layers */
  background:
    radial-gradient(600px 350px at 75% 30%, color-mix(in srgb, var(--dv-accent) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--dv-bg), var(--dv-surface));
}

.dv-ch-hero__inner {
  max-width: var(--dv-max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
  position: relative;
  z-index: 2;
}

/* gradient-28: channel hero title gradient text */
.dv-ch-hero__title {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h2);
  font-weight: 800;
  background: linear-gradient(135deg, #fff 30%, var(--dv-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dv-ch-hero__desc {
  font-size: var(--dv-fs-body);
  color: var(--dv-muted);
  max-width: 580px;
  margin-top: .4rem;
}

/* ────────────────────────────────────────────────────────────
   26. TABLE OF CONTENTS (sidebar)
   ──────────────────────────────────────────────────────────── */

.dv-toc {
  position: sticky;
  top: 5rem;
  padding: 1rem 1.2rem;
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  font-size: var(--dv-fs-small);
}

.dv-toc__title {
  font-weight: 700;
  color: var(--dv-ink);
  margin-bottom: .6rem;
  font-size: var(--dv-fs-body);
}

.dv-toc a {
  display: block;
  padding: .3rem .5rem;
  color: var(--dv-muted);
  border-left: 2px solid transparent;
  border-radius: 0 var(--dv-radius) var(--dv-radius) 0;
  transition: color var(--dv-tr-fast), border-color var(--dv-tr-fast), background var(--dv-tr-fast);
}

/* hover-32 */
.dv-toc a:hover {
  color: var(--dv-ink);
  border-left-color: var(--dv-accent-40);
  background: var(--dv-accent-6);
}

.dv-toc a.is-active {
  color: var(--dv-accent);
  border-left-color: var(--dv-accent);
  background: var(--dv-accent-8);
}

/* ────────────────────────────────────────────────────────────
   27. FAQ — details/summary
   ──────────────────────────────────────────────────────────── */

.dv-faq-list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: 780px;
  margin-inline: auto;
}

.dv-faq-item {
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  overflow: hidden;
  transition: border-color var(--dv-tr-fast);
}

.dv-faq-item[open] {
  border-color: var(--dv-accent-30);
}

.dv-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1.2rem;
  font-weight: 700;
  font-size: var(--dv-fs-body);
  color: var(--dv-ink);
  cursor: pointer;
  list-style: none;
  transition: background var(--dv-tr-fast), color var(--dv-tr-fast);
}

.dv-faq-item summary::-webkit-details-marker { display: none; }

.dv-faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: var(--dv-accent);
  transition: transform var(--dv-tr-fast);
}

.dv-faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* hover-33 */
.dv-faq-item summary:hover {
  background: var(--dv-accent-6);
  color: var(--dv-accent);
}

.dv-faq-item__answer {
  padding: 0 1.2rem 1rem;
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
  line-height: 1.65;
  animation: dvRise .25s var(--dv-ease) both;
}

/* ────────────────────────────────────────────────────────────
   28. GUIDE CARD
   ──────────────────────────────────────────────────────────── */

.dv-guide-card {
  display: flex;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: var(--dv-surface);
  border: 1px solid var(--dv-line);
  border-radius: var(--dv-radius);
  transition: transform var(--dv-tr-med), border-color var(--dv-tr-med), box-shadow var(--dv-tr-med);
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}

/* hover-34 */
.dv-guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--dv-accent-20);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--dv-accent) 8%, rgba(0,0,0,.25));
}

.dv-guide-card__icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  animation: dvBob 4s ease-in-out infinite;
}

.dv-guide-card__title {
  font-weight: 700;
  color: var(--dv-ink);
  margin-bottom: .2rem;
  transition: color var(--dv-tr-fast);
}

/* hover-35 */
.dv-guide-card:hover .dv-guide-card__title {
  color: var(--dv-accent);
}

.dv-guide-card__desc {
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
}

/* ────────────────────────────────────────────────────────────
   29. SEARCH
   ──────────────────────────────────────────────────────────── */

.dv-search-input {
  width: 100%;
  padding: .7rem 1.1rem .7rem 2.6rem;
  font-size: var(--dv-fs-body);
  font-family: 'Noto Sans', sans-serif;
  color: var(--dv-ink);
  background: var(--dv-surface);
  border: 1.5px solid var(--dv-line);
  border-radius: 999px;
  outline: none;
  transition: border-color var(--dv-tr-fast), box-shadow var(--dv-tr-fast);
}

.dv-search-input::placeholder {
  color: var(--dv-muted);
}

.dv-search-input:focus {
  border-color: var(--dv-accent);
  box-shadow: 0 0 0 3px var(--dv-accent-14);
}

.dv-search-results {
  margin-top: .8rem;
}

/* ────────────────────────────────────────────────────────────
   30. HELP SECTION
   ──────────────────────────────────────────────────────────── */

.dv-help-section {
  max-width: 780px;
  margin-inline: auto;
}

.dv-help-section h2 {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h2);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ────────────────────────────────────────────────────────────
   31. BYLINE & META
   ──────────────────────────────────────────────────────────── */

.dv-byline {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--dv-fs-small);
  color: var(--dv-muted);
  padding: .6rem 0;
}

.dv-byline img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.dv-byline__name {
  font-weight: 700;
  color: var(--dv-ink);
}

/* ────────────────────────────────────────────────────────────
   32. SOURCE BOX / CODE BLOCK
   ──────────────────────────────────────────────────────────── */

.dv-src-box {
  font-family: 'Courier New', monospace;
  font-size: var(--dv-fs-small);
  color: var(--dv-ink);
  background: color-mix(in srgb, var(--dv-bg) 85%, var(--dv-surface));
  padding: 1rem 1.2rem;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-line);
  overflow-x: auto;
  line-height: 1.7;
  tab-size: 2;
}

/* ────────────────────────────────────────────────────────────
   33. STORY / ARTICLE IMAGES
   ──────────────────────────────────────────────────────────── */

.dv-story-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--dv-gap);
  margin: 1.5rem 0;
}

.dv-story-images figure {
  border-radius: var(--dv-radius);
  overflow: hidden;
  border: 1px solid var(--dv-line);
}

.dv-story-images img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  transition: transform var(--dv-tr-slow);
}

/* hover-36 */
.dv-story-images figure:hover img {
  transform: scale(1.03);
}

.dv-story-images figcaption {
  padding: .5rem .7rem;
  font-size: var(--dv-fs-badge);
  color: var(--dv-muted);
  background: var(--dv-surface);
}

/* ────────────────────────────────────────────────────────────
   34. BADGES & TAGS
   ──────────────────────────────────────────────────────────── */

.dv-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .55rem;
  font-size: var(--dv-fs-badge);
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--dv-accent);
  background: var(--dv-accent-8);
  border: 1px solid var(--dv-accent-20);
  border-radius: 999px;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.dv-badge--new {
  color: #4aed4d;
  background: color-mix(in srgb, #4aed4d 8%, transparent);
  border-color: color-mix(in srgb, #4aed4d 20%, transparent);
}

.dv-badge--hot {
  color: #ef7195;
  background: color-mix(in srgb, #ef7195 8%, transparent);
  border-color: color-mix(in srgb, #ef7195 20%, transparent);
}

/* ────────────────────────────────────────────────────────────
   35. PROSE / ARTICLE BODY
   ──────────────────────────────────────────────────────────── */

.dv-prose {
  max-width: 740px;
  margin-inline: auto;
  line-height: 1.75;
}

.dv-prose h2 {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h2);
  font-weight: 800;
  margin: 2rem 0 .8rem;
  /* gradient-29: prose h2 gradient */
  background: linear-gradient(135deg, #fff 10%, var(--dv-accent) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dv-prose h3 {
  font-family: 'Nunito', sans-serif;
  font-size: var(--dv-fs-h3);
  font-weight: 700;
  margin: 1.5rem 0 .6rem;
  color: var(--dv-ink);
}

.dv-prose p {
  margin-bottom: 1rem;
  color: var(--dv-muted);
}

.dv-prose a {
  color: var(--dv-accent);
  text-decoration: underline;
  text-decoration-color: var(--dv-accent-30);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dv-tr-fast);
}

/* hover-37 */
.dv-prose a:hover {
  text-decoration-color: var(--dv-accent);
  color: #fff;
}

.dv-prose ul, .dv-prose ol {
  padding-left: 1.3rem;
  margin-bottom: 1rem;
}

.dv-prose ul { list-style: disc; }
.dv-prose ol { list-style: decimal; }

.dv-prose li {
  margin-bottom: .3rem;
  color: var(--dv-muted);
}

.dv-prose blockquote {
  margin: 1.2rem 0;
  padding: .8rem 1.2rem;
  border-left: 3px solid var(--dv-accent);
  background: var(--dv-accent-6);
  border-radius: 0 var(--dv-radius) var(--dv-radius) 0;
  color: var(--dv-muted);
  font-style: italic;
}

.dv-prose pre {
  margin: 1.2rem 0;
  font-family: 'Courier New', monospace;
  font-size: var(--dv-fs-small);
  background: color-mix(in srgb, var(--dv-bg) 85%, var(--dv-surface));
  padding: 1rem 1.2rem;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-line);
  overflow-x: auto;
  line-height: 1.7;
}

.dv-prose code {
  font-family: 'Courier New', monospace;
  font-size: .88em;
  padding: .12rem .35rem;
  background: var(--dv-accent-8);
  border-radius: 4px;
  color: var(--dv-accent);
}

.dv-prose pre code {
  padding: 0;
  background: none;
  color: var(--dv-ink);
}

.dv-prose img {
  border-radius: var(--dv-radius);
  margin: 1rem 0;
}

/* ────────────────────────────────────────────────────────────
   36. DRIP / RAIN BACKGROUND TEXTURE
   ──────────────────────────────────────────────────────────── */

.dv-rain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* gradient-30: rain texture (radial dots) */
  background-image:
    radial-gradient(1px 1px at 15% 25%, color-mix(in srgb, var(--dv-accent) 20%, transparent), transparent),
    radial-gradient(1px 1px at 45% 55%, color-mix(in srgb, var(--dv-accent) 14%, transparent), transparent),
    radial-gradient(1px 1px at 75% 35%, color-mix(in srgb, var(--dv-accent) 16%, transparent), transparent),
    radial-gradient(1px 1px at 55% 78%, color-mix(in srgb, var(--dv-accent) 12%, transparent), transparent);
  background-size: 200px 200px;
  animation: dvDrip 20s linear infinite;
  opacity: .5;
}

/* ────────────────────────────────────────────────────────────
   37. LOADING SHIMMER SKELETON
   ──────────────────────────────────────────────────────────── */

.dv-skeleton {
  /* gradient-31: shimmer loading */
  background: linear-gradient(90deg, var(--dv-surface) 25%, color-mix(in srgb, var(--dv-accent) 8%, var(--dv-surface)) 50%, var(--dv-surface) 75%);
  background-size: 800px 100%;
  animation: dvShimmer 1.5s ease-in-out infinite;
  border-radius: var(--dv-radius);
}

.dv-skeleton--text {
  height: 1em;
  margin-bottom: .5rem;
}

.dv-skeleton--img {
  aspect-ratio: 16/9;
}

.dv-skeleton--avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

/* ────────────────────────────────────────────────────────────
   38. ADDITIONAL HOVER INTERACTIONS
   ──────────────────────────────────────────────────────────── */

/* hover-38: generic link with arrow */
.dv-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  color: var(--dv-accent);
  transition: gap var(--dv-tr-fast), color var(--dv-tr-fast);
}

.dv-link-arrow::after {
  content: '→';
  transition: transform var(--dv-tr-fast);
}

.dv-link-arrow:hover {
  gap: .5rem;
  color: #fff;
}

.dv-link-arrow:hover::after {
  transform: translateX(2px);
}

/* hover-39: image thumbnail in any context */
.dv-thumb {
  display: block;
  overflow: hidden;
  border-radius: var(--dv-radius);
  border: 1px solid var(--dv-line);
  transition: border-color var(--dv-tr-med);
}

.dv-thumb img {
  transition: transform var(--dv-tr-slow), filter var(--dv-tr-med);
}

.dv-thumb:hover {
  border-color: var(--dv-accent-30);
}

.dv-thumb:hover img {
  transform: scale(1.04);
  filter: brightness(1.08);
}

/* hover-40: icon button (share, like, etc.) */
.dv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--dv-line);
  background: var(--dv-surface);
  color: var(--dv-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: color var(--dv-tr-fast), background var(--dv-tr-fast), border-color var(--dv-tr-fast), transform var(--dv-tr-fast);
}

.dv-icon-btn:hover {
  color: var(--dv-accent);
  background: var(--dv-accent-10);
  border-color: var(--dv-accent-30);
  transform: translateY(-2px);
}

/* hover-41: tag / chip */
.dv-chip {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  font-size: var(--dv-fs-badge);
  font-weight: 600;
  color: var(--dv-muted);
  background: var(--dv-accent-6);
  border: 1px solid var(--dv-line);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--dv-tr-fast), background var(--dv-tr-fast), border-color var(--dv-tr-fast);
}

.dv-chip:hover {
  color: var(--dv-accent);
  background: var(--dv-accent-14);
  border-color: var(--dv-accent-30);
}

/* ────────────────────────────────────────────────────────────
   39. RESPONSIVE — desktop ≤ 768px
   ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .dv-nav-toggle {
    display: flex;
  }

  .dv-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--dv-surface);
    border-bottom: 1px solid var(--dv-line);
    padding: .5rem 1rem;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
  }

  .dv-nav-menu.is-open {
    display: flex;
    animation: dvRise .25s var(--dv-ease) both;
  }

  .dv-nav-link {
    padding: .6rem .5rem;
  }

  .dv-hero {
    min-height: 420px;
  }

  .dv-hero__title {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
  }

  .dv-carousel {
    border-radius: var(--dv-radius);
  }

  .dv-quickStart,
  .dv-editorPicks,
  .dv-gallery,
  .dv-steps,
  .dv-perks,
  .dv-articles,
  .dv-story-images {
    grid-template-columns: 1fr;
  }

  .dv-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .dv-mobile-banner {
    display: block;
  }

  /* add bottom padding to body for mobile banner */
  body {
    padding-bottom: 72px;
  }

  .dv-toc {
    position: static;
  }

  .dv-ch-hero {
    min-height: 200px;
  }

  .dv-forum__post {
    flex-direction: column;
    gap: .5rem;
  }
}

/* ────────────────────────────────────────────────────────────
   40. RESPONSIVE — small ≤ 600px
   ──────────────────────────────────────────────────────────── */

@media (max-width: 600px) {

  .dv-hero__cta {
    flex-direction: column;
    align-items: stretch;
  }

  .dv-hero__cta .dv-btn {
    justify-content: center;
  }

  .dv-footer__inner {
    grid-template-columns: 1fr;
  }

  .dv-compare__table {
    font-size: var(--dv-fs-badge);
  }

  .dv-steps__item::before {
    font-size: 1.5rem;
  }

  .dv-hero__perks {
    flex-direction: column;
    align-items: center;
  }

  .dv-gallery {
    grid-template-columns: 1fr 1fr;
  }

  .dv-editorPicks {
    grid-template-columns: 1fr 1fr;
  }

  .dv-game-card img {
    aspect-ratio: 1/1;
  }
}

/* ────────────────────────────────────────────────────────────
   41. ARTICLE PAGE LAYOUT (two-column with sidebar)
   ──────────────────────���───────────────────────────────────── */

.dv-article-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 2rem;
  max-width: var(--dv-max-w);
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

@media (max-width: 768px) {
  .dv-article-layout {
    grid-template-columns: 1fr;
  }
}

/* ────────────────────────────────────────────────────────────
   42. UTILITY CLASSES
   ──────────────────────────────────────────────────────────── */

.dv-text-center { text-align: center; }
.dv-text-muted  { color: var(--dv-muted); }
.dv-text-accent { color: var(--dv-accent); }
.dv-mt-1 { margin-top: .5rem; }
.dv-mt-2 { margin-top: 1rem; }
.dv-mt-3 { margin-top: 1.5rem; }
.dv-mt-4 { margin-top: 2rem; }
.dv-mb-1 { margin-bottom: .5rem; }
.dv-mb-2 { margin-bottom: 1rem; }
.dv-mb-3 { margin-bottom: 1.5rem; }
.dv-gap-1 { gap: .5rem; }
.dv-gap-2 { gap: 1rem; }
.dv-flex { display: flex; }
.dv-flex-col { flex-direction: column; }
.dv-flex-wrap { flex-wrap: wrap; }
.dv-items-center { align-items: center; }
.dv-justify-center { justify-content: center; }
.dv-justify-between { justify-content: space-between; }
.dv-grid { display: grid; }
.dv-hidden { display: none; }
.dv-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* animation entrance — stagger children */
.dv-stagger > * {
  animation: dvRise .45s var(--dv-ease) both;
}
.dv-stagger > *:nth-child(1) { animation-delay: 0s; }
.dv-stagger > *:nth-child(2) { animation-delay: .06s; }
.dv-stagger > *:nth-child(3) { animation-delay: .12s; }
.dv-stagger > *:nth-child(4) { animation-delay: .18s; }
.dv-stagger > *:nth-child(5) { animation-delay: .24s; }
.dv-stagger > *:nth-child(6) { animation-delay: .3s; }
.dv-stagger > *:nth-child(7) { animation-delay: .36s; }
.dv-stagger > *:nth-child(8) { animation-delay: .42s; }
.dv-stagger > *:nth-child(9) { animation-delay: .48s; }
.dv-stagger > *:nth-child(10) { animation-delay: .54s; }
.dv-stagger > *:nth-child(11) { animation-delay: .6s; }
.dv-stagger > *:nth-child(12) { animation-delay: .66s; }

/* ────────────────────────────────────────────────────────────
   43. PRINT STYLES
   ──────────────────────────────────────────────────────────── */

@media print {
  body {
    background: #fff;
    color: #000;
  }
  .dv-header,
  .dv-footer,
  .dv-mobile-banner,
  .dv-particles,
  .dv-rain {
    display: none;
  }
  .dv-card,
  .dv-article-card,
  .dv-game-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
}
```